nuxt-deep/docs/PRD_PROMPT.md

PRD 생성 메타 프롬프트

노션 견적서 → 웹 뷰어 & PDF 다운로드 MVP

사용법: 아래 ---START---부터 ---END---까지 전체를 복사하여 Claude에게 붙여넣으세요.

---START---

역할

당신은 시니어 프로덕트 매니저 겸 풀스택 아키텍트입니다. 아래 제품 아이디어와 기술 제약조건을 바탕으로 실행 가능한 MVP PRD 문서를 작성하세요.

---

제품 아이디어

서비스명 (가칭): InvoiceLink

한 줄 요약: 노션 데이터베이스에 입력한 견적서를 고유 링크로 공유하면, 클라이언트가 브라우저에서 확인하고 PDF로 다운로드할 수 있는 웹 서비스.

핵심 사용 흐름:

1. 공급자(supplier)가 노션 데이터베이스에 견적 항목을 입력한다
2. InvoiceLink 대시보드에서 "견적서 발행" 클릭 → 고유 URL 생성
3. 공급자가 URL을 클라이언트에게 전달(이메일, 카카오톡 등)
4. 클라이언트가 링크를 열면 브랜딩된 견적서 페이지를 확인한다
5. 클라이언트가 "PDF 다운로드" 버튼을 클릭하여 파일을 저장한다

---

기술 제약조건 (반드시 반영)

이 프로젝트의 기존 스택을 기반으로 설계한다:

• 프레임워크: Nuxt 3 (App Router 방식, app/ 디렉토리 구조)
• UI: @nuxt/ui v4
• 인증/DB: Supabase (@nuxtjs/supabase) — magic link + Google OAuth
• AI 기능 (선택): Anthropic Claude Sonnet 4.6 (@anthropic-ai/sdk) — streaming
• 패키지 매니저: pnpm
• 검증: Zod
• 아이콘: Lucide + Iconify
• 배포: Vercel 또는 Netlify (서버리스 우선)
• 개발 인원: 1인, 빠른 출시 우선, 비용 최소화

---

PRD 작성 구조 (아래 순서대로 빠짐없이 작성)

1. 배경 및 문제 정의

• 현재 견적서 전달 방식의 Pain Point 3가지 (이메일 첨부, 엑셀, 구두 전달 등)
• 타겟 사용자 페르소나: 노션을 이미 사용하는 프리랜서 / 소규모 에이전시
• 해결하려는 핵심 문제를 1문장으로 정의

2. 목표 (Goals & Non-Goals)

MVP Goals (3개 이내, 측정 가능하게):

• 예: "견적서 발행부터 클라이언트 PDF 수령까지 5분 이내"

Non-Goals (MVP에서 의도적으로 제외):

• 클라이언트 서명/결재 기능
• 다국어 지원
• 그 외 범위 방어 항목 추가

3. 사용자 스토리

형식: 나는 [역할]로서, [목적]을 위해 [행동]을 할 수 있다.

각 스토리마다 수용 기준(Acceptance Criteria) 2~3개 포함.

• 공급자(Supplier) 스토리 4개
• 클라이언트(Client) 스토리 3개

4. 기능 명세

F1. 노션 연동

• 연동 방식: Notion Integration Token (OAuth는 Non-Goal)
• 필수 데이터베이스 속성 매핑 테이블:

노션 속성명	타입	InvoiceLink 필드	필수 여부
견적번호	Title	quote_number	필수
발행일	Date	issued_at	필수
유효기간	Date	expires_at	필수
수신자명	Text	client_name	필수
수신자 이메일	Email	client_email	선택
항목명	Text	item_name	필수
수량	Number	quantity	필수
단가 (원)	Number	unit_price	필수
세율 (%)	Number	tax_rate	필수
비고	Text	notes	선택

• 동기화 트리거 방식 및 근거 (수동 버튼 vs 자동 webhook 중 선택)
• 에러 처리: 필수 필드 누락 시 동작 정의

F2. 고유 링크 생성

• URL 구조: /q/[uuid-v4] (추측 불가 설계)
• 링크 유효기간 정책 (기본값 및 커스터마이징 범위)
• 비공개/공개 접근 제어: 링크 소유자만 비활성화 가능
• 링크 복사 UX (클립보드 복사 버튼)

F3. 견적서 웹 뷰어

레이아웃 구성 요소:

• 헤더: 공급자 로고, 상호명, 연락처
• 견적 메타: 견적번호, 발행일, 유효기간, 수신자 정보
• 품목 테이블: 항목명 / 수량 / 단가 / 세액 / 소계
• 합계 영역: 공급가액, 세액, 총액 (천 단위 콤마 포맷)
• 푸터: 비고, 공급자 사업자 정보

반응형 요구사항:

• 모바일(375px)에서 품목 테이블 가로 스크롤 허용
• PDF 출력 시 A4 1페이지 기준 최적화

브랜딩 커스터마이징 범위 (MVP):

• 로고 이미지 업로드
• Primary 컬러 선택 (6가지 프리셋)

F4. PDF 다운로드

• 생성 방식: 서버사이드 — Nuxt server route(server/api/quote/[id]/pdf.get.ts)에서 @sparticuz/chromium + puppeteer-core로 헤드리스 렌더링
• 근거: 클라이언트 window.print()는 브라우저별 출력 차이 존재, 서버사이드가 일관성 보장
• 파일명 규칙: 견적서_{견적번호}_{YYYYMMDD}.pdf
• 다운로드 이벤트: Supabase quote_events 테이블에 pdf_downloaded 로그 기록
• Vercel 서버리스 함수 메모리 제한(1GB) 내 처리 가능 여부 명시

F5. 공급자 대시보드

• 견적서 목록 (발행일 내림차순, 페이지네이션)
• 견적서별 상태 표시: draft / sent / viewed / expired
• 클라이언트 조회 여부 및 PDF 다운로드 여부 표시
• 견적서 비활성화(링크 만료) 토글

5. 데이터 모델

아래 엔티티에 대해 Supabase(PostgreSQL) 기준 핵심 필드 정의. 필드명 영문 snake_case, PostgreSQL 타입 명시, RLS 정책 방향 포함.

• suppliers (공급자)
• quotes (견적서 헤더)
• quote_items (견적 항목)
• quote_events (조회/다운로드 이벤트 로그)

6. API 설계 (Nuxt Server Routes)

Method	Route	설명	Auth
GET	/api/quote/[id]	견적서 데이터 조회	Public (링크 보유자)
GET	/api/quote/[id]/pdf	PDF 생성 및 다운로드	Public
POST	/api/quotes	견적서 생성 (노션 동기화)	Supplier
PATCH	/api/quotes/[id]	견적서 상태 변경	Supplier
GET	/api/notion/sync	노션 DB 항목 목록 조회	Supplier

7. 기술 스택 최종 제안

아래 항목별로 선택한 라이브러리와 선택 이유를 한 줄로 명시:

• PDF 생성
• 노션 API 클라이언트
• 날짜 처리
• 숫자/통화 포맷
• 이메일 발송 (선택)

8. MVP 마일스톤

Phase	기간	완성 기준
Phase 1	Week 1~2	?
Phase 2	Week 3~4	?
Launch	Week 5	?

런치 기준(Launch Criteria): 이 조건이 모두 충족되어야 배포 가능

• 조건 1
• 조건 2
• 조건 3

9. 성공 지표 (Metrics)

• Primary Metric (북극성 지표) 1개
• Supporting Metrics 3개 이내
• 각 지표의 측정 방법 및 도구 명시 (Supabase Analytics, PostHog 등)

10. 리스크 & 미해결 질문

리스크:

• Vercel 서버리스에서 Headless Chrome 실행 시 Cold Start 지연 가능성
• 노션 API rate limit (평균 3 req/s) 대응 전략 필요

Open Questions (의사결정 필요 항목 3~5개): 각 질문에 현재 유력한 가설(assumption)을 함께 명시.

---

출력 형식 요구사항

• 마크다운 형식
• 섹션: H2(##), 서브섹션: H3(###), 세부항목: H4(####)
• 테이블, 체크리스트, 코드블록 적극 활용
• SQL DDL은 코드블록(sql)으로 표현
• 분량: 2,000~3,000 단어
• 톤: 군더더기 없는 기술 문서체 (한국어)
• 추상적 표현 금지 — 모든 기능은 구현 레벨로 구체화
• 각 섹션 말미에 구현 시 주의사항 한 줄 추가

---END---