Clauders/appkit
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

detail update

Browse Source
This commit is contained in:
rupy1014
2025-12-15 08:00:30 +09:00
parent 2e6c5b7924
commit 3cee45b6c0
5 changed files with 373 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

4
.claude/commands/appkit.policy.md
View File

@@ -179,7 +179,7 @@ Read files from `docs/`:
#### 3-2. 01-monetization.md (과금 정책) #### 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` 참조 **템플릿**: `.specify/templates/policy-monetization.md` 참조
@@ -261,7 +261,7 @@ Read files from `docs/`:
#### 3-3. 02-gameplay.md (서비스 규칙) #### 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 ```markdown
# 서비스 규칙 (Gameplay/Service) # 서비스 규칙 (Gameplay/Service)

275
.claude/commands/appkit.ui.md
View File

@@ -57,13 +57,88 @@ Read files from `docs/`:
- `concept.md` - 서비스 컨셉 - `concept.md` - 서비스 컨셉
- `mvp-scope.md` - MVP 범위 - `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 ```markdown
## UI 설계 초안 ## 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 # 설정 └── /settings # 설정
``` ```
### 탭 구조 ### 탭바 구조
| # | 탭 | 아이콘 | 경로 | 뱃지 | | # | 탭 | 아이콘 | 경로 | 뱃지 |
|---|-----|------|-----|------| |---|-----|------|-----|------|
| 1 | [탭1] | [아이콘] | `/[경로]` | [조건] | | 1 | [탭1] | [아이콘] | `/[경로]` | [조건] |
| 2 | [탭2] | [아이콘] | `/[경로]` | [조건] | | 2 | [탭2] | [아이콘] | `/[경로]` | [조건] |
### 화면 레이아웃
```
┌─────────────────────────────────────┐
│ [상단 헤더] │
├─────────────────────────────────────┤
│ │
│ 메인 컨텐츠 영역 │
│ │
├─────────────────────────────────────┤
│ [하단 탭바] │
└─────────────────────────────────────┘
```
--- ---
이 구조가 맞나요? 수정할 부분이 있나요? 이 구조가 맞나요? 수정할 부분이 있나요?
@@ -91,51 +179,88 @@ Read files from `docs/`:
- "좋아", "Yes" → 상세 문서 생성 - "좋아", "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` 참조 **템플릿**: `.specify/templates/ui-router.md` 참조
플랫폼에 따라 다른 섹션 포함:
- **웹**: 헤더 네비게이션, 사이드바, 반응형 레이아웃
- **모바일**: 탭바, 스택 네비게이션, 모달
```markdown ```markdown
# [서비스명] - Router & UI 목록 # [서비스명] - Router & UI 목록
## 플랫폼 정보
| 항목 | 내용 |
|-----|------|
| 플랫폼 타입 | [Web / Mobile App / PWA / Cross-platform] |
| 네비게이션 패턴 | [Header+Sidebar / Bottom Tab / Top Tab] |
| 반응형 지원 | [Yes / No] |
---
## 라우터 구조 ## 라우터 구조
``` ```
/ # 기본 = [메인탭] / # 기본 경로
├── /[tab1] # 탭1 (목록) ├── /[section1] # 섹션1
│ └── /:id # 상세 │ └── /:id # 상세
├── /[tab2] # 탭2 (목록) ├── /[section2] # 섹션2
│ └── /:id # 상세 │ └── /:id # 상세
├── /[tab3] # 탭3 (메인 액션)
├── /[tab4] # 탭4
└── /settings # 설정 └── /settings # 설정
``` ```
--- ---
## 탭 구조 ## 네비게이션 구조
### 하단 탭바 (Bottom Tab) ### 웹 (Header + Sidebar)
**데스크톱 레이아웃**
```
┌─────────────────────────────────────────────────┐
│ Logo [메뉴1] [메뉴2] [메뉴3] 👤 Profile │
├──────┬──────────────────────────────────────────┤
│ │ │
│ 사이드│ 메인 컨텐츠 │
│ 메뉴 │ │
│ │ │
└──────┴──────────────────────────────────────────┘
```
| # | 메뉴 | 아이콘 | 경로 | 설명 |
|---|-----|------|-----|------|
| 1 | [메뉴1] | [아이콘] | `/[경로]` | [설명] |
| 2 | [메뉴2] | [아이콘] | `/[경로]` | [설명] |
### 모바일 앱 (Bottom Tab)
**모바일 레이아웃**
```
┌─────────────────────────────────────────────────┐
│ [상단 헤더] │
├─────────────────────────────────────────────────┤
│ │
│ 메인 컨텐츠 │
│ │
├─────────────────────────────────────────────────┤
│ [아이콘] [아이콘] [아이콘] [아이콘] [아이콘] │
│ 탭1 탭2 탭3 탭4 탭5 │
└─────────────────────────────────────────────────┘
```
| # | 탭 | 아이콘 | 경로 | 뱃지 | | # | 탭 | 아이콘 | 경로 | 뱃지 |
|---|-----|------|-----|------| |---|-----|------|-----|------|
| 1 | [탭명] | [아이콘] | `/[경로]` | [조건] | | 1 | [탭명] | [아이콘] | `/[경로]` | [조건] |
| 2 | [탭명] | [아이콘] | `/[경로]` | [조건] | | 2 | [탭명] | [아이콘] | `/[경로]` | [조건] |
### 탭바 레이아웃
```
┌─────────────────────────────────────────────────┐
│ │
│ [아이콘] [아이콘] [아이콘] [아이콘] [아이콘] │
│ 탭1 탭2 탭3 탭4 탭5 │
└─────────────────────────────────────────────────┘
```
--- ---
## 화면 목록 ## 화면 목록
@@ -237,9 +362,9 @@ Read files from `docs/`:
| **총 UI 요소** | **N개** | | **총 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` 참조 **템플릿**: `.specify/templates/ui-main.md` 참조
@@ -251,29 +376,58 @@ Read files from `docs/`:
| 항목 | 내용 | | 항목 | 내용 |
|-----|------| |-----|------|
| 서비스명 | [서비스명] | | 서비스명 | [서비스명] |
| UI 컨셉 | [UI 컨셉] | | 플랫폼 | [Web / Mobile App / PWA] |
| 탭 수 | N개 | | UI 컨셉 | [UI 컨셉 - 예: Notion 스타일 워크스페이스] |
| 레퍼런스 | [유사 서비스] |
| 메인 액션 | [메인 액션 설명] | | 메인 액션 | [메인 액션 설명] |
--- ---
## 탭 구조 ## 레이아웃 구조
### 탭 비교 (레퍼런스) ### 웹 (Desktop + Mobile)
**데스크톱 (1024px+)**
```
┌─────────────────────────────────────────────────┐
│ Logo [메뉴1] [메뉴2] [메뉴3] 👤 Profile │
├──────┬──────────────────────────────────────────┤
│ │ │
│ 사이드│ 메인 컨텐츠 영역 │
│ 메뉴 │ │
│ │ │
└──────┴──────────────────────────────────────────┘
```
**모바일 (< 768px)**
```
┌─────────────────────────────────────┐
│ ☰ Logo 👤 │
├─────────────────────────────────────┤
│ 메인 컨텐츠 (전체 너비) │
└─────────────────────────────────────┘
```
### 모바일 앱
**기본 레이아웃**
```
┌─────────────────────────────────────┐
│ [상단 헤더] │
├─────────────────────────────────────┤
│ 메인 컨텐츠 │
├─────────────────────────────────────┤
│ [하단 탭바] │
└─────────────────────────────────────┘
```
### 레퍼런스 비교 (모바일 앱만 해당)
| 위치 | [레퍼런스 앱] | [우리 앱] | 역할 | | 위치 | [레퍼런스 앱] | [우리 앱] | 역할 |
|-----|--------------|---------|------| |-----|--------------|---------|------|
| 1 | [탭] | [탭] | [역할] | | 1 | [탭] | [탭] | [역할] |
| 2 | [탭] | [탭] | [역할] | | 2 | [탭] | [탭] | [역할] |
### 탭바 레이아웃
```
┌─────────────────────────────────────────────────┐
│ [각 탭 아이콘과 라벨] │
└─────────────────────────────────────────────────┘
```
--- ---
## 상단 헤더 ## 상단 헤더
@@ -381,18 +535,18 @@ interface [Response] {
--- ---
### 4. 완료 리포트 ### 5. 완료 리포트
``` ```
✅ 화면설계서 작성 완료! ✅ 화면설계서 작성 완료!
📁 생성된 파일: 📁 생성된 파일:
- ui/works/router.md - docs/ui/router.md
- ui/works/main.md - docs/ui/main.md
📊 요약: 📊 요약:
- 탭 화면: N개 - 플랫폼: [Web / Mobile App]
- 상세 화면: N개 - 화면/섹션: N개
- 컴포넌트: N개 - 컴포넌트: N개
📝 다음 단계: 📝 다음 단계:
@@ -427,10 +581,41 @@ interface [Response] {
## Example ## Example
### 웹 애플리케이션
``` ```
$ /appkit.ui $ /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. 🛒 쇼핑 4. 🛒 쇼핑
5. ••• 더보기 5. ••• 더보기
✅ router.md 생성 완료 ✅ docs/ui/router.md 생성 완료
✅ main.md 생성 완료 ✅ docs/ui/main.md 생성 완료
``` ```

97
.specify/templates/ui-main.md
View File

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

82
.specify/templates/ui-router.md
View File

@@ -1,24 +1,78 @@
# [서비스명] - Router & UI 목록 # [서비스명] - 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 # 상세 │ └── /:id # 상세
├── /[tab2] # 탭2 (목록) ├── /[section2] # 섹션2
│ └── /:id # 상세 │ └── /:id # 상세
├── /[tab3] # 탭3 (메인 액션)
├── /[tab4] # 탭4
├── /[tab5] # 탭5
└── /settings # 설정 └── /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 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] | | 4 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
| 5 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] | | 5 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
### 탭바 레이아웃
```
┌─────────────────────────────────────────────────┐
│ │
│ [아이콘] [아이콘] [센터] [아이콘] [아이콘] │
│ 탭1 탭2 탭3 탭4 탭5 │
│ ^^^^ │
│ (크게, 강조 배경) │
└─────────────────────────────────────────────────┘
```
--- ---
## 화면 목록 ## 화면 목록