@kood/claude-code 0.7.5 → 0.7.7

package/templates/.claude/skills/design/SKILL.md

@@ -0,0 +1,199 @@
+---
+name: design
+description: UI/UX 디자인 전문 스킬. 사용자 중심 디자인, 접근성, 반응형 레이아웃, 디자인 시스템 구축. Nielsen 휴리스틱 및 WCAG 2.2 기반.
+user-invocable: true
+ui-only: true
+---
+
+@../../instructions/agent-patterns/read-parallelization.md
+@../../instructions/agent-patterns/agent-teams-usage.md
+@../../instructions/validation/forbidden-patterns.md
+@../../instructions/validation/required-behaviors.md
+
+# Design Skill - UI/UX 전문 스킬
+
+<context>
+
+**Purpose:** 사용자 중심의 UI/UX 디자인 구현. 접근성, 반응형 디자인, 디자인 시스템 구축.
+
+**Trigger:** UI/UX 디자인 구현, 랜딩 페이지 제작, 대시보드 개발, 모바일 앱 디자인, 폼 디자인
+
+**Key Features:**
+- Nielsen 10가지 휴리스틱 기반 UX
+- WCAG 2.2 AA 접근성 준수
+- 반응형 디자인 (Mobile-First)
+- 디자인 심리학 적용 (인지부하 최소화, Fitts/Hick/Miller 법칙)
+- 2024-2026 트렌드 반영 (AI 통합, 마이크로인터랙션, 다크모드)
+
+</context>
+
+---
+
+<quick_reference>
+
+## 빠른 참조
+
+### Core UX 원칙 (Nielsen)
+
+| 원칙 | 적용 |
+|------|------|
+| **시스템 상태 가시성** | Loading, Progress, 피드백 |
+| **일관성** | 패턴 재사용, 플랫폼 규칙 준수 |
+| **오류 예방** | 확인 다이얼로그, 입력 제약 |
+| **인지부하 최소화** | 7±2 항목, 단순 메뉴 |
+
+### 접근성 (WCAG 2.2 AA)
+
+| 요구사항 | 기준 |
+|---------|------|
+| **색상 대비** | 4.5:1 (일반), 3:1 (큰 텍스트) |
+| **터치 타겟** | 44x44px 최소 |
+| **키보드** | Tab, Enter, Esc 지원 |
+| **ARIA** | role, label, live 속성 |
+
+### 레이아웃 패턴
+
+| 패턴 | 용도 |
+|------|------|
+| **F-패턴** | 콘텐츠 중심 (블로그, 기사) |
+| **Z-패턴** | 랜딩 페이지 (히어로 → CTA) |
+| **12열 그리드** | 반응형 레이아웃 |
+
+</quick_reference>
+
+---
+
+<parallel_agent_execution>
+
+### ⚠️ Agent Teams 우선 원칙
+
+> **복잡한 병렬 작업 시 Agent Teams를 기본으로 사용**
+> - Agent Teams 가용 → TeamCreate → 팀원 spawn → 병렬 협업
+> - Agent Teams 미가용 → Task 병렬 호출 (폴백)
+
+**Agent Teams 모드 (기본)**:
+```typescript
+TeamCreate({ team_name: "design-team", description: "UI/UX 디자인 프로젝트" })
+Task(subagent_type="designer", team_name="design-team", name="designer", ...)
+```
+
+**수명주기 관리:**
+- 팀원 태스크 완료 → 즉시 `shutdown_request` 전송
+- 종료 후 `TaskList`로 다음 태스크 확인
+- 모든 작업 완료 → `TeamDelete`로 팀 해산
+
+---
+
+## 병렬 에이전트 실행
+
+### 핵심 원칙
+
+| 원칙 | 실행 방법 | 디자인 적용 |
+|------|----------|------------|
+| **PARALLEL** | 단일 메시지에서 여러 Tool 동시 호출 | 여러 페이지 동시 디자인 |
+| **DELEGATE** | 전문 에이전트에게 즉시 위임 | designer (UI), code-reviewer (접근성) |
+| **SMART MODEL** | 복잡도별 모델 선택 | haiku (탐색), sonnet (구현), opus (디자인 시스템) |
+
+### 패턴 1: 랜딩 페이지 섹션 병렬 디자인
+
+```typescript
+// ✅ 5개 섹션 동시 구현
+Task(subagent_type="designer", model="sonnet",
+     prompt="히어로 섹션: 헤드라인 + CTA + 이미지")
+Task(subagent_type="designer", model="sonnet",
+     prompt="소셜 프루프 섹션: 로고, 추천사, 통계")
+Task(subagent_type="designer", model="sonnet",
+     prompt="기능 섹션: 3열 그리드, 아이콘, 설명")
+Task(subagent_type="designer", model="sonnet",
+     prompt="가격 테이블: 3개 티어, 비교 기능")
+Task(subagent_type="designer", model="sonnet",
+     prompt="CTA 섹션: 최종 전환 유도")
+```
+
+**예상 시간:** 순차 300초 → 병렬 60초 (5배 향상)
+
+### 패턴 2: 반응형 Breakpoint 병렬
+
+```typescript
+// ✅ Mobile/Tablet/Desktop 동시 구현
+Task(subagent_type="designer", model="sonnet",
+     prompt="Mobile (320-767px): 세로 스택, 44px 터치 타겟")
+Task(subagent_type="designer", model="sonnet",
+     prompt="Tablet (768-1023px): 2열 그리드")
+Task(subagent_type="designer", model="sonnet",
+     prompt="Desktop (1024px+): 3열 그리드, 호버 효과")
+```
+
+### 패턴 3: 접근성 검증 병렬
+
+```typescript
+// ✅ WCAG/ARIA/키보드 동시 검증
+Task(subagent_type="code-reviewer", model="opus",
+     prompt="WCAG 2.2 AA: 색상 대비, 포커스, 텍스트 크기")
+Task(subagent_type="code-reviewer", model="opus",
+     prompt="ARIA 속성: role, label, live")
+Task(subagent_type="code-reviewer", model="opus",
+     prompt="키보드 네비게이션: Tab, Enter, Esc")
+```
+
+</parallel_agent_execution>
+
+---
+
+<detailed_references>
+
+## 상세 참고 문서
+
+각 주제별 상세 가이드는 references 폴더를 참조하세요.
+
+| 파일 | 내용 |
+|------|------|
+| **core-principles.md** | Nielsen 휴리스틱, Don Norman 원칙, Gestalt 원칙, 디자인 심리학 |
+| **accessibility.md** | POUR 원칙, 색상 대비, 키보드, ARIA, 스크린 리더 |
+| **patterns.md** | 랜딩 페이지, 대시보드, 폼, 모바일 앱 패턴 |
+| **systems.md** | 타이포그래피, 컬러, 그리드, 반응형 디자인 |
+| **responsive.md** | Container Queries, Fluid CSS, Modern CSS, 반응형 이미지 |
+| **korea-uiux.md** | 한국형 UI/UX: 토스/카카오/배민/당근 디자인 시스템, 타이포(Pretendard), 결제 UX |
+| **global-uiux.md** | 글로벌 UI/UX: Material 3, Apple HIG (Liquid Glass), Fluent 2, Carbon, SLDS |
+| **safe-area.md** | Safe Area: iOS/Android Insets, Dynamic Island, Foldable, React Native, CSS env() |
+| **checklist.md** | DO/DON'T 항목 |
+| **trends.md** | 2024-2026 디자인 트렌드 |
+
+**사용 방법:**
+```bash
+# 디자인 원칙 확인
+Read references/core-principles.md
+
+# 접근성 가이드 확인
+Read references/accessibility.md
+
+# 랜딩 페이지 패턴 확인
+Read references/patterns.md
+```
+
+</detailed_references>
+
+---
+
+<references>
+
+## 외부 참고 자료
+
+| 분류 | 자료 |
+|------|------|
+| **UX 원칙** | Nielsen Norman Group, Don Norman "The Design of Everyday Things" |
+| **접근성** | WCAG 2.2, W3C WAI, WebAIM |
+| **글로벌 디자인 시스템** | Material Design 3 (Expressive), Apple HIG (Liquid Glass), Fluent 2, Carbon, SLDS |
+| **한국 디자인 시스템** | 토스 TDS, 카카오 Krane, 쿠팡 RDS, 배민, 당근 |
+| **심리학** | Laws of UX, Gestalt 원칙, 인지부하 이론 |
+| **트렌드** | Awwwards, Dribbble, Behance, Smashing Magazine |
+
+### 외부 링크
+
+- [Nielsen 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/)
+- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [Material Design 3](https://m3.material.io/)
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Laws of UX](https://lawsofux.com/)
+
+</references>

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

@@ -0,0 +1,106 @@
+# Accessibility (WCAG 2.2 AA)
+
+<pour_principles>
+
+## POUR 원칙
+
+| 원칙 | 설명 | 구현 |
+|------|------|------|
+| **Perceivable** | 인지 가능 | 대체 텍스트, 자막, 색상 대비 |
+| **Operable** | 조작 가능 | 키보드, 충분한 시간 |
+| **Understandable** | 이해 가능 | 명확한 언어, 일관된 UI |
+| **Robust** | 견고성 | 시맨틱 HTML, ARIA |
+
+</pour_principles>
+
+---
+
+<color_contrast>
+
+## 색상 대비 (WCAG 2.2)
+
+| 유형 | 최소 비율 | 예시 |
+|------|----------|------|
+| **일반 텍스트** | 4.5:1 | 14px body text |
+| **큰 텍스트** | 3:1 | 18pt+ 또는 14pt bold+ |
+| **Interactive 요소** | 3:1 | 버튼, 아이콘 |
+
+```tsx
+// ✅ 충분한 대비
+<button className="bg-blue-600 text-white">Save</button>
+
+// ❌ 불충분한 대비
+<button className="bg-gray-100 text-gray-300">Save</button>
+```
+
+</color_contrast>
+
+---
+
+<keyboard_navigation>
+
+## 키보드 네비게이션
+
+| 키 | 동작 | 적용 |
+|---|------|------|
+| **Tab** | 다음 요소 | tabindex 순서 |
+| **Enter/Space** | 활성화 | 버튼, 링크 |
+| **Esc** | 취소/닫기 | 모달, 드롭다운 |
+| **↑↓** | 선택 이동 | 드롭다운, 슬라이더 |
+
+```tsx
+// ✅ 키보드 접근 가능
+<button
+  tabIndex={0}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleClick()
+    }
+  }}
+>
+  Click me
+</button>
+```
+
+</keyboard_navigation>
+
+---
+
+<aria_attributes>
+
+## ARIA 속성
+
+| 속성 | 용도 | 예시 |
+|------|------|------|
+| **role** | 역할 명시 | `role="navigation"` |
+| **aria-label** | 레이블 제공 | `aria-label="Close menu"` |
+| **aria-labelledby** | 레이블 ID 참조 | `aria-labelledby="title-id"` |
+| **aria-expanded** | 확장 상태 | `aria-expanded={isOpen}` |
+| **aria-live** | 동적 업데이트 | `aria-live="polite"` |
+
+```tsx
+// ✅ ARIA 속성 사용
+<button
+  aria-label="Close menu"
+  aria-expanded={isOpen}
+  aria-controls="menu-id"
+>
+  <svg className="w-6 h-6" aria-hidden="true" />
+</button>
+```
+
+</aria_attributes>
+
+---
+
+<screen_readers>
+
+## 스크린 리더 테스트
+
+| 도구 | 플랫폼 | 용도 |
+|------|--------|------|
+| **VoiceOver** | macOS/iOS | Safari |
+| **NVDA** | Windows | Firefox |
+| **JAWS** | Windows | Chrome |
+
+</screen_readers>

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

@@ -0,0 +1,41 @@
+# Design Checklist
+
+<do>
+
+## DO
+
+| 항목 | 설명 |
+|------|------|
+| **사용자 중심** | Nielsen 휴리스틱, Don Norman 원칙 적용 |
+| **접근성 우선** | WCAG 2.2 AA, 키보드/스크린 리더 지원 |
+| **일관성** | 디자인 시스템, 패턴 재사용 |
+| **반응형** | Mobile-First, 모든 Breakpoint 테스트 |
+| **피드백** | Loading, Success, Error 상태 명확히 |
+| **여백** | 8px 그리드, 충분한 breathing room |
+| **대비** | 4.5:1 (일반), 3:1 (큰 텍스트) |
+| **터치 타겟** | 44x44px 최소 (모바일) |
+| **오류 예방** | 확인 다이얼로그, 입력 제약 |
+| **테스트** | 실제 사용자, A/B 테스트 |
+
+</do>
+
+---
+
+<dont>
+
+## DON'T
+
+| 항목 | 이유 |
+|------|------|
+| **색상만으로 정보 전달** | 색맹 사용자 고려 |
+| **너무 많은 선택지** | Hick의 법칙 (7±2) |
+| **작은 터치 타겟** | 손가락으로 클릭 어려움 |
+| **자동 재생 미디어** | 접근성, 사용자 경험 저해 |
+| **일관성 없는 패턴** | 학습 비용 증가 |
+| **모호한 에러 메시지** | "오류 발생" 대신 구체적 설명 |
+| **과도한 애니메이션** | 멀미, 성능 저하 |
+| **플레이스홀더를 레이블로** | 입력 시 사라짐 |
+| **지나친 혁신** | 표준 패턴 무시 |
+| **접근성 무시** | 법적 문제, 사용자 배제 |
+
+</dont>

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