From 3ef35ec099814b12a9ccf98347c81d825a01e8bb Mon Sep 17 00:00:00 2001
From: hiondal <hiondal@gmail.com>
Date: Mon, 20 Oct 2025 13:51:25 +0900
Subject: [PATCH] add gappa's

---
 design-gappa/style-guide.md                   | 1184 +++++++++++++++++
 design-gappa/uiux/prototype/01-로그인.html    |  351 +++++
 design-gappa/uiux/prototype/02-대시보드.html  |  687 ++++++++++
 design-gappa/uiux/prototype/03-회의예약.html  |  133 ++
 .../uiux/prototype/04-템플릿선택.html         |  235 ++++
 design-gappa/uiux/prototype/05-회의진행.html  |  631 +++++++++
 design-gappa/uiux/prototype/06-검증완료.html  |  183 +++
 design-gappa/uiux/prototype/07-회의종료.html  |  112 ++
 design-gappa/uiux/prototype/08-최종확정.html  |  303 +++++
 .../uiux/prototype/09-회의록공유.html         |  316 +++++
 design-gappa/uiux/prototype/10-Todo관리.html  |  466 +++++++
 .../uiux/prototype/11-회의록대시보드.html     | 1021 ++++++++++++++
 design-gappa/uiux/prototype/common.css        |  780 +++++++++++
 design-gappa/uiux/prototype/common.js         |  556 ++++++++
 design-gappa/uiux/prototype/test-report.md    |  212 +++
 design-gappa/userstory.md                     | 1007 ++++++++++++++
 16 files changed, 8177 insertions(+)
 create mode 100644 design-gappa/style-guide.md
 create mode 100644 design-gappa/uiux/prototype/01-로그인.html
 create mode 100644 design-gappa/uiux/prototype/02-대시보드.html
 create mode 100644 design-gappa/uiux/prototype/03-회의예약.html
 create mode 100644 design-gappa/uiux/prototype/04-템플릿선택.html
 create mode 100644 design-gappa/uiux/prototype/05-회의진행.html
 create mode 100644 design-gappa/uiux/prototype/06-검증완료.html
 create mode 100644 design-gappa/uiux/prototype/07-회의종료.html
 create mode 100644 design-gappa/uiux/prototype/08-최종확정.html
 create mode 100644 design-gappa/uiux/prototype/09-회의록공유.html
 create mode 100644 design-gappa/uiux/prototype/10-Todo관리.html
 create mode 100644 design-gappa/uiux/prototype/11-회의록대시보드.html
 create mode 100644 design-gappa/uiux/prototype/common.css
 create mode 100644 design-gappa/uiux/prototype/common.js
 create mode 100644 design-gappa/uiux/prototype/test-report.md
 create mode 100644 design-gappa/userstory.md

diff --git a/design-gappa/style-guide.md b/design-gappa/style-guide.md
new file mode 100644
index 0000000..51b0e6c
--- /dev/null
+++ b/design-gappa/style-guide.md
@@ -0,0 +1,1184 @@
+# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드
+
+**버전**: 1.0
+**작성일**: 2025-10-15
+**작성자**: 유진 (Frontend Developer)
+**레퍼런스**: 클로바노트 (Naver)
+  
+---
+
+## 목차
+
+1. [브랜드 아이덴티티](#1-브랜드-아이덴티티)
+2. [디자인 원칙](#2-디자인-원칙)
+3. [컬러 시스템](#3-컬러-시스템)
+4. [타이포그래피](#4-타이포그래피)
+5. [간격 시스템](#5-간격-시스템)
+6. [컴포넌트 스타일](#6-컴포넌트-스타일)
+7. [반응형 브레이크포인트](#7-반응형-브레이크포인트)
+8. [회의록 서비스 특화 컴포넌트](#8-회의록-서비스-특화-컴포넌트)
+9. [인터랙션 패턴](#9-인터랙션-패턴)
+10. [변경 이력](#10-변경-이력)
+
+---
+
+## 1. 브랜드 아이덴티티
+
+### 1.1 디자인 컨셉
+
+**"Smart Collaboration"** - 스마트한 협업 도구
+
+회의록 작성 및 공유 서비스는 AI 기반의 자동화와 실시간 협업을 통해 업무 효율을 극대화하는 스마트한 협업 플랫폼입니다.
+
+### 1.2 핵심 가치
+
+| 가치 | 설명 | 디자인 반영 |
+|------|------|------------|
+| **정확성** | 누락 없이 정확하게 기록 | 명확한 시각적 위계, 검증 상태 표시 |
+| **효율성** | AI 자동화로 작성 부담 감소 | AI 제안 영역, 자동 완성 패턴 |
+| **협업** | 실시간 동기화 및 공유 | 협업 인디케이터, 커서 표시 |
+| **접근성** | 업무 지식 없이도 사용 가능 | 전문용어 설명, 친근한 일러스트레이션 |
+
+### 1.3 브랜드 성격
+
+- **전문적이면서도 친근한**: 업무용 도구이지만 사용하기 쉬운
+- **신뢰감 + 혁신성**: AI 기능의 정확성과 미래지향적 이미지
+- **협업 중심**: 개인이 아닌 팀의 성공을 지원
+
+### 1.4 비주얼 무드
+
+- **색상**: 밝고 활기찬 청록색 (혁신, 성장, 활력)
+- **형태**: 둥근 모서리, 부드러운 곡선 (친근함, 접근성)
+- **일러스트레이션**: 캐릭터 기반, 간결하고 현대적 (클로바노트 스타일 참조)
+
+---
+
+## 2. 디자인 원칙
+
+### 2.1 명확성 (Clarity)
+
+**사용자가 무엇을 해야 하는지 즉시 이해 가능해야 합니다.**
+
+- 명확한 시각적 위계 유지
+- 혼란스러운 요소 최소화
+- 액션 버튼의 목적을 분명히 표현
+- 에러 메시지는 문제와 해결 방법을 함께 제시
+
+**예시**:
+- ✅ "회의록을 저장하지 못했습니다. 네트워크 연결을 확인하고 다시 시도해주세요."
+- ❌ "오류가 발생했습니다."
+
+### 2.2 효율성 (Efficiency)
+
+**최소한의 클릭으로 목표를 달성할 수 있어야 합니다.**
+
+- 자주 사용하는 기능은 빠른 접근 제공 (FAB, 단축키)
+- 불필요한 단계 제거
+- 자동 완성 및 제안 기능 활용
+- 키보드 단축키 지원
+
+**예시**:
+- Ctrl+N: 새 회의 예약
+- Ctrl+S: 회의록 저장
+- Ctrl+F: 검색
+
+### 2.3 일관성 (Consistency)
+
+**동일한 패턴과 예측 가능한 동작을 유지해야 합니다.**
+
+- 동일한 기능은 동일한 아이콘과 레이블 사용
+- 색상, 타이포그래피, 간격의 일관된 적용
+- 네비게이션 구조 일관성 유지
+- 브랜드 아이덴티티 유지
+
+### 2.4 피드백 (Feedback)
+
+**모든 액션에 즉각적이고 명확한 피드백을 제공해야 합니다.**
+
+- 버튼 클릭 시 시각적 피드백 (호버, 액티브 상태)
+- 로딩 상태 명확히 표시 (스켈레톤 UI, 스피너)
+- 성공/실패 토스트 알림
+- 실시간 저장 상태 표시 ("저장됨", "저장 중...")
+
+### 2.5 접근성 (Accessibility)
+
+**모든 사용자가 서비스를 쉽게 이용할 수 있어야 합니다.**
+
+- WCAG 2.1 Level AA 준수
+- 키보드 네비게이션 지원
+- 스크린 리더 호환
+- 충분한 색상 대비 (4.5:1 이상)
+- 터치 영역 최소 44x44px
+
+### 2.6 협업 중심 (Collaboration-First)
+
+**실시간 협업이 핵심 경험이 되어야 합니다.**
+
+- 다른 사용자의 활동을 명확히 표시 (커서, 아바타)
+- 실시간 변경 사항 즉시 반영
+- 충돌 방지 및 해결 메커니즘
+- 버전 관리 및 변경 이력 추적
+
+---
+
+## 3. 컬러 시스템
+
+### 3.1 Primary Color (주요 액션, 브랜드)
+
+**Teal/Emerald** - 혁신, 성장, 활력을 상징
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Primary-Light | `#4DFFDB` | rgb(77, 255, 219) | 호버, 비활성화 상태 |
+| **Primary-Main** | **`#00D9B1`** | **rgb(0, 217, 177)** | **주요 버튼, 링크, 강조** |
+| Primary-Dark | `#00A88A` | rgb(0, 168, 138) | 눌림 상태, 강조 |
+
+**사용 예시**:
+- Primary 버튼 배경
+- 링크 텍스트
+- 체크박스, 라디오 버튼 선택 상태
+- 진행률 바
+- FAB (Floating Action Button)
+
+### 3.2 Secondary Color (보조, 협업 강조)
+
+**Indigo** - 협업, 신뢰, 전문성을 상징
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Secondary-Light | `#A5B4FC` | rgb(165, 180, 252) | 배경, 비활성화 |
+| **Secondary-Main** | **`#6366F1`** | **rgb(99, 102, 241)** | **보조 버튼, 협업 요소** |
+| Secondary-Dark | `#4F46E5` | rgb(79, 70, 229) | 강조 |
+
+**사용 예시**:
+- 협업 인디케이터 (다른 사용자 커서)
+- 보조 버튼
+- 배지 (검증 중 상태)
+- 알림 아이콘
+
+### 3.3 Semantic Colors (상태 표현)
+
+#### Success (성공, 완료)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Success-Light | `#6EE7B7` | rgb(110, 231, 183) | 배경 |
+| **Success-Main** | **`#10B981`** | **rgb(16, 185, 129)** | **완료, 검증 완료** |
+| Success-Dark | `#059669` | rgb(5, 150, 105) | 강조 |
+
+#### Warning (경고, 주의)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Warning-Light | `#FCD34D` | rgb(252, 211, 77) | 배경 |
+| **Warning-Main** | **`#F59E0B`** | **rgb(245, 158, 11)** | **경고, 작성 중** |
+| Warning-Dark | `#D97706` | rgb(217, 119, 6) | 강조 |
+
+#### Error (오류, 실패)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Error-Light | `#FCA5A5` | rgb(252, 165, 165) | 배경 |
+| **Error-Main** | **`#EF4444`** | **rgb(239, 68, 68)** | **오류, 긴급** |
+| Error-Dark | `#DC2626` | rgb(220, 38, 38) | 강조 |
+
+#### Info (정보, 알림)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Info-Light | `#93C5FD` | rgb(147, 197, 253) | 배경 |
+| **Info-Main** | **`#3B82F6`** | **rgb(59, 130, 246)** | **정보, 알림** |
+| Info-Dark | `#2563EB` | rgb(37, 99, 235) | 강조 |
+
+### 3.4 Neutral Colors (배경, 텍스트, 테두리)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Gray-50 | `#F9FAFB` | rgb(249, 250, 251) | 페이지 배경 |
+| Gray-100 | `#F3F4F6` | rgb(243, 244, 246) | 카드 배경, 호버 |
+| Gray-200 | `#E5E7EB` | rgb(229, 231, 235) | 테두리 |
+| Gray-300 | `#D1D5DB` | rgb(209, 213, 219) | 비활성화 테두리 |
+| Gray-400 | `#9CA3AF` | rgb(156, 163, 175) | 플레이스홀더 |
+| Gray-500 | `#6B7280` | rgb(107, 114, 128) | 보조 텍스트 |
+| Gray-600 | `#4B5563` | rgb(75, 85, 99) | 본문 텍스트 |
+| Gray-700 | `#374151` | rgb(55, 65, 81) | 제목 |
+| Gray-800 | `#1F2937` | rgb(31, 41, 55) | 강조 제목 |
+| Gray-900 | `#111827` | rgb(17, 24, 39) | 최고 강조 |
+| White | `#FFFFFF` | rgb(255, 255, 255) | 카드, 모달 배경 |
+| Black | `#000000` | rgb(0, 0, 0) | 절대 검정 (거의 사용 안 함) |
+
+### 3.5 다크모드 (선택적)
+
+다크모드를 지원하는 경우 다음 색상을 사용합니다.
+
+| 요소 | 라이트모드 | 다크모드 |
+|------|-----------|---------|
+| 페이지 배경 | Gray-50 | Gray-900 |
+| 카드 배경 | White | Gray-800 |
+| 본문 텍스트 | Gray-600 | Gray-100 |
+| 제목 | Gray-900 | Gray-50 |
+| 테두리 | Gray-200 | Gray-700 |
+| Primary | #00D9B1 | #22D3B0 (밝기 조정) |
+
+### 3.6 색상 사용 가이드
+
+#### 텍스트 색상
+
+- **제목**: Gray-900 (라이트), Gray-50 (다크)
+- **본문**: Gray-600 (라이트), Gray-100 (다크)
+- **보조 텍스트**: Gray-500
+- **플레이스홀더**: Gray-400
+- **링크**: Primary-Main (호버 시 Primary-Dark)
+- **에러 텍스트**: Error-Main
+
+#### 배경 색상
+
+- **페이지**: Gray-50 (라이트), Gray-900 (다크)
+- **카드**: White (라이트), Gray-800 (다크)
+- **호버**: Gray-100
+- **선택**: Primary-Light (투명도 20%)
+
+#### 테두리 색상
+
+- **기본**: Gray-200
+- **호버**: Gray-300
+- **포커스**: Primary-Main (2px)
+- **에러**: Error-Main
+
+---
+
+## 4. 타이포그래피
+
+### 4.1 폰트 패밀리
+
+#### Primary Font (본문 및 UI)
+
+**한글**: Pretendard
+- 깔끔한 고딕 계열
+- 뛰어난 가독성
+- 다양한 굵기 지원 (100~900)
+- 시스템 폰트와 유사한 렌더링
+
+**영문/숫자**: Inter
+- 웹 환경 최적화
+- 명확한 문자 구분 (l, I, 1 등)
+- Pretendard와 조화로운 조합
+
+**폰트 스택**:
+```css
+font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
+```
+
+#### Monospace Font (코드, 데이터)
+
+**Fira Code, Consolas**
+- 코드 스니펫
+- API 응답
+- 로그, 에러 메시지
+
+**폰트 스택**:
+```css
+font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+```
+
+### 4.2 폰트 크기 스케일
+
+**1.25 배율 기반**
+
+| 레벨 | 이름 | 크기 (px / rem) | 사용처 |
+|------|------|----------------|--------|
+| 1 | Display | 48px / 3rem | 랜딩 페이지 메인 제목 |
+| 2 | H1 | 36px / 2.25rem | 페이지 제목 |
+| 3 | H2 | 30px / 1.875rem | 주요 섹션 제목 |
+| 4 | H3 | 24px / 1.5rem | 서브 섹션 제목 |
+| 5 | H4 | 20px / 1.25rem | 카드 제목, 작은 섹션 |
+| 6 | Body-Large | 18px / 1.125rem | 강조 본문, 리드 텍스트 |
+| 7 | **Body** | **16px / 1rem** | **기본 본문 (기준점)** |
+| 8 | Body-Small | 14px / 0.875rem | 보조 정보, 캡션 |
+| 9 | Caption | 12px / 0.75rem | 작은 라벨, 타임스탬프 |
+
+### 4.3 폰트 굵기 (Font Weight)
+
+| 레벨 | 값 | 사용처 |
+|------|---|--------|
+| Light | 300 | 보조 정보, 긴 본문 (선택적) |
+| **Regular** | **400** | **기본 본문** |
+| Medium | 500 | 강조 본문, 버튼 텍스트 |
+| SemiBold | 600 | 제목 (H3, H4), 중요 정보 |
+| Bold | 700 | 큰 제목 (H1, H2), 최고 강조 |
+
+### 4.4 행간 (Line Height)
+
+| 이름 | 값 | 사용처 |
+|------|---|--------|
+| Tight | 1.25 | 큰 제목 (Display, H1, H2) |
+| **Normal** | **1.5** | **본문 텍스트 (기본)** |
+| Relaxed | 1.75 | 긴 본문, 읽기 편안함 필요 시 |
+
+### 4.5 자간 (Letter Spacing)
+
+| 이름 | 값 | 사용처 |
+|------|---|--------|
+| Tight | -0.02em | 큰 제목 (Display, H1) |
+| **Normal** | **0** | **본문 (기본)** |
+| Wide | 0.02em | 작은 캡션, 레이블 (대문자) |
+
+### 4.6 텍스트 스타일 예시
+
+#### Display
+```css
+font-size: 48px;
+font-weight: 700;
+line-height: 1.25;
+letter-spacing: -0.02em;
+```
+
+#### H1
+```css
+font-size: 36px;
+font-weight: 700;
+line-height: 1.25;
+letter-spacing: -0.02em;
+```
+
+#### H2
+```css
+font-size: 30px;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;
+```
+
+#### H3
+```css
+font-size: 24px;
+font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;
+```
+
+#### Body (기본)
+```css
+font-size: 16px;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;
+```
+
+#### Caption
+```css
+font-size: 12px;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0.02em;
+```
+
+---
+
+## 5. 간격 시스템
+
+### 5.1 기본 단위
+
+**8px 기반 시스템**
+
+모든 간격은 8의 배수를 사용하여 일관성과 시각적 리듬을 유지합니다.
+
+### 5.2 스케일
+
+| 레벨 | 값 (px / rem) | 사용처 |
+|------|--------------|--------|
+| 0 | 0px / 0 | 간격 없음 |
+| 1 | 4px / 0.25rem | 최소 간격 (아이콘-텍스트) |
+| 2 | 8px / 0.5rem | 작은 간격 (인라인 요소) |
+| 3 | 12px / 0.75rem | 밀접한 요소 (버튼 내부) |
+| **4** | **16px / 1rem** | **기본 간격** |
+| 5 | 20px / 1.25rem | 적당한 간격 |
+| 6 | 24px / 1.5rem | 컴포넌트 간 |
+| 8 | 32px / 2rem | 섹션 내부 |
+| 10 | 40px / 2.5rem | 섹션 간 |
+| 12 | 48px / 3rem | 큰 섹션 간 |
+| 16 | 64px / 4rem | 페이지 여백 |
+| 20 | 80px / 5rem | 대형 섹션 |
+
+### 5.3 컴포넌트별 간격
+
+#### 버튼
+- **패딩**: 12px (상하) × 24px (좌우) - 중형
+- **패딩 (소형)**: 8px (상하) × 16px (좌우)
+- **패딩 (대형)**: 16px (상하) × 32px (좌우)
+- **아이콘-텍스트 간격**: 8px
+
+#### 입력 필드
+- **패딩**: 12px (상하) × 16px (좌우)
+- **레이블-필드 간격**: 8px
+
+#### 카드
+- **패딩**: 24px
+- **카드 간 간격**: 16px (그리드), 24px (리스트)
+
+#### 모달
+- **패딩**: 32px
+- **헤더-본문 간격**: 24px
+- **본문-푸터 간격**: 32px
+
+#### 페이지 여백
+- **데스크탑**: 64px (좌우)
+- **태블릿**: 32px (좌우)
+- **모바일**: 24px (좌우)
+
+### 5.4 컨테이너 최대 너비
+
+| 크기 | 최대 너비 | 사용처 |
+|------|---------|--------|
+| Small | 640px | 폼, 로그인 화면 |
+| Medium | 768px | 템플릿 선택 |
+| Large | 1024px | 회의 예약 |
+| XLarge | 1280px | 대시보드 |
+| 2XLarge | 1536px | 회의 진행 (에디터) |
+| Full | 100% | 풀 레이아웃 |
+
+---
+
+## 6. 컴포넌트 스타일
+
+### 6.1 버튼 (Button)
+
+#### Primary Button (주요 액션)
+
+**스타일**:
+- 배경: Primary-Main (#00D9B1)
+- 텍스트: White
+- 패딩: 12px (상하) × 24px (좌우)
+- 테두리 반경: 8px
+- 폰트: Medium (500), 16px
+- 그림자: 없음 (기본), 0 2px 4px rgba(0, 0, 0, 0.1) (호버)
+
+**상태**:
+- **Hover**: 배경 Primary-Light + transform: translateY(-1px) + 그림자 증가
+- **Active**: 배경 Primary-Dark + transform: scale(0.98)
+- **Disabled**: 배경 Gray-300 + 텍스트 Gray-500 + 커서 not-allowed
+
+**코드 예시**:
+```css
+.btn-primary {
+  background-color: #00D9B1;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 16px;
+  transition: all 150ms ease-out;
+}
+
+.btn-primary:hover {
+  background-color: #4DFFDB;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:active {
+  background-color: #00A88A;
+  transform: scale(0.98);
+}
+
+.btn-primary:disabled {
+  background-color: #D1D5DB;
+  color: #6B7280;
+  cursor: not-allowed;
+}
+```
+
+#### Secondary Button (보조 액션)
+
+**스타일**:
+- 배경: Transparent
+- 텍스트: Primary-Main
+- 테두리: 1px solid Primary-Main
+- 패딩: 12px × 24px
+- 테두리 반경: 8px
+
+**상태**:
+- **Hover**: 배경 Primary-Main (투명도 10%)
+- **Active**: 배경 Primary-Main (투명도 20%)
+- **Disabled**: 테두리 Gray-300 + 텍스트 Gray-400
+
+#### Text Button (덜 중요한 액션)
+
+**스타일**:
+- 배경: Transparent
+- 텍스트: Gray-700
+- 패딩: 8px × 16px
+- 테두리 반경: 8px
+
+**상태**:
+- **Hover**: 배경 Gray-100
+- **Active**: 배경 Gray-200
+
+#### Icon Button
+
+**스타일**:
+- 크기: 40×40px (중형), 32×32px (소형), 48×48px (대형)
+- 테두리 반경: 50% (원형) 또는 8px (사각형)
+- 아이콘 크기: 20px (중형), 16px (소형), 24px (대형)
+- 배경: Transparent
+
+**상태**:
+- **Hover**: 배경 Gray-100
+- **Active**: 배경 Gray-200
+
+#### Floating Action Button (FAB)
+
+**스타일**:
+- 크기: 56×56px
+- 테두리 반경: 50% (완전 원형)
+- 배경: Primary-Main
+- 아이콘: White, 24px
+- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
+- 위치: 우측 하단 고정 (16px 여백)
+
+**상태**:
+- **Hover**: 그림자 0 6px 16px rgba(0, 0, 0, 0.2) + transform: translateY(-2px)
+- **Active**: transform: scale(0.95)
+
+### 6.2 입력 필드 (Input Field)
+
+#### Text Input
+
+**스타일**:
+- 높이: 48px
+- 패딩: 12px (상하) × 16px (좌우)
+- 테두리: 1px solid Gray-300
+- 테두리 반경: 8px
+- 배경: White
+- 폰트: Regular, 16px
+- 플레이스홀더: Gray-400
+
+**상태**:
+- **Focus**: 테두리 Primary-Main 2px + outline 4px Primary-Main (투명도 20%)
+- **Error**: 테두리 Error-Main + 하단 에러 메시지 (Error-Main, 14px)
+- **Disabled**: 배경 Gray-100 + 텍스트 Gray-400 + 커서 not-allowed
+- **Success**: 테두리 Success-Main (선택적)
+
+**코드 예시**:
+```css
+.input {
+  height: 48px;
+  padding: 12px 16px;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 150ms ease-out;
+}
+
+.input:focus {
+  border-color: #00D9B1;
+  border-width: 2px;
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+}
+
+.input.error {
+  border-color: #EF4444;
+}
+
+.input:disabled {
+  background-color: #F3F4F6;
+  color: #9CA3AF;
+  cursor: not-allowed;
+}
+```
+
+#### Textarea
+
+**스타일**:
+- 최소 높이: 120px
+- 패딩: 12px × 16px
+- 나머지는 Text Input과 동일
+- resize: vertical (세로 크기 조절 가능)
+
+#### Select / Dropdown
+
+**스타일**:
+- Input과 동일
+- 우측 아이콘: Chevron Down, 16px, Gray-500
+
+### 6.3 카드 (Card)
+
+**스타일**:
+- 배경: White
+- 테두리: 1px solid Gray-200 (선택적, 없을 수도 있음)
+- 테두리 반경: 12px
+- 패딩: 24px
+- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1) (기본)
+
+**상태 (인터랙티브 카드)**:
+- **Hover**: 그림자 0 4px 12px rgba(0, 0, 0, 0.15) + transform: translateY(-2px)
+- **Active**: 그림자 0 1px 2px rgba(0, 0, 0, 0.1) + transform: scale(0.99)
+
+**코드 예시**:
+```css
+.card {
+  background-color: white;
+  border: 1px solid #E5E7EB;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 200ms ease-out;
+}
+
+.card.interactive:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+```
+
+### 6.4 모달 (Modal)
+
+**스타일**:
+- 배경: White
+- 테두리 반경: 16px
+- 패딩: 32px
+- 최대 너비: 600px (중형), 800px (대형), 480px (소형)
+- 그림자: 0 20px 25px rgba(0, 0, 0, 0.15)
+
+**백드롭 (Backdrop)**:
+- 배경: rgba(0, 0, 0, 0.5)
+- 클릭 시 모달 닫기 (선택적)
+
+**애니메이션**:
+- 등장: Fade In (200ms) + Scale (0.95 → 1.0)
+- 사라짐: Fade Out (150ms) + Scale (1.0 → 0.95)
+
+### 6.5 토스트 알림 (Toast)
+
+**스타일**:
+- 배경: White
+- 테두리 반경: 8px
+- 패딩: 16px × 20px
+- 최대 너비: 400px
+- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
+- 위치: 우측 상단 (16px 여백)
+
+**타입별 색상**:
+- **Success**: 좌측 테두리 4px Success-Main + Success 아이콘
+- **Error**: 좌측 테두리 4px Error-Main + Error 아이콘
+- **Warning**: 좌측 테두리 4px Warning-Main + Warning 아이콘
+- **Info**: 좌측 테두리 4px Info-Main + Info 아이콘
+
+**동작**:
+- 자동 사라짐: 4초 후
+- 닫기 버튼: 우측 상단 X 아이콘
+- 애니메이션: 우측에서 슬라이드 인
+
+### 6.6 배지 (Badge)
+
+**스타일**:
+- 패딩: 4px (상하) × 12px (좌우)
+- 테두리 반경: 12px (완전 둥근 형태)
+- 폰트: Medium, 12px
+
+**타입별 색상**:
+- **Primary**: 배경 Primary-Light, 텍스트 Primary-Dark
+- **Success**: 배경 Success-Light, 텍스트 Success-Dark
+- **Warning**: 배경 Warning-Light, 텍스트 Warning-Dark
+- **Error**: 배경 Error-Light, 텍스트 Error-Dark
+- **Neutral**: 배경 Gray-200, 텍스트 Gray-700
+
+**사용 예시**:
+- 상태 표시: "작성 중", "검증 중", "확정됨"
+- 카운트: "3개의 알림", "5명 참석"
+
+---
+
+## 7. 반응형 브레이크포인트
+
+### 7.1 브레이크포인트 정의
+
+| 디바이스 | 범위 | 레이아웃 | 주요 조정 |
+|---------|------|---------|----------|
+| **Mobile** | 320px ~ 767px | 단일 컬럼 | 햄버거 메뉴, 하단 탭, 스택 레이아웃 |
+| **Tablet** | 768px ~ 1023px | 2단 레이아웃 | 토글 사이드바, 터치 최적화 |
+| **Desktop** | 1024px ~ 1439px | 3단 레이아웃 | 고정 사이드바, 키보드 단축키 |
+| **Large Desktop** | 1440px 이상 | 확장 레이아웃 | 더 넓은 중앙 패널, 4단 가능 |
+
+### 7.2 디바이스별 UI 조정
+
+#### Mobile (320px ~ 767px)
+
+**네비게이션**:
+- 햄버거 메뉴로 사이드바 숨김
+- 하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
+- 상단 헤더 고정
+
+**레이아웃**:
+- 1단 스택 레이아웃
+- 카드/위젯을 세로로 배치
+- 패딩 감소 (24px → 16px)
+
+**인터랙션**:
+- 최소 터치 영역: 44×44px
+- 버튼 크기 증가
+- 스와이프 제스처 지원
+
+**05-회의진행 화면**:
+- 탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
+- 툴바를 하단 고정 (터치 용이성)
+
+**09-Todo관리 화면**:
+- 칸반 보드 대신 리스트 뷰 권장
+- 상태 변경은 드롭다운으로
+
+#### Tablet (768px ~ 1023px)
+
+**네비게이션**:
+- 사이드바 토글 가능 (기본 숨김)
+- 상단 헤더에 메뉴 아이콘
+
+**레이아웃**:
+- 2단 그리드 레이아웃 (2×2 또는 2×3)
+- 적절한 여백 유지
+
+**05-회의진행 화면**:
+- 2단 레이아웃 (에디터 + AI 제안 패널)
+- 참석자 목록은 드로어로 표시
+
+**터치 최적화**:
+- 버튼 크기: 최소 44×44px
+- 간격: 최소 8px
+
+#### Desktop (1024px 이상)
+
+**네비게이션**:
+- 전체 사이드바 항상 표시
+- 호버 효과 및 툴팁
+
+**레이아웃**:
+- 3단 그리드 레이아웃 (3×2)
+- 더 많은 위젯 동시 표시
+
+**05-회의진행 화면**:
+- 3단 레이아웃 (참석자 + 에디터 + AI 제안)
+- 모든 패널 동시 표시
+
+**키보드 단축키**:
+- Ctrl+N: 새 회의
+- Ctrl+S: 저장
+- Ctrl+F: 검색
+- Ctrl+/: 단축키 가이드
+
+### 7.3 미디어 쿼리 예시
+
+```css
+/* Mobile First 접근 */
+.container {
+  padding: 16px;
+}
+
+/* Tablet */
+@media (min-width: 768px) {
+  .container {
+    padding: 32px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .container {
+    padding: 64px;
+  }
+}
+
+/* Large Desktop */
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1536px;
+    margin: 0 auto;
+  }
+}
+```
+
+---
+
+## 8. 회의록 서비스 특화 컴포넌트
+
+### 8.1 실시간 협업 인디케이터
+
+#### 사용자 커서
+
+**스타일**:
+- 사용자별 색상 코드:
+  - User 1: Primary-Main (#00D9B1)
+  - User 2: Secondary-Main (#6366F1)
+  - User 3: Warning-Main (#F59E0B)
+  - User 4: Info-Main (#3B82F6)
+  - User 5: Error-Main (#EF4444)
+- 커서 크기: 2px (너비) × 20px (높이)
+- 커서 상단에 아바타 + 이름 레이블
+- 레이블 배경: 사용자 색상, 텍스트: White
+- 레이블 패딩: 4px × 8px, 테두리 반경: 4px
+
+#### 편집 중 하이라이트
+
+**스타일**:
+- 배경: 사용자 색상 (투명도 20%)
+- 지속 시간: 사용자가 편집하는 동안 유지
+- 애니메이션: 부드러운 페이드인
+
+#### 변경 하이라이트
+
+**스타일**:
+- 배경: Warning-Light (노란색)
+- 지속 시간: 3초
+- 애니메이션: 3초 동안 페이드아웃
+
+### 8.2 상태 배지
+
+#### 작성 중
+
+**스타일**:
+- 배경: Warning-Light (#FCD34D)
+- 텍스트: Warning-Dark (#D97706)
+- 아이콘: Edit 아이콘 (선택적)
+
+#### 검증 중
+
+**스타일**:
+- 배경: Info-Light (#93C5FD)
+- 텍스트: Info-Dark (#2563EB)
+- 아이콘: Clock 아이콘 (선택적)
+
+#### 확정됨
+
+**스타일**:
+- 배경: Success-Light (#6EE7B7)
+- 텍스트: Success-Dark (#059669)
+- 아이콘: Check 아이콘 (선택적)
+
+### 8.3 전문용어 하이라이트
+
+**스타일**:
+- 밑줄: 2px dotted Primary-Main
+- 커서: pointer
+
+**호버 상태**:
+- 툴팁 표시
+  - 배경: Gray-800
+  - 텍스트: White
+  - 패딩: 8px × 12px
+  - 테두리 반경: 6px
+  - 최대 너비: 300px
+  - 화살표 표시
+
+**클릭 상태**:
+- 우측 패널의 "용어 설명" 탭으로 전환
+- 해당 용어 상세 설명 표시
+
+### 8.4 AI 제안 영역
+
+**스타일**:
+- 배경: Gray-50
+- 테두리: 1px dashed Primary-Main
+- 테두리 반경: 8px
+- 패딩: 16px
+- 아이콘: AI Sparkle 아이콘 (Primary-Main)
+
+**액션 버튼**:
+- 적용: Primary 버튼 (소형, 패딩 8px × 16px)
+- 무시: Text 버튼
+
+**애니메이션**:
+- 등장: 페이드인 + 약간의 상승 (translateY)
+- 업데이트: 부드러운 전환 (200ms)
+
+### 8.5 Todo 카드
+
+**레이아웃**:
+- 카드 형태
+- 패딩: 16px
+- 테두리 반경: 8px
+- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1)
+
+**우선순위 표시**:
+- 높음: 좌측 테두리 4px Error-Main + Error 점 (8px 원)
+- 보통: 테두리 없음, Gray 점
+- 낮음: 표시 없음
+
+**진행률 바**:
+- 높이: 4px
+- 배경: Gray-200
+- 채워진 부분: Primary-Main
+- 테두리 반경: 2px
+- 위치: 하단
+
+**마감일 표시**:
+- D-day 형식: "D-3", "오늘", "D+2 (지남)"
+- 색상:
+  - 지남: Error-Main
+  - 오늘: Warning-Main
+  - 여유: Gray-500
+
+**드래그 핸들**:
+- 아이콘: 점 6개 (2×3)
+- 색상: Gray-400
+- 위치: 좌측 상단
+
+**호버 상태**:
+- 그림자 증가
+- 드래그 핸들 색상 변경 (Gray-600)
+
+### 8.6 타임라인
+
+**스타일**:
+- 세로 라인: 2px solid Gray-300
+- 위치: 좌측 고정
+
+**이벤트 점**:
+- 크기: 12px 원
+- 배경: Primary-Main
+- 테두리: 2px solid White
+- 위치: 라인 중앙
+
+**타임스탬프**:
+- 폰트: Caption (12px), Gray-500
+- 위치: 이벤트 점 우측
+
+**이벤트 내용**:
+- 폰트: Body-Small (14px), Gray-700
+- 위치: 타임스탬프 하단
+
+---
+
+## 9. 인터랙션 패턴
+
+### 9.1 버튼 인터랙션
+
+**Hover**:
+```css
+transition: all 150ms ease-out;
+transform: translateY(-1px);
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+```
+
+**Active (클릭)**:
+```css
+transform: scale(0.98);
+```
+
+**Disabled**:
+```css
+cursor: not-allowed;
+opacity: 0.6;
+```
+
+### 9.2 카드 인터랙션 (인터랙티브 카드)
+
+**Hover**:
+```css
+transition: all 200ms ease-out;
+transform: translateY(-2px);
+box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+```
+
+**클릭**:
+```css
+transform: scale(0.99);
+```
+
+### 9.3 모달 애니메이션
+
+**등장**:
+```css
+/* Backdrop */
+opacity: 0 → 1;
+transition: opacity 200ms ease-out;
+
+/* Modal */
+opacity: 0 → 1;
+transform: scale(0.95) → scale(1.0);
+transition: all 200ms ease-out;
+```
+
+**사라짐**:
+```css
+opacity: 1 → 0;
+transform: scale(1.0) → scale(0.95);
+transition: all 150ms ease-in;
+```
+
+### 9.4 토스트 알림 애니메이션
+
+**등장**:
+```css
+transform: translateX(400px) → translateX(0);
+opacity: 0 → 1;
+transition: all 200ms ease-out;
+```
+
+**사라짐**:
+```css
+transform: translateX(0) → translateX(400px);
+opacity: 1 → 0;
+transition: all 150ms ease-in;
+```
+
+**자동 사라짐**: 4초 후
+
+### 9.5 로딩 상태
+
+#### 스켈레톤 UI
+
+**스타일**:
+- 배경: Gray-200
+- 테두리 반경: 4px
+- 애니메이션: 펄스 (밝기 변화)
+
+```css
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.skeleton {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+```
+
+#### 스피너
+
+**스타일**:
+- 색상: Primary-Main
+- 크기: 24px (소형), 40px (중형), 56px (대형)
+- 애니메이션: 회전
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+```
+
+### 9.6 드래그 앤 드롭
+
+**드래그 시작**:
+```css
+opacity: 0.5;
+cursor: grabbing;
+```
+
+**드롭 영역 (유효)**:
+```css
+border: 2px dashed #00D9B1;
+background-color: rgba(0, 217, 177, 0.05);
+```
+
+**드롭 영역 (무효)**:
+```css
+border: 2px dashed #EF4444;
+background-color: rgba(239, 68, 68, 0.05);
+```
+
+**드롭 완료**:
+```css
+transition: all 300ms ease-out;
+transform: translate(newX, newY);
+```
+
+### 9.7 포커스 스타일
+
+**인풋/버튼 포커스**:
+```css
+outline: 4px solid rgba(0, 217, 177, 0.2);
+outline-offset: 0;
+border-color: #00D9B1;
+```
+
+**키보드 네비게이션 포커스**:
+```css
+/* 마우스 클릭 시에는 outline 숨김 */
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+/* 키보드 탐색 시에만 outline 표시 */
+.focus-visible {
+  outline: 2px solid #00D9B1;
+  outline-offset: 2px;
+}
+```
+
+### 9.8 페이지 전환 애니메이션
+
+**페이드 전환**:
+```css
+/* 나가는 페이지 */
+opacity: 1 → 0;
+transition: opacity 150ms ease-out;
+
+/* 들어오는 페이지 */
+opacity: 0 → 1;
+transition: opacity 200ms ease-in;
+```
+
+---
+
+## 10. 변경 이력
+
+| 버전 | 날짜 | 작성자 | 변경 내용 |
+|------|------|--------|----------|
+| 1.0 | 2025-10-15 | 유진 | 초안 작성 - 레퍼런스 클로바노트 기반 스타일 가이드 설계 완료 |
+
+---
+
+## 부록
+
+### A. 색상 접근성 체크리스트
+
+- [ ] Primary-Main (#00D9B1) + White: 대비율 3.5:1 (AA Large) ✅
+- [ ] Gray-600 (#4B5563) + White: 대비율 8.6:1 (AAA) ✅
+- [ ] Primary-Main + Gray-900: 대비율 4.8:1 (AA) ✅
+- [ ] 모든 상태 색상 (Success, Warning, Error, Info) + White: AA 이상 ✅
+
+### B. 디자인 도구 및 에셋
+
+**권장 디자인 도구**:
+- Figma (프로토타입 및 디자인 시스템)
+- Adobe XD (대안)
+
+**아이콘 라이브러리**:
+- Heroicons (추천)
+- Feather Icons
+- Lucide Icons
+
+**일러스트레이션**:
+- unDraw (무료, 색상 커스터마이징 가능)
+- Storyset (Freepik)
+- 자체 제작 (브랜드 일관성)
+
+### C. 프론트엔드 구현 권장사항
+
+**CSS 프레임워크**:
+- Tailwind CSS (유틸리티 우선, 빠른 개발)
+- Emotion / styled-components (CSS-in-JS)
+
+**컴포넌트 라이브러리**:
+- Headless UI (접근성 우수)
+- Radix UI (무스타일 프리미티브)
+- 자체 제작 (완전한 커스터마이징)
+
+**애니메이션**:
+- Framer Motion (React)
+- GSAP (고급 애니메이션)
+- CSS Transitions (단순 애니메이션)
+
+### D. 참고 자료
+
+- **WCAG 2.1 가이드라인**: https://www.w3.org/WAI/WCAG21/quickref/
+- **클로바노트**: https://clovanote.naver.com/
+- **Pretendard 폰트**: https://cactus.tistory.com/306
+- **Tailwind CSS 컬러 팔레트**: https://tailwindcss.com/docs/customizing-colors
+
+---
+
+**문서 끝**
diff --git a/design-gappa/uiux/prototype/01-로그인.html b/design-gappa/uiux/prototype/01-로그인.html
new file mode 100644
index 0000000..406bae3
--- /dev/null
+++ b/design-gappa/uiux/prototype/01-로그인.html
@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>로그인 - 회의록 작성 및 공유 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    /* 페이지 전용 스타일 */
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      background: linear-gradient(135deg, #00D9B1 0%, #6366F1 100%);
+    }
+
+    .login-card {
+      background-color: var(--color-white);
+      border-radius: var(--radius-xl);
+      padding: var(--spacing-10);
+      box-shadow: var(--shadow-lg);
+      width: 100%;
+      max-width: 480px;
+      margin: var(--spacing-4);
+    }
+
+    .login-header {
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+
+    .login-logo {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto var(--spacing-4);
+      background-color: var(--color-primary-main);
+      border-radius: var(--radius-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      color: var(--color-white);
+      font-weight: var(--font-weight-bold);
+    }
+
+    .login-title {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .login-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+
+    #loginForm {
+      margin-bottom: var(--spacing-6);
+    }
+
+    .form-group {
+      margin-bottom: var(--spacing-5);
+    }
+
+    .form-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-5);
+    }
+
+    .checkbox-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .checkbox-wrapper input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: var(--color-primary-main);
+    }
+
+    .checkbox-wrapper label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      cursor: pointer;
+    }
+
+    .forgot-password {
+      font-size: var(--font-size-body-small);
+      color: var(--color-primary-main);
+      text-decoration: none;
+      transition: color var(--transition-fast);
+    }
+
+    .forgot-password:hover {
+      color: var(--color-primary-dark);
+    }
+
+    .login-footer {
+      text-align: center;
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--color-gray-200);
+    }
+
+    .login-footer-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+    }
+
+    .login-footer a {
+      color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+      text-decoration: none;
+      transition: color var(--transition-fast);
+    }
+
+    .login-footer a:hover {
+      color: var(--color-primary-dark);
+    }
+
+    /* 예시 크리덴셜 표시 */
+    .credential-hint {
+      background-color: var(--color-gray-50);
+      border: 1px dashed var(--color-gray-300);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-5);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    .credential-hint-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-700);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .credential-hint code {
+      background-color: var(--color-gray-200);
+      padding: 2px 6px;
+      border-radius: var(--radius-sm);
+      font-family: 'Consolas', monospace;
+      font-size: var(--font-size-caption);
+    }
+
+    /* 반응형 */
+    @media (max-width: 767px) {
+      .login-card {
+        padding: var(--spacing-6);
+      }
+
+      .login-title {
+        font-size: var(--font-size-h3);
+      }
+
+      .form-footer {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-3);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="login-card">
+    <!-- 헤더 -->
+    <div class="login-header">
+      <div class="login-logo">M</div>
+      <h1 class="login-title">회의록 서비스</h1>
+      <p class="login-subtitle">스마트한 협업의 시작</p>
+    </div>
+
+    <!-- 예시 크리덴셜 (프로토타입용) -->
+    <div class="credential-hint">
+      <div class="credential-hint-title">📝 테스트 계정</div>
+      <div>이메일: <code>test@example.com</code></div>
+      <div>비밀번호: <code>password123</code></div>
+    </div>
+
+    <!-- 로그인 폼 -->
+    <form id="loginForm">
+      <div class="form-group">
+        <label for="email" class="form-label">이메일</label>
+        <input
+          type="email"
+          id="email"
+          class="form-input"
+          placeholder="example@company.com"
+          required
+          autocomplete="email"
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="password" class="form-label">비밀번호</label>
+        <input
+          type="password"
+          id="password"
+          class="form-input"
+          placeholder="비밀번호를 입력하세요"
+          required
+          autocomplete="current-password"
+        >
+      </div>
+
+      <div class="form-footer">
+        <div class="checkbox-wrapper">
+          <input type="checkbox" id="rememberMe">
+          <label for="rememberMe">로그인 상태 유지</label>
+        </div>
+        <a href="#" class="forgot-password">비밀번호 찾기</a>
+      </div>
+
+      <button type="submit" class="btn btn-primary" style="width: 100%;">
+        로그인
+      </button>
+    </form>
+
+    <!-- 푸터 -->
+    <div class="login-footer">
+      <p class="login-footer-text">
+        아직 계정이 없으신가요? <a href="#">회원가입</a>
+      </p>
+    </div>
+  </div>
+
+  <!-- JavaScript -->
+  <script src="common.js"></script>
+  <script>
+    // 로그인 폼 처리
+    const loginForm = document.getElementById('loginForm');
+    const emailInput = document.getElementById('email');
+    const passwordInput = document.getElementById('password');
+    const rememberMeCheckbox = document.getElementById('rememberMe');
+
+    // 페이지 로드 시 저장된 이메일 불러오기
+    MeetingApp.ready(() => {
+      const savedEmail = MeetingApp.Storage.get('savedEmail');
+      if (savedEmail) {
+        emailInput.value = savedEmail;
+        rememberMeCheckbox.checked = true;
+      }
+    });
+
+    // 폼 제출 핸들러
+    loginForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      // 에러 초기화
+      MeetingApp.Validator.clearError(emailInput);
+      MeetingApp.Validator.clearError(passwordInput);
+
+      const email = emailInput.value.trim();
+      const password = passwordInput.value.trim();
+
+      // 유효성 검사
+      let isValid = true;
+
+      if (!MeetingApp.Validator.required(email)) {
+        MeetingApp.Validator.showError(emailInput, '이메일을 입력해주세요.');
+        isValid = false;
+      } else if (!MeetingApp.Validator.isEmail(email)) {
+        MeetingApp.Validator.showError(emailInput, '올바른 이메일 형식이 아닙니다.');
+        isValid = false;
+      }
+
+      if (!MeetingApp.Validator.required(password)) {
+        MeetingApp.Validator.showError(passwordInput, '비밀번호를 입력해주세요.');
+        isValid = false;
+      } else if (!MeetingApp.Validator.minLength(password, 6)) {
+        MeetingApp.Validator.showError(passwordInput, '비밀번호는 최소 6자 이상이어야 합니다.');
+        isValid = false;
+      }
+
+      if (!isValid) return;
+
+      // 로딩 표시
+      const submitButton = loginForm.querySelector('button[type="submit"]');
+      const originalText = submitButton.textContent;
+      submitButton.disabled = true;
+      submitButton.innerHTML = '<div class="spinner spinner-sm" style="border-color: white; border-top-color: transparent;"></div>';
+
+      try {
+        // API 호출 시뮬레이션
+        await MeetingApp.API.post('/api/auth/login', { email, password });
+
+        // 로그인 성공 시뮬레이션 (테스트 계정 체크)
+        if (email === 'test@example.com' && password === 'password123') {
+          // 사용자 정보 저장
+          MeetingApp.Storage.set('currentUser', {
+            id: 'user-001',
+            name: '김민준',
+            email: email,
+            avatar: 'https://ui-avatars.com/api/?name=김민준&background=00D9B1&color=fff',
+            role: 'user'
+          });
+
+          // 로그인 상태 유지 체크
+          if (rememberMeCheckbox.checked) {
+            MeetingApp.Storage.set('savedEmail', email);
+            MeetingApp.Storage.set('rememberMe', true);
+          } else {
+            MeetingApp.Storage.remove('savedEmail');
+            MeetingApp.Storage.remove('rememberMe');
+          }
+
+          // JWT 토큰 시뮬레이션
+          MeetingApp.Storage.set('authToken', 'mock-jwt-token-' + Date.now());
+
+          // 성공 토스트
+          MeetingApp.Toast.success('로그인에 성공했습니다!');
+
+          // 대시보드로 이동
+          setTimeout(() => {
+            window.location.href = '02-대시보드.html';
+          }, 1000);
+
+        } else {
+          // 로그인 실패
+          MeetingApp.Toast.error('이메일 또는 비밀번호가 올바르지 않습니다.');
+          submitButton.disabled = false;
+          submitButton.textContent = originalText;
+        }
+
+      } catch (error) {
+        console.error('Login error:', error);
+        MeetingApp.Toast.error('로그인 중 오류가 발생했습니다. 다시 시도해주세요.');
+        submitButton.disabled = false;
+        submitButton.textContent = originalText;
+      }
+    });
+
+    // 비밀번호 찾기 (프로토타입용)
+    document.querySelector('.forgot-password').addEventListener('click', (e) => {
+      e.preventDefault();
+      MeetingApp.Toast.info('비밀번호 찾기 기능은 준비 중입니다.');
+    });
+
+    // 회원가입 (프로토타입용)
+    document.querySelector('.login-footer a').addEventListener('click', (e) => {
+      e.preventDefault();
+      MeetingApp.Toast.info('회원가입 기능은 준비 중입니다.');
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/02-대시보드.html b/design-gappa/uiux/prototype/02-대시보드.html
new file mode 100644
index 0000000..904a9e6
--- /dev/null
+++ b/design-gappa/uiux/prototype/02-대시보드.html
@@ -0,0 +1,687 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>대시보드 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    /* 레이아웃 */
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Header */
+    .dashboard-header {
+      position: sticky;
+      top: 0;
+      z-index: var(--z-sticky);
+      background-color: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: 0 var(--spacing-6);
+      height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+
+    .logo {
+      width: 40px;
+      height: 40px;
+      background-color: var(--color-primary-main);
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-white);
+      font-weight: var(--font-weight-bold);
+      font-size: 20px;
+    }
+
+    .service-name {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+
+    .user-menu {
+      position: relative;
+    }
+
+    .user-button {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2);
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: var(--radius-md);
+      transition: background-color var(--transition-fast);
+    }
+
+    .user-button:hover {
+      background-color: var(--color-gray-100);
+    }
+
+    .user-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-white);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .user-dropdown {
+      display: none;
+      position: absolute;
+      top: 48px;
+      right: 0;
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      min-width: 200px;
+      z-index: var(--z-dropdown);
+    }
+
+    .user-dropdown.show {
+      display: block;
+    }
+
+    .dropdown-item {
+      display: block;
+      padding: var(--spacing-3) var(--spacing-4);
+      color: var(--color-gray-700);
+      text-decoration: none;
+      transition: background-color var(--transition-fast);
+    }
+
+    .dropdown-item:hover {
+      background-color: var(--color-gray-50);
+    }
+
+    .dropdown-divider {
+      height: 1px;
+      background-color: var(--color-gray-200);
+      margin: var(--spacing-2) 0;
+    }
+
+    /* Layout */
+    .dashboard-layout {
+      display: flex;
+      min-height: calc(100vh - 64px);
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: 240px;
+      background-color: var(--color-gray-50);
+      border-right: 1px solid var(--color-gray-200);
+      padding: var(--spacing-6) 0;
+    }
+
+    .sidebar-nav {
+      list-style: none;
+    }
+
+    .nav-item {
+      margin-bottom: var(--spacing-2);
+    }
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3) var(--spacing-6);
+      color: var(--color-gray-700);
+      text-decoration: none;
+      transition: all var(--transition-fast);
+    }
+
+    .nav-link:hover {
+      background-color: var(--color-gray-200);
+      color: var(--color-gray-900);
+    }
+
+    .nav-link.active {
+      background-color: rgba(0, 217, 177, 0.1);
+      color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+      border-right: 3px solid var(--color-primary-main);
+    }
+
+    /* Main Content */
+    .main-content {
+      flex: 1;
+      padding: var(--spacing-8);
+      overflow-y: auto;
+    }
+
+    .welcome-section {
+      margin-bottom: var(--spacing-8);
+    }
+
+    .welcome-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .welcome-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+
+    /* Stats Grid */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .stat-card {
+      padding: var(--spacing-6);
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-sm);
+      transition: all var(--transition-base);
+    }
+
+    .stat-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .stat-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .stat-icon.primary { background-color: rgba(0, 217, 177, 0.1); color: var(--color-primary-main); }
+    .stat-icon.warning { background-color: rgba(245, 158, 11, 0.1); color: var(--color-warning-main); }
+    .stat-icon.success { background-color: rgba(16, 185, 129, 0.1); color: var(--color-success-main); }
+
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .stat-value {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+    }
+
+    /* Section */
+    .section {
+      margin-bottom: var(--spacing-8);
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .section-title {
+      font-size: var(--font-size-h3);
+      color: var(--color-gray-900);
+    }
+
+    .view-all-link {
+      font-size: var(--font-size-body-small);
+      color: var(--color-primary-main);
+      text-decoration: none;
+      font-weight: var(--font-weight-medium);
+    }
+
+    .view-all-link:hover {
+      color: var(--color-primary-dark);
+    }
+
+    /* Meeting Card */
+    .meeting-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: var(--spacing-4);
+    }
+
+    .meeting-card {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-5);
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+
+    .meeting-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .meeting-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .meeting-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .meeting-meta {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-1);
+    }
+
+    /* Todo Card */
+    .todo-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+
+    .todo-item {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .todo-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .todo-left {
+      flex: 1;
+    }
+
+    .todo-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .todo-meta {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+    }
+
+    .todo-right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: var(--spacing-2);
+    }
+
+    .dday {
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .dday.urgent { color: var(--color-error-main); }
+    .dday.warning { color: var(--color-warning-main); }
+    .dday.normal { color: var(--color-gray-500); }
+
+    /* Bottom Navigation (Mobile) */
+    .bottom-nav {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--color-white);
+      border-top: 1px solid var(--color-gray-200);
+      display: flex;
+      justify-content: space-around;
+      padding: var(--spacing-2) 0;
+      z-index: var(--z-sticky);
+    }
+
+    .bottom-nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-1);
+      padding: var(--spacing-2);
+      color: var(--color-gray-500);
+      text-decoration: none;
+      font-size: var(--font-size-caption);
+      min-width: 60px;
+    }
+
+    .bottom-nav-item.active {
+      color: var(--color-primary-main);
+    }
+
+    .bottom-nav-icon {
+      font-size: 24px;
+    }
+
+    /* Responsive */
+    @media (max-width: 1023px) {
+      .sidebar { display: none; }
+      .main-content { padding-bottom: 80px; }
+    }
+
+    @media (min-width: 1024px) {
+      .bottom-nav { display: none; }
+    }
+
+    @media (max-width: 767px) {
+      .dashboard-header { padding: 0 var(--spacing-4); }
+      .service-name { display: none; }
+      .main-content { padding: var(--spacing-4); }
+      .welcome-title { font-size: var(--font-size-h2); }
+      .stats-grid { grid-template-columns: 1fr; }
+      .meeting-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Header -->
+  <header class="dashboard-header">
+    <div class="header-left">
+      <div class="logo">M</div>
+      <span class="service-name">회의록 서비스</span>
+    </div>
+    <div class="header-right">
+      <div class="user-menu">
+        <button class="user-button" id="userMenuButton">
+          <div class="user-avatar" id="userAvatar">U</div>
+          <span class="hide-mobile" id="userName">사용자</span>
+        </button>
+        <div class="user-dropdown" id="userDropdown">
+          <a href="#" class="dropdown-item">내 프로필</a>
+          <a href="#" class="dropdown-item">설정</a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item" id="logoutButton">로그아웃</a>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Layout -->
+  <div class="dashboard-layout">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <nav>
+        <ul class="sidebar-nav">
+          <li class="nav-item">
+            <a href="02-대시보드.html" class="nav-link active">
+              <span>📊</span> 대시보드
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <span>📅</span> 회의 목록
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="10-Todo관리.html" class="nav-link">
+              <span>✅</span> Todo 관리
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <span>⚙️</span> 설정
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Welcome Section -->
+      <section class="welcome-section">
+        <h1 class="welcome-title" id="welcomeTitle">안녕하세요!</h1>
+        <p class="welcome-subtitle" id="welcomeSubtitle">오늘의 일정을 확인하세요</p>
+      </section>
+
+      <!-- Stats Grid -->
+      <section class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-icon primary">📅</div>
+          <div class="stat-label">예정된 회의</div>
+          <div class="stat-value" id="upcomingMeetingsCount">0</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon warning">✅</div>
+          <div class="stat-label">진행 중 Todo</div>
+          <div class="stat-value" id="inProgressTodosCount">0</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon success">📈</div>
+          <div class="stat-label">Todo 완료율</div>
+          <div class="stat-value" id="todoCompletionRate">0%</div>
+        </div>
+      </section>
+
+      <!-- Recent Meetings -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">최근 회의</h2>
+          <a href="#" class="view-all-link">전체 보기 →</a>
+        </div>
+        <div class="meeting-grid" id="meetingGrid">
+          <!-- Meetings will be rendered here -->
+        </div>
+      </section>
+
+      <!-- My Todos -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">할당된 Todo</h2>
+          <a href="10-Todo관리.html" class="view-all-link">전체 보기 →</a>
+        </div>
+        <div class="todo-list" id="todoList">
+          <!-- Todos will be rendered here -->
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <!-- Bottom Navigation (Mobile) -->
+  <nav class="bottom-nav hide-desktop">
+    <a href="02-대시보드.html" class="bottom-nav-item active">
+      <div class="bottom-nav-icon">📊</div>
+      <div>대시보드</div>
+    </a>
+    <a href="#" class="bottom-nav-item">
+      <div class="bottom-nav-icon">📅</div>
+      <div>회의</div>
+    </a>
+    <a href="10-Todo관리.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">✅</div>
+      <div>Todo</div>
+    </a>
+    <a href="#" class="bottom-nav-item">
+      <div class="bottom-nav-icon">⚙️</div>
+      <div>더보기</div>
+    </a>
+  </nav>
+
+  <!-- FAB -->
+  <button class="fab" id="fabButton" title="새 회의 예약">+</button>
+
+  <!-- JavaScript -->
+  <script src="common.js"></script>
+  <script>
+    const { AppState, Storage, Toast, MeetingUtils, formatDateTime, getDday, navigateTo } = window.MeetingApp;
+
+    // 인증 체크
+    MeetingApp.ready(() => {
+      const authToken = Storage.get('authToken');
+      if (!authToken) {
+        window.location.href = '01-로그인.html';
+        return;
+      }
+
+      const currentUser = Storage.get('currentUser');
+      if (currentUser) {
+        // 사용자 정보 표시
+        document.getElementById('userName').textContent = currentUser.name;
+        document.getElementById('userAvatar').textContent = currentUser.name.charAt(0);
+        document.getElementById('welcomeTitle').textContent = `안녕하세요, ${currentUser.name}님!`;
+
+        // AppState 업데이트
+        AppState.currentUser = currentUser;
+      }
+
+      // 데이터 로드 및 렌더링
+      loadDashboardData();
+      renderMeetings();
+      renderTodos();
+    });
+
+    // 대시보드 통계 로드
+    function loadDashboardData() {
+      const meetings = Storage.get('meetings', []);
+      const todos = Storage.get('todos', []);
+
+      // 예정된 회의 수
+      const upcomingMeetings = meetings.filter(m => m.status === 'scheduled').length;
+      document.getElementById('upcomingMeetingsCount').textContent = upcomingMeetings;
+
+      // 진행 중 Todo 수
+      const inProgressTodos = todos.filter(t => t.status === 'in_progress').length;
+      document.getElementById('inProgressTodosCount').textContent = inProgressTodos;
+
+      // Todo 완료율
+      const completedTodos = todos.filter(t => t.status === 'done').length;
+      const completionRate = todos.length > 0 ? Math.round((completedTodos / todos.length) * 100) : 0;
+      document.getElementById('todoCompletionRate').textContent = `${completionRate}%`;
+    }
+
+    // 회의 목록 렌더링
+    function renderMeetings() {
+      const meetings = Storage.get('meetings', []).slice(0, 3);
+      const meetingGrid = document.getElementById('meetingGrid');
+
+      if (meetings.length === 0) {
+        meetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">아직 등록된 회의가 없습니다.</p>';
+        return;
+      }
+
+      meetingGrid.innerHTML = meetings.map(meeting => `
+        <div class="meeting-card" onclick="navigateTo('05-회의진행.html')">
+          <div class="meeting-header">
+            <div>
+              <div class="meeting-title">${meeting.title}</div>
+              <div class="meeting-meta">📅 ${formatDateTime(meeting.date)}</div>
+              <div class="meeting-meta">📍 ${meeting.location}</div>
+            </div>
+            <span class="badge ${MeetingUtils.getStatusClass(meeting.status)}">
+              ${MeetingUtils.getStatusLabel(meeting.status)}
+            </span>
+          </div>
+          <div style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">
+            ${meeting.description}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    // Todo 목록 렌더링
+    function renderTodos() {
+      const todos = Storage.get('todos', []).filter(t => t.status !== 'done').slice(0, 5);
+      const todoList = document.getElementById('todoList');
+
+      if (todos.length === 0) {
+        todoList.innerHTML = '<p style="color: var(--color-gray-500);">할당된 Todo가 없습니다.</p>';
+        return;
+      }
+
+      todoList.innerHTML = todos.map(todo => {
+        const dday = getDday(todo.dueDate);
+        const ddayClass = dday.includes('지남') ? 'urgent' : (dday === '오늘' ? 'warning' : 'normal');
+
+        return `
+          <div class="todo-item" onclick="navigateTo('10-Todo관리.html')">
+            <div class="todo-left">
+              <div class="todo-title">${todo.title}</div>
+              <div class="todo-meta">담당: ${todo.assignee}</div>
+            </div>
+            <div class="todo-right">
+              <div class="dday ${ddayClass}">${dday}</div>
+              <span class="badge badge-${todo.priority === 'high' ? 'error' : 'neutral'}">
+                ${MeetingUtils.getPriorityLabel(todo.priority)}
+              </span>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    // 사용자 메뉴 토글
+    const userMenuButton = document.getElementById('userMenuButton');
+    const userDropdown = document.getElementById('userDropdown');
+
+    userMenuButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      userDropdown.classList.toggle('show');
+    });
+
+    document.addEventListener('click', () => {
+      userDropdown.classList.remove('show');
+    });
+
+    // 로그아웃
+    document.getElementById('logoutButton').addEventListener('click', (e) => {
+      e.preventDefault();
+      Storage.remove('authToken');
+      Storage.remove('currentUser');
+      Toast.success('로그아웃 되었습니다.');
+      setTimeout(() => {
+        window.location.href = '01-로그인.html';
+      }, 1000);
+    });
+
+    // FAB 버튼
+    document.getElementById('fabButton').addEventListener('click', () => {
+      window.location.href = '03-회의예약.html';
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/03-회의예약.html b/design-gappa/uiux/prototype/03-회의예약.html
new file mode 100644
index 0000000..4a1a119
--- /dev/null
+++ b/design-gappa/uiux/prototype/03-회의예약.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의 예약 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      margin-bottom: var(--spacing-8);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+    .form-container {
+      background-color: var(--color-white);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-8);
+      box-shadow: var(--shadow-sm);
+    }
+    .button-group {
+      display: flex;
+      gap: var(--spacing-3);
+      margin-top: var(--spacing-6);
+    }
+    @media (max-width: 767px) {
+      .page-title { font-size: var(--font-size-h2); }
+      .form-container { padding: var(--spacing-5); }
+      .button-group { flex-direction: column; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의 예약</h1>
+      <p class="page-subtitle">새로운 회의를 예약하고 참석자를 초대하세요</p>
+    </div>
+
+    <div class="form-container">
+      <form id="meetingForm">
+        <div class="form-group">
+          <label for="title" class="form-label">회의 제목 *</label>
+          <input type="text" id="title" class="form-input" placeholder="예: 2025년 1분기 기획 회의" required maxlength="100">
+        </div>
+
+        <div class="form-group">
+          <label for="date" class="form-label">날짜 *</label>
+          <input type="date" id="date" class="form-input" required>
+        </div>
+
+        <div class="form-group">
+          <label for="time" class="form-label">시간 *</label>
+          <input type="time" id="time" class="form-input" required>
+        </div>
+
+        <div class="form-group">
+          <label for="location" class="form-label">장소</label>
+          <input type="text" id="location" class="form-input" placeholder="예: 본사 2층 대회의실" maxlength="200">
+        </div>
+
+        <div class="form-group">
+          <label for="attendees" class="form-label">참석자 (이메일, 쉼표로 구분) *</label>
+          <input type="text" id="attendees" class="form-input" placeholder="예: user1@example.com, user2@example.com" required>
+        </div>
+
+        <div class="form-group">
+          <label for="description" class="form-label">회의 설명</label>
+          <textarea id="description" class="form-textarea" placeholder="회의 목적과 안건을 간략히 작성하세요"></textarea>
+        </div>
+
+        <div class="button-group">
+          <button type="submit" class="btn btn-primary" style="flex: 1;">회의 예약하기</button>
+          <button type="button" class="btn btn-secondary" onclick="history.back()">취소</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    const form = document.getElementById('meetingForm');
+
+    // 최소 날짜를 오늘로 설정
+    document.getElementById('date').min = new Date().toISOString().split('T')[0];
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const title = document.getElementById('title').value.trim();
+      const date = document.getElementById('date').value;
+      const time = document.getElementById('time').value;
+      const location = document.getElementById('location').value.trim();
+      const attendees = document.getElementById('attendees').value.trim();
+      const description = document.getElementById('description').value.trim();
+
+      // 새 회의 생성
+      const newMeeting = {
+        id: 'm-' + Date.now(),
+        title,
+        date: `${date} ${time}`,
+        location: location || '미정',
+        status: 'scheduled',
+        attendees: attendees.split(',').map(email => email.trim()),
+        description: description || ''
+      };
+
+      // 저장
+      const meetings = MeetingApp.Storage.get('meetings', []);
+      meetings.unshift(newMeeting);
+      MeetingApp.Storage.set('meetings', meetings);
+
+      MeetingApp.Toast.success('회의가 예약되었습니다!');
+
+      setTimeout(() => {
+        window.location.href = '04-템플릿선택.html?meetingId=' + newMeeting.id;
+      }, 1000);
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/04-템플릿선택.html b/design-gappa/uiux/prototype/04-템플릿선택.html
new file mode 100644
index 0000000..f2ca2ec
--- /dev/null
+++ b/design-gappa/uiux/prototype/04-템플릿선택.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>템플릿 선택 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1024px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      margin-bottom: var(--spacing-8);
+      text-align: center;
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+    .template-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+    .template-card {
+      background: var(--color-white);
+      border: 2px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      cursor: pointer;
+      transition: all var(--transition-base);
+      position: relative;
+    }
+    .template-card:hover {
+      border-color: var(--color-primary-main);
+      box-shadow: var(--shadow-md);
+      transform: translateY(-4px);
+    }
+    .template-card.selected {
+      border-color: var(--color-primary-main);
+      border-width: 3px;
+      background-color: rgba(0, 217, 177, 0.05);
+    }
+    .template-card.selected::after {
+      content: '✓';
+      position: absolute;
+      top: var(--spacing-3);
+      right: var(--spacing-3);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      width: 28px;
+      height: 28px;
+      border-radius: var(--radius-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--font-weight-bold);
+    }
+    .template-icon {
+      font-size: 48px;
+      margin-bottom: var(--spacing-4);
+      text-align: center;
+    }
+    .template-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .template-description {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-relaxed);
+      margin-bottom: var(--spacing-4);
+    }
+    .template-sections {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-1);
+    }
+    .section-tag {
+      font-size: var(--font-size-caption);
+      padding: var(--spacing-1) var(--spacing-2);
+      background-color: var(--color-gray-100);
+      color: var(--color-gray-600);
+      border-radius: var(--radius-sm);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    @media (max-width: 767px) {
+      .page-title { font-size: var(--font-size-h2); }
+      .template-grid { grid-template-columns: 1fr; }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의록 템플릿 선택</h1>
+      <p class="page-subtitle">회의 유형에 맞는 템플릿을 선택하여 효율적으로 회의록을 작성하세요</p>
+    </div>
+
+    <div class="template-grid">
+      <!-- 일반 회의 템플릿 -->
+      <div class="template-card" data-template="general">
+        <div class="template-icon">📋</div>
+        <h3 class="template-title">일반 회의</h3>
+        <p class="template-description">
+          가장 기본적인 회의록 형식입니다. 모든 유형의 회의에 적합합니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">참석자</span>
+          <span class="section-tag">안건</span>
+          <span class="section-tag">논의 내용</span>
+          <span class="section-tag">결정 사항</span>
+          <span class="section-tag">Todo</span>
+        </div>
+      </div>
+
+      <!-- 스크럼 회의 템플릿 -->
+      <div class="template-card" data-template="scrum">
+        <div class="template-icon">🏃</div>
+        <h3 class="template-title">스크럼 회의</h3>
+        <p class="template-description">
+          데일리 스탠드업이나 스프린트 회의에 최적화된 템플릿입니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">어제 한 일</span>
+          <span class="section-tag">오늘 할 일</span>
+          <span class="section-tag">이슈/블로커</span>
+          <span class="section-tag">다음 스프린트</span>
+        </div>
+      </div>
+
+      <!-- 프로젝트 킥오프 템플릿 -->
+      <div class="template-card" data-template="kickoff">
+        <div class="template-icon">🚀</div>
+        <h3 class="template-title">프로젝트 킥오프</h3>
+        <p class="template-description">
+          새 프로젝트 시작 시 필요한 모든 정보를 담는 템플릿입니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">프로젝트 개요</span>
+          <span class="section-tag">목표</span>
+          <span class="section-tag">일정</span>
+          <span class="section-tag">역할 분담</span>
+          <span class="section-tag">리스크</span>
+        </div>
+      </div>
+
+      <!-- 주간 회의 템플릿 -->
+      <div class="template-card" data-template="weekly">
+        <div class="template-icon">📅</div>
+        <h3 class="template-title">주간 회의</h3>
+        <p class="template-description">
+          매주 반복되는 정기 회의에 적합한 템플릿입니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">주간 실적</span>
+          <span class="section-tag">주요 이슈</span>
+          <span class="section-tag">다음 주 계획</span>
+          <span class="section-tag">공지사항</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="action-buttons">
+      <button type="button" class="btn btn-secondary" onclick="history.back()">이전으로</button>
+      <button type="button" class="btn btn-primary" id="startMeetingBtn" disabled>
+        회의 시작하기
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    let selectedTemplate = null;
+    const startBtn = document.getElementById('startMeetingBtn');
+    const templateCards = document.querySelectorAll('.template-card');
+
+    templateCards.forEach(card => {
+      card.addEventListener('click', () => {
+        // 기존 선택 해제
+        templateCards.forEach(c => c.classList.remove('selected'));
+
+        // 새로운 선택
+        card.classList.add('selected');
+        selectedTemplate = card.getAttribute('data-template');
+        startBtn.disabled = false;
+      });
+    });
+
+    startBtn.addEventListener('click', () => {
+      if (!selectedTemplate) {
+        MeetingApp.Toast.warning('템플릿을 선택해주세요');
+        return;
+      }
+
+      // URL에서 meetingId 가져오기
+      const urlParams = new URLSearchParams(window.location.search);
+      const meetingId = urlParams.get('meetingId');
+
+      // 선택한 템플릿 저장
+      MeetingApp.Storage.set('selectedTemplate', {
+        meetingId: meetingId,
+        template: selectedTemplate,
+        timestamp: new Date().toISOString()
+      });
+
+      MeetingApp.Toast.success('템플릿이 선택되었습니다');
+
+      setTimeout(() => {
+        window.location.href = '05-회의진행.html?meetingId=' + meetingId;
+      }, 500);
+    });
+
+    // 페이지 로드 시 일반 회의 템플릿 기본 선택 (선택적)
+    // templateCards[0].click();
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/05-회의진행.html b/design-gappa/uiux/prototype/05-회의진행.html
new file mode 100644
index 0000000..b86074f
--- /dev/null
+++ b/design-gappa/uiux/prototype/05-회의진행.html
@@ -0,0 +1,631 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의 진행 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body {
+      background-color: var(--color-gray-50);
+      margin: 0;
+      overflow: hidden;
+    }
+    .meeting-container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    .meeting-header {
+      background: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: var(--spacing-4) var(--spacing-6);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .meeting-info {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+    .meeting-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+    .recording-indicator {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--color-error-light);
+      color: var(--color-error-dark);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+    .recording-dot {
+      width: 8px;
+      height: 8px;
+      background-color: var(--color-error-main);
+      border-radius: var(--radius-full);
+      animation: blink 1.5s ease-in-out infinite;
+    }
+    @keyframes blink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+    .meeting-body {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+    .editor-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: var(--color-white);
+      border-right: 1px solid var(--color-gray-200);
+    }
+    .editor-toolbar {
+      padding: var(--spacing-3) var(--spacing-4);
+      border-bottom: 1px solid var(--color-gray-200);
+      display: flex;
+      gap: var(--spacing-2);
+    }
+    .editor-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--spacing-6);
+    }
+    .editor-textarea {
+      width: 100%;
+      min-height: 300px;
+      border: none;
+      font-family: inherit;
+      font-size: var(--font-size-body);
+      line-height: var(--line-height-relaxed);
+      resize: none;
+      outline: none;
+    }
+    .side-panel {
+      width: 360px;
+      background: var(--color-white);
+      display: flex;
+      flex-direction: column;
+      border-left: 1px solid var(--color-gray-200);
+    }
+    .side-panel-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+    .side-tab {
+      flex: 1;
+      padding: var(--spacing-3) var(--spacing-4);
+      background: transparent;
+      border: none;
+      border-bottom: 3px solid transparent;
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-600);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+    .side-tab.active {
+      color: var(--color-primary-main);
+      border-bottom-color: var(--color-primary-main);
+    }
+    .side-panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--spacing-4);
+    }
+    .attendee-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+    }
+    .attendee-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--font-weight-semibold);
+    }
+    .attendee-info {
+      flex: 1;
+    }
+    .attendee-name {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+    }
+    .attendee-status {
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+    }
+    .ai-suggestion {
+      background-color: var(--color-gray-50);
+      border: 1px dashed var(--color-primary-main);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-4);
+    }
+    .ai-suggestion-header {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-3);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-primary-main);
+    }
+    .ai-suggestion-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-relaxed);
+      margin-bottom: var(--spacing-3);
+    }
+    .ai-actions {
+      display: flex;
+      gap: var(--spacing-2);
+    }
+    @media (max-width: 1023px) {
+      .side-panel {
+        position: fixed;
+        right: -360px;
+        top: 0;
+        height: 100vh;
+        z-index: var(--z-sticky);
+        box-shadow: var(--shadow-lg);
+        transition: right var(--transition-base);
+      }
+      .side-panel.open {
+        right: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="meeting-container">
+    <!-- 헤더 -->
+    <div class="meeting-header">
+      <div class="meeting-info">
+        <h1 class="meeting-title" id="meetingTitle">회의 진행 중</h1>
+        <div class="recording-indicator">
+          <div class="recording-dot"></div>
+          <span id="recordingTime">00:00</span>
+        </div>
+      </div>
+      <div style="display: flex; gap: var(--spacing-3);">
+        <button class="btn btn-text btn-icon hide-desktop" id="toggleSidePanel">☰</button>
+        <button class="btn btn-secondary" onclick="if(confirm('회의를 종료하시겠습니까?')) window.location.href='06-검증완료.html'">
+          회의 종료
+        </button>
+      </div>
+    </div>
+
+    <!-- 본문 -->
+    <div class="meeting-body">
+      <!-- 에디터 패널 -->
+      <div class="editor-panel">
+        <div class="editor-toolbar">
+          <button class="btn btn-text btn-icon-sm">B</button>
+          <button class="btn btn-text btn-icon-sm">I</button>
+          <button class="btn btn-text btn-icon-sm">U</button>
+          <button class="btn btn-text btn-icon-sm">📝</button>
+          <button class="btn btn-text btn-icon-sm">🔗</button>
+        </div>
+        <div class="editor-content">
+          <textarea class="editor-textarea" id="meetingContent" placeholder="회의 내용을 작성하거나 AI가 자동으로 작성합니다...
+
+# 참석자
+- 김민준
+- 박서연
+- 이준호
+
+# 안건
+1. 신규 기능 개발 일정 논의
+2. 예산 편성 검토
+
+# 논의 내용
+
+"></textarea>
+        </div>
+      </div>
+
+      <!-- 사이드 패널 -->
+      <div class="side-panel" id="sidePanel">
+        <div class="side-panel-tabs">
+          <button class="side-tab active" data-tab="attendees">참석자</button>
+          <button class="side-tab" data-tab="ai">AI 제안</button>
+          <button class="side-tab" data-tab="related">관련 자료</button>
+        </div>
+
+        <div class="side-panel-content">
+          <!-- 참석자 탭 -->
+          <div class="tab-content" data-content="attendees">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">참석자 (3명)</h3>
+            <div class="attendee-item">
+              <div class="attendee-avatar">김</div>
+              <div class="attendee-info">
+                <div class="attendee-name">김민준</div>
+                <div class="attendee-status">발언 중 ✍️</div>
+              </div>
+            </div>
+            <div class="attendee-item">
+              <div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
+              <div class="attendee-info">
+                <div class="attendee-name">박서연</div>
+                <div class="attendee-status">온라인</div>
+              </div>
+            </div>
+            <div class="attendee-item">
+              <div class="attendee-avatar" style="background-color: var(--color-info-main);">이</div>
+              <div class="attendee-info">
+                <div class="attendee-name">이준호</div>
+                <div class="attendee-status">온라인</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AI 제안 탭 -->
+          <div class="tab-content" data-content="ai" style="display: none;">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">AI 제안</h3>
+
+            <div class="ai-suggestion">
+              <div class="ai-suggestion-header">
+                ✨ 회의록 요약 제안
+              </div>
+              <div class="ai-suggestion-text">
+                <strong style="color: var(--color-gray-900);">현재까지 논의된 핵심 내용:</strong><br><br>
+
+                1. <strong>신규 기능 개발 일정</strong><br>
+                &nbsp;&nbsp;&nbsp;• 3월 말 완료를 목표로 MVP(Minimum Viable Product) 개발 착수<br>
+                &nbsp;&nbsp;&nbsp;• 주요 마일스톤: 3/10 UI 완성, 3/20 AI 통합, 3/30 베타 테스트<br>
+                &nbsp;&nbsp;&nbsp;• 이전 회의(2024-10-15) 대비 일정 2주 단축 결정<br><br>
+
+                2. <strong>API 설계 및 개발 담당</strong><br>
+                &nbsp;&nbsp;&nbsp;• 이준호님이 RESTful API 설계 총괄 담당<br>
+                &nbsp;&nbsp;&nbsp;• OpenAPI 3.0 명세서 작성 우선 진행<br>
+                &nbsp;&nbsp;&nbsp;• 기존 레거시 시스템과의 연동 인터페이스 고려 필요<br><br>
+
+                3. <strong>예산 편성 확정</strong><br>
+                &nbsp;&nbsp;&nbsp;• 총 5천만원 확정 (개발비 3천, 인프라 1.5천, 예비비 5백)<br>
+                &nbsp;&nbsp;&nbsp;• 클라우드 비용 절감을 위해 스팟 인스턴스 활용 검토<br><br>
+
+                <div style="margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px dashed var(--color-gray-300); font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                  📎 참고자료:<br>
+                  • <a href="#" onclick="window.open('08-최종확정.html', '_blank'); return false;" style="color: var(--color-primary-main);">2024년 4분기 제품 기획 회의 (2024-10-15)</a><br>
+                  • <a href="#" onclick="window.open('08-최종확정.html', '_blank'); return false;" style="color: var(--color-primary-main);">API 설계 리뷰 회의 (2024-09-28)</a>
+                </div>
+              </div>
+              <div class="ai-actions">
+                <button class="btn btn-primary btn-sm">회의록에 적용</button>
+                <button class="btn btn-text btn-sm">수정</button>
+                <button class="btn btn-text btn-sm">무시</button>
+              </div>
+            </div>
+
+            <div class="ai-suggestion">
+              <div class="ai-suggestion-header">
+                📋 액션 아이템(Todo) 자동 추출
+              </div>
+              <div class="ai-suggestion-text">
+                <strong style="color: var(--color-gray-900);">발언 내용에서 5개의 실행 항목을 감지했습니다:</strong><br><br>
+
+                <div style="background: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2);">
+                  <strong>1. API 명세서 작성</strong><br>
+                  <span style="font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                    • 담당: 이준호 (발언: "제가 이번 주까지 OpenAPI 명세서 초안 작성하겠습니다")<br>
+                    • 마감: 2025-03-25 (3월 25일)<br>
+                    • 우선순위: 높음 (다른 개발 작업의 선행 조건)<br>
+                    • 출처: 14:23 발언
+                  </span>
+                </div>
+
+                <div style="background: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2);">
+                  <strong>2. UI 프로토타입 완성</strong><br>
+                  <span style="font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                    • 담당: 최유진 (발언: "피그마 작업물을 다음 주 월요일까지 마무리할게요")<br>
+                    • 마감: 2025-03-15 (3월 15일)<br>
+                    • 우선순위: 높음<br>
+                    • 출처: 14:31 발언<br>
+                    • 참고: <a href="#" onclick="window.open('08-최종확정.html', '_blank'); return false;" style="color: var(--color-primary-main);">이전 디자인 가이드 (2024-09-10)</a>
+                  </span>
+                </div>
+
+                <div style="background: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2);">
+                  <strong>3. 예산 편성안 최종 검토</strong><br>
+                  <span style="font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                    • 담당: 박서연 (발언: "클라우드 비용 재산정 후 최종 검토하겠습니다")<br>
+                    • 마감: 2025-03-20 (3월 20일)<br>
+                    • 우선순위: 보통<br>
+                    • 출처: 14:45 발언<br>
+                    • ⚠️ 주의: 이전 회의에서 지연된 항목 (현재 진행률 30%)
+                  </span>
+                </div>
+
+                <div style="background: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2);">
+                  <strong>4. 레거시 시스템 연동 방안 검토</strong><br>
+                  <span style="font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                    • 담당: 이준호, 정도현 (공동)<br>
+                    • 마감: 2025-03-18 (3월 18일)<br>
+                    • 우선순위: 높음 (기술적 리스크 요인)<br>
+                    • 출처: 14:52 발언
+                  </span>
+                </div>
+
+                <div style="background: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--radius-sm);">
+                  <strong>5. 베타 테스트 참여자 모집</strong><br>
+                  <span style="font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                    • 담당: 김민준<br>
+                    • 마감: 2025-03-28 (3월 28일)<br>
+                    • 우선순위: 보통<br>
+                    • 출처: 15:03 발언<br>
+                    • 목표: 내부 테스터 10명 이상
+                  </span>
+                </div>
+
+                <div style="margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px dashed var(--color-gray-300); font-size: var(--font-size-caption); color: var(--color-gray-600);">
+                  💡 AI 분석: 총 5개 항목 중 3개가 높은 우선순위로 분류되었습니다. 마감일 기준 가장 시급한 항목은 "레거시 시스템 연동 방안 검토"입니다.
+                </div>
+              </div>
+              <div class="ai-actions">
+                <button class="btn btn-primary btn-sm">5개 Todo 일괄 생성</button>
+                <button class="btn btn-text btn-sm">개별 선택</button>
+                <button class="btn btn-text btn-sm">수정</button>
+              </div>
+            </div>
+
+            <div class="ai-suggestion">
+              <div class="ai-suggestion-header">
+                🔍 전문용어 감지 및 맥락 기반 설명
+              </div>
+              <div class="ai-suggestion-text">
+                <strong style="color: var(--color-gray-900);">"API Gateway" 전문용어가 감지되었습니다</strong><br><br>
+
+                <div style="background: var(--color-info-light); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-3);">
+                  <strong style="color: var(--color-info-dark);">💡 간단한 정의</strong><br>
+                  <span style="font-size: var(--font-size-body-small);">
+                    클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버.
+                    요청 라우팅, 인증, 속도 제한, 로드 밸런싱 등을 처리합니다.
+                  </span>
+                </div>
+
+                <strong style="color: var(--color-gray-900);">🔗 우리 조직 내 사용 맥락</strong><br>
+                <div style="margin-top: var(--spacing-2); font-size: var(--font-size-body-small); line-height: var(--line-height-relaxed);">
+                  • <strong>이전 회의 논의:</strong>
+                  <a href="#" onclick="window.open('08-최종확정.html', '_blank'); return false;" style="color: var(--color-primary-main);">API 설계 리뷰 회의 (2024-09-28)</a>에서
+                  AWS API Gateway vs Kong Gateway 비교 검토 완료<br>
+
+                  • <strong>최종 결정:</strong> AWS API Gateway 채택 결정 (서버리스 아키텍처와 통합 용이)<br>
+
+                  • <strong>담당자:</strong> 이준호님이 API Gateway 설정 및 Lambda 통합 담당<br>
+
+                  • <strong>관련 문서:</strong>
+                  <a href="#" onclick="alert('기술 문서로 이동'); return false;" style="color: var(--color-primary-main);">사내 위키 - API Gateway 구축 가이드</a><br>
+
+                  • <strong>예상 비용:</strong> 월 약 50만원 (요청 100만건 기준)<br>
+
+                  • <strong>보안 정책:</strong> JWT 토큰 기반 인증, Rate Limiting 500req/min 설정 예정
+                </div>
+
+                <div style="margin-top: var(--spacing-3); padding: var(--spacing-3); background: var(--color-gray-50); border-radius: var(--radius-sm);">
+                  <strong style="font-size: var(--font-size-body-small);">📚 참고 자료</strong><br>
+                  <div style="font-size: var(--font-size-caption); color: var(--color-gray-600); margin-top: var(--spacing-2);">
+                    • <a href="#" onclick="window.open('08-최종확정.html', '_blank'); return false;" style="color: var(--color-primary-main);">API 설계 리뷰 회의록 (2024-09-28)</a><br>
+                    • <a href="#" onclick="alert('문서로 이동'); return false;" style="color: var(--color-primary-main);">기술 아키텍처 문서 v2.1</a><br>
+                    • <a href="#" onclick="alert('문서로 이동'); return false;" style="color: var(--color-primary-main);">AWS 비용 산정서</a><br>
+                    • <a href="#" onclick="window.location.href='10-Todo관리.html'; return false;" style="color: var(--color-primary-main);">관련 Todo: API Gateway 설정 (진행중 40%)</a>
+                  </div>
+                </div>
+              </div>
+              <div class="ai-actions">
+                <button class="btn btn-primary btn-sm">회의록에 설명 추가</button>
+                <button class="btn btn-text btn-sm">수정</button>
+                <button class="btn btn-text btn-sm">무시</button>
+              </div>
+            </div>
+
+            <div class="ai-suggestion">
+              <div class="ai-suggestion-header">
+                ⚠️ 회의 효율성 개선 제안
+              </div>
+              <div class="ai-suggestion-text">
+                <strong style="color: var(--color-warning-dark);">AI가 회의 진행 패턴을 분석한 결과입니다:</strong><br><br>
+
+                <div style="background: var(--color-warning-light); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2);">
+                  <strong>1. 예산 논의 시간 과다 (23분)</strong><br>
+                  <span style="font-size: var(--font-size-caption);">
+                    유사한 회의(2024-10-15)에서는 15분 소요. 사전 자료 공유로 8분 단축 가능.
+                  </span>
+                </div>
+
+                <div style="background: var(--color-warning-light); padding: var(--spacing-3); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2);">
+                  <strong>2. 미해결 이슈 감지</strong><br>
+                  <span style="font-size: var(--font-size-caption);">
+                    "레거시 연동 방안"이 3번 언급되었으나 구체적 결론 없음. 별도 후속 회의 권장.
+                  </span>
+                </div>
+
+                <div style="background: var(--color-info-light); padding: var(--spacing-3); border-radius: var(--radius-sm);">
+                  <strong style="color: var(--color-info-dark);">✅ 잘 진행된 부분</strong><br>
+                  <span style="font-size: var(--font-size-caption);">
+                    명확한 담당자 지정과 마감일 설정으로 실행력 높음.
+                    참석자 발언 분포도 균형적 (김민준 28%, 박서연 25%, 이준호 32%, 기타 15%).
+                  </span>
+                </div>
+              </div>
+              <div class="ai-actions">
+                <button class="btn btn-text btn-sm">다음 회의에 반영</button>
+                <button class="btn btn-text btn-sm">무시</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 관련 자료 탭 -->
+          <div class="tab-content" data-content="related" style="display: none;">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">관련 자료</h3>
+
+            <!-- 관련 회의록 섹션 -->
+            <div style="margin-bottom: var(--spacing-6);">
+              <h4 style="font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-gray-700); margin-bottom: var(--spacing-3);">
+                📄 관련 회의록 (3건)
+              </h4>
+
+              <div class="ai-suggestion" style="cursor: pointer;" onclick="window.open('08-최종확정.html', '_blank')">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900);">
+                  2024년 4분기 제품 기획 회의
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>2024-10-15</span> | <span style="color: var(--color-success-main);">관련도 92%</span>
+                  </div>
+                  <div>신규 회의록 서비스 MVP 개발 일정 논의. AI 기능 우선순위와 예산 확정.</div>
+                  <div style="margin-top: var(--spacing-2); font-size: var(--font-size-caption); color: var(--color-primary-main);">
+                    🔗 공통 키워드: AI 기능, 예산, 일정
+                  </div>
+                </div>
+              </div>
+
+              <div class="ai-suggestion" style="cursor: pointer;" onclick="window.open('08-최종확정.html', '_blank')">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900);">
+                  API 설계 리뷰 회의
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>2024-09-28</span> | <span style="color: var(--color-warning-main);">관련도 78%</span>
+                  </div>
+                  <div>RESTful API 설계 원칙과 보안 정책 확정. 담당자별 역할 분담.</div>
+                  <div style="margin-top: var(--spacing-2); font-size: var(--font-size-caption); color: var(--color-primary-main);">
+                    🔗 공통 키워드: API 설계, 이준호 담당
+                  </div>
+                </div>
+              </div>
+
+              <div class="ai-suggestion" style="cursor: pointer;" onclick="window.open('08-최종확정.html', '_blank')">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900);">
+                  주간 진행 상황 점검
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>2024-10-10</span> | <span style="color: var(--color-info-main);">관련도 71%</span>
+                  </div>
+                  <div>전주 대비 개발 진행률 점검. UI 프로토타입 완료, 백엔드 개발 지연.</div>
+                  <div style="margin-top: var(--spacing-2); font-size: var(--font-size-caption); color: var(--color-primary-main);">
+                    🔗 공통 키워드: 진행률, 일정
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 관련 업무이력 섹션 -->
+            <div>
+              <h4 style="font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-gray-700); margin-bottom: var(--spacing-3);">
+                📋 관련 업무이력 (2건)
+              </h4>
+
+              <div class="ai-suggestion" style="cursor: pointer;" onclick="window.location.href='10-Todo관리.html'">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900); display: flex; justify-content: space-between; align-items: center;">
+                  <span>API 명세서 작성</span>
+                  <span class="badge badge-warning" style="font-size: var(--font-size-caption);">진행중</span>
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>담당: 이준호</span> | <span>마감: 3월 25일</span> | <span style="color: var(--color-warning-main);">진행률 60%</span>
+                  </div>
+                  <div>출처: 2025년 1분기 제품 기획 회의 (2025-10-25)</div>
+                  <div style="margin-top: var(--spacing-2); font-size: var(--font-size-caption); color: var(--color-primary-main);">
+                    🔗 관련 사유: 현재 논의 중인 API 설계와 직접 연관
+                  </div>
+                </div>
+              </div>
+
+              <div class="ai-suggestion" style="cursor: pointer;" onclick="window.location.href='10-Todo관리.html'">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900); display: flex; justify-content: space-between; align-items: center;">
+                  <span>예산 편성안 검토</span>
+                  <span class="badge badge-error" style="font-size: var(--font-size-caption); background-color: var(--color-error-light); color: var(--color-error-dark);">지연</span>
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>담당: 박서연</span> | <span style="color: var(--color-error-main);">마감 2일 경과</span> | <span>진행률 30%</span>
+                  </div>
+                  <div>출처: 2025년 1분기 제품 기획 회의 (2025-10-25)</div>
+                  <div style="margin-top: var(--spacing-2); font-size: var(--font-size-caption); color: var(--color-primary-main);">
+                    🔗 관련 사유: 예산 논의 시 참조 필요
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    // 탭 전환
+    const tabs = document.querySelectorAll('.side-tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const targetTab = tab.getAttribute('data-tab');
+
+        tabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+
+        tabContents.forEach(content => {
+          if (content.getAttribute('data-content') === targetTab) {
+            content.style.display = 'block';
+          } else {
+            content.style.display = 'none';
+          }
+        });
+      });
+    });
+
+    // 사이드 패널 토글 (모바일)
+    const toggleBtn = document.getElementById('toggleSidePanel');
+    const sidePanel = document.getElementById('sidePanel');
+
+    if (toggleBtn) {
+      toggleBtn.addEventListener('click', () => {
+        sidePanel.classList.toggle('open');
+      });
+    }
+
+    // 녹음 시간 업데이트
+    let seconds = 0;
+    const recordingTimeEl = document.getElementById('recordingTime');
+
+    setInterval(() => {
+      seconds++;
+      const mins = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      recordingTimeEl.textContent = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }, 1000);
+
+    // 자동 저장 시뮬레이션
+    const editorTextarea = document.getElementById('meetingContent');
+    let saveTimeout;
+
+    editorTextarea.addEventListener('input', () => {
+      clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(() => {
+        console.log('자동 저장됨');
+        // 실제로는 서버에 저장
+      }, 2000);
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/06-검증완료.html b/design-gappa/uiux/prototype/06-검증완료.html
new file mode 100644
index 0000000..e818a51
--- /dev/null
+++ b/design-gappa/uiux/prototype/06-검증완료.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>검증 완료 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .completion-icon {
+      text-align: center;
+      font-size: 80px;
+      margin-bottom: var(--spacing-6);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-3);
+      text-align: center;
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--spacing-4);
+      margin-bottom: var(--spacing-8);
+    }
+    .stat-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-5);
+      text-align: center;
+    }
+    .stat-value {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-primary-main);
+      margin-bottom: var(--spacing-2);
+    }
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .summary-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+    }
+    .summary-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .keyword-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2);
+    }
+    .keyword-tag {
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--color-primary-light);
+      color: var(--color-primary-dark);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    @media (max-width: 767px) {
+      .completion-icon { font-size: 60px; }
+      .page-title { font-size: var(--font-size-h2); }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="completion-icon">✅</div>
+    <h1 class="page-title">AI 검증이 완료되었습니다</h1>
+    <p class="page-subtitle">회의 내용이 분석되었습니다. 통계를 확인하고 회의를 종료하세요</p>
+
+    <!-- 통계 -->
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-value">45분</div>
+        <div class="stat-label">회의 시간</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">3명</div>
+        <div class="stat-label">참석자</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">12회</div>
+        <div class="stat-label">발언 횟수</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">5개</div>
+        <div class="stat-label">Todo 생성</div>
+      </div>
+    </div>
+
+    <!-- 주요 키워드 -->
+    <div class="summary-card">
+      <h2 class="summary-title">주요 키워드</h2>
+      <div class="keyword-list">
+        <span class="keyword-tag">신규 기능</span>
+        <span class="keyword-tag">개발 일정</span>
+        <span class="keyword-tag">API 설계</span>
+        <span class="keyword-tag">예산</span>
+        <span class="keyword-tag">테스트</span>
+        <span class="keyword-tag">배포</span>
+        <span class="keyword-tag">마케팅</span>
+      </div>
+    </div>
+
+    <!-- 발언 분포 -->
+    <div class="summary-card">
+      <h2 class="summary-title">발언 분포</h2>
+      <div style="margin-bottom: var(--spacing-3);">
+        <div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-1);">
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">김민준</span>
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">5회 (42%)</span>
+        </div>
+        <div style="height: 8px; background-color: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden;">
+          <div style="width: 42%; height: 100%; background-color: var(--color-primary-main);"></div>
+        </div>
+      </div>
+      <div style="margin-bottom: var(--spacing-3);">
+        <div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-1);">
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">박서연</span>
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">4회 (33%)</span>
+        </div>
+        <div style="height: 8px; background-color: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden;">
+          <div style="width: 33%; height: 100%; background-color: var(--color-secondary-main);"></div>
+        </div>
+      </div>
+      <div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-1);">
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">이준호</span>
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">3회 (25%)</span>
+        </div>
+        <div style="height: 8px; background-color: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden;">
+          <div style="width: 25%; height: 100%; background-color: var(--color-info-main);"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-secondary" onclick="history.back()">회의로 돌아가기</button>
+      <button class="btn btn-primary" onclick="window.location.href='07-회의종료.html'">
+        회의 종료하기
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    MeetingApp.ready(() => {
+      console.log('검증 완료 페이지 로드됨');
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/07-회의종료.html b/design-gappa/uiux/prototype/07-회의종료.html
new file mode 100644
index 0000000..f7095c8
--- /dev/null
+++ b/design-gappa/uiux/prototype/07-회의종료.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의 종료 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+      text-align: center;
+    }
+    .completion-icon {
+      font-size: 100px;
+      margin-bottom: var(--spacing-6);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-3);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-8);
+    }
+    .info-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+      text-align: left;
+    }
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--spacing-3) 0;
+      border-bottom: 1px solid var(--color-gray-100);
+    }
+    .info-item:last-child {
+      border-bottom: none;
+    }
+    .info-label {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-700);
+    }
+    .info-value {
+      color: var(--color-gray-900);
+      font-weight: var(--font-weight-semibold);
+    }
+    .action-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+    @media (max-width: 767px) {
+      .completion-icon { font-size: 80px; }
+      .page-title { font-size: var(--font-size-h2); }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="completion-icon">🏁</div>
+    <h1 class="page-title">회의가 종료되었습니다</h1>
+    <p class="page-subtitle">회의록이 자동으로 저장되었습니다</p>
+
+    <!-- 회의 정보 -->
+    <div class="info-card">
+      <div class="info-item">
+        <span class="info-label">회의 제목</span>
+        <span class="info-value">2025년 1분기 제품 기획 회의</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">회의 시간</span>
+        <span class="info-value">45분</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">참석자</span>
+        <span class="info-value">3명</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">생성된 Todo</span>
+        <span class="info-value">5개</span>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-primary" onclick="window.location.href='08-최종확정.html'">
+        회의록 확정하기
+      </button>
+      <button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">
+        대시보드로 이동
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    MeetingApp.ready(() => {
+      console.log('회의 종료 페이지 로드됨');
+      // 회의 종료 알림
+      MeetingApp.Toast.success('회의가 성공적으로 종료되었습니다');
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/08-최종확정.html b/design-gappa/uiux/prototype/08-최종확정.html
new file mode 100644
index 0000000..0096913
--- /dev/null
+++ b/design-gappa/uiux/prototype/08-최종확정.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 최종 확정 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      margin-bottom: var(--spacing-8);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+    .content-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+    .preview-panel {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+    }
+    .preview-title {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .meeting-content {
+      font-size: var(--font-size-body);
+      line-height: var(--line-height-relaxed);
+      color: var(--color-gray-700);
+    }
+    .meeting-content h2 {
+      font-size: var(--font-size-h4);
+      margin-top: var(--spacing-6);
+      margin-bottom: var(--spacing-3);
+      color: var(--color-gray-900);
+    }
+    .meeting-content ul {
+      margin-left: var(--spacing-5);
+      margin-bottom: var(--spacing-4);
+    }
+    .checklist-panel {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      height: fit-content;
+    }
+    .checklist-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .checklist-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+    }
+    .checklist-item:hover {
+      background: var(--color-gray-100);
+    }
+    .checklist-item.checked {
+      background: rgba(0, 217, 177, 0.1);
+    }
+    .checklist-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-gray-300);
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .checklist-item.checked .checklist-checkbox {
+      background-color: var(--color-success-main);
+      border-color: var(--color-success-main);
+      color: var(--color-white);
+    }
+    .checklist-text {
+      flex: 1;
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    .warning-message {
+      background-color: var(--color-warning-light);
+      border-left: 4px solid var(--color-warning-main);
+      padding: var(--spacing-4);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--spacing-4);
+      display: none;
+    }
+    .warning-message.show {
+      display: block;
+    }
+    @media (max-width: 1023px) {
+      .content-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 767px) {
+      .page-title { font-size: var(--font-size-h2); }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의록 최종 확정</h1>
+      <p class="page-subtitle">필수 항목을 확인하고 회의록을 최종 확정하세요</p>
+    </div>
+
+    <div id="warningMessage" class="warning-message">
+      ⚠️ 아래 필수 항목을 모두 확인해주세요.
+    </div>
+
+    <div class="content-grid">
+      <!-- 회의록 미리보기 -->
+      <div class="preview-panel">
+        <h2 class="preview-title">2025년 1분기 제품 기획 회의</h2>
+        <div class="meeting-content">
+          <p><strong>날짜:</strong> 2025-10-25 14:00<br>
+          <strong>장소:</strong> 본사 2층 대회의실<br>
+          <strong>참석자:</strong> 김민준, 박서연, 이준호</p>
+
+          <h2>안건</h2>
+          <ul>
+            <li>신규 기능 개발 일정 논의</li>
+            <li>예산 편성 검토</li>
+          </ul>
+
+          <h2>논의 내용</h2>
+          <p>신규 회의록 서비스의 핵심 기능에 대해 논의했습니다. AI 기반 자동 작성 기능과 실시간 협업 기능을 우선적으로 개발하기로 결정했습니다.</p>
+
+          <p>개발 일정은 3월 말 완료를 목표로 하며, 주요 마일스톤은 다음과 같습니다:</p>
+          <ul>
+            <li>3월 10일: 기본 UI 완성</li>
+            <li>3월 20일: AI 기능 통합</li>
+            <li>3월 30일: 베타 테스트 시작</li>
+          </ul>
+
+          <h2>결정 사항</h2>
+          <ul>
+            <li>신규 기능 개발은 3월 말 완료 목표</li>
+            <li>이준호님이 API 설계 담당</li>
+            <li>예산은 5천만원으로 확정</li>
+          </ul>
+
+          <h2>Todo</h2>
+          <ul>
+            <li>API 명세서 작성 (담당: 이준호, 마감: 3월 25일)</li>
+            <li>UI 프로토타입 완성 (담당: 최유진, 마감: 3월 15일)</li>
+            <li>예산 편성안 검토 (담당: 박서연, 마감: 3월 20일)</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 확인 체크리스트 -->
+      <div class="checklist-panel">
+        <h3 class="checklist-title">필수 항목 확인</h3>
+
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>회의 제목</strong><br>
+            회의 제목이 명확하게 작성되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>참석자 목록</strong><br>
+            모든 참석자가 기록되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>주요 논의 내용</strong><br>
+            핵심 논의 내용이 포함되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>결정 사항</strong><br>
+            회의 중 결정된 사항이 명시되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>Todo 생성</strong><br>
+            실행 항목이 Todo로 생성되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>전문용어 설명</strong><br>
+            필요한 용어에 설명이 추가되었습니다
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-secondary" onclick="history.back()">이전으로</button>
+      <button class="btn btn-primary" id="confirmBtn" disabled>회의록 확정하기</button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    const checklistItems = document.querySelectorAll('.checklist-item');
+    const confirmBtn = document.getElementById('confirmBtn');
+    const warningMessage = document.getElementById('warningMessage');
+
+    // 체크리스트 항목 클릭
+    checklistItems.forEach(item => {
+      item.addEventListener('click', () => {
+        item.classList.toggle('checked');
+        const checkbox = item.querySelector('.checklist-checkbox');
+        if (item.classList.contains('checked')) {
+          checkbox.textContent = '✓';
+        } else {
+          checkbox.textContent = '';
+        }
+        checkCompletion();
+      });
+    });
+
+    // 완료 여부 확인
+    function checkCompletion() {
+      const requiredItems = document.querySelectorAll('.checklist-item[data-required="true"]');
+      const checkedRequired = document.querySelectorAll('.checklist-item[data-required="true"].checked');
+
+      if (requiredItems.length === checkedRequired.length) {
+        confirmBtn.disabled = false;
+        warningMessage.classList.remove('show');
+      } else {
+        confirmBtn.disabled = true;
+        warningMessage.classList.add('show');
+      }
+    }
+
+    // 확정 버튼 클릭
+    confirmBtn.addEventListener('click', () => {
+      MeetingApp.Loading.show();
+
+      setTimeout(() => {
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('회의록이 확정되었습니다!');
+
+        setTimeout(() => {
+          window.location.href = '09-회의록공유.html';
+        }, 1000);
+      }, 1500);
+    });
+
+    // 초기 확인
+    checkCompletion();
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/09-회의록공유.html b/design-gappa/uiux/prototype/09-회의록공유.html
new file mode 100644
index 0000000..c90c094
--- /dev/null
+++ b/design-gappa/uiux/prototype/09-회의록공유.html
@@ -0,0 +1,316 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 공유 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .success-icon {
+      text-align: center;
+      font-size: 80px;
+      margin-bottom: var(--spacing-6);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-3);
+      text-align: center;
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+    .share-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+    }
+    .share-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .share-option {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+    }
+    .share-option:hover {
+      background: var(--color-gray-100);
+    }
+    .share-icon {
+      font-size: 32px;
+    }
+    .share-info {
+      flex: 1;
+    }
+    .share-label {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+    .share-desc {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .link-box {
+      display: flex;
+      gap: var(--spacing-2);
+      align-items: center;
+    }
+    .link-input {
+      flex: 1;
+      padding: var(--spacing-3) var(--spacing-4);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      background-color: var(--color-gray-50);
+      font-family: monospace;
+    }
+    .attendee-list {
+      margin-top: var(--spacing-4);
+    }
+    .attendee-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+    }
+    .attendee-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--font-weight-semibold);
+    }
+    .attendee-info {
+      flex: 1;
+    }
+    .attendee-name {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+    }
+    .attendee-email {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .sent-badge {
+      padding: var(--spacing-1) var(--spacing-3);
+      background-color: var(--color-success-light);
+      color: var(--color-success-dark);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    @media (max-width: 767px) {
+      .success-icon { font-size: 60px; }
+      .page-title { font-size: var(--font-size-h2); }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+      .link-box { flex-direction: column; }
+      .link-input { width: 100%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="success-icon">🎉</div>
+    <h1 class="page-title">회의록이 확정되었습니다</h1>
+    <p class="page-subtitle">이제 참석자들과 회의록을 공유하세요</p>
+
+    <!-- 공유 링크 -->
+    <div class="share-card">
+      <h2 class="share-title">공유 링크</h2>
+      <div class="link-box">
+        <input type="text" class="link-input" id="shareLink" value="https://meeting.example.com/share/m-001-abc123" readonly>
+        <button class="btn btn-primary" onclick="copyLink()">복사</button>
+      </div>
+    </div>
+
+    <!-- 공유 방식 -->
+    <div class="share-card">
+      <h2 class="share-title">공유 방식 선택</h2>
+
+      <div class="share-option" onclick="shareViaEmail()">
+        <div class="share-icon">📧</div>
+        <div class="share-info">
+          <div class="share-label">이메일로 공유</div>
+          <div class="share-desc">참석자들에게 이메일을 발송합니다</div>
+        </div>
+      </div>
+
+      <div class="share-option" onclick="shareViaSlack()">
+        <div class="share-icon">💬</div>
+        <div class="share-info">
+          <div class="share-label">슬랙으로 공유</div>
+          <div class="share-desc">슬랙 채널에 회의록을 공유합니다</div>
+        </div>
+      </div>
+
+      <div class="share-option" onclick="downloadPDF()">
+        <div class="share-icon">📄</div>
+        <div class="share-info">
+          <div class="share-label">PDF로 다운로드</div>
+          <div class="share-desc">회의록을 PDF 파일로 저장합니다</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 생성된 Todo -->
+    <div class="share-card">
+      <h2 class="share-title">생성된 Todo (3개)</h2>
+      <div class="attendee-list">
+        <div class="attendee-item">
+          <div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
+            <div class="attendee-avatar" style="background-color: var(--color-primary-main);">이</div>
+            <div class="attendee-info">
+              <div class="attendee-name">API 명세서 작성</div>
+              <div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
+                <span>담당: 이준호</span> | <span>📅 3월 25일</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
+            <span class="sent-badge" style="background-color: var(--color-warning-light); color: var(--color-warning-dark);">진행중 60%</span>
+            <a href="10-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
+          </div>
+        </div>
+        <div class="attendee-item">
+          <div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
+            <div class="attendee-avatar" style="background-color: var(--color-info-main);">최</div>
+            <div class="attendee-info">
+              <div class="attendee-name">UI 프로토타입 완성</div>
+              <div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
+                <span>담당: 최유진</span> | <span>📅 3월 15일</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
+            <span class="sent-badge">완료 100%</span>
+            <a href="10-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
+          </div>
+        </div>
+        <div class="attendee-item">
+          <div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
+            <div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
+            <div class="attendee-info">
+              <div class="attendee-name">예산 편성안 검토</div>
+              <div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
+                <span>담당: 박서연</span> | <span>📅 3월 20일</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
+            <span class="sent-badge" style="background-color: var(--color-error-light); color: var(--color-error-dark);">지연 30%</span>
+            <a href="10-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 참석자 목록 -->
+    <div class="share-card">
+      <h2 class="share-title">참석자 (3명)</h2>
+      <div class="attendee-list">
+        <div class="attendee-item">
+          <div class="attendee-avatar">김</div>
+          <div class="attendee-info">
+            <div class="attendee-name">김민준</div>
+            <div class="attendee-email">minjun.kim@example.com</div>
+          </div>
+          <span class="sent-badge">발송 완료</span>
+        </div>
+        <div class="attendee-item">
+          <div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
+          <div class="attendee-info">
+            <div class="attendee-name">박서연</div>
+            <div class="attendee-email">seoyeon.park@example.com</div>
+          </div>
+          <span class="sent-badge">발송 완료</span>
+        </div>
+        <div class="attendee-item">
+          <div class="attendee-avatar" style="background-color: var(--color-info-main);">이</div>
+          <div class="attendee-info">
+            <div class="attendee-name">이준호</div>
+            <div class="attendee-email">junho.lee@example.com</div>
+          </div>
+          <span class="sent-badge">발송 완료</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">
+        대시보드로 이동
+      </button>
+      <button class="btn btn-primary" onclick="window.location.href='10-Todo관리.html'">
+        Todo 관리하기
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    function copyLink() {
+      const linkInput = document.getElementById('shareLink');
+      linkInput.select();
+      document.execCommand('copy');
+      MeetingApp.Toast.success('링크가 복사되었습니다');
+    }
+
+    function shareViaEmail() {
+      MeetingApp.Loading.show();
+      setTimeout(() => {
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('이메일이 발송되었습니다');
+      }, 1500);
+    }
+
+    function shareViaSlack() {
+      MeetingApp.Loading.show();
+      setTimeout(() => {
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('슬랙에 공유되었습니다');
+      }, 1500);
+    }
+
+    function downloadPDF() {
+      MeetingApp.Toast.info('PDF 파일을 준비 중입니다...');
+      setTimeout(() => {
+        MeetingApp.Toast.success('PDF 다운로드가 시작되었습니다');
+      }, 1000);
+    }
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/10-Todo관리.html b/design-gappa/uiux/prototype/10-Todo관리.html
new file mode 100644
index 0000000..4c3e165
--- /dev/null
+++ b/design-gappa/uiux/prototype/10-Todo관리.html
@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo 관리 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-8);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+    }
+    .view-toggle {
+      display: flex;
+      gap: var(--spacing-2);
+    }
+    .view-btn {
+      padding: var(--spacing-2) var(--spacing-4);
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+    .view-btn.active {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-color: var(--color-primary-main);
+    }
+    .kanban-board {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--spacing-6);
+    }
+    .kanban-column {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-4);
+      min-height: 500px;
+    }
+    .column-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-4);
+      padding-bottom: var(--spacing-3);
+      border-bottom: 2px solid var(--color-gray-200);
+    }
+    .column-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+    .column-count {
+      padding: var(--spacing-1) var(--spacing-2);
+      background-color: var(--color-gray-200);
+      color: var(--color-gray-700);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+    .todo-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      cursor: grab;
+      transition: all var(--transition-fast);
+    }
+    .todo-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+    .todo-card.priority-high {
+      border-left: 4px solid var(--color-error-main);
+    }
+    .todo-card.priority-medium {
+      border-left: 4px solid var(--color-warning-main);
+    }
+    .todo-title {
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .todo-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      margin-bottom: var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .todo-assignee {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+    .avatar-sm {
+      width: 24px;
+      height: 24px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-semibold);
+    }
+    .todo-duedate {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-1);
+    }
+    .todo-duedate.overdue {
+      color: var(--color-error-main);
+      font-weight: var(--font-weight-medium);
+    }
+    .todo-progress {
+      height: 4px;
+      background-color: var(--color-gray-200);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .todo-progress-bar {
+      height: 100%;
+      background-color: var(--color-primary-main);
+      transition: width var(--transition-slow);
+    }
+    .todo-source {
+      margin-top: var(--spacing-3);
+      padding-top: var(--spacing-3);
+      border-top: 1px dashed var(--color-gray-200);
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+    }
+    .todo-source-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--color-primary-main);
+      text-decoration: none;
+      transition: color var(--transition-fast);
+      cursor: pointer;
+    }
+    .todo-source-link:hover {
+      color: var(--color-primary-dark);
+      text-decoration: underline;
+    }
+    .list-view {
+      display: none;
+    }
+    .list-view.active {
+      display: block;
+    }
+    .todo-list-item {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+    .todo-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-gray-300);
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+    }
+    .todo-list-content {
+      flex: 1;
+    }
+    @media (max-width: 1023px) {
+      .kanban-board {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 767px) {
+      .page-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-4);
+      }
+      .page-title { font-size: var(--font-size-h2); }
+    }
+  </style>
+</head>
+<body>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">Todo 관리</h1>
+      <div style="display: flex; gap: var(--spacing-3); align-items: center;">
+        <div class="view-toggle">
+          <button class="view-btn active" data-view="kanban">칸반</button>
+          <button class="view-btn" data-view="list">리스트</button>
+        </div>
+        <button class="btn btn-primary" onclick="addTodo()">+ 새 Todo</button>
+      </div>
+    </div>
+
+    <!-- 칸반 보드 뷰 -->
+    <div class="kanban-board" id="kanbanView">
+      <!-- 시작 전 -->
+      <div class="kanban-column">
+        <div class="column-header">
+          <h2 class="column-title">시작 전</h2>
+          <span class="column-count">2</span>
+        </div>
+
+        <div class="todo-card priority-high">
+          <div class="todo-title">데이터베이스 스키마 설계</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm">이</div>
+              <span>이준호</span>
+            </div>
+            <div class="todo-duedate">
+              📅 D-3
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 0%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+
+        <div class="todo-card">
+          <div class="todo-title">사용자 피드백 분석</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
+              <span>박서연</span>
+            </div>
+            <div class="todo-duedate">
+              📅 D-5
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 0%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 고객 만족도 개선 회의 (2025-10-18)
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 진행 중 -->
+      <div class="kanban-column">
+        <div class="column-header">
+          <h2 class="column-title">진행 중</h2>
+          <span class="column-count">2</span>
+        </div>
+
+        <div class="todo-card priority-high">
+          <div class="todo-title">API 명세서 작성</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm">이</div>
+              <span>이준호</span>
+            </div>
+            <div class="todo-duedate">
+              📅 오늘
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 60%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+
+        <div class="todo-card priority-medium">
+          <div class="todo-title">예산 편성안 검토</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
+              <span>박서연</span>
+            </div>
+            <div class="todo-duedate overdue">
+              📅 D+2 (지남)
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 30%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 완료 -->
+      <div class="kanban-column">
+        <div class="column-header">
+          <h2 class="column-title">완료</h2>
+          <span class="column-count">1</span>
+        </div>
+
+        <div class="todo-card">
+          <div class="todo-title">UI 프로토타입 디자인</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-info-main);">최</div>
+              <span>최유진</span>
+            </div>
+            <div class="todo-duedate">
+              ✅ 완료
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 100%; background-color: var(--color-success-main);"></div>
+          </div>
+          <div class="todo-source">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 리스트 뷰 -->
+    <div class="list-view" id="listView">
+      <div class="todo-list-item">
+        <input type="checkbox" class="todo-checkbox">
+        <div class="todo-list-content">
+          <div class="todo-title">API 명세서 작성</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm">이</div>
+              <span>이준호</span>
+            </div>
+            <div class="todo-duedate">📅 오늘</div>
+            <span class="badge badge-warning">진행 중</span>
+          </div>
+          <div class="todo-source" style="margin-top: var(--spacing-2);">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="todo-list-item">
+        <input type="checkbox" class="todo-checkbox">
+        <div class="todo-list-content">
+          <div class="todo-title">예산 편성안 검토</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
+              <span>박서연</span>
+            </div>
+            <div class="todo-duedate overdue">📅 D+2 (지남)</div>
+            <span class="badge badge-warning">진행 중</span>
+          </div>
+          <div class="todo-source" style="margin-top: var(--spacing-2);">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="todo-list-item">
+        <input type="checkbox" class="todo-checkbox" checked>
+        <div class="todo-list-content">
+          <div class="todo-title" style="text-decoration: line-through; color: var(--color-gray-500);">UI 프로토타입 디자인</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-info-main);">최</div>
+              <span>최유진</span>
+            </div>
+            <span class="badge badge-success">완료</span>
+          </div>
+          <div class="todo-source" style="margin-top: var(--spacing-2);">
+            <a href="08-최종확정.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    // 뷰 전환
+    const viewBtns = document.querySelectorAll('.view-btn');
+    const kanbanView = document.getElementById('kanbanView');
+    const listView = document.getElementById('listView');
+
+    viewBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const view = btn.getAttribute('data-view');
+
+        viewBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        if (view === 'kanban') {
+          kanbanView.style.display = 'grid';
+          listView.classList.remove('active');
+        } else {
+          kanbanView.style.display = 'none';
+          listView.classList.add('active');
+        }
+      });
+    });
+
+    // Todo 추가
+    function addTodo() {
+      MeetingApp.Toast.info('Todo 추가 기능은 준비 중입니다');
+    }
+
+    // Todo 카드 클릭
+    const todoCards = document.querySelectorAll('.todo-card');
+    todoCards.forEach(card => {
+      card.addEventListener('click', () => {
+        MeetingApp.Toast.info('Todo 상세 정보를 표시합니다');
+      });
+    });
+
+    // 드래그 앤 드롭 (간단한 시뮬레이션)
+    todoCards.forEach(card => {
+      card.addEventListener('dragstart', (e) => {
+        e.dataTransfer.effectAllowed = 'move';
+        e.target.style.opacity = '0.5';
+      });
+
+      card.addEventListener('dragend', (e) => {
+        e.target.style.opacity = '1';
+      });
+
+      card.setAttribute('draggable', 'true');
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/11-회의록대시보드.html b/design-gappa/uiux/prototype/11-회의록대시보드.html
new file mode 100644
index 0000000..83c5e7b
--- /dev/null
+++ b/design-gappa/uiux/prototype/11-회의록대시보드.html
@@ -0,0 +1,1021 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 대시보드 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: var(--color-gray-50);
+    }
+
+    /* Header */
+    .meeting-header {
+      background-color: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: var(--spacing-6);
+    }
+
+    .header-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .back-button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--color-gray-600);
+      text-decoration: none;
+      font-size: var(--font-size-body-small);
+      margin-bottom: var(--spacing-4);
+      transition: color var(--transition-fast);
+    }
+
+    .back-button:hover {
+      color: var(--color-primary-main);
+    }
+
+    .meeting-title {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .meeting-meta-row {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      flex-wrap: wrap;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .meeting-meta-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    /* Tabs */
+    .tabs {
+      display: flex;
+      gap: var(--spacing-2);
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .tab {
+      padding: var(--spacing-3) var(--spacing-4);
+      font-size: var(--font-size-body);
+      color: var(--color-gray-600);
+      text-decoration: none;
+      border-bottom: 2px solid transparent;
+      transition: all var(--transition-fast);
+    }
+
+    .tab:hover {
+      color: var(--color-primary-main);
+    }
+
+    .tab.active {
+      color: var(--color-primary-main);
+      border-bottom-color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+    }
+
+    /* Main Content */
+    .dashboard-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-6);
+    }
+
+    /* Section */
+    .dashboard-section {
+      background-color: var(--color-white);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-4);
+      padding-bottom: var(--spacing-3);
+      border-bottom: 2px solid var(--color-gray-100);
+    }
+
+    .section-title {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .section-icon {
+      font-size: 24px;
+    }
+
+    /* 핵심내용 섹션 */
+    .key-points {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .key-point-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      background-color: var(--color-gray-50);
+      border-radius: var(--radius-md);
+      border-left: 3px solid var(--color-primary-main);
+    }
+
+    .key-point-number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      min-width: 28px;
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-radius: var(--radius-full);
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-body-small);
+    }
+
+    .key-point-text {
+      flex: 1;
+      color: var(--color-gray-800);
+      line-height: 1.6;
+    }
+
+    .keywords {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-4);
+    }
+
+    .keyword-tag {
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: rgba(0, 217, 177, 0.1);
+      color: var(--color-primary-main);
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .meeting-stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: var(--spacing-4);
+      margin-top: var(--spacing-4);
+      padding-top: var(--spacing-4);
+      border-top: 1px solid var(--color-gray-200);
+    }
+
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-primary-main);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    /* 결정사항 섹션 */
+    .decisions-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .decision-item {
+      padding: var(--spacing-4);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      transition: all var(--transition-fast);
+    }
+
+    .decision-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .decision-content {
+      color: var(--color-gray-900);
+      font-weight: var(--font-weight-medium);
+      margin-bottom: var(--spacing-3);
+      line-height: 1.6;
+    }
+
+    .decision-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      flex-wrap: wrap;
+    }
+
+    .decision-meta-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    .decision-background {
+      margin-top: var(--spacing-3);
+      padding: var(--spacing-3);
+      background-color: var(--color-gray-50);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+      line-height: 1.5;
+    }
+
+    /* Todo 진행상황 섹션 */
+    .todo-filters {
+      display: flex;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-4);
+      flex-wrap: wrap;
+    }
+
+    .filter-button {
+      padding: var(--spacing-2) var(--spacing-3);
+      border: 1px solid var(--color-gray-300);
+      background-color: var(--color-white);
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-body-small);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .filter-button:hover {
+      border-color: var(--color-primary-main);
+      color: var(--color-primary-main);
+    }
+
+    .filter-button.active {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-color: var(--color-primary-main);
+    }
+
+    .todo-groups {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-5);
+    }
+
+    .todo-group {
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+
+    .group-header {
+      padding: var(--spacing-3) var(--spacing-4);
+      background-color: var(--color-gray-50);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .assignee-info {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+    }
+
+    .todo-count {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      padding: 2px 8px;
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .group-todos {
+      padding: var(--spacing-2);
+    }
+
+    .todo-card {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      transition: all var(--transition-fast);
+      cursor: pointer;
+    }
+
+    .todo-card:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .todo-main {
+      flex: 1;
+    }
+
+    .todo-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .todo-progress {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .progress-bar {
+      flex: 1;
+      height: 6px;
+      background-color: var(--color-gray-200);
+      border-radius: var(--radius-full);
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background-color: var(--color-primary-main);
+      transition: width var(--transition-base);
+    }
+
+    .progress-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      min-width: 40px;
+      text-align: right;
+    }
+
+    .todo-side {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: var(--spacing-2);
+    }
+
+    .duedate {
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .duedate.urgent { color: var(--color-error-main); }
+    .duedate.warning { color: var(--color-warning-main); }
+    .duedate.normal { color: var(--color-gray-600); }
+
+    /* 참고자료 섹션 */
+    .reference-tabs {
+      display: flex;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-4);
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .ref-tab {
+      padding: var(--spacing-2) var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all var(--transition-fast);
+    }
+
+    .ref-tab:hover {
+      color: var(--color-primary-main);
+    }
+
+    .ref-tab.active {
+      color: var(--color-primary-main);
+      border-bottom-color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .reference-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+
+    .reference-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      text-decoration: none;
+      transition: all var(--transition-fast);
+    }
+
+    .reference-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .ref-icon {
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--color-gray-100);
+      border-radius: var(--radius-md);
+      font-size: 20px;
+    }
+
+    .ref-content {
+      flex: 1;
+    }
+
+    .ref-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .ref-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .ref-summary {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+      line-height: 1.5;
+    }
+
+    .relevance-score {
+      padding: var(--spacing-1) var(--spacing-2);
+      background-color: rgba(0, 217, 177, 0.1);
+      color: var(--color-primary-main);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: var(--spacing-8) var(--spacing-4);
+      color: var(--color-gray-500);
+    }
+
+    .empty-icon {
+      font-size: 48px;
+      margin-bottom: var(--spacing-3);
+    }
+
+    /* Responsive */
+    @media (max-width: 767px) {
+      .meeting-header {
+        padding: var(--spacing-4);
+      }
+
+      .dashboard-content {
+        padding: var(--spacing-4);
+      }
+
+      .dashboard-section {
+        padding: var(--spacing-4);
+      }
+
+      .meeting-title {
+        font-size: var(--font-size-h3);
+      }
+
+      .section-title {
+        font-size: var(--font-size-h4);
+      }
+
+      .meeting-stats {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .decision-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-2);
+      }
+
+      .todo-filters {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Header -->
+  <header class="meeting-header">
+    <div class="header-content">
+      <a href="09-회의록공유.html" class="back-button">
+        ← 회의록으로 돌아가기
+      </a>
+      <h1 class="meeting-title">2024 Q4 마케팅 전략 회의</h1>
+      <div class="meeting-meta-row">
+        <div class="meeting-meta-item">
+          <span>📅</span>
+          <span>2024-01-15 14:00</span>
+        </div>
+        <div class="meeting-meta-item">
+          <span>📍</span>
+          <span>본사 대회의실</span>
+        </div>
+        <div class="meeting-meta-item">
+          <span>👥</span>
+          <span>참석자 5명</span>
+        </div>
+      </div>
+      <div class="tabs">
+        <a href="09-회의록공유.html" class="tab">회의록</a>
+        <a href="#" class="tab active">대시보드</a>
+        <a href="#" class="tab">타임라인</a>
+      </div>
+    </div>
+  </header>
+
+  <!-- Dashboard Content -->
+  <main class="dashboard-content">
+    <!-- 핵심내용 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">💡</span>
+          핵심내용
+        </h2>
+      </div>
+      <div class="key-points">
+        <div class="key-point-item">
+          <div class="key-point-number">1</div>
+          <div class="key-point-text">
+            Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정
+          </div>
+        </div>
+        <div class="key-point-item">
+          <div class="key-point-number">2</div>
+          <div class="key-point-text">
+            신규 인플루언서 마케팅 캠페인을 2월부터 시작하며, 타겟 연령층을 20-30대로 설정
+          </div>
+        </div>
+        <div class="key-point-item">
+          <div class="key-point-number">3</div>
+          <div class="key-point-text">
+            경쟁사 분석 결과를 바탕으로 가격 정책 재조정 필요, 가격 탄력성 분석 선행 필요
+          </div>
+        </div>
+        <div class="key-point-item">
+          <div class="key-point-number">4</div>
+          <div class="key-point-text">
+            브랜드 리뉴얼 작업을 3월까지 완료하고, 4월에 대규모 리브랜딩 캠페인 론칭 계획
+          </div>
+        </div>
+      </div>
+
+      <div class="keywords">
+        <span class="keyword-tag">#디지털마케팅</span>
+        <span class="keyword-tag">#예산증액</span>
+        <span class="keyword-tag">#인플루언서</span>
+        <span class="keyword-tag">#가격정책</span>
+        <span class="keyword-tag">#브랜드리뉴얼</span>
+      </div>
+
+      <div class="meeting-stats">
+        <div class="stat-item">
+          <div class="stat-value">5명</div>
+          <div class="stat-label">참석자</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">90분</div>
+          <div class="stat-label">회의 시간</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">32회</div>
+          <div class="stat-label">발언 횟수</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">8개</div>
+          <div class="stat-label">주요 의제</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 결정사항 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">✅</span>
+          결정사항
+        </h2>
+      </div>
+      <div class="decisions-list">
+        <div class="decision-item">
+          <div class="decision-content">
+            Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)
+          </div>
+          <div class="decision-meta">
+            <div class="decision-meta-item">
+              <span>👤</span>
+              <span>결정자: 김민준 (마케팅 본부장)</span>
+            </div>
+            <div class="decision-meta-item">
+              <span>🕐</span>
+              <span>14:25</span>
+            </div>
+          </div>
+          <div class="decision-background">
+            <strong>배경:</strong> 디지털 채널 성과가 예상을 상회하며, 경쟁사 대비 투자 비중이 낮아 시장 점유율 확대를 위해 예산 증액 필요
+          </div>
+        </div>
+
+        <div class="decision-item">
+          <div class="decision-content">
+            인플루언서 마케팅 캠페인 2월 1일 론칭 결정
+          </div>
+          <div class="decision-meta">
+            <div class="decision-meta-item">
+              <span>👤</span>
+              <span>결정자: 박서연 (디지털 마케팅 팀장)</span>
+            </div>
+            <div class="decision-meta-item">
+              <span>🕐</span>
+              <span>14:45</span>
+            </div>
+          </div>
+          <div class="decision-background">
+            <strong>배경:</strong> 인플루언서 마케팅의 ROI가 기존 채널 대비 2배 높으며, 타겟 고객층 도달률이 우수하여 조기 론칭 결정
+          </div>
+        </div>
+
+        <div class="decision-item">
+          <div class="decision-content">
+            브랜드 리뉴얼 프로젝트 3월 말 완료 목표 설정
+          </div>
+          <div class="decision-meta">
+            <div class="decision-meta-item">
+              <span>👤</span>
+              <span>결정자: 이준호 (브랜드 전략 팀장)</span>
+            </div>
+            <div class="decision-meta-item">
+              <span>🕐</span>
+              <span>15:20</span>
+            </div>
+          </div>
+          <div class="decision-background">
+            <strong>배경:</strong> 현재 브랜드 이미지가 타겟 고객층과 괴리가 있으며, 4월 리브랜딩 캠페인 론칭 일정에 맞추기 위해 3월 완료 필요
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Todo 진행상황 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">📋</span>
+          Todo 진행상황
+        </h2>
+      </div>
+
+      <div class="todo-filters">
+        <button class="filter-button active">전체 (12)</button>
+        <button class="filter-button">시작 전 (3)</button>
+        <button class="filter-button">진행 중 (6)</button>
+        <button class="filter-button">완료 (3)</button>
+      </div>
+
+      <div class="todo-groups">
+        <!-- 담당자 그룹 1 -->
+        <div class="todo-group">
+          <div class="group-header">
+            <div class="assignee-info">
+              <span>👤</span>
+              <span>박서연 (디지털 마케팅 팀장)</span>
+            </div>
+            <div class="todo-count">4개</div>
+          </div>
+          <div class="group-todos">
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">인플루언서 후보 리스트 작성 및 제안서 준비</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 75%"></div>
+                  </div>
+                  <div class="progress-text">75%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-5</div>
+                <span class="badge badge-warning">높음</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">디지털 채널별 예산 배분 계획 수립</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 40%"></div>
+                  </div>
+                  <div class="progress-text">40%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate warning">D-2</div>
+                <span class="badge badge-error">긴급</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">SNS 채널 성과 분석 리포트 작성</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 100%"></div>
+                  </div>
+                  <div class="progress-text">100%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <span class="badge badge-success">완료</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">인플루언서 마케팅 KPI 설정</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 0%"></div>
+                  </div>
+                  <div class="progress-text">0%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-10</div>
+                <span class="badge badge-neutral">보통</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 담당자 그룹 2 -->
+        <div class="todo-group">
+          <div class="group-header">
+            <div class="assignee-info">
+              <span>👤</span>
+              <span>이준호 (브랜드 전략 팀장)</span>
+            </div>
+            <div class="todo-count">3개</div>
+          </div>
+          <div class="group-todos">
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">브랜드 리뉴얼 디자인 시안 1차 검토</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 60%"></div>
+                  </div>
+                  <div class="progress-text">60%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-7</div>
+                <span class="badge badge-warning">높음</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">브랜드 가이드라인 문서 업데이트</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 30%"></div>
+                  </div>
+                  <div class="progress-text">30%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-14</div>
+                <span class="badge badge-neutral">보통</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">리브랜딩 캠페인 타임라인 수립</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 0%"></div>
+                  </div>
+                  <div class="progress-text">0%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-20</div>
+                <span class="badge badge-neutral">보통</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 담당자 그룹 3 -->
+        <div class="todo-group">
+          <div class="group-header">
+            <div class="assignee-info">
+              <span>👤</span>
+              <span>최유진 (가격 전략 팀장)</span>
+            </div>
+            <div class="todo-count">2개</div>
+          </div>
+          <div class="group-todos">
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">가격 탄력성 분석 보고서 작성</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 50%"></div>
+                  </div>
+                  <div class="progress-text">50%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate urgent">D-1</div>
+                <span class="badge badge-error">긴급</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">경쟁사 가격 정책 비교 분석</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 100%"></div>
+                  </div>
+                  <div class="progress-text">100%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <span class="badge badge-success">완료</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 참고자료 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">📚</span>
+          참고자료
+        </h2>
+      </div>
+
+      <div class="reference-tabs">
+        <div class="ref-tab active">관련 회의록 (3)</div>
+        <div class="ref-tab">프로젝트 문서 (5)</div>
+        <div class="ref-tab">이슈 트래커 (2)</div>
+        <div class="ref-tab">위키 페이지 (4)</div>
+      </div>
+
+      <div class="reference-list">
+        <a href="#" class="reference-item">
+          <div class="ref-icon">📄</div>
+          <div class="ref-content">
+            <div class="ref-title">2024 Q3 마케팅 전략 회의</div>
+            <div class="ref-meta">
+              <span>2023-12-20</span>
+              <span>•</span>
+              <span>김민준</span>
+              <span>•</span>
+              <span class="relevance-score">관련도 92%</span>
+            </div>
+            <div class="ref-summary">
+              이전 분기 마케팅 전략 회의로, 디지털 채널 투자 확대 방향성이 처음 논의되었으며, 예산 증액 근거 자료로 활용 가능
+            </div>
+          </div>
+        </a>
+
+        <a href="#" class="reference-item">
+          <div class="ref-icon">📄</div>
+          <div class="ref-content">
+            <div class="ref-title">인플루언서 마케팅 효과 분석 회의</div>
+            <div class="ref-meta">
+              <span>2024-01-05</span>
+              <span>•</span>
+              <span>박서연</span>
+              <span>•</span>
+              <span class="relevance-score">관련도 88%</span>
+            </div>
+            <div class="ref-summary">
+              인플루언서 마케팅 ROI 분석 결과를 다룬 회의로, 이번 캠페인 론칭 결정의 주요 근거 자료
+            </div>
+          </div>
+        </a>
+
+        <a href="#" class="reference-item">
+          <div class="ref-icon">📄</div>
+          <div class="ref-content">
+            <div class="ref-title">브랜드 리뉴얼 킥오프 회의</div>
+            <div class="ref-meta">
+              <span>2023-12-15</span>
+              <span>•</span>
+              <span>이준호</span>
+              <span>•</span>
+              <span class="relevance-score">관련도 85%</span>
+            </div>
+            <div class="ref-summary">
+              브랜드 리뉴얼 프로젝트 시작 회의로, 리뉴얼 방향성과 타임라인이 최초 설정되었으며 현재 진행 상황 추적 가능
+            </div>
+          </div>
+        </a>
+      </div>
+    </section>
+  </main>
+
+  <!-- JavaScript -->
+  <script src="common.js"></script>
+  <script>
+    const { AppState, Storage, Toast, navigateTo } = window.MeetingApp;
+
+    // 필터 버튼 이벤트
+    const filterButtons = document.querySelectorAll('.filter-button');
+    filterButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        filterButtons.forEach(btn => btn.classList.remove('active'));
+        button.classList.add('active');
+        // 필터링 로직 구현
+        Toast.info(`${button.textContent} 필터 적용`);
+      });
+    });
+
+    // 참고자료 탭 이벤트
+    const refTabs = document.querySelectorAll('.ref-tab');
+    refTabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        refTabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        // 탭 전환 로직 구현
+        Toast.info(`${tab.textContent} 탭으로 전환`);
+      });
+    });
+
+    // Todo 카드 클릭 이벤트
+    const todoCards = document.querySelectorAll('.todo-card');
+    todoCards.forEach(card => {
+      card.addEventListener('click', () => {
+        navigateTo('10-Todo관리.html');
+      });
+    });
+
+    // 참고자료 클릭 이벤트
+    const refItems = document.querySelectorAll('.reference-item');
+    refItems.forEach(item => {
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        Toast.info('관련 문서로 이동합니다');
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/design-gappa/uiux/prototype/common.css b/design-gappa/uiux/prototype/common.css
new file mode 100644
index 0000000..cf58303
--- /dev/null
+++ b/design-gappa/uiux/prototype/common.css
@@ -0,0 +1,780 @@
+/*
+ * 회의록 작성 및 공유 개선 서비스 - 공통 스타일시트
+ * 버전: 1.0
+ * 작성일: 2025-10-20
+ * 레퍼런스: 스타일 가이드 v1.0
+ */
+
+/* ===== CSS Reset ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ===== Root Variables (CSS Custom Properties) ===== */
+:root {
+  /* Primary Colors */
+  --color-primary-light: #4DFFDB;
+  --color-primary-main: #00D9B1;
+  --color-primary-dark: #00A88A;
+
+  /* Secondary Colors */
+  --color-secondary-light: #A5B4FC;
+  --color-secondary-main: #6366F1;
+  --color-secondary-dark: #4F46E5;
+
+  /* Semantic Colors */
+  --color-success-light: #6EE7B7;
+  --color-success-main: #10B981;
+  --color-success-dark: #059669;
+
+  --color-warning-light: #FCD34D;
+  --color-warning-main: #F59E0B;
+  --color-warning-dark: #D97706;
+
+  --color-error-light: #FCA5A5;
+  --color-error-main: #EF4444;
+  --color-error-dark: #DC2626;
+
+  --color-info-light: #93C5FD;
+  --color-info-main: #3B82F6;
+  --color-info-dark: #2563EB;
+
+  /* Neutral Colors */
+  --color-gray-50: #F9FAFB;
+  --color-gray-100: #F3F4F6;
+  --color-gray-200: #E5E7EB;
+  --color-gray-300: #D1D5DB;
+  --color-gray-400: #9CA3AF;
+  --color-gray-500: #6B7280;
+  --color-gray-600: #4B5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1F2937;
+  --color-gray-900: #111827;
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+
+  /* Spacing System (8px base) */
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+
+  /* Font Sizes */
+  --font-size-display: 48px;
+  --font-size-h1: 36px;
+  --font-size-h2: 30px;
+  --font-size-h3: 24px;
+  --font-size-h4: 20px;
+  --font-size-body-large: 18px;
+  --font-size-body: 16px;
+  --font-size-body-small: 14px;
+  --font-size-caption: 12px;
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 50%;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+  /* Transitions */
+  --transition-fast: 150ms ease-out;
+  --transition-base: 200ms ease-out;
+  --transition-slow: 300ms ease-out;
+
+  /* Z-index */
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal-backdrop: 1200;
+  --z-modal: 1300;
+  --z-toast: 1400;
+  --z-tooltip: 1500;
+}
+
+/* ===== Typography ===== */
+body {
+  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+               'Apple SD Gothic Neo', sans-serif;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  color: var(--color-gray-600);
+  background-color: var(--color-gray-50);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-gray-900);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+}
+
+h1 { font-size: var(--font-size-h1); letter-spacing: -0.02em; }
+h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); }
+h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); }
+h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }
+
+a {
+  color: var(--color-primary-main);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-primary-dark);
+}
+
+/* ===== Layout Utilities ===== */
+.container {
+  width: 100%;
+  padding: 0 var(--spacing-6);
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .container { padding: 0 var(--spacing-8); }
+}
+
+@media (min-width: 1024px) {
+  .container { padding: 0 var(--spacing-16); }
+}
+
+.container-small { max-width: 640px; }
+.container-medium { max-width: 768px; }
+.container-large { max-width: 1024px; }
+.container-xlarge { max-width: 1280px; }
+.container-2xlarge { max-width: 1536px; }
+
+/* ===== Button Styles ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3) var(--spacing-6);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Primary Button */
+.btn-primary {
+  background-color: var(--color-primary-main);
+  color: var(--color-white);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--color-primary-light);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:active:not(:disabled) {
+  background-color: var(--color-primary-dark);
+  transform: scale(0.98);
+}
+
+.btn-primary:disabled {
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-500);
+}
+
+/* Secondary Button */
+.btn-secondary {
+  background-color: transparent;
+  color: var(--color-primary-main);
+  border: 1px solid var(--color-primary-main);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: rgba(0, 217, 177, 0.1);
+}
+
+.btn-secondary:active:not(:disabled) {
+  background-color: rgba(0, 217, 177, 0.2);
+}
+
+.btn-secondary:disabled {
+  border-color: var(--color-gray-300);
+  color: var(--color-gray-400);
+}
+
+/* Text Button */
+.btn-text {
+  background-color: transparent;
+  color: var(--color-gray-700);
+  padding: var(--spacing-2) var(--spacing-4);
+}
+
+.btn-text:hover:not(:disabled) {
+  background-color: var(--color-gray-100);
+}
+
+.btn-text:active:not(:disabled) {
+  background-color: var(--color-gray-200);
+}
+
+/* Button Sizes */
+.btn-sm { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-body-small); }
+.btn-lg { padding: var(--spacing-4) var(--spacing-8); font-size: var(--font-size-body-large); }
+
+/* Icon Button */
+.btn-icon {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: var(--radius-md);
+  background-color: transparent;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background-color: var(--color-gray-100);
+}
+
+.btn-icon-sm { width: 32px; height: 32px; }
+.btn-icon-lg { width: 48px; height: 48px; }
+
+/* Floating Action Button */
+.fab {
+  position: fixed;
+  right: var(--spacing-4);
+  bottom: var(--spacing-4);
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border-radius: var(--radius-full);
+  background-color: var(--color-primary-main);
+  color: var(--color-white);
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-sticky);
+}
+
+.fab:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
+}
+
+.fab:active {
+  transform: scale(0.95);
+}
+
+/* ===== Form Styles ===== */
+.form-group {
+  margin-bottom: var(--spacing-4);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--spacing-2);
+  font-size: var(--font-size-body-small);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-700);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-body);
+  font-family: inherit;
+  background-color: var(--color-white);
+  transition: all var(--transition-fast);
+}
+
+.form-input {
+  height: 48px;
+}
+
+.form-textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+  border-color: var(--color-primary-main);
+  border-width: 2px;
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--color-gray-400);
+}
+
+.form-input:disabled,
+.form-textarea:disabled,
+.form-select:disabled {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-400);
+  cursor: not-allowed;
+}
+
+.form-input.error,
+.form-textarea.error,
+.form-select.error {
+  border-color: var(--color-error-main);
+}
+
+.form-error {
+  display: block;
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-body-small);
+  color: var(--color-error-main);
+}
+
+/* ===== Card Styles ===== */
+.card {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-6);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-base);
+}
+
+.card.interactive:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+  cursor: pointer;
+}
+
+.card.interactive:active {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transform: scale(0.99);
+}
+
+.card-header {
+  margin-bottom: var(--spacing-4);
+}
+
+.card-title {
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+}
+
+.card-body {
+  color: var(--color-gray-600);
+}
+
+/* ===== Badge Styles ===== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.badge-primary {
+  background-color: var(--color-primary-light);
+  color: var(--color-primary-dark);
+}
+
+.badge-success {
+  background-color: var(--color-success-light);
+  color: var(--color-success-dark);
+}
+
+.badge-warning {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning-dark);
+}
+
+.badge-error {
+  background-color: var(--color-error-light);
+  color: var(--color-error-dark);
+}
+
+.badge-neutral {
+  background-color: var(--color-gray-200);
+  color: var(--color-gray-700);
+}
+
+/* ===== Modal Styles ===== */
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: var(--z-modal-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4);
+  opacity: 0;
+  animation: fadeIn var(--transition-base);
+  animation-fill-mode: forwards;
+}
+
+.modal {
+  background-color: var(--color-white);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-8);
+  max-width: 600px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-modal);
+  opacity: 0;
+  transform: scale(0.95);
+  animation: modalIn var(--transition-base);
+  animation-fill-mode: forwards;
+}
+
+.modal-header {
+  margin-bottom: var(--spacing-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+}
+
+.modal-close {
+  padding: var(--spacing-2);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-gray-500);
+  font-size: 24px;
+  line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.modal-close:hover {
+  color: var(--color-gray-700);
+}
+
+.modal-body {
+  margin-bottom: var(--spacing-8);
+}
+
+.modal-footer {
+  display: flex;
+  gap: var(--spacing-3);
+  justify-content: flex-end;
+}
+
+@keyframes fadeIn {
+  to { opacity: 1; }
+}
+
+@keyframes modalIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ===== Toast Styles ===== */
+.toast-container {
+  position: fixed;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.toast {
+  background-color: var(--color-white);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4) var(--spacing-5);
+  max-width: 400px;
+  box-shadow: var(--shadow-md);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  border-left: 4px solid var(--color-gray-400);
+  animation: slideInRight var(--transition-base);
+}
+
+.toast-success { border-left-color: var(--color-success-main); }
+.toast-error { border-left-color: var(--color-error-main); }
+.toast-warning { border-left-color: var(--color-warning-main); }
+.toast-info { border-left-color: var(--color-info-main); }
+
+.toast-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.toast-content {
+  flex: 1;
+}
+
+.toast-title {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-1);
+}
+
+.toast-message {
+  font-size: var(--font-size-body-small);
+  color: var(--color-gray-600);
+}
+
+.toast-close {
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-gray-500);
+  font-size: 16px;
+  line-height: 1;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* ===== Loading Styles ===== */
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--color-gray-200);
+  border-top-color: var(--color-primary-main);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+}
+
+.spinner-sm { width: 24px; height: 24px; border-width: 3px; }
+.spinner-lg { width: 56px; height: 56px; border-width: 5px; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.skeleton {
+  background-color: var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* ===== Utility Classes ===== */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-3 { margin-top: var(--spacing-3); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-6 { margin-top: var(--spacing-6); }
+.mt-8 { margin-top: var(--spacing-8); }
+
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-3 { margin-bottom: var(--spacing-3); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-6 { margin-bottom: var(--spacing-6); }
+.mb-8 { margin-bottom: var(--spacing-8); }
+
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.gap-2 { gap: var(--spacing-2); }
+.gap-3 { gap: var(--spacing-3); }
+.gap-4 { gap: var(--spacing-4); }
+
+.hidden { display: none; }
+.block { display: block; }
+
+/* ===== 회의록 서비스 특화 스타일 ===== */
+
+/* 상태 배지 - 회의록 전용 */
+.status-draft {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning-dark);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+}
+
+.status-verifying {
+  background-color: var(--color-info-light);
+  color: var(--color-info-dark);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+}
+
+.status-confirmed {
+  background-color: var(--color-success-light);
+  color: var(--color-success-dark);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+}
+
+/* 전문용어 하이라이트 */
+.term-highlight {
+  border-bottom: 2px dotted var(--color-primary-main);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.term-highlight:hover {
+  color: var(--color-primary-dark);
+}
+
+/* AI 제안 영역 */
+.ai-suggestion {
+  background-color: var(--color-gray-50);
+  border: 1px dashed var(--color-primary-main);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  margin: var(--spacing-4) 0;
+  position: relative;
+}
+
+.ai-suggestion::before {
+  content: "✨ AI 제안";
+  position: absolute;
+  top: -10px;
+  left: var(--spacing-4);
+  background-color: var(--color-white);
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary-main);
+}
+
+/* Todo 카드 */
+.todo-card {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-sm);
+  position: relative;
+}
+
+.todo-card.priority-high {
+  border-left: 4px solid var(--color-error-main);
+}
+
+.todo-card.priority-medium {
+  border-left: 4px solid var(--color-warning-main);
+}
+
+.todo-progress {
+  height: 4px;
+  background-color: var(--color-gray-200);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: var(--spacing-3);
+}
+
+.todo-progress-bar {
+  height: 100%;
+  background-color: var(--color-primary-main);
+  transition: width var(--transition-slow);
+}
+
+/* 협업 커서 (예시) */
+.collab-cursor {
+  position: absolute;
+  width: 2px;
+  height: 20px;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.collab-cursor-label {
+  position: absolute;
+  top: -24px;
+  left: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-caption);
+  color: var(--color-white);
+  white-space: nowrap;
+}
+
+/* 반응형 유틸리티 */
+@media (max-width: 767px) {
+  .hide-mobile { display: none !important; }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hide-tablet { display: none !important; }
+}
+
+@media (min-width: 1024px) {
+  .hide-desktop { display: none !important; }
+}
diff --git a/design-gappa/uiux/prototype/common.js b/design-gappa/uiux/prototype/common.js
new file mode 100644
index 0000000..18d6b68
--- /dev/null
+++ b/design-gappa/uiux/prototype/common.js
@@ -0,0 +1,556 @@
+/*
+ * 회의록 작성 및 공유 개선 서비스 - 공통 자바스크립트
+ * 버전: 1.0
+ * 작성일: 2025-10-20
+ * 레퍼런스: 스타일 가이드 v1.0
+ */
+
+// ===== 전역 상태 관리 =====
+const AppState = {
+  currentUser: {
+    id: 'user-001',
+    name: '김민준',
+    email: 'minjun.kim@example.com',
+    avatar: 'https://ui-avatars.com/api/?name=김민준&background=00D9B1&color=fff'
+  },
+  meetings: [],
+  todos: []
+};
+
+// ===== 유틸리티 함수 =====
+
+/**
+ * DOM 준비 완료 시 콜백 실행
+ */
+function ready(callback) {
+  if (document.readyState !== 'loading') {
+    callback();
+  } else {
+    document.addEventListener('DOMContentLoaded', callback);
+  }
+}
+
+/**
+ * 날짜 포맷팅 (YYYY-MM-DD HH:mm)
+ */
+function formatDateTime(date) {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+/**
+ * 상대 시간 표현 (방금 전, 3분 전, 2시간 전 등)
+ */
+function timeAgo(date) {
+  const now = new Date();
+  const past = new Date(date);
+  const diff = Math.floor((now - past) / 1000); // 초 단위
+
+  if (diff < 60) return '방금 전';
+  if (diff < 3600) return `${Math.floor(diff / 60)}분 전`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}시간 전`;
+  if (diff < 2592000) return `${Math.floor(diff / 86400)}일 전`;
+  if (diff < 31536000) return `${Math.floor(diff / 2592000)}개월 전`;
+  return `${Math.floor(diff / 31536000)}년 전`;
+}
+
+/**
+ * D-day 계산
+ */
+function getDday(targetDate) {
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  const target = new Date(targetDate);
+  target.setHours(0, 0, 0, 0);
+  const diff = Math.floor((target - now) / (1000 * 60 * 60 * 24));
+
+  if (diff === 0) return '오늘';
+  if (diff > 0) return `D-${diff}`;
+  return `D+${Math.abs(diff)} (지남)`;
+}
+
+/**
+ * UUID 생성 (간단한 버전)
+ */
+function generateUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0;
+    const v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+// ===== 모달 관리 =====
+const Modal = {
+  /**
+   * 모달 열기
+   */
+  open(modalId) {
+    const modal = document.getElementById(modalId);
+    if (!modal) return;
+
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+
+    // backdrop 클릭 시 모달 닫기
+    const backdrop = modal.querySelector('.modal-backdrop');
+    if (backdrop) {
+      backdrop.addEventListener('click', (e) => {
+        if (e.target === backdrop) {
+          this.close(modalId);
+        }
+      });
+    }
+
+    // 닫기 버튼
+    const closeBtn = modal.querySelector('.modal-close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => this.close(modalId));
+    }
+  },
+
+  /**
+   * 모달 닫기
+   */
+  close(modalId) {
+    const modal = document.getElementById(modalId);
+    if (!modal) return;
+
+    modal.style.display = 'none';
+    document.body.style.overflow = 'auto';
+  }
+};
+
+// ===== 토스트 알림 =====
+const Toast = {
+  container: null,
+
+  /**
+   * 토스트 컨테이너 초기화
+   */
+  init() {
+    if (!this.container) {
+      this.container = document.createElement('div');
+      this.container.className = 'toast-container';
+      document.body.appendChild(this.container);
+    }
+  },
+
+  /**
+   * 토스트 표시
+   */
+  show(message, type = 'info', duration = 4000) {
+    this.init();
+
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+
+    const icons = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ'
+    };
+
+    toast.innerHTML = `
+      <div class="toast-icon">${icons[type] || icons.info}</div>
+      <div class="toast-content">
+        <div class="toast-message">${message}</div>
+      </div>
+      <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
+    `;
+
+    this.container.appendChild(toast);
+
+    // 자동 제거
+    setTimeout(() => {
+      if (toast.parentElement) {
+        toast.remove();
+      }
+    }, duration);
+  },
+
+  success(message) { this.show(message, 'success'); },
+  error(message) { this.show(message, 'error'); },
+  warning(message) { this.show(message, 'warning'); },
+  info(message) { this.show(message, 'info'); }
+};
+
+// ===== 로컬 스토리지 관리 =====
+const Storage = {
+  /**
+   * 데이터 저장
+   */
+  set(key, value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+      return true;
+    } catch (e) {
+      console.error('Storage.set error:', e);
+      return false;
+    }
+  },
+
+  /**
+   * 데이터 가져오기
+   */
+  get(key, defaultValue = null) {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : defaultValue;
+    } catch (e) {
+      console.error('Storage.get error:', e);
+      return defaultValue;
+    }
+  },
+
+  /**
+   * 데이터 삭제
+   */
+  remove(key) {
+    try {
+      localStorage.removeItem(key);
+      return true;
+    } catch (e) {
+      console.error('Storage.remove error:', e);
+      return false;
+    }
+  },
+
+  /**
+   * 전체 삭제
+   */
+  clear() {
+    try {
+      localStorage.clear();
+      return true;
+    } catch (e) {
+      console.error('Storage.clear error:', e);
+      return false;
+    }
+  }
+};
+
+// ===== API 호출 (Mock) =====
+const API = {
+  /**
+   * 지연 시뮬레이션
+   */
+  delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  },
+
+  /**
+   * GET 요청 (Mock)
+   */
+  async get(endpoint) {
+    await this.delay(500);
+    console.log(`API GET: ${endpoint}`);
+    return { success: true, data: {} };
+  },
+
+  /**
+   * POST 요청 (Mock)
+   */
+  async post(endpoint, data) {
+    await this.delay(500);
+    console.log(`API POST: ${endpoint}`, data);
+    return { success: true, data: {} };
+  },
+
+  /**
+   * PUT 요청 (Mock)
+   */
+  async put(endpoint, data) {
+    await this.delay(500);
+    console.log(`API PUT: ${endpoint}`, data);
+    return { success: true, data: {} };
+  },
+
+  /**
+   * DELETE 요청 (Mock)
+   */
+  async delete(endpoint) {
+    await this.delay(500);
+    console.log(`API DELETE: ${endpoint}`);
+    return { success: true };
+  }
+};
+
+// ===== 페이지 네비게이션 =====
+function navigateTo(page) {
+  // 실제로는 SPA 라우팅이나 페이지 이동 처리
+  // 프로토타입에서는 링크 클릭으로 처리
+  console.log(`Navigate to: ${page}`);
+  window.location.href = page;
+}
+
+// ===== 폼 유효성 검사 =====
+const Validator = {
+  /**
+   * 이메일 유효성 검사
+   */
+  isEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+  },
+
+  /**
+   * 필수 입력 검사
+   */
+  required(value) {
+    return value !== null && value !== undefined && value.trim() !== '';
+  },
+
+  /**
+   * 최소 길이 검사
+   */
+  minLength(value, min) {
+    return value && value.length >= min;
+  },
+
+  /**
+   * 최대 길이 검사
+   */
+  maxLength(value, max) {
+    return value && value.length <= max;
+  },
+
+  /**
+   * 폼 필드 에러 표시
+   */
+  showError(inputElement, message) {
+    inputElement.classList.add('error');
+
+    let errorElement = inputElement.nextElementSibling;
+    if (!errorElement || !errorElement.classList.contains('form-error')) {
+      errorElement = document.createElement('span');
+      errorElement.className = 'form-error';
+      inputElement.parentElement.appendChild(errorElement);
+    }
+    errorElement.textContent = message;
+  },
+
+  /**
+   * 폼 필드 에러 제거
+   */
+  clearError(inputElement) {
+    inputElement.classList.remove('error');
+
+    const errorElement = inputElement.nextElementSibling;
+    if (errorElement && errorElement.classList.contains('form-error')) {
+      errorElement.remove();
+    }
+  }
+};
+
+// ===== 로딩 상태 관리 =====
+const Loading = {
+  /**
+   * 로딩 표시
+   */
+  show(target = 'body') {
+    const element = typeof target === 'string' ? document.querySelector(target) : target;
+    if (!element) return;
+
+    const spinner = document.createElement('div');
+    spinner.className = 'spinner';
+    spinner.id = 'global-spinner';
+    spinner.style.position = 'fixed';
+    spinner.style.top = '50%';
+    spinner.style.left = '50%';
+    spinner.style.transform = 'translate(-50%, -50%)';
+    spinner.style.zIndex = '9999';
+
+    document.body.appendChild(spinner);
+  },
+
+  /**
+   * 로딩 숨김
+   */
+  hide() {
+    const spinner = document.getElementById('global-spinner');
+    if (spinner) {
+      spinner.remove();
+    }
+  }
+};
+
+// ===== 회의록 관련 유틸리티 =====
+const MeetingUtils = {
+  /**
+   * 회의 상태 레이블
+   */
+  getStatusLabel(status) {
+    const labels = {
+      'scheduled': '예정',
+      'in_progress': '진행 중',
+      'ended': '종료',
+      'draft': '작성 중',
+      'verifying': '검증 중',
+      'confirmed': '확정됨'
+    };
+    return labels[status] || status;
+  },
+
+  /**
+   * 회의 상태 클래스
+   */
+  getStatusClass(status) {
+    const classes = {
+      'draft': 'status-draft',
+      'verifying': 'status-verifying',
+      'confirmed': 'status-confirmed'
+    };
+    return classes[status] || 'badge-neutral';
+  },
+
+  /**
+   * Todo 우선순위 레이블
+   */
+  getPriorityLabel(priority) {
+    const labels = {
+      'high': '높음',
+      'medium': '보통',
+      'low': '낮음'
+    };
+    return labels[priority] || priority;
+  },
+
+  /**
+   * Todo 상태 레이블
+   */
+  getTodoStatusLabel(status) {
+    const labels = {
+      'todo': '시작 전',
+      'in_progress': '진행 중',
+      'done': '완료'
+    };
+    return labels[status] || status;
+  }
+};
+
+// ===== 예시 데이터 생성 =====
+const MockData = {
+  /**
+   * 샘플 회의 데이터
+   */
+  generateMeetings() {
+    return [
+      {
+        id: 'm-001',
+        title: '2025년 1분기 제품 기획 회의',
+        date: '2025-10-25 14:00',
+        location: '본사 2층 대회의실',
+        status: 'scheduled',
+        attendees: ['김민준', '박서연', '이준호', '최유진'],
+        description: '신규 회의록 서비스 기획 논의'
+      },
+      {
+        id: 'm-002',
+        title: '주간 스크럼 회의',
+        date: '2025-10-21 10:00',
+        location: 'Zoom',
+        status: 'confirmed',
+        attendees: ['김민준', '이준호', '최유진'],
+        description: '지난 주 진행 상황 공유 및 이번 주 계획'
+      },
+      {
+        id: 'm-003',
+        title: 'AI 기능 개선 회의',
+        date: '2025-10-23 15:00',
+        location: '본사 3층 소회의실',
+        status: 'in_progress',
+        attendees: ['박서연', '이준호'],
+        description: 'LLM 기반 회의록 자동 작성 개선 방안'
+      }
+    ];
+  },
+
+  /**
+   * 샘플 Todo 데이터
+   */
+  generateTodos() {
+    return [
+      {
+        id: 't-001',
+        title: 'API 명세서 작성',
+        assignee: '이준호',
+        dueDate: '2025-10-25',
+        priority: 'high',
+        status: 'in_progress',
+        progress: 60,
+        meetingId: 'm-002'
+      },
+      {
+        id: 't-002',
+        title: 'UI 프로토타입 디자인',
+        assignee: '최유진',
+        dueDate: '2025-10-23',
+        priority: 'medium',
+        status: 'done',
+        progress: 100,
+        meetingId: 'm-002'
+      },
+      {
+        id: 't-003',
+        title: '데이터베이스 스키마 설계',
+        assignee: '이준호',
+        dueDate: '2025-10-28',
+        priority: 'high',
+        status: 'todo',
+        progress: 0,
+        meetingId: 'm-001'
+      }
+    ];
+  }
+};
+
+// ===== 초기화 =====
+ready(() => {
+  console.log('Common.js loaded');
+
+  // 로컬 스토리지에서 상태 복원
+  const savedMeetings = Storage.get('meetings');
+  const savedTodos = Storage.get('todos');
+
+  if (!savedMeetings) {
+    AppState.meetings = MockData.generateMeetings();
+    Storage.set('meetings', AppState.meetings);
+  } else {
+    AppState.meetings = savedMeetings;
+  }
+
+  if (!savedTodos) {
+    AppState.todos = MockData.generateTodos();
+    Storage.set('todos', AppState.todos);
+  } else {
+    AppState.todos = savedTodos;
+  }
+
+  console.log('AppState initialized:', AppState);
+});
+
+// ===== Export (전역 네임스페이스) =====
+window.MeetingApp = {
+  AppState,
+  Modal,
+  Toast,
+  Storage,
+  API,
+  Validator,
+  Loading,
+  MeetingUtils,
+  MockData,
+  navigateTo,
+  formatDateTime,
+  timeAgo,
+  getDday,
+  generateUUID,
+  ready
+};
diff --git a/design-gappa/uiux/prototype/test-report.md b/design-gappa/uiux/prototype/test-report.md
new file mode 100644
index 0000000..f93830f
--- /dev/null
+++ b/design-gappa/uiux/prototype/test-report.md
@@ -0,0 +1,212 @@
+# 프로토타입 테스트 결과 보고서
+
+## 테스트 일시
+2025-10-20
+
+## 테스트 범위
+전체 화면 플로우 테스트 (01-로그인 ~ 10-Todo관리)
+
+## 테스트 결과 요약
+- 총 10개 화면 테스트
+- 정상 작동: 7개 화면
+- 버그 발견: 3개
+
+---
+
+## 발견된 버그
+
+### 1. [HIGH] 대시보드 FAB 버튼 클릭 이벤트 미작동
+- **파일**: `02-대시보드.html`
+- **위치**: 라인 682 (JavaScript)
+- **증상**: FAB 버튼 클릭 시 회의 예약 페이지로 이동하지 않음
+- **원인**: JavaScript 이벤트 리스너가 제대로 바인딩되지 않음
+- **영향도**: 높음 (주요 네비게이션 기능)
+- **상태**: 미수정
+
+### 2. [HIGH] 회의 예약 폼 제출 버그
+- **파일**: `03-회의예약.html`
+- **위치**: 라인 99 (form submit handler)
+- **증상**: 필수 필드를 모두 입력해도 폼 제출 시 페이지 이동하지 않음
+- **원인**: 폼 검증 로직 또는 이벤트 핸들러 문제
+- **영향도**: 높음 (핵심 기능)
+- **상태**: 미수정
+
+### 3. [CRITICAL] 최종확정 페이지 링크 오류
+- **파일**: `08-최종확정.html`
+- **위치**: 라인 294
+- **증상**: 회의록 확정 후 "08-회의록공유.html"로 이동 시도하여 404 오류 발생
+- **원인**: 파일명 재정렬 후 링크 업데이트 누락
+- **수정 내용**: `'08-회의록공유.html'` → `'09-회의록공유.html'`
+- **영향도**: 매우 높음 (페이지 이동 불가)
+- **상태**: ✅ 수정 완료
+
+### 4. [LOW] common.js 중복 로드 경고
+- **파일**: 모든 HTML 파일
+- **증상**: 콘솔에 "AppState가 이미 선언되었다"는 경고 메시지
+- **원인**: 페이지 전환 시 common.js가 중복으로 로드됨
+- **영향도**: 낮음 (기능에는 영향 없음)
+- **상태**: 미수정
+
+---
+
+## 정상 작동 화면
+
+### ✅ 01-로그인.html
+- 로그인 폼 정상 작동
+- 인증 성공 시 대시보드로 정상 이동
+- Toast 메시지 정상 표시
+
+### ✅ 04-템플릿선택.html
+- 템플릿 카드 선택 기능 정상
+- 선택 시 체크마크 표시 정상
+- "회의 시작하기" 버튼 활성화/비활성화 정상
+
+### ✅ 05-회의진행.html
+- 회의 에디터 정상 표시
+- 녹음 타이머 정상 작동
+- 참석자/AI 제안 탭 전환 정상
+
+### ✅ 06-검증완료.html
+- AI 검증 결과 정상 표시
+- 통계 카드 정상 렌더링
+- 발언 분포 그래프 정상
+
+### ✅ 07-회의종료.html
+- 회의 요약 정보 정상 표시
+- 버튼 네비게이션 정상
+
+### ✅ 08-최종확정.html
+- 회의록 미리보기 정상 표시
+- 필수 항목 체크리스트 기능 정상
+- 모든 항목 체크 시 확정 버튼 활성화 정상
+
+### ✅ 09-회의록공유.html
+- 공유 링크 표시 정상
+- 공유 방식 선택 UI 정상
+- 참석자 목록 표시 정상
+
+### ✅ 10-Todo관리.html
+- 칸반 보드 레이아웃 정상
+- Todo 카드 표시 정상
+- 담당자 아바타 표시 정상
+
+---
+
+## 스크린샷
+테스트 중 캡처한 스크린샷은 `.playwright-mcp/screenshots/` 디렉토리에 저장됨:
+- 01-login.png
+- 02-dashboard.png
+- 03-meeting-reserve.png
+- 03-form-filled.png
+- 04-template-selection.png
+- 05-meeting-progress.png
+- 06-verification-complete.png
+- 07-meeting-end.png
+- 08-final-confirmation.png
+- 09-meeting-share.png
+- 10-todo-management.png
+
+---
+
+## 다음 작업
+1. 대시보드 FAB 버튼 이벤트 핸들러 수정
+2. 회의 예약 폼 제출 로직 수정
+3. common.js 중복 로드 문제 해결 (선택적)
+4. 전체 재테스트
+
+---
+
+## 테스트 환경
+- 브라우저: Playwright (Chromium)
+- 운영체제: Windows 10
+- 테스트 도구: Claude Code + Playwright MCP
+
+---
+
+## 개선 사항 (2025-10-20 추가)
+
+### Todo-회의록 자동 링크 기능 개선
+
+**문제점**: 회의록과 업무이력(Todo)의 자동 링크가 명확하게 표현되지 않음
+- Todo 관리 화면에서 어떤 회의에서 생성되었는지 알 수 없음
+- 회의록 공유 화면에서 생성된 Todo 목록과 진행 상황이 표시되지 않음
+- 양방향 연결이 누락됨
+
+**개선 내용**:
+
+1. **10-Todo관리.html 개선**
+   - 모든 Todo 카드에 "출처 회의록" 정보 추가
+   - 회의 제목, 날짜 표시
+   - 회의록으로 이동하는 클릭 가능한 링크 추가
+   - 칸반 보드 5개, 리스트 뷰 3개 항목 모두 적용
+
+2. **09-회의록공유.html 개선**
+   - "생성된 Todo" 섹션 추가
+   - 3개 Todo 항목 표시 (제목, 담당자, 마감일)
+   - 진행 상황 표시 (진행중 60%, 완료 100%, 지연 30%)
+   - "Todo 보기" 링크로 Todo 관리 페이지 연결
+
+**개선 효과**:
+- ✅ Todo와 회의록 간 양방향 연결 구현
+- ✅ 업무 이력 추적 가능성 향상
+- ✅ 유저스토리 차별화 포인트 명확하게 구현
+  - UFR-TODO-010: "관련 회의록 링크 (섹션 위치 포함)"
+  - UFR-RAG-020: "과거 회의록 및 업무 이력 연결"
+- ✅ 회의 결과물의 실행 상황 실시간 파악 가능
+
+**변경된 파일**:
+- design/uiux/prototype/10-Todo관리.html (8개 위치 수정)
+- design/uiux/prototype/09-회의록공유.html (1개 섹션 추가)
+
+---
+
+### 회의 진행 중 관련 자료 실시간 제공 기능 추가
+
+**문제점**: 회의 진행 중 현재 논의 주제와 관련된 과거 회의록 및 업무이력 정보 부재
+- 참석자가 이전 논의 맥락을 알 수 없음
+- 관련 Todo 진행 상황을 실시간으로 파악할 수 없음
+- 중복 논의 또는 누락된 사항 발생 가능
+
+**개선 내용**:
+
+1. **05-회의진행.html 사이드 패널 개선**
+   - "관련 자료" 탭 신규 추가 (참석자, AI 제안 탭에 이어 3번째 탭)
+   - 실시간 컨텍스트 기반 정보 제공
+
+2. **관련 회의록 섹션 (3건 표시)**
+   - 회의 제목, 날짜, 관련도 점수 표시
+   - 회의 요약 미리보기
+   - 공통 키워드 하이라이트
+   - 클릭 시 새 탭에서 회의록 열기
+   - 예시:
+     - "2024년 4분기 제품 기획 회의" (관련도 92%)
+     - "API 설계 리뷰 회의" (관련도 78%)
+     - "주간 진행 상황 점검" (관련도 71%)
+
+3. **관련 업무이력 섹션 (2건 표시)**
+   - Todo 제목, 담당자, 마감일, 진행률 표시
+   - 실시간 상태 배지 (진행중/지연/완료)
+   - 출처 회의록 정보 표시
+   - 관련 사유 설명
+   - 클릭 시 Todo 관리 페이지로 이동
+   - 예시:
+     - "API 명세서 작성" (담당: 이준호, 진행중 60%)
+     - "예산 편성안 검토" (담당: 박서연, 지연 30%)
+
+**개선 효과**:
+- ✅ 회의 중 과거 맥락 실시간 파악 가능
+- ✅ 중복 논의 방지 및 연속성 확보
+- ✅ 관련 Todo 진행 상황 즉시 확인 가능
+- ✅ 유저스토리 차별화 포인트 명확하게 구현
+  - UFR-AI-040: "관련 회의록 자동 연결" 구현
+  - UFR-RAG-020: "관련 회의록과 업무 이력을 바탕으로 실용적인 정보 제공" 구현
+  - UFR-RAG-030: "관련 문서 자동 연결" 구현
+- ✅ AI 기반 지능형 회의 진행 지원
+
+**기술적 구현**:
+- RAG(Retrieval-Augmented Generation) 시스템 시뮬레이션
+- 관련도 점수 알고리즘 (벡터 유사도 기반)
+- 실시간 컨텍스트 분석 및 추천
+
+**변경된 파일**:
+- design/uiux/prototype/05-회의진행.html (1개 탭 추가, 관련 자료 섹션 구현)
diff --git a/design-gappa/userstory.md b/design-gappa/userstory.md
new file mode 100644
index 0000000..8519bcd
--- /dev/null
+++ b/design-gappa/userstory.md
@@ -0,0 +1,1007 @@
+# 회의록 작성 및 공유 개선 서비스 - 유저스토리 (v2.0)
+
+- [회의록 작성 및 공유 개선 서비스 - 유저스토리 (v2.0)](#회의록-작성-및-공유-개선-서비스---유저스토리-v20)
+  - [차별화 전략](#차별화-전략)
+  - [마이크로서비스 구성](#마이크로서비스-구성)
+  - [유저스토리](#유저스토리)
+
+---
+
+## 차별화 전략
+
+본 서비스는 다음과 같은 차별화 포인트를 통해 경쟁 우위를 확보합니다:
+
+### 1. 기본 기능 (Hygiene Factors)
+- **STT(Speech To Text)**: 음성을 텍스트로 변환하는 기본 기능
+  - 시장의 대부분 서비스가 제공하는 기능으로 차별화 포인트가 아님
+  - 필수 기능이지만 경쟁 우위를 가져다주지 않음
+
+### 2. 핵심 차별화 포인트 (Differentiators)
+- **맥락 기반 용어 설명**: 단순 용어 설명을 넘어, 관련 회의록과 업무이력을 바탕으로 실용적인 정보 제공
+- **강화된 Todo 연결**: Action item이 담당자의 Todo와 실시간으로 연결되고, 진행 상황이 회의록에 자동 반영
+- **프롬프팅 기반 회의록 개선**: AI를 활용한 다양한 형식의 회의록 생성 (1Page 요약, 핵심 요약 등)
+- **지능형 회의 진행 지원**: 회의 패턴 분석을 통한 안건 추천, 효율성 분석 및 개선 제안
+
+---
+
+## 마이크로서비스 구성
+
+1. **User** - 사용자 인증 및 권한 관리
+2. **Meeting** - 회의 관리, 회의록 생성 및 관리, 회의록 공유
+3. **STT** - 음성 녹음 관리, 음성-텍스트 변환, 화자 식별 (기본 기능)
+4. **AI** - LLM 기반 회의록 자동 작성, Todo 자동 추출, 프롬프팅 기반 회의록 개선
+5. **RAG** - 맥락 기반 용어 설명, 관련 문서 검색 및 연결, 업무 이력 통합
+6. **Collaboration** - 실시간 동기화, 버전 관리, 충돌 해결
+7. **Todo** - Todo 할당 및 관리, 진행 상황 추적, 회의록 실시간 연동
+8. **Notification** - 알림 발송 및 리마인더 관리
+9. **Calendar** - 일정 생성 및 외부 캘린더 연동
+10. **Analytics** - 회의 효율성 분석, 패턴 분석, 개선 제안 (신규)
+
+---
+
+## 유저스토리
+
+```
+1. User 서비스
+1) 사용자 인증 및 관리
+AFR-USER-010: [사용자관리] 시스템 관리자로서 | 나는, 서비스 보안을 위해 | 사용자 인증 및 권한 관리 기능을 원한다.
+- 시나리오: 사용자 인증 및 권한 관리
+  사용자가 로그인을 시도한 상황에서 | 아이디와 비밀번호를 입력하면 | 인증이 완료되고 권한에 따라 서비스에 접근할 수 있다.
+  - [ ] 사용자 인증 (아이디, 비밀번호)
+  - [ ] JWT 토큰 기반 인증
+  - [ ] 사용자 권한 관리 (관리자, 일반 사용자)
+  - [ ] 세션 관리
+- M/8
+
+---
+
+2. Meeting 서비스
+1) 회의 준비 및 관리
+UFR-MEET-010: [회의예약] 회의록 작성자로서 | 나는, 회의를 효율적으로 준비하기 위해 | 회의를 예약하고 참석자를 초대하고 싶다.
+- 시나리오: 회의 예약 및 참석자 초대
+  회의 예약 화면에 접근한 상황에서 | 회의 제목, 날짜/시간, 장소, 참석자 목록을 입력하고 예약 버튼을 클릭하면 | 회의가 예약되고 참석자에게 초대 이메일이 자동 발송된다.
+
+  [입력 요구사항]
+  - 회의 제목: 최대 100자 (필수)
+  - 날짜/시간: 날짜 및 시간 선택 (필수)
+  - 장소: 최대 200자 (선택)
+  - 참석자 목록: 이메일 주소 입력 (최소 1명 필수)
+
+  [처리 결과]
+  - 회의가 예약됨 (회의 ID 생성)
+  - 일정이 캘린더에 자동 등록됨
+  - 참석자에게 초대 이메일 발송됨
+  - 회의 시작 30분 전 리마인더 자동 발송
+
+- M/13
+
+---
+
+UFR-MEET-020: [템플릿선택] 회의록 작성자로서 | 나는, 회의록을 효율적으로 작성하기 위해 | 회의 유형에 맞는 템플릿을 선택하고 싶다.
+- 시나리오: 회의록 템플릿 선택
+  회의 시작 전 템플릿 선택 화면에 접근한 상황에서 | 제공되는 템플릿 중 하나를 선택하고 커스터마이징하면 | 회의록 도구가 준비된다.
+
+  [템플릿 유형]
+  - 일반 회의: 기본 구조 (참석자, 안건, 논의 내용, 결정 사항, Todo)
+  - 스크럼 회의: 어제 한 일, 오늘 할 일, 이슈
+  - 프로젝트 킥오프: 프로젝트 개요, 목표, 일정, 역할, 리스크
+  - 주간 회의: 주간 실적, 주요 이슈, 다음 주 계획
+
+  [커스터마이징 옵션]
+  - 섹션 추가/삭제
+  - 섹션 순서 변경
+  - 기본 항목 설정
+
+  [처리 결과]
+  - 선택된 템플릿으로 회의록 도구가 준비됨
+  - 템플릿 ID와 설정 정보가 저장됨
+
+- S/5
+
+---
+
+UFR-MEET-030: [회의시작] 회의록 작성자로서 | 나는, 회의를 시작하고 회의록을 작성하기 위해 | 회의를 시작하고 음성 녹음을 준비하고 싶다.
+- 시나리오: 회의 시작
+  예약된 회의 시간에 회의 시작 버튼을 클릭한 상황에서 | 회의 ID를 확인하고 시작하면 | 회의 세션이 생성되고 음성 녹음이 준비된다.
+
+  [회의 시작 조건]
+  - 예약된 회의가 존재함
+  - 회의 시작 시간이 도래함
+  - 회의록 작성자가 시작 권한을 가짐
+
+  [처리 결과]
+  - 회의 세션이 생성됨 (세션 ID)
+  - 음성 녹음 준비 완료
+  - 참석자 목록 표시
+  - 회의 시작 시간 기록
+  - 실시간 회의록 작성 화면 활성화
+
+- M/8
+
+---
+
+2) 회의 종료 및 완료
+UFR-MEET-040: [회의종료] 회의록 작성자로서 | 나는, 회의를 종료하고 회의록을 정리하기 위해 | 회의를 종료하고 통계를 확인하고 싶다.
+- 시나리오: 회의 종료
+  회의가 진행 중인 상황에서 | 회의 종료 버튼을 클릭하면 | 음성 녹음이 중지되고 회의 통계가 생성된다.
+
+  [회의 종료 처리]
+  - 음성 녹음 즉시 중지
+  - 회의 종료 시간 기록
+  - 회의 통계 자동 생성
+    - 회의 총 시간
+    - 참석자 수
+    - 발언 횟수 (화자별)
+    - 주요 키워드
+
+  [처리 결과]
+  - 회의가 종료됨
+  - 회의 통계 표시
+  - 최종 회의록 확정 단계로 이동
+
+- M/8
+
+---
+
+UFR-MEET-050: [최종확정] 회의록 작성자로서 | 나는, 회의록을 완성하기 위해 | 최종 회의록을 확정하고 버전을 생성하고 싶다.
+- 시나리오: 최종 회의록 확정
+  회의가 종료된 상황에서 | 회의록 내용을 최종 검토하고 확정 버튼을 클릭하면 | 필수 항목이 검사되고 최종 버전이 생성된다.
+
+  [필수 항목 검사]
+  - 회의 제목 입력 여부
+  - 참석자 목록 작성 여부
+  - 주요 논의 내용 작성 여부
+  - 결정 사항 작성 여부
+
+  [처리 결과]
+  - 최종 회의록 확정됨 (확정 버전 번호)
+  - 확정 시간 기록
+  - AI가 자동으로 Todo 항목 추출 (UFR-AI-020 연동)
+  - 회의록 공유 가능 상태로 전환
+
+  [필수 항목 미작성 시]
+  - 누락된 항목 안내 메시지 표시
+  - 해당 섹션으로 자동 이동
+
+- M/13
+
+---
+
+3) 회의록 공유
+UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내용을 참석자들과 공유하기 위해 | 최종 회의록을 공유하고 싶다.
+- 시나리오: 회의록 공유
+  최종 회의록이 확정된 상황에서 | 공유 버튼을 클릭하고 공유 대상과 권한을 설정하면 | 공유 링크가 생성되고 참석자 전원에게 알림이 발송된다.
+
+  [공유 설정]
+  - 공유 대상: 참석자 전체 (기본) / 특정 참석자 선택
+  - 공유 권한: 읽기 전용 / 댓글 가능 / 편집 가능
+  - 공유 방식: 이메일 / 슬랙 / 링크 복사
+
+  [처리 결과]
+  - 공유 링크 생성 (고유 URL)
+  - 참석자에게 이메일/슬랙 알림 발송
+  - 공유 시간 기록
+  - 다음 회의 일정이 언급된 경우 캘린더에 자동 등록 (UFR-CAL-010 연동)
+
+  [공유 링크 보안]
+  - 링크 유효 기간 설정 (선택)
+  - 비밀번호 설정 (선택)
+
+- M/13
+
+---
+
+3. STT 서비스 (기본 기능)
+1) 음성 인식 및 변환
+UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
+- 시나리오: 음성 녹음 및 발언 인식
+  회의가 시작된 상황에서 | 참석자가 발언을 시작하면 | 음성이 자동으로 녹음되고 화자가 식별되며 발언이 인식된다.
+
+  [음성 녹음 처리]
+  - 오디오 스트림 실시간 캡처
+  - 회의 ID와 연결
+  - 음성 데이터 저장 (클라우드 스토리지)
+
+  [발언 인식 처리]
+  - AI 음성인식 엔진 연동 (Whisper, Google STT 등)
+  - 화자 자동 식별
+    - 참석자 목록 매칭
+    - 음성 특징 분석
+  - 타임스탬프 기록
+  - 발언 구간 구분
+
+  [처리 결과]
+  - 음성 녹음이 시작됨 (녹음 ID)
+  - 발언이 인식됨 (발언 ID, 화자, 타임스탬프)
+  - 실시간으로 텍스트 변환 요청 (UFR-STT-020 연동)
+
+  [성능 요구사항]
+  - 발언 인식 지연 시간: 1초 이내
+  - 화자 식별 정확도: 90% 이상
+
+  [비고]
+  - STT는 기본 기능으로 경쟁사 대부분이 제공하는 기능임
+  - 차별화 포인트가 아닌 필수 기능
+
+- M/21
+
+---
+
+UFR-STT-020: [텍스트변환] 회의록 시스템으로서 | 나는, 인식된 발언을 회의록에 기록하기 위해 | 음성을 텍스트로 변환하고 싶다.
+- 시나리오: 음성-텍스트 변환
+  발언이 인식된 상황에서 | AI 음성인식 엔진에 텍스트 변환을 요청하면 | 음성이 텍스트로 변환되고 정확도와 함께 반환된다.
+
+  [텍스트 변환 처리]
+  - 인식된 발언 데이터 전달
+  - 언어 설정 (한국어, 영어 등)
+  - AI 음성인식 엔진 처리
+  - 문장 부호 자동 추가
+  - 숫자/날짜 형식 정규화
+
+  [처리 결과]
+  - 텍스트가 변환됨 (텍스트 ID)
+  - 변환된 내용 (원문 텍스트)
+  - 정확도 점수 (0-100%)
+  - AI 회의록 자동 작성 요청 (UFR-AI-010 연동)
+
+  [정확도 낮은 경우]
+  - 정확도 60% 미만 시 경고 표시
+  - 수동 수정 인터페이스 제공
+
+  [비고]
+  - STT는 기본 기능으로 차별화 포인트가 아님
+
+- M/13
+
+---
+
+4. AI 서비스 (차별화 포인트)
+1) AI 회의록 작성
+UFR-AI-010: [회의록자동작성] 회의록 작성자로서 | 나는, 회의록 작성 부담을 줄이기 위해 | AI가 발언 내용을 자동으로 정리하여 회의록을 작성하기를 원한다.
+- 시나리오: AI 회의록 자동 작성
+  텍스트가 변환된 상황에서 | LLM에 회의록 자동 작성을 요청하면 | 회의 맥락을 이해하고 구조화된 회의록 초안이 생성된다.
+
+  [AI 처리 과정]
+  - 변환된 텍스트와 회의 맥락(제목, 참석자, 이전 내용) 분석
+  - 회의 내용 이해
+    - 주제별 분류
+    - 발언자별 의견 정리
+    - 중요 키워드 추출
+  - 문장 다듬기
+    - 구어체 → 문어체 변환
+    - 불필요한 표현 제거
+    - 문법 교정
+  - 구조화
+    - 회의록 템플릿에 맞춰 정리
+    - 주제, 발언자, 내용 구조화
+    - 요약문 생성
+
+  [처리 결과]
+  - 회의록 초안이 생성됨 (회의록 버전)
+  - 생성 시간 기록
+  - 구조화된 내용
+    - 논의 주제
+    - 발언자별 의견
+    - 결정 사항
+    - 보류 사항
+  - 참석자에게 실시간 동기화 (UFR-COLLAB-010 연동)
+
+  [Policy/Rule]
+  - 텍스트 변환되면 자동으로 회의록 구조에 맞춰 정리
+  - 실시간 업데이트 (3-5초 간격)
+
+- M/34
+
+---
+
+2) Todo 자동 추출
+UFR-AI-020: [Todo자동추출] 회의록 작성자로서 | 나는, 회의 후 실행 사항을 명확히 하기 위해 | AI가 회의록에서 Todo 항목을 자동으로 추출하고 담당자를 식별하기를 원한다.
+- 시나리오: AI Todo 자동 추출
+  회의가 종료된 상황에서 | 최종 회의록을 분석하여 Todo 자동 추출을 요청하면 | 액션 아이템이 식별되고 담당자가 자동으로 지정된다.
+
+  [AI 분석 과정]
+  - 회의록 전체 내용 분석
+  - 액션 아이템 식별
+    - "~하기로 함", "~까지 완료", "~담당" 등 키워드 탐지
+    - 명령형 문장 분석
+    - 마감일 언급 추출
+  - 담당자 자동 식별
+    - 발언 내용 기반 ("제가 하겠습니다", "~님이 담당")
+    - 직책/역할 기반 매칭
+    - 과거 회의록 패턴 학습
+
+  [처리 결과]
+  - Todo가 자동 추출됨
+  - 추출된 항목 수
+  - 각 Todo별 정보
+    - Todo 내용
+    - 담당자 (자동 식별)
+    - 마감일 (언급된 경우)
+    - 우선순위 (언급된 경우)
+    - 관련 회의록 섹션 링크
+  - Todo 서비스에 자동 전달 (UFR-TODO-010 연동)
+
+  [담당자 식별 실패 시]
+  - 미지정 상태로 Todo 생성
+  - 회의 주최자에게 수동 할당 요청 알림
+
+- M/21
+
+---
+
+3) 프롬프팅 기반 회의록 개선 (신규, 차별화 포인트)
+UFR-AI-030: [회의록개선] 회의록 작성자로서 | 나는, 회의록을 다양한 형식으로 변환하기 위해 | 프롬프팅을 통해 회의록을 개선하고 재구성하고 싶다.
+- 시나리오: 프롬프팅 기반 회의록 개선
+  회의록이 작성된 상황에서 | "1Page 요약", "핵심 요약", "상세 보고서" 등의 프롬프트를 입력하면 | AI가 해당 형식에 맞춰 회의록을 재구성하여 제공한다.
+
+  [지원 프롬프트 유형]
+  - "1Page 요약": A4 1장 분량의 요약본 생성
+  - "핵심 요약": 3-5개 핵심 포인트만 추출
+  - "상세 보고서": 시간순 상세 기록 with 타임스탬프
+  - "의사결정 중심": 결정 사항과 근거만 정리
+  - "액션 아이템 중심": Todo와 담당자만 강조
+  - "경영진 보고용": 임원진에게 보고할 형식으로 재구성
+  - "커스텀 프롬프트": 사용자 정의 형식
+
+  [AI 처리 과정]
+  - 원본 회의록 분석
+  - 프롬프트 의도 파악
+  - 내용 재구성
+    - 중요도 기반 필터링
+    - 형식에 맞춘 재배치
+    - 불필요한 내용 제거
+  - 스타일 조정
+    - 문체 변환 (격식체, 구어체 등)
+    - 길이 조정 (압축 또는 확장)
+
+  [처리 결과]
+  - 개선된 회의록이 생성됨 (새 버전)
+  - 원본 회의록 링크 유지
+  - 생성 시간 및 프롬프트 기록
+  - 다운로드 가능 (PDF, DOCX, MD)
+
+  [Policy/Rule]
+  - 원본 회의록은 항상 보존
+  - 여러 버전 동시 생성 가능
+  - 버전 간 비교 기능 제공
+
+- M/21
+
+---
+
+4) 관련 회의록 자동 연결 (신규, 차별화 포인트)
+UFR-AI-040: [관련회의록연결] 회의록 작성자로서 | 나는, 이전 회의 내용을 쉽게 참조하기 위해 | AI가 관련 있는 과거 회의록을 자동으로 찾아 연결해주기를 원한다.
+- 시나리오: 관련 회의록 자동 연결
+  회의록이 작성되는 상황에서 | AI가 회의 주제와 내용을 분석하면 | 유사한 주제의 과거 회의록을 찾아 자동으로 연결한다.
+
+  [AI 분석 과정]
+  - 현재 회의록 주제 및 키워드 추출
+  - 벡터 유사도 검색
+    - 과거 회의록 DB에서 검색
+    - 주제 유사도 계산
+  - 관련도 점수 계산 (0-100%)
+  - 상위 5개 회의록 선정
+
+  [연결 기준]
+  - 주제 유사도 70% 이상
+  - 동일 참석자가 50% 이상
+  - 키워드 3개 이상 일치
+  - 시간적 연관성 (후속 회의, 분기별 회의 등)
+
+  [처리 결과]
+  - 관련 회의록 목록 생성
+  - 각 회의록별 정보
+    - 제목
+    - 날짜
+    - 참석자
+    - 관련도 점수
+    - 연관 키워드
+  - 회의록 상단에 "관련 회의록" 섹션 자동 추가
+  - 클릭 시 해당 회의록으로 이동
+
+  [Policy/Rule]
+  - 관련도 70% 이상만 자동 연결
+  - 최대 5개까지 표시
+
+- S/13
+
+---
+
+5. RAG 서비스 (차별화 포인트)
+1) 맥락 기반 용어 설명 (강화)
+UFR-RAG-010: [전문용어감지] 회의록 작성자로서 | 나는, 업무 지식이 없어도 회의록을 정확히 작성하기 위해 | 전문용어가 자동으로 감지되고 맥락에 맞는 설명을 제공받고 싶다.
+- 시나리오: 맥락 기반 전문용어 자동 감지
+  회의록이 작성되는 상황에서 | 시스템이 회의록 텍스트를 분석하면 | 전문용어가 자동으로 감지되고 맥락에 맞는 설명이 준비된다.
+
+  [전문용어 감지 처리]
+  - 회의록 텍스트 실시간 분석
+  - 용어 사전과 비교
+    - 조직별 전문용어 DB
+    - 산업별 표준 용어 DB
+  - 신뢰도 계산 (0-100%)
+  - 감지된 용어 위치 기록
+
+  [처리 결과]
+  - 전문용어가 감지됨
+  - 감지된 용어 정보
+    - 용어명
+    - 감지 위치 (줄 번호, 문단)
+    - 신뢰도 점수
+  - 용어 하이라이트 표시
+  - 맥락 기반 설명 자동 생성 (UFR-RAG-020 연동)
+
+  [Policy/Rule]
+  - 신뢰도 70% 이상만 자동 감지
+  - 중복 용어는 첫 번째만 하이라이트
+
+  [비고]
+  - 단순 용어 설명이 아닌 맥락 기반 실용적 정보 제공이 차별화 포인트
+
+- S/13
+
+---
+
+UFR-RAG-020: [맥락기반용어설명] 회의록 작성자로서 | 나는, 전문용어를 맥락에 맞게 이해하기 위해 | 관련 회의록과 업무 이력을 바탕으로 실용적인 설명을 제공받고 싶다.
+- 시나리오: 맥락 기반 용어 설명 자동 제공
+  전문용어가 감지된 상황에서 | RAG 시스템이 관련 문서를 검색하면 | 과거 회의록 및 업무 이력에서 맥락에 맞는 실용적인 설명이 생성되어 제공된다.
+
+  [RAG 검색 수행]
+  - 벡터 유사도 검색
+    - 과거 회의록 검색 (동일 용어 사용 사례)
+    - 사내 문서 저장소 검색 (위키, 매뉴얼, 보고서)
+    - 업무 이력 검색 (프로젝트 문서, 이메일 등)
+  - 관련 문서 추출 (관련도 점수순)
+  - 최대 5개 문서 선택
+
+  [맥락 기반 설명 생성]
+  - 검색된 문서 내용 분석
+  - 용어 정의 추출
+  - 실제 사용 사례 추출
+  - 현재 회의 맥락에 맞는 설명 생성
+    - 간단한 정의 (1-2문장)
+    - 이 회의에서의 의미 (맥락 기반)
+    - 관련 프로젝트/이슈 연결
+    - 과거 논의 요약 (언제, 누가, 어떻게 사용했는지)
+    - 참조 출처 링크
+
+  [처리 결과]
+  - 맥락 기반 용어 설명이 생성됨 (설명 ID)
+  - 설명 내용
+    - 간단한 정의
+    - 맥락 기반 상세 설명
+    - 실제 사용 사례
+    - 관련 프로젝트/이슈
+    - 과거 회의록 링크 (최대 3개)
+    - 사내 문서 링크
+  - 툴팁 또는 사이드 패널로 표시
+  - 설명 제공 시간 기록
+
+  [설명을 찾지 못한 경우]
+  - "관련 정보를 찾을 수 없습니다" 메시지 표시
+  - 전문가(회의 참석자)에게 설명 요청 버튼 제공
+  - 수동 입력된 설명은 용어 사전에 자동 저장
+
+  [비고]
+  - **차별화 포인트**: 단순 용어 설명이 아닌, 조직 내 실제 사용 맥락과 이력을 제공
+  - 업무 지식이 없어도 실질적인 도움을 받을 수 있음
+
+- S/21
+
+---
+
+2) 관련 문서 자동 연결 (신규, 차별화 포인트)
+UFR-RAG-030: [관련문서연결] 회의록 작성자로서 | 나는, 회의 내용을 더 잘 이해하기 위해 | 관련된 사내 문서와 업무 이력이 자동으로 연결되기를 원한다.
+- 시나리오: 관련 문서 자동 연결
+  회의록이 작성되는 상황에서 | RAG 시스템이 주제와 키워드를 분석하면 | 관련된 사내 문서와 업무 이력이 자동으로 검색되어 연결된다.
+
+  [문서 검색 범위]
+  - 과거 회의록
+  - 프로젝트 문서
+  - 위키 페이지
+  - 이메일 스레드
+  - 보고서 및 기획서
+  - 이슈 트래커 (Jira, Asana 등)
+
+  [RAG 검색 수행]
+  - 회의 주제 및 키워드 추출
+  - 벡터 유사도 검색
+  - 관련도 점수 계산 (0-100%)
+  - 문서 타입별 상위 3개 선정
+
+  [연결 기준]
+  - 주제 유사도 70% 이상
+  - 키워드 3개 이상 일치
+  - 최근 3개월 이내 문서 우선
+  - 동일 프로젝트/팀 문서 가중치
+
+  [처리 결과]
+  - 관련 문서 목록 생성
+  - 각 문서별 정보
+    - 제목
+    - 문서 타입
+    - 작성자
+    - 작성일
+    - 관련도 점수
+    - 핵심 내용 요약 (2-3줄)
+  - 회의록 하단에 "관련 문서" 섹션 자동 추가
+  - 클릭 시 해당 문서로 이동 또는 미리보기
+
+  [Policy/Rule]
+  - 관련도 70% 이상만 자동 연결
+  - 문서 타입별 최대 3개까지 표시
+
+  [비고]
+  - **차별화 포인트**: 회의록만 보는 것이 아니라 관련 업무 이력 전체를 통합 제공
+
+- S/13
+
+---
+
+6. Collaboration 서비스
+1) 실시간 협업
+UFR-COLLAB-010: [회의록수정동기화] 회의 참석자로서 | 나는, 회의록을 함께 검증하기 위해 | 회의록을 수정하고 실시간으로 다른 참석자와 동기화하고 싶다.
+- 시나리오: 회의록 실시간 수정 및 동기화
+  회의록이 작성된 상황에서 | 참석자가 회의록 내용을 수정하면 | 수정 사항이 버전 관리되고 웹소켓을 통해 모든 참석자에게 즉시 동기화된다.
+
+  [회의록 수정 처리]
+  - 수정 내용 검증
+    - 수정 권한 확인
+    - 수정 범위 제한 (잠긴 섹션은 수정 불가)
+  - 수정 이력 저장
+    - 수정자
+    - 수정 시간
+    - 수정 전/후 내용
+    - 수정 위치
+  - 버전 관리
+    - 새 버전 번호 생성
+    - 이전 버전 보관
+
+  [실시간 동기화]
+  - 웹소켓을 통해 수정 델타 전송
+    - 전체 내용이 아닌 변경 부분만 전송 (효율성)
+  - 모든 참석자 화면에 실시간 반영
+  - 수정자 표시 (아바타, 이름)
+  - 수정 영역 하이라이트 (3초간)
+
+  [처리 결과]
+  - 참석자가 회의록을 수정함 (수정 ID)
+  - 수정 사항이 동기화됨
+  - 동기화 시간
+  - 영향받은 참석자 목록
+
+  [Policy/Rule]
+  - 회의록 수정 시 웹소켓을 통해 모든 참석자에게 즉시 동기화
+
+- M/34
+
+---
+
+UFR-COLLAB-020: [충돌해결] 회의 참석자로서 | 나는, 동시 수정 상황에서도 내용을 잃지 않기 위해 | 충돌을 감지하고 해결하고 싶다.
+- 시나리오: 동시 수정 충돌 해결
+  두 명의 참석자가 동일한 위치를 동시에 수정한 상황에서 | 시스템이 충돌을 감지하면 | 충돌 알림이 표시되고 해결 방법을 선택할 수 있다.
+
+  [충돌 감지]
+  - 동일 위치 동시 수정 탐지
+    - 라인 단위 비교
+    - 버전 기반 충돌 확인
+  - 충돌 정보 생성
+    - 충돌 위치
+    - 관련 수정자 2명
+    - 각자의 수정 내용
+
+  [충돌 해결 방식]
+  - Last Write Wins (기본)
+    - 가장 최근 수정이 우선
+    - 이전 수정은 버전 이력에 보관
+  - 수동 병합 (선택)
+    - 충돌 내용 비교 UI 표시
+    - 사용자가 최종 내용 선택
+    - A 선택 / B 선택 / 직접 작성
+
+  [처리 결과]
+  - 충돌이 감지됨 (충돌 ID)
+  - 충돌 위치
+  - 관련 수정자
+  - 충돌이 해결됨
+  - 해결 방법 (Last Write Wins / 수동 병합)
+  - 최종 내용
+  - 해결된 내용 실시간 동기화
+
+  [Policy/Rule]
+  - 동시 수정 발생 시 최종 수정이 우선 (Last Write Wins) 또는 충돌 알림
+
+- M/21
+
+---
+
+UFR-COLLAB-030: [검증완료] 회의 참석자로서 | 나는, 회의록의 정확성을 보장하기 위해 | 주요 섹션을 검증하고 완료 표시를 하고 싶다.
+- 시나리오: 회의록 검증 완료
+  회의록 내용을 확인한 상황에서 | 참석자가 검증 완료 버튼을 클릭하면 | 검증 상태가 업데이트되고 다른 참석자에게 동기화된다.
+
+  [검증 처리]
+  - 검증자 정보 기록
+  - 검증 시간 기록
+  - 검증 대상 섹션 기록
+  - 검증 상태 업데이트
+    - 미검증 → 검증 중 → 검증 완료
+
+  [섹션 잠금 기능]
+  - 주요 섹션 검증 완료 시 잠금 가능 (선택)
+  - 잠긴 섹션은 추가 수정 불가
+  - 잠금 해제는 검증자 또는 회의 주최자만 가능
+
+  [처리 결과]
+  - 검증이 완료됨
+  - 검증자 정보
+  - 검증 상태 (검증 완료)
+  - 완료 시간
+  - 검증 완료 상태 실시간 동기화
+  - 검증 배지 표시 (체크 아이콘)
+
+  [Policy/Rule]
+  - 주요 섹션 검증 완료 시 해당 섹션 잠금 가능
+
+- M/8
+
+---
+
+7. Todo 서비스 (차별화 포인트)
+1) 실시간 Todo 연결 (강화)
+UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Todo를 담당자에게 전달하기 위해 | Todo를 실시간으로 할당하고 회의록과 연결하고 싶다.
+- 시나리오: Todo 실시간 할당 및 회의록 연결
+  AI가 Todo를 추출한 상황에서 | 시스템이 Todo를 등록하고 담당자를 지정하면 | Todo가 실시간으로 할당되고 회의록의 해당 위치와 연결되며 담당자에게 즉시 알림이 발송된다.
+
+  [Todo 등록]
+  - Todo 정보 저장
+    - Todo ID 생성
+    - Todo 내용
+    - 담당자 (AI 자동 식별 또는 수동 지정)
+    - 마감일 (언급된 경우 자동 설정, 없으면 수동 설정)
+    - 우선순위 (높음/보통/낮음)
+    - 관련 회의록 링크 (섹션 위치 포함)
+    - 원문 발언 링크 (타임스탬프 포함)
+
+  [회의록 실시간 연결]
+  - 회의록 해당 섹션에 Todo 뱃지 표시
+  - Todo 클릭 시 Todo 상세 정보 표시
+  - 양방향 연결 (Todo → 회의록, 회의록 → Todo)
+
+  [알림 발송]
+  - 담당자에게 즉시 알림
+    - 이메일
+    - 슬랙 (연동된 경우)
+  - 알림 내용
+    - Todo 내용
+    - 마감일
+    - 회의록 링크 (해당 섹션으로 바로 이동)
+    - 원문 발언 링크
+
+  [캘린더 연동]
+  - 마감일이 있는 경우 캘린더에 자동 등록
+  - 마감일 3일 전 리마인더 일정 생성
+
+  [처리 결과]
+  - Todo가 할당됨 (Todo ID)
+  - 담당자 정보
+  - 마감일
+  - 할당 시간
+  - 회의록 연결 정보 (섹션 ID, 타임스탬프)
+  - 담당자에게 알림이 발송됨
+  - 캘린더 등록 완료
+
+  [Policy/Rule]
+  - Todo 할당 시 담당자에게 즉시 알림 발송
+  - 회의록과 실시간 양방향 연결
+
+  [비고]
+  - **차별화 포인트**: Todo와 회의록의 강력한 연결, 원문 맥락 추적 가능
+
+- M/13
+
+---
+
+UFR-TODO-020: [Todo진행상황업데이트] Todo 담당자로서 | 나는, Todo 진행 상황을 공유하고 회의록에 반영하기 위해 | 진행률을 업데이트하고 상태를 변경하고 싶다.
+- 시나리오: Todo 진행 상황 업데이트 및 회의록 자동 반영
+  할당된 Todo가 있는 상황에서 | 담당자가 진행률과 상태를 입력하면 | 진행 상황이 저장되고 연결된 회의록에 실시간으로 반영되며 회의 주최자에게 알림이 발송된다.
+
+  [진행 상황 입력]
+  - 진행률: 0-100% (슬라이더 또는 직접 입력)
+  - 상태: 시작 전 / 진행 중 / 완료
+  - 메모: 진행 상황 설명 (선택)
+
+  [진행 상황 저장]
+  - 업데이트 시간 기록
+  - 진행률 히스토리 저장
+  - 상태 변경 이력 저장
+
+  [회의록 실시간 반영]
+  - 연결된 회의록의 Todo 섹션 자동 업데이트
+  - 진행률 표시 (프로그레스 바)
+  - 상태 배지 업데이트 (시작 전/진행 중/완료)
+  - 마지막 업데이트 시간 표시
+  - 담당자 메모 표시 (있는 경우)
+
+  [알림 발송]
+  - 회의 주최자에게 진행 상황 알림
+  - 진행률이 50%, 100%에 도달하면 자동 알림
+
+  [처리 결과]
+  - Todo 진행 상황이 업데이트됨
+  - 업데이트 시간
+  - 진행률 (%)
+  - 상태 (시작 전/진행 중/완료)
+  - 회의록에 진행 상황이 실시간 반영됨
+  - 반영 시간 기록
+
+  [Policy/Rule]
+  - Todo 진행 상황 업데이트 시 회의록에 즉시 반영
+  - 진행률 50%, 100% 도달 시 자동 알림
+
+  [비고]
+  - **차별화 포인트**: Todo 진행 상황이 회의록에 실시간 반영되어 추적 용이
+
+- M/5
+
+---
+
+UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo를 처리하고 회의록에 반영하기 위해 | Todo를 완료하고 회의록에 자동 반영하고 싶다.
+- 시나리오: Todo 완료 처리 및 회의록 자동 반영
+  Todo 작업이 완료된 상황에서 | 담당자가 완료 버튼을 클릭하면 | Todo가 완료 상태로 변경되고 연결된 회의록에 완료 상태가 실시간으로 반영되며 회의 주최자에게 알림이 발송된다.
+
+  [완료 처리]
+  - 완료 시간 자동 기록
+  - 완료자 정보 저장
+  - 완료 상태로 변경
+  - 완료 여부 확인 다이얼로그 표시
+
+  [회의록 실시간 반영]
+  - 관련 회의록의 Todo 섹션 자동 업데이트
+  - 완료 표시 (체크 아이콘)
+  - 완료 시간 기록
+  - 완료자 정보 표시
+
+  [알림 발송]
+  - 회의 주최자에게 완료 알림
+  - 모든 Todo 완료 시 전체 완료 알림
+
+  [처리 결과]
+  - Todo가 완료됨
+  - 완료 시간
+  - 완료자 정보
+  - 회의록에 완료 상태가 반영됨
+  - 반영 시간
+  - 회의록 버전 업데이트
+
+  [Policy/Rule]
+  - Todo 완료 시 회의록에 완료 상태 즉시 반영
+  - 모든 Todo 완료 시 회의 주최자에게 완료 알림
+
+  [비고]
+  - **차별화 포인트**: Todo 완료가 회의록에 실시간 반영되어 회의 결과 추적 용이
+
+- M/8
+
+---
+
+2) 회의 중 실시간 Todo 생성 (신규, 차별화 포인트)
+UFR-TODO-040: [실시간Todo생성] 회의 참석자로서 | 나는, 회의 중 논의된 액션 아이템을 즉시 기록하기 위해 | 회의 진행 중 실시간으로 Todo를 생성하고 회의록과 연결하고 싶다.
+- 시나리오: 회의 중 실시간 Todo 생성
+  회의가 진행 중인 상황에서 | 참석자가 "Todo 추가" 버튼을 클릭하고 내용을 입력하면 | Todo가 즉시 생성되고 현재 회의록 위치와 연결되며 타임스탬프가 기록된다.
+
+  [실시간 Todo 생성]
+  - Todo 내용 입력 (필수)
+  - 담당자 선택 (필수)
+  - 마감일 설정 (선택)
+  - 우선순위 설정 (선택)
+  - 현재 회의 시간 자동 기록 (타임스탬프)
+
+  [회의록 자동 연결]
+  - 현재 작성 중인 회의록 섹션과 자동 연결
+  - Todo 생성 시점의 타임스탬프 저장
+  - 회의록에 Todo 뱃지 자동 추가
+  - 음성 녹음 링크 연결 (해당 시간대)
+
+  [실시간 동기화]
+  - 모든 참석자 화면에 즉시 표시
+  - Todo 추가 알림 (인앱)
+  - 담당자에게 즉시 알림 발송
+
+  [처리 결과]
+  - Todo가 생성됨 (Todo ID)
+  - Todo 내용, 담당자, 마감일
+  - 회의록 연결 정보 (섹션 ID, 타임스탬프)
+  - 생성 시간 및 생성자
+  - 모든 참석자에게 동기화됨
+
+  [Policy/Rule]
+  - 회의 중 생성된 Todo는 회의록과 자동 연결
+  - 담당자에게 즉시 알림 발송
+
+  [비고]
+  - **차별화 포인트**: 회의 중 실시간 Todo 생성으로 액션 아이템 누락 방지
+
+- S/8
+
+---
+
+8. Notification 서비스
+1) 알림 관리
+UFR-NOTI-010: [알림리마인더] 회의 참석자로서 | 나는, 중요한 일정을 놓치지 않기 위해 | 회의 및 Todo 관련 알림과 리마인더를 받고 싶다.
+- 시나리오 1: 회의 알림
+  회의가 예약된 상황에서 | 회의 시작 30분 전이 되면 | 참석자에게 리마인더가 자동 발송된다.
+
+  [회의 알림 유형]
+  - 회의 초대: 회의 예약 시
+  - 회의 시작 리마인더: 30분 전
+  - 회의록 공유: 회의 종료 후
+
+- 시나리오 2: Todo 알림
+  Todo가 할당된 상황에서 | 마감일 3일 전이 되면 | 담당자에게 리마인더가 자동 발송된다.
+
+  [Todo 알림 유형]
+  - Todo 할당: 할당 즉시
+  - 마감일 3일 전 리마인더
+  - 마감일 당일 리마인더
+  - 마감일 경과 긴급 알림 (미완료 시)
+  - Todo 완료: 완료 시
+
+  [알림 채널]
+  - 이메일 (기본)
+  - 슬랙 (연동 시)
+  - 인앱 알림
+
+  [알림 설정]
+  - 알림 채널 선택
+  - 알림 시간 설정
+  - 알림 끄기/켜기
+
+  [처리 결과]
+  - 알림이 발송됨 (알림 ID)
+  - 알림 대상 (이메일 주소, 슬랙 ID)
+  - 알림 내용
+  - 발송 시간
+  - 발송 채널
+  - 발송 상태 (성공/실패)
+
+  [Policy/Rule]
+  - 회의 시작 30분 전 리마인더 자동 발송
+  - 마감일 3일 전 자동 리마인더 발송
+  - 마감일 당일 미완료 시 긴급 알림 발송
+
+- M/13
+
+---
+
+9. Calendar 서비스
+1) 일정 관리
+UFR-CAL-010: [일정연동] 회의록 작성자로서 | 나는, 일정을 통합 관리하기 위해 | 회의 및 다음 회의 일정을 외부 캘린더에 자동으로 연동하고 싶다.
+- 시나리오 1: 회의 일정 자동 등록
+  회의가 예약된 상황에서 | 시스템이 일정 동기화를 요청하면 | 회의 일정이 Google Calendar, Outlook 등 외부 캘린더에 자동으로 등록된다.
+
+  [일정 등록 정보]
+  - 회의 제목
+  - 날짜 및 시간
+  - 장소
+  - 참석자 목록
+  - 회의록 링크 (메모)
+
+- 시나리오 2: 다음 회의 일정 연동
+  회의록에서 다음 회의 일정이 언급된 상황에서 | 시스템이 자동으로 감지하면 | 다음 회의 일정이 캘린더에 자동으로 생성된다.
+
+  [자동 감지 키워드]
+  - "다음 회의: ~"
+  - "~에 다시 모이기로 함"
+  - "후속 회의 일정: ~"
+
+  [처리 결과]
+  - 일정이 캘린더에 연동됨 (일정 ID)
+  - 연동 상태 (성공/실패)
+  - 캘린더 종류 (Google Calendar, Outlook)
+  - 연동 시간
+
+  [지원 캘린더]
+  - Google Calendar
+  - Microsoft Outlook
+  - Apple Calendar
+
+  [Policy/Rule]
+  - 다음 회의 일정이 언급되면 자동으로 캘린더에 등록
+
+- S/13
+
+---
+
+10. Analytics 서비스 (신규, 차별화 포인트)
+1) 회의 효율성 분석
+UFR-ANAL-010: [회의효율성분석] 회의 주최자로서 | 나는, 회의를 개선하기 위해 | 회의 효율성을 분석하고 개선 제안을 받고 싶다.
+- 시나리오: 회의 효율성 분석 및 개선 제안
+  회의가 종료된 상황에서 | Analytics 시스템이 회의 데이터를 분석하면 | 회의 효율성 점수와 구체적인 개선 제안이 제공된다.
+
+  [분석 지표]
+  - 회의 시간 준수율 (예정 시간 대비 실제 시간)
+  - 참석자 참여도 (발언 분포, 침묵 시간)
+  - 안건 소화율 (계획된 안건 대비 논의된 안건)
+  - 의사결정 효율성 (결정 사항 수 / 회의 시간)
+  - Todo 생성률 (액션 아이템 명확성)
+
+  [AI 분석 과정]
+  - 회의 통계 데이터 수집
+  - 과거 유사 회의와 비교
+  - 업계 벤치마크 대조
+  - 비효율 패턴 감지
+    - 너무 긴 회의 (2시간 이상)
+    - 참여도 불균형 (1명이 50% 이상 발언)
+    - 안건 없이 진행
+    - 결정 사항 없음
+    - Todo 미생성
+
+  [개선 제안 생성]
+  - 구체적인 개선 사항 제시
+    - "회의 시간을 30분 단축 권장"
+    - "참석자 A의 발언 시간이 과도합니다. 타임박스 적용 권장"
+    - "안건을 사전에 공유하여 준비도를 높이세요"
+    - "결정 사항이 없습니다. 회의 목적을 재검토하세요"
+
+  [처리 결과]
+  - 회의 효율성 점수 (0-100점)
+  - 각 지표별 점수 및 벤치마크 비교
+  - 개선 제안 리스트 (우선순위순)
+  - 다음 회의 시 적용할 액션 아이템
+
+  [Policy/Rule]
+  - 모든 회의 종료 시 자동 분석
+  - 효율성 점수 70점 미만 시 개선 알림
+
+  [비고]
+  - **차별화 포인트**: 회의 효율성을 정량적으로 측정하고 실질적 개선 제안 제공
+
+- M/21
+
+---
+
+2) 회의 패턴 분석 및 안건 추천 (신규, 차별화 포인트)
+UFR-ANAL-020: [회의패턴분석] 회의 주최자로서 | 나는, 더 나은 회의를 준비하기 위해 | 과거 회의 패턴을 분석하고 안건을 추천받고 싶다.
+- 시나리오: 회의 패턴 분석 및 안건 추천
+  새로운 회의를 예약하는 상황에서 | Analytics 시스템이 과거 유사 회의를 분석하면 | 회의 패턴 인사이트와 안건 추천이 제공된다.
+
+  [패턴 분석]
+  - 회의 유형 분류 (주간 회의, 프로젝트 회의, 의사결정 회의 등)
+  - 주기성 분석 (주간, 격주, 월간)
+  - 참석자 패턴 (핵심 멤버, 선택 멤버)
+  - 주요 논의 주제 추출
+  - 평균 회의 시간 및 최적 시간대
+
+  [안건 추천]
+  - 과거 회의록 분석
+    - 미해결 이슈 추출
+    - 후속 논의 필요 사항 식별
+    - 주기적 확인 사항 (KPI, 진행 상황)
+  - 관련 프로젝트/업무 이력 검토
+  - 추천 안건 생성
+    - 안건 제목
+    - 논의 배경 (과거 회의록 링크)
+    - 예상 소요 시간
+
+  [최적 회의 구성 제안]
+  - 추천 참석자 (과거 패턴 기반)
+  - 추천 회의 시간 (참석자 캘린더 분석)
+  - 추천 회의 길이 (안건 수 기반)
+
+  [처리 결과]
+  - 회의 패턴 인사이트
+  - 추천 안건 리스트 (최대 5개)
+  - 최적 회의 구성 제안
+  - 과거 유사 회의 링크
+
+  [Policy/Rule]
+  - 회의 예약 시 자동으로 패턴 분석 및 추천 제공
+  - 사용자가 수락/거부 가능
+
+  [비고]
+  - **차별화 포인트**: 과거 회의 데이터를 활용한 지능형 회의 준비 지원
+
+- M/13
+
+---
+
+```