Landing Page GTM (랜딩 페이지 GTM)
팔리는 랜딩 페이지를 구축하세요. 단순히 설명하는 데 그치지 말고, 제품 조사, 경쟁 포지셔닝, 세일즈 카피라이팅, 프론트엔드 구현을 하나의 워크플로우로 통합합니다.
인테이크 — 항상 먼저 물어보세요
작업을 시작하기 전에 다음 정보를 수집하세요:
| 입력 항목 | 질문 |
|---|---|
| 타겟 URL | "이 페이지는 어떤 URL/경로용인가요?" (예: myapp.com/pricing) |
| 코드베이스 경로 | "소스 코드 위치는 어디인가요?" (예: /home/user/project/src) |
| 제품/기능 | "이 페이지에서 판매할 제품이나 기능은 무엇인가요?" |
| 대상 고객 | "구매자는 누구인가요? (역할, 회사 규모, 고통 수준)" |
| 경쟁사 | "비교 대상이 되는 경쟁사는 누구인가요?" |
| 제약 사항 | "기존 디자인 시스템, 폼 제공자, CTA(행동 유도) 목적지가 있나요?" |
페이지가 이미 존재한다면, 먼저 읽어보세요. 읽어보지 않은 코드에 변경을 제안하지 마세요.
워크플로우
1단계: 제품 조사
카피 한 줄 쓰기 전에 실제 제품을 연구하세요. 절대 기능을 지어내지 마세요.
- 코드베이스 읽기 — 해당 기능의 구현체를 검색하세요.
git log를 사용해 최근 변경 사항을 찾으세요. - 주장 검증 — 주장하는 모든 기능이 코드에 실제로 존재하는지 확인하세요. 차이점을 보고하세요: "X는 존재합니다. Y는 부분적입니다. Z는 찾을 수 없습니다."
- 차별점 식별 — 경쟁사가 진정으로 따라올 수 없는 것은 무엇인가요? 아키텍처적 이점 > 표면적 기능.
- 자기 개선 관점 찾기 — 학습/적응형 동작은 마케팅에 금광입니다. 메커니즘을 이해하여 전문 용어 없이 설명할 수 있게 하세요.
2단계: 경쟁 포지셔닝
모든 섹션을 "왜 우리인가, 그들이 아닌가"라는 프레임으로 구성하되, 경쟁사를 직접 언급하지 마세요.
포지셔닝 공식:
매일 겪는 고통
+ 경쟁사가 그에 대해 하는 일 (제대로 하지 못함)
+ 당신이 다르게 하는 일
+ 그들이 경험하게 될 결과
안티-제너릭 테스트 — 카피가 경쟁사 사이트에 변경 없이 게재될 수 있다면 다시 작성하세요:
- "AI 기반" → AI가 실제로 무엇을 하나요?
- "스마트 자동화" → 무엇이 구체적으로 자동화되나요?
- "사용하기 쉬운" → 어떤 고통스러운 대안과 비교하나요?
경쟁사 무효화 패턴:
- "모든 [카테고리] 앱은 [유행어]를 주장합니다. 대부분은 [그들이 하는 일]을 할 뿐입니다. 우리는 다릅니다."
- "[구식 접근법]이 아닙니다. [구체적인 결과]를 제공하는 진정한 [새로운 접근법]입니다."
- "다른 도구는 정적입니다. 우리의 도구는 [진화 방식]을 따릅니다."
3단계: 세일즈 카피 작성
기능을 욕망으로 변환하세요. 엔지니어처럼 생각하지 말고 구매자처럼 생각하세요.
청중별 음성:
| 청중 | 톤 | 예시 |
|---|---|---|
| 중소기업(SME) 소유주 | 따뜻하고 직접적 | "영수증 스냅 한 장으로 끝." |
| 재무 관리자 | 결과 중심 | "모든 일치 항목이 정확히 그 이유를 보여줍니다." |
| 엔터프라이즈 | 신뢰 구축 | "복잡성 없이 통제하세요." |
| 기술 사용자 | 정확하고 신뢰성 | "매주 확실히 더 똑똑해집니다." |
카피 규칙:
- 고통으로 시작하라 — "하나씩 양식을 작성하는 것을 중단하세요" > "자동 양식 작성"
- 한 문장, 한 가지 아이디어 — 짧고. 강렬하게. 훑어보기 쉽게.
- 구체적 > 추상적 — "10초 안에 답장" > "빠른 응답 시간"
- "내가 원해" 테스트 — 각 카드를 소리 내어 읽어보세요. 구매자가 "이게 필요해"라고 생각하나요? 그렇지 않다면 다시 작성하세요.
- 결과로 끝내라 — "느린 답장으로 판매를 잃지 마세요" > "NLP를 사용하여 응답 생성"
전문 용어 없이 AI/기술 이야기하기:
| 기술적 현실 | 대신 이렇게 말하세요 |
|---|---|
| ML 모델이 매주 재훈련됨 | "여러분의 피드백으로 매주 더 똑똑해집니다" |
| 내부 최적화 프레임워크 | 언급하지 마세요. "수정 사항을 학습합니다"라고 말하세요 |
| LLM / GPT / Claude | "AI 어시스턴트" 또는 그냥 "어시스턴트" |
| API 통합 | "기존 도구에 연결됩니다" |
| 사용자 수정 사항의 훈련 데이터 | "모든 수정이 새로운 것을 가르칩니다" |
| 정확도 게이팅으로 회귀 방지 | "더 나빠질 수 없습니다 — 절대 좋아질 뿐입니다" |
| 설명 가능한 AI / 추론 추적 | "각 결정이 내려진 정확한 이유를 보여줍니다" |
4단계: 페이지 디자인
전환 중심 페이지 구조:
1. 히어로(Hero) — 헤드라인 + 부제목 + 주요 CTA
2. 고통 포인트(Pain Points) — 구매자가 느끼는 3~4가지 시나리오 (빨간색/따뜻한 색조)
3. 솔루션(Solution) — 기능 목록이 아닌, 변화를 보여주는 카드
4. 사회적 증거(Social Proof) — 사용 후기 또는 지표
5. 작동 방식(How It Works) — 최대 3단계 (인지된 복잡성 감소)
6. 가격(Pricing) — 단순한 테이블이 아닌, 현상 유지와의 비교
7. FAQ(FAQ) — 도움으로 위장한 반론 처리
8. 최종 CTA(Final CTA) — 긴급성 + 폼 (주요 CTA 반복)
모든 페이지가 모든 섹션을 필요로 하는 것은 아닙니다. 제품 복잡성에 맞추세요:
- 신제품 런칭: 모든 섹션
- 기능 카드 업데이트: 기존 카드 + 필요시 새 섹션
- 포트폴리오 내 제품: 드로어/그리드의 카드, 전용 페이지 링크
CTA 및 폼:
- 히어로와 하단에 주요 CTA 배치 — 전환 기회 2회 제공
- 최소 필드. 추가 필드 하나당 전환율 ~10% 감소.
- 리드 캡처 최소 필드: 이름 + 이메일 + 회사. 제품이 필요로 하는 경우에만 전화번호 추가.
- 기존 폼 인프라(Formspree, Resend 등) 사용 — 의존성 추가 금지.
- 리드가 어느 페이지에서 왔는지 구분하기 위해 숨겨진
_source필드 추가.
얼리 액세스 / 대기자 명단 패턴:
- 컬러 배지가 독점성을 나타냄 (예: 보라색 "Early Access")
- 최소 인라인 폼(2~3개 필드)을 기능 카드에 직접 배치
- 별도 페이지보다 마찰이 적음 — 발견 순간 관심을 포착
5단계: 구축 및 배포
- 기존 패턴 일치 — 기존 페이지 2~3개를 읽으세요. import, 레이아웃, 라우팅, 디자인 시스템을 일치시키세요.
- 디자인 시스템 재사용 — 기존 UI 컴포넌트만 사용하세요. 새 프레임워크를 도입하지 마세요.
- 모바일 우선 — 모든 섹션이 375px 너비에서 작동해야 합니다.
- 라우트 등록 — import와 함께 라우터에 추가하세요.
- 타입 체크 — 커밋 전에 타입 체커를 실행하세요. 새로운 오류가 없어야 합니다.
- 다중 코드베이스 일관성 — 제품이 여러 사이트에 나타나는 경우, 일관된 메시지로 모든 사이트를 업데이트하세요.
6단계: 출시 체크리스트
푸시 전에 확인하세요:
- 카피의 모든 기능이 실제 제품 코드에 존재합니다.
- 전문 용어 없음 (다음 단어 스캔: API, SDK, LLM, model, algorithm, pipeline, container)
- 모든 카드가 "내가 원해" 테스트를 통과합니다.
- CTA 버튼이 작동합니다 (폼으로 스크롤되거나 가입 페이지로 연결).
- 폼이
_source필드와 함께 올바르게 제출됩니다. - 375px에서 모바일 반응형입니다.
- 타입 체크가 통과됩니다.
- 제품이 여러 사이트에 있는 경우 모든 코드베이스가 업데이트되었습니다.
- 경쟁사 카피 테스트: 이 내용이 경쟁사 사이트에 게재될 수 있나요? 그렇다면 다시 작성하세요.
참고 파일
- references/copy-formulas.md — 헤드라인 공식, 카드 패턴, CTA 텍스트, FAQ 템플릿
- references/page-archetypes.md — 제품 런칭, 기능 업데이트, 비교, 대기자 명단 페이지 템플릿