landing-page
Installation
SKILL.md
랜딩 페이지 (Landing Page)
moai-content | 랜딩 페이지 전문 스킬
지원 영역
- 고전환율 원페이지 랜딩 설계 (히어로~CTA 전체 섹션)
- 디자인 원칙 적용 (Above the Fold, 시각적 계층, F-패턴)
- CTA 버튼 문구 및 배치 최적화
- 제품·서비스 런칭, 이벤트, 리드 수집용 랜딩 페이지
참조 가이드:
references/landing-page/guide.md— 랜딩 페이지 빌더 가이드references/landing-page/design-principles.md— 디자인 토큰 및 원칙references/landing-page/brand-context-template.md— 브랜드 컨텍스트 사전 수집references/landing-page/copywriting-rules.md— 카피 안티패턴 및 규칙references/landing-page/evaluation-checklist.md— 평가 체크리스트references/landing-page/ab-testing-guide.md— A/B 테스트 가이드
트리거 키워드
랜딩페이지, 원페이지, 랜딩 페이지, 세일즈 페이지, 전환율, CTA, 히어로 섹션, 랜딩
사용 예시
- "SaaS 제품 랜딩 페이지 구성해줘"
- "이벤트 참가 신청 랜딩 만들어줘"
- "무료 체험 유도 세일즈 페이지 기획해줘"
- "앱 다운로드 랜딩 페이지 카피 써줘"
- "B2B 서비스 리드 수집 랜딩 설계해줘"
독립 실행 워크플로우
참조 가이드(references/)를 사용할 수 없는 경우 다음 단계로 실행합니다.
사전 수집: 브랜드 컨텍스트
작업 시작 전 아래 항목을 확인합니다. 미제공 시 일반 베스트 프랙티스를 적용합니다.
- 브랜드 보이스 앵커 (형용사 3-5개: 예: "신뢰, 전문, 따뜻한")
- 주요 색상 (primary + accent 최소)
- 타겟 독자 수준 (초등/고교/대학/전문가)
- CTA 전략 (1개? 2개? 3개?)
- 톤 예시 ("이런 느낌 좋아요" / "이런 건 싫어요" 각 1-2개)
상세 템플릿: references/landing-page/brand-context-template.md
1단계: 목적 및 타겟 파악
- 전환 목표: 구매 / 회원가입 / 다운로드 / 문의 / 이벤트 참가
- 타겟 독자 (고통점, 니즈, 반대 의견)
- 제품·서비스 핵심 가치 제안 (Value Proposition) 1가지
Hero-First 원칙
히어로 섹션이 전체 페이지 톤을 결정합니다. 이후 모든 섹션은 히어로의 디자인 언어(색상, 타이포, 모션)를 따릅니다.
히어로 허용: 브랜드명 1개 + 헤드라인 1줄 + 서브헤드라인 1문장 + CTA 1-2개 + 지배적 이미지 히어로 금지: 통계 나열, 기능 목록, 가격표, 소셜 미디어 아이콘, 네비게이션 외 링크
CTA 전략 (목적별 결정)
| 페이지 유형 | CTA 수 | 배치 |
|---|---|---|
| 단일 제품 선택 | 1개 | 히어로만 |
| 장문 세일즈 페이지 | 3개 | 히어로 + 중간 + 하단 |
| 리드 생성 | 2개 | 폼 제출 + 보조 CTA |
| 이벤트 등록 | 2개 | 히어로 + 하단 |
BRIEF에서 CTA 전략을 합의한 후 설계를 시작합니다.
2단계: 랜딩 페이지 섹션 구성
[섹션 1] 히어로 (Hero) — 첫 화면, Above the Fold
- 헤드라인: 핵심 가치 제안 (10단어 이내)
- 서브헤드라인: 헤드라인 보완 설명
- CTA 버튼 (1개만): "지금 무료로 시작하기"
- 히어로 이미지/영상: 제품 사용 장면 또는 결과
[섹션 2] 고통점 공감 (Problem)
- 타겟이 겪는 문제 3가지 (공감 → 신뢰)
[섹션 3] 솔루션 (Solution)
- 제품/서비스가 해결하는 방법 (기능 → 혜택 전환)
- 핵심 기능 3가지 (아이콘 + 한 줄 설명)
[섹션 4] 사회 증명 (Social Proof)
- 고객 후기 2~3개 (실명 + 직책 포함)
- 수치: "X명이 사용 중", "평점 4.9/5"
- 미디어 언급, 수상 실적 (있는 경우)
[섹션 5] 상세 설명 (Features)
- 각 기능의 Before / After 비교
- 스크린샷 또는 영상
[섹션 6] 가격 (Pricing) — 해당 시
- 플랜 비교표 (최대 3가지)
- 추천 플랜 강조 (Most Popular)
- FAQ (구매 전 주요 의문점 3~5개)
[섹션 7] 최종 CTA
- 헤드라인 반복 (스크롤 내린 사용자용)
- CTA 버튼 + 보증 문구 ("14일 무료 체험, 신용카드 불필요")
3단계: 전환율 최적화 체크리스트
- 헤드라인이 10초 내에 가치를 전달하는가?
- CTA 버튼이 스크롤 없이 보이는가? (Above the Fold)
- 텍스트 블록 없이 시각적으로 스캔 가능한가?
- 모바일에서도 CTA가 잘 보이는가?
- 후기가 구체적인가? (수치 포함)
- 반대 의견(FAQ)을 미리 해소하는가?
4단계: 카피 작성
- 전체 카피 작성 (섹션별)
- 헤드라인 후보 5가지 제시
- CTA 버튼 문구 후보 3가지 제시
카피 출력 형식 (JSON 구조)
카피 작성 결과는 구조화된 형식으로 산출합니다:
{
"page_type": "landing",
"sections": [
{
"id": "hero",
"headline": "헤드라인",
"subheadline": "서브헤드라인",
"body": null,
"cta_primary": "CTA 텍스트",
"cta_secondary": null,
"visual_direction": "제품 사용 장면 이미지"
},
{
"id": "problem",
"headline": "고통점 섹션 제목",
"body": "고통점 설명",
"items": ["고통점1", "고통점2", "고통점3"]
}
],
"metadata": {
"tone_profile": "신뢰+권위",
"reading_level": "고교",
"word_count": 0,
"cta_count": 0
}
}
이 형식은 디자이너/개발자에게 기계적으로 파싱 가능한 입력을 제공합니다.
핵심 규칙: 카피 무결성
디자인/개발 단계에서 카피 텍스트를 수정하지 않습니다.
- 원본 카피를 그대로 구현
- 텍스트 수정이 필요하면 카피 작성 단계로 반려
- 줄바꿈, 강조, 순서 변경만 허용 (내용 변경 금지)
톤 프로파일 분석
카피 작성 시 톤 분석을 함께 출력합니다:
- 주요 감정: (예: 신뢰, 권위, 호기심)
- 독자가 느낄 것: 한 문장으로 요약
- 문장 평균 길이: 20단어 이내 권장
- 피해야 할 것: 과도한 감탄사, 기술 전문 용어
5단계: 산출물 전달
- 섹션별 랜딩 페이지 카피 전체
- 디자인 가이드 (색상, 폰트, 이미지 방향)
- 개발 또는 노코드 툴(Framer, Webflow) 구현 방향
6단계: QA 테스트 (권장)
코드 구현 후 품질 검증:
- 데스크톱(1280x720) + 모바일(375x667) 레이아웃 확인
- 모든 CTA 버튼 클릭 테스트
- 전체 페이지 스크롤 검증 (깨지는 섹션 없음)
- Lighthouse 감사: Performance >= 80, Accessibility >= 80
- 모든 링크/폼 정상 작동 (404 없음)
- 카피 무결성 검증 (원본 대비 변경 없음)
평가 상세: references/landing-page/evaluation-checklist.md
실행 규칙
- 사용자 요청 수신 → 랜딩 페이지 요청 확인
references/landing-page/guide.md존재 시 로드 → 가이드에 따라 실행--deepthink또는 복잡 작업 →mcp__sequential-thinking__sequentialthinking호출- 결과물 생성 후 사용자 검토 요청
⚠️ AI 생성 콘텐츠 주의: AI가 생성한 랜딩 페이지 카피는 사실 확인 후 사용하세요. 사용자 수, 만족도, 수상 이력 등 실증적 주장은 반드시 데이터를 확인하세요.
문제 해결
- 플랫폼 규격 변경: 노코드 툴(Webflow, Framer, Wix)의 UI 및 기능은 수시로 변경됩니다. 구현 방향은 참고용으로 활용하세요.
- 브랜드 가이드 미제공: 브랜드 컬러, 폰트, 기존 디자인 시스템을 제공하면 일관된 가이드를 작성할 수 있습니다. 미제공 시 일반 전환율 최적화 원칙을 적용합니다.
- 이미지 생성 실패: 이 스킬은 텍스트 카피와 디자인 방향을 제공합니다. 실제 이미지는 Unsplash, Pexels 등 무료 이미지 소스 또는 AI 이미지 생성 도구를 활용하세요.
- A/B 테스트 필요: AI가 생성한 랜딩 페이지 카피의 최적안은 실제 트래픽 테스트로만 확인 가능합니다. 헤드라인과 CTA를 중심으로 A/B 테스트를 진행하세요.
이 스킬을 사용하지 말아야 할 때
- 블로그 포스팅: SEO 블로그 글 작성은
blog스킬이 더 적합합니다. - SNS 포스팅: 소셜미디어 콘텐츠는
social-media스킬을 사용하세요. - 이메일 뉴스레터: 구독자 대상 뉴스레터는
newsletter스킬을 사용하세요. - 광고 카피 단독 작성: 헤드라인·슬로건만 필요한 경우
copywriting스킬이 더 적합합니다. - 멀티 페이지 웹사이트: 전체 웹사이트 설계는 별도 웹 에이전트나 개발자가 필요합니다.