Claude Code만으로 랜딩 페이지를 구축해 월 매출 1,000만 엔을 달성한 방법

@gagarot200
일본어2026년 8월 12일
181K
68
1
1
176

TL;DR

카피라이팅부터 코딩, 데이터 기반 최적화까지 랜딩 페이지의 전체 수명 주기를 Claude Code로 관리하여 괄목할 만한 매출 성장을 이뤄낸 포괄적인 가이드입니다.

저는 새로 담당하게 된 제품의 랜딩 페이지(LP)를 "Claude Code만 사용해서" 만들었고, 오픈 3개월 차에 월 매출 1,000만 엔을 돌파했습니다. 디자이너에게 외주를 맡기지 않았고, 개발 비용도 없었으며, LP 제작 회사에 의뢰하지도 않았습니다. 사용한 것은 Claude Code와 "프롬프트를 작성하는 데 쏟은 시간"뿐이었습니다.

수치로 정리하면 다음과 같습니다.

  • 상품 가격: 98,000 엔 (온라인 강의, 일시불)
  • 월 전환 건수: 약 105건
  • 월 매출: 약 1,030만 엔
  • LP 기준 CVR(전환율): 광고 트래픽 대비 약 1.8%
  • 실제 LP 제작 비용: 월 수천 엔 (Claude Code 이용료 + 도메인/서버)

"LP 제작 회사에 맡기면 30만~100만 엔이 든다"고들 하는 세상에서, 제작 비용은 거의 0원이었습니다. 게다가 오픈 후 개선(A/B 테스트, 카피 수정, 섹션 교체)까지 Claude Code가 처리하기 때문에 개선 속도는 외주 시절과 비교할 수 없을 정도입니다. 이 글에서는 실제로 사용한 프롬프트와 함께 전체 과정을 공개합니다.

이 글에서 배울 수 있는 것

  1. Claude Code로 LP를 만드는 전체 흐름 (요건 정의 → 카피 작성 → 구현 → 측정 → 개선)
  2. 각 단계에서 실제로 사용한 프롬프트 전문
  3. 1.8%의 CVR을 달성하기 위해 LP 구조에서 신경 쓴 부분
  4. 오픈 후 A/B 테스트와 개선을 Claude Code에 맡기는 방법
  5. 진행하면서 막혔던 지점과 이를 피하는 방법

"Claude Code만으로" 만들기로 결심한 이유

저는 지금까지 LP 제작을 세 차례 외주했고, 페이지당 35만~80만 엔이 들었습니다. 완성된 결과물에 불만은 없었지만, 운영을 시작하면서 구조적인 문제점이 드러났습니다.

  1. 수정이 느리고 비용이 든다: 카피 수정이나 섹션 이동 같은 사소한 변경에도 시간과 비용이 들었습니다. A/B 테스트를 할 때마다 견적을 받아야 한다면 속도를 내는 것은 불가능합니다.
  2. 카피, 디자인, 구현이 분절된다: 글을 쓰는 사람, 디자인하는 사람, 코딩하는 사람이 서로 다르면, 전달 과정에서 왜곡이 생겨 일관성이 무너집니다.
  3. 데이터를 기반으로 수정해 줄 사람이 없다: 제작 회사는 '만드는 것'에는 전문가지만 '파는 것'에는 전문가가 아닌 경우가 많습니다. GA4 데이터를 가설과 수정안으로 바꾸는 방법을 항상 아는 것도 아닙니다.

Claude Code는 터미널 기반의 AI 코딩 에이전트입니다. 코드만 작성하는 것이 아니라 파일 구조를 관리하고, HTML/CSS/JS를 프리뷰하며, 카피라이팅을 처리하고, GA4나 히트맵 데이터를 바탕으로 개선까지 구현합니다. 이러한 통합성이 결정적인 이유였습니다.

ガガロット - inline image

제품 및 전제 조건

  • 제품: B2B 스킬 관련 온라인 강의 (98,000 엔)
  • 트래픽: Meta Ads(Instagram/Facebook) + 검색 리스팅. 월 광고비 약 180만 엔
  • 판매 흐름: 광고 → LP → 결제(Stripe). 단순한 직접 판매 구조
  • 제 스킬: HTML/CSS는 읽을 수 있지만 예쁘게 작성하지는 못합니다. 디자인 도구는 거의 사용하지 않습니다.
  • 사용 도구: Claude Code, GitHub, Cloudflare Pages, GA4, Microsoft Clarity

중요한 점은 제가 코드를 거의 작성하지 않는다는 것입니다. Claude Code가 "디렉터"와 "만드는 사람" 사이의 번역자 역할을 합니다.

5단계 흐름

  1. 요건 정의: Claude Code가 제품과 고객에 대해 "인터뷰"하도록 한다
  2. 구조와 카피: 섹션 구성과 카피 전문을 만든다
  3. 디자인과 구현: HTML/CSS로 구현하고 프리뷰로 다듬는다
  4. 측정과 배포: GA4/Clarity를 설정하고 오픈한다
  5. 개선 루프: 데이터를 AI에 다시 넣어 A/B 테스트를 진행한다
ガガロット - inline image

STEP 1: 요건 정의 - "인터뷰" 프롬프트

"LP를 만들어줘"라고만 하면 안 됩니다. AI가 뻔한 결과물을 내놓지 않으려면 구체적인 정보가 필요합니다. 저는 Claude Code가 저를 인터뷰하도록 하는 프롬프트를 사용했습니다. 타깃 고객, 불안 요소, 가격 정당성 등에 대해 구체적으로 질문하게 했고, 고객 설문조사 원본 데이터와 Slack 로그도 제공했습니다. 그 결과 구조화된 requirements.md 파일이 만들어졌습니다.

STEP 2: 구조와 카피

요건을 바탕으로 섹션 구조를 만들게 했는데, PASONA 같은 템플릿을 무작정 따르기보다는 '불안 해소'에 초점을 맞췄습니다. 카피는 한 번에 작성하지 않았습니다. 섹션마다 10개씩 옵션을 받아 가장 좋은 방향을 선택했습니다. 또한 AI가 가짜 고객 후기를 만들어내거나 불법적인 과장 표현을 사용하는 것을 엄격히 금지했습니다.

ガガロット - inline image

STEP 3: 디자인과 구현

Claude Code로 정적 HTML/CSS/JS를 사용해 모바일 퍼스트(Mobile-First)의 고성능 사이트를 구현했습니다. 우선 "퍼스트 뷰(First View)"만 먼저 만들게 해서, 전체 페이지로 확장하기 전에 디자인 톤을 맞출 수 있었습니다. 여백, 버튼 크기, 레이아웃은 '구두 지시'로 실시간으로 수정했습니다. 디자인 참고 자료로는 마음에 드는 LP의 스크린샷을 입력해 주고, 그 '좋은 점'을 제 프로젝트에 반영하도록 요청했습니다.

ガガロット - inline image

STEP 4: 측정과 배포

Claude Code로 GA4와 Microsoft Clarity를 구현하게 했고, 특히 '섹션별 열람 완료' 이벤트를 추적해 방문자가 정확히 어느 지점에서 이탈하는지 확인할 수 있게 했습니다. 배포는 Cloudflare Pages와 GitHub를 통해 진행했고, 이 역시 AI가 전부 안내했습니다.

STEP 5: 개선 루프

CVR 0.9%에서 출발해 GA4의 CSV 데이터와 Clarity 스크린샷을 Claude Code에 다시 입력했습니다. AI는 가격 섹션 순서 변경, FAQ를 '이의 제기 대응' 섹션으로 전환, 히어로 카피 A/B 테스트라는 세 가지 주요 수정안을 제안했습니다. 이러한 변경으로 CVR은 1.8%까지 올랐고, 매출 1,000만 엔을 달성했습니다. 이런 반복 작업이 몇 주가 아니라 몇 시간 만에 이뤄졌습니다.

ガガロット - inline image

정리: 프롬프트 설계의 3가지 원칙

  1. 역할 + 컨텍스트 파일 + 출력 형식: 구체적인 역할을 부여하고 requirements.md 같은 파일을 참조하게 한다
  2. 한 번에 모두 만들지 말 것: 합의할 단계를 설정한다 (인터뷰 → 구조 → 카피 → 구현)
  3. 금지 사항과 반론 권한: 가짜 데이터를 금지하고, CVR을 낮출 수 있는 변경이라면 이의를 제기하도록 지시한다

Claude Code는 LP 제작을 '돈으로 시간을 사는 일'에서 '프롬프트로 시간을 사는 일'로 바꿔놓았습니다.

ガガロット - inline image

https://실행 가능한 서비스 링크

YouMind에서 다시 만들기

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
크리에이터를 위해

당신의 Markdown을 깔끔한 𝕏 글로

직접 쓴 장문을 올릴 때 이미지, 표, 코드 블록을 𝕏에 맞게 정리하는 일은 번거롭습니다. YouMind는 전체 Markdown 초안을 깔끔하고 바로 게시할 수 있는 𝕏 글로 바꿔 줍니다.

Markdown → 𝕏 사용해 보기

분석할 패턴 더 보기

최근 바이럴 아티클

더 많은 바이럴 아티클 보기