create-ax-project 1.0.0

package/template/stages/04-ui-ux/outputs/user_flows.md

@@ -0,0 +1,321 @@
+# 🔄 Snake Game - 사용자 플로우
+
+> 생성일: 2026-01-21
+> 스테이지: 04-ui-ux
+> 프로젝트: snake-game
+
+---
+
+## 1. 전체 게임 플로우
+
+```mermaid
+graph TD
+    A[앱 접속] --> B[Start Screen]
+
+    B --> |Start 버튼 클릭| C[Game Playing]
+    B --> |How to Play| B1[Instructions Modal]
+    B1 --> |닫기| B
+
+    C --> |방향키/스와이프| C
+    C --> |ESC/P/Pause버튼| D[Pause Overlay]
+
+    D --> |Resume| C
+    D --> |Quit| B
+
+    C --> |벽/자기몸 충돌| E[Game Over Modal]
+
+    E --> F{최고 점수 갱신?}
+    F -- Yes --> G[localStorage 저장]
+    F -- No --> H[점수 표시]
+    G --> H
+
+    H --> |Play Again| C
+    H --> |Main Menu| B
+```
+
+---
+
+## 2. 핵심 사용자 플로우
+
+### 2.1 게임 시작 플로우
+
+```
+[Start Screen]
+      │
+      ▼
+ 사용자: Start 버튼 클릭 또는 Enter 키
+      │
+      ▼
+ 시스템: 게임 상태 초기화
+      │  - snake: 초기 위치 (10,10)
+      │  - food: 랜덤 위치 생성
+      │  - score: 0
+      │  - direction: RIGHT
+      │  - status: PLAYING
+      │
+      ▼
+ 시스템: 게임 루프 시작 (requestAnimationFrame)
+      │
+      ▼
+[Game Playing]
+```
+
+### 2.2 게임 플레이 루프
+
+```
+[Game Playing]
+      │
+      ▼
+┌─────────────────────────────────┐
+│  1. 입력 처리                    │
+│     - 키보드: Arrow Keys / WASD │
+│     - 터치: Swipe / D-Pad       │
+│     - 역방향 입력 무시           │
+└──────────────┬──────────────────┘
+               ▼
+┌─────────────────────────────────┐
+│  2. 게임 틱 (TICK)              │
+│     - 뱀 머리 위치 계산          │
+│     - 충돌 감지 실행             │
+└──────────────┬──────────────────┘
+               ▼
+        ┌──────┴──────┐
+        │  충돌 타입?  │
+        └──────┬──────┘
+      ┌────────┼────────┐
+      ▼        ▼        ▼
+   [벽/자기]  [먹이]   [없음]
+      │        │        │
+      ▼        ▼        ▼
+ Game Over  성장+점수   이동
+               │        │
+               └────────┴─────► Canvas 렌더링
+                                    │
+                                    ▼
+                            다음 프레임 대기
+                                    │
+                                    └──► [루프 반복]
+```
+
+### 2.3 일시정지 / 재개 플로우
+
+```
+[Game Playing]
+      │
+      ▼
+ 사용자: ESC / P / Pause 버튼
+      │
+      ▼
+ 시스템: status → PAUSED
+      │  - 게임 루프 정지
+      │  - Pause Overlay 표시
+      │
+      ▼
+[Pause Overlay]
+      │
+      ├──► 사용자: Resume 버튼
+      │         │
+      │         ▼
+      │    시스템: status → PLAYING
+      │         │  - 게임 루프 재개
+      │         ▼
+      │    [Game Playing]
+      │
+      └──► 사용자: Quit 버튼
+                  │
+                  ▼
+             시스템: 게임 상태 초기화
+                  │
+                  ▼
+             [Start Screen]
+```
+
+### 2.4 게임 오버 플로우
+
+```
+[Collision Detected]
+      │
+      ▼
+ 시스템: status → GAME_OVER
+      │  - 게임 루프 정지
+      │
+      ▼
+ 시스템: 최고 점수 비교
+      │
+      ├──► score > highScore
+      │         │
+      │         ▼
+      │    localStorage 저장
+      │    "NEW HIGH SCORE!" 표시
+      │
+      └──► score <= highScore
+                  │
+                  ▼
+             일반 점수 표시
+      │
+      ▼
+[Game Over Modal]
+      │
+      ├──► 사용자: Play Again (Enter)
+      │         │
+      │         ▼
+      │    시스템: 게임 리셋 + 시작
+      │         │
+      │         ▼
+      │    [Game Playing]
+      │
+      └──► 사용자: Main Menu
+                  │
+                  ▼
+             시스템: 게임 리셋
+                  │
+                  ▼
+             [Start Screen]
+```
+
+---
+
+## 3. 입력 처리 플로우
+
+### 3.1 키보드 입력
+
+```
+ 키보드 이벤트 (keydown)
+      │
+      ▼
+┌─────────────────────────────────┐
+│  키 매핑                         │
+│  ArrowUp / W    → UP            │
+│  ArrowDown / S  → DOWN          │
+│  ArrowLeft / A  → LEFT          │
+│  ArrowRight / D → RIGHT         │
+│  ESC / P        → PAUSE         │
+│  Enter / Space  → RESTART       │
+└──────────────┬──────────────────┘
+               ▼
+      ┌────────┴────────┐
+      │  현재 상태?      │
+      └────────┬────────┘
+        ┌──────┴──────┐
+        ▼             ▼
+   [PLAYING]     [GAME_OVER]
+        │             │
+        ▼             ▼
+   방향 변경      재시작 처리
+   (역방향 무시)
+```
+
+### 3.2 터치/스와이프 입력
+
+```
+ 터치 이벤트
+      │
+      ├──► touchstart
+      │    - 시작 좌표 저장 (startX, startY)
+      │    - 시작 시간 저장
+      │
+      └──► touchend
+           - 종료 좌표 (endX, endY)
+           │
+           ▼
+      ┌─────────────────────────────┐
+      │  스와이프 판정               │
+      │  - 거리 > 50px (threshold)  │
+      │  - 시간 < 500ms             │
+      └──────────────┬──────────────┘
+                     ▼
+            방향 계산 (X vs Y delta)
+                     │
+           ┌─────────┴─────────┐
+           ▼                   ▼
+       |deltaX| > |deltaY|  |deltaY| > |deltaX|
+           │                   │
+      ┌────┴────┐         ┌────┴────┐
+      ▼         ▼         ▼         ▼
+   LEFT      RIGHT       UP       DOWN
+```
+
+---
+
+## 4. 에러/예외 플로우
+
+### 4.1 localStorage 접근 실패
+
+```
+ localStorage 작업 시도
+      │
+      ▼
+┌─────────────────────────────────┐
+│  try-catch 처리                 │
+│                                 │
+│  실패 시:                        │
+│  - 콘솔 경고 출력               │
+│  - highScore = 0 유지           │
+│  - 게임은 정상 진행             │
+└─────────────────────────────────┘
+```
+
+### 4.2 Canvas 지원 안 됨
+
+```
+ Canvas 초기화
+      │
+      ▼
+┌─────────────────────────────────┐
+│  getContext('2d') 호출          │
+│                                 │
+│  null 반환 시:                   │
+│  - 에러 메시지 화면 표시         │
+│  - "Your browser does not       │
+│    support Canvas"              │
+└─────────────────────────────────┘
+```
+
+---
+
+## 5. 상태 전이 다이어그램
+
+```
+          START_GAME
+    ┌──────────────────┐
+    │                  │
+    ▼                  │
+ [IDLE] ────────► [PLAYING]
+    ▲                  │
+    │   RESTART        │  PAUSE_GAME
+    │                  ▼
+    │             [PAUSED]
+    │                  │
+    │   RESUME_GAME    │
+    │  ┌───────────────┘
+    │  │
+    │  ▼
+    │ [PLAYING]
+    │      │
+    │      │ GAME_OVER (충돌)
+    │      ▼
+    └── [GAME_OVER]
+```
+
+### 상태별 허용 액션
+
+| 현재 상태 | 허용 액션 |
+|----------|----------|
+| IDLE | START_GAME |
+| PLAYING | CHANGE_DIRECTION, PAUSE_GAME, TICK, GAME_OVER |
+| PAUSED | RESUME_GAME, RESTART |
+| GAME_OVER | RESTART |
+
+---
+
+## ✅ 사용자 플로우 체크리스트
+
+- [x] 전체 게임 플로우 다이어그램
+- [x] 게임 시작 플로우
+- [x] 게임 플레이 루프
+- [x] 일시정지/재개 플로우
+- [x] 게임 오버 플로우
+- [x] 키보드 입력 처리
+- [x] 터치/스와이프 입력 처리
+- [x] 에러/예외 플로우
+- [x] 상태 전이 다이어그램

package/template/stages/04-ui-ux/outputs/wireframes.md

@@ -0,0 +1,241 @@
+# 🎨 Snake Game - 와이어프레임
+
+> 생성일: 2026-01-21
+> 스테이지: 04-ui-ux
+> 프로젝트: snake-game
+> AI 도구: Gemini CLI
+
+---
+
+## 1. 화면 개요
+
+| 화면 | 설명 | 컴포넌트 |
+|------|------|----------|
+| Start Screen | 게임 시작 전 타이틀 화면 | StartScreen |
+| Desktop Play | 데스크톱 게임 플레이 | GameEngine, CanvasLayer, ScoreBoard |
+| Mobile Play | 모바일 게임 플레이 + 터치 컨트롤 | GameEngine, MobileControls |
+| Pause Overlay | 일시정지 오버레이 | PauseOverlay |
+| Game Over | 게임 오버 모달 | GameOverModal |
+
+---
+
+## 2. 시작 화면 (Start Screen)
+
+```
++----------------------------------------+
+|                                        |
+|           S  N  A  K  E                |
+|           (Neon Logo)                  |
+|                                        |
+|         High Score: 1,250              |
+|                                        |
+|    +--------------------------+        |
+|    |      GAME START          |        |
+|    +--------------------------+        |
+|                                        |
+|    [ How to Play ]   [ Settings ]      |
+|                                        |
+|         (c) 2026 Snake Game            |
++----------------------------------------+
+```
+
+### 상세 명세
+
+| 요소 | 스타일 | 상호작용 |
+|------|--------|----------|
+| 로고 | 네온 그린 (#00ff88), Glow 효과 | - |
+| High Score | 노란색 (#f0e130), 서브 텍스트 | - |
+| Start 버튼 | Primary 버튼, 네온 테두리 | 클릭/Enter → 게임 시작 |
+| How to Play | 텍스트 링크 | 클릭 → 설명 모달 |
+
+---
+
+## 3. 게임 플레이 - 데스크톱 (Desktop)
+
+```
++----------------------------------------+
+|  SCORE: 120           BEST: 1,250      |
++----------------------------------------+
+|                                        |
+|  +----------------------------------+  |
+|  |                                  |  |
+|  |      [Canvas 400 x 400]          |  |
+|  |                                  |  |
+|  |    ###O                @         |  |
+|  |       (Snake)        (Food)      |  |
+|  |                                  |  |
+|  |                                  |  |
+|  +----------------------------------+  |
+|                                        |
+|  [ESC/P] Pause    [Arrow Keys] Move    |
++----------------------------------------+
+```
+
+### 레이아웃 명세
+
+| 영역 | 크기 | 배치 |
+|------|------|------|
+| ScoreBoard | 100% width, 48px height | 상단 고정 |
+| Canvas | 400x400px (20x20 * 20px) | 중앙 |
+| Controls Hint | Auto | 하단 |
+
+### 요소 명세
+
+| 요소 | 스타일 |
+|------|--------|
+| Score 텍스트 | 화이트 (#ffffff), 좌측 정렬 |
+| Best Score 텍스트 | 골드 (#f0e130), 우측 정렬 |
+| Canvas 배경 | #16213e |
+| Grid Lines | rgba(255, 255, 255, 0.05) |
+| Snake Head | #00cc6a + Glow |
+| Snake Body | #00ff88 + Glow |
+| Food | #ff6b6b + Glow |
+
+---
+
+## 4. 게임 플레이 - 모바일 (Mobile + Touch Controls)
+
+```
++----------------------------------------+
+| SCORE: 120               [||] (Pause)  |
++----------------------------------------+
+|                                        |
+| +----------------------------------+   |
+| |                                  |   |
+| |      [Responsive Canvas]         |   |
+| |         (max-width)              |   |
+| |                                  |   |
+| +----------------------------------+   |
+|                                        |
+|              [  ^  ]                   |
+|                UP                      |
+|                                        |
+|   [  <  ]              [  >  ]         |
+|    LEFT                 RIGHT          |
+|                                        |
+|              [  v  ]                   |
+|               DOWN                     |
++----------------------------------------+
+```
+
+### 모바일 레이아웃
+
+| 영역 | 크기 | 배치 |
+|------|------|------|
+| ScoreBoard | 100% width, 44px | 상단 |
+| Pause 버튼 | 44x44px | 상단 우측 |
+| Canvas | calc(100vw - 32px), max 400px | 중앙 |
+| D-Pad Controls | 200x200px | 하단 중앙 |
+
+### D-Pad 버튼 명세
+
+| 버튼 | 크기 | 터치 영역 |
+|------|------|----------|
+| 상/하/좌/우 | 56x56px | 64x64px (최소) |
+| 활성 상태 | 배경 Primary, 테두리 강조 |
+
+---
+
+## 5. 일시정지 오버레이 (Pause Overlay)
+
+```
++----------------------------------------+
+|  SCORE: 120           BEST: 1,250      |
++----------------------------------------+
+|  +----------------------------------+  |
+|  |                                  |  |
+|  |          ▌▌ PAUSED              |  |
+|  |                                  |  |
+|  |        +----------------+        |  |
+|  |        |    RESUME      |        |  |
+|  |        +----------------+        |  |
+|  |                                  |  |
+|  |        +----------------+        |  |
+|  |        |     QUIT       |        |  |
+|  |        +----------------+        |  |
+|  |                                  |  |
+|  +----------------------------------+  |
+|                                        |
++----------------------------------------+
+```
+
+### 오버레이 명세
+
+| 요소 | 스타일 |
+|------|--------|
+| 배경 | rgba(0, 0, 0, 0.8), 블러 효과 |
+| PAUSED 텍스트 | 화이트, 큰 폰트 |
+| Resume 버튼 | Primary 버튼 (#00ff88) |
+| Quit 버튼 | Secondary 버튼 (투명, 테두리만) |
+
+---
+
+## 6. 게임 오버 모달 (Game Over Modal)
+
+```
++----------------------------------------+
+| (Dimmed Background Overlay)            |
+|                                        |
+|    +------------------------------+    |
+|    |                              |    |
+|    |      G A M E   O V E R       |    |
+|    |                              |    |
+|    |      Final Score: 120        |    |
+|    |                              |    |
+|    |    ★ NEW HIGH SCORE! ★       |    |
+|    |                              |    |
+|    |  +------------------------+  |    |
+|    |  |   PLAY AGAIN (Enter)   |  |    |
+|    |  +------------------------+  |    |
+|    |                              |    |
+|    |       [ Main Menu ]          |    |
+|    +------------------------------+    |
+|                                        |
++----------------------------------------+
+```
+
+### 모달 명세
+
+| 요소 | 스타일 | 조건 |
+|------|--------|------|
+| 배경 오버레이 | rgba(0, 0, 0, 0.85) | - |
+| 모달 박스 | #16213e, 네온 테두리, 둥근 모서리 | - |
+| GAME OVER | 레드 (#ff6b6b), Glow | - |
+| Final Score | 화이트, 큰 폰트 | - |
+| NEW HIGH SCORE | 골드 (#f0e130), 깜빡임 | score > highScore |
+| Play Again | Primary 버튼, 전체 너비 | - |
+| Main Menu | 텍스트 링크 | - |
+
+---
+
+## 7. 반응형 브레이크포인트
+
+| 브레이크포인트 | 화면 너비 | 변경 사항 |
+|--------------|----------|----------|
+| Mobile | < 480px | 터치 컨트롤 활성화, 캔버스 축소 |
+| Tablet | 480px - 768px | 터치 컨트롤 선택적 |
+| Desktop | > 768px | 키보드 컨트롤, 풀 캔버스 |
+
+---
+
+## 8. 애니메이션 명세
+
+| 애니메이션 | 트리거 | 효과 |
+|-----------|--------|------|
+| Score Pulse | 점수 증가 | scale(1.2) → scale(1), 200ms |
+| Modal Enter | 모달 열림 | opacity 0→1, scale(0.9→1), 300ms |
+| Modal Exit | 모달 닫힘 | opacity 1→0, 200ms |
+| Button Hover | 버튼 호버 | 배경색 채움, 100ms |
+| Snake Glow | 항상 | box-shadow pulse, 1s loop |
+
+---
+
+## ✅ 와이어프레임 체크리스트
+
+- [x] 시작 화면
+- [x] 게임 플레이 (데스크톱)
+- [x] 게임 플레이 (모바일)
+- [x] 일시정지 오버레이
+- [x] 게임 오버 모달
+- [x] 반응형 브레이크포인트
+- [x] 애니메이션 명세

package/template/stages/04-ui-ux/prompts/collaboration.md

@@ -0,0 +1,56 @@
+# AI 협업 프롬프트 - UI/UX Planning
+
+## 협업 모드: Debate + Parallel
+
+이 스테이지에서는 **토론 모드**로 UX 방향성을 결정하고, **병렬 모드**로 세부 설계를 진행합니다.
+
+### 참여 모델
+- **Gemini**: 창의적 UI 설계, 와이어프레임 생성
+- **Claude**: 사용성 검토, 접근성 평가
+
+### 협업 프롬프트
+
+```
+# UX 방향 토론
+/collaborate --mode debate --topic "사용자 경험 방향성" --rounds 2
+
+# 병렬 설계
+/collaborate --mode parallel --models gemini,claude --task "UI 컴포넌트 설계"
+```
+
+### 토론 주제
+
+1. **인터랙션 패턴**: 전통적 vs 혁신적
+2. **정보 아키텍처**: 평면 vs 계층
+3. **디자인 시스템**: 기존 사용 vs 커스텀
+
+### 작업 분담
+
+| AI | 담당 영역 | 출력 |
+|----|----------|------|
+| Gemini | 와이어프레임, 시각 설계 | wireframes.md |
+| Claude | 사용자 플로우, 접근성 검토 | user_flows.md |
+
+### 디자인 검토 체크리스트
+
+- [ ] 사용자 시나리오 기반 설계
+- [ ] 반응형 고려
+- [ ] 접근성 (WCAG 2.1)
+- [ ] 일관된 디자인 언어
+
+### 출력 형식
+
+```markdown
+## AI 협업 결과
+
+### Gemini 설계
+- 와이어프레임 (ASCII/Mermaid)
+- 색상/타이포그래피 제안
+
+### Claude 검토
+- 사용성 평가
+- 접근성 개선점
+
+### 통합 디자인 시스템
+- [최종 컴포넌트 목록]
+```

package/template/stages/04-ui-ux/prompts/validation.md

@@ -0,0 +1,54 @@
+# 산출물 검증 프롬프트 - UI/UX Planning
+
+## 검증 대상
+
+| 산출물 | 필수 조건 | 검증 방법 |
+|--------|----------|----------|
+| `wireframes.md` | 주요 화면 5개+ | 수량 확인 |
+| `user_flows.md` | 핵심 플로우 3개+ | 수량 확인 |
+| `design_system.md` | 색상/타이포/스페이싱 | 구조 확인 |
+| `HANDOFF.md` | 컴포넌트 목록 | 항목 확인 |
+
+## 검증 명령
+
+```bash
+/validate --stage 04-ui-ux
+```
+
+## 품질 기준
+
+### wireframes.md
+- [ ] 주요 화면 5개 이상
+- [ ] 각 화면 설명
+- [ ] 반응형 breakpoint 고려
+- [ ] 상호작용 설명
+
+### user_flows.md
+- [ ] 핵심 사용자 플로우 3개 이상
+- [ ] 각 플로우 다이어그램
+- [ ] 엣지 케이스 처리
+- [ ] 에러 상태 정의
+
+### design_system.md
+- [ ] 색상 팔레트 (Primary, Secondary, Neutral)
+- [ ] 타이포그래피 스케일
+- [ ] 스페이싱 시스템
+- [ ] 컴포넌트 목록 및 변형
+
+### HANDOFF.md
+- [ ] 구현할 컴포넌트 목록
+- [ ] 우선순위 지정
+- [ ] 기술적 고려사항
+
+## 자동 검증 스크립트
+
+```bash
+# 와이어프레임 수 확인
+grep -c "^### " outputs/wireframes.md
+
+# 사용자 플로우 수 확인
+grep -c "^## Flow" outputs/user_flows.md
+
+# 디자인 시스템 섹션 확인
+grep -E "^## (색상|Color|타이포|Typography|스페이싱|Spacing)" outputs/design_system.md
+```