hgzero/design/uiux/uiux.md

회의록 서비스 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 태그 사용
• <header>, <nav>, <main>, <section>, <article> 등

ARIA 속성

• role, aria-label, aria-describedby 등 적절히 사용
• 동적 콘텐츠에 aria-live 적용

---

성능 최적화

로딩 전략

초기 로딩

• Critical CSS 인라인
• 폰트 preload
• 이미지 lazy loading

코드 스플리팅

• 라우트별 번들 분리
• 동적 import 활용

캐싱 전략

• 정적 리소스: 장기 캐싱
• API 응답: 적절한 캐시 정책
• Service Worker 활용

렌더링 최적화

가상 스크롤

• 긴 리스트에 가상 스크롤 적용
• 예: Todo 목록, 회의 목록

애니메이션

• CSS transform/opacity 사용
• JavaScript 애니메이션 최소화
• requestAnimationFrame 활용

WebSocket 최적화

• 필요한 경우에만 연결
• 재연결 로직 구현
• 메시지 배칭

---

구현 우선순위

Phase 1: MVP (4주)

1. 로그인 화면
2. 전체 대시보드
3. 회의 예약
4. 회의 진행 (기본 기능)
5. 회의록 공유

Phase 2: 핵심 기능 (4주)

1. 회의록별 대시보드
2. Todo 관리
3. 실시간 협업
4. 템플릿 선택

Phase 3: 고도화 (4주)

1. AI 기반 회의록 개선
2. 관련 문서 자동 연결
3. 회의 효율성 분석
4. 고급 검색

---

변경 이력

버전	날짜	작성자	변경 내용
1.0	2024-01-15	이미준	회의록별 대시보드 설계 추가