UI/UX 설계서 개선: 목차 네비게이션 강화

- 목차에 2 depth 하위 항목 추가 (가독성 향상)
- 각 주요 섹션 끝에 "목차로 돌아가기" 링크 추가
- 프로토타입 화면 목록: 02-대시보드 관련 유저스토리 추가 (UFR-USER-020)
- 마크다운 표준 앵커 링크 사용 (#목차)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

design/uiux/uiux.md

@@ -4,23 +4,58 @@
 - **작성일**: 2025-10-21
 - **최종 수정일**: 2025-10-27
 - **작성자**: 이미준 (서비스 기획자)
-- **버전**: 1.5.2
+- **버전**: 1.5.3
 - **설계 철학**: Mobile First Design
 
 ---
 
 ## 목차
 1. [설계 개요](#설계-개요)
+   - [설계 목표](#설계-목표)
+   - [설계 원칙](#설계-원칙)
+   - [유저스토리 매핑](#유저스토리-매핑)
+   - [주요 추가 기능 (v1.1)](#주요-추가-기능-v11)
 2. [프로토타입 화면 목록](#프로토타입-화면-목록)
 3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
+   - [주요 사용자 시나리오별 플로우](#주요-사용자-시나리오별-플로우)
+   - [플로우 다이어그램](#플로우-다이어그램)
 4. [화면별 상세 설계](#화면별-상세-설계)
+   - [01-로그인](#01-로그인)
+   - [02-대시보드](#02-대시보드)
+   - [03-회의예약](#03-회의예약)
+   - [04-템플릿선택](#04-템플릿선택)
+   - [05-회의진행](#05-회의진행)
+   - [07-회의종료](#07-회의종료)
+   - [09-Todo관리](#09-todo관리)
+   - [10-회의록상세조회](#10-회의록상세조회)
+   - [11-회의록수정](#11-회의록수정)
+   - [12-회의록목록조회](#12-회의록목록조회)
 5. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
 6. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
+   - [네트워크 오류](#네트워크-오류)
+   - [데이터 로딩 실패](#데이터-로딩-실패)
+   - [권한 오류](#권한-오류)
+   - [인증 오류](#인증-오류)
+   - [입력 검증 오류](#입력-검증-오류)
+   - [서버 오류](#서버-오류)
 7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
 8. [반응형 설계 전략](#반응형-설계-전략)
+   - [브레이크포인트](#브레이크포인트)
+   - [레이아웃 전략](#레이아웃-전략)
+   - [컴포넌트별 반응형 전략](#컴포넌트별-반응형-전략)
+   - [이미지 및 미디어](#이미지-및-미디어)
 9. [접근성 보장 방안](#접근성-보장-방안)
 10. [성능 최적화 방안](#성능-최적화-방안)
+    - [1. 로딩 성능](#1-로딩-성능)
+    - [2. 렌더링 성능](#2-렌더링-성능)
+    - [3. 네트워크 최적화](#3-네트워크-최적화)
+    - [4. 실시간 동기화 최적화](#4-실시간-동기화-최적화)
+    - [5. 성능 모니터링](#5-성능-모니터링)
+    - [성능 목표](#성능-목표)
 11. [변경 이력](#변경-이력)
+12. [부록](#부록)
+    - [참고 자료](#참고-자료)
+    - [디자인 시스템 (추후 작성)](#디자인-시스템-추후-작성)
 
 ---
 
@@ -72,14 +107,16 @@
    - 관련도 표시 (퍼센트 또는 별점)
    - 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 프로토타입 화면 목록
 
-| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
-|------|--------|----------------|-------------------|-----------|------------------------|-------|
-| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | | 
-| 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | O | X | | 
+| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 설명 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
+|------|--------|----------------|-------------------|------------------------|------------|------------------------|-------|
+| 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, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
@@ -87,7 +124,9 @@
 | 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | O | X | |
 | 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | 회의록 상세 보기 | X | O | |
 | 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | |
-| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | | 
+| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
+
+[↑ 목차로 돌아가기](#목차)
 
 ---
 
@@ -143,6 +182,8 @@ graph TD
     E -.실시간 연동.-> L
 ```
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 화면별 상세 설계
@@ -1824,6 +1865,8 @@ graph TD
   - 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
   - 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 공통 UI 컴포넌트
@@ -1882,6 +1925,8 @@ graph TD
 - **Desktop (768px+)**:
   - 프로필 아이콘 숨김 (사이드바 하단 영역 사용)
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 공통 에러 메시지 표준
@@ -1921,6 +1966,8 @@ graph TD
 - **로깅**: 오류 상세 정보를 서버로 전송 (Sentry)
 - **적용 화면**: 전체
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 화면 간 전환 및 네비게이션
@@ -1952,6 +1999,8 @@ graph TD
 - 특정 Todo 직접 접근: `/todo/{todoId}`
 - 회의록 공유 링크: `/share/{shareToken}`
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 반응형 설계 전략
@@ -2003,6 +2052,8 @@ graph TD
 - Lazy Loading: 뷰포트 진입 시 로딩
 - 최적화: WebP 포맷, 적절한 압축
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 접근성 보장 방안
@@ -2040,6 +2091,8 @@ graph TD
 - 자동 테스트: Lighthouse, axe DevTools
 - 수동 테스트: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver)
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 성능 최적화 방안
@@ -2091,6 +2144,8 @@ graph TD
 - **STT 지연 시간**: < 1s
 - **실시간 동기화 지연**: < 500ms
 
+[↑ 목차로 돌아가기](#목차)
+
 ---
 
 ## 변경 이력
@@ -2132,7 +2187,10 @@ graph TD
 | 1.4.19 | 2025-10-24 | 강지수 | 05-회의진행 화면 설계서 프로토타입 기준 전면 수정<br>- **레이아웃 구조 변경**: "2열 구조" 표현 제거, "메인 콘텐츠 영역: 정보 패널 (탭 구조)"로 단순화<br>  - 텍스트 편집 영역 관련 내용 모두 제거 (왼쪽 영역, 에디터 툴바, contentEditable 등)<br>  - 현재 프로토타입은 헤더 + 탭 콘텐츠 구조만 보유<br>- **반응형 디자인 명확화**: Mobile/Desktop 모두 동일한 구조에 너비만 반응형<br>  - "2열 구조를 1열로 전환", "바텀시트" 표현 제거<br>  - Mobile: 전체 너비 사용, Desktop: 최대 너비 제한 없이 반응형<br>- **AI 제안 탭 기능 명확화**: 논의항목/결정사항 구분 제거<br>  - "논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안" 명시<br>  - AI는 단순히 중요한 내용을 주요 메모 항목으로 제안하는 역할만 수행<br>- **용어 사전 검색 기능 추가**: 검색 입력창 + 검색 버튼<br>  - Enter 키 지원, 용어명과 정의 모두 검색<br>  - 검색 동작 상세 설명: 일치하는 용어만 표시, 하이라이트 효과, 결과 없으면 전체 목록 표시<br>- **인터랙션 섹션 정리**: 텍스트 편집, 툴바 사용, 충돌 감지 등 편집 관련 내용 모두 제거<br>  - 탭 전환, 회의 종료, 실시간 업데이트만 유지<br>  - 실시간 업데이트 항목을 현재 화면에 맞게 수정 (AI 제안, 용어 사전, 관련 회의록)<br>- **데이터 요구사항 업데이트**: 사용자 편집 내용 제거, 참석자 초대 이메일 추가<br>  - AI 제안을 "주요 메모 항목 제안"으로 명확히 표현<br>- **에러 처리 업데이트**: 편집 충돌 에러 제거, 용어 사전 로드 실패/참석자 초대 실패 추가<br>- **주요 기능 목록 정리**: 실시간 협업/수동 편집 제거, AI 주요 메모 제안/참석자 관리 추가<br>- **권한 항목 수정**: "회의록 편집: 모든 참석자" → "참석자 초대: 모든 참석자"<br>- **프로토타입 기준 반영**: 05-회의진행.html 실제 구현 상태 100% 반영 |
 | 1.4.20 | 2025-10-25 | 이미준, 강지수 | 유저스토리 v2.3.0 반영<br>- 회의 종료 화면 정책 명확화 (확인 전용, 바로 최종 확정 옵션 상세화)<br>- UFR-MEET-050: 최종 확정 2가지 시나리오 설명 추가<br>- UFR-COLLAB-020: 안건 기반 충돌 해결 메커니즘 상세 추가<br>- 실시간 협업 충돌 방지 정책 강화 |
 | 1.5.1 | 2025-10-27 | 강지수 | MVP 스코프 축소 v2.4.0 반영 (4개 화면 수정)<br>- **02-대시보드**: Todo 위젯 및 통계 제거 (UFR-USER-020 반영)<br>  - Todo 위젯 전체 제거 (나의 Todo 섹션 삭제)<br>  - 통계 카드: "나의 Todo" 제거, "작성중 회의록" 유지 (2개 항목)<br>  - 네비게이션: 하단 네비게이션 및 사이드바에서 Todo 관리 메뉴 제거<br>  - Desktop 통계 그리드: 2개 항목만 표시<br>- **05-회의진행**: "AI 제안" 탭 → "AI 기반 메모" 탭 기능 변경<br>  - 메모 입력창 + 저장 버튼 추가<br>  - AI가 감지한 주요 내용 리스트 표시 (시간 + 내용)<br>  - 각 참석자별 개별 저장, 다른 참석자 메모 볼 수 없음<br>  - 메모는 회의 종료 전까지만 표시/편집 가능<br>  - 에러 처리: AI 주요 내용 감지 실패, 메모 저장 실패 추가<br>- **10-회의록상세조회**: Todo 단순 조회 기능으로 변경<br>  - Todo는 제목 + 담당자 + 마감일만 표시<br>  - D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터 제거<br>  - Todo 관리 화면 연동 링크 제거 (화면 자체가 제거됨)<br>  - "수정" 버튼을 헤더로 이동<br>- **11-회의록수정**: 실시간 협업 기능 제거, 안건 기반 충돌 방지 강화<br>  - "편집 중" 표시 제거 (실시간 협업 기능 제거)<br>  - Todo 편집/추가/삭제 기능 전체 제거 (단순 조회만 가능)<br>  - AI 한줄 요약 재생성 불가 (회의 종료 시 1회만 생성)<br>  - 검증률 표시 및 최종 확정 버튼 제거<br>  - 저장 로직 추가: 검증완료 안건 저장 스킵, 저장 결과 알림<br>  - 안건별 검증 완료 체크박스로 충돌 방지 (Last Write Wins 적용)<br>  - 에러 처리: 충돌 경고 모달 제거 (LWW로 인해) |
-| 1.5.2 | 2025-10-27 | 강지수 | AI 요약 기능 통합 및 단순화 (유저스토리 v2.4.1 반영)<br>- **11-회의록수정**: AI 요약 기능 통합<br>  - 명칭 변경: "AI 상세 요약" → "AI 요약"<br>  - AI 요약 영역: AI 한줄 요약만 표시 (30자 이내, 읽기 전용)<br>  - 텍스트 편집 영역: 안건 내용 자유 작성 (논의 주제, 발언자별 의견, 결정 사항 등)<br>  - "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성 (2-5초 처리)<br>  - 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영<br>  - AI 상세 요약 및 한줄 요약 분리 표시 제거<br>- **프로토타입 UI 개선**:<br>  - AI 재생성 버튼 스타일 통일: btn-secondary → btn-primary (다른 화면과 일관성)<br>  - 안건별 검증완료 UI 단순화: 참석자는 체크박스만, 회의 생성자는 검증완료 시 잠금해제 버튼 표시<br>  - .creator-only CSS 클래스 추가: data-is-creator 속성 기반 표시 제어<br>- **관련 유저스토리**: UFR-AI-036 (AI 한줄요약 확인 및 재생성), UFR-MEET-055 (안건별 검증), UFR-COLLAB-030 (충돌 방지) |
+| 1.5.2 | 2025-10-27 | 강지수 | AI 요약 기능 통합 및 단순화 (유저스토리 v2.4.0 반영)<br>- **11-회의록수정**: AI 요약 기능 통합<br>  - 명칭 변경: "AI 상세 요약" → "AI 요약"<br>  - AI 요약 영역: AI 한줄 요약만 표시 (30자 이내, 읽기 전용)<br>  - 텍스트 편집 영역: 안건 내용 자유 작성 (논의 주제, 발언자별 의견, 결정 사항 등)<br>  - "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성 (2-5초 처리)<br>  - 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영<br>  - AI 상세 요약 및 한줄 요약 분리 표시 제거<br>- **프로토타입 UI 개선**:<br>  - AI 재생성 버튼 스타일 통일: btn-secondary → btn-primary (다른 화면과 일관성)<br>  - 안건별 검증완료 UI 단순화: 참석자는 체크박스만, 회의 생성자는 검증완료 시 잠금해제 버튼 표시<br>  - .creator-only CSS 클래스 추가: data-is-creator 속성 기반 표시 제어<br>- **관련 유저스토리**: UFR-AI-036 (AI 한줄요약 확인 및 재생성), UFR-MEET-055 (안건별 검증), UFR-COLLAB-030 (충돌 방지) |
+| 1.5.3 | 2025-10-27 | 강지수 | Todo 추가/편집 권한 정책 명확화 (유저스토리 v2.4.1 반영)<br>- **10-회의록상세조회**: Todo 추가/편집 권한 정책 추가 (대시보드 탭)<br>  - "추가" 버튼: 모든 회의 참석자에게 노출 (Todo 리스트 우측 상단)<br>  - "편집(✏️)" 버튼: 회의 생성자에게만 노출 (각 Todo 항목 우측)<br>  - Todo 추가 모달: 제목, 담당자, 마감일 입력 (모든 참석자)<br>  - Todo 편집 모달: 제목, 담당자, 마감일 수정 (회의 생성자만)<br>  - 담당자 필드: 추가 시 또는 생성자의 편집 시만 표시<br>- **프로토타입 UI 개선**: 10-회의록상세조회.html<br>  - Todo 추가/편집 모달 바텀시트 스타일 통일 (모바일: 하단 슬라이드 업, 데스크톱: 중앙 모달)<br>  - .creator-only 클래스 적용하여 편집 버튼 권한별 표시/숨김 처리<br>  - JavaScript initPage() 함수에서 회의 생성자 여부 확인 후 creator-only 요소 제어<br>  - Todo 추가 성공: "담당자에게 알림이 전송되었습니다" → "캘린더가 업데이트되었습니다" 순차 토스트<br>  - Todo 편집 성공: 담당자 변경 시 알림, 마감일 변경 시 캘린더 업데이트 토스트<br>- **관련 유저스토리**: UFR-MEET-047 (회의록상세조회), Todo 권한 정책 신규 추가 |
+
+[↑ 목차로 돌아가기](#목차)
 
 ---