# {PROJECT_NAME} Landing Page PRD

> 이 문서가 법. 여기 없으면 안 만듦. 여기 있으면 반드시 만듦.
>
> 작성일: {DATE}
> 버전: 1.0

---

## 1. 한 줄 요약

**[제품/서비스]**의 **[목표 행동]**을 위한 랜딩 페이지

예시: "SaaS 제품의 얼리버드 가입 유도를 위한 랜딩 페이지"

---

## 2. 목표 정의

### 2.1 비즈니스 목표
| 지표 | 목표 | 측정 |
|------|------|------|
| 전환율 | > 5% | GA4 |
| 이탈률 | < 40% | GA4 |
| 체류 시간 | > 2분 | GA4 |

### 2.2 사용자 행동 목표
- **Primary CTA**: [예: 얼리버드 가입]
- **Secondary CTA**: [예: 데모 보기]

---

## 3. 타겟 방문자

### 3.1 주요 방문자
- **누구**: [예: 스타트업 창업자]
- **유입 경로**: [예: 트위터, 검색]
- **니즈**: [예: 생산성 향상 도구 찾는 중]

### 3.2 방문자 상태
| 단계 | 특징 | 제공할 정보 |
|------|------|-------------|
| 인지 | 처음 들어봄 | 문제 + 해결책 |
| 관심 | 관심 있음 | 기능 + 혜택 |
| 비교 | 대안 검토 중 | 차별점 + 가격 |

---

## 4. 페이지 구조

### P0 (Must Have) - 없으면 출시 불가

| 섹션 | 목적 | 내용 |
|------|------|------|
| Hero | 첫인상, CTA | 헤드라인 + 서브 + CTA 버튼 |
| Problem | 공감 | 타겟의 문제점 3가지 |
| Solution | 해결책 | 제품이 어떻게 해결하는지 |
| Features | 기능 소개 | 핵심 기능 3-5개 |
| CTA | 전환 | 가입/구매 버튼 |
| Footer | 신뢰 | 연락처, 링크 |

### P1 (Should Have)

| 섹션 | 목적 | 내용 |
|------|------|------|
| Social Proof | 신뢰 | 후기, 로고, 숫자 |
| Pricing | 가격 | 가격표 (있는 경우) |
| FAQ | 의문 해소 | 자주 묻는 질문 |

### P2 (Nice to Have)

| 섹션 | 목적 | 비고 |
|------|------|------|
| Demo | 체험 | 영상/인터랙티브 |
| Comparison | 경쟁사 비교 | 테이블 형식 |

---

## 5. Constraints (AI 경계)

### ALWAYS (무조건 실행)
- [ ] 모바일 반응형
- [ ] CTA 버튼 명확하게
- [ ] 페이지 로드 < 3초
- [ ] 명확한 가치 제안 (Hero)

### ASK FIRST (확인 후 실행)
- [ ] 외부 스크립트 추가
- [ ] 새 섹션 추가
- [ ] 폼 필드 변경

### NEVER (절대 금지)
- [ ] **스펙에 없는 섹션 추가**
- [ ] 자동 재생 비디오 (소리)
- [ ] 팝업 (페이지 로드 직후)
- [ ] 가짜 후기/숫자
- [ ] 복잡한 애니메이션

### Out of Scope
- 다국어 - 이유: v2에서
- 블로그 - 이유: 별도 구축

---

## 6. 카피라이팅

### 6.1 Hero Section
```
헤드라인: [핵심 가치 한 문장]
서브헤드: [구체적인 혜택/방법]
CTA: [행동 동사 + 가치]
```

예시:
```
헤드라인: "코드 없이 10분 만에 랜딩 페이지 완성"
서브헤드: "드래그 앤 드롭으로 전환율 높은 페이지를 만드세요"
CTA: "무료로 시작하기"
```

### 6.2 톤 & 보이스
| 항목 | 값 |
|------|-----|
| 톤 | [친근한 / 전문적 / 유머러스] |
| 문체 | [~해요 / ~합니다] |
| 타겟 호칭 | [당신 / 고객님 / 없음] |

---

## 7. 디자인 가이드

### 7.1 색상
| 용도 | 색상 | HEX |
|------|------|-----|
| Primary | [색상] | #XXXXXX |
| Secondary | [색상] | #XXXXXX |
| Background | [색상] | #XXXXXX |
| Text | [색상] | #XXXXXX |

### 7.2 타이포그래피
| 용도 | 폰트 | 크기 |
|------|------|------|
| 헤드라인 | [폰트] | 48px |
| 서브헤드 | [폰트] | 24px |
| 본문 | [폰트] | 16px |

### 7.3 컴포넌트
| 컴포넌트 | 스타일 |
|----------|--------|
| 버튼 | [라운드/각진/그림자] |
| 카드 | [테두리/그림자/배경] |
| 아이콘 | [스타일/소스] |

---

## 8. 기술 스택

| 구분 | 선택 | 이유 |
|------|------|------|
| 프레임워크 | Next.js / Astro / HTML | [이유] |
| 스타일링 | Tailwind / CSS | [이유] |
| 호스팅 | Vercel / Netlify / GitHub Pages | [이유] |
| 분석 | GA4 / Plausible | [이유] |

---

## 9. SEO & 메타

### 9.1 메타 태그
```html
<title>[제품명] - [핵심 가치]</title>
<meta name="description" content="[150자 이내 설명]">
<meta property="og:title" content="[제목]">
<meta property="og:description" content="[설명]">
<meta property="og:image" content="[이미지 URL]">
```

### 9.2 체크리스트
- [ ] 시맨틱 HTML
- [ ] 이미지 alt 태그
- [ ] sitemap.xml
- [ ] robots.txt

---

## 10. 완료 체크리스트

### 기능
- [ ] 모든 섹션 구현
- [ ] CTA 버튼 동작
- [ ] 폼 제출 동작

### 품질
- [ ] Lighthouse 성능 > 90
- [ ] 모바일 반응형
- [ ] 크로스 브라우저 테스트

### 배포
- [ ] 도메인 연결
- [ ] SSL 적용
- [ ] 분석 도구 연동

---

## 변경 로그

| 날짜 | 버전 | 변경 내용 | 작성자 |
|------|------|----------|--------|
| {DATE} | 1.0 | 최초 작성 | |
