<aside> 📌

Part 2 · Ch01 — Full-Stack SaaS (Project 1)

Ch05에서 만든 자산(CLAUDE.md·Team Plugin·SDD harness·skill·hook)을 실제 출시 가능한 SaaS 하나로 증명한다. Ch05가 '자산 패키징'이었다면, Project 1은 '그 자산으로 진짜 제품을 0→1로 빌드·배포'.

한 줄 요약: 두 축으로 만든다 — Agentic Engineering(Plan→Execute→Verify, Claude×Codex 멀티 에이전트) + Harness Engineering(SDD 5단계 + 하네스 자동화). 만드는 제품은 FinSight.

</aside>

1. 만드는 제품 — FinSight

💸 1-1. 무엇을 만드나

<aside> 💸

FinSight — 개인 금융 CSV(은행·카드 명세)를 업로드하면 AI가 자동 분류·분석하고, 소비 패턴 인사이트·이상 지출 탐지·월간 리포트를 주는 B2C SaaS.

정답지(강사 레퍼런스): https://fin-sight-blue.vercel.app/ — §1 인트로 데모로만 등장, 이후엔 빈 repo에서 직접 빌드.

</aside>

핵심 기능 (MVP)
① CSV 업로드 & AI 파싱 ② AI 카테고리 자동 분류 ③ AI 인사이트 카드 ④ 이상 지출 탐지 ⑤ 월간 AI 리포트 ⑥ 대시보드 ⑦ Polar 구독(7일 무료→유료)

🧱 1-2. 스택

Next.js 16     App Router · TS strict
Supabase       DB · Auth · Storage (RLS)
Tailwind       + shadcn/ui + Framer Motion
Claude API     런타임 AI 분석 (제품 안의 기능)
Polar          구독 결제
Vercel         배포

<aside> ⚠️

용어 주의 — Codex vs Claude API는 다른 레이어다.

Codex = 코드를 짜는 구현 에이전트 (§2 소개 · §5 구현).

Claude API = 완성된 제품이 런타임에 거래를 분류·분석하는 기능 (§3 설계).

헷갈리지 말 것 — 하나는 개발 도구, 하나는 제품 기능.

</aside>

🎯 1-3. MVP 스코프 — '안 만드는 것'이 더 중요

✅ MVP (만든다)	❌ MVP 제외 (안 만든다)
개인(B2C) CSV 분석	수동 입력 · OCR
AI 분류 · 인사이트 · 리포트	계좌 연동 API
Google 로그인 · Polar 결제	라이트 모드
다크모드 대시보드	B2B 기업 지출 관리 (이후 확장)

<aside> 🎯

MVP = 결제까지 도는 가장 얇은 제품. 핵심 유저 플로우 1개: Google 로그인 → CSV 업로드 → AI 분류 → 대시보드 → 유료 전환.

</aside>

2. 챕터의 척추 — SDD 5단계

<aside> 🦴

전체 챕터가 SDD(Spec-Driven Development) 5단계 + 프로덕션화를 한 바퀴 도는 구조다. 누가 주도하는지(사람/AI)가 단계마다 바뀐다.

</aside>

[SETUP]            §2 Git/GitHub → §2 Codex 셋업
[DESIGN  (사람)]    §3 CLAUDE.md·PRD·Arch·ADR → Grill-me → UI/UX design.md
[PLAN & IMPLEMENT] §5 Codex 수동 한 조각 → 하네스 spec→phase→execute.py 루프
[ (AI, 사람 검토)]
[REVIEW & REFLECT] §6 Claude×Codex cross review → 학습 환류
[PRODUCTIONIZE]    §7 Google OAuth → Polar 결제 → Vercel 배포
[WRAP]             §8 회고