diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ca2b787 Binary files /dev/null and b/.DS_Store differ diff --git a/.claude/commands/appkit.policy.md b/.claude/commands/appkit.policy.md index af9c3c3..eab04bf 100644 --- a/.claude/commands/appkit.policy.md +++ b/.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) diff --git a/.claude/commands/appkit.ui.md b/.claude/commands/appkit.ui.md index 7bc56d5..26ec351 100644 --- a/.claude/commands/appkit.ui.md +++ b/.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 생성 완료 ``` diff --git a/.specify/templates/ui-main.md b/.specify/templates/ui-main.md index 1a34ebc..a44905e 100644 --- a/.specify/templates/ui-main.md +++ b/.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] 🔔 👤 │ +│ ^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^ │ +│ 로고 네비게이션 알림 프로필 │ +└─────────────────────────────────────────────────┘ +``` + +### 모바일 앱 - 상단 헤더 (해당 시) ``` ┌─────────────────────────────────────────────────┐ diff --git a/.specify/templates/ui-router.md b/.specify/templates/ui-router.md index 50cde57..ebf972f 100644 --- a/.specify/templates/ui-router.md +++ b/.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 │ -│ ^^^^ │ -│ (크게, 강조 배경) │ -└─────────────────────────────────────────────────┘ -``` - --- ## 화면 목록