실전 프로젝트: To-Do 앱 (초급)

프로젝트 목표

SDD의 전반적인 워크플로우 흐름을 직접 체험한다. 간단한 할 일 관리 웹 앱을 SDD 파이프라인으로 자동 생성한다.

실행 과정

Step 1: Init — 프로젝트 초기화

/sdd.init

• docs/ 폴더에 빈 PRD.md, TechSpec.md 생성
• src/ 폴더 생성

Step 2: Plan — PRD 작성

/sdd.plan 할 일 관리 앱 만들어줘

Planner 에이전트가 파란색으로 활성화되며, 사용자에게 질문한다.

Step 3: Design — Tech Spec 작성

/sdd.design

Architect 에이전트가 보라색으로 활성화. PRD를 읽고 Tech Spec을 작성한다.

생성된 Tech Spec에 포함되는 내용:

• 기술 스택: Next.js, TypeScript, Node.js
• 프로젝트 디렉토리 구조
• 데이터 모델 (TypeScript 인터페이스)
• API 설계 (GET, POST, PUT, DELETE)
• 컴포넌트 설계

Step 4: Build — 코드 구현

/sdd.build

Developer 에이전트가 초록색으로 활성화. PRD와 Tech Spec을 읽고 코드를 구현한다.

생성된 파일: 약 35개 (설정, 타입, 상수, API, 훅, 컴포넌트, 페이지)

Step 5: Review — 스펙 검증

/sdd.review

Reviewer 에이전트가 노란색으로 활성화. 3단계 검증을 수행한다.

발견된 문제와 해결

UI 연결 누락 문제

기능은 구현되었지만 UI에 연결되지 않은 것들이 발견되었다. 예를 들어, 카테고리 수정 기능이 구현되었지만 UI에 수정 버튼이 없었다.

교훈: 기능 구현 후에는 UI와 실제 연결 여부를 반드시 시나리오 테스트로 확인해야 한다.

핵심 교훈 정리

교훈	상세
전제 조건이 순서를 강제	PRD 없이 Design 불가, Spec 없이 Build 불가
서브 에이전트가 컨텍스트를 보호	33K~84K 사용해도 메인은 깨끗
병렬 실행으로 효율 향상	컴포넌트 3개를 동시에 구현
UI 연결 누락 체크 필수	기능 ≠ UI에 보임
스펙-코드 1:1 매핑 확인	Review 단계에서 자동 검증