diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md new file mode 100644 index 0000000..5d64082 --- /dev/null +++ b/design/uiux/uiux.md @@ -0,0 +1,1449 @@ +# 회의록 작성 및 공유 개선 서비스 - 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/ + +--- + +**문서 끝**