timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/app-layouts.md

@@ -0,0 +1,59 @@
+# 3DS 앱 디자인 레이아웃 패턴 정의
+
+> 참조: `stages/stage2-app-layout.md`에서 사용
+> 앱 유형(`config.type_detail.app_type`)에 따라 분기
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 공통 레이아웃 (모든 앱 유형에서 선택 가능)
+
+| 코드 | 패턴 | 설명 |
+|------|------|------|
+| `tab_list` | Tab Bar + List | 탭 전환 + 리스트 기반 콘텐츠 |
+| `tab_grid` | Tab Bar + Grid | 탭 전환 + 그리드 카드 레이아웃 |
+| `single` | Single Screen | 단일 화면 중심 (위젯/도구형) |
+| `custom` | Custom | 직접 설계 |
+
+---
+
+## 유틸리티 (`utility`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/02-utility.md` 참조
+
+- **구조**: 하나의 메인 화면 + 설정
+## 소셜/커뮤니케이션 (`social`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/03-social.md` 참조
+
+- **구조**: 상단 스토리 바 + 무한 스크롤 피드
+## 게임/엔터테인먼트 (`game`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/04-game.md` 참조
+
+- **구조**: 전체 화면 게임뷰 + HUD 오버레이
+## 핀테크 (`fintech`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/05-fintech.md` 참조
+
+- **구조**: 잔액 카드 + 빠른 액션 + 거래 내역
+## 헬스케어/피트니스 (`healthcare`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/06-healthcare.md` 참조
+
+- **구조**: 오늘의 요약 + 건강 지표 카드 + 타임라인
+## 이커머스 (`ecommerce`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/07-ecommerce.md` 참조
+
+- **구조**: 카테고리 + 상품 그리드 + 상세
+## 교육/학습 (`education`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/08-education.md` 참조
+
+- **구조**: 코스 목록 → 커리큘럼 → 학습 화면
+## 크리에이티브/미디어 (`creative`) 전용 레이아웃
+
+> 상세: `defs/app-layouts/09-creative.md` 참조
+
+- **구조**: 전체 화면 캔버스 + 도구바 / 갤러리 + 에디터

package/skills/web-design/claude-code/defs/app-motions/01-utility.md

@@ -0,0 +1,51 @@
+# 1. 유틸리티 (`utility`)
+
+
+### U-M1. Clean Functional (클린 펑셔널)
+
+```
+기법: 최소한의 필수 전환, 빠른 피드백
+포함: screen-push | fade | button-feedback | toggle-switch
+
+  Screen A  ──push→  Screen B
+  [200ms, ease-out]
+
+  [Toggle] ──tap→ [●━━━] (spring animation)
+
+강도: subtle
+적합: 계산기, 날씨, 메모, 타이머
+프레임워크: React Native Animated, SwiftUI .animation
+```
+
+### U-M2. Widget Bounce (위젯 바운스)
+
+```
+기법: 위젯/카드에 스프링 바운스 + 리스트 스태거
+포함: spring-tap | card-press | stagger-list | pull-refresh
+
+  [Widget]  ──tap→  [Widget] (scale 0.95 → 1.0, spring)
+
+  Item1 ─── 0ms ───→ slide-in
+  Item2 ─── 60ms ──→ slide-in
+  Item3 ─── 120ms ─→ slide-in
+
+강도: moderate
+적합: 위젯 대시보드, 설정 앱
+```
+
+### U-M3. Haptic Minimal (햅틱 미니멀)
+
+```
+기법: 시각 효과 최소화, 햅틱 피드백 중심
+포함: haptic-tap | subtle-scale | instant-transition
+
+  [Button] ──tap→ haptic: .light
+  [Switch] ──tap→ haptic: .medium
+  [Delete] ──tap→ haptic: .warning
+
+강도: subtle
+적합: 시스템 유틸리티, 접근성 우선 앱
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/02-social.md

@@ -0,0 +1,55 @@
+# 2. 소셜 (`social`)
+
+
+### SO-M1. Feed Scroll & Like (피드 스크롤 & 좋아요)
+
+```
+기법: 피드 아이템 등장 + 좋아요/리액션 애니메이션
+포함: feed-stagger | double-tap-heart | reaction-popup | pull-refresh
+
+  ❤️ ← scale(0→1.3→1.0) + particle burst
+     duration: 400ms, spring
+
+  [Feed Item] ← fade-up on scroll
+
+강도: moderate
+적합: SNS 피드, 커뮤니티, 사진 공유
+```
+
+### SO-M2. Chat Bubble (채팅 버블)
+
+```
+기법: 메시지 버블 등장/타이핑 인디케이터/리액션
+포함: bubble-slide-up | typing-dots | message-read | emoji-reaction
+
+  ┌──────────────┐
+  │  ● ● ●       │ ← typing indicator (bounce)
+  └──────────────┘
+       ↓ 800ms
+  ┌──────────────┐
+  │  안녕하세요!   │ ← slide-up + fade
+  └──────────────┘
+
+강도: moderate
+적합: 메신저, 채팅, 고객지원
+```
+
+### SO-M3. Story & Reel Transition (스토리 전환)
+
+```
+기법: 스토리/릴스 간 전환, 프로그레스 바
+포함: story-progress | cube-transition | swipe-next | pinch-close
+
+  ████░░░░░░  Story 1/5 (auto-progress)
+
+  ┌─────┐  swipe  ┌─────┐
+  │Story│  ────→  │Story│  (cube 3D rotate)
+  │  1  │         │  2  │
+  └─────┘         └─────┘
+
+강도: dramatic
+적합: Instagram/TikTok 스타일, 콘텐츠 피드
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/03-game.md

@@ -0,0 +1,52 @@
+# 3. 게임 (`game`)
+
+
+### G-M1. Immersive Motion (몰입형 모션)
+
+```
+기법: 풀스크린 전환, 파티클, 화면 쉐이크
+포함: particle-burst | screen-shake | glow-pulse | zoom-impact
+
+  💥 ← particle burst (radial, 200+ particles)
+  📳 ← screen shake (translateX ±3px, 100ms)
+  ✨ ← glow pulse (box-shadow animate)
+
+강도: dramatic
+적합: 액션 게임, 캐주얼 게임
+```
+
+### G-M2. UI Overlay & HUD (게임 UI)
+
+```
+기법: 게임 UI 등장/퇴장, 점수 카운트업
+포함: hud-slide | score-popup | level-transition | menu-cascade
+
+  +100 ← float up + fade (score popup)
+
+  ┌────────────────────┐
+  │  LEVEL COMPLETE    │ ← zoom-in + particle
+  │  ★ ★ ★            │ ← stagger reveal
+  └────────────────────┘
+
+강도: dramatic
+적합: 모든 게임 유형
+```
+
+### G-M3. Lobby & Menu (로비 모션)
+
+```
+기법: 메뉴 아이템 등장, 방 입장/퇴장 전환
+포함: menu-stagger | room-transition | avatar-bounce | countdown
+
+  [Play]   ─── 0ms ───→ scale-in
+  [Shop]   ─── 100ms ──→ scale-in
+  [Rank]   ─── 200ms ──→ scale-in
+
+  Room join: zoom-through → fade-in
+
+강도: moderate ~ dramatic
+적합: 대전 게임, 소셜 게임
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/04-fintech.md

@@ -0,0 +1,52 @@
+# 4. 핀테크 (`fintech`)
+
+
+### F-M1. Secure & Precise (정확하고 안정적)
+
+```
+기법: 정확한 숫자 전환, 보안 피드백
+포함: count-up | chart-animate | biometric-feedback | secure-transition
+
+  $0.00  ──animate──→  $12,450.00
+  [smooth counter, 800ms]
+
+  [FaceID] ──→ ✅ (scale-in, haptic: success)
+
+강도: subtle ~ moderate
+적합: 뱅킹, 결제, 자산 관리
+```
+
+### F-M2. Card & Account Flip (카드/계좌 전환)
+
+```
+기법: 카드 3D 플립, 계좌 스와이프 전환
+포함: card-3d-flip | account-swipe | balance-reveal | receipt-slide
+
+  ┌──────────┐         ┌──────────┐
+  │ CARD     │  flip   │ CVV: *** │
+  │ **** 1234│  ──→    │ EXP: ~~  │
+  │          │ rotateY │          │
+  └──────────┘  180°   └──────────┘
+
+강도: moderate
+적합: 카드 관리, 자산 현황
+```
+
+### F-M3. Transaction List (거래 목록)
+
+```
+기법: 거래 내역 리스트 등장 + 카테고리 필터 전환
+포함: list-slide-in | filter-morph | amount-highlight | swipe-action
+
+  [거래1] ← slide-right (0ms)
+  [거래2] ← slide-right (50ms)
+  [거래3] ← slide-right (100ms)
+
+  ←swipe→ [삭제] [보관]
+
+강도: subtle
+적합: 거래 내역, 가계부
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/05-healthcare.md

@@ -0,0 +1,52 @@
+# 5. 헬스케어 (`healthcare`)
+
+
+### H-M1. Calm & Smooth (차분하고 부드러운)
+
+```
+기법: 느린 전환, 부드러운 곡선, 스트레스 없는 UX
+포함: slow-fade | gentle-slide | breathing-animation | progress-ring
+
+  ○ ← breathing circle (scale 1.0 ↔ 1.1, 4s cycle)
+
+  Progress Ring: stroke-dashoffset animate
+  ╭───╮
+  │70%│ ← smooth arc fill
+  ╰───╯
+
+강도: subtle
+적합: 건강 관리, 명상, 수면
+```
+
+### H-M2. Chart & Tracking (차트 & 트래킹)
+
+```
+기법: 건강 데이터 차트 등장, 기록 추가 피드백
+포함: chart-draw | stat-count-up | log-success | streak-celebrate
+
+  Heart Rate Chart:
+  ──╱╲──╱╲──╱╲── (path draw animation, 1.2s)
+
+  [+ Log] ──tap→ ✅ (check bounce + haptic)
+
+강도: moderate
+적합: 건강 대시보드, 피트니스 트래커
+```
+
+### H-M3. Appointment Flow (예약 플로우)
+
+```
+기법: 단계별 예약 전환, 달력 애니메이션
+포함: step-slide | calendar-morph | time-select | confirm-check
+
+  Step ①━━●━━②━━○━━③━━○
+  ████████████░░░░░░░░░░░░
+
+  Calendar: month slide-left → next month
+
+강도: subtle
+적합: 병원 예약, 상담 예약
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/06-ecommerce.md

@@ -0,0 +1,55 @@
+# 6. 이커머스-앱 (`ecommerce`)
+
+
+### EA-M1. Product Browse (상품 탐색)
+
+```
+기법: 상품 카드 등장, 이미지 스와이프, 줌
+포함: card-stagger | image-swipe | pinch-zoom | quick-add
+
+  [상품1] [상품2]  ← stagger fade-up
+  [상품3] [상품4]
+
+  상품 이미지: ←swipe→ (carousel)
+  상품 이미지: pinch → zoom (gesture)
+
+강도: moderate
+적합: 쇼핑몰, 마켓플레이스
+```
+
+### EA-M2. Cart & Checkout (장바구니 & 결제)
+
+```
+기법: 장바구니 담기 애니메이션, 결제 단계 전환
+포함: fly-to-tab | quantity-spin | step-progress | payment-success
+
+  [담기] ──→ 📱 tab bar badge +1 (bounce)
+
+  Payment Success:
+  ┌──────────────┐
+  │    ✅        │ ← scale-in + confetti
+  │  결제 완료    │
+  └──────────────┘
+
+강도: moderate
+적합: 모든 이커머스 앱
+```
+
+### EA-M3. Search & Filter (검색 & 필터)
+
+```
+기법: 검색 확장, 필터 바텀 시트, 결과 갱신
+포함: search-expand | filter-sheet | result-morph | sort-reorder
+
+  🔍 ──tap→ ┌──────────────────┐ (expand)
+             │ 검색어 입력...     │
+             └──────────────────┘
+
+  Filter: bottom-sheet slide-up (spring)
+
+강도: moderate
+적합: 상품 검색, 카테고리 탐색
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/07-education.md

@@ -0,0 +1,54 @@
+# 7. 교육 (`education`)
+
+
+### ED-M1. Progress & Achievement (진행률 & 성취)
+
+```
+기법: 학습 진행률 애니메이션, 배지/트로피 획득
+포함: progress-fill | badge-unlock | streak-fire | xp-count-up
+
+  Progress: ████████░░░░ 67% (smooth fill)
+
+  🏆 Badge Unlock:
+  ┌─────────┐
+  │  🎉 ★   │ ← scale-in + particle + haptic
+  │ Master  │
+  └─────────┘
+
+강도: moderate ~ dramatic
+적합: 언어학습, 온라인 강좌, 퀴즈 앱
+```
+
+### ED-M2. Lesson & Card Flip (강의 & 카드)
+
+```
+기법: 플래시카드 3D 플립, 레슨 전환
+포함: card-3d-flip | lesson-slide | question-reveal | timer-countdown
+
+  Flashcard:
+  ┌──────────┐  tap   ┌──────────┐
+  │ Question │  ──→   │  Answer  │
+  │  (앞면)   │ flipY  │  (뒷면)  │
+  └──────────┘        └──────────┘
+
+강도: moderate
+적합: 단어장, 플래시카드, 퀴즈
+```
+
+### ED-M3. Interactive Quiz (인터랙티브 퀴즈)
+
+```
+기법: 정답/오답 피드백, 타이머, 점수 팝업
+포함: option-tap | correct-shake | wrong-shake | score-popup | combo
+
+  [Option A] ──tap→ ✅ green flash + +10 popup
+  [Option B] ──tap→ ❌ red shake (translateX ±5px)
+
+  🔥 x5 Combo! (fire particle + scale bounce)
+
+강도: moderate ~ dramatic
+적합: 퀴즈, 시험 준비, 게이미피케이션
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/08-creative.md

@@ -0,0 +1,53 @@
+# 8. 크리에이티브 (`creative`)
+
+
+### CR-M1. Canvas Gesture (캔버스 제스처)
+
+```
+기법: 멀티터치 제스처, 실시간 변환
+포함: pinch-zoom | rotate-gesture | pan-canvas | undo-slide
+
+  Two-finger:
+  ↗️↙️ pinch → zoom canvas
+  ↩️↪️ rotate → rotate layer
+  ←→↑↓ pan → move canvas
+
+강도: moderate (즉각적이되 부드러운)
+적합: 드로잉, 사진 편집, 디자인 도구
+```
+
+### CR-M2. Timeline & Playback (타임라인 & 재생)
+
+```
+기법: 타임라인 스크럽, 미디어 재생 컨트롤
+포함: scrub-timeline | play-morph | waveform-animate | preview-transition
+
+  ▶ ──tap→ ▮▮ (morph animation, play→pause)
+
+  Timeline:
+  ━━━━━━━━●━━━━━━━━━━━ scrub
+  [Clip1][Clip2][Clip3]
+
+강도: moderate
+적합: 영상 편집, 음악 제작, 애니메이션
+```
+
+### CR-M3. Gallery & Showcase (갤러리 쇼케이스)
+
+```
+기법: 작품 갤러리 전환, 풀스크린 뷰어
+포함: masonry-appear | fullscreen-morph | swipe-gallery | filter-shuffle
+
+  Masonry Grid: items appear with stagger
+  [A][B  ][C]
+  [D  ][ E ]  ← each item: scale(0.8→1) + fade
+
+  Fullscreen: shared element transition
+  [thumb] ──→ [fullscreen] (morph bounds)
+
+강도: moderate ~ dramatic
+적합: 갤러리, 포트폴리오, 콘텐츠 제작
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-motions/10-intensity-preset-motion.md

@@ -0,0 +1,12 @@
+# 모션 강도 프리셋 (앱)
+
+
+| 프리셋 | `motion_intensity` | duration | spring | 설명 |
+|--------|-------------------|----------|--------|------|
+| **Subtle** | `subtle` | 150-300ms | stiff | 빠르고 정확, 비즈니스 |
+| **Moderate** | `moderate` | 300-500ms | default | 균형 잡힌, 범용 |
+| **Dramatic** | `dramatic` | 500-800ms | bouncy | 임팩트, 게임/소셜 |
+| **None** | `none` | 0ms | - | 모션 없음, 접근성 우선 |
+
+> `UIAccessibility.isReduceMotionEnabled` (iOS) / `Settings.Global.ANIMATOR_DURATION_SCALE` (Android) 자동 대응
+> React Native: `AccessibilityInfo.isReduceMotionEnabled()`

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

@@ -0,0 +1,64 @@
+# 앱 모션/인터랙션 패턴 정의
+
+> 참조 위치: `stages/stage2-app-motion.md`에서 분기 사용
+> app_type별 추천 모션 패턴 정의
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 공통 모션 카테고리
+
+| 카테고리 | 설명 |
+|----------|------|
+| **Screen Transition** | 화면 간 전환 (Shared Element, Hero, Push/Pop) |
+| **Gesture Motion** | 스와이프, 핀치, 드래그 기반 인터랙션 |
+| **Feedback** | 탭, 길게 누르기, 완료 등 촉각/시각 피드백 |
+| **Loading** | 로딩 상태, 새로고침, 스켈레톤 |
+| **List & Card** | 리스트/카드 등장, 정렬, 삭제 애니메이션 |
+
+---
+
+## 1. 유틸리티 (`utility`)
+
+> 상세: `defs/app-motions/01-utility.md` 참조
+
+기법: 최소한의 필수 전환, 빠른 피드백
+## 2. 소셜 (`social`)
+
+> 상세: `defs/app-motions/02-social.md` 참조
+
+기법: 피드 아이템 등장 + 좋아요/리액션 애니메이션
+## 3. 게임 (`game`)
+
+> 상세: `defs/app-motions/03-game.md` 참조
+
+기법: 풀스크린 전환, 파티클, 화면 쉐이크
+## 4. 핀테크 (`fintech`)
+
+> 상세: `defs/app-motions/04-fintech.md` 참조
+
+기법: 정확한 숫자 전환, 보안 피드백
+## 5. 헬스케어 (`healthcare`)
+
+> 상세: `defs/app-motions/05-healthcare.md` 참조
+
+기법: 느린 전환, 부드러운 곡선, 스트레스 없는 UX
+## 6. 이커머스-앱 (`ecommerce`)
+
+> 상세: `defs/app-motions/06-ecommerce.md` 참조
+
+기법: 상품 카드 등장, 이미지 스와이프, 줌
+## 7. 교육 (`education`)
+
+> 상세: `defs/app-motions/07-education.md` 참조
+
+기법: 학습 진행률 애니메이션, 배지/트로피 획득
+## 8. 크리에이티브 (`creative`)
+
+> 상세: `defs/app-motions/08-creative.md` 참조
+
+기법: 멀티터치 제스처, 실시간 변환
+## 모션 강도 프리셋 (앱)
+
+> 상세: `defs/app-motions/10-intensity-preset-motion.md` 참조
+

package/skills/web-design/claude-code/defs/component-specs/01-set-component.md

@@ -0,0 +1,24 @@
+# project_type별 컴포넌트 세트 (섹션 4)
+
+
+| 컴포넌트 | web (SaaS) | web (랜딩) | app | desktop | video | video_saas |
+|----------|------------|------------|-----|---------|-------|-----------|
+| Button (5종) | O | O (3종) | O (3종) | O | X | O |
+| Input Field | O | O | O | O | X | O |
+| Card | O | O | O | O | X | O |
+| Data Table | O | X | X (리스트) | O | X | O |
+| Modal | O | X | O (Bottom Sheet) | O | X | O |
+| Toast | O | O | O (Snackbar) | O | X | O |
+| Badge/Tag | O | X | O | O | X | O |
+| Tooltip | O | X | X | O | X | O |
+| Sidebar | O | X | X | O | X | O |
+| Tab Bar | X | X | O | O | X | X |
+| Bottom Sheet | X | X | O | X | X | X |
+| AnimatedText | X | X | X | X | O | O |
+| FadeIn/SlideIn | X | X | X | X | O | O |
+| Sequence Wrapper | X | X | X | X | O | O |
+| Background | X | X | X | X | O | O |
+| VideoPlayer | X | X | X | X | X (Player만) | O |
+
+---
+

package/skills/web-design/claude-code/defs/component-specs/02-features-flow.md

@@ -0,0 +1,51 @@
+# project_type별 기능 흐름 (섹션 6)
+
+
+### web (SaaS) — 전체 기능 흐름
+
+1. **로그인**: 이메일+비밀번호, 5회 실패 잠금, 중복 로그인 감지, 세션 만료 30분
+2. **데이터 테이블**: 검색(디바운스 300ms), 필터(URL 쿼리 반영), 정렬(단일 컬럼), 페이지네이션(10/25/50), 선택+벌크 액션, 행 액션(⋮ 드롭다운), 내보내기(CSV/JSON)
+3. **생성/수정 폼**: 실시간 필드 검증(blur 시), 에러→첫 필드 스크롤, 이탈 방지 확인, 중복 데이터 감지
+4. **삭제 동작**: 단건(확인 모달), 중요 항목(이름 재입력), 벌크(진행률+부분 실패), 성공 시 [되돌리기] 5초
+5. **RBAC**: Admin(전체), Operator(생성/수정 가능, 삭제 불가), Viewer(읽기만, 버튼 숨김)
+
+### web (랜딩) — 최소 기능 흐름
+
+1. **문의 폼**: 필드 검증, 전송 스피너, 성공 토스트
+2. **스크롤 네비게이션**: smooth scroll, GNB 활성 메뉴 하이라이트
+
+### app — 모바일 최적화 기능 흐름
+
+1. **로그인**: 이메일+비밀번호, 생체인증(선택), 자동 로그인(토큰)
+2. **리스트**: 무한 스크롤(FlatList), 당겨서 새로고침, 스와이프 액션
+3. **생성/수정 폼**: 키보드 회피, 다음 필드 자동 포커스, 실시간 검증
+4. **삭제 동작**: 확인 Alert, 스와이프 삭제
+5. **RBAC**: 간소화 (Admin/User 2레벨)
+
+### desktop — 데스크톱 최적화 기능 흐름
+
+1. **로그인**: 로컬 인증 또는 OAuth
+2. **파일/데이터 관리**: 트리 네비게이션, 드래그 앤 드롭, 멀티 선택
+3. **에디터**: 탭 기반 멀티 문서, 실시간 저장(Ctrl+S), Undo/Redo
+4. **검색**: Ctrl+Shift+F 글로벌 검색, Ctrl+P 파일 빠른 열기
+5. **설정**: 환경설정 창 (별도 윈도우 또는 탭)
+
+### video — Remotion 비디오 기능 흐름
+
+1. **컴포지션 렌더링**: Root.tsx → Composition 선택 → Sequence 순차 재생 → MP4/WebM 출력
+2. **애니메이션**: useCurrentFrame() → interpolate/spring → 프레임 기반 트랜스폼/투명도
+3. **미디어 처리**: staticFile() → `<Img>/<Video>/<Audio>` Remotion 전용 컴포넌트
+4. **캡션/자막**: SRT 파싱 → 프레임 동기화 → 단어별 하이라이트
+5. **렌더링**: CLI(`npx remotion render`) 또는 Lambda(`renderMediaOnLambda`)
+
+### video_saas — 비디오 SaaS 기능 흐름
+
+1. **로그인/인증**: 이메일+비밀번호, OAuth
+2. **비디오 관리**: CRUD 비디오 프로젝트, 에셋 업로드, 카테고리 필터
+3. **에디터**: Remotion Player 미리보기 + InputProps 에디터 + 타임라인
+4. **렌더 큐**: 렌더 요청 → 진행 상태 표시 → 완료 다운로드/공유
+5. **템플릿**: 갤러리 → 미리보기 → 커스터마이즈 → 렌더
+6. **RBAC**: Admin(전체), Creator(비디오 생성/편집), Viewer(미리보기만)
+
+---
+