# 회의록 작성 및 공유 개선 서비스 - 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 명확한 레이블** - **모든 입력 필드** - `