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 | 이미준 | 회의록별 대시보드 설계 추가 |