# 비전보드 웹 서비스 PRD v0.2

**작성일:** 2026-05-27  
**업데이트:** D4/D6 충돌 해소, 이미지 방식 오픈, 단계별 빌드 플랜 추가

---

## 핵심 원칙 (변경 없음)

- 질문 흐름 자체가 IP
- 정체성 우선, 언어 먼저 이미지 나중
- PHASE 순서(1→2→3→4) 변경 불가
- 모바일 퍼스트, 진행 보존

---

## D4/D6 충돌 해소

**기존 충돌:**
- D4: 빈 슬롯에 경고만 → 결국 빈칸 허용
- D6: 6섹션 완료해야 FINISH → "완료"의 정의가 불명확

**해결 방향:**

빈칸을 막는 게 아니라 **빈칸이 생기지 않도록 유도**한다.

슬롯에 답변이 없으면 두 가지 경로를 제공:
1. **"나중에 답할게요"** 버튼 → 슬롯에 `deferred` 상태 저장, 다음 슬롯으로 진행
2. **"도움이 필요해요"** 버튼 → 섹션별 고정 서브질문 펼침 → 서브질문으로 답하면 해당 슬롯 완성

**섹션 "완료"의 재정의:**
- 완료 = PHASE 4(이미지 선택)까지 완료한 상태
- 텍스트 슬롯이 `deferred`여도 이미지 선택까지 완료하면 섹션 완료 가능
- `deferred` 슬롯은 보드와 완료 화면에서 "아직 답변 전" 표시, 언제든 수정 가능
- FINISH 진입: 6섹션 모두 PHASE 4 완료 시

→ D4와 D6 충돌 없음. 빈칸 최소화 + 진행 막힘 없음 동시 달성.

---

## 이미지 방식 (오픈)

P0 이미지 방식은 **Stage 3 진입 시 결정**한다. 현재 고려 중인 옵션:

| 옵션 | 특징 | 결정 필요 시점 |
|---|---|---|
| 파일 업로드 | 갤러리에서 직접 선택, 저장 안정 | Stage 3 |
| URL 링크 | Pinterest 등 링크 붙여넣기, 빠른 구현 | Stage 3 |
| Gemini 이미지 생성 | 텍스트 → 이미지 자동 생성, API 비용 | Stage 3~4 |
| Unsplash API | 무료 라이선스 검색, 앱 내 탐색 | Stage 3~4 |

Stage 1~2에서는 **로컬 파일 미리보기만** (저장 없음)으로 UI를 완성한다.

---

## 기술 스택

| 영역 | 선택 |
|---|---|
| 프레임워크 | Next.js (App Router) + TypeScript |
| 스타일 | Tailwind CSS |
| 인증/DB/Storage | Supabase |
| 배포 | Vercel |
| AI (P1~) | Claude API ("도움이 필요해요", 장면 제안) / 이미지 생성은 Gemini or DALL-E 검토 |

---

## 단계별 빌드 플랜

---

### PRE-BUILD — 지금 당장 해야 할 것

빌드 시작 전 **콘텐츠와 디자인 방향**이 확정되어야 한다. 코드보다 먼저.

**① 질문 텍스트 확정 → `question_flow.md`**

6섹션 × 슬롯별 질문 문구 완전 확정:
- 슬롯 ①②③⑤ 각 섹션별 질문 텍스트
- 슬롯 ⑤ 섹션별 서브질문 2~3개 (고정)
- "도움이 필요해요" 서브질문 (슬롯별, 섹션별)
- 슬롯 ④ 유도 문구 (섹션별)
- Placeholder 텍스트 (입력창 안내 문구)

현재 상태: 박지현 예시 답변은 있으나 질문 문구 자체가 미확정.

**② 디자인 무드 정의**

- 색상 팔레트 (섹션별 6색 → 현재 flowchart.html에 있는 색 그대로 쓸지 여부)
- 폰트 (한국어 최적화 — Noto Sans KR or Pretendard 권장)
- 전반적인 톤 (따뜻한 / 미니멀 / 감성적)

---

### STAGE 1 — 정적 웹 프로토타입 (DB 없음)

**목표:** 브라우저에서 전체 질문 흐름이 동작한다. 로그인 없이.  
**저장:** localStorage (임시, 브라우저 닫으면 유지 or 초기화)  
**배포:** Vercel (기존 GitHub Pages 대체)

**구현 범위:**

```
랜딩 페이지
  ↓
온보딩 (서비스 소개 + 6섹션 안내)
  ↓
대시보드 (6섹션 카드 — 미시작/진행중/완료 상태)
  ↓
섹션 작업 화면 전체
  PHASE 1: 슬롯 ①②③⑤ (한 화면 = 슬롯 하나)
    - "나중에 답할게요" 버튼
    - "도움이 필요해요" → 서브질문 펼침 (고정 텍스트, AI 없음)
  PHASE 2: ①②③⑤ 카드 모아보기 + 수정
  PHASE 3: ④ 장면 묘사 (슬롯② 카드 상단 참조)
  PHASE 4: 이미지 3장 (파일 선택 → 로컬 미리보기만, 저장 없음)
  섹션 완료 체크인
  ↓
비전보드 그리드 보기 (18장, 미완성 = 플레이스홀더)
  ↓
FINISH 화면 (6섹션 완료 후)
```

**완료 기준:**
- 처음부터 끝까지 클릭으로 흐름 완주 가능
- 모바일(375px)에서 깨짐 없음
- 질문 텍스트 전부 실제 문구로 채워짐

---

### STAGE 2 — 인증 + 데이터 저장

**목표:** 회원가입 후 진행 상태가 서버에 저장되고, 재방문 시 이어서 진행 가능.

**구현 범위:**
- Supabase 프로젝트 셋업 (Auth + DB)
- 회원가입 / 로그인 화면 (이메일 + Google)
- 이메일 인증: 생략 (코칭 클라이언트 특성상)
- Supabase 테이블 생성 + RLS 설정
- localStorage → DB로 저장 방식 전환
- 자동저장 (debounce 2초)
- `users.plan = 'free'` 기본값 설정
- 재방문 시 마지막 진행 지점 복원

**Supabase 테이블:**
```
users / vision_boards / sections / section_slots / section_sub_questions / section_images
```
(상세 스키마 PRD v0.1 섹션 5 참고)

**완료 기준:**
- 가입 → 로그인 → 진행 → 앱 닫기 → 재접속 → 이어서 진행 동작 확인

---

### STAGE 3 — 이미지 영구 저장 (방식 결정 필요)

**목표:** 선택한 이미지가 서버에 저장되어 재방문 시에도 비전보드에 표시된다.

**이 단계 진입 시 결정할 것:**
- 이미지 방식 최종 선택 (업로드 / URL / Gemini 생성 / Unsplash)
- 복수 방식 병행 여부

**방식별 구현 난이도:**
- 업로드 → Supabase Storage 연동, HEIC 변환, 5MB 제한
- URL → 서버사이드 fetch로 CORS 우회, 외부 링크 유효성 검증
- Gemini 생성 → API 키 + 프롬프트 설계 + 비용 검토 필요
- Unsplash → API 키 + Attribution 표시 의무

**공통 완료 기준:**
- 이미지 선택 후 앱 재시작해도 비전보드에 유지

---

### STAGE 4 — AI 기능 (P1)

**목표:** 막히는 순간에 AI가 거든다.

**구현 범위 (우선순위 순):**

1. **"도움이 필요해요" → Claude API**  
   - 현재 섹션 + 이미 작성된 ①②③ 컨텍스트 포함
   - 개인화된 서브질문 3개 스트리밍 생성
   - Stage 1의 고정 서브질문을 AI 동적 생성으로 교체

2. **④ 장면 제안 3모드**  
   - 선택형: AI가 장면 3개 제안 → 하나 선택
   - 수정형: AI 초안 → 사용자 수정
   - 빈칸형: "____한 아침에..." 형식

3. **⑥ 이미지 검색어 또는 생성**  
   - ②③④ 텍스트 기반 검색어 3개 제안
   - 또는 Gemini로 분위기 이미지 직접 생성

4. **FINISH AI 패턴 분석**  
   - 6섹션 전체 키워드 + 패턴 분석
   - "핵심 정체성 키워드 3개" + 섹션 간 연결고리 발견

---

### STAGE 5 — 공유 & 수익화 (P2)

**구현 범위:**
- PDF 다운로드 (비전보드 18장 + 텍스트 요약)
- 링크 공유 (`/board/[shareToken]`, 읽기 전용)
- Stripe 연동 + 유료 플랜 (`users.plan` 활용)
- 보드 히스토리 (이전 보드 아카이브)
- 코치 대시보드 (선택적)

---

## 지금 당장 다음 할 일 (체크리스트)

```
PRE-BUILD
  [ ] question_flow.md 작성 — 6섹션 × 슬롯별 질문 문구 완전 확정
      - 각 섹션 ①②③⑤ 질문 텍스트
      - ⑤ 서브질문 2~3개 (섹션별 고정)
      - "도움이 필요해요" 서브질문 (슬롯별)
      - ④ 유도 문구 (섹션별)
      - Placeholder 텍스트
  [ ] 디자인 무드 결정 — 색상 팔레트, 폰트, 전반적 톤

STAGE 1
  [ ] Next.js 프로젝트 셋업 (Tailwind 포함)
  [ ] Vercel 연결 (기존 GitHub 레포 연동)
  [ ] 랜딩 + 온보딩 화면
  [ ] 대시보드 (섹션 6개 카드)
  [ ] PHASE 1 — 슬롯 ①②③⑤ 화면 (+ "나중에 답할게요" + "도움이 필요해요")
  [ ] PHASE 2 — 모아보기 + 수정
  [ ] PHASE 3 — ④ 장면 묘사
  [ ] PHASE 4 — 이미지 3장 (로컬 미리보기)
  [ ] 섹션 완료 체크인
  [ ] 비전보드 그리드 보기
  [ ] FINISH 화면
  [ ] localStorage 임시 저장
  [ ] 모바일 반응형 검증

STAGE 2
  [ ] Supabase 프로젝트 생성
  [ ] 테이블 + RLS 설정
  [ ] 회원가입 / 로그인 화면
  [ ] DB 저장 + 자동저장
  [ ] 재방문 재개

STAGE 3
  [ ] 이미지 방식 최종 결정
  [ ] 이미지 저장 구현

STAGE 4
  [ ] Claude API — "도움이 필요해요"
  [ ] ④ 장면 제안
  [ ] 이미지 생성 or 검색어 제안

STAGE 5
  [ ] PDF / 링크 공유 / 유료화
```

---

## 기획 허점 (20가지) — PRD v0.1 섹션 7 참고

변경된 항목:
- **H15 (빈 슬롯 처리):** "나중에 답할게요" + "도움이 필요해요" → 서브질문 유도. 최후 수단으로만 `deferred` 상태 저장.
- **D6 (FINISH 진입 조건):** 6섹션 모두 PHASE 4(이미지 선택) 완료 시. `deferred` 슬롯 있어도 진입 가능, 보드에서 "아직 답변 전" 표시.