# 회의록 서비스 UI/UX 설계서 ## 목차 1. [개요](#개요) 2. [설계 원칙](#설계-원칙) 3. [회의록별 대시보드](#회의록별-대시보드) 4. [반응형 디자인 전략](#반응형-디자인-전략) 5. [접근성 가이드라인](#접근성-가이드라인) --- ## 개요 ### 프로젝트 정보 - **프로젝트명**: 회의록 작성 및 공유 개선 서비스 - **버전**: v1.0 - **작성일**: 2024-01-15 - **작성자**: 이미준 (서비스 기획자) ### 설계 목적 - 업무 지식이 없어도 누구나 쉽게 회의록을 작성하고 공유할 수 있는 서비스 - AI 기반 자동 회의록 작성 및 Todo 추출 기능 제공 - 관련 회의록 및 업무 이력과의 연결을 통한 맥락 기반 정보 제공 ### 주요 차별화 포인트 1. **맥락 기반 용어 설명**: 관련 회의록과 업무이력을 바탕으로 실용적인 정보 제공 2. **강화된 Todo 연결**: Action item이 담당자의 Todo와 실시간으로 연결 3. **프롬프팅 기반 회의록 개선**: AI를 활용한 다양한 형식의 회의록 생성 4. **회의록별 대시보드**: 회의 결과를 한눈에 파악할 수 있는 통합 뷰 --- ## 설계 원칙 ### 1. Mobile First - 모바일 화면을 우선 설계하고 태블릿/데스크톱으로 확장 - 모바일에서 핵심 기능이 모두 동작해야 함 - 터치 인터랙션 최적화 ### 2. 사용자 중심 설계 - 업무 지식이 없어도 직관적으로 사용 가능 - 최소한의 클릭으로 주요 작업 완료 - 명확한 피드백 제공 ### 3. 일관성 - 동일한 기능은 동일한 방식으로 동작 - 일관된 색상, 타이포그래피, 간격 시스템 - 플랫폼별 네이티브 패턴 준수 ### 4. 접근성 - WCAG 2.1 Level AA 준수 - 키보드 네비게이션 지원 - 스크린 리더 호환성 ### 5. 성능 - 초기 로딩 시간 3초 이내 - 인터랙션 반응 시간 100ms 이내 - 점진적 로딩을 통한 사용자 경험 개선 --- ## 회의록별 대시보드 ### 화면 개요 #### 목적 - 회의록이 확정된 후 회의 결과를 한눈에 파악할 수 있는 통합 뷰 제공 - 핵심 정보를 빠르게 확인하고 관련 자료로 이동할 수 있는 허브 역할 #### 진입 경로 1. 회의록 공유 화면에서 "대시보드" 탭 클릭 2. 전체 대시보드에서 특정 회의록 클릭 후 "대시보드" 탭 선택 #### 사용자 스토리 - 유저스토리 ID: **UFR-MEET-070** - "회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다." --- ### 화면 구조 #### 1. Header 영역 **구성 요소** - 뒤로가기 버튼: 회의록 본문으로 복귀 - 회의 제목: 큰 폰트로 강조 (H2) - 회의 메타 정보 - 날짜/시간 (아이콘: 📅) - 장소 (아이콘: 📍) - 참석자 수 (아이콘: 👥) - 탭 네비게이션 - 회의록 (기본 회의록 본문) - 대시보드 (현재 화면) - 타임라인 (시간순 발언 기록) **레이아웃** ``` ┌─────────────────────────────────────┐ │ ← 회의록으로 돌아가기 │ │ │ │ 2024 Q4 마케팅 전략 회의 │ │ 📅 2024-01-15 14:00 │ │ 📍 본사 대회의실 👥 참석자 5명 │ │ │ │ [회의록] [대시보드] [타임라인] │ └─────────────────────────────────────┘ ``` **스타일 가이드** - 배경색: #FFFFFF - 하단 경계선: 1px solid #E5E7EB - 제목 폰트: 24px, Bold, #111827 - 메타 정보: 14px, Regular, #6B7280 - 탭 활성화: Primary Color (#00D9B1), 하단 2px 보더 --- #### 2. 핵심내용 섹션 **구성 요소** 1. **섹션 헤더** - 아이콘: 💡 - 제목: "핵심내용" - 하단 경계선: 2px solid #F3F4F6 2. **핵심 포인트 리스트** (3-5개) - 번호 배지 (1, 2, 3...) - 핵심 내용 텍스트 - 좌측 Primary Color 보더 (3px) 3. **주요 키워드 태그** - 해시태그 형식 (#디지털마케팅, #예산증액 등) - 클릭 시 관련 섹션으로 이동 또는 관련 문서 검색 4. **회의 통계** - 참석자 수 - 회의 시간 - 발언 횟수 - 주요 의제 수 **레이아웃** ``` ┌─────────────────────────────────────┐ │ 💡 핵심내용 │ ├─────────────────────────────────────┤ │ ┃ ① Q4 마케팅 예산을 전년 대비 │ │ ┃ 30% 증액하여 디지털 채널... │ │ ┃ │ │ ┃ ② 신규 인플루언서 마케팅 캠페인 │ │ ┃ 을 2월부터 시작하며... │ │ ┃ │ │ ┃ ③ 경쟁사 분석 결과를 바탕으로... │ │ │ │ #디지털마케팅 #예산증액 #인플루언서│ │ │ │ ┌──────┬──────┬──────┬──────┐ │ │ │ 5명 │ 90분 │ 32회 │ 8개 │ │ │ │참석자│회의 │발언 │주요 │ │ │ │ │시간 │횟수 │의제 │ │ │ └──────┴──────┴──────┴──────┘ │ └─────────────────────────────────────┘ ``` **인터랙션** - 핵심 포인트 클릭: 해당 내용이 언급된 회의록 위치로 이동 - 키워드 태그 클릭: 관련 회의록/문서 검색 - 통계 항목 클릭: 상세 분석 정보 표시 (모달) **데이터 요구사항** - AI 분석 결과 (UFR-AI-010) - 핵심 포인트 텍스트 배열 (3-5개) - 주요 키워드 배열 - 회의록 섹션 링크 정보 - 회의 통계 데이터 - 참석자 수 - 회의 시작/종료 시간 - 발언 횟수 (화자별) - 의제 수 **에러 처리** - AI 분석 실패 시: "핵심 내용을 분석하는 중입니다. 잠시만 기다려주세요." 메시지 - 데이터 로딩 실패 시: "데이터를 불러올 수 없습니다. 새로고침 해주세요." 메시지 --- #### 3. 결정사항 섹션 **구성 요소** 1. **섹션 헤더** - 아이콘: ✅ - 제목: "결정사항" 2. **결정사항 카드** (여러 개) - 결정 내용 (Bold, 강조) - 결정자 정보 (아이콘: 👤, 이름, 직책) - 결정 시간 (아이콘: 🕐, HH:MM) - 결정 근거/배경 (접을 수 있는 영역) **레이아웃** ``` ┌─────────────────────────────────────┐ │ ✅ 결정사항 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ Q4 마케팅 예산 30% 증액 승인 │ │ │ │ (총 3억 → 3.9억) │ │ │ │ │ │ │ │ 👤 김민준 (마케팅 본부장) │ │ │ │ 🕐 14:25 │ │ │ │ │ │ │ │ ▼ 배경: 디지털 채널 성과가 │ │ │ │ 예상을 상회하며, 경쟁사... │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 인플루언서 마케팅 캠페인 2월 │ │ │ │ 1일 론칭 결정 │ │ │ │ ... │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **인터랙션** - 결정사항 카드 클릭: 해당 결정이 논의된 회의록 위치로 이동 - 배경 영역 클릭: 상세 내용 펼치기/접기 - 결정자 이름 클릭: 해당 참석자의 발언 목록 보기 **데이터 요구사항** - 결정사항 정보 - 결정 내용 텍스트 - 결정자 ID, 이름, 직책 - 결정 시간 (타임스탬프) - 결정 근거/배경 텍스트 - 회의록 섹션 링크 **에러 처리** - 결정사항 없음: "이 회의에서 결정된 사항이 없습니다." - 데이터 로딩 실패: 재시도 버튼 제공 --- #### 4. Todo 진행상황 섹션 **구성 요소** 1. **섹션 헤더** - 아이콘: 📋 - 제목: "Todo 진행상황" 2. **필터 버튼** - 전체 (개수) - 시작 전 (개수) - 진행 중 (개수) - 완료 (개수) 3. **담당자별 Todo 그룹** - 그룹 헤더 - 담당자 이름 (아이콘: 👤) - Todo 개수 배지 - Todo 카드 (여러 개) - Todo 제목 - 진행률 프로그레스 바 (0-100%) - 마감일 (D-day 형식) - 우선순위 배지 **레이아웃** ``` ┌─────────────────────────────────────┐ │ 📋 Todo 진행상황 │ ├─────────────────────────────────────┤ │ [전체 12] [시작 전 3] [진행 중 6] │ │ [완료 3] │ │ │ │ ┌─ 👤 박서연 (4개) ───────────────┐ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ 인플루언서 후보 리스트 작성 │ │ │ │ │ │ ████████░░ 75% D-5 [높음]│ │ │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ 디지털 채널별 예산 배분... │ │ │ │ │ │ ████░░░░░░ 40% D-2 [긴급]│ │ │ │ │ └─────────────────────────────┘ │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─ 👤 이준호 (3개) ───────────────┐ │ │ │ ... │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **인터랙션** - 필터 버튼 클릭: 해당 상태의 Todo만 표시 - Todo 카드 클릭: Todo 상세 정보 모달 표시 또는 Todo 관리 화면으로 이동 - 진행률 바 클릭: 진행률 업데이트 UI 표시 - 담당자 그룹 헤더 클릭: 그룹 접기/펼치기 **데이터 요구사항** - Todo 목록 (UFR-TODO-010 연동) - Todo ID - 제목 - 담당자 ID, 이름 - 진행률 (0-100%) - 상태 (시작 전/진행 중/완료) - 마감일 - 우선순위 (낮음/보통/높음/긴급) - 회의록 섹션 링크 **실시간 업데이트** - WebSocket 연결을 통해 Todo 진행상황 실시간 반영 (UFR-TODO-020) - 진행률 변경 시 프로그레스 바 애니메이션 - 상태 변경 시 해당 Todo 이동 애니메이션 **에러 처리** - Todo 없음: "할당된 Todo가 없습니다." - 데이터 로딩 실패: 재시도 버튼 제공 - 실시간 연결 끊김: "실시간 업데이트가 일시 중단되었습니다." 경고 표시 --- #### 5. 참고자료 섹션 **구성 요소** 1. **섹션 헤더** - 아이콘: 📚 - 제목: "참고자료" 2. **탭 네비게이션** - 관련 회의록 (개수) - 프로젝트 문서 (개수) - 이슈 트래커 (개수) - 위키 페이지 (개수) 3. **참고자료 카드** (여러 개) - 문서 아이콘 (타입별 다른 아이콘) - 문서 제목 - 메타 정보 - 작성일 - 작성자 - 관련도 점수 (%) - 요약 내용 (2-3줄) **레이아웃** ``` ┌─────────────────────────────────────┐ │ 📚 참고자료 │ ├─────────────────────────────────────┤ │ [관련 회의록 3] [프로젝트 문서 5] │ │ [이슈 트래커 2] [위키 페이지 4] │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 📄 2024 Q3 마케팅 전략 회의 │ │ │ │ 2023-12-20 • 김민준 • 92% │ │ │ │ 이전 분기 마케팅 전략 회의로, │ │ │ │ 디지털 채널 투자 확대 방향성이 │ │ │ │ 처음 논의되었으며... │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 📄 인플루언서 마케팅 효과 분석 │ │ │ │ 2024-01-05 • 박서연 • 88% │ │ │ │ 인플루언서 마케팅 ROI 분석... │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **인터랙션** - 탭 클릭: 해당 타입의 참고자료만 표시 - 참고자료 카드 클릭: 해당 문서로 이동 (새 탭 또는 현재 탭) - 관련도 점수 클릭: 관련도 계산 근거 표시 (툴팁) **데이터 요구사항** - 관련 회의록 (UFR-AI-040 연동) - 회의록 ID - 제목 - 날짜 - 참석자 (주 작성자) - 관련도 점수 (0-100%) - 요약 내용 (100자 이내) - 업무 이력 (UFR-RAG-030 연동) - 문서 ID - 문서 타입 (프로젝트 문서/이슈/위키) - 제목 - 작성일 - 작성자 - 관련도 점수 - 요약 내용 **에러 처리** - 참고자료 없음: "관련 참고자료가 없습니다." - 데이터 로딩 실패: 재시도 버튼 제공 - 문서 링크 오류: "문서를 불러올 수 없습니다." 메시지 --- ### 스타일 시스템 #### 색상 팔레트 **Primary Color** - Main: #00D9B1 (Turquoise) - Light: rgba(0, 217, 177, 0.1) - Dark: #00B794 **Secondary Color** - Gray Scale - 900: #111827 - 800: #1F2937 - 700: #374151 - 600: #6B7280 - 500: #9CA3AF - 400: #D1D5DB - 300: #E5E7EB - 200: #F3F4F6 - 100: #F9FAFB - 50: #FAFAFA **Status Colors** - Success: #10B981 - Warning: #F59E0B - Error: #EF4444 - Info: #3B82F6 #### 타이포그래피 **폰트 패밀리** - 기본: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif - 한글: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif **폰트 크기** - H1: 32px / 2rem (Bold) - H2: 24px / 1.5rem (Bold) - H3: 20px / 1.25rem (Semibold) - H4: 18px / 1.125rem (Semibold) - Body: 16px / 1rem (Regular) - Body Small: 14px / 0.875rem (Regular) - Caption: 12px / 0.75rem (Regular) **폰트 굵기** - Bold: 700 - Semibold: 600 - Medium: 500 - Regular: 400 **줄 높이** - 제목: 1.2 - 본문: 1.6 #### 간격 시스템 ``` spacing-1: 4px spacing-2: 8px spacing-3: 12px spacing-4: 16px spacing-5: 20px spacing-6: 24px spacing-8: 32px spacing-10: 40px spacing-12: 48px ``` #### 경계선 반경 ``` radius-sm: 4px radius-md: 8px radius-lg: 12px radius-xl: 16px radius-full: 9999px ``` #### 그림자 ``` shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1) shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15) ``` --- ## 반응형 디자인 전략 ### 브레이크포인트 ``` Mobile: 0-767px (기본) Tablet: 768-1023px Desktop: 1024px+ ``` ### 모바일 (0-767px) **레이아웃** - 단일 컬럼 레이아웃 - 패딩: 16px (spacing-4) - 섹션 간 간격: 24px (spacing-6) **회의록별 대시보드 최적화** - 통계 카드: 2x2 그리드 - Todo 그룹: 기본 펼침 상태, 스와이프로 접기/펼치기 - 참고자료 탭: 가로 스크롤 가능 **인터랙션** - 터치 타겟 최소 크기: 44x44px - 스와이프 제스처 지원 - 하단 고정 액션 버튼 ### 태블릿 (768-1023px) **레이아웃** - 2컬럼 레이아웃 (일부 섹션) - 패딩: 24px (spacing-6) - 섹션 간 간격: 32px (spacing-8) **회의록별 대시보드 최적화** - 통계 카드: 4x1 그리드 - Todo 그룹: 사이드바에 요약, 메인 영역에 상세 - 참고자료: 2컬럼 그리드 ### 데스크톱 (1024px+) **레이아웃** - 3컬럼 레이아웃 (대시보드 등) - 최대 너비: 1200px (중앙 정렬) - 패딩: 32px (spacing-8) - 섹션 간 간격: 48px (spacing-12) **회의록별 대시보드 최적화** - 통계 카드: 4x1 그리드 - Todo 그룹: 좌우 분할 레이아웃 (리스트/상세) - 참고자료: 3컬럼 그리드 - 호버 효과 강화 --- ## 접근성 가이드라인 ### WCAG 2.1 Level AA 준수 #### 1. 지각 가능성 (Perceivable) **색상 대비** - 일반 텍스트: 최소 4.5:1 - 큰 텍스트 (18px+ Bold, 24px+): 최소 3:1 - UI 컴포넌트: 최소 3:1 **대체 텍스트** - 모든 의미 있는 이미지에 alt 속성 제공 - 아이콘에는 aria-label 또는 visually-hidden 텍스트 제공 **색상에만 의존하지 않기** - 상태 표시 시 색상 + 아이콘/텍스트 병용 - 예: 에러 상태 = 빨간색 + ⚠️ 아이콘 + "오류" 텍스트 #### 2. 작동 가능성 (Operable) **키보드 네비게이션** - 모든 인터랙티브 요소에 키보드로 접근 가능 - Tab 키로 순차 이동 - Enter/Space 키로 활성화 - Esc 키로 모달/드롭다운 닫기 **포커스 표시** - 포커스된 요소에 명확한 시각적 표시 - 포커스 아웃라인: 2px solid #3B82F6 **충분한 시간** - 자동 타임아웃 시 경고 제공 - 시간 연장 옵션 제공 #### 3. 이해 가능성 (Understandable) **명확한 레이블** - 모든 폼 요소에 레이블 제공 - 플레이스홀더만으로 레이블 대체 금지 **에러 메시지** - 명확하고 구체적인 에러 메시지 - 해결 방법 제공 **일관된 네비게이션** - 동일한 기능은 동일한 위치에 배치 - 예측 가능한 동작 #### 4. 견고성 (Robust) **시맨틱 HTML** - 적절한 HTML5 태그 사용 - `
`, `