# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서 ## 문서 정보 - **작성일**: 2025-10-21 - **최종 수정일**: 2025-10-28 - **작성자**: 이미준 (서비스 기획자) - **버전**: 1.5.9 - **설계 철학**: Mobile First Design --- ## 목차 1. [설계 개요](#설계-개요) 2. [프로토타입 화면 목록](#프로토타입-화면-목록) 3. [화면 간 사용자 플로우](#화면-간-사용자-플로우) 4. [화면별 상세 설계](#화면별-상세-설계) - [01-로그인](#01-로그인) - [02-대시보드](#02-대시보드) - [03-회의예약](#03-회의예약) - [04-템플릿선택](#04-템플릿선택) - [05-회의진행](#05-회의진행) - [07-회의종료](#07-회의종료) - [10-회의록상세조회](#10-회의록상세조회) - [11-회의록수정](#11-회의록수정) - [12-회의록목록조회](#12-회의록목록조회) 5. [공통 UI 컴포넌트](#공통-ui-컴포넌트) 6. [공통 에러 메시지 표준](#공통-에러-메시지-표준) 7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션) 8. [반응형 설계 전략](#반응형-설계-전략) 9. [접근성 보장 방안](#접근성-보장-방안) 10. [성능 최적화 방안](#성능-최적화-방안) 11. [변경 이력](#변경-이력) 12. [부록](#부록) --- ## 설계 개요 ### 설계 목표 업무 지식이 없는 회의 참여자 누구라도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공 ### 설계 원칙 #### 1. Mobile First 철학 - **우선순위 중심**: 작은 화면에서 가장 중요한 콘텐츠와 기능에 집중 - **점진적 향상**: 모바일 기본 경험 우선 구축 후, 화면 크기에 따라 기능 확장 - **성능 최적화**: 모바일 환경의 제약사항(네트워크, 처리 능력) 우선 고려 #### 2. 사용자 중심 설계 - **직관적 인터페이스**: 최소한의 학습으로 사용 가능한 UI - **명확한 피드백**: 모든 사용자 액션에 대한 즉각적이고 명확한 피드백 - **오류 방지**: 실수를 사전에 방지하는 안전장치 제공 #### 3. 일관성과 예측 가능성 - **일관된 UI 패턴**: 동일한 기능은 항상 동일한 방식으로 표현 - **예측 가능한 동작**: 사용자가 기대하는 대로 동작 - **표준 준수**: 플랫폼별 디자인 가이드라인 준수 ### 유저스토리 매핑 본 설계는 다음 유저스토리를 기반으로 작성됨: - **User 서비스**: UFR-USER-010 (사용자 인증) - **Meeting 서비스**: UFR-MEET-010 ~ UFR-MEET-060 (회의 관리, 회의록 작성/공유) - **STT 서비스**: UFR-STT-010, UFR-STT-020 (음성 인식 및 변환) - **AI 서비스**: - UFR-AI-010 (AI 회의록 자동 작성) - UFR-AI-020 (Todo 자동 추출) - UFR-AI-030 (프롬프팅 기반 회의록 개선) - **UFR-AI-040 (관련 회의록 자동 연결)** ← 신규 반영 - **RAG 서비스**: UFR-RAG-010, UFR-RAG-020 (맥락 기반 용어 설명) - **Collaboration 서비스**: UFR-COLLAB-030 (안건별 검증완료 및 잠금 처리) ### 주요 추가 기능 (v1.1) 1. **AI 기반 회의 내용 요약 자동 생성** - 각 섹션 최상단에 AI가 자동으로 생성한 2-3문장 요약 표시 - 참여자가 요약 내용 확인 후 수정 가능 - 실시간 동기화 및 자동 저장 2. **참고자료 자동 연결 (UFR-AI-040)** - 각 섹션 하단에 관련 회의록 자동 연결 - 이전 회의록 및 맥락상 관련 회의록 링크 제공 - 관련도 표시 (퍼센트 또는 별점) - 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능 [↑ 목차로 돌아가기](#목차) --- ## 프로토타입 화면 목록 | 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 설명 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 | |------|--------|----------------|-------------------|------------------------|------------|------------------------|-------| | 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | | | 02 | 대시보드 | UFR-USER-020 | 필수 | 메인 랜딩 페이지 | O | X | | | 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 생성 | X | O | | | 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 선택 | X | O | | | 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | | | 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | 회의 통계 및 최종 확정 | X | X | | | 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | 회의록 상세 보기 | X | O | | | 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | | | 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | | [↑ 목차로 돌아가기](#목차) --- ## 화면 간 사용자 플로우 ### 주요 사용자 시나리오별 플로우 #### 시나리오 1: 새 회의 진행 (Full Flow) ``` 로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행 → 회의종료 → 회의록수정 (선택) → 대시보드 ``` #### 시나리오 2: 지난 회의록 조회 및 수정 ``` 로그인 → 대시보드 → 회의록상세조회 → 회의록수정 → 대시보드 ``` #### 시나리오 3: 빠른 회의 시작 (템플릿 스킵) ``` 로그인 → 대시보드 → 회의진행 (기본 템플릿) → 회의종료 → 대시보드 ``` ### 플로우 다이어그램 ```mermaid graph TD A[로그인] --> B[대시보드] B --> C[회의예약] C --> D[템플릿선택] D --> E[회의진행] E --> G[회의종료] G --> H{회의록 수정?} H -->|Yes| K[회의록수정] H -->|No| B K --> B B --> I[회의록상세조회] I --> J{수정 필요?} J -->|Yes| K K --> I J -->|No| B ``` [↑ 목차로 돌아가기](#목차) --- ## 화면별 상세 설계 ### 01-로그인 #### 개요 - **목적**: 사용자 인증 및 시스템 접근 권한 부여 - **관련 유저스토리**: UFR-USER-010 - **비즈니스 중요도**: 필수 - **접근 경로**: 애플리케이션 최초 진입 #### 주요 기능 1. 사번과 비밀번호를 이용한 LDAP 인증 2. 로그인 상태 유지 옵션 3. 비밀번호 찾기/재설정 4. 오류 처리 및 피드백 #### UI 구성요소 **Mobile (320px~768px)** - 상단: 서비스 로고 및 타이틀 - 중앙: 로그인 폼 - 사번 입력 필드 (필수) - 비밀번호 입력 필드 (필수, 마스킹) - "로그인 상태 유지" 체크박스 - 로그인 버튼 (Primary CTA) - 하단: "비밀번호 찾기" 링크 - 오류 메시지 영역 **Tablet/Desktop (768px+)** - 좌측: 서비스 소개 및 주요 기능 설명 (선택) - 우측: 로그인 폼 (모바일과 동일 구조) #### 인터랙션 1. **입력 검증** - 실시간 필드 유효성 검사 (형식 오류 즉시 표시) - 빈 필드 제출 시 해당 필드로 포커스 이동 2. **로그인 처리** - 로그인 버튼 클릭 → 로딩 인디케이터 표시 - 성공: 대시보드로 자동 이동 (페이드 전환) - 실패: 오류 메시지 표시 (사번/비밀번호 불일치, 계정 잠금 등) 3. **키보드 인터랙션** - Enter 키로 다음 필드 이동 또는 로그인 실행 - Tab 키로 포커스 이동 #### 데이터 요구사항 - **입력**: 사번(문자열), 비밀번호(문자열, 최소 8자) - **출력**: 인증 토큰, 사용자 정보(이름, 권한) - **연동**: User 서비스 - LDAP 인증 API #### 에러 처리 - **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X) - **계정 잠금**: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요." - **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 - **서버 오류**: [공통 에러 메시지 - 서버 오류](#서버-오류) 참조 --- ### 02-대시보드 #### 개요 - **목적**: 주요 기능 접근 허브, 최근 활동 요약 제공 - **관련 유저스토리**: UFR-USER-020 (대시보드 조회) - **비즈니스 중요도**: 필수 - **접근 경로**: 로그인 후 메인 화면 #### 주요 기능 1. 빠른 회의 시작 및 예약 2. **최근 회의 목록** (최대 3개, 회의록 미생성 우선) - 1순위: 진행중 회의 (참여 가능) - 2순위: 예정된 회의 (시작 전) - 3순위: 최근 종료된 회의 (회의록 있음, 1+2순위가 3개 미만일 때만 표시) 3. **통계 정보 표시** (예정된 회의, 작성중 회의록) 4. **내 회의록** (참여자/생성자로 등록된 최근 4개, 상태 포함) #### UI 구성요소 **Mobile (320px~768px)** - **헤더** (상단) - "안녕하세요 👋" (H3, Bold) - 부제: "오늘 {N}건의 회의가 예정되어 있어요" (Body, 회색) - N = 예정된 회의 개수 (동적 업데이트) - 예정된 회의가 없을 경우: "예정된 회의가 없습니다" - **메인 콘텐츠** (스크롤, padding-bottom: 80px, background: gray-50) - **통계 카드** (2열 그리드) - "📅 예정된 회의" 카드 - 값: 전체 예정 + 진행 중 회의 개수 - "📝 작성중 회의록" 카드 - 값: 내가 참여한 회의 중 '작성중' 상태인 회의록 개수 - 높이: ~80px - 클릭 액션: 없음 (정보 표시만) - 반응형: 태블릿 이상에서 간격 증가 - **최근 회의** 섹션 - 헤더: "최근 회의" (H4) - **정렬 기준** (UFR-USER-020 기준): 1. **1순위**: 회의록 미생성 회의 (진행중 + 예정) 우선 표시 2. **2순위**: 1순위가 3개 미만이면 최근 종료된 회의(회의록 있음)로 나머지 채움 3. **각 그룹 내 정렬**: 빠른 일시 순 (시작 시간 기준) 4. **최대 표시**: 3개 - **회의 카드** (클릭 가능 블록): - 상태 라벨 (배지) - 진행중: "진행중" - 예정: "예정" - 완료: "작성중" 또는 "확정완료" - 회의 제목 (H5) - 생성자 표시 (👑 아이콘) - 내가 생성한 회의인 경우 - 회의 일시 (아이콘: calendar_today) - 참여자 수 (아이콘: people) - 장소 정보 - 상태 버튼 (표시용): - 진행중: "참여하기" 버튼 - 예정: 버튼 없음 (카드 클릭으로 처리) - 완료: 버튼 없음 (카드 클릭으로 처리) - 빈 상태: "예정된 회의가 없습니다" - **내 회의록** 카드 - 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동) - **최근 회의록 리스트** (최대 4개, 2x2 그리드): - 필터: 내가 참여자 또는 생성자로 등록된 회의록 - 정렬: 최근 생성 순 (createdAt 기준) - 각 항목: - 회의 제목 (H5) - 회의 일시 (날짜 + 시간) - 참여자 수 - **상태 배지**: - "작성중" (draft, 주황색 배지) - "확정완료" (confirmed, 초록색 배지) - 검증완료율 표시 (작성중인 경우만) - 클릭 시: 회의록 상세 화면으로 이동 - 빈 상태: "참여한 회의록이 없습니다" **Mobile (320px~768px)** - **v1.5.0 네비게이션 간소화** - **하단 네비게이션**: 2개 메뉴만 표시 - 홈 (대시보드) - 활성 상태 - 회의록 (회의록 목록) **Tablet/Desktop (768px+)** - **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (대시보드 활성) - **메인 콘텐츠** (왼쪽 여백 240px) - **헤더** - "안녕하세요, {사용자명}님!" (H2) - "오늘의 일정을 확인하세요" (부제) - **통계 카드 그리드** (2개) - **v1.5.0 변경** - 예정된 회의 (📅) - 작성중 회의록 (📝) - **최근 회의 그리드** (2-3컬럼) - 회의 카드들 (진행중 우선) - 참여하기/수정/보기 버튼 - **내 회의록 리스트** - 화이트 카드 배경 - 전체보기 → 12-회의록목록조회.html - **하단 네비게이션**: 숨김 (데스크톱에서는 사이드바 사용) #### 인터랙션 1. **빠른 액션** - "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환) - "회의 예약" 클릭 → 회의예약 화면으로 이동 2. **예정된/진행중 회의 인터랙션** - **진행중 회의** (모든 참여자): - "참여하기" 버튼 클릭 → 회의 진행 화면으로 즉시 이동 - 회의 항목 클릭 → 회의 상세 정보 표시 (모달 또는 화면 이동) - 애니메이션: "진행중" 배지 깜빡임 효과 (1초 간격) - **예정된 회의 - 생성자 (내가 생성한 회의)**: - 회의 카드 클릭 → 회의예약 화면(수정 모드)으로 이동 - 회의 제목, 일시, 참여자, 안건 등 수정 가능 - 저장 시 참여자에게 변경 알림 발송 - 크라운 아이콘 표시 (생성자 구분) - **예정된 회의 - 초대받은 참여자**: - 회의 카드 클릭 → 시스템 알럿 표시 - 메시지: "아직 회의 시간이 되지 않아 참여하실 수 없습니다" - 다음 버전에서 회의 상세 조회 기능으로 개선 예정 - **공통**: - 회의 항목 호버: 카드 그림자 증가 - "전체 보기" 링크 클릭 → 회의 목록 화면으로 이동 3. **카드 인터랙션** - 회의록 항목 클릭 → 회의록 상세 화면으로 이동 - "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동 - 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px)) 4. **검색** - 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시 - 실시간 자동완성 및 최근 검색어 제공 #### 데이터 요구사항 - **입력**: - 사용자 ID (현재 로그인 사용자) - 현재 날짜/시간 (예정된 회의 필터링용) - **출력**: - **예정된/진행중 회의**: - 회의 ID, 제목, 일시, 참여자 목록, 상태 (예정/진행중), D-day - **생성자 ID** (권한 판별용) - **현재 사용자 역할** (creator | attendee) - **참여 가능 시간** (시작 시간 - 10분) - 필터 조건: - **진행중 회의**: 회의 시작 시간 <= 현재 시간 AND 회의 종료 안 됨, 사용자가 참여자 또는 생성자 - **예정된 회의**: 회의 일시 >= 현재 시간, 사용자가 참여자 또는 생성자 - 정렬 우선순위: 1. 진행중 회의 우선 (상태 = ongoing) 2. 예정된 회의 (회의 일시 순, 가까운 순) - 최대 3개 (진행중 회의 우선) - **버튼 표시 조건**: - 진행중 회의: "참여하기" 버튼 (항상 표시) - 예정된 회의 (생성자): "수정" 버튼 (항상 표시) - 예정된 회의 (참여자): - 현재 시간 >= 시작 시간 - 10분: "참여하기" 버튼 활성화 - 현재 시간 < 시작 시간 - 10분: 버튼 비활성화 또는 타이머 표시 - **내 회의록**: - 회의 ID, 제목, 일시, 참여자 수, 상태, 생성일시, 수정일시 - 필터: 사용자가 참여자 또는 생성자 - 정렬: 생성일시 (최근 순) - 최대 3개 - **통계 데이터**: - 예정된/진행중 회의 수 (진행중 회의 수 별도 배지) - 작성중 회의록 수 - **연동**: - Meeting 서비스 (회의 정보, 회의록 정보) #### 에러 처리 - **데이터 로딩 실패**: - 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시 - "다시 시도" 버튼 제공 (새로고침 아이콘) - 로그 기록 및 에러 추적 - **부분 데이터 로딩 실패**: - 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시 - 사용자 경험 최소 방해 - **빈 상태** (각 섹션별): - 예정된/진행중 회의: "예정된 회의가 없습니다" - 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!" - **진행중 회의 참여 실패**: - "회의에 참여할 수 없습니다." 토스트 메시지 - 원인별 안내: - 회의 종료됨: "이미 종료된 회의입니다" - 권한 없음: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조 - 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 - **예정된 회의 접근 제한**: - **시간 제한 (초대받은 참여자)**: - "아직 참여할 수 없습니다. N분 후 참여 가능합니다." 토스트 메시지 - 10분 전부터 참여 버튼 활성화 - 타이머 자동 갱신 (1분 간격) - **권한 제한 (수정 시도)**: - [공통 에러 메시지 - 권한 오류](#권한-오류) 참조 - **회의 수정 실패** (생성자): - "회의 정보를 수정할 수 없습니다." 토스트 메시지 - 원인별 안내: - 이미 시작된 회의: "진행 중인 회의는 수정할 수 없습니다" - 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 - 권한 변경됨: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조 - **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 --- ### 03-회의예약 #### 개요 - **목적**: 예정된 회의 일정 등록 및 참여자 초대 - **관련 유저스토리**: UFR-MEET-010 - **비즈니스 중요도**: 높음 - **접근 경로**: 대시보드 → "회의 예약" 버튼 - **권한**: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨) #### 주요 기능 1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소) 2. 참여자 추가 (이메일 또는 조직도 검색) 3. 회의 안건 사전 입력 (선택) 4. 참여자 초대 이메일 자동 발송 5. 캘린더 연동 #### UI 구성요소 **Mobile (320px~768px)** - **헤더** - 뒤로가기 버튼 - "회의 예약" 타이틀 - "저장" 버튼 (Primary) - **폼 섹션** (스크롤) - **회의 제목** (필수) - 텍스트 입력 필드 - 최대 100자 카운터 - **날짜 및 시간** (필수) - 날짜 선택기 (달력 UI) - 시작 시간 선택기 - 종료 시간 선택기 - 종일 토글 (선택) - **장소** (선택) - 텍스트 입력 필드 - 온라인/오프라인 토글 - 온라인 선택 시: 회의 링크 자동 생성 옵션 - **참여자** (필수, 최소 1명) - 참여자 칩 (제거 가능) - "참여자 추가" 버튼 - 참여자 검색 (이메일 또는 이름) - **안건** (선택) - 다중 라인 텍스트 입력 **Tablet/Desktop (768px+)** - 좌측: 폼 (모바일과 동일) - 우측: 미리보기 패널 (입력 내용 실시간 프리뷰) #### 인터랙션 1. **날짜/시간 선택** - 달력 UI: 과거 날짜 비활성화 - 시간 선택: 30분 단위 드롭다운 - 충돌 감지: 동일 시간대 다른 회의 있을 경우 경고 2. **참여자 추가** - "참여자 추가" 클릭 → 검색 모달 표시 - 실시간 검색 (이름, 이메일, 부서) - 선택된 참여자는 칩 형태로 표시 - 칩의 X 버튼으로 제거 가능 3. **저장 처리** - 필수 필드 검증 - 저장 성공: "회의가 예약되었습니다" 토스트 메시지, 대시보드로 이동 - 초대 이메일 발송 확인 다이얼로그 #### 데이터 요구사항 - **입력**: - 제목(문자열, 최대 100자) - 날짜(Date) - 시작 시간(Time) - 종료 시간(Time) - 장소(문자열, 최대 200자, 선택) - 참여자 목록(이메일 배열) - 안건(문자열, 선택) - **출력**: 회의 ID, 초대 이메일 발송 결과 - **연동**: Meeting 서비스, Notification 서비스 #### 에러 처리 - **필수 필드 누락**: 해당 필드에 빨간색 테두리 및 오류 메시지 - **참여자 0명**: "최소 1명의 참여자를 추가해주세요" - **과거 날짜 선택**: "과거 날짜는 선택할 수 없습니다" - **저장 실패**: "회의 예약에 실패했습니다. 다시 시도해주세요" --- ### 04-템플릿선택 #### 개요 - **목적**: 회의 유형에 맞는 회의록 템플릿 선택 및 커스터마이징 - **관련 유저스토리**: UFR-MEET-020 - **비즈니스 중요도**: 중간 - **접근 경로**: 대시보드 → "새 회의 시작" 또는 회의예약 → "회의 시작" - **권한**: 회의 생성자 전용 #### 주요 기능 1. 사전 정의된 템플릿 선택 (일반, 스크럼, 킥오프, 주간) 2. 템플릿 미리보기 3. 섹션 추가/삭제/순서 변경 4. 커스텀 템플릿 저장 #### UI 구성요소 **Mobile (320px~768px)** - **헤더** - 뒤로가기 버튼 - "템플릿 선택" 타이틀 - "건너뛰기" 텍스트 버튼 (기본 템플릿 사용) - **템플릿 카드 리스트** - 각 템플릿 카드: - 템플릿 이름 및 아이콘 - 간단한 설명 - "선택" 버튼 - "미리보기" 버튼 - **선택된 템플릿 상세** (모달 또는 전체 화면) - 섹션 목록 (드래그하여 순서 변경 가능) - 각 섹션: 이름, 삭제 버튼 - "섹션 추가" 버튼 - "이 템플릿으로 시작" 버튼 (Primary) **Tablet/Desktop (768px+)** - 좌측: 템플릿 목록 - 중앙: 선택된 템플릿 미리보기 - 우측: 커스터마이징 패널 #### 인터랙션 1. **템플릿 선택** - 템플릿 카드 클릭: 해당 템플릿 상세 보기 - "선택" 버튼: 즉시 회의진행 화면으로 이동 2. **커스터마이징** - 섹션 드래그: 순서 변경 (터치/마우스) - 섹션 삭제: 스와이프 또는 삭제 아이콘 - 섹션 추가: "섹션 추가" → 섹션 이름 입력 모달 3. **저장 및 시작** - "이 템플릿으로 시작": 회의진행 화면으로 전환 - 커스텀 템플릿 저장 옵션 (선택) #### 데이터 요구사항 - **입력**: 없음 (또는 회의 ID - 예약된 회의인 경우) - **출력**: 선택된 템플릿 구조 (섹션 배열) - **연동**: Meeting 서비스 #### 에러 처리 - **템플릿 로딩 실패**: "템플릿을 불러올 수 없습니다" + 재시도 버튼 - **빈 템플릿**: "최소 1개의 섹션이 필요합니다" --- ### 05-회의진행 #### 개요 - **목적**: 실시간 회의 진행 및 AI 기반 회의록 자동 작성 - **관련 유저스토리**: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-RAG-010/020, UFR-PART-020, UFR-HOST-010/020, UFR-TERM-010/020 - **비즈니스 중요도**: 높음 (핵심 화면) - **접근 경로**: 대시보드 → "참여하기" 버튼 (페이지 전환) - **권한** (MVP 개선): - **회의 생성자 전용**: 회의 종료, 녹음 제어 (일시정지/재개/종료) - **모든 참여자**: 회의 참여, AI 기반 메모 작성, 용어 확인, 관련 회의록 확인, 중도 퇴장 #### 주요 기능 (MVP 스코프 축소 v1.5.0) 1. 음성 녹음 및 실시간 텍스트 변환 (STT) 2. AI 자동 회의록 작성 (구조화) 3. **AI 기반 메모 작성** (UFR-PART-020): AI가 실시간으로 감지한 주요 내용을 참여자가 선택하여 개인 메모로 저장 4. 전문용어 자동 감지 및 맥락 기반 설명 5. **참고자료 자동 연결** (이전 회의록, 관련 회의록) 6. 참여자 관리 및 초대 기능 7. 회의 진행 시간 표시 **변경사항 (v1.5.0)**: - ✅ 변경: "AI 제안" 탭 → "AI 기반 메모" 탭으로 기능 변경 - ✅ 추가: 개인 메모 입력 및 저장 기능 (각 참여자별 개별 저장) - ✅ 정책: 메모는 회의 종료 전까지만 표시/편집 가능, 다른 참여자 메모는 볼 수 없음 #### UI 구성요소 **전체 레이아웃** - **헤더** (Fixed, 상단) - 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03) - 우측: "회의 종료" 버튼 (민트 그린 테두리) - **메인 콘텐츠 영역: 정보 패널** (탭 구조) - **탭 네비게이션** (4개 탭) - 참여자 (3명) - AI 기반 메모 - 용어 사전 - 관련 자료 (32건) - **참여자 탭** (4명) - 제목: "참여자 (4명)" (동적으로 인원수 업데이트) - **참여자 추가 폼**: - 이메일 입력 필드: placeholder "이메일 주소 입력", form-control 스타일 - "초대" 버튼: btn btn-primary btn-sm - 레이아웃: Flex (gap: 8px), 입력창(flex: 1) + 버튼 - 하단 여백: 16px (margin-bottom: var(--space-md)) - **참여자 목록** (아바타 + 이름) - 김민준 (초록 아바타) - 박서연 (파랑 아바타) - 이준호 (노랑 아바타) - 최유진 (핑크 아바타) - **각 참여자 아이템**: - 컬러 아바타 (avatar-sm: 32x32) - 이름 (text-small font-medium, 14px) - flex layout, 하단 구분선 (마지막 제외) - 상태 표시 제거됨 (발언 중/온라인 등 표시 안 함) - **AI 기반 메모 탭** (UFR-PART-020) - 제목: "AI 기반 메모" - **메모 입력 영역** (상단): - **메모 입력 텍스트박스**: - placeholder: "메모를 입력하세요..." - 다중 행 입력 지원 (textarea) - 배경: 화이트 (#FFFFFF) - 테두리: 회색 실선 (1px solid #E5E7EB) - 테두리 둥글기: 8px - 내부 패딩: 12px - 최소 높이: 80px - **저장 버튼**: - 텍스트: "저장" - 스타일: btn btn-primary (민트 그린) - 위치: 메모 입력창 하단 우측 - 여백: 상단 8px - **구분선**: - 메모 입력 영역 하단에 회색 구분선 (1px solid #E5E7EB) - 상하 여백: 16px - **AI가 감지한 주요 내용 영역** (하단): - **섹션 헤더**: - 텍스트: "AI가 감지한 주요 내용" - 폰트: 16px Bold, gray-800 - 하단 여백: 12px - **주요 내용 리스트**: - **리스트 아이템 디자인**: - 배경: 연한 회색 (#FAFAFA) - 테두리: 회색 점선 (1px dashed #D0D0D0) - 테두리 둥글기: 8px - 내부 패딩: 12px - 아이템 간 여백: 8px - 호버 시: 민트 그린 배경 (#E8F9F3), 커서 포인터 - **아이템 구조**: - 시간 태그 (좌측): - 형식: "[HH:MM]" - 폰트: 12px Bold, 민트 그린 (#4DD5A7) - 배경: 민트 그린 연한 배경 (#E8F9F3) - 패딩: 4px 8px - 테두리 둥글기: 4px - 주요 내용 텍스트 (우측): - 폰트: 14px, gray-700 - flex-grow: 1 - 좌측 여백: 8px - **아이템 예시**: - `[15:32] 예산 책정 관련 결정` - `[15:35] 다음 회의 일정 합의` - `[15:38] API 설계 패턴 논의` - `[15:42] 마이크로서비스 아키텍처 채택` - **클릭 인터랙션**: - 아이템 클릭 시 → 메모 입력창에 "[시간] 내용" 형식으로 자동 추가 - 기존 메모가 있으면 줄바꿈 후 추가 - 입력된 메모는 수정 가능 - **정책**: - 각 참여자별로 개별 저장 (다른 참여자의 메모는 볼 수 없음) - 메모는 회의 종료 전까지만 표시 및 편집 가능 - 회의 종료 시 AI가 회의록 생성할 때 모든 참여자의 메모 참조 - **용어 사전 탭** - 제목: "용어 사전" - 용어 검색 입력 필드 (placeholder: "용어 검색...") - **카드 디자인** (gappa 스타일): - 기본 상태: - 배경: 화이트 (#FFFFFF) - 테두리: 회색 실선 (1px solid #E5E7EB) - 테두리 둥글기: 8px - 내부 패딩: 16px - 카드 간 여백: 12px - 하이라이트 상태 (현재 회의에서 언급된 용어): - 배경: 민트 그린 연한 배경 (#E8F9F3) - 테두리: 민트 그린 실선 (1px solid #4DD5A7) - 호버 시: 회색 배경 (#F9FAFB) - **용어 카드 구조**: - 용어명 (16px bold) + 카테고리 배지 (민트 그린 연한 배경) + 언급 아이콘 (💬, 언급된 경우만) - 정의: 14px 일반 텍스트 (gray-600) - 컨텍스트 (11px, gray-500, 상단 회색 구분선): - "회의에서 N회 언급됨" (현재 회의에서 언급) - "관련 회의록에서 언급됨" (관련 회의록에만 언급) - "회의에서 언급됨 (HH:MM)" (시간 정보 포함) - "{관련 회의록명} (날짜)에서 {컨텍스트 정보}" (특정 관련 회의록 정보) - **용어 카드 예시**: - AI + 기술 배지 + 💬 - 정의: Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다. - 컨텍스트: "회의에서 5회 언급됨" - API Gateway + 아키텍처 배지 + 💬 - 정의: 클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버 - 컨텍스트: "API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정" - 마이크로서비스 + 아키텍처 배지 (하이라이트 없음) - 정의: 애플리케이션을 작고 독립적인 서비스로 분할하는 소프트웨어 아키텍처 스타일 - 컨텍스트: "관련 회의록에서 언급됨" - MVP + 방법론 배지 + 💬 - 정의: Minimum Viable Product의 약자 - 컨텍스트: "회의에서 언급됨 (14:23)" - RESTful API + 기술 배지 + 💬 - 정의: REST 아키텍처 스타일로 작성한 웹 서비스 API 설계 방식 - 컨텍스트: "회의에서 3회 언급됨" - 카드 클릭 시: 상세 설명 모달 표시 - **관련 자료 탭** (32건) - 제목: "관련 회의록 (32건)" - **카드 디자인** (gappa 스타일): - 배경: 회색 (#F5F5F5) - 테두리: 회색 점선 (1px dashed #9CA3AF) - 테두리 둥글기: 8px - 내부 패딩: 16px - 카드 간 여백: 12px - 호버 시: 회색 배경 (#F3F4F6) - 구조: 헤더 + 메타정보 + 요약 텍스트 - **관련 회의록 카드 구조**: - 헤더: 회의록 제목 (16px bold) - 메타정보: 날짜 + 관련도 (12px, gray-500) - 요약: 회의록 핵심 내용 또는 관련 컨텍스트 (14px 일반, gray-600) - **관련 회의록 예시**: - "2024년 4분기 제품 기획 회의" - 메타정보: 2024-10-15 | 관련도 92% - 요약: 신규 회의록 서비스의 MVP 범위와 일정을 논의. AI 기반 회의 요약 기능의 우선순위를 높게 설정. - "API 설계 리뷰 회의" - 메타정보: 2024-09-28 | 관련도 78% - 요약: RESTful API 설계 패턴과 API Gateway 채택. 마이크로서비스 간 통신 방식 결정. - "스프린트 회고 회의" - 메타정보: 2024-10-01 | 관련도 65% - 요약: 협업 도구 사용성 개선과 MVP 개발 프로세스 최적화 논의. - 카드 클릭 시: **새 탭으로 열기** (target="_blank") **반응형 디자인** - **Mobile (320px~768px)** - 헤더: 고정 상단, 좁은 너비 - 메인 콘텐츠: 전체 너비 사용 - 탭 콘텐츠: 세로 스크롤 - 하단 버튼 영역: 고정 하단 - **Desktop (768px+)** - 헤더: 고정 상단, 넓은 너비 - 메인 콘텐츠: 최대 너비 제한 없이 반응형 - 탭 콘텐츠: 더 넓은 영역 활용 - 하단 버튼 영역: 고정 하단 #### 인터랙션 1. **탭 전환** - **참여자 탭**: 현재 회의 참여자 목록 표시 (4명) 및 참여자 추가 기능 - **참여자 추가 폼** (상단): - 이메일 입력 필드 (form-control 스타일, placeholder: "이메일 주소 입력") - "초대" 버튼 (btn btn-primary btn-sm) - 이메일 입력 후 "초대" 클릭 시: 1. 이메일 유효성 검증 (정규식: /^[^\s@]+@[^\s@]+\.[^\s@]+$/) 2. 빈 값 체크: 빈 값이면 "이메일 주소를 입력해주세요" 경고 토스트 3. 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트 4. 유효한 이메일: "{email}에게 초대 링크가 전송되었습니다" 성공 토스트 5. 입력창 초기화 (value = '') 6. 실제 구현 시 서버 API 호출 (/api/meetings/invite) - **참여자 목록** (하단): - 각 참여자: 아바타 + 이름 - 상태 표시 없음 (발언 중/온라인 등 제거) - 참여자 수 동적 업데이트 (초대 성공 시) - **AI 기반 메모 탭** (UFR-PART-020): AI가 감지한 주요 내용을 참여자가 선택하여 개인 메모로 저장 - **메모 작성 및 저장**: - 메모 입력창에 자유롭게 메모 작성 가능 - "저장" 버튼 클릭 시 개인 메모로 저장 (각 참여자별 개별 저장) - 저장 성공 시 "{n}개의 메모가 저장되었습니다" 성공 토스트 - 저장 실패 시 "메모 저장에 실패했습니다" 오류 토스트 - **AI가 감지한 주요 내용**: - 음성→텍스트 변환 후 AI가 실시간으로 회의 내용 분석 - **중요한 내용으로 판단된 경우에만** 주요 내용 항목 표시 - 각 항목: "[시간] 주요 내용 텍스트" 형식 (예: "[15:32] 예산 책정 관련 결정") - 실시간 업데이트: 새로운 항목은 하단에 추가 - 항목 클릭 시: 1. 메모 입력창에 "[시간] 내용" 형식으로 자동 추가 2. 기존 메모가 있으면 줄바꿈 후 추가 3. 입력된 메모는 수정 가능 (자동/수동 구분 표시) 4. 저장 버튼 활성화 - **정책**: - 메모는 회의 종료 전까지만 표시/편집 가능 - 각 참여자의 메모는 다른 참여자에게 보이지 않음 - 회의 종료 시 AI가 모든 참여자의 메모를 참조하여 회의록 생성 - **용어 사전 탭**: 회의에서 언급된 전문용어 설명 - **용어 검색 기능**: - 검색 입력창 (placeholder: "용어 검색...", form-control 스타일) - 검색 버튼 (btn btn-primary btn-sm) - Enter 키 지원 - 검색 동작: 1. 용어명과 정의 모두 검색 2. 일치하는 용어만 표시, 나머지는 숨김 3. 검색 결과에 하이라이트 효과 적용 4. 검색 결과 없으면 전체 목록 다시 표시 5. 입력창이 비어있으면 전체 목록 표시 - 용어 카드: 용어명 + 카테고리 배지 + 간단한 정의 - 카드 클릭 → 확장하여 상세 설명 표시 - 상세 설명: 이 회의에서의 의미, 관련 회의록 링크 - **관련 자료 탭**: AI가 찾은 관련 회의록 (32건) - 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기** - **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림 - 관련도 표시: 퍼센트 또는 별점으로 시각화 2. **회의 종료** - 헤더의 "회의 종료" 버튼 클릭 - 확인 다이얼로그 표시: "회의를 종료하시겠습니까?" - 확인 → 회의 종료 처리 및 07-회의종료.html로 이동 3. **실시간 업데이트** - STT 음성 인식 결과 실시간 반영 (3-5초 주기) - AI 제안 실시간 업데이트 - 용어 사전 자동 업데이트 (새로운 전문용어 감지 시) - 관련 회의록 목록 동적 갱신 #### 데이터 요구사항 - **입력**: - 회의 ID - 오디오 스트림 (실시간 STT용) - 참여자 초대 이메일 - **출력**: - 실시간 텍스트 변환 결과 (STT) - **AI가 감지한 주요 내용 목록** (시간 + 내용) - **개인 메모** (각 참여자별 개별 저장) - **전문용어 및 설명** (용어 사전) - **관련 회의록 목록** (32건, 관련도 포함) - 참여자 목록 - **연동**: - STT 서비스 (UFR-AI-010) - AI 서비스 (주요 내용 감지, UFR-AI-040) - RAG 서비스 (관련 회의록 검색, 전문용어 자동 감지) - PARTICIPANT 서비스 (메모 저장, UFR-PART-020) #### 에러 처리 - **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크 - **STT 실패**: "음성 인식에 실패했습니다" 토스트 + 재시도 안내 - **AI 주요 내용 감지 실패**: "AI 주요 내용 감지에 실패했습니다" 토스트 (회의 계속 진행 가능) - **메모 저장 실패**: "메모 저장에 실패했습니다" 토스트 + 재시도 버튼 - **용어 사전 로드 실패**: "용어 사전을 불러올 수 없습니다" 메시지 표시 - **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시 - **참여자 초대 실패**: "초대 링크 전송에 실패했습니다" 토스트 + 재시도 버튼 - **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼 --- ### 07-회의종료 #### 개요 - **목적**: 회의 종료 후 AI 요약 내용 확인 및 다음 단계 선택 - **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-010, UFR-AI-020, UFR-AI-036 - **비즈니스 중요도**: 높음 - **접근 경로**: 회의진행 → "회의 종료" 버튼 - **권한**: 회의 생성자 전용 - **화면 정책**: **확인 전용 화면 (편집 불가)** - 모든 내용은 읽기 전용 - 안건 내용 수정 불가 - Todo 수정 불가 - 확인 후 다음 단계 선택만 가능 #### 주요 기능 1. 회의 통계 표시 (시간, 참여자, 발언 횟수 등) 2. 주요 키워드 클라우드 3. **안건별 AI 요약 전체 표시** (신규) - 안건별 AI 한줄 요약 (30자 이내, 편집 불가) - 안건별 상세 요약 정리 - 안건별 Todo 자동 추출 결과 4. **3가지 선택 옵션 제공** (신규) - 옵션 1: 회의록 수정 화면으로 이동 - 옵션 2: 바로 최종 확정 - 옵션 3: 대시보드로 이동 #### UI 구성요소 **Mobile (320px~768px)** - **헤더** - "회의가 종료되었습니다" 메시지 - 회의 제목 - **통계 카드** - 회의 총 시간 - 참여자 수 - 주요 키워드 (태그 클라우드) - **안건별 AI 요약 섹션** (신규) - **안건 카드** (안건 개수만큼 반복): - **안건 제목** (H4, Bold) - **AI 한줄 요약** (읽기 전용, 회색 배경 박스) - 30자 이내 간결한 표현 - 🔒 "편집 불가" 아이콘 표시 - 민트 그린 좌측 액센트 라인 - **상세 요약 정리** (읽기 전용) - 발언자별 의견 - 결정 사항 - 보류 사항 - **Todo 자동 추출 결과** (있는 경우) - Todo 항목 리스트 - 담당자, 마감일, 우선순위 표시 - 읽기 전용 (체크박스 비활성화) - **3가지 선택 옵션** (하단 액션 바) - **옵션 1**: "회의록 수정" 버튼 (Secondary) - 회의록 수정 화면(11-회의록수정)으로 이동 - 회의록 상태: 작성중 - **옵션 2**: "바로 최종 확정" 버튼 (Primary, 강조) - 확인 다이얼로그: "AI가 정리한 내용 그대로 최종 확정하시겠습니까?" - 모든 안건 자동 검증 완료 처리 - 회의록 상태: 확정완료 - 참여자에게 확정 알림 발송 - **옵션 3**: "대시보드로 이동" 버튼 (Ghost) - 회의록 상태: 작성중 (추후 편집 가능) - 대시보드로 이동 **Tablet/Desktop (768px+)** - 상단: 통계 카드 (Grid Layout) - 중앙: 안건별 AI 요약 섹션 (2열 그리드) - 하단: 3가지 선택 옵션 버튼 (가로 배치) #### 인터랙션 1. **통계 표시** - 애니메이션 효과로 숫자 카운트업 - 차트는 페이드인 효과 2. **안건별 AI 요약 확인** (읽기 전용) - **안건 카드 확장/축소**: - 초기: 안건 제목 + AI 한줄 요약만 표시 - 클릭 시: 상세 요약 + Todo 전체 펼침 - **편집 불가 안내**: - AI 한줄 요약 영역에 🔒 아이콘 표시 - 호버 시: "이 내용은 편집할 수 없습니다" 툴팁 - **Todo 확인**: - 체크박스 비활성화 (disabled) - 읽기 전용 표시 3. **다음 단계 선택** - **옵션 1: 회의록 수정** - 11-회의록수정.html로 이동 - URL 파라미터: meetingId - 회의록 상태: 작성중 - **옵션 2: 바로 최종 확정** (UFR-MEET-050 시나리오 2) - 확인 다이얼로그 표시: "바로 최종 확정하시겠습니까? AI가 정리한 내용 그대로 확정됩니다." - 확인 시: - 모든 안건 검증률 100% 자동 설정 - 안건별 검증완료 처리 - 회의록 상태: "작성중" → "확정완료"로 변경 - 확정 시간 기록 - 참여자에게 확정 알림 발송 - 성공 토스트: "회의록이 최종 확정되었습니다" - 10-회의록상세조회.html로 이동 - **시나리오 2 특징 (바로 확정)**: - 회의록 수정 단계를 건너뜀 - AI 생성 내용을 그대로 확정 - 모든 안건이 자동으로 검증완료 처리됨 - 확정 후에도 회의 생성자는 수정 가능 (잠금 해제 필요) - **옵션 3: 대시보드로 이동** - 회의록 상태: 작성중 - 02-대시보드.html로 이동 - 추후 회의록 목록에서 편집 가능 #### 데이터 요구사항 - **입력**: 회의 ID - **출력**: - 회의 통계 (시간, 참여자 수, 발언 통계, 키워드) - **안건별 AI 요약 데이터**: - 안건 제목 - AI 한줄 요약 (30자 이내) - 상세 요약 정리 (논의 주제, 발언자별 의견, 결정 사항, 보류 사항) - 안건별 Todo 목록 (제목, 담당자, 마감일, 우선순위) - 회의록 상태 (작성중/확정완료) - **연동**: Meeting 서비스, AI 서비스 #### 에러 처리 - **통계 생성 실패**: "통계를 생성할 수 없습니다" + 건너뛰기 옵션 - **AI 요약 생성 실패**: "AI 요약을 생성할 수 없습니다. 회의록 수정 화면에서 직접 작성해주세요" - **바로 확정 실패**: "회의록 확정에 실패했습니다. 다시 시도해주세요" - **네트워크 오류**: 자동 재시도 3회, 실패 시 재시도 버튼 제공 --- ### 10-회의록상세조회 #### 개요 - **목적**: 지난 회의록의 전체 내용 및 상세 정보 확인 - **관련 유저스토리**: UFR-MEET-047, UFR-AI-040, UFR-MEET-048 - **비즈니스 중요도**: 중간 - **접근 경로**: 대시보드 → "내 회의록" 항목 클릭 - **권한**: 모든 회의 참여자 (조회 전용) #### 주요 기능 (MVP 스코프 축소 v1.5.0) 1. 회의 기본 정보 표시 2. **안건별 AI 요약 표시** (안건 최상단) 3. 안건별 상세 내용 표시 4. **참고자료 표시** (안건 하단) 5. **Todo 단순 조회** (UFR-MEET-047): 제목, 담당자만 표시 (D-day, 우선순위 라벨 제거) 6. 첨부파일 다운로드 7. 회의록 수정/공유 액션 **변경사항 (v1.5.0)**: - ❌ 제거: Todo 관리 화면 연동 링크 (화면 자체가 제거됨) - ❌ 제거: Todo D-day 라벨, 우선순위 배지 표시 - ✅ 변경: Todo는 단순 조회만 가능 (제목 + 담당자 + 마감일만 표시) - ✅ 변경: "수정" 버튼을 회의 제목 우측으로 이동 #### UI 구성요소 **Mobile (320px~768px)** - **헤더** - 뒤로가기 버튼 - 회의 제목 - "수정" 버튼 (회의 제목 우측, 아이콘 또는 텍스트 버튼) - 메뉴 버튼 (삭제, 공유 등) - **기본 정보 카드** - 회의 일시 - 참여자 아바타 및 이름 (역할 구분) - 회의 장소 - 회의록 상태 배지 (작성중/확정완료) - 작성자 및 최종 수정 시간 - **탭 네비게이션** (상단, Fixed) - "대시보드" 탭 (기본 활성) - "회의록" 탭 - **회의록 탭 콘텐츠** (안건별 구조) - 각 안건: - 안건 제목 - 검증 완료 배지 (검증된 경우) - **AI 회의 내용 요약 영역** (안건 최상단, 강조 박스) - 요약 아이콘 (💡) - AI 자동 생성 요약 (2-3문장) - 요약 생성/수정 시간 - "수정" 버튼 (권한 있는 경우) - 안건 내용 (마크다운 렌더링) - **참고자료 영역** (안건 하단, 별도 영역) - "참고자료" 라벨 - 관련 회의록 링크 리스트 (최대 3개): - 링크 아이콘 (📄) - 회의 제목 (클릭 가능) - 회의 날짜 - 관련도 표시 (퍼센트, 색상 코딩) - 1-2줄 요약 - "더보기" 버튼 (3개 초과 시) - 접기/펼치기 버튼 (선택) - **대시보드 탭 콘텐츠** (11-회의록대시보드.html 구조 참조) - **핵심내용 섹션** (💡) - 번호 매김된 핵심 포인트 (4-5개) - 주요 키워드 태그 클라우드 - 회의 통계 (참여자 수, 시간, 발언 횟수, 주요 의제 수) - **결정사항 섹션** (✅) - 결정사항 카드 리스트 - 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명 - **Todo 진행상황 섹션** (📋) - MVP 스코프 축소 - **단순 조회만 제공** (UFR-MEET-047) - Todo 리스트: - 각 Todo: 제목 + 담당자 + 마감일만 표시 - ❌ 제거: D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터 - ❌ 제거: Todo 관리 화면 연동 (클릭 액션 없음) - **참고자료 섹션** (📚) - 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지) - 각 참고자료 카드: - 아이콘 + 제목 + 메타정보 (날짜, 작성자) - 관련도 점수 배지 (92%, 88% 등) - 2-3줄 요약 - **Todo 섹션** (단순 조회) - MVP 스코프 축소 - Todo 항목 리스트: - Todo 내용 (제목) - 담당자 이름 - 마감일 - ❌ 제거: 체크박스, 우선순위 배지, D-day 라벨 - **첨부파일 섹션** - 파일 아이콘 + 파일명 - 다운로드 버튼 - **하단 액션 바** (Fixed) - MVP 스코프 축소 - "공유" 버튼 - ❌ 제거: "수정" 버튼 (헤더로 이동) **Tablet/Desktop (768px+)** - **상단**: 탭 네비게이션 - 대시보드 (기본 활성) - 회의록 - **메인 영역**: - 회의록 탭: 전체 회의록 내용 (안건별 구조) - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조) #### 인터랙션 1. **탭 전환** - "회의록" 탭: 전체 회의록 내용 표시 (안건별 구조) - "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시 - 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링 2. **회의록 탭 인터랙션** - **안건 네비게이션**: 안건 제목 클릭 → 해당 안건으로 스크롤 - **접기/펼치기**: 긴 내용은 초기 접힌 상태, 클릭으로 펼침 - **AI 요약 편집**: - "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드 - 수정 내용 자동 저장 (30초 간격) - 실시간 동기화 - **참고자료 링크**: - 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기 - 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색) - "더보기" 클릭 → 전체 참고자료 목록 모달 3. **대시보드 탭 인터랙션** - MVP 스코프 축소 - **핵심내용 섹션**: - 키워드 태그 클릭 → 해당 키워드 관련 안건으로 스크롤 - 통계 항목 클릭 → 상세 정보 툴팁 표시 - **결정사항 섹션**: - 결정사항 카드 클릭 → 회의록 탭의 해당 안건으로 이동 - 배경 설명 접기/펼치기 - **Todo 진행상황** (단순 조회만): - ❌ 제거: 필터 탭, 진행률 바, Todo 관리 화면 연동 - Todo는 읽기 전용으로만 표시 (클릭 액션 없음) - **참고자료 섹션**: - 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지) - 참고자료 카드 클릭 → 해당 문서로 이동 - 관련도 점수: 배지로 표시 (92%, 88% 등) 4. **Todo 인터랙션** - MVP 스코프 축소 - ❌ 제거: Todo 체크박스, Todo 관리 화면 연동 - Todo는 단순 조회만 가능 (클릭 액션 없음) 5. **첨부파일 다운로드** - 파일명 클릭: 다운로드 시작 - 진행 상황 표시 6. **수정 및 공유** - "수정" 버튼: 회의록수정 화면으로 이동 - "공유" 버튼: 회의록공유 화면으로 이동 #### 데이터 요구사항 - **입력**: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인) - **출력**: - **회의 기본 정보**: 제목, 일시, 참여자, 장소, 상태, 작성자, 수정 시간 - **안건별 AI 요약**: 자동 생성 요약, 수정 이력 - **안건별 내용**: 마크다운 형식 - **참고자료 목록**: - 관련 회의록 (제목, 날짜, 관련도, 요약) - 프로젝트 문서 (제목, 작성자, 관련도) - 이슈 트래커 링크 - 위키 페이지 링크 - **대시보드 데이터** (대시보드 탭 선택 시): - 핵심내용 (4-5개 포인트) - 주요 키워드 - 회의 통계 (참여자 수, 시간, 발언 횟수, 의제 수) - 결정사항 리스트 (결정 내용, 결정자, 시간, 배경) - Todo 진행상황 (담당자별 그룹, 진행률) - **Todo 목록 및 진행 상황** - **첨부파일 목록** - **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040) #### 에러 처리 - **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼 - **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (안건 내용은 정상 표시) - **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" (빈 상태 표시) - **대시보드 데이터 로딩 실패**: "대시보드를 불러올 수 없습니다" + 재시도 버튼 - **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지 - **첨부파일 다운로드 실패**: "파일 다운로드에 실패했습니다" --- ### 11-회의록수정 #### 개요 - **목적**: 지난 회의록 조회 및 수정 - **관련 유저스토리**: UFR-MEET-055, UFR-AI-040, UFR-COLLAB-030 - **비즈니스 중요도**: 중간 - **접근 경로**: 10-회의록상세조회 → 하단 액션 바 "수정" 버튼 클릭 - **권한 제어**: - **검증완료 전**: 모든 참여자가 수정 가능 - **검증완료 후**: 회의 생성자만 수정 가능 (참여자는 "수정" 버튼 비활성화) #### 주요 기능 (MVP 스코프 축소 v1.5.2) 1. 회의 기본 정보 표시 및 수정 - 회의 제목: 수정 가능 - 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능) - 참여자 관리: 회의 생성자만 추가/삭제 가능 2. **회의록 내용 수정 (안건별)** - 용어 변경: 섹션 → 안건 3. **AI 요약 표시 및 재생성 (안건별, UFR-AI-036)** - AI 한줄 요약 표시 (30자 이내, 읽기 전용) - 텍스트 편집 영역에서 안건 내용 수정 가능 - "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 한줄 요약만 재생성 (2-5초 처리) - 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영 4. **참고자료 편집** (추가/제거) 5. **Todo 단순 조회** (제목 + 담당자 + 마감일만 표시) 6. **안건별 검증 완료 체크박스 (UFR-COLLAB-030)** - 회의 생성자: 검증 완료 체크박스 활성화, 잠금 해제 후 수정 가능 - 참여자: 검증완료 안건은 읽기 전용 7. 자동 저장 (30초 간격) 8. 수정 이력 관리 9. 상태 변경 (검증완료 → 작성중으로 자동 변경) **변경사항 (v1.5.2)**: - ✅ 명칭 변경: "AI 상세 요약" → "AI 요약" - ✅ 기능 통합: AI 재생성 버튼 클릭 시 텍스트 편집 영역 내용 기반으로 한줄 요약 생성 (UFR-AI-036) - ❌ 제거: AI 상세 요약 및 한줄 요약 분리 표시 (한줄 요약만 표시) - ❌ 제거: 실시간 협업 표시 ("편집 중" 표시 제거) - ❌ 제거: Todo 편집 기능 (체크박스, 담당자/마감일/우선순위 변경, 추가/삭제) - ❌ 제거: 검증률 표시 및 최종 확정 버튼 - ✅ 정책: Last Write Wins (마지막 저장 우선) 적용 #### UI 구성요소 **Mobile (320px~768px)** - **헤더** - 뒤로가기 버튼 (10-회의록상세조회로 이동) - "회의록 수정" 타이틀 - "저장" 버튼 (Primary) - 자동 저장 인디케이터 ("저장됨", "저장 중...") - **회의 기본 정보 영역** - 회의 제목: 편집 가능 (텍스트 필드) - 회의 일시: 읽기 전용 (📅 아이콘 + 날짜/시간 표시) - 회의 장소: 읽기 전용 (📍 아이콘 + 장소명) - 참여자 목록: - 회의 생성자: 추가/삭제 가능 (05-회의진행 화면과 동일한 UI) - 참여자: 읽기 전용 표시 - 각 참여자: 아바타 + 이름, 삭제(×) 버튼 (생성자는 삭제 불가) - "참여자 추가" 버튼 (이메일 입력 + 초대) - 회의록 상태 배지 (자동 관리) - **편집 화면** (MVP 스코프 축소) - **안건별 편집 영역** (용어 변경: 섹션 → 안건) - 각 안건: - **안건 헤더** - 안건 제목 (H4, Bold) - 검증 상태 배지 (검증완료/미검증) - ❌ 제거: "편집 중" 표시 (실시간 협업 기능 제거) - **AI 요약** (읽기 전용, UFR-AI-036) - 💡 "AI 요약" 레이블 - AI 한줄 요약 표시 (30자 이내) - 읽기 전용 영역 (회색 배경, 민트 그린 좌측 액센트 라인) - 호버 시: "이 내용은 편집할 수 없습니다" 툴팁 - **텍스트 편집 영역** - 안건 내용 편집 필드 (textarea) - 논의 주제, 발언자별 의견, 결정 사항, 보류 사항 등 자유 작성 - "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성 - 마지막 수정 시간 표시 - **참고자료 편집 영역** - 기존 참고자료 목록 (제거 버튼 포함) - "참고자료 추가" 버튼 - 회의록 검색 및 선택 UI - **Todo 섹션 단순 조회** (편집 불가) - Todo 목록 표시 (읽기 전용) - 각 Todo 항목: - Todo 제목 - 담당자 - 마감일 - ❌ 제거: 체크박스, 우선순위 배지, D-day 라벨, 편집/삭제 버튼 - **안건별 검증 영역** (UFR-COLLAB-030) - **회의 생성자 화면**: - 검증 완료 체크박스 (활성화) - "잠금 해제" 버튼 (검증완료 안건만 표시) - **참여자 화면**: - 🔒 "읽기 전용" 배지 (검증완료 안건) - 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)" - 자동 저장 상태 표시 ("저장됨", "저장 중...") **Tablet/Desktop (768px+)** - **헤더**: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터) - **메인 영역**: - 회의 기본 정보 영역 (Mobile과 동일) - 편집 화면 (안건별 편집, AI 한줄/상세 요약, 참고자료, Todo, 안건별 검증) - **우측 패널** (선택사항): - 수정 이력 (v2.0 고도화 예정) - 미리보기 #### 인터랙션 1. **화면 진입** - 10-회의록상세조회 → "수정" 버튼 클릭 - 권한 확인: 검증완료 후에는 회의 생성자만 접근 가능 - 바로 편집 모드로 시작 2. **내용 수정** - 텍스트 영역 클릭: 포커스 및 편집 가능 - 자동 저장: 30초 간격, 인디케이터 표시 - 수동 저장: "저장" 버튼 클릭 3. **AI 한줄 요약 확인 (UFR-AI-036)** - MVP 스코프 축소 - **읽기 전용 표시**: - 🔒 아이콘으로 편집 불가 명시 - 회색 배경 + 민트 그린 좌측 액센트 라인 - **호버 인터랙션**: - 툴팁 표시: "이 내용은 편집할 수 없습니다. 회의 종료 시 1회만 생성됩니다." - **위치**: 각 안건 최상단 (안건 제목 바로 아래) - ❌ 제거: "AI 재생성" 버튼 (한줄 요약은 회의 종료 시 1회만 생성) 4. **AI 상세 요약 편집** - MVP 스코프 축소 - 요약 텍스트 필드 클릭: 직접 수정 가능 - "AI 재생성" 버튼 클릭: - 현재 안건 내용 기반으로 **상세 요약만** 재생성 (한줄 요약 제외) - 로딩 인디케이터 표시 - 생성 완료 시 자동 업데이트 - 자동 저장 (30초 간격) 5. **안건별 검증 완료 체크박스 (UFR-COLLAB-030)** - MVP 스코프 축소 - **회의 생성자 권한**: - 검증 완료 체크박스 클릭: - 체크: 안건 검증 완료 처리 (배지 "검증완료"로 변경) - 언체크: 미검증 상태로 변경 - "잠금 해제" 버튼 클릭 (검증완료 안건만 표시): - 확인 다이얼로그: "이 안건의 잠금을 해제하시겠습니까?" - 확인 시: 안건 검증 완료 체크 해제 → 편집 가능 상태로 변경 - **참여자 화면**: - 검증완료 안건: 🔒 "읽기 전용" 배지 표시 - 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)" - 모든 입력 필드 비활성화 (disabled) - ❌ 제거: 검증률 계산 및 표시, "최종 확정" 버튼 6. **참고자료 편집** - "참고자료 추가" 버튼 클릭: - 회의록 검색 모달 표시 - 제목, 날짜, 키워드로 검색 - 선택된 회의록 추가 - 제거 버튼 (X): 참고자료 목록에서 제거 - 순서 변경: 드래그하여 순서 조정 (선택) 7. **Todo 섹션 단순 조회** - MVP 스코프 축소 - ❌ 제거: Todo 편집/추가/삭제 기능 전체 제거 - Todo는 읽기 전용으로만 표시 (제목 + 담당자 + 마감일) - 모든 사용자 (생성자 포함)에게 조회만 가능 8. **상태 변경** - MVP 스코프 축소 - 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경 - ❌ 제거: "확정완료"로 변경 제안 (검증률 기능 제거로 인해) 9. **저장 로직** - MVP 스코프 축소 - **"저장" 버튼 클릭 시**: - 검증완료된 안건: 저장 스킵 - 미검증 안건: 저장 진행 - **저장 결과 알림**: - "N개 안건이 저장되었습니다" - "M개 안건은 검증완료 상태로 저장되지 않았습니다" - 저장 불가 안건 목록 표시 - **자동 저장** (30초 간격): - 미검증 안건만 자동 저장 - 검증완료 안건은 자동 저장 스킵 10. **안건 기반 충돌 방지 (UFR-COLLAB-030)** - MVP 스코프 축소 - **안건 기반 충돌 방지 메커니즘**: - **다른 안건 동시 편집**: 충돌 없음 - 참여자 A가 안건 1 편집 - 참여자 B가 안건 2 편집 가능 - 양쪽 모두 정상 저장 - **동일 안건 검증 완료 체크로 충돌 방지**: - 검증완료된 안건: 편집 불가 (회의 생성자만 잠금 해제 가능) - 미검증 안건: Last Write Wins (마지막 저장 우선) - **동일 필드 동시 수정**: Last Write Wins - 마지막에 저장된 변경 사항이 적용 - 별도 경고 없이 덮어쓰기 - ❌ 제거: 실시간 "편집 중" 표시 - ❌ 제거: 충돌 경고 모달 및 선택 옵션 #### 데이터 요구사항 (MVP 스코프 축소) - **입력**: - 회의록 ID (조회) - 수정 내용 (안건 ID, 내용) - 용어 변경: 섹션 → 안건 - **AI 한줄 요약** (읽기 전용, 입력 불가) - **AI 상세 요약 수정** (안건 ID, 요약 내용) - **참고자료 변경** (추가/제거할 회의록 ID) - **안건별 검증 상태** (안건 ID, 검증 여부) - **출력**: - 회의록 목록 (필터/정렬/검색 결과) - 수정 결과 (성공/실패) - **AI 한줄 요약** (회의 종료 시 생성, 편집 불가) - **AI 상세 요약 재생성 결과** (한줄 요약 제외) - 수정 이력 (누가, 언제, 무엇을) - ❌ 제거: 검증률 출력 - **연동**: Meeting 서비스, AI 서비스 (UFR-AI-010, UFR-AI-036, UFR-AI-040), COLLAB 서비스 (UFR-COLLAB-030) #### 에러 처리 (MVP 스코프 축소) - **권한 없음**: "본인이 작성한 회의록만 수정할 수 있습니다" - **자동 저장 실패**: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다" - **AI 요약 재생성 실패**: "요약 생성에 실패했습니다. 수동으로 작성해주세요" - **참고자료 검색 실패**: "회의록을 검색할 수 없습니다" - **검증완료 안건 저장 시도**: - 저장 결과 알림: "N개 안건이 저장되었습니다. M개 안건은 검증완료 상태로 저장되지 않았습니다" - 저장 불가 안건 목록 표시 - **삭제 실패**: "회의록 삭제에 실패했습니다" - ❌ 제거: 충돌 경고 모달 (Last Write Wins 적용으로 인해) --- ### 12-회의록목록조회 #### 개요 - **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공 - **관련 유저스토리**: UFR-MEET-046 (회의록목록조회) - **비즈니스 중요도**: 높음 - **프로토타입**: design/uiux/prototype/12-회의록목록조회.html - **데이터 소스**: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터) - **접근 경로**: - 대시보드 → "내 회의록" 전체 보기 - 하단 네비게이션 → "회의록" 메뉴 - **권한**: 모든 회의 참여자 (본인이 참여한 회의록만 조회) #### 데이터 아키텍처 - **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열 - 총 30개 샘플 데이터 (작성중 13개, 확정완료 17개) - 각 회의록 객체 구조: id, meetingId, title, date, time, status, participants, participantCount, lastUpdated, sections, todos, completionRate - **뷰 레이어**: 12-회의록목록조회.html - JavaScript 기반 동적 렌더링 - renderMeetings() 함수: 필터링/정렬/검색 로직 처리 후 목록 생성 - createMeetingCard() 함수: 개별 회의록 카드 HTML 생성 - **렌더링 방식**: - 페이지 로드 시: DOMContentLoaded 이벤트에서 renderMeetings() 호출 - 초기 표시: 10개 회의록 (displayedCount 변수로 관리) - 추가 로딩: "10개 더보기" 버튼 클릭 시 10개씩 증가 - 필터/정렬/검색 시: 즉시 renderMeetings() 재호출하여 목록 갱신 #### 주요 기능 1. **회의록 목록 조회** (참여/생성한 회의록) 2. **필터링 기능**: - 참여 유형: 참여한 회의, 생성한 회의 - 상태: 전체, 작성중, 확정완료 3. **정렬 기능**: - 최근수정순 (수정 일시 기준, 최근 순) - 기본값 - 최근회의순 (회의 일시 기준, 최근 순) - 제목순 (가나다순) 4. **검색 기능**: - 제목, 참여자, 키워드로 통합 검색 - 실시간 검색 결과 업데이트 5. **페이지네이션**: - 초기 10개 회의록 표시 - "10개 더보기" 버튼으로 추가 로딩 6. 회의록 상세 조회 (항목 클릭 시) #### UI 구성요소 **Mobile (320px~768px)** - **헤더** (Fixed, 상단) - 뒤로가기 버튼 - "내 회의록" 타이틀 - 검색 아이콘 (검색창 포커스) - **필터 및 정렬** (상단, 스크롤 가능) - **필터 행 1** (2컬럼 그리드): - 상태 필터 (Select) - 옵션: 전체, 작성중, 확정완료 - 기본값: 전체 - 정렬 (Select) - 옵션: 최신순, 회의일시순, 제목순 - 기본값: 최신순 - **참여 유형 필터** (탭 형식, 선택): - 전체 (기본 선택) - 참여한 회의 - 생성한 회의 - **검색 영역** - 검색 입력 필드 - Placeholder: "회의 제목, 참여자, 키워드 검색" - 실시간 검색 (입력 시 즉시 필터링) - **통계 정보** (카드, 선택) - 3컬럼 그리드: - 전체: {count}개 - 작성중: {count}개 - 확정완료: {count}개 - 구분선으로 시각적 분리 - **회의록 목록** (스크롤 가능) - 각 회의록 항목 (meeting-item): - **좌측 영역**: - 회의 제목 (H5, 볼드) - **생성자 표시**: 현재 사용자가 회의 생성자인 경우 👑 아이콘 표시 (16px, title="생성자") - 메타정보 (Caption, 회색): - 회의 일시 (날짜 + 시간) · 참여자 수 - 검증완료율 (작성중 상태일 때만): "✓ {completionRate}% 검증완료" 배지 - 최종 수정 시간 (Caption, 회색): - 상대 시간 표시 ("1시간 전", "어제", "3일 전") - **우측 영역**: - 상태 배지: - "확정완료" (초록색 배지) - "작성중" (노란색 배지) - 조회 권한 표시 (조회 전용인 경우): - "조회 전용" (Caption, 회색) - 빈 상태: - 검색 결과 없음: "검색 결과가 없습니다" - 회의록 없음: "회의록이 없습니다" **Mobile (320px~768px)** - **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (회의록 활성) **Tablet/Desktop (768px+)** - **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (회의록 활성) - **메인 콘텐츠** (중앙) - 필터 및 정렬 (상단, 가로 배치) - 참여 유형 필터 (탭 또는 버튼 그룹) - 검색 영역 - 통계 정보 (3컬럼 카드) - 회의록 목록 (Grid 또는 List Layout) - 각 카드: 호버 시 그림자 증가, 약간 상승 #### 인터랙션 1. **필터링** - 상태 필터 변경 → 즉시 목록 재렌더링 - 참여 유형 탭 선택 → 해당 유형 회의록만 표시 - 필터 조합 가능 (상태 + 참여 유형) 2. **정렬** - 정렬 옵션 선택 → 즉시 목록 재정렬 - 정렬 기준: - 최신순: `updatedAt DESC` - 회의일시순: `meetingDate DESC` - 제목순: `title ASC` (한글 가나다순) 3. **검색** - 검색 아이콘 클릭 → 검색 입력 필드에 포커스 - 텍스트 입력 → 실시간 검색 (debounce 300ms) - 검색 범위: - 회의 제목 (부분 일치) - 참여자 이름 (부분 일치) - 키워드 (태그, 내용에서 추출된 키워드) - 검색어 지우기: X 버튼 (검색어 입력 시 표시) 4. **회의록 조회** - 회의록 항목 클릭 → 회의록 상세 화면으로 이동 - 전달 데이터: 회의록 ID - 조회 전용 회의록: 읽기 모드로 표시 5. **통계 업데이트** - 필터/검색 적용 시 → 통계 자동 갱신 - 전체, 작성중, 확정완료 개수 실시간 반영 6. **빈 상태 처리** - 검색 결과 없음: "검색 결과가 없습니다" 메시지 - 필터링 결과 없음: 필터 조건에 맞는 회의록 없음 안내 - 회의록 없음: "회의록이 없습니다" + 회의 시작 유도 메시지 #### 데이터 요구사항 - **입력**: - 사용자 ID (현재 로그인 사용자) - 필터 조건: - 참여 유형: `all` | `shared` | `attended` | `created` - 상태: `all` | `draft` | `confirmed` - 정렬 기준: `recent` | `date` | `title` - 검색어 (선택) - **출력**: - 회의록 목록: - 회의 ID - 제목 - 회의 일시 - 참여자 목록 (또는 참여자 수) - 상태 (`draft` | `confirmed`) - 생성자 ID - 생성일시 (`createdAt`) - 수정일시 (`updatedAt`) - 조회 권한 (편집 가능 여부) - 통계: - 전체 개수 - 작성중 개수 - 확정완료 개수 - **연동**: - Meeting 서비스 (회의록 목록 조회 API) - Share 서비스 (공유 정보 조회) #### 에러 처리 - **데이터 로딩 실패**: - "회의록을 불러오는 중 오류가 발생했습니다." 메시지 - "다시 시도" 버튼 제공 - **검색 실패**: - "검색 중 오류가 발생했습니다." 토스트 메시지 - 기존 목록 유지 - **네트워크 오류**: - "네트워크 연결을 확인해주세요." 토스트 메시지 - 자동 재시도 (최대 3회, exponential backoff) - **권한 없음**: - 접근 권한 없는 회의록 클릭 시: - "접근 권한이 없습니다" 토스트 메시지 - 목록으로 복귀 - **빈 상태**: - 검색 결과 없음: "검색 결과가 없습니다" - 필터링 결과 없음: "조건에 맞는 회의록이 없습니다" - 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼 [↑ 목차로 돌아가기](#목차) --- ## 공통 UI 컴포넌트 ### 네비게이션 #### Mobile 하단 네비게이션 (320px~768px) - **v1.5.0 변경** - **위치**: Fixed, 하단 (height: 64px) - **배경**: 흰색, 상단 테두리 (1px solid #E5E7EB) - **그림자**: 0 -2px 8px rgba(0, 0, 0, 0.08) - **구성**: 2개 항목 (균등 분할) - **홈** (대시보드) - 아이콘: 🏠 (24px) - 텍스트: "홈" (12px) - 활성 상태: 민트 그린 (#4DD5A7) - 비활성 상태: 회색 (#6B7280) - **회의록** (회의록 목록) - 아이콘: 📋 (24px) - 텍스트: "회의록" (12px) - ~~**Todo** (Todo 관리)~~ (MVP v2.4.0에서 제거됨) - ~~아이콘: ✅ (24px)~~ - ~~텍스트: "Todo" (12px)~~ - **사용 화면**: 02-대시보드, 12-회의록목록조회 - **참고**: 프로필 메뉴는 프로토타입에서 제거됨 (Desktop 사이드바의 사용자 정보 영역으로 통합) #### Desktop 좌측 사이드바 (768px+) - **v1.5.0 변경** - **위치**: Fixed, 좌측 (width: 240px) - **배경**: 흰색, 우측 테두리 (1px solid #E5E7EB) - **구성**: - **상단 영역**: - 서비스 로고 (32px) - 서비스명 (16px Bold) - **메인 메뉴**: - 대시보드 - 내 회의록 - ~~Todo~~ (MVP v2.4.0에서 제거됨) - **하단 영역**: - 사용자 정보 (아바타 + 이름) - 로그아웃 버튼 (btn-ghost btn-sm) - **사용 화면**: 02-대시보드, 12-회의록목록조회 #### 상단 헤더 (공통) - **위치**: Sticky, 상단 - **배경**: 흰색, 하단 테두리 (1px solid #E5E7EB) - **구성**: - 좌측: 뒤로가기 버튼 (화면별 조건부) - 중앙: 페이지 타이틀 (18px Bold) - 우측: 액션 버튼 (저장, 메뉴 등) - **Mobile 전용 (768px 미만)**: - 우측 상단에 프로필 아이콘 버튼 추가 (👤, 24px) - 클릭 시 드롭다운 메뉴 표시: - 사용자 이름 (14px Bold) - 로그아웃 버튼 (btn-ghost btn-sm) - 드롭다운 위치: 우측 상단 기준 아래로 펼침 - 배경: 흰색, 그림자: var(--shadow-md) - **Desktop (768px+)**: - 프로필 아이콘 숨김 (사이드바 하단 영역 사용) [↑ 목차로 돌아가기](#목차) --- ## 공통 에러 메시지 표준 ### 네트워크 오류 - **메시지**: "네트워크 연결을 확인해주세요" - **재시도**: 자동 재시도 최대 3회 (exponential backoff: 1s, 2s, 4s) - **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼 - **적용 화면**: 전체 ### 데이터 로딩 실패 - **메시지**: "일시적으로 데이터를 불러올 수 없습니다" - **UI**: 빈 상태 화면 + "다시 시도" 버튼 - **적용 화면**: 전체 ### 권한 오류 - **메시지**: "접근 권한이 없습니다" - **액션**: 3초 후 자동으로 이전 화면 또는 대시보드로 복귀 - **UI**: 경고 토스트 (주황) - **적용 화면**: 회의록 상세, 회의록 수정 ### 인증 오류 - **메시지**: "로그인이 필요합니다" - **액션**: 로그인 화면으로 리다이렉트 - **UI**: 정보 토스트 (파랑) - **적용 화면**: 전체 (인증 필요 화면) ### 입력 검증 오류 - **이메일 형식 오류**: "올바른 이메일 형식이 아닙니다" - **필수 입력 누락**: "필수 항목을 입력해주세요" - **날짜 형식 오류**: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)" - **UI**: 입력 필드 하단 오류 메시지 (빨강, 14px) ### 서버 오류 - **메시지**: "서버에 일시적인 문제가 발생했습니다" - **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼 - **로깅**: 오류 상세 정보를 서버로 전송 (Sentry) - **적용 화면**: 전체 [↑ 목차로 돌아가기](#목차) --- ## 화면 간 전환 및 네비게이션 ### 네비게이션 구조 #### Mobile (320px~768px) - **Primary Navigation**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 - **Secondary Navigation**: [상단 헤더](#상단-헤더-공통) 참조 #### Tablet/Desktop (768px+) - **Primary Navigation**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 - 설정 - 프로필 - **Breadcrumbs**: 상단 (선택) - 현재 위치 경로 표시 - 클릭하여 상위 페이지로 이동 ### 전환 애니메이션 - **화면 전환**: 페이드 또는 슬라이드 (200-300ms) - **모달 표시**: 페이드 인 + 스케일 (150ms) - **탭 전환**: 페이드 (100ms) - **리스트 로딩**: 스켈레톤 UI 표시 후 페이드 인 ### 딥 링크 지원 - 특정 회의록 직접 접근: `/minutes/{minuteId}` - 특정 Todo 직접 접근: `/todo/{todoId}` - 회의록 공유 링크: `/share/{shareToken}` [↑ 목차로 돌아가기](#목차) --- ## 반응형 설계 전략 ### 브레이크포인트 - **Mobile**: 320px ~ 767px - **Tablet**: 768px ~ 1023px - **Desktop**: 1024px 이상 ### 레이아웃 전략 #### Mobile First 접근 1. **320px (Small Mobile) 기준 설계** - 단일 컬럼 레이아웃 - 필수 기능만 표시 - 터치 친화적 UI (최소 44px 터치 영역) - 하단 네비게이션 2. **768px (Tablet) 확장** - 2컬럼 레이아웃 (일부 화면) - 추가 정보 표시 (통계, 위젯) - 사이드바 도입 (선택) 3. **1024px (Desktop) 최적화** - 3컬럼 레이아웃 (대시보드, 회의진행) - 좌측 고정 사이드바 - 마우스/키보드 인터랙션 강화 - 추가 기능 노출 (단축키, 고급 필터 등) ### 컴포넌트별 반응형 전략 #### 폼 (Form) - Mobile: 단일 컬럼, 전체 너비 - Tablet: 2컬럼 (관련 필드 그룹화) - Desktop: 2컬럼 + 미리보기 패널 #### 리스트 (List) - Mobile: 카드 형태, 스택 레이아웃 - Tablet: 2컬럼 그리드 - Desktop: 3컬럼 그리드 또는 마스터-디테일 #### 테이블 (Table) - Mobile: 카드 형태로 변환, 중요 정보만 표시 - Tablet: 스크롤 가능한 테이블 - Desktop: 고정 헤더 테이블, 모든 컬럼 표시 ### 이미지 및 미디어 - Responsive Images: srcset 활용 - Lazy Loading: 뷰포트 진입 시 로딩 - 최적화: WebP 포맷, 적절한 압축 [↑ 목차로 돌아가기](#목차) --- ## 접근성 보장 방안 ### WCAG 2.1 Level AA 준수 #### 1. Perceivable (인식 가능) - **텍스트 대안**: 모든 이미지에 alt 텍스트 제공 - **색상 대비**: 최소 4.5:1 대비율 (일반 텍스트), 3:1 (대형 텍스트) - **텍스트 크기 조절**: 200%까지 확대 가능, 레이아웃 깨지지 않음 - **색상만으로 정보 전달 금지**: 아이콘, 텍스트와 함께 사용 #### 2. Operable (조작 가능) - **키보드 접근성**: 모든 기능 키보드로 조작 가능 - Tab: 다음 요소로 포커스 이동 - Shift + Tab: 이전 요소로 포커스 이동 - Enter/Space: 버튼 활성화 - Esc: 모달 닫기 - **포커스 표시**: 명확한 포커스 인디케이터 (2px 파란색 테두리) - **터치 영역**: 최소 44x44px (모바일) - **시간 제한 없음**: 자동 저장으로 세션 만료 방지 #### 3. Understandable (이해 가능) - **명확한 레이블**: 모든 입력 필드에 레이블 제공 - **오류 식별 및 안내**: 오류 발생 시 명확한 설명 및 해결 방법 제공 - **일관된 UI**: 동일한 기능은 동일한 위치, 동일한 아이콘/텍스트 #### 4. Robust (견고함) - **시맨틱 HTML**: 적절한 HTML 태그 사용 (header, nav, main, aside, footer) - **ARIA 레이블**: 스크린 리더를 위한 ARIA 속성 - role, aria-label, aria-describedby, aria-live - **호환성**: 최신 브라우저 및 보조 기술 지원 ### 접근성 테스트 - 자동 테스트: Lighthouse, axe DevTools - 수동 테스트: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver) [↑ 목차로 돌아가기](#목차) --- ## 성능 최적화 방안 ### 1. 로딩 성능 - **Code Splitting**: 라우트별 청크 분리 - **Lazy Loading**: - 이미지: Intersection Observer - 컴포넌트: React.lazy, dynamic import - **Pre-fetching**: 다음 화면 리소스 미리 로딩 - **CDN 활용**: 정적 리소스 CDN 배포 ### 2. 렌더링 성능 - **Virtual Scrolling**: 긴 리스트 (회의록, Todo) - **Debounce/Throttle**: - 검색 입력: 300ms debounce - 스크롤 이벤트: 100ms throttle - **Memoization**: React.memo, useMemo, useCallback - **CSS 애니메이션**: JavaScript 대신 CSS transition 사용 ### 3. 네트워크 최적화 - **API 요청 최적화**: - 필요한 데이터만 요청 (GraphQL 또는 필드 선택) - 배치 요청: 여러 API를 하나로 통합 - **캐싱 전략**: - 브라우저 캐시: Cache-Control 헤더 - Service Worker: 오프라인 지원 - 메모리 캐시: React Query, SWR - **압축**: Gzip, Brotli ### 4. 실시간 동기화 최적화 - **WebSocket 최적화**: - Delta 전송: 전체 데이터가 아닌 변경 부분만 전송 - 배치 업데이트: 여러 변경 사항을 묶어서 전송 - 재연결 전략: 지수 백오프 - **Conflict Resolution**: Operational Transformation 또는 CRDT ### 5. 성능 모니터링 - **Core Web Vitals**: - LCP (Largest Contentful Paint): < 2.5s - FID (First Input Delay): < 100ms - CLS (Cumulative Layout Shift): < 0.1 - **실시간 모니터링**: Sentry, Google Analytics ### 성능 목표 - **First Contentful Paint**: < 1.5s - **Time to Interactive**: < 3.5s - **Page Load (3G)**: < 5s - **STT 지연 시간**: < 1s - **실시간 동기화 지연**: < 500ms [↑ 목차로 돌아가기](#목차) --- ## 변경 이력 | 버전 | 날짜 | 작성자 | 변경 내용 | |------|------|--------|----------| | 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 | | 1.1.x | 2025-10-21 | 이미준 | **주요 변경**: AI 요약 및 참고자료 기능, 회의록 상세 화면 개선, 대시보드 UI 개선
- 1.1.0: AI 요약/참고자료 기능 추가 (05, 10, 11 화면), UFR-AI-040 관련 회의록 자동 연결
- 1.1.1: 회의록 상세 탭 구조 개선 (회의록/대시보드), 참고자료 관련도 점수 표시
- 1.1.2: 대시보드 예정 회의 카드/Todo 정렬 개선, 12-회의록목록조회 신규 추가 (필터/정렬/검색) | | 1.2.x | 2025-10-21 | 이미준, 최유진 | **주요 변경**: 대시보드 역할 기반 접근 제어, 회의진행 화면 개선, 스타일 가이드 신규 작성
- 1.2.0: 진행중 회의 표시 기능 (배지, 참여하기 버튼, 에러 처리)
- 1.2.1: 예정 회의 생성자/참여자 권한 차별화 (수정 버튼, 참여 시간 제한, 타이머)
- 1.2.2: 참고자료 새 탭 열기, 참여자 추가 초대, 스타일 가이드 신규 작성 (민트 그린 컬러 시스템)
- 1.2.3: 설정 메뉴 제거, Todo 클릭 시 회의록 상세로 이동 (URL 파라미터 전달) | | 1.3.x | 2025-10-21 | 이미준, 도그냥 | **주요 변경**: 반응형 네비게이션 구조, 회의진행 화면 전면 개편, 공통 UI 컴포넌트 표준화
- 1.3.0: 반응형 네비게이션 (Mobile 하단 3개, Desktop 사이드바), 05-회의진행 2열 구조 재설계, 10-회의록상세조회 타임라인 탭 제거
- 1.3.1: AI 제안 탭 3가지 유형 상세화 (논의사항/결정사항/액션아이템), 디자인 통일성 개선
- 1.3.2: 참여자 추가 폼 + 이메일 유효성 검증, 버튼/검색창 스타일 통일
- 1.3.3: 공통 UI 컴포넌트/에러 메시지 섹션 신규 작성, 중복 내용 참조 링크 교체 (파일 크기 8~10% 감소) | | 1.4.x | 2025-10-22~25 | 이미준, 강지수, 도그냥 | **주요 변경**: Todo 관리 기능 대폭 강화, 화면 번호 재정렬, 회의록 공유 기능 제거, 유저스토리 v2.3.0 반영
- 1.4.0~1.4.5: 네비게이션 사양 통일, 대시보드 모바일 최적화, 공유 기능 제거, 화면 번호 통일, 로그아웃 기능 추가
- 1.4.6~1.4.10: 검증완료 섹션 잠금 정책, Todo 관리 확장 (통계/필터/편집), 회의록 상세 탭 순서 변경, Todo 카드 디자인 전면 개선, 공통 스타일 관리
- 1.4.11~1.4.13: 회의진행 액션아이템 탭 개선, Todo 카드 HTML/CSS 완전 통일 (3개 화면), D-day 배지 정책 (회의 중 숨김)
- 1.4.14~1.4.16: 12-회의록목록조회 데이터 아키텍처 문서화, 06-검증완료 화면 삭제, 사용자 역할 용어 통일 (생성자/참여자)
- 1.4.17~1.4.20: STT 화자 식별 불가 반영, 05-회의진행 프로토타입 기준 전면 수정, 유저스토리 v2.3.0 반영 (충돌 방지 정책 강화) | | 1.5.1 | 2025-10-27 | 강지수 | MVP 스코프 축소 v2.4.0 반영 (4개 화면 수정)
- **02-대시보드**: Todo 위젯 및 통계 제거 (UFR-USER-020 반영)
- Todo 위젯 전체 제거 (나의 Todo 섹션 삭제)
- 통계 카드: "나의 Todo" 제거, "작성중 회의록" 유지 (2개 항목)
- 네비게이션: 하단 네비게이션 및 사이드바에서 Todo 관리 메뉴 제거
- Desktop 통계 그리드: 2개 항목만 표시
- **05-회의진행**: "AI 제안" 탭 → "AI 기반 메모" 탭 기능 변경
- 메모 입력창 + 저장 버튼 추가
- AI가 감지한 주요 내용 리스트 표시 (시간 + 내용)
- 각 참여자별 개별 저장, 다른 참여자 메모 볼 수 없음
- 메모는 회의 종료 전까지만 표시/편집 가능
- 에러 처리: AI 주요 내용 감지 실패, 메모 저장 실패 추가
- **10-회의록상세조회**: Todo 단순 조회 기능으로 변경
- Todo는 제목 + 담당자 + 마감일만 표시
- D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터 제거
- Todo 관리 화면 연동 링크 제거 (화면 자체가 제거됨)
- "수정" 버튼을 헤더로 이동
- **11-회의록수정**: 실시간 협업 기능 제거, 안건 기반 충돌 방지 강화
- "편집 중" 표시 제거 (실시간 협업 기능 제거)
- Todo 편집/추가/삭제 기능 전체 제거 (단순 조회만 가능)
- AI 한줄 요약 재생성 불가 (회의 종료 시 1회만 생성)
- 검증률 표시 및 최종 확정 버튼 제거
- 저장 로직 추가: 검증완료 안건 저장 스킵, 저장 결과 알림
- 안건별 검증 완료 체크박스로 충돌 방지 (Last Write Wins 적용)
- 에러 처리: 충돌 경고 모달 제거 (LWW로 인해) | | 1.5.2 | 2025-10-27 | 강지수 | AI 요약 기능 통합 및 단순화 (유저스토리 v2.4.0 반영)
- **11-회의록수정**: AI 요약 기능 통합
- 명칭 변경: "AI 상세 요약" → "AI 요약"
- AI 요약 영역: AI 한줄 요약만 표시 (30자 이내, 읽기 전용)
- 텍스트 편집 영역: 안건 내용 자유 작성 (논의 주제, 발언자별 의견, 결정 사항 등)
- "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성 (2-5초 처리)
- 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영
- AI 상세 요약 및 한줄 요약 분리 표시 제거
- **프로토타입 UI 개선**:
- AI 재생성 버튼 스타일 통일: btn-secondary → btn-primary (다른 화면과 일관성)
- 안건별 검증완료 UI 단순화: 참여자는 체크박스만, 회의 생성자는 검증완료 시 잠금해제 버튼 표시
- .creator-only CSS 클래스 추가: data-is-creator 속성 기반 표시 제어
- **관련 유저스토리**: UFR-AI-036 (AI 한줄요약 확인 및 재생성), UFR-MEET-055 (안건별 검증), UFR-COLLAB-030 (충돌 방지) | | 1.5.3 | 2025-10-27 | 강지수 | Todo 추가/편집 권한 정책 명확화 (유저스토리 v2.4.1 반영)
- **10-회의록상세조회**: Todo 추가/편집 권한 정책 추가 (대시보드 탭)
- "추가" 버튼: 모든 회의 참여자에게 노출 (Todo 리스트 우측 상단)
- "편집(✏️)" 버튼: 회의 생성자에게만 노출 (각 Todo 항목 우측)
- Todo 추가 모달: 제목, 담당자, 마감일 입력 (모든 참여자)
- Todo 편집 모달: 제목, 담당자, 마감일 수정 (회의 생성자만)
- 담당자 필드: 추가 시 또는 생성자의 편집 시만 표시
- **프로토타입 UI 개선**: 10-회의록상세조회.html
- Todo 추가/편집 모달 바텀시트 스타일 통일 (모바일: 하단 슬라이드 업, 데스크톱: 중앙 모달)
- .creator-only 클래스 적용하여 편집 버튼 권한별 표시/숨김 처리
- JavaScript initPage() 함수에서 회의 생성자 여부 확인 후 creator-only 요소 제어
- Todo 추가 성공: "담당자에게 알림이 전송되었습니다" → "캘린더가 업데이트되었습니다" 순차 토스트
- Todo 편집 성공: 담당자 변경 시 알림, 마감일 변경 시 캘린더 업데이트 토스트
- **관련 유저스토리**: UFR-MEET-047 (회의록상세조회), Todo 권한 정책 신규 추가 | | 1.5.4 | 2025-10-28 | 도그냥 | 대시보드 최근 회의 리스트 디자인 간소화 (UFR-USER-020 반영)
- **02-대시보드**: 최근 회의 정렬 기준 명확화 및 디자인 간소화
- **정렬 기준**:
- 1순위: 회의록 미생성 회의 (진행중 + 예정) 우선 표시
- 2순위: 미생성이 3개 미만이면 최근 종료된 회의(회의록 있음)로 나머지 채움
- 각 그룹 내 정렬: 빠른 일시 순 (시작 시간 기준)
- 최대 표시: 3개
- **회의 카드 (클릭 가능 블록)**:
- 상태 라벨 (배지): "진행중", "예정", "작성중", "확정완료"
- 회의 제목 + 생성자 아이콘(👑)
- 회의 일시, 참여자 수, 장소
- 상태 버튼 (표시용): "참여하기", "수정하기", "보기"
- **디자인 간소화**: D-day 표시, 깜박임 애니메이션, 세부 색상 지정 등 제거
- **유저스토리**: UFR-USER-020 (대시보드 조회) 동일하게 수정 | | 1.5.5 | 2025-10-28 | 도그냥 | 회의예약 화면 임시저장 기능 제거
- **03-회의예약**: 헤더 임시저장 버튼 제거
- 헤더에서 "임시저장" 버튼 완전 제거
- JavaScript 변수 선언 제거 (draftSaveBtn)
- 임시저장 이벤트 리스너 제거
- 사용자는 "예약 완료" 버튼으로만 회의 예약 가능
- **유저스토리**: UFR-MEET-010, UFR-MEET-011 임시저장 관련 출력 항목 제거
- **프로토타입**: design/uiux/prototype/03-회의예약.html 수정 | | 1.5.6 | 2025-10-28 | 도그냥, 지수 | 02-대시보드 예정 회의 권한 제어 개선 (MVP 일정 최우선)
- **예정 회의 카드 클릭 동작**: 생성자/참여자 역할별 차별화
- 생성자: 카드 클릭 → 회의예약 화면(수정 모드) 진입
- 참여자: 카드 클릭 → 시스템 알럿 표시 ("아직 회의 시간이 되지 않아 참여하실 수 없습니다")
- **버튼 표시 규칙 변경**: 예정 회의에서 "수정하기" 버튼 제거
- 진행중: "참여하기" 버튼 표시
- 예정: 버튼 없음 (카드 클릭으로 처리)
- 완료: "보기" 버튼 표시
- **프로토타입 수정**: design/uiux/prototype/02-대시보드.html
- 권한 체크 로직 추가 (isCreator 확인)
- 시스템 알럿 추가 (참여자 클릭 시)
- **유저스토리 반영**: UFR-USER-020, UFR-MEET-011 예외처리 추가
- **다음 버전 개선 계획**: 참여자용 회의 상세 조회 모달 기능 추가 예정 (회의 정보 제공 + 시작 시간 안내) | | 1.5.7 | 2025-10-28 | 도그냥, 지수 | UFR-TODO 잔여 참조 제거 (문서 정리)
- **유저스토리 매핑 섹션**: "Todo 서비스" 항목 제거 (96라인)
- **프로토타입 화면 목록**: "09 Todo관리" 화면 취소선 처리 및 제거 표시 추가 (124라인)
- **09-Todo관리 화면**: 제거 안내 추가 (개요 섹션에 경고 메시지 삽입)
- MVP v2.4.0에서 제거됨을 명확히 표시
- Todo 기능은 회의록 상세조회(10번) 화면에서만 제공됨을 안내
- **Todo 편집 섹션**: MVP v2.4.0 제거 표시 추가 (1163라인)
- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-030, UFR-TODO-040 참조 제거 또는 삭제 표시
- **참고**: Todo 관리 독립 화면은 제거되었으나 회의록 내 Todo 기능(추가/편집)은 10번 화면에서 유지됨 | | 1.5.8 | 2025-10-28 | 지수, 도그냥 | MVP v2.4.5 반영: Todo 관리 및 검증완료 플로우 정리
- **사용자 플로우**: "검증완료" 단계 제거, "회의종료 → 회의록수정" 플로우로 변경
- 시나리오 1: 회의진행 → 회의종료 → 회의록수정 (선택) → 대시보드
- 시나리오 3 (Todo 관리) 제거 표시
- **플로우 다이어그램**: 검증완료 및 Todo 관련 플로우 제거, 회의종료 후 회의록수정 선택 플로우로 단순화
- **02-대시보드**: Todo 항목 클릭 시 회의록 상세 이동 로직 제거, Todo 데이터 요구사항 제거, Todo 관련 빈 상태 제거
- **07-회의종료**: Todo 서비스 연동 제거 (Meeting, AI 서비스만 연동)
- **10-회의록상세조회**: Todo 서비스 연동 제거
- **네비게이션**: 하단 네비게이션 및 Desktop 사이드바에서 Todo 관리 메뉴 제거 표시 (MVP v2.4.0)
- Mobile 하단 네비게이션: 3개 → 2개 항목 (홈, 회의록)
- Desktop 사이드바: Todo 메뉴 제거
- **변경 근거**: 유저스토리 v2.4.5 기준, Todo 관리 독립 화면 제거 및 회의 종료 후 회의록 수정 단계로 간소화 | | 1.5.9 | 2025-10-28 | 지수, 도그냥 | 용어 통일: "참석자/참석" → "참여자/참여" 변경
- **화면설계서**: 100개 인스턴스 변경 (uiux.md)
- "참석자" → "참여자" (88개)
- "참석" → "참여" (12개): "내가 참석한 회의", "본인이 참석한 회의록", "참석한 회의" 등
- **유저스토리**: 132개 인스턴스 변경 (userstory.md)
- "참석자" → "참여자" (125개)
- "참석" → "참여" (7개): "참석 중인 사용자", "참석 권한", "참석률" 등
- **프로토타입**: 34개 인스턴스 변경 (9개 HTML 파일)
- "참석자" → "참여자" (32개)
- "참석" → "참여" (2개)
- **총 266개 인스턴스 변경**: 사용자 역할 용어 완전 통일 (생성자/참여자 체계) | [↑ 목차로 돌아가기](#목차) --- ## 부록 ### 참고 자료 - Mobile First 설계 원칙: Luke Wroblewski "Mobile First" - 접근성 가이드라인: WCAG 2.1 Level AA - 성능 최적화: Google Web Fundamentals ### 디자인 시스템 (추후 작성) - 색상 팔레트 - 타이포그래피 - 컴포넌트 라이브러리 - 아이콘 세트