콘텐츠로 이동

Claude Code Website Conversion Rate Optimization (20% Conversions, $1.2M Case Study)

원본 영상: Claude Code Website Conversion Rate Optimization (20% Conversions, $1.2M Case Study)

한 줄 요약

Claude Code + Antigravity로 랜딩페이지를 빌드하고, 카피라이팅·소셜 증거·속도 최적화·PostHog A/B 테스트·즉시 통화 자동화로 전환율을 극대화하는 7년 노하우 마스터클래스.

핵심 내용

1. 환경 설정

도구: Antigravity(Google 무료 데스크탑 IDE) + Claude Code 플러그인
프로젝트 폴더 생성 후 claude.md 파일 추가 — Claude의 행동 지침(고용한 직원 훈련서 역할)
디자인 참고: Dribbble에서 원하는 레이아웃 이미지 스크린샷 → Claude에 업로드해 복제

2. 전환율을 높이는 S-tier 요소 (비협상 필수)

비디오(본인 등장) — 서비스 설명이 아닌 “나 자신을 파는” 45초 이내 영상. 추가 직후 전환율 10% → 15%(+33% 리드)
동영상 후기(video testimonials) — 9개 추가 후 Google Ads 전환 비용 $200 → $30(7배 감소)
페이지 내 폼 직접 배치 — 별도 Contact 페이지 금지
광고 랜딩페이지는 navbar·footer 제거 — 유일한 행동은 전화 또는 폼 제출
오퍼 + 리스크 제거 문구: 우리가 [결과]를 [기간] 내 달성해 드립니다, 아니면 [환불/보상]
Speed to Lead — 폼 제출 즉시 자동 통화 연결(같은 분 내 통화 시 4배 매출)

3. 카피라이팅 원칙

Less is more: 방문자는 페이지 텍스트의 10%만 읽음 → 읽힐 10%를 설계자가 통제
SEO 페이지는 1500단어 이상 필요하지만 아코디언/드롭다운에 숨겨서 표시
Benefits 판매, Features 금지: 사람은 감정으로 구매하고 논리로 합리화 → 시간 절약·수익·평화로운 마음·지위·자유 등 결과를 팔아야 함

4. 다중 랜딩페이지 전략(지퍼 접근법)

축 1: 도시/지역(Toronto, Vancouver, Manhattan, Bronx…)
축 2: 서비스(tree trimming, tree removal, landscaping…)
검색어 → 광고 문구 → 랜딩페이지 헤드라인을 동일 키워드로 통일(메시지 일관성)
Claude Code Skill(/landing-page-generator)로 서비스·도시·유입 채널을 파라미터로 받아 페이지 자동 생성

5. 기술 최적화

모바일 우선: 방문자의 64%가 모바일, 태블릿 3%, 데스크탑 33%
페이지 로드 속도: 1초→3.05%, 2초→약 절반, 4초→1초 대비 약 20% 전환율
Chrome DevTools → Lighthouse 리포트 전체 복사 → Claude에 붙여넣기 → 자동 최적화(90% → 95% → 100% 반복)

6. A/B 테스트 설정(PostHog)

PostHog 무료 계정 생성 → PostHog 마법사로 프로젝트 연동
감사 페이지(Thank You Page) 생성 — 폼 제출 후 리디렉션, 방문 시 conversion 이벤트 발생
Experiments 생성: 트래픽 50%/50% 분배, 전환 지표 quote_submitted
각 페이지에 코드 스니펫 삽입(Claude가 자동 처리)
Authorized URL 화이트리스트 등록
인코그니토 탭으로 테스트(쿠키 초기화로 페이지 랜덤 배정 확인)
패자 교체 → 새 변형 추가 → 반복

7. 배포 워크플로

Claude Code 로컬 → GitHub(private 저장소) 업로드 → Vercel 무료 배포
환경 변수(.env API 키)는 Vercel 대시보드에 수동 입력(보안 표준)
커스텀 도메인은 Vercel 내에서 구매하거나 GoDaddy 등 외부 도메인 연결

전술·요소

등급	항목
S (필수)	본인 등장 영상, 동영상 후기, 페이지 내 폼, navbar/footer 제거(광고용), 오퍼+리스크 제거, Speed to Lead
A	포트폴리오, FAQ(반론 처리), 클릭 가능한 전화번호, 케이스 스터디(B2B)
B	외부 리뷰 배지(Trustpilot 등), 협업 브랜드 로고, 신뢰 통계
C	작성 후기(video 없을 때 차선)

CTA 규칙

데스크탑: 페이지 전체에 걸쳐 여러 곳에 배치
모바일: 하단 고정 버튼 하나만, 스크롤 내내 노출

수치·사례

수치	출처
전환율 20% (세계 평균 2~4%)	본인 실측
동영상 후기 추가 → Google Ads 전환 비용 $200 → $30	본인 실측(별도 포토 회사 캠페인)
본인 영상 추가 → 전환율 10% → 15% (+33% 리드)	본인 실측
매출 $1.2M	본인 실적
Google Ads 집행 $171,000 (캠페인 3개 중 1개)	본인 실측
SEO 하루 1,500 클릭	본인 실측
페이지 로드 1초 → 전환율 3.05%, 2초 → 약 절반	인터넷 인용(출처 불명)
같은 분 내 통화 시 4배 매출	인터넷 인용(출처 불명)
방문자 첫인상 결정 시간: 50밀리초	인터넷 인용
모바일 트래픽 64%, 태블릿 3%, 데스크탑 33%	인터넷 인용

도구·워크플로

사용 도구

Antigravity — 무료 Google 데스크탑 코딩 워크스페이스
Claude Code — Antigravity 플러그인, 유료 플랜 필요
Dribbble — 디자인 레퍼런스 이미지 소싱
PostHog — A/B 테스트, 세션 녹화, 히트맵 (무료)
GitHub — 코드 저장소 (private)
Vercel — 무료 배포 (Next.js 프리셋)
Twilio / CRM VoIP — 가상 전화번호, 통화 추적
n8n / Make.com / Zapier — 폼 제출 → 즉시 통화 자동화

핵심 프롬프트 패턴

초기 빌드: Dribbble 이미지 첨부 → 이 디자인을 기반으로 landscaping 원페이지 웹사이트 만들어줘
CRO 요소 일괄 추가: prompts.md 파일 내 프롬프트 전체 붙여넣기 → 한 번에 적용
Lighthouse 최적화: DevTools → Lighthouse 리포트 전체 복사 → 페이지 로드 속도와 모바일/태블릿/데스크탑 최적화해줘
Skill 생성: 이걸 /landing-page-generator 스킬로 만들어줘 → 서비스·도시·유입경로 파라미터로 자동 페이지 생성
PostHog 연동: 폼 제출 시 결과를 이 웹훅 URL로 전송해줘 → CRM 연동 + 자동 통화

자동 통화 플로우

폼 제출 → 웹훅 → CRM(연락처 생성 + 담당자 배정) → VoIP 자동 발신
→ "새 리드 연결하려면 키패드 누르세요" → 10초 내 영업담당자-리드 연결