@kood/claude-code 0.7.6 → 0.7.8

package/templates/.claude/skills/design/references/core-principles.md

@@ -0,0 +1,66 @@
+# Core Design Principles
+
+<nielsen_heuristics>
+
+## Nielsen의 10가지 휴리스틱
+
+| 원칙 | 설명 | 구현 |
+|------|------|------|
+| **1. 시스템 상태 가시성** | 진행 상황 실시간 표시 | Loading spinner, Progress bar |
+| **2. 시스템-현실 일치** | 사용자 언어 사용 | 전문 용어 회피, 친숙한 아이콘 |
+| **3. 사용자 제어** | Undo/Redo 지원 | 취소 버튼, 되돌리기 기능 |
+| **4. 일관성** | 패턴 재사용 | 디자인 시스템, 공통 컴포넌트 |
+| **5. 오류 예방** | 실수 방지 장치 | 확인 다이얼로그, 입력 제약 |
+| **6. 인지부하 최소화** | 기억 대신 인식 | 자동완성, 최근 항목 표시 |
+| **7. 유연성** | 초보자 & 전문가 지원 | 단축키, 고급 기능 숨김 |
+| **8. 미니멀리즘** | 불필요한 정보 제거 | 핵심 내용만, 여백 활용 |
+| **9. 오류 복구** | 명확한 에러 메시지 | 원인 + 해결 방법 제시 |
+| **10. 도움말** | 쉽게 접근 가능 | 툴팁, 가이드 투어 |
+
+</nielsen_heuristics>
+
+---
+
+<don_norman>
+
+## Don Norman의 인간 중심 디자인
+
+| 원칙 | 적용 |
+|------|------|
+| **Affordance** | 버튼은 누를 수 있게, 링크는 클릭 가능하게 |
+| **Signifier** | 호버 시 커서 변경, 색상/아이콘으로 힌트 |
+| **Feedback** | 클릭 → 애니메이션, 성공 → 토스트 |
+| **Mapping** | 좌우 배치 → 자연스러운 연결 |
+| **Constraint** | 날짜 선택기, 숫자만 입력 가능 |
+
+</don_norman>
+
+---
+
+<gestalt>
+
+## Gestalt 원칙
+
+| 원칙 | 설명 | 예시 |
+|------|------|------|
+| **근접성 (Proximity)** | 가까이 있는 요소는 관련됨 | 폼 필드 그룹화 |
+| **유사성 (Similarity)** | 비슷한 요소는 같은 기능 | 같은 색상 버튼 |
+| **연속성 (Continuity)** | 시선 흐름 유도 | F-패턴 레이아웃 |
+| **폐쇄성 (Closure)** | 불완전해도 전체 인식 | 로고, 아이콘 |
+
+</gestalt>
+
+---
+
+<psychology>
+
+## 디자인 심리학
+
+| 법칙 | 내용 | 적용 |
+|------|------|------|
+| **Fitts의 법칙** | 큰 타겟 = 빠른 클릭 | CTA 버튼 크게 |
+| **Hick의 법칙** | 선택지 많으면 결정 느림 | 메뉴 항목 7개 이하 |
+| **Miller의 법칙** | 단기 기억 7±2 항목 | 단계 3-5개로 제한 |
+| **인지부하 이론** | 정보량 최소화 | 한 화면에 1가지 목표 |
+
+</psychology>

package/templates/.claude/skills/design/references/global-uiux.md

@@ -0,0 +1,216 @@
+# 글로벌 UI/UX 디자인 패턴 레퍼런스
+
+> 글로벌(미국/서양) UI/UX 디자인의 핵심 철학, 주요 디자인 시스템, 최신 트렌드
+
+---
+
+## 1. 글로벌 디자인 철학
+
+### 1.1 미니멀리즘 (Minimalism)
+
+**핵심 원칙 - "Less is More":**
+- 깔끔한 레이아웃, 충분한 여백, 제한된 컬러 팔레트
+- 명확한 타이포그래피와 직관적인 네비게이션
+- **Progressive Disclosure**: 핵심 기능만 먼저 노출
+
+**2025 트렌드 - Minimalism 3.0 (Emotional Minimalism):**
+- 부드러운 색상 전환, 미세한 텍스처, 표현적 타이포그래피
+- 미니멀하면서도 감성적인 인터페이스 추구
+
+### 1.2 화이트스페이스 활용
+
+- 시각적 휴식을 제공하여 가독성 개선
+- 콘텐츠 간 명확한 구분 생성
+- 고급스럽고 전문적인 인상 전달
+
+### 1.3 타이포그래피 계층
+
+- **Display → Headline → Title → Body → Label** 순의 명확한 체계
+- 볼드 타이포그래피로 시각 요소 대체
+- 폰트 웨이트 변화로 정보 계층 표현
+
+### 1.4 서양 vs 아시아 디자인 비교
+
+| 특성 | 서양 (미국/유럽) | 아시아 (한국/중국/일본) |
+|------|-----------------|---------------------|
+| **정보 밀도** | 낮음 - 여백 중시 | 높음 - 콘텐츠 밀집 |
+| **앱 철학** | 단일 기능 특화 | 슈퍼앱 (다기능 통합) |
+| **네비게이션** | 심플, 단계적 | 복합적, 탭 다수 |
+| **색상** | 절제된 팔레트 | 다채로운 색상 활용 |
+| **문화 반영** | 개인주의 | 집단주의 - 커뮤니티/공유 |
+
+---
+
+## 2. 주요 디자인 시스템
+
+### 2.1 Google Material Design 3 (M3 Expressive)
+
+**최신 버전:** Material 3 Expressive (2025년 5월)
+
+#### Dynamic Color
+- 단일 소스 컬러에서 전체 팔레트 알고리즘 생성
+- Primary, Secondary, Tertiary + Error/Warning 상태 컬러
+
+#### 타이포그래피
+- **5단계**: Display, Headline, Title, Body, Label
+- 각 단계별 Large/Medium/Small 사이즈
+- Variable Fonts 지원
+
+#### Shape 시스템
+- 5단계 둥근 정도: Extra-Small → Extra-Large
+- M3 Expressive에서 **35개 새 Shape** 추가
+- Shape Morphing 애니메이션
+
+#### Motion
+- Physics System: 물리 기반 모션
+- Fluid Motion: 유동적 애니메이션
+
+### 2.2 Apple Human Interface Guidelines (Liquid Glass)
+
+**최신:** Liquid Glass (2025년 6월 WWDC)
+
+**4대 핵심 원칙:**
+1. **Clarity** - 쉬운 이해
+2. **Deference** - 콘텐츠에 초점
+3. **Depth** - 시각적 레이어로 계층 전달
+4. **Consistency** - 플랫폼 간 일관성
+
+**Liquid Glass 특징:**
+- 투명도와 깊이: 유리의 광학적 특성 시뮬레이션
+- 3 레이어 구조: Foreground / Mid-ground / Background
+- 콘텐츠 우선: UI가 우아하게 후퇴
+
+### 2.3 Microsoft Fluent 2
+
+**4대 디자인 원칙:**
+1. **Natural on Every Platform** - 플랫폼에 맞는 자연스러운 경험
+2. **Built for Focus** - 산만함 최소화, 생산적 몰입
+3. **One for All, All for One** - 포용적 디자인
+4. **Unmistakably Microsoft** - 브랜드 정체성
+
+**기술:** WCAG 2.1 준수, Fluent UI React 컴포넌트
+
+### 2.4 IBM Carbon Design System
+
+**3대 원칙:**
+1. **Consistency** - 예측 가능성 → 신뢰
+2. **Human-Centered** - 인간으로서 먼저 이해
+3. **Essential** - 모든 요소에 목적, 절제된 디자인
+
+### 2.5 Salesforce Lightning (SLDS 2)
+
+- **Design Tokens**: 재사용 가능한 디자인 변수
+- **CSS Custom Properties**: 구조와 비주얼 분리
+- **UX 패턴**: Welcome Mat, Setup Assistant, Empty States
+
+### 2.6 Atlassian Design System
+
+**핵심 가치:**
+- **Foundational**: 공통 문제 먼저 해결
+- **Harmonious**: 빌딩 블록이 함께 작동
+- **Empowering**: 복잡한 경험 구성 가능
+
+---
+
+## 3. 플랫폼별 가이드라인
+
+### 3.1 Mobile App
+
+| 항목 | iOS (Apple HIG) | Android (Material 3) |
+|------|-----------------|---------------------|
+| **네비게이션** | Tab Bar (하단) | Navigation Rail/Bar |
+| **제스처** | Edge Swipe Back | Predictive Back |
+| **디자인 언어** | Liquid Glass | M3 Expressive |
+| **타이포** | SF Pro | Roboto / Google Sans |
+| **터치 타겟** | 최소 44x44pt | 최소 48x48dp |
+
+### 3.2 Web / Desktop
+
+- 반응형 레이아웃 (Mobile-First)
+- 키보드 네비게이션 완벽 지원
+- 마우스 호버 상태 디자인
+- 최소 클릭 타겟 24x24px
+
+**브레이크포인트:**
+```
+Mobile: 360-480px | Tablet: 768px | Desktop: 1024-1440px+
+```
+
+### 3.3 SaaS / Enterprise
+
+- **Progressive Disclosure**: 핵심 도구 우선
+- **Smart Defaults**: AI 기반 예측 레이아웃
+- 대량 데이터 테이블/차트 처리
+- 역할 기반 접근 제어 (RBAC) UI
+
+---
+
+## 4. 최신 트렌드 (2024-2026)
+
+### 4.1 AI 통합 UI
+
+- **AI 기반 개인화**: 클릭 패턴, 사용 이력 분석
+- **Generative UI**: AI가 동적 인터페이스 생성
+- **대화형 디자인**: 화면 + 음성 명령 동시 지원
+
+### 4.2 다크 모드
+
+- 순수 검정 대신 소프트 블랙 (#121212)
+- 채도 높은 색상 주의 (진동 현상)
+- 라이트/다크 독립 테스트 필수
+- **WCAG**: 일반 4.5:1, 큰 텍스트 3:1
+
+### 4.3 모션 & 마이크로인터랙션
+
+**4요소:**
+1. **Trigger**: 사용자/시스템 액션
+2. **Rules**: 발생 동작
+3. **Feedback**: 시각적/청각적 피드백
+4. **Loops & Modes**: 반복과 모드 변환
+
+### 4.4 접근성 우선 (WCAG 2.2)
+
+| 기준 | 레벨 | 내용 |
+|------|------|------|
+| **텍스트 대비** | AA | 일반 4.5:1, 큰 텍스트 3:1 |
+| **Focus Appearance** | AA | 최소 2px, 3:1 대비 |
+| **Target Size** | AA | 최소 24x24 CSS px |
+
+---
+
+## 5. 디자인 토큰 공통 구조
+
+```
+tokens/
+├── color/ (primary, secondary, surface, error)
+├── typography/ (font-family, size, weight, line-height)
+├── spacing/ (4px 단위: 4, 8, 12, 16, 24, 32, 48, 64)
+├── shape/ (border-radius, elevation)
+├── motion/ (duration, easing, physics)
+└── breakpoint/ (compact, medium, expanded)
+```
+
+---
+
+## 6. 디자인 시스템 선택 가이드
+
+| 용도 | 추천 시스템 | 이유 |
+|------|-----------|------|
+| **Android 앱** | Material Design 3 | 네이티브 통합, Dynamic Color |
+| **iOS 앱** | Apple HIG | 플랫폼 일관성 |
+| **Microsoft 생태계** | Fluent 2 | Office/Azure 통합 |
+| **Enterprise B2B** | Carbon / SLDS | 대규모 데이터 특화 |
+| **협업 도구** | Atlassian DS | 팀 생산성 패턴 |
+| **크로스 플랫폼 웹** | Material Design 3 | 가장 넓은 가이드라인 |
+
+---
+
+## 참고 자료
+
+- [Material Design 3](https://m3.material.io/)
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Microsoft Fluent 2](https://fluent2.microsoft.design/)
+- [IBM Carbon](https://carbondesignsystem.com/)
+- [Salesforce Lightning](https://www.lightningdesignsystem.com/)
+- [Atlassian Design](https://atlassian.design/)
+- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)

package/templates/.claude/skills/design/references/korea-uiux.md

@@ -0,0 +1,227 @@
+# 한국형 UI/UX 디자인 패턴 가이드
+
+> 한국 시장에 특화된 UI/UX 디자인 패턴, 디자인 시스템, 그리고 글로벌 대비 차별점
+
+---
+
+## 1. 한국 vs 글로벌: 핵심 차이점
+
+### 1.1 정보 밀도 (Information Density)
+
+| 항목 | 한국 | 서양 |
+|------|------|------|
+| **레이아웃** | 높은 정보 밀도, 한 화면에 많은 요소 | 미니멀, 여백 중심 |
+| **콘텐츠 노출** | 즉시 노출 (Upfront Information) | 점진적 노출 (Progressive Disclosure) |
+| **메뉴 구조** | 다기능 슈퍼앱 (네이버, 카카오) | 단일 기능 앱 |
+| **스캔 패턴** | 동시 다중 스캔 | 순차적 탐색 |
+
+> 한국은 중국의 맥시멀리즘과 서양의 미니멀리즘 사이 중간 지점
+
+### 1.2 타이포그래피 (한글 최적화)
+
+#### 한글 특성
+- **음절 블록 구조**: 자모 조합으로 공간 효율성 높음
+- **단어 간 공백**: 중국어/일본어와 달리 띄어쓰기 사용
+- **소수 글자로 의미 전달**: 적은 글자 수로 많은 의미
+
+#### 주요 서체
+
+| 서체 | 특징 | 라이선스 |
+|------|------|----------|
+| **Pretendard** | Inter + 본고딕, 9가지 굵기, 가변폰트 | SIL OFL |
+| **Spoqa Han Sans Neo** | 2,574자 지원, 대체 시스템 폰트 | SIL OFL |
+| **배민 폰트** | 레트로 간판 감성, 10종 무료 | 무료 (상업용 가능) |
+| **Karrot Sans** | 휴머니스트 산세리프, 당근마켓 | - |
+
+### 1.3 색상 사용 패턴
+
+| 브랜드 | 주요 색상 | 의미 |
+|--------|-----------|------|
+| **토스** | 블루 계열 | 신뢰, 금융 안정감 |
+| **카카오** | 옐로우 (#FFE812) + 블랙 | 친근함, 소통 |
+| **네이버** | 네이버 그린 | 신뢰, 혁신 |
+| **당근마켓** | 오렌지/캐럿 | 따뜻함, 커뮤니티 |
+| **쿠팡** | 로켓 레드 | 속도, 신뢰 |
+| **배달의민족** | 민트/터콰이즈 | 신선함, 음식 |
+
+**특징:**
+- 강렬하고 대비 높은 색상으로 주의 환기
+- 색상의 네비게이션 기능 (프로모션, 알림, 핵심 액션 강조)
+- **주식 색상**: 상승=빨강, 하락=파랑 (서양과 반대)
+
+### 1.4 인터랙션 특징
+
+- **속도 우선**: 최소 마찰로 빠른 태스크 완료
+- **바텀 네비게이션**: 핵심 기능을 하단 탭바에 배치 (엄지 접근성)
+- **바텀 시트**: 추가 정보/옵션 표시
+- **캐릭터/이모티콘**: 챗봇, 애니메이션으로 인간적 경험 (카카오 프렌즈)
+- **실시간 피드백**: Toast, Snackbar로 즉각 피드백
+
+### 1.5 결제/인증 UX
+
+**간편결제 혁신:**
+- 기존: 공인인증서 기반 복잡한 절차
+- 현재: 생체인증 + 간편비밀번호로 단순화
+- PIN/생체인증 완료 시 확인 버튼 없이 자동 결제
+
+**한국 특유 결제 UX:**
+- 카카오페이, 네이버페이, 토스페이
+- QR코드 기반 오프라인 결제
+- 카카오톡 연동 송금 (축의금/조의금 등 문화적 기능)
+
+---
+
+## 2. 주요 디자인 시스템
+
+### 2.1 토스 디자인 시스템 (TDS)
+
+**핵심 원칙: SIMPLICITY**
+> 사용자가 특별히 배울 것 없이 직관적으로 이해할 수 있는 상태
+
+**One Thing per Page**: 한 화면에 하나의 메시지만
+
+#### UX 라이팅 8원칙
+1. **예측 가능한 힌트**: 다음 화면 예측할 수 있는 맥락
+2. **잡초 제거**: 의미 없는 단어 제거
+3. **빈 문장 제거**: 중복/공허한 문장 삭제
+4. **핵심 메시지 집중**: 필요한 핵심 정보만
+5. **말하듯 쓰기**: 자연스러운 언어, 전문 용어 지양
+6. **강요보다 제안**: 긍정적 프레이밍, 자율성 존중
+7. **보편적 단어**: 접근 가능한 어휘
+8. **숨겨진 감정 찾기**: 공감적 메시지
+
+**효과:**
+- 하루 평균 1시간 절약
+- 개발 시간 1/10 단축
+- 3~5배 생산성 향상
+
+### 2.2 카카오 디자인 시스템
+
+- CSS 변수 기반 디자인 토큰 + 테마 관리
+- 제로 런타임 스타일링
+- 카카오뱅크: 카카오톡 사용자 습관에 맞춘 UX
+- Figma 기반 30% 디자인 전달 속도 향상
+
+### 2.3 쿠팡 로켓 디자인 시스템 (RDS)
+
+- 플랫폼 간 일관성 확보
+- 재사용 가능한 컴포넌트
+- **데이터 기반 의사결정**: 모든 결정을 데이터로 검증
+- **점진적 변경**: 작은 변경을 다수 적용
+
+### 2.4 배달의민족 디자인
+
+**타이포그래피 = 브랜드:**
+- 10종 무료 폰트 개발/배포
+- 1970~80년대 간판 감성 현대적 재해석
+- 주아체, 도현체, WORK체 등
+
+### 2.5 당근마켓 디자인
+
+**UX 패턴:**
+- 검색/카테고리/알림 아이콘 오른쪽 배치
+- 힉스 법칙: 한 번에 너무 많은 선택지 지양
+- 위치 기반 중고 거래
+- 신뢰 UX: 사용자 평점, 거래 후기, 인증
+
+---
+
+## 3. 플랫폼별 특징
+
+### 3.1 모바일 앱
+
+**네비게이션:**
+- 하단 탭바: 핵심 기능 3~5개, 엄지 접근성
+- 홈 피드: 무한 스크롤 + 카드 형태
+- 상단 고정 검색바 또는 탭바 내 검색 아이콘
+
+**화면 구성:**
+- 카드 UI로 정보 그룹핑
+- 바텀 시트로 상세 정보/필터
+- FAB로 주요 액션 (글쓰기, 상품 등록)
+
+**온보딩:**
+- 간결한 워크스루 (3~4 화면)
+- 소셜 로그인 우선 (카카오, 네이버, 애플)
+
+### 3.2 웹 (Web/Desktop)
+
+**네이버 스타일:**
+- 정보 밀도 높은 메인 페이지
+- 그리드 시스템 기반 일관된 레이아웃
+- 반응형 디자인
+
+**이커머스 (쿠팡):**
+- 상품 그리드/리스트 전환
+- 실시간 배송 추적 UI
+- AI 기반 추천 (전환율 35% 향상)
+
+### 3.3 SaaS / B2B
+
+**Flex (HR SaaS) 철학:**
+- 사용자 먼저, 기능 나중
+- 맥락 우선 접근
+- 멀티 유저 복잡성 대응
+
+**채널톡:**
+- B2B2C: 고객사 최종 사용자 UX 고려
+- AI 정보 투명성과 신뢰 균형
+
+---
+
+## 4. 한국형 디자인 적용 가이드
+
+### 4.1 모바일 앱 설계
+
+```
+1. 한 화면 하나의 과업 (One Thing per Page)
+2. 하단 탭바에 핵심 기능 3~5개 배치
+3. 바텀 시트로 상세 정보/옵션 표시
+4. 즉각적 피드백 (Toast/Snackbar)
+5. 간편 인증 (생체인증 우선)
+```
+
+### 4.2 타이포그래피 선택
+
+```
+SaaS/비즈니스: Pretendard (9가지 굵기)
+스타트업/기술: Spoqa Han Sans Neo
+브랜딩/마케팅: 배민 폰트 또는 커스텀 서체
+
+한글 원칙:
+- 본문: 15~17px, line-height 1.6~1.8
+- 제목: Bold/SemiBold, 명확한 위계
+- 아이콘 + 텍스트 레이블 병행
+```
+
+### 4.3 색상 가이드
+
+```
+- 브랜드 컬러를 CTA 버튼에 집중
+- 상태: 성공=초록, 경고=노랑, 에러=빨강
+- 배경: 밝은 회색(#F5F6F8) 또는 화이트
+- 프로모션: 강렬한 컬러 + 그라데이션 허용
+```
+
+### 4.4 UX 라이팅 (토스 스타일)
+
+```
+- 말하듯 자연스럽게
+- 전문 용어 대신 쉬운 말
+- 한 화면에 같은 말 반복 금지
+- 핵심 메시지만 남기고 제거
+- 사용자 감정 고려한 공감적 메시지
+```
+
+---
+
+## 참고 자료
+
+- [토스 디자인 시스템](https://toss.tech/article/toss-design-system)
+- [토스 8가지 라이팅 원칙](https://toss.tech/article/8-writing-principles-of-toss)
+- [쿠팡 디자인 시스템](https://medium.com/coupang-engineering/introducing-the-coupangs-design-system-2b7799653b56)
+- [카카오스타일 디자인 시스템 재구축기](https://devblog.kakaostyle.com/ko/2024-12-13-1-rebuilding-frontend-design-system/)
+- [Pretendard GitHub](https://github.com/orioncactus/pretendard)
+- [배달의민족 폰트](https://story.baemin.com/4941/)
+- [당근마켓 리브랜딩](https://about.daangn.com/blog/archive/)
+- [Flex B2B SaaS 디자인](https://flex.team/blog/2025/07/02/2025-07-02-design/)