spec-kit 워크플로우

spec-kit은 무작위 프롬프트 대신 구조화된 개발 흐름을 제공함
₩constitution → specify → plan → tasks → implement₩ 순서로 진행하며, 이를 통해 체계적으로 코드 전환이 가능함

speci-kit의 개발 워크플로우는 아래의 5가지 단계로 진행

0. claude 실행

아래 명령어들은 claude CLI 상태에서 호출하는 명령어임
speckit init도 이루어져야 함. 그래야 claude에서 명령어가 생성됨

1. Constitution (프로젝트 원칙 수립)

프로젝트 전체를 관통하는 개발 원칙과 철학을 정의

❯ /speckit-constitution 이 프로젝트는 개인 작업 관리를 위한 웹 기반 Todo 애플리케이션입니다.

핵심 원칙:
- UI는 단순하고 직관적으로 유지 — 불필요한 복잡성 배제
- 직접 구현보다 검증된 라이브러리를 우선 사용
- 백엔드 없이 localStorage로 데이터 저장
- 모바일 우선 반응형 디자인
- 로그인이나 인증 없이 모든 기능 사용 가능

위 명령어를 입력하면 claude가 자세한 문서를 생성해 줌

모든 것을 승인하면 아래와 같은 메시지 나오면서 문서 작성 완료

결과 화면

Constitution 작성 완료

버전: 1.0.0 (최초 제정) 버전 증가 근거: 템플릿에서 최초로 구체적인 내용을 채워 넣은 최초 제정(1.0.0)

확정된 5가지 원칙

템플릿 검토 결과

• .specify/templates/plan-template.md ✅ Constitution Check 섹션 이미 존재
• .specify/templates/spec-template.md ✅ 인증 요구사항 없음 — 충돌 없음
• .specify/templates/tasks-template.md ✅ 백엔드/인증 태스크 카테고리 불필요
• .specify/templates/commands/ — 디렉토리 없음, 스킵

권장 커밋 메시지

docs: ratify constitution v1.0.0 (Todo App — simplicity, library-first, localStorage, mobile-first, auth-free)

2. Specify (요구사항 정의)

/speckit-specify

다음 기능을 포함하는 웹 기반 Todo 애플리케이션을 만들어주세요:

- 텍스트 입력으로 새 할 일 추가
- 체크박스로 완료/미완료 토글
- 개별 할 일 삭제
- 상태별 필터링: 전체 / 진행 중 / 완료됨
- 남은 할 일 개수 표시
- 페이지 새로고침 후에도 유지되도록 localStorage에 저장
- 완료된 항목 전체 삭제 기능

기술 스택: HTML, 순수 CSS, 순수 JavaScript (프레임워크 없음)

그러면 아래와 같은 결과 화면에 터미널에 출력됨

결과 화면

완료 보고

Feature Directory: specs/001-todo-app Spec File: specs/001-todo-app/spec.md Checklist: specs/001-todo-app/checklists/requirements.md

체크리스트 결과: 전체 통과 ✅

정의된 스토리 요약

주요 결정사항

• Constitution 예외: 사용자가 순수 JS를 명시적으로 요청 → 라이브러리 우선 원칙의 예외로 Assumptions에 기록. /speckit-plan 실행 시 plan.md Complexity Tracking에 정당화 필요.
• 범위 외: 항목 수정(edit) 기능, 데이터 내보내기/가져오기, 다중 사용자/동기화

다음 단계: /speckit-plan 으로 구현 계획을 수립하거나, /speckit-clarify 로 추가 요구사항을 명확히 할 수 있습니다.

3. Plan (계획 수립)

/speckit-plan

요구사항을 바탕으로 Todo 앱의 기술 계획을 작성해주세요.

다음 내용을 포함해주세요:
- 파일 구조 (HTML / CSS / JS)
- Todo 항목의 데이터 모델 (id, text, completed, createdAt)
- localStorage 읽기/쓰기 처리 방식
- 컴포넌트 구분: 입력 영역, 목록, 필터 바, 푸터
- 이벤트 처리 전략 (추가, 토글, 삭제, 필터)

결과 화면

완료 보고

Branch: 001-todo-app Plan File: specs/001-todo-app/plan.md

생성된 아티팩트

Constitution Check 결과

• ✅ 원칙 I, III, IV, V — 완전 준수
• ⚠️ 원칙 II — 사용자 명시 요청으로 예외 처리, Complexity Tracking에 기록됨

핵심 설계 결정

• 3파일 구조: index.html + style.css + app.js (빌드 없음)
• IIFE 패턴: 전역 스코프 오염 없이 앱 캡슐화
• 이벤트 위임: 목록 컨테이너에 단일 리스너, data-id로 분기
• 전체 재렌더: 상태 변경 시 innerHTML 교체 (규모 대비 충분)
• localStorage 스키마: todo-app-v1 키, schemaVersion: 1 포함

다음 단계: /speckit-tasks 로 구현 태스크 목록을 생성할 수 있습니다.

4. Tasks (작업 분해)

/speckit-tasks

계획을 작고 실행 가능한 태스크 단위로 분해해주세요.
의존성 순서대로 정렬해주세요 (먼저 해야 할 것부터).

태스크 형식 예시:
- [ ] 기본 구조의 index.html 생성
- [ ] CSS 리셋 및 기본 스타일 추가
- [ ] localStorage 연동 TodoStore 클래스 구현
- [ ] 상태에서 할 일 목록 렌더링
- [ ] 엔터 키로 할 일 추가 처리
- [ ] 완료 토글 처리
- [ ] 할 일 삭제 처리
- [ ] 필터 구현 (전체 / 진행 중 / 완료됨)
- [ ] 푸터에 남은 개수 표시
- [ ] "완료 항목 삭제" 버튼 로직 추가

결과 화면

완료 보고

Tasks File: specs/001-todo-app/tasks.md

태스크 요약

스토리별 독립 테스트 기준

병렬 실행 가능한 태스크

• Foundational: T002+T003, T005+T006+T007 (3개씩 병렬)
• US1 CSS: T010+T011+T012
• US1 JS Mutations: T013+T014+T015
• US2와 US3 전체 페이즈: US1 완료 후 동시 진행 가능

MVP 권장 범위

Phase 1 + Phase 2 + Phase 3 (T001–T022) — US1만으로 이미 완전한 기능을 갖춘 데모 가능.

다음 단계: /speckit-implement 으로 실제 구현을 시작할 수 있습니다.

5. Implement (구현)

/speckit-implement

태스크 목록의 모든 항목을 코드로 구현해주세요.
원칙(constitution)과 요구사항(spec)을 엄격히 따라주세요.

구현 가이드라인:
- 시맨틱 HTML5 요소 사용
- JS는 단일 app.js 파일로 유지
- 외부 JS 라이브러리 사용 금지
- 상태 변경 시마다 localStorage에 즉시 저장
- 완료 전 필터링 기능 정상 동작 확인입력 내용: /speckit-constitution

결과 화면

완료 보고

구현 완료: todo-app/ — 3개 파일, 총 ~1,400줄(HTML 1.4KB / CSS 6.4KB / JS 6.1KB)

완료된 태스크: 34/34 ✅

구현 하이라이트

- index.html: 시맨틱 HTML5 (<main>, <header>, <footer>, <nav>), 접근성 aria-label + visually-hidden 레이블, defer 스크립트
- style.css: CSS 변수 기반 팔레트, 모바일 우선(320px), 터치 타겟 min-height: 44px, @media (min-width: 768px) 데스크톱 확장
- app.js: IIFE 캡슐화, escapeHtml() XSS 방어, crypto.randomUUID() + 폴백 ID 생성, localStorage try-catch 조용한 실패, 이벤트 위임 패턴

Constitution 준수

브라우저에서 앱이 열렸습니다. quickstart.md S1–S8 시나리오로 수동 검증을 진행해 주세요.

최종 결과