diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 150ecdb..201ed21 100644 --- a/design/uiux/uiux.md +++ b/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-회의진행 화면 설계서 프로토타입 기준 전면 수정
- **레이아웃 구조 변경**: "2열 구조" 표현 제거, "메인 콘텐츠 영역: 정보 패널 (탭 구조)"로 단순화
- 텍스트 편집 영역 관련 내용 모두 제거 (왼쪽 영역, 에디터 툴바, contentEditable 등)
- 현재 프로토타입은 헤더 + 탭 콘텐츠 구조만 보유
- **반응형 디자인 명확화**: Mobile/Desktop 모두 동일한 구조에 너비만 반응형
- "2열 구조를 1열로 전환", "바텀시트" 표현 제거
- Mobile: 전체 너비 사용, Desktop: 최대 너비 제한 없이 반응형
- **AI 제안 탭 기능 명확화**: 논의항목/결정사항 구분 제거
- "논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안" 명시
- AI는 단순히 중요한 내용을 주요 메모 항목으로 제안하는 역할만 수행
- **용어 사전 검색 기능 추가**: 검색 입력창 + 검색 버튼
- Enter 키 지원, 용어명과 정의 모두 검색
- 검색 동작 상세 설명: 일치하는 용어만 표시, 하이라이트 효과, 결과 없으면 전체 목록 표시
- **인터랙션 섹션 정리**: 텍스트 편집, 툴바 사용, 충돌 감지 등 편집 관련 내용 모두 제거
- 탭 전환, 회의 종료, 실시간 업데이트만 유지
- 실시간 업데이트 항목을 현재 화면에 맞게 수정 (AI 제안, 용어 사전, 관련 회의록)
- **데이터 요구사항 업데이트**: 사용자 편집 내용 제거, 참석자 초대 이메일 추가
- AI 제안을 "주요 메모 항목 제안"으로 명확히 표현
- **에러 처리 업데이트**: 편집 충돌 에러 제거, 용어 사전 로드 실패/참석자 초대 실패 추가
- **주요 기능 목록 정리**: 실시간 협업/수동 편집 제거, AI 주요 메모 제안/참석자 관리 추가
- **권한 항목 수정**: "회의록 편집: 모든 참석자" → "참석자 초대: 모든 참석자"
- **프로토타입 기준 반영**: 05-회의진행.html 실제 구현 상태 100% 반영 | | 1.4.20 | 2025-10-25 | 이미준, 강지수 | 유저스토리 v2.3.0 반영
- 회의 종료 화면 정책 명확화 (확인 전용, 바로 최종 확정 옵션 상세화)
- UFR-MEET-050: 최종 확정 2가지 시나리오 설명 추가
- UFR-COLLAB-020: 안건 기반 충돌 해결 메커니즘 상세 추가
- 실시간 협업 충돌 방지 정책 강화 | | 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.1 반영)
- **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.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 권한 정책 신규 추가 | + +[↑ 목차로 돌아가기](#목차) ---