@kood/claude-code 0.7.5 → 0.7.7

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/)

package/templates/.claude/skills/design/references/patterns.md

@@ -0,0 +1,250 @@
+# 디자인 패턴 가이드
+
+> 랜딩 페이지, 대시보드, 폼, 모바일 앱의 디자인 사양서
+
+---
+
+## 1. 랜딩 페이지
+
+### 히어로 섹션
+
+| 요소 | 사양 |
+|------|------|
+| **높이** | 100vh (전체 화면) 또는 최소 600px |
+| **헤드라인** | 6-10 단어, 48-72px, Bold |
+| **부제목** | 15-25 단어, 18-24px, Regular |
+| **CTA 버튼** | 높이 48-56px, 패딩 24-32px |
+| **여백** | 좌우 16px (모바일), 32px (데스크톱) |
+
+**CTA 버튼 배치:**
+- Primary: 브랜드 컬러, 채워진 형태
+- Secondary: 아웃라인 또는 Ghost
+
+### 소셜 프루프
+
+| 요소 | 사양 |
+|------|------|
+| **로고 높이** | 24-40px |
+| **로고 개수** | 4-6개 권장 |
+| **스타일** | Grayscale, opacity 60-80% |
+| **간격** | 로고 간 48-64px |
+| **배경** | 약간 어두운 톤 (#F5F5F5) |
+
+### 기능 섹션
+
+| 레이아웃 | 모바일 | 태블릿 | 데스크톱 |
+|---------|--------|--------|----------|
+| **열 수** | 1 | 2 | 3-4 |
+| **아이콘 크기** | 40px | 48px | 56px |
+| **카드 패딩** | 16px | 24px | 32px |
+| **카드 간격** | 16px | 24px | 32px |
+
+### 가격 테이블
+
+| 요소 | 사양 |
+|------|------|
+| **플랜 개수** | 3개 권장 (Basic / Pro / Enterprise) |
+| **강조 플랜** | 중앙 배치, 스케일 1.05, 그림자 추가 |
+| **가격 폰트** | 32-48px, Bold |
+| **기능 리스트** | 체크 아이콘 + 텍스트, 14-16px |
+| **CTA 버튼** | 전체 너비, 높이 48px |
+
+### CTA 섹션 (Footer CTA)
+
+| 요소 | 사양 |
+|------|------|
+| **배경** | 브랜드 컬러 또는 그라데이션 |
+| **패딩** | 상하 80-120px |
+| **헤드라인** | 32-40px, 중앙 정렬 |
+| **버튼** | 대비 높은 컬러 (예: 흰색) |
+
+---
+
+## 2. 대시보드
+
+### 레이아웃 구조
+
+| 영역 | 사양 |
+|------|------|
+| **사이드바** | 너비 240-280px, 축소 시 64-80px |
+| **헤더** | 높이 56-64px |
+| **메인 영역** | 패딩 24-32px |
+| **카드 간격** | 16-24px |
+
+### KPI 카드
+
+| 요소 | 사양 |
+|------|------|
+| **최소 너비** | 240px |
+| **높이** | 120-160px |
+| **아이콘** | 24px, 배경 40x40px 원형 |
+| **숫자** | 28-32px, Bold |
+| **라벨** | 12-14px, Gray |
+| **변화율** | 12px, 상승=초록, 하락=빨강 |
+
+### 데이터 테이블
+
+| 요소 | 사양 |
+|------|------|
+| **행 높이** | 48-56px |
+| **헤더 배경** | #F9FAFB 또는 투명 |
+| **구분선** | 1px, #E5E7EB |
+| **호버 배경** | #F3F4F6 |
+| **패딩** | 좌우 16px |
+| **정렬** | 텍스트=좌측, 숫자=우측 |
+
+### 사이드바 네비게이션
+
+| 요소 | 사양 |
+|------|------|
+| **메뉴 아이템 높이** | 40-48px |
+| **아이콘** | 20px |
+| **아이콘-텍스트 간격** | 12px |
+| **활성 상태** | 배경 강조 + 좌측 인디케이터 3px |
+| **그룹 간격** | 24px |
+
+---
+
+## 3. 폼 디자인
+
+### 입력 필드
+
+| 상태 | 스타일 |
+|------|--------|
+| **기본** | 테두리 #D1D5DB, 배경 #FFFFFF |
+| **포커스** | 테두리 브랜드 컬러, 링 2px |
+| **오류** | 테두리 #EF4444, 배경 #FEF2F2 |
+| **비활성** | 배경 #F3F4F6, 텍스트 #9CA3AF |
+
+### 필드 사이즈
+
+| 사이즈 | 높이 | 패딩 | 폰트 |
+|--------|------|------|------|
+| **Small** | 32px | 8px 12px | 14px |
+| **Medium** | 40px | 10px 14px | 14px |
+| **Large** | 48px | 12px 16px | 16px |
+
+### 레이블과 에러
+
+| 요소 | 사양 |
+|------|------|
+| **레이블** | 14px, Medium, 필드 위 8px |
+| **필수 표시** | 빨간 * 또는 "(필수)" |
+| **헬퍼 텍스트** | 12px, Gray, 필드 아래 4px |
+| **에러 메시지** | 12px, Red, 필드 아래 4px |
+
+### 버튼 사이즈
+
+| 사이즈 | 높이 | 패딩 | 폰트 |
+|--------|------|------|------|
+| **Small** | 32px | 0 12px | 14px |
+| **Medium** | 40px | 0 16px | 14px |
+| **Large** | 48px | 0 24px | 16px |
+
+### 멀티스텝 폼
+
+| 요소 | 사양 |
+|------|------|
+| **진행률 표시** | 스텝 번호 또는 프로그레스 바 |
+| **스텝 간격** | 스텝당 3-5개 필드 권장 |
+| **네비게이션** | 이전/다음 버튼, 하단 고정 |
+| **요약 화면** | 제출 전 전체 내용 확인 |
+
+---
+
+## 4. 모바일 앱
+
+### 네비게이션
+
+| 유형 | 사양 |
+|------|------|
+| **탭 바** | 높이 56-64px, 아이템 3-5개 |
+| **탭 아이콘** | 24px, 라벨 10-12px |
+| **상단 앱바** | 높이 56px |
+| **드로어** | 너비 280-320px |
+
+### 터치 타겟
+
+| 요소 | 최소 사이즈 |
+|------|------------|
+| **버튼** | 44x44px (iOS), 48x48dp (Android) |
+| **리스트 아이템** | 높이 48px |
+| **아이콘 버튼** | 44x44px |
+| **탭 간격** | 8px 이상 |
+
+### 리스트 아이템
+
+| 요소 | 사양 |
+|------|------|
+| **높이** | 56-72px |
+| **아바타** | 40px 원형 |
+| **아이콘** | 24px |
+| **패딩** | 좌우 16px |
+| **구분선** | 1px, 아바타 뒤에서 시작 |
+
+### 카드
+
+| 요소 | 사양 |
+|------|------|
+| **모서리 반경** | 12-16px |
+| **그림자** | 0 2px 8px rgba(0,0,0,0.1) |
+| **패딩** | 16px |
+| **이미지 비율** | 16:9 또는 4:3 |
+
+### 바텀 시트
+
+| 요소 | 사양 |
+|------|------|
+| **핸들** | 너비 40px, 높이 4px, 중앙 |
+| **모서리 반경** | 상단 16-24px |
+| **최대 높이** | 90% 화면 |
+| **딤 배경** | rgba(0,0,0,0.5) |
+
+---
+
+## 5. 공통 컴포넌트
+
+### 모달/다이얼로그
+
+| 요소 | 사양 |
+|------|------|
+| **최대 너비** | 480px (Small), 640px (Medium), 800px (Large) |
+| **모서리 반경** | 12-16px |
+| **패딩** | 24px |
+| **딤 배경** | rgba(0,0,0,0.5) |
+| **닫기 버튼** | 우상단, 24x24px |
+
+### 토스트/알림
+
+| 요소 | 사양 |
+|------|------|
+| **위치** | 하단 중앙 또는 상단 우측 |
+| **최대 너비** | 400px |
+| **높이** | 48-56px |
+| **지속 시간** | 3-5초 |
+| **아이콘** | 20px, 좌측 |
+
+### 로딩 상태
+
+| 유형 | 사양 |
+|------|------|
+| **스피너** | 24-40px, 브랜드 컬러 |
+| **스켈레톤** | 배경 #E5E7EB, 애니메이션 펄스 |
+| **프로그레스 바** | 높이 4px, 브랜드 컬러 |
+
+### 빈 상태 (Empty State)
+
+| 요소 | 사양 |
+|------|------|
+| **일러스트** | 120-200px |
+| **헤드라인** | 20-24px, Bold |
+| **설명** | 14-16px, Gray |
+| **CTA** | 선택적, 40px 높이 |
+
+---
+
+## 참고
+
+- [Material Design Components](https://m3.material.io/components)
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Tailwind UI Patterns](https://tailwindui.com/)