timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/desktop-layouts/02-data.md

@@ -0,0 +1,71 @@
+# 2. 데이터 관리 (`data`)
+
+
+### desktop_data_table — 테이블 중심 (Table-Centric)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├─────────────────────────────────────┤
+│ [Toolbar] 🔍 검색 | [+추가] [필터]   │
+├─────────────────────────────────────┤
+│ Name     │ Type   │ Size   │ Date  │
+│──────────┼────────┼────────┼───────│
+│ item 1   │ doc    │ 2.4MB  │ 01/15 │
+│ item 2   │ img    │ 5.1MB  │ 01/14 │
+│ item 3   │ pdf    │ 1.2MB  │ 01/13 │
+│ ...      │ ...    │ ...    │ ...   │
+├─────────────────────────────────────┤
+│ 3 items selected  │ Total: 8.7MB   │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 데이터 테이블 전면 배치, 정렬/필터/검색
+- **적합**: DB 뷰어, 스프레드시트, CSV 편집기, 재고 관리
+- **핵심 화면**: 테이블 뷰, 레코드 편집(모달), 가져오기/내보내기
+
+### desktop_data_master_detail — 마스터-디테일 (Master-Detail)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├─────────────────────────────────────┤
+│ [Toolbar] 🔍 | [+] [필터] [정렬]    │
+├──────────────┬──────────────────────┤
+│  Item List   │  Detail View         │
+│  ──────────  │  ┌────────────────┐  │
+│  ▶ Record 1  │  │ Record 1       │  │
+│    Record 2  │  │ Name: ...      │  │
+│    Record 3  │  │ Desc: ...      │  │
+│    Record 4  │  │ Created: ...   │  │
+│    ...       │  │ [Edit] [Delete]│  │
+│              │  └────────────────┘  │
+└──────────────┴──────────────────────┘
+```
+
+- **특징**: 좌측 목록 + 우측 상세, CRM/PIM 스타일
+- **적합**: 고객 관리, 주소록, 프로젝트 관리, API 테스터
+- **핵심 화면**: 목록 뷰, 상세 뷰, 편집 폼
+
+### desktop_data_dashboard — 대시보드 그리드 (Dashboard Grid)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├──────┬──────────────────────────────┤
+│      │  ┌──────┐ ┌──────┐ ┌──────┐ │
+│ Nav  │  │ KPI1 │ │ KPI2 │ │ KPI3 │ │
+│      │  └──────┘ └──────┘ └──────┘ │
+│ 📊   │  ┌───────────┐ ┌─────────┐  │
+│ 📈   │  │  Chart    │ │  Table  │  │
+│ ⚙️   │  │           │ │         │  │
+│      │  └───────────┘ └─────────┘  │
+└──────┴──────────────────────────────┘
+```
+
+- **특징**: KPI 카드 + 차트 + 테이블 그리드, 드래그 재배치
+- **적합**: 분석 도구, 모니터링, BI 대시보드, 로그 뷰어
+- **핵심 화면**: 대시보드, 차트 상세, 설정, 데이터 소스
+
+---
+

package/skills/web-design/claude-code/defs/desktop-layouts/03-creative.md

@@ -0,0 +1,73 @@
+# 3. 크리에이티브 (`creative`)
+
+
+### desktop_creative_canvas — 캔버스 + 툴바 (Canvas & Toolbars)
+
+```
+┌─────────────────────────────────────┐
+│ [Menu Bar] File Edit View           │
+├──┬──────────────────────────────┬───┤
+│T │                              │ P │
+│o │                              │ r │
+│o │       Canvas / Viewport      │ o │
+│l │       (무한 캔버스)            │ p │
+│s │                              │ e │
+│  │                              │ r │
+│🖌│                              │ t │
+│🔲│                              │ y │
+├──┴──────────────────────────────┴───┤
+│ [Status] Zoom: 100% | 1920x1080    │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 중앙 캔버스 + 좌측 도구 + 우측 속성, GPU 가속
+- **적합**: 그래픽 편집(Photoshop), 벡터 편집, UI 디자인 도구
+- **핵심 화면**: 캔버스, 레이어 패널, 속성 패널, 내보내기
+
+### desktop_creative_workspace — 멀티 패널 워크스페이스 (Multi-Panel Workspace)
+
+```
+┌─────────────────────────────────────┐
+│ [Menu] File Edit View Layout        │
+├──────┬──────────────┬───────────────┤
+│      │              │  Inspector    │
+│ Nav  │   Editor     │  ──────────── │
+│ /    │   / Preview  │  Properties   │
+│ Files│              │  Layers       │
+│      │              │  Components   │
+│      ├──────────────┤               │
+│      │  Terminal /  │               │
+│      │  Console     │               │
+├──────┴──────────────┴───────────────┤
+│ [Status Bar]                        │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 도킹/언도킹 가능 패널, 레이아웃 저장/불러오기
+- **적합**: IDE, 3D 모델링(Blender), CAD, 게임 엔진 에디터
+- **핵심 화면**: 에디터, 인스펙터, 콘솔, 파일 탐색, 프리뷰
+
+### desktop_creative_timeline — 타임라인 + 프리뷰 (Timeline & Preview)
+
+```
+┌─────────────────────────────────────┐
+│ [Menu] File Edit Effects Render     │
+├─────────────────────────────────────┤
+│ ┌────────────────────┐  ┌────────┐  │
+│ │                    │  │ Assets │  │
+│ │   Preview Player   │  │ 📁 📄  │  │
+│ │   ▶ 00:01:23       │  │ 🎵 🎬  │  │
+│ └────────────────────┘  └────────┘  │
+├─────────────────────────────────────┤
+│ ━━━━●━━━━━━━━━━━━━━━━━━ Timeline   │
+│ [V1][Clip A ][  Clip B  ][ C ]     │
+│ [A1][  Audio Track 1    ][  2 ]    │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 상단 프리뷰 + 하단 타임라인, 멀티 트랙
+- **적합**: 영상 편집, 음악 DAW, 애니메이션 도구, 팟캐스트 편집
+- **핵심 화면**: 프리뷰, 타임라인, 에셋 브라우저, 이펙트, 내보내기
+
+---
+

package/skills/web-design/claude-code/defs/desktop-layouts/04-communication.md

@@ -0,0 +1,71 @@
+# 4. 커뮤니케이션 (`communication`)
+
+
+### desktop_comm_chat — 채팅 + 사이드바 (Chat Sidebar)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├──────────┬──────────────────────────┤
+│ Channels │  #general               │
+│ ──────── │  ┌──────────────────┐   │
+│ #general │  │ User1: Hello     │   │
+│ #random  │  │ User2: Hi!       │   │
+│ #dev     │  │ ...              │   │
+│          │  └──────────────────┘   │
+│ Direct   │  ┌──────────────────┐   │
+│ ──────── │  │ 메시지 입력...     │   │
+│ 👤 User1 │  └──────────────────┘   │
+└──────────┴──────────────────────────┘
+```
+
+- **특징**: 좌측 채널/DM 목록 + 우측 대화, Slack/Discord 스타일
+- **적합**: 팀 메신저, 슬랙 클론, 디스코드 클론, 고객 채팅
+- **핵심 화면**: 채널 목록, 대화 뷰, 쓰레드, 검색, 설정
+
+### desktop_comm_inbox — 인박스 3패널 (Inbox / Email)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├──────┬───────────┬──────────────────┤
+│      │ Inbox     │  From: User1    │
+│ 📥   │ ────────  │  Subject: ...   │
+│ 📤   │ ✉ Mail 1 │  ──────────────  │
+│ 📁   │ ✉ Mail 2 │                  │
+│ 🗑   │ ✉ Mail 3 │  Email body      │
+│      │ ✉ Mail 4 │  content here    │
+│      │           │                  │
+│      │           │  [Reply] [Fwd]   │
+└──────┴───────────┴──────────────────┘
+```
+
+- **특징**: 3패널 (폴더 / 목록 / 본문), Outlook/Thunderbird 스타일
+- **적합**: 이메일 클라이언트, 고객 지원 티켓, 알림 센터
+- **핵심 화면**: 폴더 트리, 메일 목록, 메일 본문, 작성, 설정
+
+### desktop_comm_conference — 화상회의 (Video Conference)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  Meeting Room           │
+├─────────────────────────────────────┤
+│ ┌──────────┐ ┌──────────┐          │
+│ │  📹      │ │  📹      │          │
+│ │ User 1   │ │ User 2   │          │
+│ └──────────┘ └──────────┘          │
+│ ┌──────────┐ ┌──────────┐          │
+│ │  📹      │ │  📹      │          │
+│ │ User 3   │ │ User 4   │          │
+│ └──────────┘ └──────────┘          │
+├─────────────────────────────────────┤
+│ [🎤 Mute] [📹 Video] [📤 Share] [❌]│
+└─────────────────────────────────────┘
+```
+
+- **특징**: 비디오 그리드 + 하단 컨트롤 바, 화면 공유
+- **적합**: 화상회의, 웨비나, 온라인 교육, 원격 진료
+- **핵심 화면**: 미팅 룸, 대기실, 채팅 사이드, 화면 공유, 설정
+
+---
+

package/skills/web-design/claude-code/defs/desktop-layouts/05-game.md

@@ -0,0 +1,73 @@
+# 5. 게임 (`game`)
+
+
+### desktop_game_fullscreen — 풀스크린 (Fullscreen Immersive)
+
+```
+┌─────────────────────────────────────┐
+│                                     │
+│                                     │
+│        Game Viewport                │
+│        (풀스크린 렌더링)              │
+│                                     │
+│  [HP ████████]        [Mini Map]    │
+│  [MP ████░░░░]           ┌───┐     │
+│                          │ ● │     │
+│                          └───┘     │
+│                                     │
+└─────────────────────────────────────┘
+  HUD Overlay (투명 오버레이)
+```
+
+- **특징**: 풀스크린 게임 뷰포트 + HUD 오버레이
+- **적합**: 액션, RPG, FPS, 시뮬레이션
+- **핵심 화면**: 게임 뷰포트, HUD, 메뉴(오버레이), 인벤토리
+
+### desktop_game_lobby — 로비 + 룸 (Lobby & Room)
+
+```
+┌─────────────────────────────────────┐
+│ [Logo]  [Home] [Shop] [Rank] [⚙️]   │
+├─────────────────────────────────────┤
+│  ┌──────────────────────────────┐   │
+│  │      Featured Banner         │   │
+│  └──────────────────────────────┘   │
+│  ┌────────┐ ┌────────┐ ┌────────┐  │
+│  │ Room 1 │ │ Room 2 │ │ Room 3 │  │
+│  │ 3/4 👥 │ │ 1/4 👥 │ │ 2/4 👥 │  │
+│  │ [참여]  │ │ [참여]  │ │ [참여]  │  │
+│  └────────┘ └────────┘ └────────┘  │
+├─────────────────────────────────────┤
+│ [Quick Play] [Create Room]          │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 로비 메인 + 방 목록/생성, 소셜 게임 구조
+- **적합**: 대전 게임, 보드 게임, 카드 게임, 소셜 게임
+- **핵심 화면**: 로비, 방 목록, 대기실, 게임, 결과, 상점
+
+### desktop_game_menu_hub — 메뉴 허브 (Menu Hub)
+
+```
+┌─────────────────────────────────────┐
+│                                     │
+│           🎮 GAME TITLE             │
+│                                     │
+│         ┌─────────────────┐         │
+│         │   ▶ New Game    │         │
+│         │   ▶ Continue    │         │
+│         │   ▶ Settings    │         │
+│         │   ▶ Credits     │         │
+│         │   ▶ Exit        │         │
+│         └─────────────────┘         │
+│                                     │
+│          v1.0.0  © 2026             │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 중앙 집중 메뉴 → 각 게임 모드 분기
+- **적합**: 싱글 플레이어, 퍼즐, 캐주얼, 교육용 게임
+- **핵심 화면**: 메인 메뉴, 게임 화면, 일시정지, 설정, 크레딧
+
+---
+

package/skills/web-design/claude-code/defs/desktop-layouts/06-business.md

@@ -0,0 +1,74 @@
+# 6. 비즈니스 (`business`)
+
+
+### desktop_biz_dashboard — 대시보드 + 사이드바 (Dashboard Sidebar)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├──────┬──────────────────────────────┤
+│      │ [탭1] [탭2] [탭3]    🔍 [⚙️] │
+│ 📊   ├──────────────────────────────┤
+│ 👥   │ ┌──────┐ ┌──────┐ ┌──────┐  │
+│ 📋   │ │ KPI  │ │ KPI  │ │ KPI  │  │
+│ 💰   │ └──────┘ └──────┘ └──────┘  │
+│ 📈   │ ┌──────────────┐ ┌────────┐ │
+│ ⚙️   │ │   Chart      │ │ Tasks  │ │
+│      │ └──────────────┘ └────────┘ │
+└──────┴──────────────────────────────┘
+```
+
+- **특징**: 좌측 네비 사이드바 + 우측 대시보드, ERP/CRM 스타일
+- **적합**: ERP, CRM, 회계 소프트웨어, HR 관리
+- **핵심 화면**: 대시보드, 고객/직원 관리, 리포트, 설정
+
+### desktop_biz_form — 폼 중심 (Form-Centric)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├─────────────────────────────────────┤
+│ [← Back]  Invoice #2024-001  [Save] │
+├─────────────────────────────────────┤
+│  Customer: [____________]           │
+│  Date:     [____/____/____]         │
+│  ┌─────────────────────────────┐    │
+│  │ Item    │ Qty │ Price │ Sum │    │
+│  │─────────┼─────┼───────┼─────│    │
+│  │ ...     │ ... │ ...   │ ... │    │
+│  └─────────────────────────────┘    │
+│  Total: $1,234.00                   │
+│  [Print] [Export PDF] [Send Email]  │
+└─────────────────────────────────────┘
+```
+
+- **특징**: 폼 입력 + 테이블 중심, 문서 작성 특화
+- **적합**: 인보이스, 견적서, 계약서 관리, 세금 계산
+- **핵심 화면**: 문서 목록, 문서 편집, 미리보기, 인쇄
+
+### desktop_biz_workflow — 워크플로우 보드 (Workflow Board)
+
+```
+┌─────────────────────────────────────┐
+│ [Title Bar]  ─  □  ✕                │
+├─────────────────────────────────────┤
+│ [Project ▼] [+ Task] [Filter] [🔍] │
+├──────────┬──────────┬───────────────┤
+│ To Do    │ In Prog  │ Done          │
+│ ──────── │ ──────── │ ────────      │
+│ ┌──────┐ │ ┌──────┐ │ ┌──────┐     │
+│ │Task 1│ │ │Task 3│ │ │Task 5│     │
+│ │      │ │ │      │ │ │      │     │
+│ └──────┘ │ └──────┘ │ └──────┘     │
+│ ┌──────┐ │ ┌──────┐ │              │
+│ │Task 2│ │ │Task 4│ │              │
+│ └──────┘ │ └──────┘ │              │
+└──────────┴──────────┴───────────────┘
+```
+
+- **특징**: 칸반 보드 + 드래그 앤 드롭, 프로젝트 관리
+- **적합**: 프로젝트 관리, 결재 시스템, 파이프라인, CMS
+- **핵심 화면**: 보드 뷰, 리스트 뷰, 태스크 상세, 타임라인
+
+---
+

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

@@ -0,0 +1,49 @@
+# PC앱 레이아웃 패턴 정의
+
+> 참조 위치: `stages/stage2-desktop-layout.md`에서 분기 사용
+> app_type별 추천 레이아웃 패턴 정의 (Electron / Tauri / Native)
+> Dependencies: 없음 (독립 참조 데이터)
+
+---
+
+## 1. 유틸리티/도구 (`utility`)
+
+> 상세: `defs/desktop-layouts/01-utility.md` 참조
+
+┌─────────────────────────────────┐
+## 2. 데이터 관리 (`data`)
+
+> 상세: `defs/desktop-layouts/02-data.md` 참조
+
+┌─────────────────────────────────────┐
+## 3. 크리에이티브 (`creative`)
+
+> 상세: `defs/desktop-layouts/03-creative.md` 참조
+
+┌─────────────────────────────────────┐
+## 4. 커뮤니케이션 (`communication`)
+
+> 상세: `defs/desktop-layouts/04-communication.md` 참조
+
+┌─────────────────────────────────────┐
+## 5. 게임 (`game`)
+
+> 상세: `defs/desktop-layouts/05-game.md` 참조
+
+┌─────────────────────────────────────┐
+## 6. 비즈니스 (`business`)
+
+> 상세: `defs/desktop-layouts/06-business.md` 참조
+
+┌─────────────────────────────────────┐
+## 핵심 화면 구성 참조
+
+| 앱 유형 | 공통 필수 화면 |
+|---------|---------------|
+| 모든 유형 | 설정/환경설정, About |
+| utility | 메인 기능, 설정 |
+| data | 데이터 뷰, 편집, 가져오기/내보내기 |
+| creative | 캔버스/에디터, 에셋, 내보내기 |
+| communication | 대화 뷰, 연락처, 알림 |
+| game | 게임 뷰, 메뉴, 설정 |
+| business | 대시보드, 폼, 리포트 |

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

@@ -0,0 +1,56 @@
+# 1. 유틸리티/도구 (`utility`)
+
+
+### DU-M1. Snappy & Responsive (빠른 반응)
+
+```
+기법: 즉각적 피드백, 최소 딜레이
+포함: instant-toggle | button-press | input-focus | tooltip-fade
+
+  [Button] ──click→ active state (50ms, no bounce)
+  [Toggle] ──click→ ●━━━ (150ms, ease-out)
+  [Input]  ──focus→ border highlight (100ms)
+
+강도: subtle
+적합: 시스템 도구, 설정 앱, 파일 유틸리티
+특징: 반복 조작에 적합한 빠른 응답
+```
+
+### DU-M2. Contextual Feedback (컨텍스트 피드백)
+
+```
+기법: 작업 컨텍스트에 따른 시각 피드백
+포함: progress-bar | status-indicator | drag-feedback | undo-toast
+
+  Processing:
+  ████████████░░░░░░  67% (smooth fill)
+
+  Drag file:
+  [📄] ──drag→ [  drop zone  ] (highlight border)
+
+  Action:
+  ┌──────────────────┐
+  │ ✅ 작업 완료      │ ← slide-in toast (300ms)
+  └──────────────────┘
+
+강도: subtle ~ moderate
+적합: 파일 관리, 변환 도구, 배치 처리
+```
+
+### DU-M3. Minimal Static (미니멀 정적)
+
+```
+기법: 모션 최소화, 즉시 상태 변경
+포함: instant-switch | static-feedback | color-only
+
+  상태 변경: 즉시 전환 (0ms)
+  피드백: 색상 변경만 (background/border)
+  포커스: outline만 표시
+
+강도: none ~ subtle
+적합: 시스템 모니터링, CLI 래퍼, 개발 도구
+특징: 리소스 최소화, 고성능 우선
+```
+
+---
+

package/skills/web-design/claude-code/defs/desktop-motions/02-data.md

@@ -0,0 +1,60 @@
+# 2. 데이터 관리 (`data`)
+
+
+### DD-M1. Table & List Animation (테이블 리스트)
+
+```
+기법: 테이블 행/열 추가·삭제·정렬 애니메이션
+포함: row-insert | row-delete | sort-reorder | filter-fade
+
+  Add row:
+  [Row 1]
+  [Row 2]
+  [→ New ] ← slide-down + fade-in (200ms)
+  [Row 3]
+
+  Delete row:
+  [Row 2] ← slide-left + fade-out → collapse (300ms)
+
+  Sort:
+  [Row 3] ↕ [Row 1] ← smooth reorder (400ms)
+
+강도: subtle ~ moderate
+적합: 데이터베이스 뷰어, 스프레드시트
+```
+
+### DD-M2. Chart & Visualization (차트 시각화)
+
+```
+기법: 차트 데이터 전환, 실시간 업데이트 모션
+포함: chart-morph | data-count-up | realtime-pulse | graph-draw
+
+  Bar Chart:
+  ▐▐ ← grow-up (stagger, 50ms each)
+  ▐▐▐▐
+  ▐▐▐▐▐▐▐
+
+  Realtime:
+  ──╱╲──╱╲──● (new point: slide-left + fade-in)
+
+강도: moderate
+적합: 분석 도구, 모니터링, 리포트
+```
+
+### DD-M3. CRUD Feedback (CRUD 피드백)
+
+```
+기법: 생성/읽기/수정/삭제 작업별 시각 피드백
+포함: create-flash | update-highlight | delete-strike | save-check
+
+  Create: 새 항목 ← green flash (background 300ms)
+  Update: 수정 항목 ← yellow highlight pulse (500ms)
+  Delete: 삭제 항목 ← strikethrough + fade-out (400ms)
+  Save:   ✅ ← check icon scale-in (200ms)
+
+강도: subtle
+적합: CRUD 앱, 재고 관리, 고객 관리
+```
+
+---
+

package/skills/web-design/claude-code/defs/desktop-motions/03-creative.md

@@ -0,0 +1,60 @@
+# 3. 크리에이티브 (`creative`)
+
+
+### DC-M1. Canvas & Workspace (캔버스 워크스페이스)
+
+```
+기법: 캔버스 줌/팬, 레이어 전환, 도구 선택 피드백
+포함: canvas-zoom | layer-slide | tool-select | undo-redo-flash
+
+  Zoom: scroll → smooth zoom (transform: scale)
+  Pan: middle-click drag → smooth translate
+  Layer: [Layer 1] ↔ [Layer 2] slide transition
+
+  Tool select:
+  [🖌️] ──click→ active indicator (border + scale 1.05)
+
+강도: moderate
+적합: 그래픽 편집, 3D 모델링, CAD
+특징: 60fps 유지 필수, GPU 가속 활용
+```
+
+### DC-M2. Timeline & Preview (타임라인 미리보기)
+
+```
+기법: 타임라인 스크럽, 실시간 프리뷰 전환
+포함: scrub-timeline | preview-crossfade | playback-morph | keyframe-snap
+
+  Timeline:
+  ━━━━━━━━●━━━━━━━━━━━ scrub (smooth follow)
+  [Clip1][Clip2][Clip3]
+
+  ▶ ──click→ ▮▮ (morph, 200ms)
+
+  Preview: crossfade between states (300ms)
+
+강도: moderate
+적합: 영상 편집, 음악 DAW, 애니메이션
+```
+
+### DC-M3. Panel Dock & Float (패널 도킹)
+
+```
+기법: 패널 도킹/언도킹, 플로팅 윈도우 전환
+포함: dock-snap | float-shadow | panel-resize | tab-drag
+
+  Undock:
+  [Panel] ──drag out→ [floating] (shadow appear + scale 0.98→1.0)
+
+  Dock:
+  [floating] ──drag to edge→ [snap] (magnetic snap + resize)
+
+  Tab reorder:
+  [Tab A][Tab B] ──drag→ [Tab B][Tab A] (smooth swap)
+
+강도: moderate
+적합: IDE 스타일, 멀티 패널 크리에이티브 도구
+```
+
+---
+

package/skills/web-design/claude-code/defs/desktop-motions/04-communication.md

@@ -0,0 +1,57 @@
+# 4. 커뮤니케이션 (`communication`)
+
+
+### DCO-M1. Message & Chat (메시지 채팅)
+
+```
+기법: 메시지 등장, 타이핑 상태, 읽음 표시
+포함: message-slide | typing-indicator | read-receipt | emoji-reaction
+
+  New message:
+  ┌──────────────┐
+  │ 안녕하세요!    │ ← slide-up + fade (250ms)
+  └──────────────┘
+
+  Typing: ● ● ● (bounce loop, 600ms)
+  Read: ✓✓ (blue transition, 200ms)
+
+강도: moderate
+적합: 메신저, 팀 채팅, 이메일 클라이언트
+```
+
+### DCO-M2. Notification & Alert (알림)
+
+```
+기법: 시스템 알림, 배지 카운트, 알림 센터
+포함: notification-slide | badge-bounce | alert-shake | sound-wave
+
+  System notification:
+  ┌────────────────────┐
+  │ 📩 새 메시지 (3)    │ ← slide-in from right (400ms)
+  └────────────────────┘
+
+  Badge: [3] → [4] (scale bounce, 300ms)
+  Urgent: [!] shake (translateX ±3px, 200ms)
+
+강도: moderate
+적합: 이메일, 슬랙 스타일 앱
+```
+
+### DCO-M3. Status & Presence (상태 표시)
+
+```
+기법: 온라인/오프라인, 상태 전환 애니메이션
+포함: presence-dot | status-morph | avatar-ring | activity-pulse
+
+  Online:  ●(green)  ← fade-in (200ms)
+  Away:    ●(yellow) ← color morph (300ms)
+  Offline: ○(gray)   ← color morph (300ms)
+
+  Active call: ring pulse animation (infinite, 2s)
+
+강도: subtle
+적합: 화상회의, 협업 도구
+```
+
+---
+