미완성이었던 명함과 랜딩페이지, 코드 수정은 claude와 함께

소개

모각 오프 모임에서 다른 분들의 명함을 받았는데, 정작 저는 드릴 명함이 없었습니다 😅 그 순간, 문득 "내 명함은 곧 나의 정체성"이라는 생각이 들었어요. 그동안 명함을 만들지 못했던 이유는 무엇을 담아야 할지 명확하지 않았기 때문이었습니다.

그래서 이 기회에, 모각에서 미완성으로 남아 있던 랜딩 페이지도 함께 완성하기로 마음먹었습니다. 핵심은 '완성'이었고, 이번에는 복잡하게 하지 않고 단순하게 시작해보기로 했어요.

진행 방법

Canva로 명함 제작

전면에는 이름과 간단한 소개
후면에는 랜딩 페이지로 연결되는 QR코드 삽입

PRD builder 를 활용하여 PRD 문서 만들기

Lovable 로 개인 브랜딩 랜딩페이지 제작

GPT와 대화를 통해 내가 어떤 사람인지 정리
기존에 쌓아온 블로그 글과 유튜브 영상을 어떻게 보여줄지 고민
핵심만 담은 소개글과 사진으로 구성
하단에는 블로그와 유튜브 링크 연결

실제 PRD 문서는 다음과 같습니다.

3. 페이지 문서 구조 (HTML 예시)

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dr. JS | 균형의 철학</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="description" content="통증의학과 전문의 Dr. JS의 균형 철학. JS Healing Art 강사로서 전하는 삶과 몸의 이야기.">
  </head>
  <body>
    <section class="hero">
      <div class="overlay">
        <h1>삶에도, 몸에도, 생각에도<br>‘균형’이 필요합니다.</h1>
      </div>
    </section>

    <section class="intro">
      <p>균형을 잃으면 통증이 시작됩니다.<br>
      몸의 통증은 작은 불균형에서 시작합니다.<br>
      인생의 문제도 삶과 생각의 미세한 균형이 무너질 때 찾아옵니다.</p>

      <p>저는 통증의학과 전문의이자 JS Healing Art 강사로서,<br>
      ‘균형’이 무너진 곳을 찾아 바로잡는 일을 합니다.<br>
      이 원칙은 치료뿐 아니라 투자, 인간 관계 등 모든 일에 적용됩니다.</p>

      <p>균형을 되찾으면, 삶은 다시 편안해집니다.</p>
    </section>

    <section class="cta">
      <a href="https://blog.naver.com/drwakeup/223833860280" target="_blank" class="button">📝 블로그에서 더 보기</a>
      <a href="https://youtu.be/90yrOu7HS5A?si=tcBKQH2Zx0N7hUU7" target="_blank" class="button">🎥 영상으로 보기</a>
    </section>
  </body>
</html>

4. 파일 구조

personal-landing/
├── index.html
├── style.css
├── assets/
│   └── hero.jpg ← (업로드한 이미지 사용)

5. style.css 요약 (배경 이미지와 감성 톤)

body {
  font-family: 'Pretendard', sans-serif;
  margin: 0;
  padding: 0;
  color: #222;
  background-color: #FAF7F2;
}

.hero {
  background: url('assets/hero.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
  position: relative;
}

.overlay {
  background-color: rgba(255, 255, 255, 0.85);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 2rem;
}

.hero h1 {
  font-size: 2rem;
  line-height: 1.5;
}

.intro {
  padding: 2rem;
  font-size: 1.1rem;
  line-height: 1.8;
}

.cta {
  text-align: center;
  padding: 2rem;
}

.button {
  display: inline-block;
  margin: 0.5rem;
  padding: 1rem 2rem;
  background-color: #444;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

위의 내용과 함께 메인 이미지를 함께 첨부하여 페이지 만들어달라고 요청

수정 사항들은 커서를 활용하라고 모각에서 배웠지만,

커서 사용이 저에게는 어려운 일이라 좀 쉽게 해보고자 cluade를 활용했습니다.

텍스트 수정은 Claude 도움 받기

처음에는 러버블에서 직접 텍스트 입력했지만, 무료 사용자에게는 하루에 5번으로 제한되어있기 때문에 Claude에서 텍스트 수정을 요청하고 바로바로 수정 사항의 결과물을 확인할 수 있었습니다.
마지막에 완성된 결과물을 바탕으로 그동안 수정한 내용을 정리해달라고 요청한 후 마지막에 러버블에서 한번에 반영해서 완성하였습니다.