hgzero/design/uiux/uiux.md

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

## 문서 정보
- **작성일**: 2025-10-20
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.0
- **설계 원칙**: Mobile First 디자인 철학
- **접근성 기준**: WCAG 2.1 Level AA

---

## 목차
1. [프로토타입 화면 목록](#1-프로토타입-화면-목록)
2. [화면 간 사용자 플로우](#2-화면-간-사용자-플로우)
3. [화면별 상세 설계](#3-화면별-상세-설계)
4. [화면 간 전환 및 네비게이션](#4-화면-간-전환-및-네비게이션)
5. [반응형 설계 전략](#5-반응형-설계-전략)
6. [접근성 보장 방안](#6-접근성-보장-방안)
7. [성능 최적화 방안](#7-성능-최적화-방안)
8. [변경 이력](#8-변경-이력)

---

## 1. 프로토타입 화면 목록

본 서비스는 Mobile First 설계 원칙에 따라 총 9개의 핵심 화면으로 구성됩니다.

| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 비고 |
|------|--------|-----------------|-----------------|------|
| 01 | 로그인 | UFR-USER-010 | 필수 | 인증 진입점 |
| 02 | 대시보드 | UFR-MEET-045, UFR-MEET-055 | 높음 | 메인 화면 |
| 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 준비 |
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 |
| 05 | 회의진행 | UFR-MEET-030, UFR-AI-010, UFR-RAG-010/020, UFR-COLLAB-010/020 | 매우 높음 | 핵심 차별화 기능 |
| 06 | 검증완료 | UFR-COLLAB-030 | 중간 | 품질 보장 |
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050, UFR-AI-020 | 높음 | 회의록 확정 |
| 08 | 회의록공유 | UFR-MEET-060 | 높음 | 공유 및 협업 |
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | 차별화 기능 |

---

## 2. 화면 간 사용자 플로우

### 2.1 주요 사용자 여정

```
[인증 플로우]
01-로그인 → 02-대시보드

[회의 예약 플로우]
02-대시보드 → 03-회의예약 → 02-대시보드

[회의 진행 플로우]
02-대시보드 → 04-템플릿선택 → 05-회의진행 → 06-검증완료 → 07-회의종료 → 08-회의록공유

[회의록 관리 플로우]
02-대시보드 → 회의록 상세 조회 → 수정/공유/다운로드

[Todo 관리 플로우]
09-Todo관리 → Todo 완료/수정 → 회의록 자동 반영
```

### 2.2 플로우 다이어그램

```
┌─────────┐
│01-로그인│
└────┬────┘
     │
     ▼
┌──────────┐     ┌──────────┐
│02-대시보드│────▶│03-회의예약│
└────┬─────┘     └──────────┘
     │
     ├─────────▶┌──────────────┐
     │          │04-템플릿선택 │
     │          └──────┬───────┘
     │                 │
     │                 ▼
     │          ┌──────────┐
     │          │05-회의진행│
     │          └────┬─────┘
     │               │
     │               ▼
     │          ┌──────────┐
     │          │06-검증완료│
     │          └────┬─────┘
     │               │
     │               ▼
     │          ┌──────────┐
     │          │07-회의종료│
     │          └────┬─────┘
     │               │
     │               ▼
     │          ┌────────────┐
     │          │08-회의록공유│
     │          └────────────┘
     │
     └─────────▶┌──────────┐
                │09-Todo관리│
                └──────────┘
```

---

## 3. 화면별 상세 설계

### 3.1 01-로그인

#### 개요
- **목적**: 사용자 인증 및 서비스 진입
- **관련 유저스토리**: UFR-USER-010
- **비즈니스 중요도**: 필수
- **화면 타입**: 단일 목적 페이지

#### 주요 기능
1. 사번과 비밀번호를 통한 LDAP 인증
2. 세션 관리 및 보안 유지
3. 인증 실패 시 오류 메시지 표시

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────┐
│      [로고 이미지]      │
│                         │
│   회의록 작성 서비스    │
│                         │
│  ┌───────────────────┐  │
│  │ 사번              │  │
│  │ [입력 필드]       │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 비밀번호          │  │
│  │ [입력 필드]       │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │    로그인 버튼    │  │
│  └───────────────────┘  │
│                         │
│  LDAP 연동 인증 시스템  │
└─────────────────────────┘
```

**주요 컴포넌트**:
- 로고 이미지 (SVG, 반응형)
- 사번 입력 필드 (type="text", autocomplete="username")
- 비밀번호 입력 필드 (type="password", autocomplete="current-password")
- 로그인 버튼 (primary action, 44x44px 이상)
- 인증 안내 텍스트

#### 인터랙션
1. **입력 검증**:
   - 실시간 입력 검증 (사번 형식, 비밀번호 입력 여부)
   - 포커스 이동: Tab 키로 필드 간 이동
   - Enter 키로 로그인 실행

2. **로그인 처리**:
   - 버튼 클릭 → 로딩 인디케이터 표시
   - LDAP 인증 진행
   - 성공 시: 대시보드로 자동 이동
   - 실패 시: 오류 메시지 표시 (3초 후 자동 사라짐)

3. **오류 처리**:
   - 인증 실패: "사번 또는 비밀번호가 올바르지 않습니다"
   - 네트워크 오류: "연결에 실패했습니다. 다시 시도해주세요"
   - 서버 오류: "일시적인 오류가 발생했습니다"

#### 데이터 요구사항
- **입력**: 사번 (문자열), 비밀번호 (문자열)
- **출력**: 인증 토큰, 사용자 정보 (이름, 권한)
- **저장**: 세션 토큰 (로컬 스토리지/세션 스토리지)

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 인증 실패 | 사번 또는 비밀번호가 올바르지 않습니다 | 재입력 유도 |
| 네트워크 오류 | 연결에 실패했습니다 | 재시도 버튼 표시 |
| 서버 오류 | 일시적인 오류가 발생했습니다 | 관리자 문의 안내 |

---

### 3.2 02-대시보드

#### 개요
- **목적**: 회의록 목록 조회, 빠른 액세스, 상태 확인
- **관련 유저스토리**: UFR-MEET-045 (상세조회), UFR-MEET-055 (수정)
- **비즈니스 중요도**: 높음
- **화면 타입**: 목록 및 액션 페이지

#### 주요 기능
1. 회의록 목록 조회 (필터링, 정렬, 검색)
2. 빠른 액션 (새 회의 예약, 진행 중인 회의)
3. 회의록 상세 조회 및 수정
4. 알림 확인

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [프로필] 대시보드  [알림🔔] │
├─────────────────────────────┤
│                             │
│  ┌─────────────────────┐   │
│  │  ➕ 새 회의 예약    │   │
│  └─────────────────────┘   │
│                             │
│  🔴 진행 중인 회의 (1건)   │
│  [회의 제목 - 지금 참여]   │
│                             │
├─────────────────────────────┤
│  내 회의록                  │
│                             │
│  [전체 ▼] [최신순 ▼] [🔍] │
│                             │
│  ┌───────────────────────┐ │
│  │ 📝 프로젝트 킥오프    │ │
│  │ 2025-10-20 14:00      │ │
│  │ ✅ 확정완료           │ │
│  │ 3명 참석              │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 📝 주간 회의          │ │
│  │ 2025-10-19 10:00      │ │
│  │ ⚠️ 작성중 (60%)       │ │
│  │ 5명 참석              │ │
│  └───────────────────────┘ │
│                             │
│  [더보기...]               │
│                             │
├─────────────────────────────┤
│  [대시보드]  [Todo]  [더보기]│
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 프로필 아이콘, 타이틀, 알림 아이콘
- 빠른 액션 버튼: 새 회의 예약 (primary), 진행 중인 회의 (secondary)
- 필터 영역: 상태 필터 (전체/작성중/확정완료), 정렬 (최신순/회의일시순/제목순)
- 검색 바: 회의 제목, 참석자, 키워드 검색
- 회의록 카드: 제목, 날짜, 상태, 참석자 수, 진행률 (작성중인 경우)
- 하단 네비게이션: 대시보드, Todo, 더보기

#### 인터랙션
1. **회의록 목록**:
   - 무한 스크롤 또는 페이지네이션
   - 카드 탭: 상세 화면으로 이동
   - 스와이프: 빠른 액션 (공유, 삭제)

2. **필터링 및 검색**:
   - 필터 선택: 즉시 목록 갱신
   - 검색: 300ms 디바운싱 후 API 요청
   - 결과 없을 시: "검색 결과가 없습니다" 메시지

3. **빠른 액션**:
   - 새 회의 예약: 03-회의예약 화면으로 이동
   - 진행 중인 회의: 05-회의진행 화면으로 복귀

4. **회의록 상세 조회** (UFR-MEET-045):
   - 카드 클릭 → 상세 화면 모달 또는 새 페이지
   - 표시 정보:
     - 회의 기본 정보: 제목, 일시, 장소, 참석자, 템플릿, 상태, 작성자
     - 섹션별 내용: 논의사항, 결정사항, Todo, 기타
     - 검증 상태: 섹션별 체크 표시
     - Todo 항목: 담당자, 마감일, 상태, 우선순위
     - 첨부파일: 다운로드 링크
   - 부가 기능:
     - 수정 버튼 (권한 있는 경우)
     - 공유 버튼
     - PDF 다운로드
     - 이전/다음 회의록 네비게이션
     - 뒤로가기

5. **회의록 수정** (UFR-MEET-055):
   - 수정 버튼 클릭 → 편집 모드 전환
   - 상태별 수정 범위:
     - 작성중: 모든 섹션 수정 가능
     - 확정완료: 승인 요청 후 수정 가능
   - 자동 저장: 30초 간격
   - 수정 이력: 누가, 언제, 무엇을 수정했는지
   - 저장 버튼 클릭 → 상태 업데이트 → 목록 갱신

#### 데이터 요구사항
- **입력**: 필터 조건, 검색 키워드, 정렬 옵션
- **출력**: 회의록 목록 (제목, 날짜, 상태, 참석자, 진행률)
- **캐싱**: 최근 조회한 목록 (5분)

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 조회 실패 | 목록을 불러올 수 없습니다 | 새로고침 버튼 |
| 검색 실패 | 검색 중 오류가 발생했습니다 | 재시도 유도 |
| 수정 권한 없음 | 수정 권한이 없습니다 | 확인 버튼 |

---

### 3.3 03-회의예약

#### 개요
- **목적**: 회의 예약 및 참석자 초대
- **관련 유저스토리**: UFR-MEET-010
- **비즈니스 중요도**: 높음
- **화면 타입**: 폼 입력 페이지

#### 주요 기능
1. 회의 정보 입력 (제목, 날짜/시간, 장소, 참석자)
2. 입력 검증 및 예약 생성
3. 초대 이메일 자동 발송
4. 캘린더 자동 등록

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [←] 회의 예약         [저장]│
├─────────────────────────────┤
│                             │
│  회의 제목 *                │
│  ┌─────────────────────┐   │
│  │ [입력 필드]         │   │
│  └─────────────────────┘   │
│                             │
│  날짜 및 시간 *             │
│  ┌──────────┬──────────┐   │
│  │ 2025-10-20│ 14:00   │   │
│  └──────────┴──────────┘   │
│                             │
│  장소 (선택)                │
│  ┌─────────────────────┐   │
│  │ [입력 필드]         │   │
│  └─────────────────────┘   │
│                             │
│  참석자 *                   │
│  ┌─────────────────────┐   │
│  │ user1@company.com   │   │
│  │ user2@company.com   │   │
│  │ + 참석자 추가       │   │
│  └─────────────────────┘   │
│                             │
│  ☑️ 회의 시작 30분 전      │
│     리마인더 발송           │
│                             │
│  ┌─────────────────────┐   │
│  │    회의 예약하기    │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 뒤로가기, 타이틀, 저장 버튼
- 회의 제목 입력 필드 (최대 100자, 필수)
- 날짜 선택기 (달력 UI, 필수)
- 시간 선택기 (시간 목록, 필수)
- 장소 입력 필드 (최대 200자, 선택)
- 참석자 입력 영역 (이메일 칩, 최소 1명 필수)
- 리마인더 설정 체크박스
- 예약하기 버튼 (primary action)

#### 인터랙션
1. **폼 입력**:
   - 실시간 검증: 제목 길이, 이메일 형식, 날짜/시간 유효성
   - 참석자 추가: 이메일 입력 후 Enter 또는 버튼 클릭
   - 참석자 제거: 칩 클릭 또는 스와이프

2. **날짜/시간 선택**:
   - 날짜 선택기: 달력 모달 표시
   - 시간 선택기: 드롭다운 또는 스크롤 선택
   - 과거 날짜 선택 불가

3. **예약 처리**:
   - 버튼 클릭 → 필수 항목 검증
   - 성공 시:
     - 회의 ID 생성
     - 캘린더 자동 등록
     - 참석자에게 이메일 발송
     - 성공 메시지 표시 (토스트)
     - 대시보드로 이동
   - 실패 시: 오류 메시지 표시

4. **자동 저장**:
   - 입력 중 임시 저장 (30초 간격)
   - 뒤로가기 시 저장 확인 다이얼로그

#### 데이터 요구사항
- **입력**: 제목, 날짜, 시간, 장소, 참석자 목록
- **출력**: 회의 ID, 예약 확인
- **저장**: 임시 저장 데이터 (로컬 스토리지)

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 필수 항목 누락 | [항목명]을 입력해주세요 | 해당 필드로 포커스 |
| 이메일 형식 오류 | 올바른 이메일을 입력해주세요 | 재입력 유도 |
| 예약 실패 | 예약에 실패했습니다 | 재시도 버튼 |
| 날짜 과거 선택 | 과거 날짜는 선택할 수 없습니다 | 오늘 날짜로 초기화 |

---

### 3.4 04-템플릿선택

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

#### 주요 기능
1. 템플릿 목록 표시 (일반, 스크럼, 킥오프, 주간)
2. 템플릿 미리보기
3. 섹션 커스터마이징 (추가/삭제/순서 변경)
4. 회의록 도구 준비

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [←] 템플릿 선택       [다음]│
├─────────────────────────────┤
│                             │
│  회의 유형에 맞는 템플릿을  │
│  선택해주세요               │
│                             │
│  ┌───────────────────────┐ │
│  │ 📋 일반 회의          │ │
│  │ 기본 구조: 참석자,    │ │
│  │ 안건, 논의, 결정, Todo│ │
│  │ [미리보기]  [✓ 선택]  │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 🏃 스크럼 회의        │ │
│  │ 어제 한 일, 오늘 할 일│ │
│  │ 이슈                  │ │
│  │ [미리보기]  [ 선택]   │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 🚀 프로젝트 킥오프    │ │
│  │ 개요, 목표, 일정,     │ │
│  │ 역할, 리스크          │ │
│  │ [미리보기]  [ 선택]   │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 📊 주간 회의          │ │
│  │ 실적, 이슈, 다음 계획 │ │
│  │ [미리보기]  [ 선택]   │ │
│  └───────────────────────┘ │
│                             │
│  [커스터마이징]             │
│                             │
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 뒤로가기, 타이틀, 다음 버튼
- 템플릿 카드: 아이콘, 제목, 설명, 미리보기 버튼, 선택 버튼
- 커스터마이징 버튼 (선택한 템플릿이 있을 때 활성화)

**커스터마이징 모달**:
```
┌─────────────────────────────┐
│ 템플릿 커스터마이징   [완료]│
├─────────────────────────────┤
│                             │
│  섹션 관리                  │
│                             │
│  ☰ 참석자                   │
│  ☰ 안건                     │
│  ☰ 논의 내용                │
│  ☰ 결정 사항                │
│  ☰ Todo                     │
│                             │
│  ┌─────────────────────┐   │
│  │ + 섹션 추가         │   │
│  └─────────────────────┘   │
│                             │
│  섹션을 길게 눌러 순서를    │
│  변경하거나 삭제할 수 있습니다│
│                             │
└─────────────────────────────┘
```

#### 인터랙션
1. **템플릿 선택**:
   - 카드 탭: 선택 상태 토글
   - 미리보기 버튼: 템플릿 구조 모달 표시
   - 하나만 선택 가능 (라디오 버튼 방식)

2. **미리보기**:
   - 템플릿 구조 전체 표시
   - 샘플 데이터로 예시 제공
   - 닫기 버튼으로 모달 종료

3. **커스터마이징**:
   - 커스터마이징 버튼 클릭 → 모달 표시
   - 섹션 순서 변경: 드래그 앤 드롭 또는 위/아래 버튼
   - 섹션 삭제: 스와이프 또는 삭제 아이콘
   - 섹션 추가: 입력 필드에 섹션명 입력 후 추가
   - 완료 버튼: 변경 사항 저장

4. **다음 단계**:
   - 다음 버튼 클릭 → 05-회의진행 화면으로 이동
   - 템플릿 정보 전달 (선택한 템플릿, 커스터마이징 내용)

#### 데이터 요구사항
- **입력**: 템플릿 선택, 커스터마이징 정보
- **출력**: 준비된 회의록 구조
- **캐싱**: 템플릿 목록 (앱 시작 시 로드)

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 템플릿 미선택 | 템플릿을 선택해주세요 | 선택 유도 |
| 섹션명 중복 | 이미 존재하는 섹션명입니다 | 재입력 유도 |
| 섹션 로드 실패 | 템플릿을 불러올 수 없습니다 | 새로고침 버튼 |

---

### 3.5 05-회의진행

#### 개요
- **목적**: 회의 진행, 실시간 회의록 작성, 차별화 기능 제공
- **관련 유저스토리**: UFR-MEET-030 (회의시작), UFR-AI-010 (자동작성), UFR-RAG-010/020 (용어설명), UFR-COLLAB-010/020 (협업)
- **비즈니스 중요도**: 매우 높음 (핵심 차별화 기능)
- **화면 타입**: 실시간 협업 페이지

#### 주요 기능
1. 음성 녹음 및 실시간 STT 변환
2. AI 자동 회의록 작성 및 구조화
3. 맥락 기반 용어 설명 (차별화)
4. 실시간 협업 및 동기화
5. 충돌 해결
6. 회의 종료

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [←] 프로젝트 킥오프   [종료]│
├─────────────────────────────┤
│                             │
│  🔴 녹음 중  [23:45]       │
│  ┌─────────────────────┐   │
│  │ 🎵 파형 애니메이션  │   │
│  └─────────────────────┘   │
│                             │
│  👥 참석자 (3/5명)         │
│  [김민준] [박서연] [이준호] │
│                             │
├─────────────────────────────┤
│  📝 실시간 회의록           │
│                             │
│  ▼ 참석자                   │
│    - 김민준 (주관자)        │
│    - 박서연                 │
│    - 이준호                 │
│                             │
│  ▼ 안건                     │
│    - 프로젝트 목표 정의     │
│    - 일정 및 마일스톤       │
│                             │
│  ▼ 논의 내용                │
│    "우리는 Q1까지 MVP를     │
│     완성해야 합니다..."     │
│                             │
│    💡 [RAG] 용어 설명       │
│    "MVP는 최소 기능 제품으로│
│     이전 프로젝트에서는..." │
│                             │
│  ▼ 결정 사항                │
│    - 개발 프레임워크: React │
│    - 배포 환경: AWS         │
│                             │
│  ▼ Todo                     │
│    ☐ 요구사항 정의 @김민준  │
│      (~ 10/25)              │
│                             │
│  [📝 수정] [💬 댓글]        │
│                             │
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 뒤로가기, 회의 제목, 종료 버튼
- 녹음 상태 영역: 녹음 표시, 진행 시간, 파형 애니메이션
- 참석자 목록: 아바타, 이름, 참석 상태
- 회의록 섹션: 아코디언 방식, 접기/펼치기
- 실시간 텍스트 영역: STT 변환 결과 표시
- AI 자동 정리 영역: 구조화된 회의록
- 용어 하이라이트: 밑줄 또는 배경색, 툴팁
- 액션 버튼: 수정, 댓글, 첨부

**맥락 기반 용어 설명 툴팁** (차별화 기능):
```
┌─────────────────────────────┐
│ MVP (Minimum Viable Product)│
├─────────────────────────────┤
│ 📘 정의:                    │
│ 최소 기능 제품, 핵심 기능만 │
│ 구현하여 시장 검증          │
│                             │
│ 🏢 이 회의에서의 의미:      │
│ "Q1까지 사용자 인증, 대시보드│
│  핵심 기능만 구현"          │
│                             │
│ 📂 관련 프로젝트:           │
│ - 2024 고객 포털 프로젝트   │
│ - 2023 모바일 앱 리뉴얼     │
│                             │
│ 📄 과거 회의록:             │
│ - 2024-09-15 기획 회의      │
│ - 2024-08-20 킥오프 회의    │
│                             │
│ [자세히 보기]               │
└─────────────────────────────┘
```

#### 인터랙션
1. **회의 시작**:
   - 회의 시작 버튼 클릭 → 권한 확인 (마이크)
   - 녹음 시작 → 파형 애니메이션 표시
   - 참석자 목록 표시 → 실시간 참석 상태 업데이트

2. **실시간 STT 및 AI 작성**:
   - 음성 인식 → 텍스트 변환 (1초 이내)
   - AI 자동 정리 → 3-5초 간격으로 회의록 업데이트
   - 화자 식별 → 발언자 표시
   - 구조화 → 템플릿 섹션에 맞춰 자동 분류

3. **맥락 기반 용어 설명** (차별화):
   - 전문용어 자동 감지 → 하이라이트 표시
   - 용어 클릭/탭 → 툴팁 표시
   - RAG 검색 → 과거 회의록, 사내 문서에서 맥락 추출
   - 설명 표시:
     - 간단한 정의
     - 이 회의에서의 의미
     - 관련 프로젝트/이슈
     - 과거 회의록 링크
     - 사내 문서 링크
   - 툴팁 외부 클릭 → 닫기
   - "자세히 보기" → 전체 화면 모달

4. **실시간 협업** (UFR-COLLAB-010):
   - 회의록 수정 → WebSocket으로 즉시 동기화
   - 수정 영역 하이라이트 (3초간)
   - 수정자 이름 표시
   - 버전 관리 → 수정 이력 저장

5. **충돌 해결** (UFR-COLLAB-020):
   - 동일 위치 동시 수정 감지
   - 충돌 알림 표시
   - 해결 방식 선택:
     - Last Write Wins (기본)
     - 수동 병합 (비교 UI 표시)

6. **회의 종료**:
   - 종료 버튼 클릭 → 확인 다이얼로그
   - 확인 → 녹음 중지 → 06-검증완료 화면으로 이동

#### 데이터 요구사항
- **입력**: 음성 스트림, 회의 ID, 참석자 정보
- **출력**: 텍스트 변환 결과, 구조화된 회의록, 용어 설명
- **실시간 동기화**: WebSocket 연결
- **로컬 저장**: 임시 회의록 (30초 간격)

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 마이크 권한 없음 | 마이크 권한이 필요합니다 | 설정 안내 |
| STT 실패 | 음성 인식에 실패했습니다 | 수동 입력 모드 |
| AI 처리 실패 | 자동 정리 중 오류 발생 | 재시도 버튼 |
| 동기화 실패 | 연결이 끊어졌습니다 | 재연결 시도 |
| 용어 설명 없음 | 관련 정보를 찾을 수 없습니다 | 전문가 요청 버튼 |

---

### 3.6 06-검증완료

#### 개요
- **목적**: 회의록 섹션별 검증 및 완료 표시
- **관련 유저스토리**: UFR-COLLAB-030
- **비즈니스 중요도**: 중간
- **화면 타입**: 검증 및 확인 페이지

#### 주요 기능
1. 섹션별 검증 상태 확인
2. 검증 완료 체크
3. 섹션 잠금 (회의 생성자만)
4. 다음 단계 (회의 종료)

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [←] 회의록 검증       [다음]│
├─────────────────────────────┤
│                             │
│  회의록 섹션별로 검증해주세요│
│                             │
│  ✅ 참석자 (검증완료)       │
│  ┌───────────────────────┐ │
│  │ - 김민준 (주관자)     │ │
│  │ - 박서연              │ │
│  │ - 이준호              │ │
│  │                       │ │
│  │ 검증자: 김민준        │ │
│  │ 시간: 14:35           │ │
│  │ [수정] [🔒 잠금]      │ │
│  └───────────────────────┘ │
│                             │
│  ⚠️ 안건 (검증 필요)        │
│  ┌───────────────────────┐ │
│  │ - 프로젝트 목표 정의  │ │
│  │ - 일정 및 마일스톤    │ │
│  │                       │ │
│  │ [수정] [✓ 검증완료]   │ │
│  └───────────────────────┘ │
│                             │
│  ⚠️ 논의 내용 (검증 필요)   │
│  ┌───────────────────────┐ │
│  │ "우리는 Q1까지..."    │ │
│  │                       │ │
│  │ [수정] [✓ 검증완료]   │ │
│  └───────────────────────┘ │
│                             │
│  ✅ 결정 사항 (검증완료)    │
│  ✅ Todo (검증완료)         │
│                             │
│  전체 진행률: 60% (3/5)    │
│                             │
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 뒤로가기, 타이틀, 다음 버튼
- 섹션 카드: 제목, 내용 미리보기, 검증 상태, 검증자 정보
- 액션 버튼: 수정, 검증완료, 잠금 (회의 생성자만)
- 진행률 표시: 퍼센트, 완료 수/전체 수

#### 인터랙션
1. **섹션 검증**:
   - 섹션 카드 탭 → 전체 내용 표시
   - 검증완료 버튼 클릭 → 상태 업데이트
   - 검증 시간 및 검증자 기록
   - 실시간 동기화 → 다른 참석자에게 알림

2. **섹션 잠금** (회의 생성자만):
   - 잠금 버튼 클릭 → 확인 다이얼로그
   - 확인 → 섹션 잠금 (추가 수정 불가)
   - 잠금 아이콘 표시

3. **섹션 수정**:
   - 수정 버튼 클릭 → 편집 모드
   - 인라인 편집 또는 모달
   - 저장 → 상태 "검증 필요"로 변경

4. **다음 단계**:
   - 다음 버튼 클릭 → 07-회의종료 화면으로 이동
   - 검증 미완료 섹션이 있어도 진행 가능 (나중에 수정 가능)

#### 데이터 요구사항
- **입력**: 섹션별 검증 상태
- **출력**: 검증 완료 정보 (검증자, 시간)
- **실시간 동기화**: WebSocket

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 검증 권한 없음 | 검증 권한이 없습니다 | 확인 버튼 |
| 잠금 권한 없음 | 회의 생성자만 잠금할 수 있습니다 | 확인 버튼 |
| 동기화 실패 | 검증 상태 동기화 실패 | 재시도 버튼 |

---

### 3.7 07-회의종료

#### 개요
- **목적**: 회의 종료, 통계 확인, Todo 자동 추출, 최종 확정
- **관련 유저스토리**: UFR-MEET-040 (회의종료), UFR-MEET-050 (최종확정), UFR-AI-020 (Todo자동추출)
- **비즈니스 중요도**: 높음
- **화면 타입**: 요약 및 확정 페이지

#### 주요 기능
1. 회의 통계 표시
2. AI Todo 자동 추출 결과
3. 최종 회의록 확정
4. 회의록 공유 이동

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [←] 회의 종료         [확정]│
├─────────────────────────────┤
│                             │
│  🎉 회의가 종료되었습니다   │
│                             │
│  📊 회의 통계               │
│  ┌───────────────────────┐ │
│  │ ⏱️ 총 시간: 45분      │ │
│  │ 👥 참석자: 3명        │ │
│  │ 💬 발언 횟수:         │ │
│  │    김민준 12회        │ │
│  │    박서연 8회         │ │
│  │    이준호 5회         │ │
│  │ 🔑 주요 키워드:       │ │
│  │    #MVP #React #AWS   │ │
│  └───────────────────────┘ │
│                             │
│  ✅ AI Todo 자동 추출       │
│  ┌───────────────────────┐ │
│  │ ☐ 요구사항 정의       │ │
│  │   @김민준 ~ 10/25     │ │
│  │                       │ │
│  │ ☐ 기술 스택 검토      │ │
│  │   @박서연 ~ 10/27     │ │
│  │                       │ │
│  │ ☐ 인프라 설계         │ │
│  │   @이준호 ~ 10/30     │ │
│  └───────────────────────┘ │
│                             │
│  필수 항목 확인:            │
│  ✅ 회의 제목               │
│  ✅ 참석자 목록             │
│  ✅ 주요 논의 내용          │
│  ✅ 결정 사항               │
│                             │
│  ┌─────────────────────┐   │
│  │  최종 회의록 확정   │   │
│  └─────────────────────┘   │
│                             │
│  [나중에 확정]              │
│                             │
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 뒤로가기, 타이틀, 확정 버튼
- 완료 메시지: 아이콘, 텍스트
- 통계 카드: 시간, 참석자, 발언 횟수, 키워드
- Todo 자동 추출 영역: Todo 목록, 담당자, 마감일
- 필수 항목 체크리스트: 체크 아이콘
- 확정 버튼 (primary)
- 나중에 확정 버튼 (secondary)

#### 인터랙션
1. **회의 통계**:
   - 자동 생성 및 표시
   - 그래프 또는 차트 (선택)
   - 키워드 탭 → 관련 섹션으로 이동

2. **AI Todo 자동 추출** (UFR-AI-020):
   - AI가 회의록 분석 → 액션 아이템 식별
   - 담당자 자동 지정 (발언 기반)
   - 마감일 자동 추출 (언급된 경우)
   - Todo 편집 가능 (담당자, 마감일 수정)
   - 추가/삭제 가능

3. **최종 확정** (UFR-MEET-050):
   - 확정 버튼 클릭 → 필수 항목 검사
   - 필수 항목 누락 시:
     - 누락 항목 표시
     - 해당 섹션으로 이동 유도
   - 필수 항목 완료 시:
     - 최종 버전 생성
     - 확정 시간 기록
     - Todo 서비스로 Todo 전달 (UFR-TODO-010)
     - 08-회의록공유 화면으로 이동

4. **나중에 확정**:
   - 버튼 클릭 → 대시보드로 이동
   - 회의록 상태: "작성중"
   - 나중에 수정 및 확정 가능

#### 데이터 요구사항
- **입력**: 회의 데이터 (시간, 참석자, 발언 내용)
- **출력**: 통계, Todo 목록, 확정 정보
- **저장**: 최종 회의록, Todo 데이터

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 필수 항목 누락 | [항목명]이 작성되지 않았습니다 | 해당 섹션으로 이동 |
| Todo 추출 실패 | Todo 자동 추출 실패 | 수동 작성 유도 |
| 확정 실패 | 회의록 확정에 실패했습니다 | 재시도 버튼 |

---

### 3.8 08-회의록공유

#### 개요
- **목적**: 회의록 공유 설정 및 알림 발송
- **관련 유저스토리**: UFR-MEET-060
- **비즈니스 중요도**: 높음
- **화면 타입**: 설정 및 액션 페이지

#### 주요 기능
1. 공유 대상 선택
2. 권한 설정
3. 공유 방식 선택
4. 링크 보안 옵션
5. 공유 실행 및 알림 발송

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [←] 회의록 공유       [공유]│
├─────────────────────────────┤
│                             │
│  공유 대상                  │
│  ┌───────────────────────┐ │
│  │ ● 참석자 전체 (기본)  │ │
│  │ ○ 특정 참석자 선택    │ │
│  └───────────────────────┘ │
│                             │
│  공유 권한                  │
│  ┌───────────────────────┐ │
│  │ ● 읽기 전용           │ │
│  │ ○ 댓글 가능           │ │
│  │ ○ 편집 가능           │ │
│  └───────────────────────┘ │
│                             │
│  공유 방식                  │
│  ┌───────────────────────┐ │
│  │ ☑️ 이메일 발송        │ │
│  │ ☑️ 링크 복사          │ │
│  └───────────────────────┘ │
│                             │
│  링크 보안 (선택)           │
│  ┌───────────────────────┐ │
│  │ ☐ 유효 기간 설정      │ │
│  │   [30일 ▼]            │ │
│  │                       │ │
│  │ ☐ 비밀번호 설정       │ │
│  │   [입력 필드]         │ │
│  └───────────────────────┘ │
│                             │
│  🔔 다음 회의 일정          │
│  ┌───────────────────────┐ │
│  │ ☑️ 캘린더 자동 등록   │ │
│  │ 날짜: [선택]          │ │
│  └───────────────────────┘ │
│                             │
│  ┌─────────────────────┐   │
│  │    회의록 공유      │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 뒤로가기, 타이틀, 공유 버튼
- 공유 대상 라디오 버튼
- 권한 설정 라디오 버튼
- 공유 방식 체크박스
- 링크 보안 옵션: 유효 기간, 비밀번호
- 다음 회의 일정: 캘린더 자동 등록 옵션
- 공유 버튼 (primary)

#### 인터랙션
1. **공유 대상 선택**:
   - 참석자 전체 (기본 선택)
   - 특정 참석자 선택 → 체크박스 목록 표시

2. **권한 설정**:
   - 읽기 전용 (기본)
   - 댓글 가능
   - 편집 가능

3. **공유 방식**:
   - 이메일 발송: 참석자 이메일로 알림
   - 링크 복사: 클립보드에 복사 → 토스트 메시지

4. **링크 보안**:
   - 유효 기간: 드롭다운 (7일, 30일, 90일, 무제한)
   - 비밀번호: 입력 필드, 자동 생성 버튼

5. **다음 회의 일정**:
   - 회의록에서 다음 회의 언급 자동 감지
   - 캘린더 자동 등록 체크박스
   - 날짜 선택기

6. **공유 실행**:
   - 공유 버튼 클릭 → 처리
   - 성공 시:
     - 공유 링크 생성
     - 이메일 발송 (선택 시)
     - 링크 복사 (선택 시)
     - 캘린더 등록 (선택 시)
     - 공유 시간 기록
     - 성공 메시지 표시
     - 대시보드로 이동
   - 실패 시: 오류 메시지

#### 데이터 요구사항
- **입력**: 공유 대상, 권한, 방식, 보안 옵션
- **출력**: 공유 링크, 발송 결과
- **저장**: 공유 이력

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 공유 실패 | 공유에 실패했습니다 | 재시도 버튼 |
| 이메일 발송 실패 | 이메일 발송 실패 | 링크 복사 유도 |
| 링크 생성 실패 | 링크 생성 실패 | 재시도 버튼 |

---

### 3.9 09-Todo관리

#### 개요
- **목적**: Todo 할당, 진행 관리, 회의록 실시간 연동 (차별화)
- **관련 유저스토리**: UFR-TODO-010 (Todo할당), UFR-TODO-030 (Todo완료처리)
- **비즈니스 중요도**: 높음 (차별화 기능)
- **화면 타입**: 목록 및 관리 페이지

#### 주요 기능
1. Todo 목록 조회 (진행중/완료)
2. Todo 완료 처리
3. 회의록 실시간 연동 (차별화)
4. 필터링 및 정렬
5. 알림 발송

#### UI 구성요소

**Mobile (320px ~ 767px)**
```
┌─────────────────────────────┐
│ [프로필] Todo       [알림🔔]│
├─────────────────────────────┤
│                             │
│  [진행중 ▼] [마감일순 ▼]   │
│                             │
│  📌 진행 중 (3건)           │
│                             │
│  ┌───────────────────────┐ │
│  │ ☐ 요구사항 정의       │ │
│  │ @김민준               │ │
│  │ 📅 ~ 10/25 (D-5)      │ │
│  │ ⭐ 높음              │ │
│  │ 📝 프로젝트 킥오프    │ │
│  │    (10/20)            │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ ☐ 기술 스택 검토      │ │
│  │ @박서연               │ │
│  │ 📅 ~ 10/27 (D-7)      │ │
│  │ ⭐ 보통              │ │
│  │ 📝 주간 회의 (10/19)  │ │
│  └───────────────────────┘ │
│                             │
│  ✅ 완료됨 (2건)            │
│                             │
│  ┌───────────────────────┐ │
│  │ ☑️ 회의 일정 조율     │ │
│  │ @이준호               │ │
│  │ ✓ 10/18 완료          │ │
│  │ 📝 킥오프 준비 회의   │ │
│  └───────────────────────┘ │
│                             │
├─────────────────────────────┤
│  [대시보드]  [Todo]  [더보기]│
└─────────────────────────────┘
```

**주요 컴포넌트**:
- 상단 헤더: 프로필, 타이틀, 알림
- 필터 영역: 상태 (진행중/완료), 정렬 (마감일/우선순위/최신순)
- Todo 카드:
  - 체크박스 (완료 처리)
  - Todo 내용
  - 담당자
  - 마감일 (D-day 표시)
  - 우선순위 (아이콘)
  - 회의록 링크 (제목, 날짜)
- 하단 네비게이션

**Todo 상세 모달**:
```
┌─────────────────────────────┐
│ Todo 상세               [✕] │
├─────────────────────────────┤
│                             │
│  ☐ 요구사항 정의            │
│                             │
│  담당자: 김민준             │
│  마감일: 2025-10-25         │
│  우선순위: 높음             │
│                             │
│  📝 관련 회의록:            │
│  프로젝트 킥오프 (10/20)    │
│  [회의록 보기]              │
│                             │
│  💬 댓글 (2)                │
│  - 김민준: 진행 중입니다    │
│  - 박서연: 도움 필요하시면  │
│    연락주세요               │
│                             │
│  ┌─────────────────────┐   │
│  │  완료 처리          │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘
```

#### 인터랙션
1. **Todo 목록**:
   - 무한 스크롤 또는 페이지네이션
   - 카드 탭: 상세 모달 표시
   - 스와이프: 빠른 액션 (완료, 수정, 삭제)

2. **Todo 완료 처리** (UFR-TODO-030):
   - 체크박스 클릭 → 확인 다이얼로그
   - 확인 → 완료 상태 변경
   - 완료 시간 기록
   - 회의록 실시간 반영 (차별화):
     - 관련 회의록의 Todo 섹션 자동 업데이트
     - 완료 표시 (체크 아이콘)
     - 완료 시간 및 완료자 표시
   - 알림 발송:
     - 회의 참석자에게 완료 알림
     - 모든 Todo 완료 시 전체 완료 알림

3. **회의록 연결** (차별화):
   - 회의록 보기 버튼 → 해당 회의록 상세 화면
   - 원문 맥락 추적 가능
   - 양방향 연결 (Todo ↔ 회의록)

4. **필터링 및 정렬**:
   - 상태 필터: 진행중, 완료
   - 정렬: 마감일순, 우선순위, 최신순

5. **댓글 및 협업**:
   - 댓글 작성 → 실시간 동기화
   - 담당자에게 알림

#### 데이터 요구사항
- **입력**: 필터, 정렬, 완료 처리
- **출력**: Todo 목록, 회의록 연결 정보
- **실시간 동기화**: WebSocket (회의록 반영)

#### 에러 처리
| 에러 유형 | 메시지 | 액션 |
|-----------|--------|------|
| 조회 실패 | Todo 목록을 불러올 수 없습니다 | 새로고침 버튼 |
| 완료 처리 실패 | 완료 처리에 실패했습니다 | 재시도 버튼 |
| 회의록 연결 실패 | 회의록을 찾을 수 없습니다 | 확인 버튼 |

---

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

### 4.1 네비게이션 전략

**Mobile (320px ~ 767px)**
- **하단 네비게이션 바**: 대시보드, Todo, 더보기
- **상단 헤더**: 뒤로가기, 타이틀, 액션 버튼
- **햄버거 메뉴**: 설정, 프로필, 로그아웃
- **플로팅 액션 버튼 (FAB)**: 빠른 액세스 (새 회의 예약)

**Tablet (768px ~ 1023px)**
- **사이드 네비게이션**: 고정된 좌측 메뉴
- **상단 네비게이션**: 로고, 검색, 알림, 프로필
- **플로팅 액션 버튼 (FAB)**: 빠른 액세스

**Desktop (1024px 이상)**
- **좌측 사이드바**: 고정된 네비게이션 메뉴
- **상단 헤더**: 로고, 검색, 알림, 프로필
- **키보드 단축키**: 빠른 네비게이션

### 4.2 화면 전환 패턴

| 전환 | 애니메이션 | 방향 |
|------|------------|------|
| 로그인 → 대시보드 | 페이드인 | - |
| 대시보드 → 상세 | 슬라이드 좌 | 우 → 좌 |
| 상세 → 대시보드 | 슬라이드 우 | 좌 → 우 |
| 모달 표시 | 슬라이드 상 | 하 → 상 |
| 모달 닫기 | 슬라이드 하 | 상 → 하 |

### 4.3 제스처 지원 (Mobile)

- **스와이프 우**: 뒤로가기 (iOS 스타일)
- **스와이프 좌**: 빠른 액션 (삭제, 공유)
- **길게 누르기**: 컨텍스트 메뉴
- **핀치 줌**: 이미지 확대/축소
- **풀 투 리프레시**: 목록 새로고침

---

## 5. 반응형 설계 전략

### 5.1 브레이크포인트

```css
/* Mobile First (기본) */
@media (min-width: 320px) { /* Mobile */ }
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1440px) { /* Large Desktop */ }
```

### 5.2 레이아웃 전략

**Mobile (320px ~ 767px)**
- 단일 컬럼 레이아웃
- 풀 스크린 모달
- 하단 네비게이션
- 스택 방식 (세로 배치)

**Tablet (768px ~ 1023px)**
- 2단 컬럼 (메인 + 사이드)
- 사이드 패널 (용어 설명, 참석자 목록)
- 플로팅 모달
- 그리드 레이아웃 (회의록 목록 2열)

**Desktop (1024px 이상)**
- 3단 컬럼 (네비게이션 + 메인 + 사이드)
- 인라인 모달
- 상단 네비게이션
- 그리드 레이아웃 (회의록 목록 3-4열)

### 5.3 점진적 향상

**Mobile (기본 기능)**
- 핵심 회의록 작성 기능
- 필수 검증 및 공유
- 기본 Todo 관리

**Tablet (추가 기능)**
- 빠른 액세스 패널
- 회의록 미리보기
- 멀티 선택 및 일괄 작업

**Desktop (고급 기능)**
- 다중 회의록 비교
- 고급 검색 및 필터
- 키보드 단축키
- 드래그 앤 드롭

### 5.4 타이포그래피 반응형

```css
/* 제목 */
h1 {
  font-size: 24px; /* Mobile */
}
@media (min-width: 768px) {
  h1 { font-size: 32px; } /* Tablet */
}
@media (min-width: 1024px) {
  h1 { font-size: 40px; } /* Desktop */
}

/* 본문 */
body {
  font-size: 14px; /* Mobile */
  line-height: 1.5;
}
@media (min-width: 768px) {
  body { font-size: 16px; } /* Tablet */
}
```

### 5.5 이미지 및 미디어 반응형

- **반응형 이미지**: `srcset`, `sizes` 속성 활용
- **WebP 포맷**: 최신 브라우저 지원
- **레이지 로딩**: `loading="lazy"` 속성
- **비디오**: 자동 재생 비활성화 (모바일)

---

## 6. 접근성 보장 방안

### 6.1 WCAG 2.1 Level AA 준수

#### 인식 가능성 (Perceivable)

1. **텍스트 대체**:
   - 모든 이미지에 `alt` 텍스트 제공
   - 아이콘에 `aria-label` 추가
   - 정보 전달 이미지: 상세한 설명
   - 장식 이미지: `alt=""` (빈 문자열)

2. **색상 대비**:
   - 일반 텍스트: 최소 4.5:1
   - 큰 텍스트 (18pt 이상): 최소 3:1
   - UI 컴포넌트: 최소 3:1
   - 색상만으로 정보 전달 금지 (아이콘, 텍스트 병행)

3. **리사이징**:
   - 200%까지 확대 가능
   - 콘텐츠 손실 없음
   - 가로 스크롤 최소화

4. **콘텐츠 구조**:
   - 의미론적 HTML 사용 (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`)
   - 제목 태그 계층 구조 (`<h1>` ~ `<h6>`)
   - 목록 태그 활용 (`<ul>`, `<ol>`, `<li>`)

#### 운용 가능성 (Operable)

1. **키보드 접근**:
   - 모든 기능 키보드로 조작 가능
   - Tab 키로 순차 이동
   - Shift + Tab으로 역순 이동
   - Enter/Space 키로 버튼 실행
   - Esc 키로 모달 닫기

2. **충분한 시간**:
   - 자동 로그아웃: 15분 전 경고
   - 세션 연장 옵션 제공
   - 타임아웃 없는 작업: 회의록 작성

3. **포커스 표시**:
   - 명확한 포커스 인디케이터 (2px 테두리)
   - 색상 대비 충족
   - 포커스 순서: 논리적 흐름

4. **제목 및 레이블**:
   - 모든 폼 필드에 `<label>` 연결
   - 버튼: 명확한 텍스트
   - 링크: 목적지 설명

#### 이해 가능성 (Understandable)

1. **읽기 수준**:
   - 간결하고 명확한 언어
   - 전문용어 설명 제공
   - 짧은 문장 (20단어 이하)

2. **예측 가능성**:
   - 일관된 네비게이션
   - 일관된 버튼 배치
   - 상태 변경 시 사용자에게 알림

3. **입력 지원**:
   - 실시간 오류 검증
   - 명확한 오류 메시지
   - 수정 제안 제공
   - 폼 레이블 명확화

#### 견고성 (Robust)

1. **마크업 유효성**:
   - 유효한 HTML5
   - 중첩 태그 올바르게 닫기
   - 고유한 `id` 속성

2. **스크린 리더 지원**:
   - ARIA 레이블 (`aria-label`, `aria-labelledby`)
   - ARIA 역할 (`role="button"`, `role="navigation"`)
   - ARIA 상태 (`aria-expanded`, `aria-selected`)
   - Live Regions (`aria-live="polite"`)

3. **호환성**:
   - 최신 브라우저 지원
   - 보조 기술 테스트 (NVDA, JAWS, VoiceOver)

### 6.2 모바일 접근성

1. **터치 타겟**:
   - 최소 크기: 44x44px
   - 충분한 간격: 8px 이상
   - 제스처 대안: 버튼 제공

2. **화면 회전**:
   - 세로/가로 모드 모두 지원
   - 콘텐츠 자동 조정

3. **확대/축소**:
   - 핀치 줌 지원
   - 최대 200% 확대

---

## 7. 성능 최적화 방안

### 7.1 초기 로딩 최적화

1. **코드 스플리팅**:
   - 화면별 번들 분리
   - 동적 import 활용
   - React.lazy, Suspense 사용

```javascript
const Dashboard = React.lazy(() => import('./Dashboard'));
const MeetingProgress = React.lazy(() => import('./MeetingProgress'));
```

2. **레이지 로딩**:
   - 이미지: `loading="lazy"`
   - 컴포넌트: Intersection Observer
   - 스크립트: `async`, `defer`

3. **프리로딩**:
   - 핵심 리소스 우선 로드
   - `<link rel="preload">`
   - 폰트, CSS 프리로드

4. **압축**:
   - Gzip/Brotli 압축
   - 이미지 최적화 (WebP, AVIF)
   - CSS/JS 미니파이

5. **캐싱**:
   - 서비스 워커 활용 (PWA)
   - HTTP 캐시 헤더
   - 로컬 스토리지/세션 스토리지

### 7.2 런타임 성능

1. **가상 스크롤**:
   - 긴 목록 최적화 (react-window, react-virtualized)
   - 뷰포트 내 항목만 렌더링

2. **디바운싱/쓰로틀링**:
   - 검색 입력: 300ms 디바운싱
   - 스크롤 이벤트: 100ms 쓰로틀링
   - 리사이즈 이벤트: 200ms 쓰로틀링

3. **메모이제이션**:
   - React.memo로 컴포넌트 재렌더링 방지
   - useMemo, useCallback 훅 활용
   - 불필요한 상태 업데이트 최소화

4. **이미지 최적화**:
   - WebP 포맷 사용
   - 반응형 이미지 (`srcset`, `sizes`)
   - 이미지 CDN 활용
   - 썸네일 생성

### 7.3 네트워크 최적화

1. **API 요청 최소화**:
   - 배치 요청 (GraphQL)
   - 캐싱 전략 (React Query, SWR)
   - 중복 요청 방지

2. **웹소켓 최적화**:
   - 연결 풀 관리
   - 델타 동기화 (변경 부분만 전송)
   - 재연결 로직 (exponential backoff)

3. **오프라인 지원**:
   - PWA (Service Worker)
   - 로컬 스토리지 활용
   - 오프라인 큐 (동기화 대기)

4. **CDN**:
   - 정적 리소스 CDN 배포
   - 이미지, 폰트, JS/CSS

### 7.4 실시간 협업 최적화

1. **WebSocket 연결**:
   - 연결 풀 관리
   - 재연결 로직
   - Heartbeat (연결 유지)

2. **델타 동기화**:
   - 전체 문서가 아닌 변경 부분만 전송
   - Operational Transformation (OT)
   - Conflict-free Replicated Data Type (CRDT)

3. **낙관적 UI 업데이트**:
   - 즉시 UI 업데이트
   - 서버 응답 후 조정
   - 롤백 로직

4. **충돌 해결 큐**:
   - 충돌 감지 및 큐잉
   - 순차 처리
   - 우선순위 관리

### 7.5 AI 처리 최적화

1. **스트리밍 응답**:
   - Server-Sent Events (SSE)
   - 점진적 표시
   - 사용자 피드백 즉시 제공

2. **백그라운드 처리**:
   - Web Worker 활용
   - 메인 스레드 차단 방지

3. **캐싱**:
   - 이전 요청 결과 캐싱
   - 유사한 요청 재활용

4. **타임아웃**:
   - AI 요청 타임아웃 설정 (30초)
   - 실패 시 재시도 또는 수동 모드

### 7.6 성능 목표

| 메트릭 | 목표 | 측정 도구 |
|--------|------|-----------|
| FCP (First Contentful Paint) | < 1.5s | Lighthouse |
| LCP (Largest Contentful Paint) | < 2.5s | Lighthouse |
| TTI (Time to Interactive) | < 3.5s | Lighthouse |
| CLS (Cumulative Layout Shift) | < 0.1 | Lighthouse |
| FID (First Input Delay) | < 100ms | Lighthouse |

### 7.7 모니터링 및 측정

- **Google Lighthouse**: 성능 점수 측정
- **Web Vitals**: 핵심 지표 모니터링
- **Real User Monitoring (RUM)**: 실제 사용자 데이터 수집
- **Performance API**: 브라우저 성능 데이터

---

## 8. 변경 이력

| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|-----------|
| 1.0 | 2025-10-20 | 이미준 | 초안 작성 |

---

## 부록

### A. 용어 정의

- **Mobile First**: 모바일 환경을 우선으로 설계하고, 점진적으로 데스크톱 환경을 확장하는 설계 철학
- **PWA (Progressive Web App)**: 웹과 네이티브 앱의 장점을 결합한 웹 애플리케이션
- **WebSocket**: 실시간 양방향 통신을 위한 프로토콜
- **RAG (Retrieval-Augmented Generation)**: 검색 기반 생성 AI 기술
- **WCAG**: 웹 콘텐츠 접근성 가이드라인
- **ARIA**: Accessible Rich Internet Applications, 접근성 향상을 위한 HTML 속성

### B. 참고 자료

- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [Web Vitals](https://web.dev/vitals/)
- [Mobile First Design](https://www.uxpin.com/studio/blog/mobile-first-design/)
- [React Performance Optimization](https://react.dev/learn/render-and-commit)

---

**문서 끝**