페이지: 랜딩 페이지 (Landing Page)

캠페인 랜딩 페이지의 구조, 전환 흐름 및 최적화를 안내합니다. 주 사용처: 유료 광고(PPC/SEM) — 랜딩 페이지는 일반적으로 유료 트래픽을 수신하도록 구축되며, 광고와 페이지의 정렬이 전환에 매우 중요합니다. 유료 광고 사용 시기와 광고-페이지 정렬 원칙은 paid-ads-strategy를 참조하세요. 제휴 가입, 제품 출시, 리드 캡처, 웨비나 등록 및 기타 단일 목표 전환 페이지에도 적용됩니다. 규모 확장: 여러 랜딩 페이지(도시별, 제품별, 통합별)를 구축할 때는 programmatic-seo(템플릿 + 데이터)와 템플릿 디자인을 위한 template-page-generator를 사용하세요. 홈페이지(다목적) 및 제품 페이지(카탈로그)와는 다릅니다.

호출 시: 처음 사용 시에는 필요하다면 이 스킬이 다루는 내용과 중요성에 대해 1-2문장으로 설명한 후 주요 결과를 제공합니다. 이후 사용 시 또는 사용자가 건너뛰기를 요청하면 바로 주요 결과를 제공합니다.

유료 광고: 랜딩 페이지 요구사항

랜딩 페이지가 유료 트래픽을 수신할 때: 광고 약속을 페이지에 즉시 표시; 모바일 우선(CTA를 접히는 부분 위에 배치, 빠른 로딩); 최소한의 폼(더 적은 필드); 접히는 부분 위에 신뢰 요소 배치. 광고-페이지 정렬 및 품질평점(Quality Score)에 대한 전체 내용은 paid-ads-strategy를 참조하세요.

초기 평가

먼저 프로젝트 컨텍스트 확인: .claude/project-context.md 또는 .cursor/project-context.md 파일이 있으면 제품, 대상 고객 및 가치 제안을 읽어보세요.

다음 식별:

페이지 목표: 가입, 구매, 리드 캡처, 웨비나, 다운로드
트래픽 소스: 유료 광고, 이메일, 제휴, 유기적
대상: 차가운 vs 따뜻한; 알려진 경우 세그먼트

랜딩 페이지 구조 (5단계 흐름)

단계	목적	요소
1. 스크롤 멈추기	약 2.6초 내에 주목도 확보	헤드라인, 부제목, 히어로 이미지 또는 비디오
2. 신뢰 확보	요청 전 사회적 증거 제시	로고, 사용후기, 평점, 고객 수
3. 가치 설명	혜택, 기능, 사용 사례	명확한 카피; 대상과 기능 설명
4. 의문 해소	반대 의견 처리	FAQ, 보증, 비교
5. 행동 유도	단일 기본 CTA	하나의 명확한 행동; 논리적 지점에 반복

모든 요소는 위 다섯 가지 기능 중 하나를 제공해야 합니다. 여러 개의 경쟁 제안이 있는 페이지는 약 266% 더 적은 리드를 생성합니다.

헤드라인 공식

[대상] + [구체적 결과] + [시간/조건]

피해야 할 것: 추상적인 약속("당신의 잠재력을 깨우세요", "비즈니스를 혁신하세요")
선호: 구체적인 표현("새 소프트웨어 없이 송장 처리 시간 70% 단축")

CTA 모범 사례

하나의 기본 CTA: 경쟁하는 행동 없음; 전환으로 가는 "일방 통로" 생성
모바일에서 접히는 부분 위에: 엄지손가락이 닿기 쉬운 위치; 트래픽의 약 65% 이상이 모바일
가치 중심 카피: "제출" 대신 "무료 체험 시작"
신뢰 신호와 함께 배치: 버튼 옆에 고객 수, 로고 또는 통계 표시
탐색 제거 또는 최소화: 전환율 2~28% 증가 가능

프로그래매틱 랜딩 페이지 (규모 확장)

여러 랜딩 페이지(예: 도시별, 제품별, 통합별)가 필요할 때는 programmatic-seo를 사용하세요: 하나의 템플릿 + 데이터 = 수백 또는 수천 개의 랜딩 페이지. 템플릿에 랜딩 페이지 구조(5단계 흐름, CTA, 신뢰)를 적용하고, 템플릿 디자인은 template-page-generator를 참조하세요. 예: 로컬 데이터를 사용한 "[제품]을 위한 [도시]" 랜딩 페이지; "[앱 A] + [앱 B]" 통합 가입 페이지.

페이지 유형

유형	사용처	CTA 대상
클릭스루 (Click-through)	따뜻한 대상에게 제안 보내기 전; SaaS, 구독에 적합	pricing-page, products-page, signup
리드 캡처 (Lead capture)	육성을 위한 이메일 수집; 5개 필드 이하의 폼 (긴 폼은 약 81% 이탈 유발)	newsletter-signup, contact-page
제품 중심 (Product-focused)	기능과 혜택 심층 설명; 제품 출시	products-page, features-page
비교 (Comparison)	X vs Y; 경쟁사 브랜드 키워드 광고; 상업적 의도	alternatives-page, features-page, pricing-page
사용 사례 / 솔루션 (Use cases / Solutions)	도구로 분할하기 어려운 통합 제품용	features-page, services-page
무료 도구 (Free tools)	독립 유틸리티; 리드 생성; 동일한 ICP; 제품에서 발췌	tools-page-generator; 게이트형인 경우 도구 페이지가 랜딩 페이지 역할
브리지/보너스 (Bridge/bonus)	링크를 통한 구매를 위한 추가 인센티브	pricing-page, products-page
웨비나/이벤트 (Webinar/event)	이벤트 등록; 라이브 전 가입 수집	resources-page (웨비나를 리소스로)

랜딩 페이지 ↔ 페이지 유형 (콘텐츠 및 흐름)

콘텐츠 가져오기 (2~4단계):

customer-stories-page-generator: 사회적 증거를 위한 사용후기, 사례 연구; 도전→해결책→결과 요약
faq-page-generator: 반대 의견 처리 FAQ 섹션; 전환 관련 Q&A 재사용
features-page-generator: "가치 설명" 단계를 위한 혜택 우선 기능 카피
resources-page-generator: 이메일과 교환할 리드 마그넷(전자책, 템플릿); 웨비나를 리소스로

CTA 전송 대상:

pricing-page-generator: 클릭스루 랜딩 페이지 → 가격 페이지; 가입, 체험
products-page-generator: 제품 랜딩 페이지 → 제품 상세 또는 카탈로그
services-page-generator: 서비스 랜딩 페이지 → 문의, 견적, 예약
contact-page-generator: 리드 캡처 랜딩 페이지 → 문의 양식; B2B 데모 요청
affiliate-page-generator, creator-program: 파트너 가입 = 랜딩 페이지 유형

내부 링크:

랜딩 페이지를 홈페이지(브랜드 앵커), about-page(신뢰), privacy-page(양식 규정 준수)에 연결
고립된 랜딩 페이지 방지: 사이트맵, 탐색 또는 캠페인 허브에서 최소한 하나의 내부 링크 보장

성능 및 디자인

로드 시간: 2.5초 미만; 추가 1초당 약 7%의 전환율 손실 가능
모바일 우선: 반응형; 스크롤 없이 CTA 표시
시각 자료: 히어로 이미지 또는 비디오는 전환율을 최대 80%까지 높일 수 있음
프론트엔드 미학: 독특한 타이포그래피, 모션, 공간 구성, 배경에 대해서는 brand-visual-generator 프론트엔드 미학 참조
공개: 해당되는 경우 FTC 규정을 준수하는 제휴/유료 광고 공개

전달 전 체크리스트

랜딩 페이지를 전달하기 전에 다음을 확인하세요:

카테고리	확인 사항
시각	아이콘으로 이모지 사용 금지 (SVG 사용); 일관된 세트의 아이콘 사용(Heroicons/Lucide); 호버 상태에서 레이아웃 변경 없음
상호작용	모든 클릭 가능한 요소에 `cursor-pointer` 적용; 호버 시 명확한 피드백 제공; 전환 150~300ms
접근성	이미지에 대체 텍스트 제공; 폼 입력에 레이블 제공; 색상만으로 정보 전달 금지; `prefers-reduced-motion` 준수
레이아웃	모바일에서 가로 스크롤 없음; 고정된 네비게이션으로 콘텐츠 가려짐 없음; 375px, 768px, 1024px에서 반응형
성능	로드 시간 2.5초 미만; LCP 최적화; 이미지는 WebP/지연 로딩 적절히 사용
이미지	대체 텍스트, 형식, 반응형, 지연 로딩에 대해서는 image-optimization 참조

출력 형식

헤드라인 및 부제목
구조 (5단계 흐름 섹션)
신뢰 신호 배치
CTA 카피 및 배치
반대 의견 처리 (FAQ, 보증)
내부 링크 (대상 페이지)
SEO 메타데이터 (페이지가 색인되는 경우)

랜딩 페이지 (Landing Page)