muno-claude-plugin 1.6.0 → 1.8.0

package/templates/skills/app-design/SKILL.md

@@ -0,0 +1,640 @@
+---
+name: app-design
+description: |
+  UI/UX 디자인을 생성하고 개선합니다. Apple과 Toss 스타일의 세련된 앱 디자인을 제공합니다.
+  "UI 디자인해줘", "UX 개선해줘", "화면 디자인", "인터페이스 만들어줘", "디자인 시스템",
+  "디자인 가이드", "프로토타입" 등의 요청에 사용합니다.
+  개발자가 직접 구현할 수 있도록 구체적이고 실행 가능한 디자인 스펙을 제공합니다.
+allowed-tools: Read, Glob, Grep, Write, Edit, WebSearch, WebFetch
+---
+
+# App Design Skill
+
+## 페르소나
+
+@.claude/personas/app-designer.md
+
+> **App Design의 역할**: 사용자 경험을 극대화하는 직관적이고 아름다운 인터페이스를 설계합니다.
+> Apple과 Toss의 디자인 철학을 바탕으로 단순하지만 강력한 디자인을 제공합니다.
+
+---
+
+## 디자인 철학
+
+### Apple HIG 2026 원칙
+
+1. **Hierarchy (위계)**
+   - 사용자의 시선을 즉시 안내
+   - 중요한 요소를 명확히 강조
+   - 정보의 우선순위를 시각적으로 표현
+
+2. **System Integration (시스템 통합)**
+   - 하드웨어 디자인을 소프트웨어에 반영
+   - Rounded corners, minimal lines 사용
+   - Dynamic materials로 깊이감 표현
+
+3. **Consistency (일관성)**
+   - 학습한 패턴을 전체 앱에서 재사용
+   - 예측 가능한 인터랙션
+   - 플랫폼 표준 준수
+
+### Toss Design System 원칙
+
+1. **명확성 (Clarity)**
+   - 텍스트 최소화, 시각적 언어 우선
+   - 한눈에 이해되는 인터페이스
+   - 불필요한 설명 제거
+
+2. **속도 (Speed)**
+   - 최소한의 탭으로 목표 달성
+   - 로딩 최소화
+   - 즉각적인 피드백
+
+3. **신뢰 (Trust)**
+   - 명확한 결과 표시
+   - 에러 상황의 친절한 안내
+   - 투명한 정보 제공
+
+---
+
+## 워크플로우
+
+```mermaid
+flowchart TD
+    A[디자인 요청] --> B[Step 1: 사용자 & 컨텍스트 파악]
+    B --> C{정보 충분?}
+    C -->|No| D[질문: 사용자, 사용 상황, 목표]
+    D --> E[사용자 응답]
+    E --> C
+    C -->|Yes| F[Step 2: 정보 아키텍처 설계]
+    F --> G{구조 명확?}
+    G -->|No| H[질문: 핵심 기능, 우선순위]
+    H --> I[사용자 응답]
+    I --> G
+    G -->|Yes| J[Step 3: 비주얼 디자인]
+    J --> K[Step 4: 인터랙션 디자인]
+    K --> L[Step 5: 디자인 스펙 문서화]
+    L --> M[개발자 핸드오프]
+```
+
+---
+
+## Step 1: 사용자 & 컨텍스트 파악
+
+### 수집해야 할 정보
+
+- **타겟 사용자**: 누가 사용하는가? (연령, 기술 숙련도, 사용 맥락)
+- **플랫폼**: iOS, Android, Web, 또는 크로스 플랫폼?
+- **사용 시나리오**: 언제, 어디서, 왜 사용하는가?
+- **핵심 목표**: 사용자가 달성하려는 것은?
+- **제약사항**: 기술적 제약, 브랜드 가이드라인
+
+### 질문 예시
+
+```
+1. "어떤 사용자를 타겟으로 하나요? (연령대, 기술 수준 등)"
+2. "이 기능을 주로 언제, 어디서 사용하나요? (출퇴근 중, 집에서, 업무 중 등)"
+3. "iOS, Android, 또는 둘 다인가요?"
+4. "기존 브랜드 컬러나 디자인 가이드라인이 있나요?"
+```
+
+---
+
+## Step 2: 정보 아키텍처 설계
+
+### 화면 구조 설계
+
+1. **기능 우선순위 결정**
+   - Primary action (가장 중요한 행동)
+   - Secondary actions (부가 기능)
+   - Tertiary actions (설정, 옵션 등)
+
+2. **네비게이션 구조**
+   - Tab Bar (주요 섹션 2-5개)
+   - Navigation Bar (계층 구조)
+   - Modal (임시 작업)
+
+3. **정보 그룹핑**
+   - 관련된 정보를 카드/섹션으로 묶기
+   - 시각적 분리 (Spacing, Divider)
+
+### 질문 예시
+
+```
+1. "이 화면에서 사용자가 가장 자주 하는 행동은 무엇인가요?"
+2. "한 화면에 표시해야 할 정보가 많나요? 우선순위는?"
+3. "이 화면에서 다른 화면으로 이동할 수 있어야 하나요?"
+```
+
+---
+
+## Step 3: 비주얼 디자인
+
+### 컬러 시스템
+
+#### Apple 스타일
+```
+Primary: System Blue (#007AFF)
+Secondary: System Gray (#8E8E93)
+Success: System Green (#34C759)
+Warning: System Orange (#FF9500)
+Danger: System Red (#FF3B30)
+
+Background:
+- Light: White (#FFFFFF), System Gray 6 (#F2F2F7)
+- Dark: Black (#000000), System Gray 6 (#1C1C1E)
+```
+
+#### Toss 스타일
+```
+Primary: Toss Blue (#3182F6)
+Secondary: Toss Black (#191F28)
+Success: Toss Green (#3BCE84)
+Warning: Toss Yellow (#FFC043)
+Danger: Toss Red (#F04452)
+
+Background:
+- White (#FFFFFF)
+- Gray 50 (#F9FAFB)
+- Gray 100 (#F2F4F6)
+```
+
+### 타이포그래피
+
+#### iOS (San Francisco)
+```
+Large Title: 34pt, Bold
+Title 1: 28pt, Regular
+Title 2: 22pt, Regular
+Title 3: 20pt, Regular
+Headline: 17pt, Semibold
+Body: 17pt, Regular
+Callout: 16pt, Regular
+Subheadline: 15pt, Regular
+Footnote: 13pt, Regular
+Caption 1: 12pt, Regular
+Caption 2: 11pt, Regular
+```
+
+#### Toss 스타일
+```
+Display: 32px, Bold, -0.5px letter-spacing
+Headline 1: 24px, Bold
+Headline 2: 20px, Bold
+Headline 3: 18px, Bold
+Body 1: 16px, Regular, 1.6 line-height
+Body 2: 14px, Regular, 1.5 line-height
+Caption: 12px, Regular
+```
+
+### Spacing System (8pt Grid)
+
+```
+4px  - Micro spacing (아이콘과 텍스트)
+8px  - Small spacing (관련 요소)
+12px - Medium spacing (섹션 내부)
+16px - Base spacing (기본 패딩)
+24px - Large spacing (섹션 간)
+32px - XL spacing (큰 구분)
+48px - XXL spacing (주요 구분)
+```
+
+### Corner Radius
+
+#### Apple 스타일
+```
+Button: 8-12px
+Card: 12-16px
+Modal: 16-20px
+Bottom Sheet: 16px (상단만)
+```
+
+#### Toss 스타일
+```
+Button: 8px
+Card: 12px
+Input: 8px
+Bottom Sheet: 16px (상단만)
+```
+
+---
+
+## Step 4: 인터랙션 디자인
+
+### 제스처
+
+```
+Tap: 기본 액션
+Long Press: 컨텍스트 메뉴, 미리보기
+Swipe:
+  - Left: 삭제, 보관
+  - Right: 좋아요, 완료
+  - Down: 새로고침 (Pull to Refresh)
+Pinch: 확대/축소
+```
+
+### 애니메이션 타이밍
+
+```
+Instant: 100ms (토글, 스위치)
+Quick: 200ms (버튼 피드백)
+Standard: 300ms (화면 전환)
+Slow: 500ms (복잡한 변화)
+
+Easing:
+- ease-out: 0.25s (기본 전환)
+- spring: (response: 0.3, damping: 0.7) (iOS)
+```
+
+### 피드백
+
+1. **Haptic Feedback** (iOS)
+   - Light: 선택, 스위치
+   - Medium: 확인, 완료
+   - Heavy: 에러, 경고
+
+2. **Visual Feedback**
+   - 버튼: Pressed state (투명도 70%)
+   - 리스트 아이템: Highlight (배경색 변경)
+   - 로딩: Skeleton UI 또는 Spinner
+
+3. **Sound** (선택적)
+   - 성공: 짧고 경쾌한 소리
+   - 에러: 부드러운 경고음
+
+---
+
+## Step 5: 디자인 스펙 문서화
+
+### 화면별 스펙
+
+각 화면마다 다음 정보를 포함:
+
+```markdown
+## [화면 이름]
+
+### 목적
+이 화면의 역할과 사용자 목표
+
+### 레이아웃
+- Navigation Bar
+  - Title: "제목"
+  - Left Button: 뒤로가기
+  - Right Button: 설정
+
+- Content Area
+  - Header Section
+    - 타이틀 (Headline 1, Bold)
+    - 서브타이틀 (Body 2, Gray)
+
+  - Card Component
+    - Padding: 16px
+    - Border Radius: 12px
+    - Shadow: 0 2px 8px rgba(0,0,0,0.08)
+    - Background: White
+
+- Bottom Button
+  - Height: 56px
+  - Border Radius: 12px
+  - Background: Primary Color
+  - Text: Body 1, Bold, White
+
+### 인터랙션
+1. 카드 탭 시 → 상세 화면으로 전환 (300ms slide)
+2. 버튼 탭 시 → API 호출 + 로딩 상태 표시
+3. Pull to Refresh → 데이터 새로고침
+
+### 상태
+- Default: 초기 로드 상태
+- Loading: Skeleton UI 표시
+- Empty: 빈 상태 일러스트 + 안내 문구
+- Error: 에러 메시지 + 재시도 버튼
+```
+
+### 컴포넌트 명세
+
+재사용 가능한 컴포넌트는 별도 문서화:
+
+```markdown
+## Button Component
+
+### Variants
+1. Primary Button
+   - Background: Primary Color
+   - Text: White, Bold
+   - Height: 56px
+   - Border Radius: 12px
+   - Pressed: Opacity 70%
+
+2. Secondary Button
+   - Background: Gray 100
+   - Text: Primary Color, Bold
+   - Height: 56px
+   - Border Radius: 12px
+
+3. Text Button
+   - Background: Transparent
+   - Text: Primary Color
+   - Underline on Pressed
+
+### Props
+- label: string
+- disabled: boolean
+- loading: boolean
+- onPress: () => void
+
+### States
+- Default
+- Pressed (opacity 70%)
+- Disabled (opacity 30%)
+- Loading (spinner)
+```
+
+---
+
+## 플랫폼별 가이드라인
+
+### iOS (Apple HIG 2026)
+
+1. **Safe Area**
+   - Top: 44-47pt (노치 고려)
+   - Bottom: 34pt (홈 인디케이터)
+   - Sides: 16pt
+
+2. **Navigation Bar**
+   - Height: 44pt (Regular), 96pt (Large Title)
+   - Large Title: 34pt, Bold
+   - Back Button: 항상 왼쪽
+
+3. **Tab Bar**
+   - Height: 49pt + Safe Area
+   - Icons: 25pt × 25pt (filled when selected)
+   - Max 5 tabs
+
+4. **Lists**
+   - Row Height: 최소 44pt (터치 영역)
+   - Separator: Inset 16pt from left
+   - Swipe Actions: Delete (red), Archive (gray)
+
+### Android (Material Design 3)
+
+1. **Top App Bar**
+   - Height: 56dp (Small), 112dp (Medium), 152dp (Large)
+   - Elevation: 0-4dp
+
+2. **Navigation Bar**
+   - Height: 80dp
+   - Icons: 24dp × 24dp
+   - Max 5 items
+
+3. **FAB (Floating Action Button)**
+   - Size: 56dp × 56dp
+   - Elevation: 6dp
+   - Position: 16dp from edge
+
+4. **Cards**
+   - Elevation: 1-8dp
+   - Border Radius: 12dp
+
+---
+
+## 접근성 (Accessibility)
+
+### WCAG 2.1 AA 준수
+
+1. **Color Contrast**
+   - Text: 4.5:1 이상
+   - Large Text (18pt+): 3:1 이상
+   - Interactive Elements: 3:1 이상
+
+2. **Touch Target**
+   - 최소 크기: 44pt × 44pt (iOS), 48dp × 48dp (Android)
+   - 간격: 최소 8pt
+
+3. **Font Size**
+   - 최소 크기: 11pt (iOS), 12sp (Android)
+   - Body Text: 17pt (iOS), 16sp (Android)
+   - Dynamic Type 지원 (iOS)
+   - Scalable Text 지원 (Android)
+
+4. **Screen Reader**
+   - 모든 인터랙티브 요소에 Label 제공
+   - 의미 없는 이미지는 숨김 처리
+   - 논리적인 포커스 순서
+
+---
+
+## 다크 모드
+
+### 컬러 변환 규칙
+
+```
+Light → Dark 변환:
+
+Background:
+White → System Gray 6 (Dark)
+Gray 100 → System Gray 5
+Gray 200 → System Gray 4
+
+Text:
+Black → White
+Gray 700 → Gray 200
+
+Elevation (Shadow → Overlay):
+Shadow 제거 → 밝은 Overlay 추가
+```
+
+### Toss 다크 모드
+
+```
+Background:
+#FFFFFF → #1A1B1E
+#F9FAFB → #25262B
+
+Text:
+#191F28 → #FFFFFF
+#6B7684 → #ADB5BD
+
+Primary Color는 유지:
+#3182F6 (동일)
+```
+
+---
+
+## 성능 최적화
+
+### 이미지
+
+1. **형식**
+   - PNG: 투명도 필요 시
+   - JPEG: 사진
+   - WebP: 웹 (50% 작은 용량)
+   - SVG: 아이콘, 일러스트
+
+2. **해상도**
+   - @1x, @2x, @3x 제공 (iOS)
+   - hdpi, xhdpi, xxhdpi, xxxhdpi (Android)
+   - Lazy Loading 적용
+
+### 애니메이션
+
+1. **60fps 유지**
+   - transform, opacity만 애니메이션
+   - width, height 애니메이션 지양
+   - GPU 가속 활용
+
+2. **Reduce Motion 고려**
+   - 모션 감소 설정 시 애니메이션 최소화
+   - 필수 정보는 애니메이션 없이도 전달
+
+---
+
+## 디자인 핸드오프
+
+### 개발자에게 전달할 정보
+
+1. **디자인 파일**
+   - Figma, Sketch, Adobe XD 링크
+   - Asset Export (모든 해상도)
+
+2. **스펙 문서**
+   - 화면별 레이아웃
+   - 컴포넌트 명세
+   - 인터랙션 정의
+   - 애니메이션 타이밍
+
+3. **코드 스니펫** (선택)
+   ```swift
+   // iOS Example
+   let button = UIButton()
+   button.backgroundColor = .systemBlue
+   button.layer.cornerRadius = 12
+   button.titleLabel?.font = .systemFont(ofSize: 17, weight: .bold)
+   ```
+
+   ```kotlin
+   // Android Example
+   Button(
+       onClick = { },
+       colors = ButtonDefaults.buttonColors(
+           containerColor = MaterialTheme.colorScheme.primary
+       ),
+       shape = RoundedCornerShape(12.dp)
+   ) {
+       Text("버튼", fontWeight = FontWeight.Bold)
+   }
+   ```
+
+4. **Token/Variables**
+   ```json
+   {
+     "color": {
+       "primary": "#3182F6",
+       "secondary": "#191F28",
+       "background": "#FFFFFF"
+     },
+     "spacing": {
+       "xs": "4px",
+       "sm": "8px",
+       "md": "16px",
+       "lg": "24px",
+       "xl": "32px"
+     },
+     "borderRadius": {
+       "sm": "8px",
+       "md": "12px",
+       "lg": "16px"
+     }
+   }
+   ```
+
+---
+
+## 참고 자료
+
+이 스킬은 다음 자료를 기반으로 작성되었습니다:
+
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Toss Design System Guide](https://toss.tech/article/toss-design-system-guide)
+- [Frontend Design Best Practices 2026](https://www.whizzbridge.com/blog/ui-ux-best-practices-2025)
+- [Material Design 3](https://m3.material.io/)
+
+---
+
+## 추측 금지 원칙
+
+```
+정보가 충분하면 → 바로 디자인
+정보가 부족하면 → 추측하지 말고 질문
+
+✅ 질문해야 할 때:
+   • 타겟 사용자를 모를 때
+   • 플랫폼이 명확하지 않을 때
+   • 브랜드 컬러/가이드라인이 불분명할 때
+   • 기능의 우선순위를 모를 때
+
+❌ 질문하지 말아야 할 때:
+   • 일반적인 UX 패턴 (로그인, 회원가입 등)
+   • 플랫폼 표준 (iOS, Android 가이드라인)
+   • 접근성 기준 (WCAG 2.1)
+```
+
+---
+
+## 결과물 형식
+
+디자인 완료 시 다음 형식으로 전달:
+
+```markdown
+# [화면/기능 이름] 디자인 스펙
+
+## 1. 개요
+- 목적: ...
+- 타겟 사용자: ...
+- 플랫폼: iOS/Android/Web
+
+## 2. 정보 아키텍처
+[화면 구조 다이어그램]
+
+## 3. 비주얼 디자인
+### 컬러
+- Primary: #3182F6
+- ...
+
+### 타이포그래피
+- Headline: 24px Bold
+- ...
+
+### Spacing
+- Section Padding: 16px
+- ...
+
+## 4. 컴포넌트
+### 버튼
+[상세 스펙]
+
+### 카드
+[상세 스펙]
+
+## 5. 인터랙션
+- 탭: ...
+- 스와이프: ...
+- 애니메이션: ...
+
+## 6. 상태
+- Default
+- Loading
+- Error
+- Empty
+
+## 7. 접근성
+- Color Contrast: ✅
+- Touch Target: ✅
+- Screen Reader: ✅
+
+## 8. 다크 모드
+[다크 모드 컬러 맵핑]
+
+## 9. 개발 가이드
+[코드 스니펫 및 구현 팁]
+```