# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서
버전: 1.0
작성일: 2025-10-15
작성자: 유진 (Frontend Developer)
---
## 목차
1. [프로토타입 화면 목록](#1-프로토타입-화면-목록)
2. [화면 간 사용자 플로우](#2-화면-간-사용자-플로우)
3. [화면별 상세 설계](#3-화면별-상세-설계)
4. [화면간 전환 및 네비게이션](#4-화면간-전환-및-네비게이션)
5. [반응형 설계 전략](#5-반응형-설계-전략)
6. [접근성 보장 방안](#6-접근성-보장-방안)
7. [성능 최적화 방안](#7-성능-최적화-방안)
8. [변경 이력](#8-변경-이력)
---
## 1. 프로토타입 화면 목록
### 1.1 회의 전 (Pre-Meeting)
| 화면명 | 서비스 | 목적 | 관련 유저스토리 | 중요도 |
|--------|--------|------|-----------------|--------|
| 01-로그인 | User | 사용자 인증 및 시스템 접근 | UFR-USER-010 | 필수 |
| 02-대시보드 | Meeting | 전체 현황 파악 및 빠른 액션 | - | 필수 |
| 03-회의예약 | Meeting | 회의 정보 입력 및 참석자 초대 | UFR-MEET-010 | 필수 |
| 04-템플릿선택 | Meeting | 회의 유형에 맞는 템플릿 선택 | UFR-MEET-020 | 필수 |
### 1.2 회의 중 (During-Meeting)
| 화면명 | 서비스 | 목적 | 관련 유저스토리 | 중요도 |
|--------|--------|------|-----------------|--------|
| 05-회의진행 | Meeting + STT + AI + Collaboration + RAG | 실시간 회의록 작성 및 협업 | UFR-MEET-030, UFR-STT-010, UFR-STT-020, UFR-AI-010, UFR-COLLAB-010, UFR-RAG-010, UFR-RAG-020 | 핵심 |
| 06-검증완료 | Collaboration | 참석자별 회의록 섹션 검증 | UFR-COLLAB-030 | 필수 |
### 1.3 회의 후 (Post-Meeting)
| 화면명 | 서비스 | 목적 | 관련 유저스토리 | 중요도 |
|--------|--------|------|-----------------|--------|
| 07-회의종료 | Meeting + AI | 회의 통계 및 최종 확정 | UFR-MEET-040, UFR-MEET-050, UFR-AI-020 | 필수 |
| 08-회의록공유 | Meeting + Notification | 회의록 공유 및 배포 | UFR-MEET-060, UFR-NOTI-010 | 필수 |
| 09-Todo관리 | Todo + Calendar | Todo 할당 및 진행 상황 추적 | UFR-TODO-010, UFR-TODO-020, UFR-TODO-030, UFR-CAL-010 | 필수 |
---
## 2. 화면 간 사용자 플로우
### 2.1 메인 플로우 다이어그램
```
[회의 전]
01-로그인 → 02-대시보드 → 03-회의예약 → 04-템플릿선택
[회의 중]
02-대시보드 → 05-회의진행 (실시간 작성/동기화/용어 설명) → 06-검증완료
[회의 후]
06-검증완료 → 07-회의종료 (통계 확인) → 08-회의록공유 → 09-Todo관리
```
### 2.2 주요 사용자 시나리오
#### 시나리오 1: 신규 회의 진행 (Full Flow)
```
01-로그인
↓ (인증 성공)
02-대시보드
↓ (새 회의 예약 버튼 클릭)
03-회의예약
↓ (회의 정보 입력 완료)
04-템플릿선택
↓ (템플릿 선택 완료, 회의 시작 시간 도래)
05-회의진행
↓ (AI 자동 작성, 참석자 실시간 편집)
06-검증완료
↓ (모든 섹션 검증 완료)
07-회의종료
↓ (최종 확정 버튼 클릭)
08-회의록공유
↓ (공유 대상 설정 및 배포)
09-Todo관리
↓ (Todo 확인 및 상태 업데이트)
02-대시보드 (완료)
```
#### 시나리오 2: 과거 회의록 조회 및 수정
```
02-대시보드
↓ (최근 회의록 카드 클릭)
05-회의진행 (읽기/편집 모드)
↓ (수정 사항 저장)
02-대시보드 (돌아가기)
```
#### 시나리오 3: Todo 관리
```
02-대시보드
↓ (대기 중인 Todo 위젯 클릭)
09-Todo관리
↓ (진행률 업데이트, 완료 처리)
02-대시보드 (돌아가기)
```
#### 시나리오 4: 알림을 통한 회의록 접근
```
알림 수신 (이메일/슬랙/인앱)
↓ (회의록 링크 클릭)
01-로그인 (미로그인 시)
↓
05-회의진행 (검토 모드)
↓ (댓글 작성, 수정 제안)
06-검증완료 (검증 버튼 클릭)
```
### 2.3 서브 플로우
- **빠른 회의 시작**: 02-대시보드 → 05-회의진행 (예약 없이 즉시 시작)
- **템플릿 재선택**: 05-회의진행 → 04-템플릿선택 → 05-회의진행
- **Todo 즉시 생성**: 05-회의진행 → 09-Todo관리 (수동 Todo 추가)
- **알림 설정**: 02-대시보드 → 설정 → 알림 설정
---
## 3. 화면별 상세 설계
### 3.1 01-로그인 화면
#### 개요
- **목적**: 사용자 인증 및 시스템 접근 권한 부여
- **관련 유저스토리**: UFR-USER-010
- **비즈니스 중요도**: 필수 (보안 및 권한 관리)
#### 주요 기능
1. 이메일/비밀번호 로그인
2. JWT 토큰 기반 인증
3. 소셜 로그인 (Google, Microsoft)
4. 비밀번호 찾기
5. Remember Me (자동 로그인)
#### UI 구성요소
**레이아웃**
- 중앙 정렬 카드 형식 (최대 너비 400px)
- 좌측/상단: 서비스 로고 및 캐치프레이즈
- 배경: 그라디언트 또는 일러스트레이션
**컴포넌트**
- 로고 및 서비스명
- 이메일 입력 필드 (type="email", required)
- 비밀번호 입력 필드 (type="password", required, 토글 표시/숨김 아이콘)
- 로그인 버튼 (Primary CTA)
- 소셜 로그인 버튼 (Google, Microsoft 아이콘 버튼)
- Remember Me 체크박스
- 비밀번호 찾기 링크
- 회원가입 링크 (시스템 관리자만 가능한 경우 숨김)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 이메일 입력 | 실시간 이메일 형식 검증 (유효하지 않으면 에러 메시지) |
| 비밀번호 입력 | 입력 시 마스킹, 토글 아이콘으로 표시/숨김 가능 |
| 로그인 버튼 클릭 | 로딩 스피너 표시 → JWT 토큰 발급 → 02-대시보드로 이동 |
| 소셜 로그인 버튼 클릭 | OAuth 팝업 또는 리다이렉트 → 인증 성공 시 02-대시보드로 이동 |
| 인증 실패 | 에러 메시지 표시 ("이메일 또는 비밀번호가 일치하지 않습니다") |
| 비밀번호 찾기 클릭 | 비밀번호 재설정 이메일 발송 화면으로 이동 |
#### 데이터 요구사항
**입력**
- 이메일 주소 (필수, 최대 100자)
- 비밀번호 (필수, 최소 8자)
**출력**
- JWT 액세스 토큰
- JWT 리프레시 토큰
- 사용자 정보 (ID, 이름, 이메일, 권한)
#### 에러 처리
- 네트워크 오류: "서버에 연결할 수 없습니다. 잠시 후 다시 시도해주세요."
- 인증 실패: "이메일 또는 비밀번호가 일치하지 않습니다."
- 계정 잠김: "계정이 잠겼습니다. 관리자에게 문의하세요."
---
### 3.2 02-대시보드 화면
#### 개요
- **목적**: 전체 현황 파악 및 빠른 액션 제공
- **관련 유저스토리**: 전체 서비스의 진입점
- **비즈니스 중요도**: 필수 (사용자 경험의 출발점)
#### 주요 기능
1. 예정된 회의 목록 표시
2. 최근 회의록 목록 표시
3. 대기 중인 Todo 목록 표시
4. 통계 위젯 (이번 주 회의 수, 완료된 Todo 수)
5. 빠른 액션 버튼 (새 회의 예약, 회의 시작)
6. 검색 및 필터 기능
#### UI 구성요소
**레이아웃**
- 전역 헤더 (로고, 검색, 알림, 프로필)
- 좌측 사이드바 (네비게이션 메뉴)
- 메인 영역: 그리드 레이아웃 (2x2 또는 3x2)
**위젯 구성**
1. **예정된 회의 위젯**
- 타이틀: "예정된 회의"
- 리스트: 회의 제목, 날짜/시간, 참석자 수 (최대 5개)
- 빠른 액션: "회의 시작" 버튼 (회의 시간 도래 시 활성화)
- 더보기: "모든 예정된 회의 보기"
2. **최근 회의록 위젯**
- 타이틀: "최근 회의록"
- 카드 그리드: 썸네일, 제목, 날짜, 참석자 아바타 (최대 6개)
- 상태 배지: "작성 중", "검증 중", "확정됨"
- 클릭 시: 05-회의진행 화면으로 이동
3. **대기 중인 Todo 위젯**
- 타이틀: "내가 할 일"
- 리스트: Todo 내용, 마감일, 우선순위 (최대 5개)
- 빠른 액션: 체크박스로 완료 처리
- 더보기: "모든 Todo 보기"
4. **통계 위젯**
- 이번 주 회의 수
- 완료된 Todo 비율
- 평균 회의 시간
- 차트: 주간 회의 트렌드
**빠른 액션 버튼 (FAB)**
- 우측 하단 고정 위치
- 주 버튼: "+" 아이콘 (클릭 시 확장)
- 확장 메뉴: "새 회의 예약", "즉시 회의 시작", "새 Todo 추가"
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 검색 바에 키워드 입력 | 실시간 자동완성 (회의록 제목, 참석자, 키워드) |
| 예정된 회의 "회의 시작" 클릭 | 05-회의진행 화면으로 이동 (회의 ID 전달) |
| 최근 회의록 카드 클릭 | 05-회의진행 화면으로 이동 (읽기/편집 모드) |
| Todo 체크박스 클릭 | 즉시 완료 처리 (확인 토스트 메시지) |
| 빠른 액션 "새 회의 예약" 클릭 | 03-회의예약 화면으로 이동 |
| 빠른 액션 "즉시 회의 시작" 클릭 | 04-템플릿선택 화면으로 이동 |
| 알림 아이콘 클릭 | 알림 드롭다운 표시 (최근 알림 5개) |
| 프로필 아이콘 클릭 | 프로필 메뉴 표시 (설정, 로그아웃) |
#### 데이터 표시 요구사항
**예정된 회의**
- 회의 제목, 날짜/시간, 장소, 참석자 수
- 회의 시작 시간까지 남은 시간 표시 (예: "30분 후")
**최근 회의록**
- 회의 제목, 작성일, 참석자 아바타 (최대 3명, 초과 시 "+N")
- 상태 배지 (색상: 작성 중=노란색, 검증 중=파란색, 확정됨=초록색)
**대기 중인 Todo**
- Todo 내용 (최대 50자, 초과 시 "...")
- 마감일 (예: "D-3", "오늘", "지남" - 색상 구분)
- 우선순위 아이콘 (높음=빨간색 느낌표, 보통=회색, 낮음=숨김)
---
### 3.3 03-회의예약 화면
#### 개요
- **목적**: 회의 정보 입력 및 참석자 초대
- **관련 유저스토리**: UFR-MEET-010
- **비즈니스 중요도**: 필수 (회의 프로세스의 시작)
#### 주요 기능
1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소)
2. 참석자 초대 (이메일 자동완성)
3. 회의 설명 입력 (선택)
4. 알림 설정 (30분 전, 1시간 전)
5. 외부 캘린더 연동 (Google Calendar, Outlook)
6. 반복 회의 설정 (선택)
#### UI 구성요소
**레이아웃**
- 중앙 정렬 폼 (최대 너비 800px)
- 좌측: 입력 폼
- 우측: 미리보기 카드 (입력 내용 실시간 반영)
**폼 컴포넌트**
1. **회의 제목**
- 텍스트 입력 (최대 100자, 필수)
- 플레이스홀더: "예: 2025년 1분기 전략 회의"
2. **날짜 및 시간**
- 날짜 피커 (캘린더 UI)
- 시작 시간/종료 시간 (드롭다운, 15분 단위)
- 종료 시간 자동 계산 (시작 시간 + 1시간)
3. **장소**
- 텍스트 입력 (최대 200자, 선택)
- 또는 "온라인 회의" 체크박스 (Zoom, Teams 링크 입력)
4. **참석자**
- 이메일 입력 필드 (자동완성)
- 태그 형태로 추가된 참석자 표시
- 삭제 아이콘 (X)
- 최소 1명 필수
5. **회의 설명**
- 텍스트 에리어 (최대 1000자, 선택)
- 플레이스홀더: "회의 목적 및 안건을 입력하세요"
6. **알림 설정**
- 체크박스: "회의 30분 전 알림", "회의 1시간 전 알림"
7. **반복 설정**
- 드롭다운: "반복 안 함", "매일", "매주", "매월"
- 반복 종료 날짜 선택 (반복 설정 시 표시)
8. **캘린더 연동**
- 체크박스: "Google Calendar에 추가", "Outlook에 추가"
**액션 버튼**
- 취소 (Secondary)
- 저장 후 나중에 계속 (Secondary)
- 다음: 템플릿 선택 (Primary CTA)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 회의 제목 입력 | 우측 미리보기 카드에 실시간 반영 |
| 날짜/시간 선택 | 종료 시간 자동 계산 (시작 + 1시간) |
| 참석자 이메일 입력 | 조직 내 사용자 자동완성 제안 |
| 참석자 선택 | 태그로 추가, 아바타 및 이름 표시 |
| 온라인 회의 체크 | 장소 입력 비활성화, 링크 입력 필드 표시 |
| 반복 설정 선택 | 반복 종료 날짜 선택 필드 표시 |
| 다음 버튼 클릭 | 필수 항목 검증 → 04-템플릿선택 화면으로 이동 |
| 필수 항목 미입력 시 | 해당 필드에 에러 메시지 및 포커스 이동 |
| 저장 버튼 클릭 | 회의 정보 저장 → 02-대시보드로 이동 (토스트 메시지) |
#### 데이터 요구사항
**입력**
- 회의 제목 (필수, 최대 100자)
- 날짜 (필수, YYYY-MM-DD)
- 시작 시간 (필수, HH:MM)
- 종료 시간 (필수, HH:MM)
- 장소 (선택, 최대 200자)
- 참석자 이메일 (필수, 최소 1명, 배열)
- 회의 설명 (선택, 최대 1000자)
- 알림 설정 (불리언 배열)
- 반복 설정 (선택, 열거형)
- 캘린더 연동 (불리언 배열)
**출력**
- 회의 ID (생성된 UUID)
- 초대 이메일 발송 상태
#### 에러 처리
- 과거 날짜 선택: "과거 날짜는 선택할 수 없습니다."
- 종료 시간 < 시작 시간: "종료 시간은 시작 시간보다 늦어야 합니다."
- 잘못된 이메일 형식: "올바른 이메일 주소를 입력하세요."
- 참석자 미입력: "최소 1명의 참석자를 추가하세요."
---
### 3.4 04-템플릿선택 화면
#### 개요
- **목적**: 회의 유형에 맞는 템플릿 선택 및 커스터마이징
- **관련 유저스토리**: UFR-MEET-020
- **비즈니스 중요도**: 필수 (회의록 구조 표준화)
#### 주요 기능
1. 회의 유형별 템플릿 표시 (일반, 스크럼, 킥오프, 주간)
2. 템플릿 미리보기
3. 템플릿 커스터마이징 (섹션 추가/삭제/순서 변경)
4. 커스텀 템플릿 저장 (나만의 템플릿)
5. 커뮤니티 템플릿 다운로드 (옵션)
#### UI 구성요소
**레이아웃**
- 상단: 진행 표시 바 (회의 예약 → **템플릿 선택** → 회의 진행)
- 좌측: 템플릿 카테고리 필터
- 중앙: 템플릿 그리드 (카드 레이아웃)
- 우측: 선택된 템플릿 미리보기 및 커스터마이징 패널
**템플릿 카드**
- 템플릿 이름
- 간단한 설명
- 사용 횟수 또는 인기도 표시
- "선택" 버튼
- "미리보기" 버튼
**기본 제공 템플릿**
1. **일반 회의**
- 참석자, 회의 목적, 안건, 논의 내용, 결정 사항, Todo
2. **스크럼 회의**
- 참석자, 어제 한 일, 오늘 할 일, 이슈/블로커
3. **프로젝트 킥오프**
- 참석자, 프로젝트 개요, 목표, 일정, 역할 분담, 리스크
4. **주간 회의**
- 참석자, 주간 실적, 주요 이슈, 다음 주 계획, 지원 필요 사항
**커스터마이징 패널**
- 섹션 리스트 (드래그 앤 드롭으로 순서 변경)
- 각 섹션:
- 섹션명 편집
- 삭제 아이콘
- 드래그 핸들
- "섹션 추가" 버튼
- "템플릿 저장" 버튼 (나만의 템플릿으로 저장)
**액션 버튼**
- 뒤로 (03-회의예약으로 이동)
- 템플릿 없이 시작 (빈 회의록)
- 선택 완료 (Primary CTA)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 템플릿 카드 클릭 | 우측 미리보기 패널에 템플릿 구조 표시 |
| 미리보기 버튼 클릭 | 모달로 전체 템플릿 내용 표시 |
| 섹션 드래그 앤 드롭 | 순서 변경 (시각적 피드백) |
| 섹션 삭제 아이콘 클릭 | 확인 다이얼로그 → 섹션 삭제 |
| 섹션 추가 버튼 클릭 | 섹션명 입력 다이얼로그 → 리스트 하단에 추가 |
| 템플릿 저장 버튼 클릭 | 템플릿명 입력 다이얼로그 → "나만의 템플릿"에 저장 |
| 선택 완료 버튼 클릭 | 템플릿 정보 저장 → 05-회의진행 화면으로 이동 |
| 템플릿 없이 시작 클릭 | 빈 회의록으로 05-회의진행 화면으로 이동 |
#### 데이터 요구사항
**템플릿 데이터 구조**
```json
{
"id": "template_uuid",
"name": "일반 회의",
"description": "기본 회의 구조",
"sections": [
{
"id": "section_uuid",
"name": "참석자",
"order": 1,
"required": true
},
{
"id": "section_uuid",
"name": "논의 내용",
"order": 2,
"required": false
}
],
"usage_count": 123,
"created_by": "system" // or user_id
}
```
**출력**
- 선택된 템플릿 ID
- 커스터마이징된 섹션 리스트
---
### 3.5 05-회의진행 화면 (핵심)
#### 개요
- **목적**: 실시간 회의록 작성 및 협업의 중심 화면
- **관련 유저스토리**: UFR-MEET-030, UFR-STT-010, UFR-STT-020, UFR-AI-010, UFR-COLLAB-010, UFR-RAG-010, UFR-RAG-020
- **비즈니스 중요도**: 핵심 (서비스의 가장 중요한 화면)
#### 주요 기능
1. 실시간 음성 인식 및 텍스트 변환
2. AI 회의록 자동 작성 및 실시간 업데이트
3. 실시간 협업 편집 (Google Docs 스타일)
4. 전문용어 자동 감지 및 설명 제공
5. 리치 텍스트 편집 (서식, 목록, 링크 등)
6. 버전 관리 및 변경 이력 추적
7. 댓글 및 제안 기능
8. 섹션별 검증 완료 표시
#### UI 구성요소
**레이아웃 (3단 구조)**
**좌측 패널 (250px)**
- **회의 정보**
- 회의 제목
- 날짜/시간
- 경과 시간 (실시간 타이머)
- 녹음 상태 (녹음 중/일시정지/중지)
- **참석자 목록**
- 아바타 및 이름
- 온라인 상태 (활성/비활성)
- 현재 편집 중인 위치 표시 (색상 코딩)
- 발언 횟수 표시 (옵션)
- **타임라인**
- 시간별 주요 이벤트 표시
- 클릭 시 해당 위치로 스크롤
**중앙 패널 (가변, 최소 600px)**
- **툴바**
- 서식: 볼드, 이탤릭, 밑줄, 취소선
- 목록: 번호 매기기, 글머리 기호
- 삽입: 링크, 이미지, 표
- 기타: 실행 취소, 다시 실행
- **리치 텍스트 에디터**
- 템플릿 섹션 구조 표시
- 실시간 커서 및 선택 영역 표시 (다른 사용자)
- 전문용어 하이라이트 (파란색 점선 밑줄)
- AI 자동 작성 내용 표시 (연한 회색 배경)
- 변경 사항 하이라이트 (3초간 노란색 배경)
- **섹션 헤더**
- 섹션명 (템플릿에서 정의)
- 검증 완료 체크박스
- 접기/펼치기 아이콘
**우측 패널 (350px, 토글 가능)**
- **탭 전환**
- AI 제안
- 용어 설명
- 댓글
- 버전 이력
- **AI 제안 탭**
- AI가 자동 생성한 회의록 초안
- "적용" 버튼 (클릭 시 에디터에 삽입)
- "무시" 버튼
- 실시간 업데이트 (3-5초 간격)
- **용어 설명 탭**
- 감지된 전문용어 리스트
- 각 용어 클릭 시 설명 표시
- 설명 출처 (과거 회의록, 사내 문서)
- 피드백 버튼 (도움됨/도움안됨)
- **댓글 탭**
- 댓글 리스트 (시간순)
- 댓글 작성 입력 필드
- 멘션 기능 (@참석자명)
- **버전 이력 탭**
- 버전 리스트 (시간, 작성자)
- 비교 보기
- 특정 버전으로 복원
**하단 바 (고정)**
- 좌측: 저장 상태 ("저장됨", "저장 중...", "오류")
- 중앙: 음성 인식 상태 ("음성 인식 중...", "일시정지")
- 우측: 액션 버튼
- 녹음 시작/일시정지/중지
- 회의 종료 (Primary CTA)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 회의 시작 버튼 클릭 | 녹음 시작 → 음성 인식 활성화 → 타이머 시작 |
| 텍스트 입력 | 실시간 저장 (Debounce 500ms) → WebSocket으로 다른 사용자에게 델타 전송 |
| 전문용어 하이라이트 호버 | 툴팁으로 간단한 설명 표시 |
| 전문용어 클릭 | 우측 패널 "용어 설명" 탭으로 전환 및 상세 설명 표시 |
| AI 제안 "적용" 클릭 | AI 제안 내용을 현재 커서 위치에 삽입 (Undo 가능) |
| 섹션 검증 완료 체크 | 섹션 배경 연한 초록색으로 변경 → 다른 사용자에게 동기화 |
| 댓글 작성 | 댓글 저장 → 관련 참석자에게 알림 발송 |
| 음성 인식 일시정지 | 녹음 중지 → 음성 인식 중지 |
| 회의 종료 버튼 클릭 | 확인 다이얼로그 → 07-회의종료 화면으로 이동 |
| 다른 사용자 편집 | 해당 사용자의 커서 및 선택 영역 표시 (색상으로 구분) → 변경 영역 하이라이트 (3초) |
| 충돌 감지 (동시 수정) | 충돌 알림 다이얼로그 → Last Write Wins 또는 수동 병합 선택 |
#### 데이터 표시 및 입력 요구사항
**실시간 동기화 데이터**
```json
{
"type": "edit",
"user_id": "user_uuid",
"user_name": "홍길동",
"user_avatar": "url",
"timestamp": "2025-10-15T14:32:15Z",
"delta": {
"ops": [
{"retain": 10},
{"insert": "새로운 내용"}
]
}
}
```
**음성 인식 데이터**
```json
{
"speaker": "홍길동",
"text": "다음 주까지 보고서를 작성하겠습니다.",
"timestamp": "2025-10-15T14:32:15Z",
"confidence": 0.95
}
```
**전문용어 데이터**
```json
{
"term": "ROI",
"definition": "투자 대비 수익률",
"detailed_explanation": "투자한 비용 대비 얼마나 많은 수익을 얻었는지...",
"source": "과거 회의록: 2025년 1분기 전략 회의",
"confidence": 0.88
}
```
#### 성능 요구사항
- 음성 인식 지연 시간: 1초 이내
- 동기화 지연 시간: 500ms 이내
- AI 제안 업데이트 주기: 3-5초
- 에디터 입력 반응 시간: 16ms (60fps)
#### 에러 처리
- 음성 인식 오류: "음성 인식 중 오류가 발생했습니다. 다시 시도해주세요."
- 동기화 실패: "일시적으로 동기화가 중단되었습니다. 재연결 중..."
- 충돌 감지: "다른 사용자가 동일한 위치를 수정했습니다. 어떻게 하시겠습니까?"
---
### 3.6 06-검증완료 화면
#### 개요
- **목적**: 참석자별 회의록 섹션 검증 및 완료 표시
- **관련 유저스토리**: UFR-COLLAB-030
- **비즈니스 중요도**: 필수 (회의록 품질 보장)
#### 주요 기능
1. 섹션별 검증 상태 표시
2. 참석자별 검증 진행률 표시
3. 검증 완료 표시 및 섹션 잠금
4. 미검증 섹션 하이라이트
5. 검증자 정보 표시
#### UI 구성요소
**레이아웃**
- 05-회의진행 화면 내부 모달 또는 사이드 패널
**컴포넌트**
1. **검증 진행 상황**
- 전체 진행률 바 (예: "3/5 섹션 검증 완료")
- 참석자별 검증 진행률
2. **섹션별 검증 리스트**
- 섹션명
- 검증 상태: 미검증 / 검증 중 / 검증 완료
- 검증자 아바타 (검증 완료 시)
- 검증 시간
- 잠금 상태 아이콘 (잠김 시)
3. **액션 버튼**
- 섹션별 "검증 완료" 버튼
- 섹션 잠금 토글 (검증 완료 시 활성화)
- 모든 섹션 검증 완료 후: "회의 종료" 버튼 (Primary CTA)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 섹션 "검증 완료" 클릭 | 검증 상태 업데이트 → 검증자 아바타 표시 → 다른 사용자에게 동기화 |
| 섹션 잠금 토글 클릭 | 해당 섹션 편집 불가 → 배경색 변경 (연한 회색) → 잠금 아이콘 표시 |
| 잠긴 섹션 편집 시도 | 에러 메시지: "검증 완료된 섹션은 편집할 수 없습니다. 잠금을 해제하세요." |
| 모든 섹션 검증 완료 | "회의 종료" 버튼 활성화 → 토스트 메시지: "모든 섹션이 검증되었습니다." |
| 회의 종료 버튼 클릭 | 07-회의종료 화면으로 이동 |
#### 데이터 요구사항
**검증 상태 데이터**
```json
{
"section_id": "section_uuid",
"status": "completed", // pending, in_progress, completed
"verified_by": "user_uuid",
"verified_at": "2025-10-15T14:50:00Z",
"locked": true
}
```
---
### 3.7 07-회의종료 화면
#### 개요
- **목적**: 회의 통계 확인 및 최종 회의록 확정
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-020
- **비즈니스 중요도**: 필수 (회의록 완성)
#### 주요 기능
1. 회의 통계 표시 (시간, 참석자 수, 발언 횟수, 키워드)
2. 필수 항목 자동 검사
3. AI Todo 추출 결과 미리보기
4. 최종 회의록 확정 및 버전 생성
5. 다음 회의 일정 자동 감지 및 캘린더 등록
#### UI 구성요소
**레이아웃**
- 중앙 정렬 대시보드 (최대 너비 1200px)
**섹션 구성**
1. **회의 통계 대시보드**
- **회의 총 시간**: 1시간 30분
- **참석자 수**: 5명
- **발언 횟수 (화자별)**:
- 홍길동: 25회
- 김철수: 18회
- ...
- **주요 키워드**: 워드 클라우드 또는 태그 클라우드
- **참여도 차트**: 발언 시간 비율 (파이 차트)
2. **필수 항목 검사 결과**
- 체크리스트 (자동 검사)
- ✅ 회의 제목 작성됨
- ✅ 참석자 목록 작성됨
- ✅ 주요 논의 내용 작성됨
- ❌ 결정 사항 미작성 (경고 아이콘)
- 누락된 항목 클릭 시: 해당 섹션으로 이동 (05-회의진행 화면)
3. **AI Todo 추출 미리보기**
- Todo 리스트 (최대 10개)
- 각 Todo:
- 내용
- 담당자 (AI 자동 식별)
- 마감일 (언급된 경우)
- 수정 버튼 (Todo 수동 편집 모달)
4. **다음 회의 일정 감지**
- AI가 감지한 다음 회의 일정 표시
- 예: "다음 회의: 2025년 10월 22일 14:00"
- "캘린더에 추가" 버튼
**액션 버튼**
- 뒤로 (05-회의진행 화면으로 이동)
- 나중에 확정 (저장 후 02-대시보드로 이동)
- 최종 확정 (Primary CTA)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 화면 로드 | 회의 통계 자동 생성 → 필수 항목 자동 검사 → AI Todo 자동 추출 |
| 누락된 필수 항목 클릭 | 05-회의진행 화면으로 이동 (해당 섹션 포커스) |
| Todo 수정 버튼 클릭 | Todo 편집 모달 표시 (내용, 담당자, 마감일 수정 가능) |
| "캘린더에 추가" 클릭 | 다음 회의 일정을 캘린더에 자동 등록 (UFR-CAL-010) |
| 최종 확정 버튼 클릭 | 필수 항목 재검사 → 확정 버전 생성 → 08-회의록공유 화면으로 이동 |
| 필수 항목 미작성 시 | 에러 다이얼로그: "필수 항목이 누락되었습니다. [섹션명]을 작성해주세요." |
#### 데이터 요구사항
**회의 통계 데이터**
```json
{
"meeting_id": "meeting_uuid",
"duration": 5400, // 초 (1.5시간)
"participants": 5,
"speaker_stats": [
{"name": "홍길동", "count": 25, "duration": 1200},
{"name": "김철수", "count": 18, "duration": 900}
],
"keywords": ["ROI", "마케팅", "예산", "분기 목표"]
}
```
**Todo 추출 데이터**
```json
[
{
"content": "마케팅 예산안 작성",
"assignee": "홍길동",
"due_date": "2025-10-20",
"priority": "high",
"related_section": "결정 사항"
}
]
```
---
### 3.8 08-회의록공유 화면
#### 개요
- **목적**: 회의록 공유 설정 및 참석자 배포
- **관련 유저스토리**: UFR-MEET-060, UFR-NOTI-010
- **비즈니스 중요도**: 필수 (회의록 전달)
#### 주요 기능
1. 공유 대상 선택 (참석자 전체/특정 참석자)
2. 공유 권한 설정 (읽기 전용/댓글 가능/편집 가능)
3. 공유 방식 선택 (이메일/슬랙/링크 복사)
4. 공유 링크 생성 및 보안 설정
5. 공유 이력 표시
#### UI 구성요소
**레이아웃**
- 중앙 정렬 폼 (최대 너비 800px)
**컴포넌트**
1. **공유 대상 선택**
- 라디오 버튼:
- 참석자 전체 (기본 선택)
- 특정 참석자 선택 (멀티 셀렉트 드롭다운)
- 외부 공유: 이메일 입력 (선택)
2. **공유 권한 설정**
- 드롭다운:
- 읽기 전용 (기본)
- 댓글 가능
- 편집 가능
3. **공유 방식 선택**
- 체크박스:
- 이메일 (기본 선택)
- 슬랙 (연동된 경우 표시)
- 링크 복사
4. **공유 링크 설정**
- 링크 URL 표시 (읽기 전용)
- "링크 복사" 버튼
- 고급 설정 (접기/펼치기):
- 링크 유효 기간 (무제한/7일/30일/커스텀)
- 비밀번호 설정 (선택)
5. **공유 이력**
- 리스트:
- 공유 시간
- 공유 방식 (이메일/슬랙/링크)
- 수신자
- 상태 (발송 완료/읽음/미읽음)
**액션 버튼**
- 취소 (02-대시보드로 이동)
- 공유 (Primary CTA)
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| 특정 참석자 선택 | 멀티 셀렉트 드롭다운 표시 (참석자 목록) |
| 외부 이메일 입력 | 이메일 형식 검증 |
| 링크 복사 버튼 클릭 | 클립보드에 복사 → 토스트 메시지: "링크가 복사되었습니다." |
| 공유 버튼 클릭 | 공유 대상 검증 → 알림 발송 → 09-Todo관리 화면으로 이동 (또는 02-대시보드) |
| 이메일 발송 완료 | 토스트 메시지: "5명에게 이메일이 발송되었습니다." |
| 슬랙 발송 완료 | 토스트 메시지: "슬랙으로 알림이 발송되었습니다." |
#### 데이터 요구사항
**공유 설정 데이터**
```json
{
"meeting_id": "meeting_uuid",
"recipients": ["user1@example.com", "user2@example.com"],
"permission": "read_only", // read_only, comment, edit
"methods": ["email", "slack"],
"link": {
"url": "https://meeting.example.com/share/abc123",
"expiration": "2025-11-15",
"password": "hashed_password"
}
}
```
**알림 데이터**
```json
{
"type": "meeting_shared",
"meeting_id": "meeting_uuid",
"meeting_title": "2025년 1분기 전략 회의",
"sender": "홍길동",
"link": "https://meeting.example.com/share/abc123",
"sent_at": "2025-10-15T15:00:00Z"
}
```
---
### 3.9 09-Todo관리 화면
#### 개요
- **목적**: Todo 할당, 진행 상황 추적 및 완료 처리
- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-020, UFR-TODO-030, UFR-CAL-010
- **비즈니스 중요도**: 필수 (회의 후속 조치 실행)
#### 주요 기능
1. Todo 리스트 표시 (칸반 보드 또는 리스트 뷰)
2. Todo 필터 및 정렬 (담당자, 마감일, 우선순위)
3. 진행률 업데이트 (0-100%)
4. 상태 변경 (시작 전/진행 중/완료)
5. Todo 완료 처리 및 회의록 자동 반영
6. 캘린더 연동 (마감일 자동 등록)
#### UI 구성요소
**레이아웃**
- 전체 화면 레이아웃
- 상단: 필터 및 정렬 툴바
- 메인: 칸반 보드 또는 리스트 뷰 (토글 가능)
**칸반 보드 뷰**
- 3개 컬럼:
- 시작 전
- 진행 중
- 완료
- Todo 카드:
- Todo 내용 (최대 2줄)
- 담당자 아바타
- 마감일 (D-3, 오늘, 지남 - 색상 구분)
- 우선순위 아이콘 (높음=빨간색, 보통=회색, 낮음=숨김)
- 진행률 바 (0-100%)
- 관련 회의록 링크 아이콘
- 드래그 앤 드롭으로 상태 변경 가능
**리스트 뷰**
- 테이블 형식:
- 체크박스 (다중 선택)
- 상태
- Todo 내용
- 담당자
- 마감일
- 우선순위
- 진행률
- 액션 (수정/삭제)
**필터 및 정렬 툴바**
- 필터:
- 담당자 (멀티 셀렉트)
- 상태 (전체/시작 전/진행 중/완료)
- 마감일 (오늘/이번 주/이번 달/전체)
- 우선순위 (높음/보통/낮음)
- 정렬:
- 마감일 순
- 우선순위 순
- 생성일 순
- 뷰 전환: 칸반 보드 / 리스트
**Todo 상세 모달**
- Todo 내용 (텍스트 에리어)
- 담당자 선택
- 마감일 선택 (날짜 피커)
- 우선순위 선택 (드롭다운)
- 진행률 슬라이더 (0-100%)
- 메모 (선택)
- 관련 회의록 링크
- 액션 버튼: 저장, 완료, 삭제
#### 인터랙션
| 사용자 액션 | 시스템 반응 |
|------------|------------|
| Todo 카드 드래그 앤 드롭 | 상태 자동 변경 → 회의록에 반영 → 담당자에게 알림 |
| 진행률 슬라이더 조정 | 실시간 저장 → 50%, 100% 도달 시 자동 알림 |
| 완료 체크박스 클릭 | 확인 다이얼로그 → 완료 상태로 변경 → 회의록에 완료 표시 → 주최자에게 알림 |
| 필터 선택 | 즉시 Todo 리스트 필터링 |
| 정렬 선택 | 즉시 Todo 리스트 재정렬 |
| Todo 카드 클릭 | Todo 상세 모달 표시 |
| 관련 회의록 링크 클릭 | 05-회의진행 화면으로 이동 (해당 섹션 포커스) |
| 마감일 도래 (3일 전) | 자동 리마인더 알림 발송 (이메일/슬랙/인앱) |
| 마감일 경과 (미완료 시) | 긴급 알림 발송 → Todo 카드 빨간색 테두리 |
#### 데이터 요구사항
**Todo 데이터**
```json
{
"id": "todo_uuid",
"content": "마케팅 예산안 작성",
"meeting_id": "meeting_uuid",
"meeting_title": "2025년 1분기 전략 회의",
"assignee": "user_uuid",
"due_date": "2025-10-20",
"priority": "high", // high, normal, low
"status": "in_progress", // pending, in_progress, completed
"progress": 50, // 0-100
"memo": "CFO 검토 필요",
"created_at": "2025-10-15T15:00:00Z",
"updated_at": "2025-10-16T10:30:00Z",
"completed_at": null
}
```
**캘린더 연동 데이터**
```json
{
"todo_id": "todo_uuid",
"calendar_type": "google", // google, outlook, apple
"event_id": "calendar_event_uuid",
"reminder": [
{"time": "3_days_before"},
{"time": "day_of"}
]
}
```
---
## 4. 화면간 전환 및 네비게이션
### 4.1 전역 네비게이션 구조
#### 헤더 (모든 화면 공통)
- **좌측**
- 서비스 로고 (클릭 시 02-대시보드로 이동)
- 햄버거 메뉴 (모바일에서 사이드바 토글)
- **중앙**
- 전역 검색 바
- 회의록 제목, 참석자, 키워드 검색
- 자동완성 제안
- 최근 검색어 표시
- **우측**
- 알림 아이콘 (Badge로 읽지 않은 알림 수 표시)
- 드롭다운: 최근 알림 5개
- "모두 보기" 링크
- 사용자 프로필 아이콘
- 드롭다운: 내 프로필, 설정, 로그아웃
#### 사이드바 (로그인 후 모든 화면, 01-로그인 제외)
- **메뉴 항목**
1. 대시보드 (아이콘: 홈)
2. 내 회의록 (아이콘: 문서)
3. 예정된 회의 (아이콘: 캘린더)
4. Todo 목록 (아이콘: 체크리스트, Badge로 대기 중인 Todo 수)
5. 템플릿 (아이콘: 레이아웃)
6. 설정 (아이콘: 톱니바퀴)
- **하단**
- 사이드바 접기/펼치기 버튼
- 도움말 아이콘 (툴팁 또는 가이드 투어)
#### 푸터 (옵션)
- 저작권 정보
- 이용약관, 개인정보처리방침 링크
### 4.2 화면 전환 패턴
#### 선형 플로우 (Linear Flow)
- 03-회의예약 → 04-템플릿선택 → 05-회의진행
- 진행 표시 바로 현재 단계 표시
- "뒤로" 버튼으로 이전 단계 이동 가능
#### 허브 앤 스포크 (Hub and Spoke)
- 02-대시보드가 중심 허브
- 모든 주요 화면으로 이동 가능
- 각 화면에서 02-대시보드로 돌아오기 가능
#### 모달 및 오버레이
- 빠른 액션 (Todo 추가, 댓글 작성) → 모달
- 상세 정보 (알림, 프로필) → 드롭다운
### 4.3 브레드크럼과 컨텍스트 유지
#### 브레드크럼
- 복잡한 계층 구조에서 사용
- 예: 대시보드 > 내 회의록 > [회의 제목]
- 각 단계 클릭 가능
#### 컨텍스트 유지 전략
- **Session Storage**: 임시 데이터 (폼 입력 중인 내용)
- **Local Storage**: 사용자 설정 (뷰 모드, 필터 설정)
- **URL 파라미터**: 공유 가능한 상태 (회의 ID, Todo 필터)
- **History API**: 뒤로/앞으로 버튼 지원
---
## 5. 반응형 설계 전략
### 5.1 브레이크포인트 정의
| 디바이스 | 브레이크포인트 | 레이아웃 | 주요 조정 |
|---------|--------------|---------|----------|
| Mobile | 320px ~ 767px | 단일 컬럼 | 햄버거 메뉴, 하단 탭 네비게이션, 스택 레이아웃 |
| Tablet | 768px ~ 1023px | 2단 레이아웃 | 사이드바 토글, 터치 최적화 |
| Desktop | 1024px ~ 1439px | 3단 레이아웃 | 전체 사이드바, 키보드 단축키 |
| Large Desktop | 1440px 이상 | 확장 레이아웃 | 더 넓은 중앙 패널, 4단 레이아웃 가능 |
### 5.2 디바이스별 UI 조정
#### Mobile (320px ~ 767px)
- **네비게이션**
- 햄버거 메뉴로 사이드바 숨김
- 하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
- **05-회의진행 화면**
- 탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
- 툴바를 하단 고정 (터치 용이성)
- **02-대시보드 화면**
- 위젯을 세로로 스택 (1단 레이아웃)
- 스와이프로 위젯 전환 (옵션)
- **09-Todo관리 화면**
- 칸반 보드 대신 리스트 뷰 권장
- 상태 변경은 드롭다운으로
#### Tablet (768px ~ 1023px)
- **네비게이션**
- 사이드바를 토글 가능 (기본 숨김)
- 상단 헤더에 메뉴 아이콘
- **05-회의진행 화면**
- 2단 레이아웃 (에디터 + AI 제안 패널)
- 참석자 목록은 드로어로 표시
- **02-대시보드 화면**
- 2단 그리드 레이아웃 (2x2 또는 2x3)
- **터치 최적화**
- 버튼 크기: 최소 44x44px
- 간격: 최소 8px
#### Desktop (1024px 이상)
- **네비게이션**
- 전체 사이드바 항상 표시
- 호버 효과 및 툴팁
- **05-회의진행 화면**
- 3단 레이아웃 (참석자 + 에디터 + AI 제안)
- 모든 패널 동시 표시
- **02-대시보드 화면**
- 3단 그리드 레이아웃 (3x2)
- 더 많은 위젯 표시 가능
- **키보드 단축키**
- Ctrl+N: 새 회의
- Ctrl+S: 저장
- Ctrl+F: 검색
- Ctrl+/: 단축키 가이드
### 5.3 반응형 이미지 및 아이콘
- **아이콘**: SVG 사용 (확대/축소 시 품질 유지)
- **아바타**: srcset으로 디바이스별 해상도 제공
- **로고**: 모바일에서는 심볼만, 데스크탑에서는 전체 로고
### 5.4 터치 및 제스처 지원
- **스와이프**: 화면 전환, 사이드바 열기/닫기
- **롱 프레스**: 컨텍스트 메뉴 표시
- **핀치 줌**: 이미지 확대/축소 (회의록 내 이미지)
---
## 6. 접근성 보장 방안
### 6.1 WCAG 2.1 Level AA 준수
#### 인식 가능성 (Perceivable)
1. **대체 텍스트 제공**
- 모든 이미지에 alt 속성
- 아이콘 버튼에 aria-label
- 로고에 적절한 대체 텍스트
2. **색상 대비**
- 텍스트와 배경 대비율 최소 4.5:1
- 큰 텍스트(18pt 이상)는 3:1
- 중요 정보는 색상만으로 구분하지 않음 (아이콘, 텍스트 함께 사용)
3. **다크모드 지원**
- 시스템 설정 자동 감지
- 수동 전환 가능
- 다크모드에서도 동일한 대비율 유지
#### 운용 가능성 (Operable)
1. **키보드 네비게이션**
- Tab 키로 모든 인터랙티브 요소 접근
- Shift+Tab으로 역순 이동
- Enter/Space로 버튼 활성화
- Esc로 모달/드롭다운 닫기
2. **포커스 표시**
- 포커스된 요소에 명확한 아웃라인 (최소 2px)
- 포커스 순서는 시각적 순서와 일치
3. **단축키**
- Ctrl+N: 새 회의 예약
- Ctrl+S: 회의록 저장
- Ctrl+F: 검색
- Ctrl+/: 단축키 가이드 표시
4. **Skip to Content 링크**
- 페이지 최상단에 "본문으로 건너뛰기" 링크
- 시각적으로 숨김, 포커스 시 표시
#### 이해 가능성 (Understandable)
1. **명확한 레이블**
- 모든 폼 필드에 label 요소 연결
- 플레이스홀더는 보조 정보로만 사용
2. **에러 메시지**
- 에러 위치 명확히 표시
- 해결 방법 제시
- 에러 필드에 포커스 자동 이동
3. **일관성**
- 동일한 기능은 동일한 아이콘/레이블 사용
- 네비게이션 구조 일관성 유지
#### 견고성 (Robust)
1. **ARIA 레이블 및 역할**
- 시맨틱 HTML 우선 사용
- 커스텀 컴포넌트에 적절한 role 속성
- aria-label, aria-describedby 활용
2. **실시간 업데이트 알림**
- aria-live="polite" 또는 "assertive"
- 회의록 실시간 편집 시 스크린 리더에 알림
- 알림 빈도 제어 (과도한 알림 방지)
### 6.2 스크린 리더 대응
#### 구조화된 마크업
- 적절한 heading 레벨 사용 (h1, h2, h3)
- 랜드마크 역할 (header, nav, main, aside, footer)
- 리스트는 ul/ol 사용
#### 동적 콘텐츠 알림
- 회의록 자동 작성: "AI가 회의록을 업데이트했습니다."
- 다른 사용자 편집: "[사용자명]이(가) 섹션을 수정했습니다."
- Todo 완료: "Todo가 완료되었습니다."
#### 폼 접근성
- label과 input 명확한 연결
- 필수 항목에 aria-required="true"
- 에러 발생 시 aria-invalid="true" 및 aria-describedby로 에러 메시지 연결
### 6.3 접근성 테스트 도구
- **자동 테스트**: axe-core, Lighthouse
- **수동 테스트**: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver)
- **색상 대비 검사**: WebAIM Contrast Checker
---
## 7. 성능 최적화 방안
### 7.1 초기 로딩 최적화
#### Code Splitting
- **라우트 레벨 분리**
```javascript
const Dashboard = lazy(() => import('./pages/Dashboard'));
const MeetingEditor = lazy(() => import('./pages/MeetingEditor'));
```
- **컴포넌트 레벨 분리**
- 모달, 드로어 등 조건부 렌더링 컴포넌트
- 큰 라이브러리 (차트, 에디터) 동적 로드
#### Critical CSS 인라인
- First Paint에 필요한 CSS만 에 인라인
- 나머지 CSS는 비동기 로드
#### Skeleton UI
- 로딩 중 레이아웃 미리 표시
- 콘텐츠 영역에 Skeleton 컴포넌트
- 사용자가 기다리는 느낌 최소화
#### Progressive Web App (PWA)
- Service Worker로 오프라인 지원
- 자주 사용하는 에셋 캐싱
- 모바일에서 앱처럼 설치 가능
### 7.2 이미지 및 에셋 최적화
#### 이미지 포맷
- **WebP 사용** (fallback: JPEG/PNG)
```html
```
#### Lazy Loading
- Intersection Observer API 활용
- 뷰포트에 진입할 때 이미지 로드
```html
```
#### 아이콘 최적화
- **SVG 스프라이트**: 여러 아이콘을 하나의 파일로
- **Icon Font**: 대안으로 사용 가능
- 인라인 SVG: 중요한 아이콘은 HTML에 직접 삽입
#### 이미지 CDN
- Cloudflare Images, AWS CloudFront 활용
- 자동 리사이징 및 포맷 변환
- 전 세계 엣지 서버에서 빠른 전송
### 7.3 코드 스플리팅 전략
#### 라우트 레벨
- 각 화면별로 청크 분리
- 초기 로드 시 01-로그인, 02-대시보드만 로드
- 다른 화면은 필요 시 동적 로드
#### 컴포넌트 레벨
- **모달/드로어**: 열릴 때 로드
```javascript
const TodoModal = lazy(() => import('./components/TodoModal'));
```
- **차트 라이브러리**: 통계 화면에서만 로드
- **리치 텍스트 에디터**: 회의진행 화면에서만 로드
#### 라이브러리 레벨
- **Lodash**: 필요한 함수만 import
```javascript
import debounce from 'lodash/debounce'; // ✅
// import _ from 'lodash'; // ❌
```
- **Moment.js 대신 Day.js**: 더 가벼운 라이브러리 선택
### 7.4 캐싱 전략
#### HTTP 캐싱
- **정적 에셋**: Cache-Control: max-age=31536000 (1년)
- **API 응답**: Cache-Control: max-age=300 (5분)
- **HTML**: Cache-Control: no-cache (항상 검증)
#### 메모리 캐싱 (Client-Side)
- **React Query** 또는 **SWR** 사용
- API 응답 자동 캐싱
- Stale-While-Revalidate 전략
- 중복 요청 제거
- **예시**:
```javascript
const { data, error } = useQuery('meetings', fetchMeetings, {
staleTime: 5 * 60 * 1000, // 5분
cacheTime: 10 * 60 * 1000, // 10분
});
```
#### Local Storage
- **사용자 설정**: 뷰 모드, 필터 설정
- **최근 검색어**: 자동완성 제안
- **임시 저장**: 작성 중인 회의록 (Auto-save)
#### Service Worker 캐싱
- **오프라인 페이지**: 네트워크 오류 시 표시
- **에셋 캐싱**: JS, CSS, 폰트, 아이콘
- **API 캐싱**: 읽기 전용 데이터 (회의록 목록 등)
### 7.5 실시간 성능 최적화
#### WebSocket 최적화
- **연결 풀링**: 하나의 WebSocket 연결 재사용
- **압축**: WebSocket 메시지 압축 (gzip)
- **Heartbeat**: 주기적 ping/pong으로 연결 유지
#### 변경 델타만 전송
- 전체 문서가 아닌 변경된 부분만 전송
- **Operational Transformation** 또는 **CRDT** 알고리즘
- 네트워크 대역폭 절약
#### Debouncing/Throttling
- **타이핑 이벤트**: Debounce 500ms
```javascript
const debouncedSave = debounce(saveContent, 500);
```
- **스크롤 이벤트**: Throttle 100ms
```javascript
const throttledScroll = throttle(onScroll, 100);
```
#### Virtual Scrolling
- 긴 리스트 (Todo, 회의록 목록) 렌더링 최적화
- 뷰포트에 보이는 항목만 DOM에 렌더링
- **라이브러리**: react-window, react-virtualized
### 7.6 성능 모니터링
#### Core Web Vitals 목표
- **LCP (Largest Contentful Paint)**: < 2.5초
- **FID (First Input Delay)**: < 100ms
- **CLS (Cumulative Layout Shift)**: < 0.1
#### 성능 측정 도구
- **Lighthouse**: 자동화된 성능 감사
- **WebPageTest**: 실제 네트워크 환경 테스트
- **Chrome DevTools**: Performance 탭, Network 탭
#### 실시간 모니터링
- **Sentry**: 에러 추적 및 성능 모니터링
- **Google Analytics**: 사용자 행동 분석
- **Custom Metrics**: 회의록 로드 시간, 동기화 지연 시간 측정
---
## 8. 변경 이력
| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|----------|
| 1.0 | 2025-10-15 | 유진 | 초안 작성 - 9개 화면 설계 완료 |
---
## 부록
### A. 디자인 시스템 참조
- **컬러 팔레트**: Primary, Secondary, Success, Warning, Error, Neutral
- **타이포그래피**: 폰트 패밀리, 크기, 행간, 자간
- **스페이싱**: 4px 기반 (4, 8, 12, 16, 24, 32, 48, 64px)
- **컴포넌트 라이브러리**: Material-UI, Ant Design, 또는 커스텀
### B. 기술 스택 권장사항
- **Frontend Framework**: React 18+ 또는 Vue 3+
- **State Management**: React Query + Zustand 또는 Pinia
- **UI Library**: Material-UI, Ant Design, Chakra UI
- **Rich Text Editor**: Quill, Slate, ProseMirror
- **Real-time**: Socket.io, WebSocket
- **Build Tool**: Vite (빠른 빌드) 또는 Webpack
### C. 프로토타입 도구
- **Figma**: 고해상도 프로토타입 및 디자인 시스템
- **Adobe XD**: 인터랙션 프로토타입
- **Storybook**: 컴포넌트 카탈로그 및 테스트
### D. 참고 자료
- **WCAG 2.1 가이드라인**: https://www.w3.org/WAI/WCAG21/quickref/
- **Material Design**: https://material.io/design
- **Web.dev Performance**: https://web.dev/performance/
---
**문서 끝**
```
#### 아이콘 최적화
- **SVG 스프라이트**: 여러 아이콘을 하나의 파일로
- **Icon Font**: 대안으로 사용 가능
- 인라인 SVG: 중요한 아이콘은 HTML에 직접 삽입
#### 이미지 CDN
- Cloudflare Images, AWS CloudFront 활용
- 자동 리사이징 및 포맷 변환
- 전 세계 엣지 서버에서 빠른 전송
### 7.3 코드 스플리팅 전략
#### 라우트 레벨
- 각 화면별로 청크 분리
- 초기 로드 시 01-로그인, 02-대시보드만 로드
- 다른 화면은 필요 시 동적 로드
#### 컴포넌트 레벨
- **모달/드로어**: 열릴 때 로드
```javascript
const TodoModal = lazy(() => import('./components/TodoModal'));
```
- **차트 라이브러리**: 통계 화면에서만 로드
- **리치 텍스트 에디터**: 회의진행 화면에서만 로드
#### 라이브러리 레벨
- **Lodash**: 필요한 함수만 import
```javascript
import debounce from 'lodash/debounce'; // ✅
// import _ from 'lodash'; // ❌
```
- **Moment.js 대신 Day.js**: 더 가벼운 라이브러리 선택
### 7.4 캐싱 전략
#### HTTP 캐싱
- **정적 에셋**: Cache-Control: max-age=31536000 (1년)
- **API 응답**: Cache-Control: max-age=300 (5분)
- **HTML**: Cache-Control: no-cache (항상 검증)
#### 메모리 캐싱 (Client-Side)
- **React Query** 또는 **SWR** 사용
- API 응답 자동 캐싱
- Stale-While-Revalidate 전략
- 중복 요청 제거
- **예시**:
```javascript
const { data, error } = useQuery('meetings', fetchMeetings, {
staleTime: 5 * 60 * 1000, // 5분
cacheTime: 10 * 60 * 1000, // 10분
});
```
#### Local Storage
- **사용자 설정**: 뷰 모드, 필터 설정
- **최근 검색어**: 자동완성 제안
- **임시 저장**: 작성 중인 회의록 (Auto-save)
#### Service Worker 캐싱
- **오프라인 페이지**: 네트워크 오류 시 표시
- **에셋 캐싱**: JS, CSS, 폰트, 아이콘
- **API 캐싱**: 읽기 전용 데이터 (회의록 목록 등)
### 7.5 실시간 성능 최적화
#### WebSocket 최적화
- **연결 풀링**: 하나의 WebSocket 연결 재사용
- **압축**: WebSocket 메시지 압축 (gzip)
- **Heartbeat**: 주기적 ping/pong으로 연결 유지
#### 변경 델타만 전송
- 전체 문서가 아닌 변경된 부분만 전송
- **Operational Transformation** 또는 **CRDT** 알고리즘
- 네트워크 대역폭 절약
#### Debouncing/Throttling
- **타이핑 이벤트**: Debounce 500ms
```javascript
const debouncedSave = debounce(saveContent, 500);
```
- **스크롤 이벤트**: Throttle 100ms
```javascript
const throttledScroll = throttle(onScroll, 100);
```
#### Virtual Scrolling
- 긴 리스트 (Todo, 회의록 목록) 렌더링 최적화
- 뷰포트에 보이는 항목만 DOM에 렌더링
- **라이브러리**: react-window, react-virtualized
### 7.6 성능 모니터링
#### Core Web Vitals 목표
- **LCP (Largest Contentful Paint)**: < 2.5초
- **FID (First Input Delay)**: < 100ms
- **CLS (Cumulative Layout Shift)**: < 0.1
#### 성능 측정 도구
- **Lighthouse**: 자동화된 성능 감사
- **WebPageTest**: 실제 네트워크 환경 테스트
- **Chrome DevTools**: Performance 탭, Network 탭
#### 실시간 모니터링
- **Sentry**: 에러 추적 및 성능 모니터링
- **Google Analytics**: 사용자 행동 분석
- **Custom Metrics**: 회의록 로드 시간, 동기화 지연 시간 측정
---
## 8. 변경 이력
| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|----------|
| 1.0 | 2025-10-15 | 유진 | 초안 작성 - 9개 화면 설계 완료 |
---
## 부록
### A. 디자인 시스템 참조
- **컬러 팔레트**: Primary, Secondary, Success, Warning, Error, Neutral
- **타이포그래피**: 폰트 패밀리, 크기, 행간, 자간
- **스페이싱**: 4px 기반 (4, 8, 12, 16, 24, 32, 48, 64px)
- **컴포넌트 라이브러리**: Material-UI, Ant Design, 또는 커스텀
### B. 기술 스택 권장사항
- **Frontend Framework**: React 18+ 또는 Vue 3+
- **State Management**: React Query + Zustand 또는 Pinia
- **UI Library**: Material-UI, Ant Design, Chakra UI
- **Rich Text Editor**: Quill, Slate, ProseMirror
- **Real-time**: Socket.io, WebSocket
- **Build Tool**: Vite (빠른 빌드) 또는 Webpack
### C. 프로토타입 도구
- **Figma**: 고해상도 프로토타입 및 디자인 시스템
- **Adobe XD**: 인터랙션 프로토타입
- **Storybook**: 컴포넌트 카탈로그 및 테스트
### D. 참고 자료
- **WCAG 2.1 가이드라인**: https://www.w3.org/WAI/WCAG21/quickref/
- **Material Design**: https://material.io/design
- **Web.dev Performance**: https://web.dev/performance/
---
**문서 끝**