# PRD 작성 가이드

AI에게 정확하게 요청하는 문서 작성법입니다.
PRD(Product Requirements Document) = **"이렇게 만들어줘"를 구조화한 문서**입니다.

---

## PRD가 왜 필요한가요?

```
❌ "포트폴리오 사이트 만들어줘"
→ AI가 알아서 만듦 → 마음에 안 듦 → 처음부터 다시

✅ PRD를 붙여넣기
→ AI가 계획대로 만듦 → 수정할 부분만 고침 → 빠르게 완성
```

**계획이 있으면 AI가 더 정확합니다.**

---

## PRD 기본 구조

모든 PRD는 이 3가지로 구성됩니다.

```
[구조] — 어떤 섹션이 있는지
[디자인] — 어떤 느낌인지
[콘텐츠] — 어떤 내용이 들어가는지
```

### 1. 구조 (Structure)

**페이지를 어떤 순서로 구성할지** 정합니다.

```
[구조]
- Hero: 첫 화면에 보이는 것 (이름, 직함, 한 줄 소개)
- About: 자기소개 또는 프로젝트 설명
- Work: 작업물 모음 (카드, 그리드, 갤러리 등)
- Contact: 연락처, SNS 링크
```

**자주 쓰는 섹션 조합:**

| 유형 | 섹션 구성 |
|------|----------|
| 포트폴리오 | Hero → About → Work → Skills → Contact |
| 프로젝트 소개 | Hero → Overview → Story → Gallery → Footer |
| 이벤트/랜딩 | Hero → Features → Pricing → CTA → Footer |
| 이력서형 | Hero → Experience → Projects → Skills → Contact |

### 2. 디자인 (Design)

**시각적 분위기**를 정합니다.

```
[디자인]
- 배경: 어두운 색 (#0a0a0a) 또는 밝은 색 (#ffffff)
- 강조색: 노란색 (#FFD600)
- 본문 폰트: Pretendard
- 제목 폰트: 큰 볼드 세리프체
- 스타일: 미니멀, 여백 넉넉하게
- 애니메이션: 스크롤 시 페이드인
```

**분위기별 추천 조합:**

| 분위기 | 배경 | 강조색 | 폰트 스타일 |
|--------|------|--------|------------|
| 모던 다크 | #0a0a0a | #FFD600 (노랑) | 산세리프, 볼드 |
| 클린 화이트 | #ffffff | #000000 (블랙) | 산세리프, 가벼운 |
| 따뜻한 느낌 | #faf8f5 | #E85D2C (오렌지) | 세리프 + 산세리프 |
| 차가운 느낌 | #0a1628 | #3B82F6 (파랑) | 산세리프, 기하학적 |
| 크리에이티브 | #1a1a2e | #E94560 (핑크) | 혼합, 큰 사이즈 |

### 3. 콘텐츠 (Content)

**실제 들어갈 텍스트와 이미지**입니다.

```
[콘텐츠]
- 이름: 변사범
- 직함: 인터랙션 디자이너
- 소개: 웹과 인터랙션의 경계를 탐구합니다
- 프로젝트: 3개 (이름, 설명, 이미지)
- 이메일: hello@sabum.kr
```

---

## PRD 작성 순서

```
1단계: 어떤 페이지를 만들지 정한다 (목적)
2단계: 섹션 순서를 정한다 (구조)
3단계: 분위기를 정한다 (디자인)
4단계: 실제 텍스트를 채운다 (콘텐츠)
5단계: 하나의 프롬프트로 합친다
```

---

## 완성 예시

아래처럼 합쳐서 Antigravity에 붙여넣으면 됩니다.

```
포트폴리오 웹사이트를 만들어줘.

[구조]
- Hero: 이름 + 직함 + 한 줄 소개 (전체 화면)
- About: 경력 3개 (타임라인 형식)
- Work: 프로젝트 3개 (카드 레이아웃, 2열)
- Skills: 도구 아이콘 + 이름 (그리드)
- Contact: 이메일 + SNS 링크

[디자인]
- 배경: #0a0a0a (어두운 색)
- 강조색: #FFD600 (노란색)
- 본문: Pretendard, 16px
- 제목: 볼드, 큰 사이즈
- 미니멀한 스타일
- 스크롤 시 페이드인 애니메이션
- 반응형 (모바일 대응)

[기술]
- HTML + CSS만 사용
- 외부 라이브러리 없이
- 반응형 (768px 이하 1열)

[콘텐츠]
이름: 홍길동
직함: UI/UX 디자이너
소개: 사용자 중심의 인터페이스를 설계합니다
이메일: hello@example.com

프로젝트 1: 앱 리디자인 - 기존 앱의 UX 개선
프로젝트 2: 브랜드 아이덴티티 - 스타트업 브랜딩
프로젝트 3: 대시보드 디자인 - 데이터 시각화

스킬: Figma, Photoshop, Illustrator, HTML/CSS
```

---

## 자주 하는 실수

| 실수 | 왜 문제인지 | 이렇게 고치세요 |
|------|-----------|---------------|
| 한번에 너무 많이 요청 | AI가 혼란, 결과 품질 저하 | 구조 먼저 → 디자인 → 콘텐츠 순서로 |
| 디자인을 말로만 설명 | "예쁘게" "깔끔하게"는 모호함 | 색상 코드, 폰트명, px 단위로 구체적으로 |
| 콘텐츠가 비어있음 | placeholder 텍스트로 채워짐 | 실제 텍스트를 미리 준비해서 넣기 |
| 레퍼런스 없이 시작 | 원하는 결과를 상상만으로 | 스크린샷이나 URL 첨부하기 |

---

## PRD 빈 템플릿

아래를 복사해서 채운 후 사용하세요.

```
(만들고 싶은 페이지)를 만들어줘.

[구조]
- Hero: (첫 화면에 보일 것)
- (섹션 2): (내용)
- (섹션 3): (내용)
- (섹션 4): (내용)
- Footer: (하단 내용)

[디자인]
- 배경: (색상 코드)
- 강조색: (색상 코드)
- 본문 폰트: (폰트명)
- 스타일: (분위기 키워드)
- 애니메이션: (있으면 적기)

[기술]
- HTML + CSS
- 반응형

[콘텐츠]
(실제 들어갈 텍스트를 여기에)
```