# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서 ## 문서 정보 - **작성일**: 2025-10-20 - **작성자**: 이미준 (서비스 기획자) - **버전**: 1.0 - **설계 원칙**: Mobile First 디자인 철학 - **접근성 기준**: WCAG 2.1 Level AA --- ## 목차 1. [프로토타입 화면 목록](#1-프로토타입-화면-목록) 2. [화면 간 사용자 플로우](#2-화면-간-사용자-플로우) 3. [화면별 상세 설계](#3-화면별-상세-설계) 4. [화면 간 전환 및 네비게이션](#4-화면-간-전환-및-네비게이션) 5. [반응형 설계 전략](#5-반응형-설계-전략) 6. [접근성 보장 방안](#6-접근성-보장-방안) 7. [성능 최적화 방안](#7-성능-최적화-방안) 8. [변경 이력](#8-변경-이력) --- ## 1. 프로토타입 화면 목록 본 서비스는 Mobile First 설계 원칙에 따라 총 9개의 핵심 화면으로 구성됩니다. | 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 비고 | |------|--------|-----------------|-----------------|------| | 01 | 로그인 | UFR-USER-010 | 필수 | 인증 진입점 | | 02 | 대시보드 | UFR-MEET-045, UFR-MEET-055 | 높음 | 메인 화면 | | 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 준비 | | 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 | | 05 | 회의진행 | UFR-MEET-030, UFR-AI-010, UFR-RAG-010/020, UFR-COLLAB-010/020 | 매우 높음 | 핵심 차별화 기능 | | 06 | 검증완료 | UFR-COLLAB-030 | 중간 | 품질 보장 | | 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050, UFR-AI-020 | 높음 | 회의록 확정 | | 08 | 회의록공유 | UFR-MEET-060 | 높음 | 공유 및 협업 | | 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | 차별화 기능 | --- ## 2. 화면 간 사용자 플로우 ### 2.1 주요 사용자 여정 ``` [인증 플로우] 01-로그인 → 02-대시보드 [회의 예약 플로우] 02-대시보드 → 03-회의예약 → 02-대시보드 [회의 진행 플로우] 02-대시보드 → 04-템플릿선택 → 05-회의진행 → 06-검증완료 → 07-회의종료 → 08-회의록공유 [회의록 관리 플로우] 02-대시보드 → 회의록 상세 조회 → 수정/공유/다운로드 [Todo 관리 플로우] 09-Todo관리 → Todo 완료/수정 → 회의록 자동 반영 ``` ### 2.2 플로우 다이어그램 ``` ┌─────────┐ │01-로그인│ └────┬────┘ │ ▼ ┌──────────┐ ┌──────────┐ │02-대시보드│────▶│03-회의예약│ └────┬─────┘ └──────────┘ │ ├─────────▶┌──────────────┐ │ │04-템플릿선택 │ │ └──────┬───────┘ │ │ │ ▼ │ ┌──────────┐ │ │05-회의진행│ │ └────┬─────┘ │ │ │ ▼ │ ┌──────────┐ │ │06-검증완료│ │ └────┬─────┘ │ │ │ ▼ │ ┌──────────┐ │ │07-회의종료│ │ └────┬─────┘ │ │ │ ▼ │ ┌────────────┐ │ │08-회의록공유│ │ └────────────┘ │ └─────────▶┌──────────┐ │09-Todo관리│ └──────────┘ ``` --- ## 3. 화면별 상세 설계 ### 3.1 01-로그인 #### 개요 - **목적**: 사용자 인증 및 서비스 진입 - **관련 유저스토리**: UFR-USER-010 - **비즈니스 중요도**: 필수 - **화면 타입**: 단일 목적 페이지 #### 주요 기능 1. 사번과 비밀번호를 통한 LDAP 인증 2. 세션 관리 및 보안 유지 3. 인증 실패 시 오류 메시지 표시 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────┐ │ [로고 이미지] │ │ │ │ 회의록 작성 서비스 │ │ │ │ ┌───────────────────┐ │ │ │ 사번 │ │ │ │ [입력 필드] │ │ │ └───────────────────┘ │ │ │ │ ┌───────────────────┐ │ │ │ 비밀번호 │ │ │ │ [입력 필드] │ │ │ └───────────────────┘ │ │ │ │ ┌───────────────────┐ │ │ │ 로그인 버튼 │ │ │ └───────────────────┘ │ │ │ │ LDAP 연동 인증 시스템 │ └─────────────────────────┘ ``` **주요 컴포넌트**: - 로고 이미지 (SVG, 반응형) - 사번 입력 필드 (type="text", autocomplete="username") - 비밀번호 입력 필드 (type="password", autocomplete="current-password") - 로그인 버튼 (primary action, 44x44px 이상) - 인증 안내 텍스트 #### 인터랙션 1. **입력 검증**: - 실시간 입력 검증 (사번 형식, 비밀번호 입력 여부) - 포커스 이동: Tab 키로 필드 간 이동 - Enter 키로 로그인 실행 2. **로그인 처리**: - 버튼 클릭 → 로딩 인디케이터 표시 - LDAP 인증 진행 - 성공 시: 대시보드로 자동 이동 - 실패 시: 오류 메시지 표시 (3초 후 자동 사라짐) 3. **오류 처리**: - 인증 실패: "사번 또는 비밀번호가 올바르지 않습니다" - 네트워크 오류: "연결에 실패했습니다. 다시 시도해주세요" - 서버 오류: "일시적인 오류가 발생했습니다" #### 데이터 요구사항 - **입력**: 사번 (문자열), 비밀번호 (문자열) - **출력**: 인증 토큰, 사용자 정보 (이름, 권한) - **저장**: 세션 토큰 (로컬 스토리지/세션 스토리지) #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 인증 실패 | 사번 또는 비밀번호가 올바르지 않습니다 | 재입력 유도 | | 네트워크 오류 | 연결에 실패했습니다 | 재시도 버튼 표시 | | 서버 오류 | 일시적인 오류가 발생했습니다 | 관리자 문의 안내 | --- ### 3.2 02-대시보드 #### 개요 - **목적**: 회의록 목록 조회, 빠른 액세스, 상태 확인 - **관련 유저스토리**: UFR-MEET-045 (상세조회), UFR-MEET-055 (수정) - **비즈니스 중요도**: 높음 - **화면 타입**: 목록 및 액션 페이지 #### 주요 기능 1. 회의록 목록 조회 (필터링, 정렬, 검색) 2. 빠른 액션 (새 회의 예약, 진행 중인 회의) 3. 회의록 상세 조회 및 수정 4. 알림 확인 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [프로필] 대시보드 [알림🔔] │ ├─────────────────────────────┤ │ │ │ ┌─────────────────────┐ │ │ │ ➕ 새 회의 예약 │ │ │ └─────────────────────┘ │ │ │ │ 🔴 진행 중인 회의 (1건) │ │ [회의 제목 - 지금 참여] │ │ │ ├─────────────────────────────┤ │ 내 회의록 │ │ │ │ [전체 ▼] [최신순 ▼] [🔍] │ │ │ │ ┌───────────────────────┐ │ │ │ 📝 프로젝트 킥오프 │ │ │ │ 2025-10-20 14:00 │ │ │ │ ✅ 확정완료 │ │ │ │ 3명 참석 │ │ │ └───────────────────────┘ │ │ │ │ ┌───────────────────────┐ │ │ │ 📝 주간 회의 │ │ │ │ 2025-10-19 10:00 │ │ │ │ ⚠️ 작성중 (60%) │ │ │ │ 5명 참석 │ │ │ └───────────────────────┘ │ │ │ │ [더보기...] │ │ │ ├─────────────────────────────┤ │ [대시보드] [Todo] [더보기]│ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 프로필 아이콘, 타이틀, 알림 아이콘 - 빠른 액션 버튼: 새 회의 예약 (primary), 진행 중인 회의 (secondary) - 필터 영역: 상태 필터 (전체/작성중/확정완료), 정렬 (최신순/회의일시순/제목순) - 검색 바: 회의 제목, 참석자, 키워드 검색 - 회의록 카드: 제목, 날짜, 상태, 참석자 수, 진행률 (작성중인 경우) - 하단 네비게이션: 대시보드, Todo, 더보기 #### 인터랙션 1. **회의록 목록**: - 무한 스크롤 또는 페이지네이션 - 카드 탭: 상세 화면으로 이동 - 스와이프: 빠른 액션 (공유, 삭제) 2. **필터링 및 검색**: - 필터 선택: 즉시 목록 갱신 - 검색: 300ms 디바운싱 후 API 요청 - 결과 없을 시: "검색 결과가 없습니다" 메시지 3. **빠른 액션**: - 새 회의 예약: 03-회의예약 화면으로 이동 - 진행 중인 회의: 05-회의진행 화면으로 복귀 4. **회의록 상세 조회** (UFR-MEET-045): - 카드 클릭 → 상세 화면 모달 또는 새 페이지 - 표시 정보: - 회의 기본 정보: 제목, 일시, 장소, 참석자, 템플릿, 상태, 작성자 - 섹션별 내용: 논의사항, 결정사항, Todo, 기타 - 검증 상태: 섹션별 체크 표시 - Todo 항목: 담당자, 마감일, 상태, 우선순위 - 첨부파일: 다운로드 링크 - 부가 기능: - 수정 버튼 (권한 있는 경우) - 공유 버튼 - PDF 다운로드 - 이전/다음 회의록 네비게이션 - 뒤로가기 5. **회의록 수정** (UFR-MEET-055): - 수정 버튼 클릭 → 편집 모드 전환 - 상태별 수정 범위: - 작성중: 모든 섹션 수정 가능 - 확정완료: 승인 요청 후 수정 가능 - 자동 저장: 30초 간격 - 수정 이력: 누가, 언제, 무엇을 수정했는지 - 저장 버튼 클릭 → 상태 업데이트 → 목록 갱신 #### 데이터 요구사항 - **입력**: 필터 조건, 검색 키워드, 정렬 옵션 - **출력**: 회의록 목록 (제목, 날짜, 상태, 참석자, 진행률) - **캐싱**: 최근 조회한 목록 (5분) #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 조회 실패 | 목록을 불러올 수 없습니다 | 새로고침 버튼 | | 검색 실패 | 검색 중 오류가 발생했습니다 | 재시도 유도 | | 수정 권한 없음 | 수정 권한이 없습니다 | 확인 버튼 | --- ### 3.3 03-회의예약 #### 개요 - **목적**: 회의 예약 및 참석자 초대 - **관련 유저스토리**: UFR-MEET-010 - **비즈니스 중요도**: 높음 - **화면 타입**: 폼 입력 페이지 #### 주요 기능 1. 회의 정보 입력 (제목, 날짜/시간, 장소, 참석자) 2. 입력 검증 및 예약 생성 3. 초대 이메일 자동 발송 4. 캘린더 자동 등록 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [←] 회의 예약 [저장]│ ├─────────────────────────────┤ │ │ │ 회의 제목 * │ │ ┌─────────────────────┐ │ │ │ [입력 필드] │ │ │ └─────────────────────┘ │ │ │ │ 날짜 및 시간 * │ │ ┌──────────┬──────────┐ │ │ │ 2025-10-20│ 14:00 │ │ │ └──────────┴──────────┘ │ │ │ │ 장소 (선택) │ │ ┌─────────────────────┐ │ │ │ [입력 필드] │ │ │ └─────────────────────┘ │ │ │ │ 참석자 * │ │ ┌─────────────────────┐ │ │ │ user1@company.com │ │ │ │ user2@company.com │ │ │ │ + 참석자 추가 │ │ │ └─────────────────────┘ │ │ │ │ ☑️ 회의 시작 30분 전 │ │ 리마인더 발송 │ │ │ │ ┌─────────────────────┐ │ │ │ 회의 예약하기 │ │ │ └─────────────────────┘ │ │ │ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 뒤로가기, 타이틀, 저장 버튼 - 회의 제목 입력 필드 (최대 100자, 필수) - 날짜 선택기 (달력 UI, 필수) - 시간 선택기 (시간 목록, 필수) - 장소 입력 필드 (최대 200자, 선택) - 참석자 입력 영역 (이메일 칩, 최소 1명 필수) - 리마인더 설정 체크박스 - 예약하기 버튼 (primary action) #### 인터랙션 1. **폼 입력**: - 실시간 검증: 제목 길이, 이메일 형식, 날짜/시간 유효성 - 참석자 추가: 이메일 입력 후 Enter 또는 버튼 클릭 - 참석자 제거: 칩 클릭 또는 스와이프 2. **날짜/시간 선택**: - 날짜 선택기: 달력 모달 표시 - 시간 선택기: 드롭다운 또는 스크롤 선택 - 과거 날짜 선택 불가 3. **예약 처리**: - 버튼 클릭 → 필수 항목 검증 - 성공 시: - 회의 ID 생성 - 캘린더 자동 등록 - 참석자에게 이메일 발송 - 성공 메시지 표시 (토스트) - 대시보드로 이동 - 실패 시: 오류 메시지 표시 4. **자동 저장**: - 입력 중 임시 저장 (30초 간격) - 뒤로가기 시 저장 확인 다이얼로그 #### 데이터 요구사항 - **입력**: 제목, 날짜, 시간, 장소, 참석자 목록 - **출력**: 회의 ID, 예약 확인 - **저장**: 임시 저장 데이터 (로컬 스토리지) #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 필수 항목 누락 | [항목명]을 입력해주세요 | 해당 필드로 포커스 | | 이메일 형식 오류 | 올바른 이메일을 입력해주세요 | 재입력 유도 | | 예약 실패 | 예약에 실패했습니다 | 재시도 버튼 | | 날짜 과거 선택 | 과거 날짜는 선택할 수 없습니다 | 오늘 날짜로 초기화 | --- ### 3.4 04-템플릿선택 #### 개요 - **목적**: 회의 유형에 맞는 템플릿 선택 및 커스터마이징 - **관련 유저스토리**: UFR-MEET-020 - **비즈니스 중요도**: 중간 - **화면 타입**: 선택 및 설정 페이지 #### 주요 기능 1. 템플릿 목록 표시 (일반, 스크럼, 킥오프, 주간) 2. 템플릿 미리보기 3. 섹션 커스터마이징 (추가/삭제/순서 변경) 4. 회의록 도구 준비 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [←] 템플릿 선택 [다음]│ ├─────────────────────────────┤ │ │ │ 회의 유형에 맞는 템플릿을 │ │ 선택해주세요 │ │ │ │ ┌───────────────────────┐ │ │ │ 📋 일반 회의 │ │ │ │ 기본 구조: 참석자, │ │ │ │ 안건, 논의, 결정, Todo│ │ │ │ [미리보기] [✓ 선택] │ │ │ └───────────────────────┘ │ │ │ │ ┌───────────────────────┐ │ │ │ 🏃 스크럼 회의 │ │ │ │ 어제 한 일, 오늘 할 일│ │ │ │ 이슈 │ │ │ │ [미리보기] [ 선택] │ │ │ └───────────────────────┘ │ │ │ │ ┌───────────────────────┐ │ │ │ 🚀 프로젝트 킥오프 │ │ │ │ 개요, 목표, 일정, │ │ │ │ 역할, 리스크 │ │ │ │ [미리보기] [ 선택] │ │ │ └───────────────────────┘ │ │ │ │ ┌───────────────────────┐ │ │ │ 📊 주간 회의 │ │ │ │ 실적, 이슈, 다음 계획 │ │ │ │ [미리보기] [ 선택] │ │ │ └───────────────────────┘ │ │ │ │ [커스터마이징] │ │ │ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 뒤로가기, 타이틀, 다음 버튼 - 템플릿 카드: 아이콘, 제목, 설명, 미리보기 버튼, 선택 버튼 - 커스터마이징 버튼 (선택한 템플릿이 있을 때 활성화) **커스터마이징 모달**: ``` ┌─────────────────────────────┐ │ 템플릿 커스터마이징 [완료]│ ├─────────────────────────────┤ │ │ │ 섹션 관리 │ │ │ │ ☰ 참석자 │ │ ☰ 안건 │ │ ☰ 논의 내용 │ │ ☰ 결정 사항 │ │ ☰ Todo │ │ │ │ ┌─────────────────────┐ │ │ │ + 섹션 추가 │ │ │ └─────────────────────┘ │ │ │ │ 섹션을 길게 눌러 순서를 │ │ 변경하거나 삭제할 수 있습니다│ │ │ └─────────────────────────────┘ ``` #### 인터랙션 1. **템플릿 선택**: - 카드 탭: 선택 상태 토글 - 미리보기 버튼: 템플릿 구조 모달 표시 - 하나만 선택 가능 (라디오 버튼 방식) 2. **미리보기**: - 템플릿 구조 전체 표시 - 샘플 데이터로 예시 제공 - 닫기 버튼으로 모달 종료 3. **커스터마이징**: - 커스터마이징 버튼 클릭 → 모달 표시 - 섹션 순서 변경: 드래그 앤 드롭 또는 위/아래 버튼 - 섹션 삭제: 스와이프 또는 삭제 아이콘 - 섹션 추가: 입력 필드에 섹션명 입력 후 추가 - 완료 버튼: 변경 사항 저장 4. **다음 단계**: - 다음 버튼 클릭 → 05-회의진행 화면으로 이동 - 템플릿 정보 전달 (선택한 템플릿, 커스터마이징 내용) #### 데이터 요구사항 - **입력**: 템플릿 선택, 커스터마이징 정보 - **출력**: 준비된 회의록 구조 - **캐싱**: 템플릿 목록 (앱 시작 시 로드) #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 템플릿 미선택 | 템플릿을 선택해주세요 | 선택 유도 | | 섹션명 중복 | 이미 존재하는 섹션명입니다 | 재입력 유도 | | 섹션 로드 실패 | 템플릿을 불러올 수 없습니다 | 새로고침 버튼 | --- ### 3.5 05-회의진행 #### 개요 - **목적**: 회의 진행, 실시간 회의록 작성, 차별화 기능 제공 - **관련 유저스토리**: UFR-MEET-030 (회의시작), UFR-AI-010 (자동작성), UFR-RAG-010/020 (용어설명), UFR-COLLAB-010/020 (협업) - **비즈니스 중요도**: 매우 높음 (핵심 차별화 기능) - **화면 타입**: 실시간 협업 페이지 #### 주요 기능 1. 음성 녹음 및 실시간 STT 변환 2. AI 자동 회의록 작성 및 구조화 3. 맥락 기반 용어 설명 (차별화) 4. 실시간 협업 및 동기화 5. 충돌 해결 6. 회의 종료 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [←] 프로젝트 킥오프 [종료]│ ├─────────────────────────────┤ │ │ │ 🔴 녹음 중 [23:45] │ │ ┌─────────────────────┐ │ │ │ 🎵 파형 애니메이션 │ │ │ └─────────────────────┘ │ │ │ │ 👥 참석자 (3/5명) │ │ [김민준] [박서연] [이준호] │ │ │ ├─────────────────────────────┤ │ 📝 실시간 회의록 │ │ │ │ ▼ 참석자 │ │ - 김민준 (주관자) │ │ - 박서연 │ │ - 이준호 │ │ │ │ ▼ 안건 │ │ - 프로젝트 목표 정의 │ │ - 일정 및 마일스톤 │ │ │ │ ▼ 논의 내용 │ │ "우리는 Q1까지 MVP를 │ │ 완성해야 합니다..." │ │ │ │ 💡 [RAG] 용어 설명 │ │ "MVP는 최소 기능 제품으로│ │ 이전 프로젝트에서는..." │ │ │ │ ▼ 결정 사항 │ │ - 개발 프레임워크: React │ │ - 배포 환경: AWS │ │ │ │ ▼ Todo │ │ ☐ 요구사항 정의 @김민준 │ │ (~ 10/25) │ │ │ │ [📝 수정] [💬 댓글] │ │ │ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 뒤로가기, 회의 제목, 종료 버튼 - 녹음 상태 영역: 녹음 표시, 진행 시간, 파형 애니메이션 - 참석자 목록: 아바타, 이름, 참석 상태 - 회의록 섹션: 아코디언 방식, 접기/펼치기 - 실시간 텍스트 영역: STT 변환 결과 표시 - AI 자동 정리 영역: 구조화된 회의록 - 용어 하이라이트: 밑줄 또는 배경색, 툴팁 - 액션 버튼: 수정, 댓글, 첨부 **맥락 기반 용어 설명 툴팁** (차별화 기능): ``` ┌─────────────────────────────┐ │ MVP (Minimum Viable Product)│ ├─────────────────────────────┤ │ 📘 정의: │ │ 최소 기능 제품, 핵심 기능만 │ │ 구현하여 시장 검증 │ │ │ │ 🏢 이 회의에서의 의미: │ │ "Q1까지 사용자 인증, 대시보드│ │ 핵심 기능만 구현" │ │ │ │ 📂 관련 프로젝트: │ │ - 2024 고객 포털 프로젝트 │ │ - 2023 모바일 앱 리뉴얼 │ │ │ │ 📄 과거 회의록: │ │ - 2024-09-15 기획 회의 │ │ - 2024-08-20 킥오프 회의 │ │ │ │ [자세히 보기] │ └─────────────────────────────┘ ``` #### 인터랙션 1. **회의 시작**: - 회의 시작 버튼 클릭 → 권한 확인 (마이크) - 녹음 시작 → 파형 애니메이션 표시 - 참석자 목록 표시 → 실시간 참석 상태 업데이트 2. **실시간 STT 및 AI 작성**: - 음성 인식 → 텍스트 변환 (1초 이내) - AI 자동 정리 → 3-5초 간격으로 회의록 업데이트 - 화자 식별 → 발언자 표시 - 구조화 → 템플릿 섹션에 맞춰 자동 분류 3. **맥락 기반 용어 설명** (차별화): - 전문용어 자동 감지 → 하이라이트 표시 - 용어 클릭/탭 → 툴팁 표시 - RAG 검색 → 과거 회의록, 사내 문서에서 맥락 추출 - 설명 표시: - 간단한 정의 - 이 회의에서의 의미 - 관련 프로젝트/이슈 - 과거 회의록 링크 - 사내 문서 링크 - 툴팁 외부 클릭 → 닫기 - "자세히 보기" → 전체 화면 모달 4. **실시간 협업** (UFR-COLLAB-010): - 회의록 수정 → WebSocket으로 즉시 동기화 - 수정 영역 하이라이트 (3초간) - 수정자 이름 표시 - 버전 관리 → 수정 이력 저장 5. **충돌 해결** (UFR-COLLAB-020): - 동일 위치 동시 수정 감지 - 충돌 알림 표시 - 해결 방식 선택: - Last Write Wins (기본) - 수동 병합 (비교 UI 표시) 6. **회의 종료**: - 종료 버튼 클릭 → 확인 다이얼로그 - 확인 → 녹음 중지 → 06-검증완료 화면으로 이동 #### 데이터 요구사항 - **입력**: 음성 스트림, 회의 ID, 참석자 정보 - **출력**: 텍스트 변환 결과, 구조화된 회의록, 용어 설명 - **실시간 동기화**: WebSocket 연결 - **로컬 저장**: 임시 회의록 (30초 간격) #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 마이크 권한 없음 | 마이크 권한이 필요합니다 | 설정 안내 | | STT 실패 | 음성 인식에 실패했습니다 | 수동 입력 모드 | | AI 처리 실패 | 자동 정리 중 오류 발생 | 재시도 버튼 | | 동기화 실패 | 연결이 끊어졌습니다 | 재연결 시도 | | 용어 설명 없음 | 관련 정보를 찾을 수 없습니다 | 전문가 요청 버튼 | --- ### 3.6 06-검증완료 #### 개요 - **목적**: 회의록 섹션별 검증 및 완료 표시 - **관련 유저스토리**: UFR-COLLAB-030 - **비즈니스 중요도**: 중간 - **화면 타입**: 검증 및 확인 페이지 #### 주요 기능 1. 섹션별 검증 상태 확인 2. 검증 완료 체크 3. 섹션 잠금 (회의 생성자만) 4. 다음 단계 (회의 종료) #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [←] 회의록 검증 [다음]│ ├─────────────────────────────┤ │ │ │ 회의록 섹션별로 검증해주세요│ │ │ │ ✅ 참석자 (검증완료) │ │ ┌───────────────────────┐ │ │ │ - 김민준 (주관자) │ │ │ │ - 박서연 │ │ │ │ - 이준호 │ │ │ │ │ │ │ │ 검증자: 김민준 │ │ │ │ 시간: 14:35 │ │ │ │ [수정] [🔒 잠금] │ │ │ └───────────────────────┘ │ │ │ │ ⚠️ 안건 (검증 필요) │ │ ┌───────────────────────┐ │ │ │ - 프로젝트 목표 정의 │ │ │ │ - 일정 및 마일스톤 │ │ │ │ │ │ │ │ [수정] [✓ 검증완료] │ │ │ └───────────────────────┘ │ │ │ │ ⚠️ 논의 내용 (검증 필요) │ │ ┌───────────────────────┐ │ │ │ "우리는 Q1까지..." │ │ │ │ │ │ │ │ [수정] [✓ 검증완료] │ │ │ └───────────────────────┘ │ │ │ │ ✅ 결정 사항 (검증완료) │ │ ✅ Todo (검증완료) │ │ │ │ 전체 진행률: 60% (3/5) │ │ │ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 뒤로가기, 타이틀, 다음 버튼 - 섹션 카드: 제목, 내용 미리보기, 검증 상태, 검증자 정보 - 액션 버튼: 수정, 검증완료, 잠금 (회의 생성자만) - 진행률 표시: 퍼센트, 완료 수/전체 수 #### 인터랙션 1. **섹션 검증**: - 섹션 카드 탭 → 전체 내용 표시 - 검증완료 버튼 클릭 → 상태 업데이트 - 검증 시간 및 검증자 기록 - 실시간 동기화 → 다른 참석자에게 알림 2. **섹션 잠금** (회의 생성자만): - 잠금 버튼 클릭 → 확인 다이얼로그 - 확인 → 섹션 잠금 (추가 수정 불가) - 잠금 아이콘 표시 3. **섹션 수정**: - 수정 버튼 클릭 → 편집 모드 - 인라인 편집 또는 모달 - 저장 → 상태 "검증 필요"로 변경 4. **다음 단계**: - 다음 버튼 클릭 → 07-회의종료 화면으로 이동 - 검증 미완료 섹션이 있어도 진행 가능 (나중에 수정 가능) #### 데이터 요구사항 - **입력**: 섹션별 검증 상태 - **출력**: 검증 완료 정보 (검증자, 시간) - **실시간 동기화**: WebSocket #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 검증 권한 없음 | 검증 권한이 없습니다 | 확인 버튼 | | 잠금 권한 없음 | 회의 생성자만 잠금할 수 있습니다 | 확인 버튼 | | 동기화 실패 | 검증 상태 동기화 실패 | 재시도 버튼 | --- ### 3.7 07-회의종료 #### 개요 - **목적**: 회의 종료, 통계 확인, Todo 자동 추출, 최종 확정 - **관련 유저스토리**: UFR-MEET-040 (회의종료), UFR-MEET-050 (최종확정), UFR-AI-020 (Todo자동추출) - **비즈니스 중요도**: 높음 - **화면 타입**: 요약 및 확정 페이지 #### 주요 기능 1. 회의 통계 표시 2. AI Todo 자동 추출 결과 3. 최종 회의록 확정 4. 회의록 공유 이동 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [←] 회의 종료 [확정]│ ├─────────────────────────────┤ │ │ │ 🎉 회의가 종료되었습니다 │ │ │ │ 📊 회의 통계 │ │ ┌───────────────────────┐ │ │ │ ⏱️ 총 시간: 45분 │ │ │ │ 👥 참석자: 3명 │ │ │ │ 💬 발언 횟수: │ │ │ │ 김민준 12회 │ │ │ │ 박서연 8회 │ │ │ │ 이준호 5회 │ │ │ │ 🔑 주요 키워드: │ │ │ │ #MVP #React #AWS │ │ │ └───────────────────────┘ │ │ │ │ ✅ AI Todo 자동 추출 │ │ ┌───────────────────────┐ │ │ │ ☐ 요구사항 정의 │ │ │ │ @김민준 ~ 10/25 │ │ │ │ │ │ │ │ ☐ 기술 스택 검토 │ │ │ │ @박서연 ~ 10/27 │ │ │ │ │ │ │ │ ☐ 인프라 설계 │ │ │ │ @이준호 ~ 10/30 │ │ │ └───────────────────────┘ │ │ │ │ 필수 항목 확인: │ │ ✅ 회의 제목 │ │ ✅ 참석자 목록 │ │ ✅ 주요 논의 내용 │ │ ✅ 결정 사항 │ │ │ │ ┌─────────────────────┐ │ │ │ 최종 회의록 확정 │ │ │ └─────────────────────┘ │ │ │ │ [나중에 확정] │ │ │ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 뒤로가기, 타이틀, 확정 버튼 - 완료 메시지: 아이콘, 텍스트 - 통계 카드: 시간, 참석자, 발언 횟수, 키워드 - Todo 자동 추출 영역: Todo 목록, 담당자, 마감일 - 필수 항목 체크리스트: 체크 아이콘 - 확정 버튼 (primary) - 나중에 확정 버튼 (secondary) #### 인터랙션 1. **회의 통계**: - 자동 생성 및 표시 - 그래프 또는 차트 (선택) - 키워드 탭 → 관련 섹션으로 이동 2. **AI Todo 자동 추출** (UFR-AI-020): - AI가 회의록 분석 → 액션 아이템 식별 - 담당자 자동 지정 (발언 기반) - 마감일 자동 추출 (언급된 경우) - Todo 편집 가능 (담당자, 마감일 수정) - 추가/삭제 가능 3. **최종 확정** (UFR-MEET-050): - 확정 버튼 클릭 → 필수 항목 검사 - 필수 항목 누락 시: - 누락 항목 표시 - 해당 섹션으로 이동 유도 - 필수 항목 완료 시: - 최종 버전 생성 - 확정 시간 기록 - Todo 서비스로 Todo 전달 (UFR-TODO-010) - 08-회의록공유 화면으로 이동 4. **나중에 확정**: - 버튼 클릭 → 대시보드로 이동 - 회의록 상태: "작성중" - 나중에 수정 및 확정 가능 #### 데이터 요구사항 - **입력**: 회의 데이터 (시간, 참석자, 발언 내용) - **출력**: 통계, Todo 목록, 확정 정보 - **저장**: 최종 회의록, Todo 데이터 #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 필수 항목 누락 | [항목명]이 작성되지 않았습니다 | 해당 섹션으로 이동 | | Todo 추출 실패 | Todo 자동 추출 실패 | 수동 작성 유도 | | 확정 실패 | 회의록 확정에 실패했습니다 | 재시도 버튼 | --- ### 3.8 08-회의록공유 #### 개요 - **목적**: 회의록 공유 설정 및 알림 발송 - **관련 유저스토리**: UFR-MEET-060 - **비즈니스 중요도**: 높음 - **화면 타입**: 설정 및 액션 페이지 #### 주요 기능 1. 공유 대상 선택 2. 권한 설정 3. 공유 방식 선택 4. 링크 보안 옵션 5. 공유 실행 및 알림 발송 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [←] 회의록 공유 [공유]│ ├─────────────────────────────┤ │ │ │ 공유 대상 │ │ ┌───────────────────────┐ │ │ │ ● 참석자 전체 (기본) │ │ │ │ ○ 특정 참석자 선택 │ │ │ └───────────────────────┘ │ │ │ │ 공유 권한 │ │ ┌───────────────────────┐ │ │ │ ● 읽기 전용 │ │ │ │ ○ 댓글 가능 │ │ │ │ ○ 편집 가능 │ │ │ └───────────────────────┘ │ │ │ │ 공유 방식 │ │ ┌───────────────────────┐ │ │ │ ☑️ 이메일 발송 │ │ │ │ ☑️ 링크 복사 │ │ │ └───────────────────────┘ │ │ │ │ 링크 보안 (선택) │ │ ┌───────────────────────┐ │ │ │ ☐ 유효 기간 설정 │ │ │ │ [30일 ▼] │ │ │ │ │ │ │ │ ☐ 비밀번호 설정 │ │ │ │ [입력 필드] │ │ │ └───────────────────────┘ │ │ │ │ 🔔 다음 회의 일정 │ │ ┌───────────────────────┐ │ │ │ ☑️ 캘린더 자동 등록 │ │ │ │ 날짜: [선택] │ │ │ └───────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 회의록 공유 │ │ │ └─────────────────────┘ │ │ │ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 뒤로가기, 타이틀, 공유 버튼 - 공유 대상 라디오 버튼 - 권한 설정 라디오 버튼 - 공유 방식 체크박스 - 링크 보안 옵션: 유효 기간, 비밀번호 - 다음 회의 일정: 캘린더 자동 등록 옵션 - 공유 버튼 (primary) #### 인터랙션 1. **공유 대상 선택**: - 참석자 전체 (기본 선택) - 특정 참석자 선택 → 체크박스 목록 표시 2. **권한 설정**: - 읽기 전용 (기본) - 댓글 가능 - 편집 가능 3. **공유 방식**: - 이메일 발송: 참석자 이메일로 알림 - 링크 복사: 클립보드에 복사 → 토스트 메시지 4. **링크 보안**: - 유효 기간: 드롭다운 (7일, 30일, 90일, 무제한) - 비밀번호: 입력 필드, 자동 생성 버튼 5. **다음 회의 일정**: - 회의록에서 다음 회의 언급 자동 감지 - 캘린더 자동 등록 체크박스 - 날짜 선택기 6. **공유 실행**: - 공유 버튼 클릭 → 처리 - 성공 시: - 공유 링크 생성 - 이메일 발송 (선택 시) - 링크 복사 (선택 시) - 캘린더 등록 (선택 시) - 공유 시간 기록 - 성공 메시지 표시 - 대시보드로 이동 - 실패 시: 오류 메시지 #### 데이터 요구사항 - **입력**: 공유 대상, 권한, 방식, 보안 옵션 - **출력**: 공유 링크, 발송 결과 - **저장**: 공유 이력 #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 공유 실패 | 공유에 실패했습니다 | 재시도 버튼 | | 이메일 발송 실패 | 이메일 발송 실패 | 링크 복사 유도 | | 링크 생성 실패 | 링크 생성 실패 | 재시도 버튼 | --- ### 3.9 09-Todo관리 #### 개요 - **목적**: Todo 할당, 진행 관리, 회의록 실시간 연동 (차별화) - **관련 유저스토리**: UFR-TODO-010 (Todo할당), UFR-TODO-030 (Todo완료처리) - **비즈니스 중요도**: 높음 (차별화 기능) - **화면 타입**: 목록 및 관리 페이지 #### 주요 기능 1. Todo 목록 조회 (진행중/완료) 2. Todo 완료 처리 3. 회의록 실시간 연동 (차별화) 4. 필터링 및 정렬 5. 알림 발송 #### UI 구성요소 **Mobile (320px ~ 767px)** ``` ┌─────────────────────────────┐ │ [프로필] Todo [알림🔔]│ ├─────────────────────────────┤ │ │ │ [진행중 ▼] [마감일순 ▼] │ │ │ │ 📌 진행 중 (3건) │ │ │ │ ┌───────────────────────┐ │ │ │ ☐ 요구사항 정의 │ │ │ │ @김민준 │ │ │ │ 📅 ~ 10/25 (D-5) │ │ │ │ ⭐ 높음 │ │ │ │ 📝 프로젝트 킥오프 │ │ │ │ (10/20) │ │ │ └───────────────────────┘ │ │ │ │ ┌───────────────────────┐ │ │ │ ☐ 기술 스택 검토 │ │ │ │ @박서연 │ │ │ │ 📅 ~ 10/27 (D-7) │ │ │ │ ⭐ 보통 │ │ │ │ 📝 주간 회의 (10/19) │ │ │ └───────────────────────┘ │ │ │ │ ✅ 완료됨 (2건) │ │ │ │ ┌───────────────────────┐ │ │ │ ☑️ 회의 일정 조율 │ │ │ │ @이준호 │ │ │ │ ✓ 10/18 완료 │ │ │ │ 📝 킥오프 준비 회의 │ │ │ └───────────────────────┘ │ │ │ ├─────────────────────────────┤ │ [대시보드] [Todo] [더보기]│ └─────────────────────────────┘ ``` **주요 컴포넌트**: - 상단 헤더: 프로필, 타이틀, 알림 - 필터 영역: 상태 (진행중/완료), 정렬 (마감일/우선순위/최신순) - Todo 카드: - 체크박스 (완료 처리) - Todo 내용 - 담당자 - 마감일 (D-day 표시) - 우선순위 (아이콘) - 회의록 링크 (제목, 날짜) - 하단 네비게이션 **Todo 상세 모달**: ``` ┌─────────────────────────────┐ │ Todo 상세 [✕] │ ├─────────────────────────────┤ │ │ │ ☐ 요구사항 정의 │ │ │ │ 담당자: 김민준 │ │ 마감일: 2025-10-25 │ │ 우선순위: 높음 │ │ │ │ 📝 관련 회의록: │ │ 프로젝트 킥오프 (10/20) │ │ [회의록 보기] │ │ │ │ 💬 댓글 (2) │ │ - 김민준: 진행 중입니다 │ │ - 박서연: 도움 필요하시면 │ │ 연락주세요 │ │ │ │ ┌─────────────────────┐ │ │ │ 완료 처리 │ │ │ └─────────────────────┘ │ │ │ └─────────────────────────────┘ ``` #### 인터랙션 1. **Todo 목록**: - 무한 스크롤 또는 페이지네이션 - 카드 탭: 상세 모달 표시 - 스와이프: 빠른 액션 (완료, 수정, 삭제) 2. **Todo 완료 처리** (UFR-TODO-030): - 체크박스 클릭 → 확인 다이얼로그 - 확인 → 완료 상태 변경 - 완료 시간 기록 - 회의록 실시간 반영 (차별화): - 관련 회의록의 Todo 섹션 자동 업데이트 - 완료 표시 (체크 아이콘) - 완료 시간 및 완료자 표시 - 알림 발송: - 회의 참석자에게 완료 알림 - 모든 Todo 완료 시 전체 완료 알림 3. **회의록 연결** (차별화): - 회의록 보기 버튼 → 해당 회의록 상세 화면 - 원문 맥락 추적 가능 - 양방향 연결 (Todo ↔ 회의록) 4. **필터링 및 정렬**: - 상태 필터: 진행중, 완료 - 정렬: 마감일순, 우선순위, 최신순 5. **댓글 및 협업**: - 댓글 작성 → 실시간 동기화 - 담당자에게 알림 #### 데이터 요구사항 - **입력**: 필터, 정렬, 완료 처리 - **출력**: Todo 목록, 회의록 연결 정보 - **실시간 동기화**: WebSocket (회의록 반영) #### 에러 처리 | 에러 유형 | 메시지 | 액션 | |-----------|--------|------| | 조회 실패 | Todo 목록을 불러올 수 없습니다 | 새로고침 버튼 | | 완료 처리 실패 | 완료 처리에 실패했습니다 | 재시도 버튼 | | 회의록 연결 실패 | 회의록을 찾을 수 없습니다 | 확인 버튼 | --- ## 4. 화면 간 전환 및 네비게이션 ### 4.1 네비게이션 전략 **Mobile (320px ~ 767px)** - **하단 네비게이션 바**: 대시보드, Todo, 더보기 - **상단 헤더**: 뒤로가기, 타이틀, 액션 버튼 - **햄버거 메뉴**: 설정, 프로필, 로그아웃 - **플로팅 액션 버튼 (FAB)**: 빠른 액세스 (새 회의 예약) **Tablet (768px ~ 1023px)** - **사이드 네비게이션**: 고정된 좌측 메뉴 - **상단 네비게이션**: 로고, 검색, 알림, 프로필 - **플로팅 액션 버튼 (FAB)**: 빠른 액세스 **Desktop (1024px 이상)** - **좌측 사이드바**: 고정된 네비게이션 메뉴 - **상단 헤더**: 로고, 검색, 알림, 프로필 - **키보드 단축키**: 빠른 네비게이션 ### 4.2 화면 전환 패턴 | 전환 | 애니메이션 | 방향 | |------|------------|------| | 로그인 → 대시보드 | 페이드인 | - | | 대시보드 → 상세 | 슬라이드 좌 | 우 → 좌 | | 상세 → 대시보드 | 슬라이드 우 | 좌 → 우 | | 모달 표시 | 슬라이드 상 | 하 → 상 | | 모달 닫기 | 슬라이드 하 | 상 → 하 | ### 4.3 제스처 지원 (Mobile) - **스와이프 우**: 뒤로가기 (iOS 스타일) - **스와이프 좌**: 빠른 액션 (삭제, 공유) - **길게 누르기**: 컨텍스트 메뉴 - **핀치 줌**: 이미지 확대/축소 - **풀 투 리프레시**: 목록 새로고침 --- ## 5. 반응형 설계 전략 ### 5.1 브레이크포인트 ```css /* Mobile First (기본) */ @media (min-width: 320px) { /* Mobile */ } @media (min-width: 768px) { /* Tablet */ } @media (min-width: 1024px) { /* Desktop */ } @media (min-width: 1440px) { /* Large Desktop */ } ``` ### 5.2 레이아웃 전략 **Mobile (320px ~ 767px)** - 단일 컬럼 레이아웃 - 풀 스크린 모달 - 하단 네비게이션 - 스택 방식 (세로 배치) **Tablet (768px ~ 1023px)** - 2단 컬럼 (메인 + 사이드) - 사이드 패널 (용어 설명, 참석자 목록) - 플로팅 모달 - 그리드 레이아웃 (회의록 목록 2열) **Desktop (1024px 이상)** - 3단 컬럼 (네비게이션 + 메인 + 사이드) - 인라인 모달 - 상단 네비게이션 - 그리드 레이아웃 (회의록 목록 3-4열) ### 5.3 점진적 향상 **Mobile (기본 기능)** - 핵심 회의록 작성 기능 - 필수 검증 및 공유 - 기본 Todo 관리 **Tablet (추가 기능)** - 빠른 액세스 패널 - 회의록 미리보기 - 멀티 선택 및 일괄 작업 **Desktop (고급 기능)** - 다중 회의록 비교 - 고급 검색 및 필터 - 키보드 단축키 - 드래그 앤 드롭 ### 5.4 타이포그래피 반응형 ```css /* 제목 */ h1 { font-size: 24px; /* Mobile */ } @media (min-width: 768px) { h1 { font-size: 32px; } /* Tablet */ } @media (min-width: 1024px) { h1 { font-size: 40px; } /* Desktop */ } /* 본문 */ body { font-size: 14px; /* Mobile */ line-height: 1.5; } @media (min-width: 768px) { body { font-size: 16px; } /* Tablet */ } ``` ### 5.5 이미지 및 미디어 반응형 - **반응형 이미지**: `srcset`, `sizes` 속성 활용 - **WebP 포맷**: 최신 브라우저 지원 - **레이지 로딩**: `loading="lazy"` 속성 - **비디오**: 자동 재생 비활성화 (모바일) --- ## 6. 접근성 보장 방안 ### 6.1 WCAG 2.1 Level AA 준수 #### 인식 가능성 (Perceivable) 1. **텍스트 대체**: - 모든 이미지에 `alt` 텍스트 제공 - 아이콘에 `aria-label` 추가 - 정보 전달 이미지: 상세한 설명 - 장식 이미지: `alt=""` (빈 문자열) 2. **색상 대비**: - 일반 텍스트: 최소 4.5:1 - 큰 텍스트 (18pt 이상): 최소 3:1 - UI 컴포넌트: 최소 3:1 - 색상만으로 정보 전달 금지 (아이콘, 텍스트 병행) 3. **리사이징**: - 200%까지 확대 가능 - 콘텐츠 손실 없음 - 가로 스크롤 최소화 4. **콘텐츠 구조**: - 의미론적 HTML 사용 (`
`, `