timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/hybrid-motions/02-web_desktop.md

@@ -0,0 +1,69 @@
+# 2. 웹 + PC (`web_desktop`)
+
+
+### WD-M1. Web-Native Bridge (웹-네이티브 브릿지)
+
+```
+기법: 웹 모션을 데스크톱 네이티브 경험으로 확장
+전략: 웹 코어 모션 + 데스크톱 윈도우 시스템 모션
+
+  Shared (Web Core):
+  - Page transition: crossfade (200ms)
+  - Modal/Dialog: scale + fade (250ms)
+  - List animation: stagger slide-in
+
+  Desktop Extension:
+  - Window open/close: system-aware animation
+  - Tray notification: slide-in from system tray
+  - Multi-window: window spawn transition
+  - Frameless drag: custom titlebar interaction
+
+강도: moderate
+적합: SaaS + 데스크톱 클라이언트 (Slack, Notion 스타일)
+구현: CSS (공유) + Electron/Tauri API (데스크톱)
+```
+
+### WD-M2. Dashboard Sync (대시보드 싱크)
+
+```
+기법: 웹/데스크톱 대시보드 동일 모션 + 실시간 동기화
+전략: 차트/데이터 전환 공유, 데스크톱에서 네이티브 알림 확장
+
+  Shared:
+  - KPI count-up animation
+  - Chart morph transition
+  - Skeleton loading shimmer
+  - Data table row animation
+
+  Desktop Extension:
+  - Native notification (OS notification center)
+  - Background sync indicator (tray icon pulse)
+  - Always-on-top widget mode
+
+강도: subtle ~ moderate
+적합: 분석 도구, 모니터링, 관리자 패널
+```
+
+### WD-M3. Productivity Focus (생산성 집중)
+
+```
+기법: 빠른 전환, 키보드 중심, 최소 모션
+전략: 반복 작업에 방해 없는 수준의 미니멀 모션
+
+  Shared:
+  - Instant page switch (crossfade 150ms)
+  - Form validation: subtle shake + red
+  - Toast: slide-in (200ms) + auto-dismiss (3s)
+  - Command palette: fade-in (150ms)
+
+  Desktop Extension:
+  - Global shortcut → window focus (instant)
+  - Quick switcher: Cmd+K / Ctrl+K style
+
+강도: subtle
+적합: 프로젝트 관리, 노트, 문서 편집
+특징: 키보드 단축키 피드백 > 시각 모션
+```
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-motions/03-mobile_desktop.md

@@ -0,0 +1,74 @@
+# 3. 모바일 + PC (`mobile_desktop`)
+
+
+### MD-M1. Companion App (컴패니언 앱)
+
+```
+기법: 모바일 = 경량 컴패니언, PC = 풀 기능
+전략: 각 플랫폼 네이티브 최적화 + 상태 동기화 모션
+
+  Mobile (터치 최적화):
+  - Tab navigation: slide (300ms)
+  - Card press: scale(0.97) + haptic
+  - Pull to refresh: spring animation
+  - Bottom sheet: slide-up (spring)
+
+  Desktop (마우스/키보드 최적화):
+  - Sidebar navigation: instant switch
+  - Card hover: subtle shadow + scale(1.01)
+  - Context menu: fade-in (150ms)
+  - Modal: scale + fade (250ms)
+
+  Sync indicator:
+  ↻ 동기화 중... (spin icon, both platforms)
+
+강도: moderate
+적합: 메신저 (모바일) + 관리자 (PC)
+```
+
+### MD-M2. Mirrored Experience (미러링 경험)
+
+```
+기법: 두 플랫폼에서 거의 동일한 경험
+전략: 공통 모션 토큰 정의, 플랫폼별 네이티브 렌더링
+
+  Motion Tokens (공유):
+  motion.duration.fast = 200ms
+  motion.duration.normal = 350ms
+  motion.duration.slow = 500ms
+  motion.easing.default = [0.4, 0, 0.2, 1]
+  motion.spring.default = { damping: 15, stiffness: 150 }
+
+  Mobile Implementation:
+  → React Native Reanimated / SwiftUI .animation
+
+  Desktop Implementation:
+  → Electron CSS transitions / Tauri + CSS
+
+강도: moderate
+적합: 게임 (모바일+PC), 크리에이티브 도구
+```
+
+### MD-M3. Role-Based Motion (역할 기반)
+
+```
+기법: 플랫폼 역할에 따라 모션 레벨 차별화
+전략: 모바일(소비) = 풍부한 모션, PC(생산) = 최소 모션
+
+  Mobile (소비 중심):
+  - Rich transitions (slide, fade, spring)
+  - Gesture-based interactions (swipe, pinch)
+  - Achievement/reward animations
+  - 강도: moderate ~ dramatic
+
+  Desktop (생산 중심):
+  - Minimal transitions (crossfade, instant)
+  - Keyboard-first interactions
+  - Data-focused feedback
+  - 강도: subtle
+
+적합: 학습 앱, 피트니스 트래커+대시보드
+```
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-motions/04-all.md

@@ -0,0 +1,96 @@
+# 4. 전체 플랫폼 (`all` = 웹 + 모바일 + PC)
+
+
+### A-M1. Universal Token System (유니버설 토큰)
+
+```
+기법: 단일 모션 토큰 → 3플랫폼 자동 변환
+전략: Style Dictionary로 모션 토큰 관리
+
+  tokens/motion.json:
+  {
+    "motion": {
+      "duration": {
+        "instant": { "value": "100ms" },
+        "fast":    { "value": "200ms" },
+        "normal":  { "value": "350ms" },
+        "slow":    { "value": "600ms" }
+      },
+      "easing": {
+        "default":  { "value": "cubic-bezier(0.4, 0, 0.2, 1)" },
+        "enter":    { "value": "cubic-bezier(0, 0, 0.2, 1)" },
+        "exit":     { "value": "cubic-bezier(0.4, 0, 1, 1)" },
+        "spring":   { "value": "cubic-bezier(0.175, 0.885, 0.32, 1.275)" }
+      }
+    }
+  }
+
+  Web Output:     → CSS Custom Properties
+  iOS Output:     → Swift UIView.animate parameters
+  Android Output: → Kotlin ObjectAnimator values
+  Desktop Output: → Electron CSS / Tauri CSS
+
+강도: moderate (토큰으로 전체 제어)
+적합: 대규모 크로스플랫폼 서비스
+```
+
+### A-M2. Progressive Enhancement (점진적 향상)
+
+```
+기법: 플랫폼 역량에 따라 모션 점진적 확장
+전략: 최소 공통분모 → 플랫폼별 확장
+
+  Level 0 (모든 플랫폼):
+  - opacity transition (fade)
+  - simple transform (translate, scale)
+
+  Level 1 (+ 모바일):
+  - touch gesture (swipe, pinch)
+  - haptic feedback
+  - spring physics
+
+  Level 2 (+ 데스크톱):
+  - hover effects
+  - cursor interactions
+  - multi-window transitions
+  - system tray animations
+
+  Level 3 (+ 고사양):
+  - particle effects
+  - 3D transforms
+  - shader effects
+  - complex physics
+
+강도: adaptive (기기별 자동 조정)
+적합: 범용 서비스, 점진적 출시
+```
+
+### A-M3. Brand Motion Identity (브랜드 모션)
+
+```
+기법: 브랜드 아이덴티티를 모션으로 통일
+전략: 시그니처 모션 정의 → 모든 플랫폼 일관 적용
+
+  Brand Signature:
+  - Easing: 브랜드 고유 커브 (예: bouncy, sharp, smooth)
+  - Duration: 브랜드 속도감 (예: fast-paced, relaxed)
+  - Pattern: 시그니처 전환 (예: slide-right, zoom-morph)
+
+  모든 플랫폼에서:
+  ┌─────────┐      ┌─────────┐
+  │ Screen A│ ──→  │ Screen B│
+  └─────────┘      └─────────┘
+    동일한 brand easing + duration
+
+  차이점:
+  - iOS: UIKit/SwiftUI 네이티브 렌더링
+  - Android: Compose/XML 네이티브 렌더링
+  - Web: CSS/JS 렌더링
+  - Desktop: Electron/Tauri CSS 렌더링
+
+강도: moderate (브랜드 가이드 기준)
+적합: 브랜드 통합 서비스, 글로벌 앱
+```
+
+---
+

package/skills/web-design/claude-code/defs/hybrid-motions/07-intensity-preset-motion.md

@@ -0,0 +1,16 @@
+# 모션 강도 프리셋 (하이브리드)
+
+
+| 프리셋 | `motion_intensity` | 웹 | 모바일 | 데스크톱 | 설명 |
+|--------|-------------------|----|--------|---------|------|
+| **Subtle** | `subtle` | 150-250ms | 150-300ms | 100-250ms | 빠르고 정확 |
+| **Moderate** | `moderate` | 300-500ms | 300-500ms | 250-500ms | 균형 잡힌 |
+| **Dramatic** | `dramatic` | 600-1000ms | 500-800ms | 500-1000ms | 임팩트 |
+| **Adaptive** | `adaptive` | 기기별 자동 | 기기별 자동 | 기기별 자동 | 기기 역량 기반 |
+| **None** | `none` | 0ms | 0ms | 0ms | 모션 없음 |
+
+> 각 플랫폼의 접근성 설정 자동 대응:
+> - Web: `prefers-reduced-motion`
+> - iOS: `UIAccessibility.isReduceMotionEnabled`
+> - Android: `Settings.Global.ANIMATOR_DURATION_SCALE`
+> - Desktop: `systemPreferences.getAnimationSettings()`

package/skills/web-design/claude-code/defs/hybrid-motions.md

@@ -0,0 +1,65 @@
+# 혼합(멀티플랫폼) 모션/인터랙션 패턴 정의
+
+> 참조 위치: `stages/stage2-hybrid-motion.md`에서 분기 사용
+> platform_combo별 크로스플랫폼 모션 전략 정의
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 핵심 원칙
+
+멀티플랫폼 모션은 **일관성**과 **플랫폼 네이티브 느낌** 사이의 균형이 핵심:
+
+| 원칙 | 설명 |
+|------|------|
+| **Shared Motion Language** | 모든 플랫폼에서 동일한 모션 의도 (duration, easing 통일) |
+| **Platform Adaptation** | 실행 환경에 맞는 네이티브 피드백 (iOS haptic, Android ripple 등) |
+| **Token-Driven** | 모션 토큰을 정의하고 플랫폼별 변환 |
+| **Progressive Enhancement** | 저사양 기기에서 모션 축소/제거 |
+
+---
+
+## 1. 웹 + 모바일 (`web_mobile`)
+
+> 상세: `defs/hybrid-motions/01-web_mobile.md` 참조
+
+기법: 뷰포트별 모션 자동 적응
+## 2. 웹 + PC (`web_desktop`)
+
+> 상세: `defs/hybrid-motions/02-web_desktop.md` 참조
+
+기법: 웹 모션을 데스크톱 네이티브 경험으로 확장
+## 3. 모바일 + PC (`mobile_desktop`)
+
+> 상세: `defs/hybrid-motions/03-mobile_desktop.md` 참조
+
+기법: 모바일 = 경량 컴패니언, PC = 풀 기능
+## 4. 전체 플랫폼 (`all` = 웹 + 모바일 + PC)
+
+> 상세: `defs/hybrid-motions/04-all.md` 참조
+
+기법: 단일 모션 토큰 → 3플랫폼 자동 변환
+## 크로스플랫폼 모션 토큰 구조
+
+모든 hybrid 프로젝트에 공통 적용:
+
+```
+design-tokens/
+  motion/
+    duration.json     # 시간 값
+    easing.json       # 이징 커브
+    spring.json       # 스프링 물리값 (모바일용)
+    intensity.json    # 강도 프리셋
+    platform/
+      web.json        # 웹 전용 오버라이드
+      ios.json        # iOS 전용 오버라이드
+      android.json    # Android 전용 오버라이드
+      desktop.json    # 데스크톱 전용 오버라이드
+```
+
+---
+
+## 모션 강도 프리셋 (하이브리드)
+
+> 상세: `defs/hybrid-motions/07-intensity-preset-motion.md` 참조
+

package/skills/web-design/claude-code/defs/ia-patterns/01-management-dashboard.md

@@ -0,0 +1,37 @@
+# web (SaaS / 대시보드 / 관리 콘솔)
+
+
+```
+GNB (Global Navigation Bar)
+│
+├── Dashboard (대시보드)
+│   ├── KPI 카드 (4~6개)
+│   ├── 실시간 차트
+│   └── 최근 알림 리스트
+│
+├── {도메인} Management (주요 엔티티 관리)
+│   ├── 리스트 (테이블 + 필터 + 페이지네이션)
+│   ├── 상세 (슬라이드 패널 또는 상세 페이지)
+│   └── 생성/편집 (폼 / 모달)
+│
+├── Monitoring (모니터링) — 선택적
+│   ├── 리소스 대시보드
+│   └── 시계열 차트
+│
+├── Settings (설정)
+│   ├── 일반 설정
+│   ├── API 키 관리
+│   └── 알림 설정
+│
+├── User Management (사용자 관리)
+│   ├── 사용자 목록
+│   └── 역할/권한 관리
+│
+└── Profile (프로필) — GNB 우측
+    ├── 프로필 편집
+    ├── 테마 전환
+    └── 로그아웃
+```
+
+**네비게이션**: 좌측 사이드바 (Desktop 240px, Tablet 64px, Mobile 하단 탭)
+

package/skills/web-design/claude-code/defs/ia-patterns/05-video.md

@@ -0,0 +1,33 @@
+# video (순수 비디오)
+
+
+```
+Composition 구조 (Remotion Studio 기반)
+│
+├── Root.tsx (진입점)
+│   └── <Composition> 등록
+│
+├── compositions/ (컴포지션별 폴더)
+│   ├── Intro/
+│   │   ├── Intro.tsx          # 인트로 장면
+│   │   └── schema.ts          # InputProps 스키마
+│   ├── MainContent/
+│   │   ├── MainContent.tsx     # 메인 콘텐츠
+│   │   └── schema.ts
+│   └── Outro/
+│       ├── Outro.tsx           # 아웃트로
+│       └── schema.ts
+│
+├── components/ (재사용 컴포넌트)
+│   ├── AnimatedText.tsx
+│   ├── FadeIn.tsx
+│   └── Background.tsx
+│
+└── lib/ (유틸리티)
+    ├── animations.ts
+    ├── colors.ts
+    └── fonts.ts
+```
+
+**네비게이션**: 없음 (컴포지션 → Sequence 흐름)
+

package/skills/web-design/claude-code/defs/ia-patterns/06-video_saas-saas.md

@@ -0,0 +1,37 @@
+# video_saas (비디오 SaaS)
+
+
+```
+이중 구조: 웹앱 + Remotion 엔진
+
+[웹앱 — saas_frontend 기반 IA]
+GNB (상단 바)
+│
+├── Dashboard (비디오 관리)
+│   ├── 비디오 목록 (카드 그리드 + 필터)
+│   ├── 렌더 큐 (진행 상태 + 이력)
+│   └── 사용량 통계
+│
+├── Editor (비디오 에디터)
+│   ├── 타임라인 패널
+│   ├── 미리보기 (Remotion Player)
+│   ├── 속성 패널 (InputProps 에디터)
+│   └── 에셋 라이브러리
+│
+├── Templates (템플릿 갤러리)
+│   ├── 카테고리별 필터
+│   ├── 미리보기 Player
+│   └── 커스터마이즈 → Editor
+│
+├── Settings (설정)
+│   ├── API 키
+│   ├── 렌더 설정 (해상도, 코덱)
+│   └── 저장소 설정
+│
+└── Profile (프로필)
+
+[Remotion 엔진 — 별도 패키지]
+compositions/ → components/ → lib/
+```
+
+**네비게이션**: 좌측 사이드바 (웹앱) + Remotion Studio (개발 시)

package/skills/web-design/claude-code/defs/ia-patterns.md

@@ -0,0 +1,85 @@
+# project_type별 IA 패턴
+
+> 참조: `gen/gen-design-guide.md` 섹션 2에서 사용
+> Dependencies: 없음 (독립 참조 데이터)
+
+## web (SaaS / 대시보드 / 관리 콘솔)
+
+> 상세: `defs/ia-patterns/01-management-dashboard.md` 참조
+
+GNB (Global Navigation Bar)
+## web (랜딩 / 마케팅 / 포트폴리오)
+
+```
+GNB (상단 고정 바)
+│
+├── Hero 섹션
+├── Features 섹션
+├── Pricing 섹션 — 선택적
+├── Testimonials 섹션 — 선택적
+├── FAQ 섹션 — 선택적
+├── Contact / CTA 섹션
+└── Footer
+```
+
+**네비게이션**: 상단 GNB 고정, 스크롤 시 배경 불투명, 모바일 햄버거
+
+## app (모바일)
+
+```
+Tab Bar (하단 탭 4~5개)
+│
+├── Tab 1: Home (홈 / 대시보드)
+│   ├── 요약 카드
+│   └── 최근 활동
+│
+├── Tab 2: {주요 기능}
+│   ├── 리스트 (FlatList / 무한 스크롤)
+│   └── 상세 (스택 네비게이션)
+│
+├── Tab 3: {보조 기능}
+│   └── 카테고리별 그리드/리스트
+│
+├── Tab 4: Notifications (알림)
+│   └── 알림 리스트 (읽음/안읽음)
+│
+└── Tab 5: Profile (프로필)
+    ├── 프로필 편집
+    ├── 설정
+    └── 로그아웃
+```
+
+**네비게이션**: 하단 탭 바 (iOS 스타일) + 스택 네비게이션
+
+## desktop (Electron / Tauri)
+
+```
+Title Bar (커스텀 타이틀 바)
+│
+├── Sidebar (좌측 패널, 리사이즈 가능)
+│   ├── 프로젝트/파일 트리
+│   ├── 최근 항목
+│   └── 즐겨찾기
+│
+├── Main Content (중앙 에디터)
+│   ├── 탭 바 (멀티 탭)
+│   ├── 에디터/뷰어 영역
+│   └── 상태 바 (하단)
+│
+└── Panel (우측 패널, 토글 가능)
+    ├── 속성/설정
+    └── 미리보기
+```
+
+**네비게이션**: 좌측 트리 + 탭 시스템, 키보드 단축키 중심
+
+## video (순수 비디오)
+
+> 상세: `defs/ia-patterns/05-video.md` 참조
+
+Composition 구조 (Remotion Studio 기반)
+## video_saas (비디오 SaaS)
+
+> 상세: `defs/ia-patterns/06-video_saas-saas.md` 참조
+
+이중 구조: 웹앱 + Remotion 엔진

package/skills/web-design/claude-code/defs/icon-mappings/04-mapping-design-system.md

@@ -0,0 +1,25 @@
+# 디자인 시스템 참조 매핑 (섹션 8)
+
+
+### config.frontend별 참조
+
+| config.frontend | 1순위 | 2순위 | 컴포넌트 라이브러리 |
+|---|---|---|---|
+| `nextjs` | Shadcn/UI | Tailwind UI | `@shadcn/ui` |
+| `react_vite` | Shadcn/UI | Tailwind UI | `@shadcn/ui` |
+| `vue3_vite` | PrimeVue | Ant Design Vue | `primevue` |
+| `nuxt` | Nuxt UI | PrimeVue | `@nuxt/ui` |
+| `react_native` | React Native Paper | NativeBase | `react-native-paper` |
+| `flutter` | Material Design 3 | Cupertino | (Flutter 내장) |
+| `electron` | Shadcn/UI | Radix UI | `@shadcn/ui` |
+| `tauri` | Shadcn/UI | Radix UI | `@shadcn/ui` |
+
+### 기능별 벤치마킹 (web SaaS만)
+
+| 화면 | 벤치마크 | 참고 요소 |
+|---|---|---|
+| 대시보드 | Grafana | 패널 레이아웃, 시계열 차트 |
+| 데이터 관리 | AWS EC2 Console | 인스턴스 리스트, 필터, 상태 뱃지 |
+| 모니터링 | Datadog | 리소스 메트릭, 알림 임계치 |
+| 설정 | GitHub Settings | 폼 구성, 토글, 저장 동작 |
+| 전체 레이아웃 | Vercel Dashboard | 사이드바, 미니멀 톤, 다크 모드 |

package/skills/web-design/claude-code/defs/icon-mappings.md

@@ -0,0 +1,49 @@
+# project_type별 아이콘 & 참조 매핑
+
+> 참조: `gen/gen-design-guide.md` 섹션 4e, 8에서 사용
+> Dependencies: 없음 (독립 참조 데이터)
+
+## web (SaaS) 기본 메뉴 아이콘
+
+| 메뉴 | Lucide 아이콘 |
+|---|---|
+| Dashboard | `LayoutDashboard` |
+| Management | `Server` (또는 도메인별 변경) |
+| Monitoring | `Activity` |
+| Settings | `Settings` |
+| Users | `Users` |
+| Profile | `UserCircle` |
+| Help | `HelpCircle` |
+
+## 공통 액션 아이콘
+
+| 동작 | Lucide 아이콘 |
+|---|---|
+| 추가/생성 | `Plus` |
+| 편집 | `Pencil` |
+| 삭제 | `Trash2` |
+| 검색 | `Search` |
+| 필터 | `SlidersHorizontal` |
+| 내보내기 | `Download` |
+| 새로고침 | `RefreshCw` |
+| 더보기 | `MoreVertical` |
+| 닫기 | `X` |
+| 복사 | `Copy` |
+| 외부 링크 | `ExternalLink` |
+
+## 공통 상태 아이콘
+
+| 상태 | Lucide 아이콘 | 색상 |
+|---|---|---|
+| 성공 / Active | `CheckCircle` | `--color-success` |
+| 경고 / Pending | `AlertTriangle` | `--color-warning` |
+| 에러 / Stopped | `XCircle` | `--color-error` |
+| 정보 | `Info` | `--color-info` |
+| 비활성 / Offline | `MinusCircle` | `--text-disabled` |
+
+---
+
+## 디자인 시스템 참조 매핑 (섹션 8)
+
+> 상세: `defs/icon-mappings/04-mapping-design-system.md` 참조
+

package/skills/web-design/claude-code/defs/icon-usage.md

@@ -0,0 +1,56 @@
+# 아이콘 사용 가이드
+
+> Dependencies: `defs/icon-mappings.md`
+> 아이콘 토큰 값: defs/tokens.md § 9 참조
+> 참조원: `gen/gen-design-guide.md` 섹션 4e, `defs/component-specs.md`
+
+## 1. 컴포넌트별 아이콘 크기 규칙
+
+> 상세: `defs/icon-usage/01-component-icon-size.md` 참조
+
+## 2. 아이콘 색상 규칙
+
+> 상세: `defs/icon-usage/02-icon-rules-color.md` 참조
+
+## 3. 아이콘-텍스트 정렬 규칙
+
+```css
+/* 수평 정렬 (인라인) */
+.icon-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--icon-gap);
+  vertical-align: middle;
+}
+
+/* 수직 정렬 (스택) */
+.icon-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--icon-gap);
+}
+
+/* 아이콘이 텍스트보다 큰 경우 (카드 등) */
+.icon-feature {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--icon-gap-lg);
+}
+```
+
+---
+
+## 4. 프레임워크별 import 패턴
+
+> 상세: `defs/icon-usage/04-pattern-framework.md` 참조
+
+import { Home, Search, Bell, Settings } from 'lucide-react';
+## 5. 아이콘 접근성 규칙
+
+> 상세: `defs/icon-usage/05-icon-rules-a11y.md` 참조
+
+## 6. 아이콘 호버/인터랙션 패턴
+
+> 상세: `defs/icon-usage/06-icon-hover-interaction.md` 참조
+

package/skills/web-design/claude-code/defs/illustration-guide.md

@@ -0,0 +1,44 @@
+# 일러스트 가이드
+
+> Dependencies: `defs/styles.md`
+> 참조원: `gen/gen-design-guide.md` 섹션 5, `defs/component-specs.md`
+
+## 1. 스타일별 일러스트 톤 매칭
+
+> 상세: `defs/illustration-guide/01-style-illustration.md` 참조
+
+## 2. 사용 위치별 규칙
+
+> 상세: `defs/illustration-guide/02-rules-usage-location.md` 참조
+
+Desktop: 기본 크기
+## 3. 색상 동기화 규칙
+
+> 상세: `defs/illustration-guide/03-rules-color-sync.md` 참조
+
+/* 일러스트 SVG에 CSS 변수 바인딩 */
+## 4. 일러스트 라이브러리 가이드
+
+> 상세: `defs/illustration-guide/04-illustration-library-guide.md` 참조
+
+## 5. 일러스트 접근성
+
+| 유형 | 처리 |
+|------|------|
+| 의미 있는 일러스트 | `role="img"` + `aria-label="설명"` |
+| 장식 일러스트 | `aria-hidden="true"` |
+| Empty State 일러스트 | 텍스트 설명이 반드시 동반 (일러스트만 단독 사용 금지) |
+| 애니메이션 일러스트 | `prefers-reduced-motion: reduce` 시 정지 |
+
+---
+
+## 6. 일러스트 vs 아이콘 판단 기준
+
+| 상황 | 선택 | 이유 |
+|------|------|------|
+| 기능 설명 (3~5개 나열) | 아이콘 48px | 일관성, 빠른 인지 |
+| 빈 상태 (데이터 없음) | 일러스트 200px | 감정 전달, 분위기 |
+| 에러/404 | 일러스트 300px | 사용자 불안 완화 |
+| 온보딩 | 일러스트 300px | 스토리텔링 |
+| 대시보드 위젯 | 아이콘 24~32px | 공간 효율 |
+| 성공 완료 | 일러스트 200px 또는 아이콘 64px | 규모에 따라 |