hgzero/design-last/uiux/uiux.md

# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서

## 목차
- [개요](#개요)
- [프로토타입 화면 목록](#프로토타입-화면-목록)
- [화면 간 사용자 플로우](#화면-간-사용자-플로우)
- [화면별 상세 설계](#화면별-상세-설계)
  - [01-로그인](#01-로그인)
  - [02-대시보드](#02-대시보드)
  - [03-회의예약](#03-회의예약)
  - [04-템플릿선택](#04-템플릿선택)
  - [05-회의진행](#05-회의진행)
  - [06-검증완료](#06-검증완료)
  - [07-회의종료](#07-회의종료)
  - [08-회의록공유](#08-회의록공유)
  - [09-Todo관리](#09-todo관리)
- [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
- [반응형 설계 전략](#반응형-설계-전략)
- [접근성 보장 방안](#접근성-보장-방안)
- [성능 최적화 방안](#성능-최적화-방안)
- [변경 이력](#변경-이력)

---

## 개요

### 설계 목적
회의록 작성 및 공유 개선 서비스의 사용자 인터페이스를 Mobile First 디자인 철학에 따라 설계하여, 모든 사용자가 직관적이고 효율적으로 회의록을 작성하고 관리할 수 있도록 한다.

### 설계 원칙
1. **Mobile First**: 모바일 환경을 우선 설계하고 점진적으로 확장
2. **유저스토리 기반**: 모든 화면은 유저스토리와 1:1 매칭
3. **우선순위 중심**: 핵심 기능에 집중, 부가 기능은 분리
4. **접근성 우선**: WCAG 2.1 Level AA 준수
5. **성능 최적화**: 모바일 제약 고려한 최적화

### 차별화 포인트 UI 반영
1. **맥락 기반 용어 설명**: 전문용어 하이라이트 및 툴팁
2. **강화된 Todo 연결**: 회의록 내 Todo 뱃지, 실시간 상태 반영
3. **프롬프팅 기반 회의록 개선**: 다양한 형식 변환 UI
4. **관련 회의록 자동 연결**: 관련 회의록 카드 섹션

---

## 프로토타입 화면 목록

| 화면 ID | 화면명 | 관련 유저스토리 | 비즈니스 중요도 |
|---------|--------|-----------------|-----------------|
| 01 | 로그인 | AFR-USER-010 | 높음 |
| 02 | 대시보드 | 전체 진입점 | 높음 |
| 03 | 회의예약 | UFR-MEET-010 | 높음 |
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 |
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-RAG-010/020 | 매우 높음 |
| 06 | 검증완료 | UFR-COLLAB-030 | 중간 |
| 07 | 회의종료 | UFR-MEET-040 | 중간 |
| 08 | 회의록공유 | UFR-MEET-060 | 높음 |
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 |

**총 9개 화면 설계**

---

## 화면 간 사용자 플로우

### 주요 플로우 1: 회의 예약 → 진행 → 공유
```
로그인 (01)
  → 대시보드 (02)
  → 회의예약 (03)
  → 대시보드 (02, 예약 확인)
  → 회의 시작
  → 템플릿선택 (04)
  → 회의진행 (05)
  → 검증완료 (06)
  → 회의종료 (07)
  → 회의록공유 (08)
```

### 주요 플로우 2: 즉시 회의 시작
```
로그인 (01)
  → 대시보드 (02)
  → 빠른 회의 시작 (FAB 버튼)
  → 템플릿선택 (04)
  → 회의진행 (05)
  → 검증완료 (06)
  → 회의종료 (07)
  → 회의록공유 (08)
```

### 주요 플로우 3: Todo 관리
```
대시보드 (02)
  → Todo관리 (09)
  → Todo 상세 모달
  → 회의록 연결 (클릭)
  → 회의진행 (05, 해당 섹션으로 이동)
```

### 주요 플로우 4: 과거 회의록 검토
```
대시보드 (02)
  → 회의록 목록
  → 회의록 상세 (읽기 전용)
  → 관련 회의록 (클릭)
  → 다른 회의록 상세
```

---

## 화면별 상세 설계

### 01-로그인

#### 개요
- **목적**: 사용자 인증을 통해 서비스 접근 권한 부여
- **관련 유저스토리**: AFR-USER-010
- **비즈니스 중요도**: 높음 (보안 게이트)

#### 주요 기능
1. LDAP 인증 (사번, 비밀번호)
2. 세션 관리
3. 자동 로그인 (선택)

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│     서비스 로고         │
│   (회의록 작성 도구)    │
├─────────────────────────┤
│                         │
│  [ 사번 입력 ]         │
│                         │
│  [ 비밀번호 입력 ]     │
│                         │
│  ☐ 자동 로그인         │
│                         │
│  [    로그인 버튼    ]  │
│                         │
│  비밀번호 찾기 | 도움말 │
│                         │
└─────────────────────────┘
```

**구성 요소:**
- 서비스 로고 (상단 중앙)
- 사번 입력 필드 (placeholder: "사번을 입력하세요")
- 비밀번호 입력 필드 (placeholder: "비밀번호를 입력하세요", 보기/숨기기 토글)
- 자동 로그인 체크박스
- 로그인 버튼 (Primary CTA, 전체 너비)
- 보조 링크 (비밀번호 찾기, 도움말)

#### 인터랙션
1. **입력 검증**
   - 사번: 숫자만 입력 가능
   - 비밀번호: 필수 입력
   - 실시간 유효성 검사 (포커스 아웃 시)

2. **로그인 처리**
   - 로딩 인디케이터 표시
   - 성공 시: 대시보드로 전환 (페이드 인 애니메이션)
   - 실패 시: 에러 메시지 표시 (인라인, 빨간색)

3. **접근성**
   - Tab 키로 포커스 이동
   - Enter 키로 로그인 실행
   - 에러 메시지 스크린 리더 읽기

#### 데이터 요구사항
- **입력**: 사번 (String), 비밀번호 (String), 자동 로그인 (Boolean)
- **출력**: 인증 토큰, 세션 정보
- **API**: POST /api/auth/login

#### 에러 처리
- **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다."
- **네트워크 오류**: "네트워크 연결을 확인해주세요."
- **서버 오류**: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
- **계정 잠김**: "계정이 잠겼습니다. 관리자에게 문의하세요."

---

### 02-대시보드

#### 개요
- **목적**: 서비스의 메인 허브, 예정 회의 및 최근 활동 확인
- **관련 유저스토리**: 전체 서비스 진입점
- **비즈니스 중요도**: 매우 높음 (메인 화면)

#### 주요 기능
1. 예정된 회의 목록 표시
2. 최근 회의록 목록 표시
3. Todo 현황 요약
4. 빠른 회의 시작 (FAB)
5. 하단 탭 네비게이션

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ≡ 회의록 도구      🔔 👤│ ← 상단 앱바
├─────────────────────────┤
│ 📅 오늘의 회의 (2)     │
│                         │
│ ┌─────────────────────┐│
│ │ 14:00 프로젝트 회의││
│ │ 참석자: 5명         ││
│ │ [시작하기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 16:00 주간 회의     ││
│ │ 참석자: 3명         ││
│ │ [시작하기]          ││
│ └─────────────────────┘│
│                         │
│ 📝 최근 회의록         │
│ - 2025-01-15 기획회의  │
│ - 2025-01-14 스크럼    │
│                         │
│ ✅ Todo 현황 (5/12)    │
│                         │
│           [+]           │ ← FAB (빠른 시작)
│                         │
├─────────────────────────┤
│ 🏠 홈 📝 회의록 ✅ Todo│ ← 하단 탭
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 햄버거 메뉴 (왼쪽)
   - 서비스 타이틀
   - 알림 아이콘 (빨간 뱃지)
   - 프로필 아이콘 (오른쪽)

2. **오늘의 회의 섹션**
   - 섹션 헤더 (제목 + 개수)
   - 회의 카드 (최대 3개 표시, 스크롤)
     - 시간, 제목
     - 참석자 수
     - [시작하기] 버튼

3. **최근 회의록 섹션**
   - 섹션 헤더
   - 회의록 목록 (날짜 + 제목, 최대 5개)
   - "전체 보기" 링크

4. **Todo 현황 섹션**
   - 진행 상황 바 (5/12)
   - "Todo 관리" 링크

5. **FAB (Floating Action Button)**
   - 위치: 우측 하단
   - 아이콘: + (플러스)
   - 색상: Primary color
   - 액션: 빠른 회의 시작

6. **하단 탭 네비게이션**
   - 홈 (선택됨)
   - 회의록
   - Todo
   - 설정

#### 인터랙션
1. **스와이프 제스처**
   - 회의 카드: 좌우 스와이프로 다음/이전
   - 풀 투 리프레시: 아래로 당겨서 새로고침

2. **카드 클릭**
   - 회의 카드: 회의 상세 또는 시작
   - 회의록 카드: 회의록 상세 보기

3. **FAB 클릭**
   - 템플릿 선택 화면으로 전환
   - 확장 애니메이션

4. **탭 전환**
   - 페이드 인/아웃 애니메이션
   - 선택된 탭 강조 (색상, 아이콘)

#### 데이터 요구사항
- **입력**: 사용자 ID, 날짜 범위
- **출력**:
  - 예정 회의 목록 (시간, 제목, 참석자)
  - 최근 회의록 목록 (날짜, 제목, 상태)
  - Todo 통계 (완료/전체)
- **API**:
  - GET /api/meetings/upcoming
  - GET /api/minutes/recent
  - GET /api/todos/summary

#### 에러 처리
- **데이터 로딩 실패**: 스켈레톤 화면 → "데이터를 불러올 수 없습니다" 메시지 + 재시도 버튼
- **빈 데이터**:
  - 예정 회의 없음: "예정된 회의가 없습니다" + 회의 예약 버튼
  - 최근 회의록 없음: "작성된 회의록이 없습니다"
  - Todo 없음: "할당된 Todo가 없습니다"

---

### 03-회의예약

#### 개요
- **목적**: 회의를 사전에 예약하고 참석자를 초대
- **관련 유저스토리**: UFR-MEET-010
- **비즈니스 중요도**: 높음

#### 주요 기능
1. 회의 정보 입력 (제목, 날짜/시간, 장소, 참석자)
2. 참석자 초대 이메일 자동 발송
3. 캘린더 연동
4. 리마인더 자동 설정

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ← 회의 예약         ✓   │
├─────────────────────────┤
│                         │
│ 회의 제목 *             │
│ [________________]      │
│                         │
│ 날짜 *                  │
│ [2025-01-20    📅]      │
│                         │
│ 시간 *                  │
│ [14:00    🕐]          │
│                         │
│ 장소 (선택)             │
│ [________________]      │
│                         │
│ 참석자 * (최소 1명)     │
│ [이름/이메일 검색]      │
│                         │
│ ┌─────────────────────┐│
│ │ 김민준 ×            ││
│ │ 박서연 ×            ││
│ └─────────────────────┘│
│                         │
│ ☑ 30분 전 리마인더     │
│                         │
│ [      예약하기      ]  │
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 뒤로가기 버튼 (왼쪽)
   - 화면 제목 "회의 예약"
   - 저장 버튼 (오른쪽, 체크 아이콘)

2. **입력 필드**
   - 회의 제목 (필수, 최대 100자)
   - 날짜 선택 (날짜 피커)
   - 시간 선택 (시간 피커)
   - 장소 (선택, 최대 200자)
   - 참석자 (자동완성 검색)

3. **참석자 목록**
   - 선택된 참석자 칩 (이름 + 삭제 버튼)
   - 최소 1명 필수

4. **옵션**
   - 리마인더 설정 체크박스

5. **CTA 버튼**
   - [예약하기] 버튼 (하단 고정)

#### 인터랙션
1. **날짜/시간 선택**
   - 날짜 필드 클릭: 날짜 피커 모달
   - 시간 필드 클릭: 시간 피커 모달
   - 과거 날짜 선택 불가

2. **참석자 추가**
   - 검색 필드: 실시간 자동완성
   - 선택: 칩 형태로 추가
   - 삭제: × 버튼 클릭

3. **유효성 검사**
   - 필수 필드 미입력 시: 에러 메시지 (빨간색)
   - 참석자 0명 시: "최소 1명의 참석자가 필요합니다"

4. **예약 처리**
   - 로딩 인디케이터
   - 성공 시: 성공 메시지 → 대시보드로 이동
   - 실패 시: 에러 메시지 표시

#### 데이터 요구사항
- **입력**:
  - 제목 (String, 최대 100자)
  - 날짜 (Date)
  - 시간 (Time)
  - 장소 (String, 최대 200자, 선택)
  - 참석자 목록 (Array of Email)
  - 리마인더 (Boolean)
- **출력**:
  - 회의 ID
  - 예약 상태
  - 초대 발송 결과
- **API**: POST /api/meetings

#### 에러 처리
- **필수 필드 누락**: "필수 항목을 입력해주세요"
- **과거 날짜 선택**: "과거 날짜는 선택할 수 없습니다"
- **참석자 검색 실패**: "사용자를 찾을 수 없습니다"
- **예약 실패**: "회의 예약에 실패했습니다. 다시 시도해주세요"
- **이메일 발송 실패**: "초대 이메일 발송에 실패했습니다" (경고, 예약은 완료)

---

### 04-템플릿선택

#### 개요
- **목적**: 회의 유형에 맞는 회의록 템플릿 선택 및 커스터마이징
- **관련 유저스토리**: UFR-MEET-020
- **비즈니스 중요도**: 중간

#### 주요 기능
1. 템플릿 선택 (일반, 스크럼, 킥오프, 주간)
2. 템플릿 미리보기
3. 섹션 추가/삭제
4. 섹션 순서 변경

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ← 템플릿 선택           │
├─────────────────────────┤
│                         │
│ 회의록 템플릿을         │
│ 선택하세요              │
│                         │
│ ┌─────────────────────┐│
│ │ 📝 일반 회의        ││
│ │ 기본 구조           ││
│ │ (추천)              ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🏃 스크럼 회의      ││
│ │ 어제/오늘/이슈      ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🚀 프로젝트 킥오프  ││
│ │ 목표/일정/역할      ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📊 주간 회의        ││
│ │ 실적/이슈/계획      ││
│ └─────────────────────┘│
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 뒤로가기 버튼
   - 화면 제목 "템플릿 선택"

2. **안내 문구**
   - "회의록 템플릿을 선택하세요"

3. **템플릿 카드** (4개)
   - 아이콘
   - 템플릿 이름
   - 간단한 설명
   - (추천) 배지 (일반 회의)

4. **선택 시 확장**
   - 템플릿 미리보기
   - 섹션 목록
   - 커스터마이징 버튼
   - [이 템플릿 사용] 버튼

#### 인터랙션
1. **템플릿 선택**
   - 카드 클릭: 확장 (아코디언)
   - 미리보기 표시

2. **커스터마이징 (선택)**
   - "커스터마이징" 버튼 클릭
   - 모달 또는 새 화면으로 전환
   - 섹션 드래그 앤 드롭으로 순서 변경
   - 섹션 추가/삭제

3. **템플릿 적용**
   - [이 템플릿 사용] 버튼 클릭
   - 회의 진행 화면으로 전환
   - 슬라이드 애니메이션

#### 데이터 요구사항
- **입력**: 없음 (템플릿 목록은 하드코딩 또는 서버에서 로드)
- **출력**:
  - 선택된 템플릿 ID
  - 섹션 구조 (JSON)
- **API**:
  - GET /api/templates (템플릿 목록)
  - POST /api/meetings/{id}/template (템플릿 적용)

#### 에러 처리
- **템플릿 로드 실패**: "템플릿을 불러올 수 없습니다" + 재시도 버튼
- **템플릿 적용 실패**: "템플릿 적용에 실패했습니다. 다시 시도해주세요"

---

### 05-회의진행

#### 개요
- **목적**: 회의 중 실시간 녹음, 텍스트 변환, AI 회의록 자동 작성
- **관련 유저스토리**: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-RAG-010/020, UFR-COLLAB-010
- **비즈니스 중요도**: 매우 높음 (핵심 화면)

#### 주요 기능
1. 음성 녹음 시작/일시정지/종료
2. 실시간 텍스트 변환
3. AI 회의록 자동 작성
4. 전문용어 하이라이트 및 툴팁 (차별화 포인트)
5. 실시간 동기화 (다른 참석자와)
6. 수동 편집

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ← 회의 진행    00:15:32 │ ← 타이머
├─────────────────────────┤
│ 🎙️ 녹음 중...          │ ← 상태
│ ⏸️ ⏹️                   │ ← 컨트롤
├─────────────────────────┤
│ 📝 회의록               │
│                         │
│ ## 참석자               │
│ - 김민준, 박서연, ...   │
│                         │
│ ## 논의 내용            │
│                         │
│ [14:05] 김민준:         │
│ 프로젝트 일정을 검토... │
│                         │
│ [14:07] 박서연:         │
│ RAG 시스템 구현...      │
│ (RAG는 밑줄, 클릭 가능) │
│                         │
│ ## 결정 사항            │
│ - 다음 주까지 완료      │
│                         │
│ ## Todo                 │
│ 🔵 (2) 할당됨           │
│                         │
│         [종료]          │
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 뒤로가기 버튼
   - 화면 제목 "회의 진행"
   - 경과 시간 타이머 (HH:MM:SS)

2. **녹음 상태 영역**
   - 녹음 상태 아이콘 (🎙️)
   - 상태 텍스트 ("녹음 중", "일시정지", "중지됨")
   - 컨트롤 버튼 (일시정지, 종료)

3. **회의록 영역** (스크롤 가능)
   - 섹션별 구조 (템플릿 기반)
   - 실시간 텍스트 추가 (발언 시)
   - 타임스탬프 + 화자 + 내용
   - **전문용어 하이라이트** (점선 밑줄, 차별화 포인트)

4. **전문용어 툴팁** (차별화 포인트)
   - 터치 시 표시
   - 간단한 정의
   - "더보기" 버튼 → 상세 패널

5. **Todo 뱃지** (차별화 포인트)
   - 섹션별 Todo 개수 표시
   - 클릭 시 Todo 목록 모달

6. **하단 버튼**
   - [회의 종료] 버튼 (Primary)

#### 인터랙션
1. **녹음 컨트롤**
   - ⏸️ (일시정지): 녹음 일시정지, 재개 버튼 표시
   - ⏹️ (종료): 확인 다이얼로그 → 회의 종료

2. **실시간 업데이트**
   - 발언 인식: 자동으로 텍스트 추가
   - 스크롤 자동 이동 (최신 발언으로)
   - 다른 참석자 수정: 하이라이트 (3초간)

3. **전문용어 인터랙션** (차별화 포인트)
   - 터치: 툴팁 표시 (간단한 정의)
   - 툴팁 내 "더보기": 상세 패널 슬라이드 인
   - 상세 패널: 맥락 설명, 관련 회의록 링크

4. **수동 편집**
   - 텍스트 영역 더블 탭: 편집 모드
   - 키보드 표시, 편집 완료 버튼
   - 수정 사항 실시간 동기화

5. **Todo 뱃지 클릭**
   - Todo 목록 모달 표시
   - Todo 상세 정보, 완료 처리 가능

#### 데이터 요구사항
- **입력**:
  - 회의 ID
  - 음성 스트림
  - 사용자 수정 사항
- **출력**:
  - 실시간 텍스트
  - AI 회의록 초안
  - 전문용어 목록
  - Todo 목록
- **API**:
  - WebSocket /ws/meetings/{id} (실시간 동기화)
  - POST /api/stt/convert (음성-텍스트 변환)
  - GET /api/rag/terms (전문용어 설명)

#### 에러 처리
- **녹음 실패**: "마이크 권한을 확인해주세요"
- **텍스트 변환 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요"
- **전문용어 설명 실패**: "용어 설명을 불러올 수 없습니다" (툴팁 표시 안 함)
- **동기화 실패**: "연결이 끊겼습니다. 재연결 중..." (재연결 시도)

---

### 06-검증완료

#### 개요
- **목적**: 참석자가 회의록 섹션을 검증하고 완료 표시
- **관련 유저스토리**: UFR-COLLAB-030
- **비즈니스 중요도**: 중간

#### 주요 기능
1. 섹션별 검증 상태 표시
2. 검증 완료 표시
3. 검증자 정보 표시
4. 검증 완료 알림 발송

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ← 회의록 검증           │
├─────────────────────────┤
│                         │
│ 📝 프로젝트 회의        │
│ 2025-01-20 14:00        │
│                         │
│ 검증 진행률: 60% (3/5)  │
│ [███████░░░░]           │
│                         │
│ ┌─────────────────────┐│
│ │ ✅ 참석자           ││
│ │ 검증: 김민준        ││
│ │ 14:35               ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ✅ 논의 내용        ││
│ │ 검증: 박서연        ││
│ │ 14:40               ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ✅ 결정 사항        ││
│ │ 검증: 김민준        ││
│ │ 14:42               ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ⏳ Todo             ││
│ │ [검증 완료]         ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ⏳ 다음 액션        ││
│ │ [검증 완료]         ││
│ └─────────────────────┘│
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 뒤로가기 버튼
   - 화면 제목 "회의록 검증"

2. **회의 정보**
   - 회의 제목
   - 날짜/시간

3. **검증 진행률**
   - 퍼센트 표시
   - 프로그레스 바

4. **섹션 카드** (템플릿 구조에 따라)
   - 상태 아이콘 (✅ 완료, ⏳ 대기)
   - 섹션 이름
   - 검증자 정보 (완료 시)
   - 검증 시간 (완료 시)
   - [검증 완료] 버튼 (대기 시)

5. **섹션 잠금 표시** (선택)
   - 잠금 아이콘 (🔒)
   - "잠김 - 수정 불가" 텍스트

#### 인터랙션
1. **섹션 클릭**
   - 섹션 내용 확장/축소 (아코디언)
   - 내용 미리보기

2. **검증 완료 처리**
   - [검증 완료] 버튼 클릭
   - 확인 다이얼로그: "이 섹션을 검증 완료하시겠습니까?"
   - 완료 시:
     - 상태 아이콘 변경 (⏳ → ✅)
     - 검증자 정보 표시
     - 진행률 업데이트
     - 다른 참석자에게 실시간 동기화

3. **전체 완료**
   - 모든 섹션 검증 완료 시: 성공 메시지
   - "회의록 공유" 버튼 표시

4. **섹션 잠금** (회의 생성자만)
   - 롱프레스: 잠금 옵션 표시
   - 잠금 시: 다른 참석자 수정 불가

#### 데이터 요구사항
- **입력**:
  - 회의 ID
  - 섹션 ID
  - 검증자 ID
- **출력**:
  - 검증 상태
  - 검증자 정보
  - 검증 시간
- **API**:
  - GET /api/meetings/{id}/verification (검증 상태 조회)
  - POST /api/meetings/{id}/sections/{sectionId}/verify (검증 완료)
  - POST /api/meetings/{id}/sections/{sectionId}/lock (섹션 잠금)

#### 에러 처리
- **검증 권한 없음**: "검증 권한이 없습니다"
- **검증 실패**: "검증 처리에 실패했습니다. 다시 시도해주세요"
- **동기화 실패**: "검증 상태 동기화에 실패했습니다"

---

### 07-회의종료

#### 개요
- **목적**: 회의 종료 및 회의 통계 확인
- **관련 유저스토리**: UFR-MEET-040
- **비즈니스 중요도**: 중간

#### 주요 기능
1. 회의 통계 표시 (총 시간, 참석자 수, 발언 횟수)
2. 주요 키워드 표시
3. 최종 회의록 확정 전 검토

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ✓ 회의 종료             │
├─────────────────────────┤
│                         │
│ 🎉 회의가 종료되었습니다│
│                         │
│ ┌─────────────────────┐│
│ │ 📊 회의 통계        ││
│ │                     ││
│ │ ⏱️ 총 시간: 45분    ││
│ │ 👥 참석자: 5명      ││
│ │ 💬 발언 횟수: 28회  ││
│ │                     ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🔑 주요 키워드      ││
│ │                     ││
│ │ #프로젝트일정       ││
│ │ #RAG시스템          ││
│ │ #성능최적화         ││
│ │                     ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📝 발언자별 기여도  ││
│ │                     ││
│ │ 김민준: ████░ 40%   ││
│ │ 박서연: ███░░ 30%   ││
│ │ 이준호: ██░░░ 20%   ││
│ │ 기타:   █░░░░ 10%   ││
│ │                     ││
│ └─────────────────────┘│
│                         │
│ [   회의록 최종 확정   ]│
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 체크 아이콘 (완료)
   - 화면 제목 "회의 종료"

2. **완료 메시지**
   - "🎉 회의가 종료되었습니다"

3. **회의 통계 카드**
   - 총 시간 (HH:MM 형식)
   - 참석자 수
   - 발언 횟수

4. **주요 키워드 카드**
   - 키워드 태그 (최대 5개)
   - 해시태그 형식

5. **발언자별 기여도 카드**
   - 발언자 이름
   - 발언 비율 (프로그레스 바)
   - 퍼센트 표시

6. **CTA 버튼**
   - [회의록 최종 확정] 버튼 (Primary)

#### 인터랙션
1. **통계 확인**
   - 자동 계산 및 표시
   - 애니메이션 (숫자 카운트업)

2. **키워드 클릭**
   - 회의록에서 해당 키워드 위치로 이동

3. **최종 확정**
   - [회의록 최종 확정] 버튼 클릭
   - 필수 항목 검사 (UFR-MEET-050)
   - 성공 시: 회의록 공유 화면으로 전환
   - 실패 시: 누락 항목 안내

#### 데이터 요구사항
- **입력**: 회의 ID
- **출력**:
  - 회의 통계 (총 시간, 참석자 수, 발언 횟수)
  - 주요 키워드 (상위 5개)
  - 발언자별 기여도 (비율)
- **API**:
  - GET /api/meetings/{id}/statistics
  - POST /api/meetings/{id}/finalize (최종 확정)

#### 에러 처리
- **통계 로드 실패**: "통계를 불러올 수 없습니다" (통계 섹션 숨김)
- **필수 항목 누락**: "필수 항목이 누락되었습니다" + 누락 항목 목록 + 해당 섹션으로 이동 버튼
- **최종 확정 실패**: "회의록 확정에 실패했습니다. 다시 시도해주세요"

---

### 08-회의록공유

#### 개요
- **목적**: 최종 회의록을 참석자 및 관련자와 공유
- **관련 유저스토리**: UFR-MEET-060
- **비즈니스 중요도**: 높음

#### 주요 기능
1. 공유 대상 설정 (참석자 전체/특정 참석자)
2. 공유 권한 설정 (읽기 전용/댓글/편집)
3. 공유 링크 생성
4. 이메일 알림 발송
5. 다음 회의 일정 자동 등록 (언급 시)

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ← 회의록 공유           │
├─────────────────────────┤
│                         │
│ 📝 프로젝트 회의        │
│ 2025-01-20 14:00        │
│                         │
│ 공유 대상               │
│ ⦿ 참석자 전체 (5명)    │
│ ○ 특정 참석자 선택      │
│                         │
│ 공유 권한               │
│ [읽기 전용  ▼]         │
│                         │
│ 공유 방식               │
│ ☑ 이메일 발송          │
│ ☑ 링크 복사            │
│                         │
│ 고급 옵션 ▼             │
│ ☐ 링크 유효기간 설정    │
│ ☐ 비밀번호 설정        │
│                         │
│ ┌─────────────────────┐│
│ │ 📅 다음 회의 감지   ││
│ │                     ││
│ │ "다음 주 월요일     ││
│ │  후속 회의" 언급됨  ││
│ │                     ││
│ │ [캘린더에 등록]     ││
│ └─────────────────────┘│
│                         │
│ [      공유하기      ]  │
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 뒤로가기 버튼
   - 화면 제목 "회의록 공유"

2. **회의 정보**
   - 회의 제목
   - 날짜/시간

3. **공유 대상 선택**
   - 라디오 버튼
     - 참석자 전체 (기본)
     - 특정 참석자 선택

4. **공유 권한 선택**
   - 드롭다운
     - 읽기 전용 (기본)
     - 댓글 가능
     - 편집 가능

5. **공유 방식 선택**
   - 체크박스
     - 이메일 발송 (기본 체크)
     - 링크 복사

6. **고급 옵션** (확장 가능)
   - 링크 유효기간 설정
   - 비밀번호 설정

7. **다음 회의 감지** (UFR-MEET-060)
   - 회의록에서 다음 회의 언급 감지
   - 자동 제안
   - [캘린더에 등록] 버튼

8. **CTA 버튼**
   - [공유하기] 버튼 (Primary)

#### 인터랙션
1. **공유 대상 선택**
   - "특정 참석자 선택" 선택 시: 참석자 목록 표시
   - 체크박스로 선택

2. **공유 권한 선택**
   - 드롭다운 클릭: 옵션 목록 표시

3. **고급 옵션 확장**
   - "고급 옵션 ▼" 클릭: 추가 옵션 표시
   - 유효기간: 날짜 피커
   - 비밀번호: 입력 필드

4. **다음 회의 등록**
   - [캘린더에 등록] 클릭
   - 회의 정보 미리 입력된 회의 예약 화면으로 이동

5. **공유 처리**
   - [공유하기] 버튼 클릭
   - 로딩 인디케이터
   - 성공 시:
     - 공유 링크 생성
     - 이메일 발송 (선택 시)
     - 링크 클립보드 복사 (선택 시)
     - 성공 메시지 + 링크 표시
   - 실패 시: 에러 메시지

#### 데이터 요구사항
- **입력**:
  - 회의 ID
  - 공유 대상 (Array of User ID)
  - 공유 권한 (Enum: READ, COMMENT, EDIT)
  - 공유 방식 (Boolean: email, link)
  - 유효기간 (Date, 선택)
  - 비밀번호 (String, 선택)
- **출력**:
  - 공유 링크 URL
  - 이메일 발송 결과
  - 다음 회의 정보 (감지 시)
- **API**:
  - POST /api/meetings/{id}/share
  - GET /api/meetings/{id}/next-meeting-suggestion

#### 에러 처리
- **공유 링크 생성 실패**: "공유 링크 생성에 실패했습니다"
- **이메일 발송 실패**: "일부 이메일 발송에 실패했습니다" (경고, 링크는 생성됨)
- **다음 회의 감지 실패**: (무시, 섹션 표시 안 함)

---

### 09-Todo관리

#### 개요
- **목적**: AI가 추출한 Todo 관리 및 회의록 연결 확인
- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-030
- **비즈니스 중요도**: 높음

#### 주요 기능
1. Todo 목록 표시 (진행 중/완료)
2. Todo 상세 정보 확인
3. Todo 완료 처리
4. 회의록 연결 확인 (차별화 포인트)

#### UI 구성요소

**Mobile (320-767px)**
```
┌─────────────────────────┐
│ ← Todo 관리        + │
├─────────────────────────┤
│ 진행 중 (5) | 완료 (12) │ ← 탭
├─────────────────────────┤
│                         │
│ ┌─────────────────────┐│
│ │ ☐ RAG 시스템 구현   ││
│ │ 담당: 박서연        ││
│ │ 마감: 2025-01-27    ││
│ │ 📝 프로젝트 회의    ││
│ │ [완료]              ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 성능 테스트       ││
│ │ 담당: 이준호        ││
│ │ 마감: 2025-01-25 ⚠️ ││
│ │ 📝 주간 회의        ││
│ │ [완료]              ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 문서 작성         ││
│ │ 담당: 김민준        ││
│ │ 마감: 2025-01-30    ││
│ │ 📝 기획 회의        ││
│ │ [완료]              ││
│ └─────────────────────┘│
│                         │
└─────────────────────────┘
```

**구성 요소:**
1. **상단 앱바**
   - 뒤로가기 버튼
   - 화면 제목 "Todo 관리"
   - 추가 버튼 (+)

2. **탭**
   - 진행 중 (개수)
   - 완료 (개수)

3. **Todo 카드**
   - 체크박스 (완료 처리)
   - Todo 내용
   - 담당자
   - 마감일 (마감 임박 시 ⚠️ 아이콘)
   - 관련 회의록 링크 (아이콘 + 제목)
   - [완료] 버튼

4. **빈 상태**
   - "할당된 Todo가 없습니다" 메시지

#### 인터랙션
1. **탭 전환**
   - "진행 중" / "완료" 탭 클릭
   - 스와이프로 전환 가능

2. **Todo 카드 클릭**
   - Todo 상세 모달 표시
   - 상세 정보:
     - 전체 내용
     - 담당자, 마감일, 우선순위
     - 관련 회의록 원문 위치 (하이라이트)
     - 완료 시간 (완료 시)

3. **회의록 연결 클릭** (차별화 포인트)
   - 회의록 상세 화면으로 이동
   - 해당 섹션으로 스크롤
   - Todo 관련 부분 하이라이트 (3초간)

4. **완료 처리**
   - [완료] 버튼 클릭
   - 확인 다이얼로그: "완료 처리하시겠습니까?"
   - 완료 시:
     - 체크 아이콘 애니메이션
     - 완료 탭으로 이동 (슬라이드 애니메이션)
     - 회의록에 완료 상태 실시간 반영 (UFR-TODO-030)
     - 완료 알림 발송

5. **Todo 추가** (+버튼)
   - Todo 추가 화면으로 이동
   - 내용, 담당자, 마감일 입력
   - 수동 추가

#### 데이터 요구사항
- **입력**:
  - 사용자 ID
  - 상태 필터 (진행 중/완료)
- **출력**:
  - Todo 목록
  - 각 Todo별 정보 (ID, 내용, 담당자, 마감일, 우선순위, 관련 회의록 링크)
- **API**:
  - GET /api/todos?status={status}
  - PUT /api/todos/{id}/complete (완료 처리)
  - POST /api/todos (Todo 추가)

#### 에러 처리
- **Todo 로드 실패**: "Todo 목록을 불러올 수 없습니다" + 재시도 버튼
- **완료 처리 실패**: "완료 처리에 실패했습니다. 다시 시도해주세요"
- **회의록 연결 실패**: "회의록을 불러올 수 없습니다"

---

## 화면 간 전환 및 네비게이션

### 네비게이션 구조

#### 하단 탭 네비게이션 (Mobile First)
```
┌─────────────────────────────────┐
│  🏠 홈  |  📝 회의록  |  ✅ Todo  │
│  (선택)      (미선택)    (미선택) │
└─────────────────────────────────┘
```

**탭 구성:**
1. **홈 (대시보드)**: 메인 화면, 예정 회의, 최근 활동
2. **회의록**: 과거 회의록 목록 및 검색
3. **Todo**: Todo 관리 화면

**탭 전환 애니메이션:**
- 페이드 인/아웃 (300ms)
- 선택된 탭: Primary color, 아이콘 + 텍스트
- 미선택 탭: Gray color, 아이콘만

#### 화면 전환 패턴

**1. Push (앞으로 이동)**
- 애니메이션: 슬라이드 인 (우측에서 좌측)
- 예시: 대시보드 → 회의 예약

**2. Pop (뒤로 이동)**
- 애니메이션: 슬라이드 아웃 (좌측에서 우측)
- 예시: 회의 예약 → 대시보드 (뒤로가기)

**3. Modal (모달 표시)**
- 애니메이션: 바텀 시트 슬라이드 업
- 예시: Todo 상세, 전문용어 설명 상세

**4. Replace (화면 교체)**
- 애니메이션: 페이드 인/아웃
- 예시: 로그인 → 대시보드

### 상황별 네비게이션 흐름

#### 회의 진행 플로우
```
대시보드 (02)
  → [회의 시작] 버튼
  → 템플릿 선택 (04) [Push]
  → [템플릿 사용] 버튼
  → 회의 진행 (05) [Push]
  → [종료] 버튼
  → 회의 종료 (07) [Push]
  → [최종 확정] 버튼
  → 회의록 공유 (08) [Push]
  → [공유하기] 버튼
  → 대시보드 (02) [Replace]
```

#### 검증 플로우
```
회의 진행 (05)
  → [검증] 버튼 (상단 메뉴)
  → 검증 완료 (06) [Modal]
  → [섹션 검증] 버튼
  → 검증 상태 업데이트
  → [닫기]
  → 회의 진행 (05) [Modal 닫기]
```

#### Todo 관리 플로우
```
대시보드 (02)
  → Todo 탭 (하단 네비게이션)
  → Todo 관리 (09) [Tab 전환]
  → [Todo 카드] 클릭
  → Todo 상세 (Modal)
  → [회의록 연결] 클릭
  → 회의 진행 (05, 해당 섹션) [Push]
```

### 네비게이션 백스택 관리

**백스택 규칙:**
1. 탭 전환: 백스택에 추가하지 않음
2. Push: 백스택에 추가
3. Modal: 별도 스택 관리
4. Replace: 이전 화면 백스택에서 제거

**뒤로가기 동작:**
- 하드웨어 뒤로가기 (Android): 백스택 Pop
- 상단 뒤로가기 버튼: 백스택 Pop
- Modal 열림 상태: Modal 닫기
- 백스택 비어 있음: 앱 종료 확인 다이얼로그

---

## 반응형 설계 전략

### 브레이크포인트 정의

```
Mobile:  320px - 767px   (우선 설계)
Tablet:  768px - 1023px  (점진적 향상)
Desktop: 1024px+         (점진적 향상)
```

### Mobile First 설계 원칙

#### 1. 우선순위 중심 설계
- **핵심 기능만 표시**: 각 화면당 1-2개 주요 기능
- **부가 기능 분리**: 메뉴, 탭, 모달로 분리
- **세로 스크롤 최적화**: 무한 스크롤, 풀 투 리프레시

#### 2. 터치 최적화
- **최소 터치 영역**: 44x44px (Apple HIG)
- **여백 충분히**: 버튼 간 최소 8px
- **제스처 지원**: 스와이프, 롱프레스, 풀 투 리프레시

#### 3. 성능 최적화
- **이미지 최적화**: WebP, 압축, Lazy Loading
- **코드 스플리팅**: 화면별 번들 분리
- **캐싱**: Service Worker, IndexedDB

### 화면별 반응형 전략

#### 대시보드 (02)

**Mobile (320-767px)**
- 세로 스크롤
- 카드 1열 배치
- 하단 탭 네비게이션

**Tablet (768-1023px)**
- 카드 2열 배치
- 사이드 패널 추가 (Todo 요약)
- 하단 탭 유지

**Desktop (1024px+)**
- 3단 레이아웃
  - 좌측: 네비게이션 사이드바
  - 중앙: 메인 콘텐츠 (카드 2-3열)
  - 우측: Todo + 알림
- 하단 탭 → 좌측 사이드바로 변경

#### 회의 진행 (05)

**Mobile (320-767px)**
- 전체 화면
- 녹음 컨트롤 상단 고정
- 회의록 스크롤
- 전문용어 툴팁 (터치)

**Tablet (768-1023px)**
- 2단 레이아웃
  - 좌측: 회의록 (60%)
  - 우측: 참석자 목록, Todo, 메모
- 전문용어 툴팁 → 사이드 패널

**Desktop (1024px+)**
- 3단 레이아웃
  - 좌측: 회의록 (50%)
  - 중앙: 실시간 텍스트 (30%)
  - 우측: 참석자, Todo, 메모 (20%)
- 전문용어 툴팁 → 인라인 패널

#### Todo 관리 (09)

**Mobile (320-767px)**
- 전체 화면
- 카드 1열 배치
- 탭으로 진행 중/완료 구분

**Tablet (768-1023px)**
- 카드 2열 배치
- 탭 유지

**Desktop (1024px+)**
- 테이블 뷰
- 필터, 정렬 옵션 추가
- 진행 중/완료 분할 화면 (50:50)

### 반응형 컴포넌트

#### 버튼
```css
/* Mobile */
button {
  width: 100%;
  min-height: 44px;
}

/* Tablet+ */
@media (min-width: 768px) {
  button {
    width: auto;
    min-width: 120px;
  }
}
```

#### 카드
```css
/* Mobile */
.card {
  width: 100%;
  margin-bottom: 12px;
}

/* Tablet */
@media (min-width: 768px) {
  .card {
    width: calc(50% - 8px);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card {
    width: calc(33.33% - 12px);
  }
}
```

---

## 접근성 보장 방안

### WCAG 2.1 Level AA 준수

#### 1. 인식 가능 (Perceivable)

**1.1 시각적 접근성**
- **색상 대비**
  - 텍스트: 최소 4.5:1 (일반), 3:1 (대형 텍스트)
  - UI 컴포넌트: 최소 3:1
  - 검증 도구: Axe, WAVE

- **대체 텍스트**
  - 모든 이미지, 아이콘에 alt 속성
  - 장식 이미지: alt="" (빈 문자열)
  - 의미 있는 이미지: 구체적 설명

- **색상 외 구분**
  - 에러: 빨간색 + 아이콘 (⚠️)
  - 성공: 녹색 + 체크 아이콘 (✓)
  - 필수 필드: * (별표) + 레이블

**1.2 청각적 접근성**
- **자막 제공**
  - 음성 녹음: 실시간 텍스트 변환 (STT)
  - 회의록: 타임스탬프 + 화자 + 내용

- **시각적 피드백 병행**
  - 알림: 소리 + 화면 알림
  - 에러: 소리 + 에러 메시지

#### 2. 운용 가능 (Operable)

**2.1 키보드 접근성**
- **모든 기능 키보드 조작 가능**
  - Tab: 포커스 이동
  - Enter/Space: 버튼 클릭
  - Esc: 모달 닫기
  - Arrow keys: 목록 탐색

- **포커스 순서**
  - 논리적 순서: 좌→우, 상→하
  - Tab Index 사용 최소화 (DOM 순서 활용)

- **포커스 표시**
  - 명확한 아웃라인 (2px solid, Primary color)
  - :focus-visible 활용 (키보드만 표시)

**2.2 충분한 시간**
- **자동 로그아웃**
  - 경고: 5분 전 알림
  - 연장 옵션: [세션 연장] 버튼

- **회의 시작 시간**
  - 유연한 시작: 예정 시간 전후 30분

**2.3 발작 예방**
- **깜박임 제한**
  - 초당 3회 미만
  - 애니메이션 감소 모드 지원

#### 3. 이해 가능 (Understandable)

**3.1 명확한 레이블**
- **모든 입력 필드**
  - `<label>` 요소 사용
  - placeholder는 보조 정보만

- **에러 메시지**
  - 구체적 안내: "비밀번호는 8자 이상이어야 합니다"
  - 해결 방법 제시: "다시 입력해주세요"

**3.2 일관된 네비게이션**
- **위치 표시**
  - Breadcrumb (Desktop)
  - 화면 제목 (Mobile)

- **예측 가능한 동작**
  - 링크: 페이지 이동
  - 버튼: 액션 실행
  - 일관된 아이콘 사용

#### 4. 견고성 (Robust)

**4.1 시맨틱 HTML**
```html
<!-- 올바른 예시 -->
<nav>
  <ul>
    <li><a href="/">홈</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>회의록</h1>
  </article>
</main>
```

**4.2 ARIA 속성**
```html
<!-- 버튼 -->
<button aria-label="회의 시작">
  <icon name="play" />
</button>

<!-- 상태 -->
<div role="alert" aria-live="polite">
  회의가 종료되었습니다
</div>

<!-- 탭 -->
<div role="tablist">
  <button role="tab" aria-selected="true">진행 중</button>
  <button role="tab" aria-selected="false">완료</button>
</div>
```

**4.3 스크린 리더 테스트**
- **NVDA (Windows)**: 정기 테스트
- **VoiceOver (iOS/Mac)**: 정기 테스트
- **TalkBack (Android)**: 정기 테스트

### 추가 접근성 기능

#### 다크 모드
- **색상 반전**: 배경 어둡게, 텍스트 밝게
- **대비 유지**: 4.5:1 이상
- **자동 전환**: 시스템 설정 따름

#### 폰트 크기 조절
- **단계별 조절**: 작게, 보통, 크게, 매우 크게
- **설정 저장**: 사용자 설정 유지
- **레이아웃 유지**: 폰트 크기 변경 시 레이아웃 깨지지 않음

#### 음성 명령 (선택)
- **지원 명령**: "회의 시작", "회의 종료", "Todo 열기"
- **Web Speech API** 활용

---

## 성능 최적화 방안

### Mobile 제약 고려

#### 1. 네트워크 최적화
- **느린 네트워크 (3G/4G)**
  - 데이터 압축: Gzip, Brotli
  - 이미지 최적화: WebP, AVIF
  - API 페이로드 최소화: GraphQL 또는 필드 선택

#### 2. 처리 능력 제한
- **저사양 기기 고려**
  - 무거운 계산 최소화
  - Web Worker 활용 (백그라운드 처리)
  - Virtual Scrolling (대량 목록)

#### 3. 배터리 소모
- **최적화**
  - 불필요한 렌더링 방지 (React.memo, useMemo)
  - 애니메이션 최소화
  - WebSocket 연결 최적화 (Heartbeat 간격 조정)

### 구체적 최적화 전략

#### 코드 스플리팅
```javascript
// 화면별 Lazy Loading
const Dashboard = lazy(() => import('./screens/Dashboard'));
const MeetingProgress = lazy(() => import('./screens/MeetingProgress'));
const TodoManagement = lazy(() => import('./screens/TodoManagement'));
```

#### 이미지 최적화
- **포맷**
  - WebP (우선)
  - JPEG (폴백)
  - 반응형 이미지: `<picture>`, `srcset`

- **크기**
  - Mobile: 최대 800px 너비
  - Tablet: 최대 1200px 너비
  - Desktop: 최대 1920px 너비

- **Lazy Loading**
  ```html
  <img src="placeholder.jpg"
       data-src="image.webp"
       loading="lazy"
       alt="회의록" />
  ```

#### 캐싱 전략

**1. Service Worker**
```javascript
// 정적 리소스 캐싱
workbox.precaching.precacheAndRoute([
  { url: '/index.html', revision: 'v1' },
  { url: '/app.js', revision: 'v1' },
  { url: '/styles.css', revision: 'v1' }
]);

// API 캐싱 (Stale-While-Revalidate)
workbox.routing.registerRoute(
  /^https:\/\/api\.example\.com\/meetings/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60 // 5분
      })
    ]
  })
);
```

**2. IndexedDB**
- **용도**: 회의록 초안 저장, 오프라인 지원
- **라이브러리**: Dexie.js
- **전략**
  - 회의록: 로컬 저장 → 서버 동기화
  - Todo: 낙관적 업데이트 (Optimistic Update)

#### WebSocket 최적화

**1. 델타 전송 (차이만 전송)**
```javascript
// 전체 내용 전송 (X)
{
  type: 'UPDATE',
  content: '전체 회의록 내용...'
}

// 변경 부분만 전송 (O)
{
  type: 'UPDATE',
  delta: {
    position: 150,
    delete: 5,
    insert: '수정된 텍스트'
  }
}
```

**2. 연결 관리**
- **재연결 전략**: Exponential Backoff (1s, 2s, 4s, 8s, ...)
- **Heartbeat**: 30초 간격
- **연결 품질 모니터링**: Ping/Pong

#### Virtual Scrolling
- **대량 목록 최적화** (회의록 목록, Todo 목록)
- **라이브러리**: react-window, react-virtualized
- **효과**: 1000개 항목 → 10개만 렌더링

#### 성능 모니터링

**1. Core Web Vitals**
- **LCP (Largest Contentful Paint)**: < 2.5s
- **FID (First Input Delay)**: < 100ms
- **CLS (Cumulative Layout Shift)**: < 0.1

**2. 모니터링 도구**
- **Lighthouse**: 정기 감사
- **Chrome DevTools**: 개발 중 모니터링
- **Web Vitals 라이브러리**: 실사용자 데이터 수집

**3. 성능 예산**
- **JavaScript**: 최대 300KB (Gzip)
- **CSS**: 최대 50KB (Gzip)
- **이미지**: 화면당 최대 1MB
- **초기 로딩**: 3G에서 5초 이내

---

## 변경 이력

| 버전 | 날짜 | 변경 내용 | 작성자 |
|------|------|-----------|--------|
| 1.0 | 2025-01-20 | 초기 UI/UX 설계서 작성 | 이미준 |

---

## 부록

### 디자인 시스템

#### 색상 팔레트

**Light Mode (기본)**
```
Primary:   #1976D2 (파란색)
Secondary: #FFC107 (노란색)
Success:   #4CAF50 (녹색)
Warning:   #FF9800 (주황색)
Error:     #F44336 (빨간색)
Gray:      #757575 (중간 회색)

Background: #FFFFFF (흰색)
Surface:    #F5F5F5 (연한 회색)
Text:       #212121 (검은색)
```

**Dark Mode**
```
Primary:   #64B5F6 (밝은 파란색)
Secondary: #FFD54F (밝은 노란색)
Success:   #81C784 (밝은 녹색)
Warning:   #FFB74D (밝은 주황색)
Error:     #E57373 (밝은 빨간색)
Gray:      #BDBDBD (밝은 회색)

Background: #121212 (어두운 검은색)
Surface:    #1E1E1E (어두운 회색)
Text:       #FFFFFF (흰색)
```

#### 타이포그래피
```
Heading 1: 24px, Bold, Line Height 32px
Heading 2: 20px, Bold, Line Height 28px
Heading 3: 18px, Bold, Line Height 24px
Body:      16px, Regular, Line Height 24px
Caption:   14px, Regular, Line Height 20px
Label:     12px, Regular, Line Height 16px
```

#### 간격
```
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
xxl: 48px
```

#### 애니메이션 스펙

**Duration (지속 시간)**
```
instant: 100ms   - 즉각적 피드백
fast:    200ms   - 빠른 전환
normal:  300ms   - 기본 전환
slow:    500ms   - 강조 전환
```

**Easing (이징 함수)**
```
standard:     cubic-bezier(0.4, 0.0, 0.2, 1)  - 기본
decelerate:   cubic-bezier(0.0, 0.0, 0.2, 1)  - 감속
accelerate:   cubic-bezier(0.4, 0.0, 1, 1)    - 가속
sharp:        cubic-bezier(0.4, 0.0, 0.6, 1)  - 날카로운
```

**애니메이션 적용 예시**
```css
/* 화면 전환 (Push) */
.screen-push-enter {
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.screen-push-enter-active {
  transform: translateX(0);
}

/* 모달 (Bottom Sheet) */
.modal-enter {
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.modal-enter-active {
  transform: translateY(0);
}

/* 페이드 인/아웃 */
.fade-enter {
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.fade-enter-active {
  opacity: 1;
}
```

### 공통 컴포넌트

#### 1. Button
**종류**
- Primary: 주요 액션 (배경 Primary color)
- Secondary: 보조 액션 (테두리만)
- Text: 텍스트만 (배경 없음)

**크기**
- Small: 32px 높이, 12px 폰트
- Medium: 44px 높이, 16px 폰트 (기본)
- Large: 56px 높이, 18px 폰트

**상태**
- Default: 기본
- Hover: 배경 10% 밝게
- Pressed: 배경 10% 어둡게
- Disabled: 투명도 50%
- Loading: 스피너 표시

#### 2. Card
**구조**
```
┌────────────────────┐
│ Header (선택)      │
├────────────────────┤
│ Content            │
│                    │
├────────────────────┤
│ Actions (선택)     │
└────────────────────┘
```

**스타일**
- 배경: Surface color
- 테두리: 1px solid #E0E0E0
- 모서리: 8px 둥글게
- 그림자: 0 2px 4px rgba(0,0,0,0.1)
- 패딩: 16px

#### 3. Input Field
**종류**
- Text: 일반 텍스트
- Email: 이메일
- Password: 비밀번호 (보기/숨기기 토글)
- Number: 숫자
- Date: 날짜 피커
- Time: 시간 피커

**상태**
- Default: 테두리 Gray
- Focus: 테두리 Primary
- Error: 테두리 Error, 에러 메시지
- Disabled: 배경 Gray, 투명도 50%

**구조**
```
[Label]
[Input Field     ]
[Helper/Error Text]
```

#### 4. Modal
**종류**
- Dialog: 중앙 팝업
- Bottom Sheet: 하단 슬라이드 업 (Mobile)
- Side Panel: 우측 슬라이드 인 (Desktop)

**구조**
```
[Backdrop (반투명 검은색)]
┌─────────────────────┐
│ [X] Title           │
├─────────────────────┤
│ Content             │
│                     │
├─────────────────────┤
│ [Cancel] [Confirm]  │
└─────────────────────┘
```

#### 5. Tab
**구조**
```
[ Tab 1 ] | [ Tab 2 ] | [ Tab 3 ]
━━━━━━━━
[Content]
```

**스타일**
- 선택: Primary color, 하단 선 (2px)
- 미선택: Gray color
- 인디케이터: 슬라이드 애니메이션 (300ms)

#### 6. Progress Bar
**종류**
- Linear: 가로 바
- Circular: 원형 스피너
- Determinate: 진행률 표시 (0-100%)
- Indeterminate: 무한 로딩

**스타일**
- 배경: Gray 200
- 진행: Primary color
- 높이: 4px (Linear)

### 로딩 상태 (Skeleton UI)

#### 스켈레톤 UI 디자인

**대시보드 스켈레톤**
```
┌─────────────────────┐
│ ≡  [████████]  🔔 👤│
├─────────────────────┤
│ [████████████]      │
│                     │
│ ┌─────────────────┐ │
│ │ [████████]      │ │
│ │ [██████]        │ │
│ │ [███]           │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ [████████]      │ │
│ │ [██████]        │ │
│ │ [███]           │ │
│ └─────────────────┘ │
└─────────────────────┘
```

**스켈레톤 애니메이션**
```css
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0px,
    #e0e0e0 40px,
    #f0f0f0 80px
  );
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}
```

### AI 처리 로딩 인디케이터

#### AI 회의록 생성 로딩
```
┌─────────────────────┐
│ 🤖 AI 회의록 생성 중 │
│                     │
│ [████████░░░░] 60%  │
│                     │
│ "논의 내용 분석 중..."│
└─────────────────────┘
```

**단계별 메시지**
- 0-20%: "음성 데이터 분석 중..."
- 20-40%: "발언 내용 분류 중..."
- 40-60%: "논의 내용 정리 중..."
- 60-80%: "결정 사항 추출 중..."
- 80-100%: "회의록 생성 중..."

#### AI Todo 추출 로딩
```
┌─────────────────────┐
│ 🤖 Todo 자동 추출 중 │
│                     │
│ [○○○○○] (펄스)     │
│                     │
│ "액션 아이템 분석 중..."│
└─────────────────────┘
```

#### AI 회의록 개선 로딩
```
┌─────────────────────┐
│ 🤖 회의록 개선 중    │
│                     │
│ [스피너]            │
│                     │
│ "1Page 요약 생성 중..."│
│ 예상 시간: 약 10초  │
└─────────────────────┘
```

#### STT 정확도 표시
```
[14:05] 김민준:
프로젝트 일정을 검토...
[정확도: 95% ✓]

[14:07] 박서연:
알지 시스템 구현...
[정확도: 45% ⚠️ 수동 확인 필요]
```

**정확도별 색상**
- 90-100%: 녹색 (Success)
- 70-89%: 노란색 (Warning)
- 0-69%: 빨간색 (Error) + "수동 확인 필요" 메시지

### 프롬프팅 가이드 UI

#### 회의록 개선 프롬프트 예시
```
┌─────────────────────────┐
│ 🤖 회의록 개선          │
├─────────────────────────┤
│                         │
│ 사전 정의 프롬프트:     │
│                         │
│ ○ 1Page 요약            │
│   "A4 1장 분량으로..."  │
│                         │
│ ○ 핵심 요약             │
│   "3-5개 핵심 포인트..."│
│                         │
│ ○ 상세 보고서           │
│   "시간순 상세 기록..." │
│                         │
│ ○ 경영진 보고용         │
│   "임원진 보고 형식..." │
│                         │
│ ○ 커스텀 프롬프트       │
│   [직접 입력]           │
│                         │
│ 💡 팁:                  │
│ "간결하게 요약해줘"     │
│ "전문용어 설명 포함"    │
│                         │
│ [      생성하기      ]  │
│                         │
└─────────────────────────┘
```

### 관련도 점수 시각화

#### 관련 회의록 카드
```
┌─────────────────────┐
│ 📝 프로젝트 회의    │
│ 2025-01-15          │
│                     │
│ 참석자: 김민준, ... │
│                     │
│ 관련도: 85%         │
│ [████████░░] 85%    │
│                     │
│ 🏷️ #RAG시스템       │
│    #성능최적화      │
│                     │
└─────────────────────┘
```

**관련도 점수별 색상**
- 90-100%: 진한 파란색
- 70-89%: 파란색
- 50-69%: 연한 파란색
- 30-49%: 회색 (표시 안 함)

---

## 변경 이력

| 버전 | 날짜 | 변경 내용 | 작성자 |
|------|------|-----------|--------|
| 1.0 | 2025-01-20 | 초기 UI/UX 설계서 작성 | 이미준 |
| 1.1 | 2025-01-20 | 팀 리뷰 반영: 공통 컴포넌트, 애니메이션 스펙, 로딩 상태, AI 처리 인디케이터 추가 | 이미준 |

---

**문서 끝**