diff --git a/.gitignore b/.gitignore index 6f7a6bd..5f8b57a 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .playwright-mcp/ +.DS_Store +**/.DS_Store diff --git a/design-last/uiux/uiux.md b/design-last/uiux/uiux.md new file mode 100644 index 0000000..15974d0 --- /dev/null +++ b/design-last/uiux/uiux.md @@ -0,0 +1,2036 @@ +# 회의록 작성 및 공유 개선 서비스 - 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 명확한 레이블** +- **모든 입력 필드** + - `