detail update

.claude/commands/appkit.policy.md

@@ -179,7 +179,7 @@ Read files from `docs/`:
 
 #### 3-2. 01-monetization.md (과금 정책)
 
-**File**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/policies/01-monetization.md`
+**File**: `docs/policies/01-monetization.md`
 
 **템플릿**: `.specify/templates/policy-monetization.md` 참조
 
@@ -261,7 +261,7 @@ Read files from `docs/`:
 
 #### 3-3. 02-gameplay.md (서비스 규칙)
 
-**File**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/policies/02-gameplay.md`
+**File**: `docs/policies/02-gameplay.md`
 
 ```markdown
 # 서비스 규칙 (Gameplay/Service)

.claude/commands/appkit.ui.md

@@ -57,13 +57,88 @@ Read files from `docs/`:
 - `concept.md` - 서비스 컨셉
 - `mvp-scope.md` - MVP 범위
 
-### 2. UI 설계 대화
+### 2. 플랫폼 확인
 
-**Step 1: 전체 구조 제시**
+**먼저 사용자에게 플랫폼을 질문:**
+
+"어떤 플랫폼으로 개발하시나요?"
+
+옵션:
+- 웹 (Web Application)
+- 모바일 앱 (iOS/Android)
+- 반응형 웹앱 (Progressive Web App)
+- 크로스 플랫폼 (Web + Mobile)
+
+### 3. UI 설계 대화
+
+**Step 1: 플랫폼별 전체 구조 제시**
+
+#### 웹 (Web Application)
 
 ```markdown
 ## UI 설계 초안
 
+### 플랫폼
+- **유형**: 웹 애플리케이션
+- **네비게이션**: 상단 헤더 + 사이드바 (또는 상단 탭)
+
+### 라우터 구조
+```
+/                           # 홈/대시보드
+├── /[section1]             # 섹션1
+│   └── /:id                # 상세
+├── /[section2]             # 섹션2
+│   └── /:id                # 상세
+└── /settings               # 설정
+```
+
+### 레이아웃 구조
+
+**데스크톱 (1024px+)**
+```
+┌─────────────────────────────────────────────────┐
+│  [Header: 로고, 네비게이션, 사용자 메뉴]          │
+├──────┬──────────────────────────────────────────┤
+│      │                                          │
+│ 사이드│  메인 컨텐츠 영역                          │
+│ 바   │                                          │
+│      │                                          │
+└──────┴──────────────────────────────────────────┘
+```
+
+**태블릿/모바일 (< 1024px)**
+```
+┌─────────────────────────────────────┐
+│  [Header: 햄버거, 로고, 메뉴]        │
+├─────────────────────────────────────┤
+│                                     │
+│  메인 컨텐츠 영역                    │
+│  (전체 너비)                         │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+### 네비게이션 메뉴
+
+| # | 메뉴 | 아이콘 | 경로 | 뱃지 |
+|---|-----|------|-----|------|
+| 1 | [메뉴1] | [아이콘] | `/[경로]` | [조건] |
+| 2 | [메뉴2] | [아이콘] | `/[경로]` | [조건] |
+
+---
+
+이 구조가 맞나요? 수정할 부분이 있나요?
+```
+
+#### 모바일 앱 (iOS/Android)
+
+```markdown
+## UI 설계 초안
+
+### 플랫폼
+- **유형**: 네이티브/하이브리드 모바일 앱
+- **네비게이션**: 하단 탭바 (Bottom Tab Navigation)
+
 ### 라우터 구조
 ```
 /                           # 기본 탭
@@ -74,13 +149,26 @@ Read files from `docs/`:
 └── /settings               # 설정
 ```
 
-### 탭 구조
+### 탭바 구조
 
 | # | 탭 | 아이콘 | 경로 | 뱃지 |
 |---|-----|------|-----|------|
 | 1 | [탭1] | [아이콘] | `/[경로]` | [조건] |
 | 2 | [탭2] | [아이콘] | `/[경로]` | [조건] |
 
+### 화면 레이아웃
+```
+┌─────────────────────────────────────┐
+│  [상단 헤더]                         │
+├─────────────────────────────────────┤
+│                                     │
+│  메인 컨텐츠 영역                    │
+│                                     │
+├─────────────────────────────────────┤
+│  [하단 탭바]                         │
+└─────────────────────────────────────┘
+```
+
 ---
 
 이 구조가 맞나요? 수정할 부분이 있나요?
@@ -91,51 +179,88 @@ Read files from `docs/`:
 - "좋아", "Yes" → 상세 문서 생성
 - 수정 요청 → 업데이트 후 재제시
 
-### 3. 생성할 문서들
+### 4. 생성할 문서들
 
-#### 3-1. router.md (라우터 & UI 목록)
+**출력 디렉토리**: `docs/ui/`
 
-**File**: `docs/router.md`
+#### 4-1. router.md (라우터 & UI 목록)
+
+**File**: `docs/ui/router.md`
 
 **템플릿**: `.specify/templates/ui-router.md` 참조
 
+플랫폼에 따라 다른 섹션 포함:
+- **웹**: 헤더 네비게이션, 사이드바, 반응형 레이아웃
+- **모바일**: 탭바, 스택 네비게이션, 모달
+
 ```markdown
 # [서비스명] - Router & UI 목록
 
+## 플랫폼 정보
+
+| 항목 | 내용 |
+|-----|------|
+| 플랫폼 타입 | [Web / Mobile App / PWA / Cross-platform] |
+| 네비게이션 패턴 | [Header+Sidebar / Bottom Tab / Top Tab] |
+| 반응형 지원 | [Yes / No] |
+
+---
+
 ## 라우터 구조
 
 ```
-/                           # 기본 = [메인탭]
-├── /[tab1]                 # 탭1 (목록)
+/                           # 기본 경로
+├── /[section1]             # 섹션1
 │   └── /:id                # 상세
-├── /[tab2]                 # 탭2 (목록)
+├── /[section2]             # 섹션2
 │   └── /:id                # 상세
-├── /[tab3]                 # 탭3 (메인 액션)
-├── /[tab4]                 # 탭4
 └── /settings               # 설정
 ```
 
 ---
 
-## 탭 구조
+## 네비게이션 구조
 
-### 하단 탭바 (Bottom Tab)
+### 웹 (Header + Sidebar)
+
+**데스크톱 레이아웃**
+```
+┌─────────────────────────────────────────────────┐
+│  Logo    [메뉴1] [메뉴2] [메뉴3]    👤 Profile  │
+├──────┬──────────────────────────────────────────┤
+│      │                                          │
+│ 사이드│  메인 컨텐츠                              │
+│ 메뉴  │                                          │
+│      │                                          │
+└──────┴──────────────────────────────────────────┘
+```
+
+| # | 메뉴 | 아이콘 | 경로 | 설명 |
+|---|-----|------|-----|------|
+| 1 | [메뉴1] | [아이콘] | `/[경로]` | [설명] |
+| 2 | [메뉴2] | [아이콘] | `/[경로]` | [설명] |
+
+### 모바일 앱 (Bottom Tab)
+
+**모바일 레이아웃**
+```
+┌─────────────────────────────────────────────────┐
+│  [상단 헤더]                                     │
+├─────────────────────────────────────────────────┤
+│                                                 │
+│  메인 컨텐츠                                     │
+│                                                 │
+├─────────────────────────────────────────────────┤
+│   [아이콘]  [아이콘]  [아이콘]  [아이콘]  [아이콘]  │
+│   탭1      탭2       탭3      탭4      탭5     │
+└─────────────────────────────────────────────────┘
+```
 
 | # | 탭 | 아이콘 | 경로 | 뱃지 |
 |---|-----|------|-----|------|
 | 1 | [탭명] | [아이콘] | `/[경로]` | [조건] |
 | 2 | [탭명] | [아이콘] | `/[경로]` | [조건] |
 
-### 탭바 레이아웃
-
-```
-┌─────────────────────────────────────────────────┐
-│                                                 │
-│   [아이콘]  [아이콘]  [아이콘]  [아이콘]  [아이콘]  │
-│   탭1      탭2       탭3      탭4      탭5     │
-└─────────────────────────────────────────────────┘
-```
-
 ---
 
 ## 화면 목록
@@ -237,9 +362,9 @@ Read files from `docs/`:
 | **총 UI 요소** | **N개** |
 ```
 
-#### 3-2. main.md (메인 구조)
+#### 4-2. main.md (메인 구조)
 
-**File**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/main.md`
+**File**: `docs/ui/main.md`
 
 **템플릿**: `.specify/templates/ui-main.md` 참조
 
@@ -251,29 +376,58 @@ Read files from `docs/`:
 | 항목 | 내용 |
 |-----|------|
 | 서비스명 | [서비스명] |
-| UI 컨셉 | [UI 컨셉] |
-| 탭 수 | N개 |
+| 플랫폼 | [Web / Mobile App / PWA] |
+| UI 컨셉 | [UI 컨셉 - 예: Notion 스타일 워크스페이스] |
+| 레퍼런스 | [유사 서비스] |
 | 메인 액션 | [메인 액션 설명] |
 
 ---
 
-## 탭 구조
+## 레이아웃 구조
 
-### 탭 비교 (레퍼런스)
+### 웹 (Desktop + Mobile)
+
+**데스크톱 (1024px+)**
+```
+┌─────────────────────────────────────────────────┐
+│  Logo    [메뉴1] [메뉴2] [메뉴3]    👤 Profile  │
+├──────┬──────────────────────────────────────────┤
+│      │                                          │
+│ 사이드│  메인 컨텐츠 영역                          │
+│ 메뉴  │                                          │
+│      │                                          │
+└──────┴──────────────────────────────────────────┘
+```
+
+**모바일 (< 768px)**
+```
+┌─────────────────────────────────────┐
+│  ☰ Logo                      👤    │
+├─────────────────────────────────────┤
+│  메인 컨텐츠 (전체 너비)             │
+└─────────────────────────────────────┘
+```
+
+### 모바일 앱
+
+**기본 레이아웃**
+```
+┌─────────────────────────────────────┐
+│  [상단 헤더]                         │
+├─────────────────────────────────────┤
+│  메인 컨텐츠                         │
+├─────────────────────────────────────┤
+│  [하단 탭바]                         │
+└─────────────────────────────────────┘
+```
+
+### 레퍼런스 비교 (모바일 앱만 해당)
 
 | 위치 | [레퍼런스 앱] | [우리 앱] | 역할 |
 |-----|--------------|---------|------|
 | 1 | [탭] | [탭] | [역할] |
 | 2 | [탭] | [탭] | [역할] |
 
-### 탭바 레이아웃
-
-```
-┌─────────────────────────────────────────────────┐
-│   [각 탭 아이콘과 라벨]                          │
-└─────────────────────────────────────────────────┘
-```
-
 ---
 
 ## 상단 헤더
@@ -381,18 +535,18 @@ interface [Response] {
 
 ---
 
-### 4. 완료 리포트
+### 5. 완료 리포트
 
 ```
 ✅ 화면설계서 작성 완료!
 
 📁 생성된 파일:
-- ui/works/router.md
-- ui/works/main.md
+- docs/ui/router.md
+- docs/ui/main.md
 
 📊 요약:
-- 탭 화면: N개
-- 상세 화면: N개
+- 플랫폼: [Web / Mobile App]
+- 화면/섹션: N개
 - 컴포넌트: N개
 
 📝 다음 단계:
@@ -427,10 +581,41 @@ interface [Response] {
 
 ## Example
 
+### 웹 애플리케이션
+
 ```
 $ /appkit.ui
 
-📱 UI 설계서 작성
+어떤 플랫폼으로 개발하시나요?
+→ 웹 (Web Application)
+
+💻 UI 설계서 작성 (웹)
+
+라우터 구조:
+/
+├── /dashboard
+├── /projects
+│   └── /:id
+├── /analytics
+└── /settings
+
+네비게이션:
+- Header: 로고, 메뉴, 프로필
+- Sidebar: 대시보드, 프로젝트, 분석, 설정
+
+✅ docs/ui/router.md 생성 완료
+✅ docs/ui/main.md 생성 완료
+```
+
+### 모바일 앱
+
+```
+$ /appkit.ui
+
+어떤 플랫폼으로 개발하시나요?
+→ 모바일 앱 (iOS/Android)
+
+📱 UI 설계서 작성 (모바일)
 
 라우터 구조:
 /
@@ -449,6 +634,6 @@ $ /appkit.ui
 4. 🛒 쇼핑
 5. ••• 더보기
 
-✅ router.md 생성 완료
-✅ main.md 생성 완료
+✅ docs/ui/router.md 생성 완료
+✅ docs/ui/main.md 생성 완료
 ```

.specify/templates/ui-main.md

@@ -5,29 +5,70 @@
 | 항목 | 내용 |
 |-----|------|
 | 서비스명 | [서비스명] |
-| UI 컨셉 | [UI 컨셉 - 예: 카카오톡 스타일 메신저] |
-| 탭 수 | N개 ([탭1] - [탭2] - [탭3] - [탭4] - [탭5]) |
-| 메인 액션 | N번 탭 ([탭명]) - [메인 액션 설명] |
+| 플랫폼 | [Web / Mobile App / PWA / Cross-platform] |
+| UI 컨셉 | [UI 컨셉 - 예: Notion 스타일 워크스페이스 / 카카오톡 스타일 메신저] |
+| 레퍼런스 | [유사 서비스명] |
+| 메인 액션 | [메인 액션 설명] |
 
 ---
 
-## 탭 구조
+## 레이아웃 구조
 
-### 레퍼런스 비교
-
-| 위치 | [레퍼런스 앱] | [우리 앱] | 역할 |
-|-----|--------------|---------|------|
-| 1 | [레퍼런스 탭] | [우리 탭] | [역할] |
-| 2 | [레퍼런스 탭] | [우리 탭] | [역할] |
-| 3 | [레퍼런스 탭] | **[우리 탭]** | [핵심 역할] |
-| 4 | [레퍼런스 탭] | [우리 탭] | [역할] |
-| 5 | [레퍼런스 탭] | [우리 탭] | [역할] |
-
-### 탭바 레이아웃
+### 웹 애플리케이션 (해당 시)
 
+**데스크톱 (1024px+)**
 ```
 ┌─────────────────────────────────────────────────┐
+│  Logo    [메뉴1] [메뉴2] [메뉴3]    👤 Profile  │
+├──────┬──────────────────────────────────────────┤
+│      │                                          │
+│ 사이드│  메인 컨텐츠 영역                          │
+│ 메뉴  │                                          │
+│      │                                          │
+└──────┴──────────────────────────────────────────┘
+```
+
+**태블릿 (768px~1023px)**
+```
+┌─────────────────────────────────────────────────┐
+│  ☰ Logo    [메뉴1] [메뉴2]           👤        │
+├─────────────────────────────────────────────────┤
 │                                                 │
+│  메인 컨텐츠 영역 (전체 너비)                     │
+│                                                 │
+└─────────────────────────────────────────────────┘
+```
+
+**모바일 (< 768px)**
+```
+┌─────────────────────────────────────┐
+│  ☰ Logo                      👤    │
+├─────────────────────────────────────┤
+│                                     │
+│  메인 컨텐츠                         │
+│  (전체 너비)                         │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+### 모바일 앱 (해당 시)
+
+**기본 레이아웃**
+```
+┌─────────────────────────────────────┐
+│  [상단 헤더]                         │
+├─────────────────────────────────────┤
+│                                     │
+│  메인 컨텐츠 영역                    │
+│                                     │
+├─────────────────────────────────────┤
+│  [하단 탭바]                         │
+└─────────────────────────────────────┘
+```
+
+**탭바 레이아웃**
+```
+┌─────────────────────────────────────────────────┐
 │   [아이콘]  [아이콘]  [센터]  [아이콘]  [아이콘]  │
 │   탭1      탭2      탭3     탭4      탭5        │
 │                     ^^^^                        │
@@ -35,7 +76,7 @@
 └─────────────────────────────────────────────────┘
 ```
 
-### 센터 탭 강조
+**센터 탭 강조 (해당 시)**
 
 | 요소 | 일반 탭 | 센터 탭 |
 |-----|--------|--------|
@@ -46,9 +87,29 @@
 
 ---
 
-## 상단 헤더
+## 레퍼런스 비교 (모바일 앱만 해당)
 
-### 기본 구조
+| 위치 | [레퍼런스 앱] | [우리 앱] | 역할 |
+|-----|--------------|---------|------|
+| 1 | [레퍼런스 탭] | [우리 탭] | [역할] |
+| 2 | [레퍼런스 탭] | [우리 탭] | [역할] |
+| 3 | [레퍼런스 탭] | **[우리 탭]** | [핵심 역할] |
+
+---
+
+## 헤더 구조
+
+### 웹 - 글로벌 헤더 (해당 시)
+
+```
+┌─────────────────────────────────────────────────┐
+│  Logo    [메뉴1] [메뉴2] [메뉴3]    🔔 👤      │
+│  ^^^^    ^^^^^^^^^^^^^^^^^^^^^^^^    ^^^^^^    │
+│  로고    네비게이션                  알림 프로필  │
+└─────────────────────────────────────────────────┘
+```
+
+### 모바일 앱 - 상단 헤더 (해당 시)
 
 ```
 ┌─────────────────────────────────────────────────┐

.specify/templates/ui-router.md

@@ -1,24 +1,78 @@
 # [서비스명] - Router & UI 목록
 
+## 플랫폼 정보
+
+| 항목 | 내용 |
+|-----|------|
+| 플랫폼 타입 | [Web / Mobile App / PWA / Cross-platform] |
+| 네비게이션 패턴 | [Header+Sidebar / Bottom Tab / Top Tab] |
+| 반응형 지원 | [Yes / No] |
+| 반응형 브레이크포인트 | Desktop: 1024px+, Tablet: 768px~1023px, Mobile: <768px |
+
+---
+
 ## 라우터 구조
 
 ```
-/                           # 기본 = [메인탭]
-├── /[tab1]                 # 탭1 (목록)
+/                           # 기본 경로
+├── /[section1]             # 섹션1
 │   └── /:id                # 상세
-├── /[tab2]                 # 탭2 (목록)
+├── /[section2]             # 섹션2
 │   └── /:id                # 상세
-├── /[tab3]                 # 탭3 (메인 액션)
-├── /[tab4]                 # 탭4
-├── /[tab5]                 # 탭5
 └── /settings               # 설정
 ```
 
 ---
 
-## 탭 구조
+## 네비게이션 구조
 
-### 하단 탭바 (Bottom Tab)
+### 웹 (Header + Sidebar) - 해당 시
+
+**데스크톱 레이아웃 (1024px+)**
+```
+┌─────────────────────────────────────────────────┐
+│  Logo    [메뉴1] [메뉴2] [메뉴3]    👤 Profile  │
+├──────┬──────────────────────────────────────────┤
+│      │                                          │
+│ 사이드│  메인 컨텐츠 영역                          │
+│ 메뉴  │                                          │
+│      │                                          │
+└──────┴──────────────────────────────────────────┘
+```
+
+**헤더 네비게이션**
+
+| # | 메뉴 | 아이콘 | 경로 | 설명 |
+|---|-----|------|-----|------|
+| 1 | [메뉴1] | [아이콘] | `/[경로]` | [설명] |
+| 2 | [메뉴2] | [아이콘] | `/[경로]` | [설명] |
+
+**사이드바 메뉴**
+
+| # | 메뉴 | 아이콘 | 경로 | 뱃지 |
+|---|-----|------|-----|------|
+| 1 | [메뉴1] | [아이콘] | `/[경로]` | [조건] |
+| 2 | [메뉴2] | [아이콘] | `/[경로]` | [조건] |
+
+### 모바일 앱 (Bottom Tab) - 해당 시
+
+**모바일 레이아웃**
+```
+┌─────────────────────────────────────────────────┐
+│  [상단 헤더]                                     │
+├─────────────────────────────────────────────────┤
+│                                                 │
+│  메인 컨텐츠 영역                                 │
+│                                                 │
+├─────────────────────────────────────────────────┤
+│   [아이콘]  [아이콘]  [센터]  [아이콘]  [아이콘]  │
+│   탭1      탭2      탭3     탭4      탭5        │
+│                     ^^^^                        │
+│              (크게, 강조 배경)                   │
+└─────────────────────────────────────────────────┘
+```
+
+**하단 탭바**
 
 | # | 탭 | 아이콘 | 경로 | 뱃지 |
 |---|-----|------|-----|------|
@@ -28,18 +82,6 @@
 | 4 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
 | 5 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
 
-### 탭바 레이아웃
-
-```
-┌─────────────────────────────────────────────────┐
-│                                                 │
-│   [아이콘]  [아이콘]  [센터]  [아이콘]  [아이콘]  │
-│   탭1      탭2      탭3     탭4      탭5        │
-│                     ^^^^                        │
-│              (크게, 강조 배경)                   │
-└─────────────────────────────────────────────────┘
-```
-
 ---
 
 ## 화면 목록