v0.dev PRD 작성기 — 프로 버전(v0.dev PRD Generator (Pro Ver.))

Description

이 프롬프트는 제품 리더가 구조화된 PRD 전체를 v0.dev에 입력하고, 그 결과로 여러 파일로 나뉜 자동 모듈형 Next.js 19 스캐폴드(scaffold)를 받을 수 있게 해줍니다. v0.dev는 코드를 app/, components/, hooks/, lib/, tests/, Tailwind 테마 등 작은 단위 파일로 분해하고, 각 파일은 100 LOC 이하로 제한하며 `#file` 지시자(directive)를 붙여 바로 저장소에 붙여 넣을 수 있게 만듭니다. 생성 후에는 Supabase 프로젝트를 연결하라는 간단한 팝업이 뜰 수 있습니다. 그 경우 앱 내 안내를 따라 실제 백엔드를 연결하면 됩니다.

**Head of Product** 입장에서, v0.dev가 깔끔한 다중 파일 Next.js 프로젝트를 출력할 수 있도록 안내하는 세계 최고 수준의 **Product Requirements Document (PRD)**를 작성하고 있습니다.

- 저는 가벼운 템플릿을 제공하고, 당신은 빈칸을 자연스러운 문장으로 채웁니다.
- v0.dev는 최적의 폴더 구조를 스스로 추론하고, 각 파일을 100 LOC 미만으로 유지하며 상태(state)를 UI와 분리한 채 `#file` 지시자를 자동으로 출력해야 합니다.
- `app/`, `components/`, `hooks/`, `lib/`, 테스트, Tailwind/theme 설정까지 모범 사례를 따르세요.

---

## v0.dev 출력 요구사항(v0.dev Output Requirements)

PRD를 생성하기 전에, 모든 섹션이 아래 v0.dev 전용 제약조건을 만족하도록 하세요:

| Constraint | Rule | Why It Matters |
|-----------|------|---------------|
| File size | 각 파일은 100 LOC 미만 | v0는 파일이 작을수록 더 깔끔한 코드를 생성함 |
| State isolation | 훅(hook)은 `hooks/`, UI는 `components/` | v0가 관심사를 섞지 않도록 방지 |
| Naming convention | 컴포넌트는 PascalCase, 훅은 camelCase | v0는 명시적인 네이밍 힌트를 잘 따름 |
| Styling | Tailwind + shadcn/ui만 사용, 인라인 CSS 금지 | v0의 기본 출력과 일관성 유지 |
| File directives | AI가 파일마다 `#file path/to/file.tsx` 출력 | 다중 파일 v0 출력에 필요 |
| Component granularity | 파일당 컴포넌트 1개, props 최대 3개 | v0 출력의 조합 가능성(composability) 유지 |

---

## PRD 구조(PRD Structure) — v0.dev 최적화, 자동 모듈형

### 1. tl;dr
문제, 해결책, 핵심 효익, 타깃 사용자를 2-3문장으로 정리합니다.

### 2. Goals

| Goal Type | Requirements | Format |
|-----------|-------------|--------|
| Business Goals | 3-5개 항목 | SMART 형식 (Specific, Measurable, Achievable, Relevant, Time-bound) |
| User Goals | 3-5개 항목 | 사용자 관점의 명확한 효익 문장 |
| Non-Goals | 2-3개 항목 | v0의 scope creep를 막기 위해 명시적으로 범위 밖으로 둠 |

### 3. User Stories
형식: "As a ``, I want `` so that ``."
- 온보딩(onboarding), 핵심 워크플로우(core workflow), 엣지 케이스(edge case) 대응을 포함한 스토리 3-5개를 작성합니다.

### 4. Functional Requirements
기능 영역별로 묶습니다:

| Group | Feature | Description | Priority |
|-------|---------|-------------|----------|
| [Area] | [Name] | [What it does] | P0/P1/P2 |

### 5. User Experience
v0가 올바른 페이지 순서를 생성할 수 있도록 각 플로우를 번호가 있는 단계로 정의합니다:

1. **Entry & Onboarding** — 첫 사용자 플로우 (최대 3단계)
2. **Core Flow** — Tailwind + shadcn/ui 컴포넌트명을 명시한 단계별 설명
3. **Advanced & Edge Cases** — 에러 상태, 빈 상태(empty state), 로딩 상태

### 6. v0.dev Prompt Library
바로 복사해 붙일 수 있는 v0.dev용 프롬프트 스니펫 3-5개를 작성합니다:
```
예시: "shadcn/ui Checkbox와 Tailwind animate-in을 사용해 체크박스 전환이 있는 task list 컴포넌트를 만들어줘."
```
각 프롬프트는 전체 페이지가 아니라 단일 컴포넌트 또는 기능만 겨냥해야 합니다.

### 7. Code Structure (AI-Generated)
AI는 파일 분해 방식을 스스로 결정하고 `#file` 지시자를 자동으로 출력해야 합니다:
```
app/
  page.tsx, layout.tsx
components/
  [Feature]Card.tsx, [Feature]List.tsx
hooks/
  use[Feature].ts
lib/
  [feature]-utils.ts
tests/
  [feature].test.tsx
```
- 관심사 분리(separation of concerns) 준수: 컴포넌트 안에서 데이터 페칭 금지
- 각 파일 상단에 목적을 설명하는 짧은 주석 추가

### 8. Narrative
사용자 pain > 해결책 > 결과를 200-300자로 정리합니다. v0 시스템 컨텍스트로 사용됩니다.

### 9. Success Metrics

| Category | Metric | Target |
|----------|--------|--------|
| User | [e.g., task completion rate] | [e.g., > 90%] |
| Business | [e.g., conversion rate] | [e.g., > 5%] |
| Technical | [e.g., Lighthouse score] | [e.g., > 90] |
| Code Productivity | [e.g., v0 prompt to PR merge] | [e.g.,

Customize This Prompt