개발 단계 가이드 (Development Stages)
버전: 3.0 | 최종 업데이트: 2026-03-08
웹 프로젝트의 8단계 개발 플로우
📋 단계 개요
┌─────────────────────────────────────────────────────────────────┐
│ Phase 1: 초기화 │
│ ├─ 프로젝트 구조 생성 │
│ ├─ 인증 템플릿 적용 │
│ └─ API 키 설정 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 2: UI/디자인 │
│ ├─ 파비콘, OG 이미지 생성 │
│ ├─ 아이콘 세트 생성 │
│ └─ 브라우저 테스트 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 3: 핵심 기능 │
│ ├─ 관리자 페이지 생성 │
│ └─ CRUD 기능 구현 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 4: 콘텐츠 │
│ ├─ 블로그 글 작성 │
│ └─ 번역 추가 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 5: 다국어 │
│ ├─ 페이지별 i18n 적용 │
│ └─ 번역 누락 점검 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 6: 검수/완성 │
│ ├─ 미구현 페이지 점검 │
│ ├─ React 성능 점검 │
│ └─ UI/UX 점검 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 7: 배포 │
│ ├─ .gitignore 확인 │
│ └─ 커밋 │
├─────────────────────────────────────────────────────────────────┤
│ Phase 8: 세션 관리 (매일) │
│ ├─ 하루 시작 / 세션 시작 │
│ └─ 하루 마무리 / 세션 종료 │
└─────────────────────────────────────────────────────────────────┘
📁 파일 구성
스킬 연동
각 Phase에서 활용 가능한 스킬:
| Phase | 스킬 | 역할 |
|---|
| Phase 1 | /kdysetting | 프로젝트 개발 체계 자동 셋팅 |
| Phase 1 | /kdyweb init / migrate | 웹 페이지 구조 초기화 |
| Phase 1 | /kdypick | 재사용 코드 선택 적용 |
| Phase 2 | /kdyimageanti, /kdyimagemid | 이미지 프롬프트 생성 |
| Phase 3 | /kdyweb page / component | 계약 기반 페이지/컴포넌트 추가 |
| Phase 3 | /kdyspike | 복잡한 기능의 사전 연구 |
| Phase 6 | /kdyweb verify | 웹 계약 검증 (전체/풀뿌리) |
| Phase 6 | /kdyconvention | 코드 컨벤션 검증 + 자동 수정 |
| Phase 6 | /kdyconecttest | Import/API/스키마/환경변수/데드코드 검증 |
| Phase 6 | /kdye2e | E2E 시나리오 도출/실행/개선 |
| Phase 7 | /kdyclean | 불필요한 파일/빌드 아티팩트 정리 |
| Phase 8 | /cs | 세션 종료 4단계 프로토콜 |
| 수시 | /kdyweb evolve | 라우트 구조 변경 시 계약 갱신 |
| 수시 | /kdynext | 프로젝트 건강 진단 + 다음 할 일 추천 |
Phase 6에서 /kdyweb --verify 또는 /kdyweb --verify grassroots 실행 결과는 docs/references/_WEB_CONTRACT.md에 기록됩니다.
⚡ Phase별 핵심 명령어
Phase 1: 프로젝트 초기화
| 상황 | 명령어 | 스킬 대안 |
|---|
| 새 프로젝트 전체 | 프로젝트 초기화해줘. | /kdysetting |
| 재사용 코드 적용 | 재사용 코드 가져와줘. | /kdypick |
| 기존 프로젝트에 체계 추가 | 이 프로젝트에 docs 관리 체계 추가해줘. | /kdysetting |
| 템플릿 + 인증 한번에 | 프로젝트 초기화 + Supabase 인증 템플릿 적용해줘. | - |
| API 키 요청 | Supabase API 키가 필요해. 요청 형식으로 알려줘. | - |
Phase 2: UI/디자인
| 상황 | 명령어 |
|---|
| 파비콘 프롬프트 | 파비콘 이미지 프롬프트 만들어줘. |
| 이미지 세트 전체 | 이 프로젝트에 필요한 이미지 세트 파악하고 프롬프트 만들어줘. |
Phase 3: 핵심 기능
| 상황 | 명령어 |
|---|
| 관리자 페이지 전체 | 이 프로젝트를 파악하고 관리자 페이지 만들어줘. |
| 관리자 페이지 추가 | 이 프로젝트 관리자 페이지에 빠진 기능 파악하고 추가해줘. |
| 특정 관리 페이지 | [기능명] 관리 페이지 추가해줘. |
Phase 4: 콘텐츠
| 상황 | 명령어 |
|---|
| 블로그 내용 작성 | 블로그에 제목만 있고 실제 글이 없어. 내용 작성해줘. |
| 새 블로그 글 | 블로그에 새 글 추가해줘. 주제: [주제] |
| 번역 추가 | 블로그 글 번역해줘. |
Phase 5: 다국어
| 상황 | 명령어 |
|---|
| 특정 페이지 i18n | [페이지명] 페이지 다국어 적용해줘. |
| 전체 다국어 점검 | 이 프로젝트 전체 다국어 점검해줘. |
| 번역 누락 확인 | 번역 파일 점검해줘. |
Phase 6: 검수/완성
| 상황 | 명령어 |
|---|
| 전체 페이지 점검 | 이 프로젝트의 모든 페이지 점검해줘. |
| 미구현 일괄 구현 | 미구현 기능들 전부 구현해줘. |
| React 성능 점검 | 이 프로젝트 React 성능 점검해줘. |
| UI/UX 점검 | 이 프로젝트 UI/UX 점검해줘. |
Phase 7: 배포
| 상황 | 명령어 |
|---|
| .gitignore 확인 | .gitignore 확인해줘. |
| 커밋 전 확인 | git status로 확인해줘. |
| 커밋 | 변경사항 커밋해줘. |
Phase 8: 세션 관리
| 상황 | 명령어 | 스킬 대안 |
|---|
| 세션 시작 | 세션 시작. | /kdynext (진단 포함) |
| 세션 종료 | 세션 종료. | /cs |
| 하루 시작 | 하루 시작. | /kdynext |
| 하루 마무리 | 하루 마무리. | /cs |
← 체계 목차