hgzero/design/uiux/uiux.md

# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서

## 문서 정보
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-29
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.6.0
- **설계 철학**: Mobile First Design

---

## 목차
1. [설계 개요](#설계-개요)
2. [프로토타입 화면 목록](#프로토타입-화면-목록)
3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
4. [화면 설계 표준](#화면-설계-표준)
5. [화면별 상세 설계](#화면별-상세-설계)
6. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
7. [인터랙션 패턴 라이브러리](#인터랙션-패턴-라이브러리)
8. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
9. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
10. [반응형 설계 전략](#반응형-설계-전략)
11. [접근성 보장 방안](#접근성-보장-방안)
12. [성능 최적화 방안](#성능-최적화-방안)
13. [변경 이력](#변경-이력)

---

## 설계 개요

### 설계 목표
업무 지식이 없는 회의 참여자 누구라도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공

### 설계 원칙

#### 1. Mobile First 철학
- **우선순위 중심**: 작은 화면에서 가장 중요한 콘텐츠와 기능에 집중
- **점진적 향상**: 모바일 기본 경험 우선 구축 후, 화면 크기에 따라 기능 확장
- **성능 최적화**: 모바일 환경의 제약사항(네트워크, 처리 능력) 우선 고려

#### 2. 사용자 중심 설계
- **직관적 인터페이스**: 최소한의 학습으로 사용 가능한 UI
- **명확한 피드백**: 모든 사용자 액션에 대한 즉각적이고 명확한 피드백
- **오류 방지**: 실수를 사전에 방지하는 안전장치 제공

#### 3. 일관성과 예측 가능성
- **일관된 UI 패턴**: 동일한 기능은 항상 동일한 방식으로 표현
- **예측 가능한 동작**: 사용자가 기대하는 대로 동작
- **표준 준수**: 플랫폼별 디자인 가이드라인 준수

### 유저스토리 매핑
- **User 서비스**: UFR-USER-010, UFR-USER-020
- **Meeting 서비스**: UFR-MEET-010 ~ UFR-MEET-060
- **STT 서비스**: UFR-STT-010, UFR-STT-020
- **AI 서비스**: UFR-AI-010, UFR-AI-020, UFR-AI-030, UFR-AI-040
- **RAG 서비스**: UFR-RAG-010, UFR-RAG-020
- **Collaboration 서비스**: UFR-COLLAB-030

[↑ 목차로 돌아가기](#목차)

---

## 프로토타입 화면 목록

| 번호 | 화면명 | 관련 유저스토리 | 중요도 | 사이드바 | 뒤로가기 |
|------|--------|----------------|---------|----------|----------|
| 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 | 높음 | X | X |
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | X | X |
| 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | X | O |
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | X | O |
| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | O | X |

[↑ 목차로 돌아가기](#목차)

---

## 화면 간 사용자 플로우

### 주요 시나리오

**시나리오 1: 새 회의 진행**
```
로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행 → 회의종료 → 회의록수정(선택) → 대시보드
```

**시나리오 2: 회의록 조회/수정**
```
로그인 → 대시보드 → 회의록상세조회 → 회의록수정 → 대시보드
```

**시나리오 3: 빠른 회의 시작**
```
로그인 → 대시보드 → 회의진행(기본 템플릿) → 회의종료 → 대시보드
```

[↑ 목차로 돌아가기](#목차)

---

## 화면 설계 표준

### 공통 화면 구조 템플릿

#### Mobile 기본 구조 (320px~768px)
```
┌─────────────────────────┐
│ 헤더 (Fixed)            │ ← 뒤로가기, 타이틀, 액션버튼
├─────────────────────────┤
│                         │
│ 메인 콘텐츠 영역         │
│ (스크롤 가능)            │
│                         │
├─────────────────────────┤
│ 하단 네비게이션 (Fixed)  │ ← 홈, 회의록 (2개)
└─────────────────────────┘
```

#### Desktop 기본 구조 (768px+)
```
┌──────┬──────────────────┐
│      │ 헤더 (Fixed)     │
│ 사이 ├──────────────────┤
│ 드바 │                  │
│ (固) │ 메인 콘텐츠 영역  │
│      │ (최대 너비 제한)  │
│      │                  │
└──────┴──────────────────┘
```

### 공통 레이아웃 패턴

#### 폼 레이아웃
- **Mobile**: 단일 컬럼, 전체 너비
- **Desktop**: 2컬럼 + 미리보기 패널(선택)

#### 카드 리스트
- **Mobile**: 단일 컬럼, 스택 레이아웃
- **Tablet**: 2컬럼 그리드
- **Desktop**: 2-3컬럼 그리드

#### 통계 카드
- **Mobile**: 2열 그리드 (~80px 높이)
- **Desktop**: 가로 배치, 간격 증가

### 공통 데이터 타입

#### 회의 기본 정보
- 회의 ID, 제목, 일시, 장소
- 참여자 목록, 참여자 수
- 생성자 ID, 상태(진행중/예정/완료)
- 생성일시, 수정일시

#### 회의록 정보
- 회의록 ID, 회의 ID 참조
- 상태(작성중/확정완료)
- 안건 구조, Todo 목록
- 검증완료율(작성중만)

#### 상태 배지
- **진행중**: 빨강 배지, "진행중"
- **예정**: 파랑 배지, "예정"
- **작성중**: 주황 배지, "작성중"
- **확정완료**: 초록 배지, "확정완료"

[↑ 목차로 돌아가기](#목차)

---

## 화면별 상세 설계

### 01-로그인

#### 개요
- **목적**: LDAP 인증 및 시스템 접근
- **관련 유저스토리**: UFR-USER-010
- **접근 경로**: 앱 최초 진입

#### 고유 기능
1. 사번/비밀번호 LDAP 인증
2. 로그인 상태 유지 옵션
3. 비밀번호 찾기/재설정

#### UI 구성
- **Mobile**: 중앙 정렬 로그인 폼 ([폼 레이아웃](#폼-레이아웃) 참조)
- **Desktop**: 좌측 서비스 소개 + 우측 로그인 폼

#### 인터랙션
- [폼 검증 패턴](#폼-검증) 참조
- Enter 키 → 다음 필드 이동/로그인 실행
- 성공 시 대시보드로 페이드 전환

#### 데이터
- **입력**: 사번(문자열), 비밀번호(문자열, 최소 8자)
- **출력**: 인증 토큰, 사용자 정보
- **연동**: User 서비스

#### 에러
- 인증 실패: "사번 또는 비밀번호가 올바르지 않습니다"
- 계정 잠금: "계정이 일시적으로 잠겼습니다"
- [네트워크 오류](#네트워크-오류), [서버 오류](#서버-오류) 참조

---

### 02-대시보드

#### 개요
- **목적**: 주요 기능 허브, 최근 활동 요약
- **관련 유저스토리**: UFR-USER-020
- **접근 경로**: 로그인 후 메인 화면

#### 고유 기능
1. **통계 카드** (2개): 예정된 회의, 작성중 회의록
2. **최근 회의** (최대 3개): 진행중 우선 → 예정 → 완료
   - 정렬: 회의록 미생성 우선, 빠른 일시 순
   - 생성자 표시(👑), 상태 배지
3. **내 회의록** (최대 4개, 2x2 그리드)
   - 최근 생성 순, 상태 배지
   - "전체 보기" → 12-회의록목록조회

#### UI 구성
- **헤더**: "안녕하세요 👋" + "오늘 N건의 회의가 예정되어 있어요"
- **통계 카드**: [통계 카드 레이아웃](#통계-카드) 참조 (2개)
- **네비게이션**: [하단 네비게이션](#mobile-하단-네비게이션-320px768px) / [사이드바](#desktop-좌측-사이드바-768px) 참조

#### 인터랙션
- **진행중 회의**: "참여하기" → 회의진행 화면
- **예정 회의 - 생성자**: 카드 클릭 → 회의예약(수정 모드)
- **예정 회의 - 참여자**: 카드 클릭 → "아직 참여할 수 없습니다" 알럿
- **완료 회의**: 카드 클릭 → 회의록상세조회
- [카드 호버](#카드-인터랙션) 참조

#### 데이터
- **입력**: 사용자 ID, 현재 날짜/시간
- **출력**:
  - 통계: 예정/진행중 회의 수, 작성중 회의록 수
  - 최근 회의: 회의 기본 정보 + 생성자 ID + 현재 사용자 역할
  - 내 회의록: 회의록 정보 ([공통 데이터 타입](#공통-데이터-타입) 참조)
- **연동**: Meeting 서비스

#### 에러
- 데이터 로딩 실패: 해당 카드에 "다시 시도" 버튼
- 부분 실패: 실패 섹션만 에러 표시
- 진행중 회의 참여 실패: "회의에 참여할 수 없습니다" + 원인별 안내

---

### 03-회의예약

#### 개요
- **목적**: 회의 일정 등록 및 참여자 초대
- **관련 유저스토리**: UFR-MEET-010
- **접근 경로**: 대시보드 → "회의 예약" 또는 예정 회의 카드 클릭(생성자)

#### 고유 기능
1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소)
2. 참여자 추가 (이메일/조직도 검색)
3. 회의 안건 사전 입력 (선택)
4. 참여자 초대 이메일 자동 발송

#### UI 구성
- **헤더**: 뒤로가기, "회의 예약", "저장"
- **폼**: [폼 레이아웃](#폼-레이아웃) 참조
  - 제목(필수, 100자), 날짜/시간(필수), 장소(선택)
  - 참여자(필수, 최소 1명, 칩 UI)
  - 안건(선택, 다중 라인)

#### 인터랙션
- **날짜/시간**: 달력 UI, 과거 비활성화, 충돌 감지
- **참여자 추가**: [참여자 관리 패턴](#참여자-관리) 참조
- **저장**: [폼 검증](#폼-검증) → 성공 토스트 → 대시보드

#### 데이터
- **입력**: 제목, 날짜, 시간, 장소, 참여자 이메일, 안건
- **출력**: 회의 ID, 초대 발송 결과
- **연동**: Meeting 서비스, Notification 서비스

#### 에러
- 필수 필드 누락: 빨간 테두리 + 오류 메시지
- 참여자 0명: "최소 1명의 참여자를 추가해주세요"
- 과거 날짜: "과거 날짜는 선택할 수 없습니다"

---

### 04-템플릿선택

#### 개요
- **목적**: 회의록 템플릿 선택 및 커스터마이징
- **관련 유저스토리**: UFR-MEET-020
- **접근 경로**: 회의예약 → "회의 시작" 또는 대시보드 → "새 회의 시작"
- **권한**: 회의 생성자 전용

#### 고유 기능
1. 사전 정의 템플릿 선택 (일반, 스크럼, 킥오프, 주간)
2. 템플릿 미리보기
3. 섹션 추가/삭제/순서 변경
4. 커스텀 템플릿 저장

#### UI 구성
- **헤더**: 뒤로가기, "템플릿 선택", "건너뛰기"
- **템플릿 카드**: 이름, 아이콘, 설명, "선택"/"미리보기" 버튼
- **커스터마이징**: 섹션 목록(드래그 가능), "섹션 추가", "이 템플릿으로 시작"

#### 인터랙션
- 템플릿 카드 클릭 → 상세 보기
- 섹션 드래그 → 순서 변경
- "선택" → 회의진행 화면
- [드래그 앤 드롭 패턴](#드래그-앤-드롭) 참조

#### 데이터
- **입력**: 회의 ID(선택)
- **출력**: 선택된 템플릿 구조
- **연동**: Meeting 서비스

#### 에러
- 템플릿 로딩 실패: "다시 시도" 버튼
- 빈 템플릿: "최소 1개의 섹션 필요"

---

### 05-회의진행

#### 개요
- **목적**: 실시간 회의 진행 및 AI 회의록 자동 작성
- **관련 유저스토리**: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-PART-020
- **접근 경로**: 대시보드 → "참여하기" 버튼
- **권한**:
  - 생성자: 회의 종료, 녹음 제어
  - 참여자: 참여, AI 메모 작성, 용어 확인, 중도 퇴장

#### 고유 기능
1. 음성 STT 및 AI 자동 회의록 작성
2. **AI 기반 메모** (UFR-PART-020): AI가 감지한 주요 내용을 선택하여 개인 메모 저장
3. 전문용어 자동 감지 및 맥락 기반 설명
4. 참고자료 자동 연결 (관련 회의록 32건)
5. 참여자 관리 및 초대

#### UI 구성
- **헤더**: "회의 진행 중" + 경과시간 배지 + "회의 종료"
- **탭 네비게이션** (4개)
  - 참여자 (인원수), AI 기반 메모, 용어 사전, 관련 자료(32건)

#### 탭 콘텐츠
**참여자 탭**:
- 참여자 추가 폼 (이메일 + "초대")
- 참여자 목록 (아바타 + 이름)

**AI 기반 메모 탭**:
- 메모 입력창 + "저장"
- AI가 감지한 주요 내용 리스트 ("[HH:MM] 내용")
- 클릭 시 메모 입력창에 자동 추가
- 정책: 개인별 저장, 회의 종료 전까지만 표시

**용어 사전 탭**:
- 검색 입력창
- 용어 카드 (용어명 + 배지 + 정의 + 컨텍스트)
- 언급된 용어는 민트 그린 배경 + 💬 아이콘

**관련 자료 탭**:
- 관련 회의록 카드 (제목 + 날짜 + 관련도 + 요약)
- 카드 클릭 → 새 탭 열기

#### 인터랙션
- 탭 전환: 클릭으로 콘텐츠 교체
- 참여자 초대: [참여자 관리 패턴](#참여자-관리) 참조
- AI 메모 저장: "저장" 클릭 → "N개 메모 저장됨" 토스트
- 용어 검색: 실시간 필터링
- 회의 종료: 확인 다이얼로그 → 07-회의종료

#### 데이터
- **입력**: 회의 ID, 오디오 스트림, 참여자 이메일
- **출력**: STT 텍스트, AI 주요 내용, 개인 메모, 용어 사전, 관련 회의록
- **연동**: STT, AI, RAG, PARTICIPANT 서비스

#### 에러
- 마이크 권한 거부: "마이크 권한 필요" + 설정 안내
- STT 실패: "음성 인식 실패" + 재시도
- 메모 저장 실패: "메모 저장 실패" + 재시도
- 용어/자료 로드 실패: 빈 상태 메시지

---

### 07-회의종료

#### 개요
- **목적**: AI 요약 확인 및 다음 단계 선택
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-010, UFR-AI-020, UFR-AI-036
- **접근 경로**: 회의진행 → "회의 종료"
- **권한**: 회의 생성자 전용
- **정책**: 확인 전용 화면 (편집 불가)

#### 고유 기능
1. 회의 통계 (시간, 참여자, 키워드)
2. **안건별 AI 요약 전체 표시**
   - AI 한줄 요약 (30자, 읽기 전용, 🔒)
   - 상세 요약 정리
   - Todo 자동 추출 결과
3. **3가지 선택 옵션**
   - 회의록 수정 (11번 화면)
   - 바로 최종 확정 (모든 안건 자동 검증완료)
   - 대시보드로 이동 (작성중 상태 유지)

#### UI 구성
- **헤더**: "회의가 종료되었습니다" + 회의 제목
- **통계 카드**: 회의 시간, 참여자, 키워드 클라우드
- **안건 카드**: 제목 + AI 한줄 요약(회색 배경, 민트 그린 액센트) + 상세 요약 + Todo
- **액션 바**: "회의록 수정"(Secondary), "바로 최종 확정"(Primary), "대시보드로 이동"(Ghost)

#### 인터랙션
- 안건 카드 확장/축소
- AI 한줄 요약 호버 → "편집 불가" 툴팁
- **옵션 1**: 11-회의록수정 이동 (작성중 상태)
- **옵션 2**: 확인 다이얼로그 → 모든 안건 검증완료 처리 → 확정완료 → 10-회의록상세조회
- **옵션 3**: 대시보드 이동 (작성중 상태)

#### 데이터
- **입력**: 회의 ID
- **출력**: 통계, 안건별 AI 요약(한줄 + 상세), Todo 목록, 회의록 상태
- **연동**: Meeting, AI 서비스

#### 에러
- 통계 생성 실패: "건너뛰기" 옵션
- AI 요약 실패: "회의록 수정 화면에서 직접 작성해주세요"
- 바로 확정 실패: "다시 시도" 버튼
- [네트워크 오류](#네트워크-오류) 참조 (자동 재시도 3회)

---

### 10-회의록상세조회

#### 개요
- **목적**: 회의록 전체 내용 및 상세 정보 확인
- **관련 유저스토리**: UFR-MEET-047, UFR-AI-040, UFR-MEET-048
- **접근 경로**: 대시보드 → "내 회의록" 클릭
- **권한**: 모든 참여자 (조회 전용)

#### 고유 기능
1. 회의 기본 정보 + 상태 배지
2. **2개 탭 구조**: 대시보드 / 회의록
3. **대시보드 탭**: 핵심내용, 결정사항, Todo, 참고자료 요약
4. **회의록 탭**: 안건별 구조 (AI 요약 + 내용 + 참고자료)

#### UI 구성
- **헤더**: 뒤로가기, 회의 제목, "수정"(우측), 메뉴
- **기본 정보 카드**: 일시, 참여자, 장소, 상태, 작성자
- **탭 네비게이션**: 대시보드 (기본) / 회의록

**대시보드 탭**:
- 핵심내용 (4-5개 포인트, 키워드 클라우드, 통계)
- 결정사항 (카드 리스트)
- Todo 진행상황 (제목 + 담당자 + 마감일만, D-day/우선순위 제거)
- 참고자료 (관련 회의록/문서, 관련도 배지)

**회의록 탭**:
- 각 안건: 제목 + 검증 배지 + AI 요약(강조 박스) + 내용 + 참고자료(링크 리스트)

#### 인터랙션
- 탭 전환: 클라이언트 사이드 렌더링
- 안건 네비게이션: 제목 클릭 → 스크롤
- AI 요약 편집: "수정" → 인라인 편집 (권한 있는 경우)
- 참고자료 링크: 새 탭 열기, 관련도 색상 코딩
- "수정" 버튼: 11-회의록수정
- "공유" 버튼: 회의록공유 화면

#### 데이터
- **입력**: 회의록 ID, 활성 탭
- **출력**:
  - 회의 기본 정보, 안건별 AI 요약, 안건별 내용
  - 참고자료 (회의록/문서, 관련도)
  - 대시보드 데이터 (핵심내용, 결정사항, Todo, 통계)
- **연동**: Meeting, AI 서비스

#### 에러
- 회의록 로딩 실패: "다시 시도"
- AI 요약 로딩 실패: 안건 내용은 정상 표시
- 참고자료 로딩 실패: 빈 상태
- 대시보드 로딩 실패: "다시 시도"
- 권한 없음: "수정" 비활성화

---

### 11-회의록수정

#### 개요
- **목적**: 회의록 조회 및 수정
- **관련 유저스토리**: UFR-MEET-055, UFR-AI-040, UFR-COLLAB-030
- **접근 경로**: 10-회의록상세조회 → "수정" 버튼
- **권한 제어**:
  - 검증완료 전: 모든 참여자 수정 가능
  - 검증완료 후: 회의 생성자만 수정 가능

#### 고유 기능
1. 회의 기본 정보 수정
   - 제목: 수정 가능
   - 일시/장소: 읽기 전용
   - 참여자: 생성자만 추가/삭제
2. **안건별 편집**
   - AI 요약 (한줄, 30자, 읽기 전용)
   - 텍스트 편집 영역 (안건 내용 자유 작성)
   - "AI 재생성" 버튼 (한줄 요약 재생성, 2-5초)
   - 참고자료 추가/제거
3. **Todo 단순 조회** (제목 + 담당자 + 마감일만)
4. **안건별 검증 완료 체크박스**
   - 생성자: 체크박스 활성, 잠금 해제 가능
   - 참여자: 검증완료 안건 읽기 전용
5. 자동 저장 (30초 간격)
6. 상태 변경 (확정완료 → 작성중)

#### UI 구성
- **헤더**: 뒤로가기, "회의록 수정", "저장", 자동 저장 인디케이터
- **기본 정보**: 제목(편집), 일시(읽기), 장소(읽기), 참여자(생성자만 편집)
- **안건 편집**:
  - 헤더 (제목 + 검증 배지)
  - AI 요약 (읽기 전용, 회색 배경, 민트 액센트)
  - 텍스트 편집 (textarea) + "AI 재생성"
  - 참고자료 편집 ("참고자료 추가")
  - Todo 섹션 (읽기 전용)
  - 검증 영역 (체크박스 + "잠금 해제")

#### 인터랙션
- 화면 진입: 권한 확인 (검증완료 후 생성자만)
- 내용 수정: 자동 저장 30초, "저장" 수동
- **AI 한줄 요약**: 읽기 전용, 호버 → "편집 불가" 툴팁
- **AI 재생성**: 텍스트 편집 내용 기반으로 한줄 요약 재생성
- **안건별 검증**:
  - 생성자: 체크박스 클릭 → 검증완료/미검증 토글
  - 생성자: "잠금 해제" → 확인 다이얼로그 → 편집 가능
  - 참여자: 검증완료 안건 모든 필드 disabled
- **참고자료 편집**: [참고자료 관리 패턴](#참고자료-관리) 참조
- **저장 로직**: 검증완료 안건 스킵, "N개 안건 저장, M개 스킵" 알림
- **충돌 방지**: Last Write Wins (안건별 독립)

#### 데이터
- **입력**: 회의록 ID, 수정 내용, AI 요약 수정, 참고자료 변경, 안건별 검증 상태
- **출력**: 수정 결과, AI 한줄 요약(읽기), AI 상세 요약 재생성 결과, 수정 이력
- **연동**: Meeting, AI(UFR-AI-036, UFR-AI-040), COLLAB 서비스

#### 에러
- 권한 없음: "본인이 작성한 회의록만 수정 가능"
- 자동 저장 실패: "네트워크 확인, 로컬 임시 저장"
- AI 재생성 실패: "수동 작성해주세요"
- 참고자료 검색 실패: "회의록 검색 불가"
- 검증완료 저장 시도: 스킵 알림 + 목록 표시

---

### 12-회의록목록조회

#### 개요
- **목적**: 회의록 목록 조회 및 필터링/정렬/검색
- **관련 유저스토리**: UFR-MEET-046
- **접근 경로**: 대시보드 → "전체 보기" 또는 하단 네비게이션 → "회의록"
- **권한**: 모든 참여자 (본인 참여 회의록만)

#### 고유 기능
1. **필터링**: 참여 유형 (전체/참여/생성), 상태 (전체/작성중/확정완료)
2. **정렬**: 최근수정순 (기본), 최근회의순, 제목순
3. **검색**: 제목, 참여자, 키워드 통합 검색 (실시간)
4. **페이지네이션**: 초기 10개, "10개 더보기"

#### UI 구성
- **헤더**: 뒤로가기, "내 회의록", 검색 아이콘
- **필터/정렬**:
  - 필터 행 (2컬럼): 상태 Select + 정렬 Select
  - 참여 유형 탭 (선택): 전체/참여/생성
- **검색**: "회의 제목, 참여자, 키워드 검색" placeholder
- **통계 카드** (3컬럼): 전체, 작성중, 확정완료 개수
- **회의록 목록**:
  - 각 항목: 제목 + 생성자(👑) + 일시/참여자 + 검증완료율(작성중만) + 수정시간 + 상태 배지
  - 빈 상태: "검색 결과 없음" / "회의록 없음"
- **네비게이션**: [하단 네비게이션](#mobile-하단-네비게이션-320px768px) / [사이드바](#desktop-좌측-사이드바-768px) 참조

#### 인터랙션
- 필터/정렬 변경 → 즉시 재렌더링
- 검색 입력 → 실시간 (debounce 300ms)
- 회의록 클릭 → 10-회의록상세조회
- 통계 자동 갱신 (필터/검색 적용 시)

#### 데이터
- **입력**: 사용자 ID, 필터(참여 유형, 상태), 정렬, 검색어
- **출력**: 회의록 목록 (회의 기본 정보 + 생성자 ID + 조회 권한), 통계 (전체/작성중/확정완료 개수)
- **연동**: Meeting 서비스

#### 에러
- 데이터 로딩 실패: "다시 시도" 버튼
- 검색 실패: 토스트, 기존 목록 유지
- [네트워크 오류](#네트워크-오류) 참조 (자동 재시도 3회)
- 권한 없음: 클릭 시 "접근 권한 없음" 토스트
- 빈 상태: "검색 결과 없음" / "조건에 맞는 회의록 없음" / "회의록 없음 + 회의 시작 버튼"

[↑ 목차로 돌아가기](#목차)

---

## 공통 UI 컴포넌트

### 네비게이션

#### Mobile 하단 네비게이션 (320px~768px)
- **위치**: Fixed, 하단 (64px)
- **구성**: 2개 항목 균등 분할
  - 홈 (🏠, "홈", 대시보드)
  - 회의록 (📋, "회의록", 회의록 목록)
- **활성 상태**: 민트 그린 (#4DD5A7)
- **비활성**: 회색 (#6B7280)

#### Desktop 좌측 사이드바 (768px+)
- **위치**: Fixed, 좌측 (240px)
- **구성**:
  - 상단: 로고 + 서비스명
  - 메인 메뉴: 대시보드, 내 회의록
  - 하단: 사용자 정보 + 로그아웃

#### 상단 헤더 (공통)
- **위치**: Sticky, 상단
- **구성**: 뒤로가기(조건부), 타이틀, 액션 버튼
- **Mobile 전용**: 우측 프로필 아이콘(👤) → 드롭다운 (이름 + 로그아웃)
- **Desktop**: 프로필 숨김 (사이드바 사용)

[↑ 목차로 돌아가기](#목차)

---

## 인터랙션 패턴 라이브러리

### 폼 검증
- **실시간 검증**: 입력 시 형식 오류 즉시 표시
- **제출 검증**: 빈 필드 → 해당 필드로 포커스
- **오류 표시**: 필드 하단 빨간 텍스트 (14px)

### 카드 인터랙션
- **기본**: 배경 흰색, 테두리 회색, 둥글기 8px
- **호버**: 그림자 증가, 약간 상승 (translateY(-2px))
- **클릭**: 해당 상세 화면으로 이동

### 참여자 관리
- **추가 폼**: 이메일 입력 + "초대" 버튼
- **유효성 검증**: 이메일 정규식 체크
- **성공**: "{email}에게 초대 링크 전송" 토스트
- **참여자 목록**: 아바타 + 이름, 삭제(×) 버튼

### 참고자료 관리
- **추가**: "참고자료 추가" → 회의록 검색 모달 → 선택 추가
- **제거**: X 버튼 클릭
- **순서 변경**: 드래그 앤 드롭 (선택)

### 드래그 앤 드롭
- **터치**: 길게 누르기 → 드래그 시작
- **마우스**: 클릭 드래그
- **피드백**: 드래그 중 반투명, 드롭 위치 표시

### 모달 표시
- **Mobile**: 바텀시트 (하단 슬라이드 업)
- **Desktop**: 중앙 모달
- **닫기**: Esc 키, 배경 클릭, X 버튼

### 로딩 상태
- **스켈레톤 UI**: 리스트 로딩 중 표시
- **로딩 인디케이터**: 버튼 클릭 시 스피너
- **프로그레스 바**: 파일 업로드/다운로드

[↑ 목차로 돌아가기](#목차)

---

## 공통 에러 메시지 표준

### 네트워크 오류
- **메시지**: "네트워크 연결을 확인해주세요"
- **재시도**: 자동 3회 (1s, 2s, 4s exponential backoff)
- **UI**: 빨강 토스트 + "다시 시도" 버튼

### 데이터 로딩 실패
- **메시지**: "일시적으로 데이터를 불러올 수 없습니다"
- **UI**: 빈 상태 화면 + "다시 시도" 버튼

### 권한 오류
- **메시지**: "접근 권한이 없습니다"
- **액션**: 3초 후 이전 화면 또는 대시보드 복귀
- **UI**: 주황 토스트

### 인증 오류
- **메시지**: "로그인이 필요합니다"
- **액션**: 로그인 화면 리다이렉트
- **UI**: 파랑 토스트

### 입력 검증 오류
- 이메일: "올바른 이메일 형식이 아닙니다"
- 필수 입력: "필수 항목을 입력해주세요"
- 날짜: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)"
- **UI**: 입력 필드 하단 빨강 메시지

### 서버 오류
- **메시지**: "서버에 일시적인 문제가 발생했습니다"
- **UI**: 빨강 토스트 + "다시 시도" 버튼
- **로깅**: Sentry로 오류 전송

[↑ 목차로 돌아가기](#목차)

---

## 화면 간 전환 및 네비게이션

### 네비게이션 구조
- **Mobile**: [하단 네비게이션](#mobile-하단-네비게이션-320px768px) + [상단 헤더](#상단-헤더-공통)
- **Desktop**: [좌측 사이드바](#desktop-좌측-사이드바-768px) + Breadcrumbs(선택)

### 전환 애니메이션
- **화면 전환**: 페이드/슬라이드 (200-300ms)
- **모달**: 페이드 인 + 스케일 (150ms)
- **탭 전환**: 페이드 (100ms)
- **리스트 로딩**: 스켈레톤 UI → 페이드 인

### 딥 링크
- 회의록: `/minutes/{minuteId}`
- Todo: `/todo/{todoId}`
- 공유: `/share/{shareToken}`

[↑ 목차로 돌아가기](#목차)

---

## 반응형 설계 전략

### 브레이크포인트
- **Mobile**: 320px ~ 767px
- **Tablet**: 768px ~ 1023px
- **Desktop**: 1024px+

### 레이아웃 전략
1. **320px 기준**: 단일 컬럼, 필수 기능만, 하단 네비게이션
2. **768px 확장**: 2컬럼, 추가 정보, 사이드바 도입
3. **1024px 최적화**: 3컬럼, 좌측 사이드바, 마우스/키보드 강화

### 컴포넌트별 반응형
- **폼**: Mobile 단일 → Desktop 2컬럼 + 미리보기
- **리스트**: Mobile 스택 → Tablet 2컬럼 → Desktop 3컬럼 그리드
- **테이블**: Mobile 카드 변환 → Desktop 고정 헤더 테이블

### 이미지 및 미디어
- Responsive Images: srcset
- Lazy Loading: Intersection Observer
- 최적화: WebP, 압축

[↑ 목차로 돌아가기](#목차)

---

## 접근성 보장 방안

### WCAG 2.1 Level AA 준수

#### 1. Perceivable
- **텍스트 대안**: 모든 이미지 alt
- **색상 대비**: 4.5:1 (일반), 3:1 (대형)
- **텍스트 크기**: 200% 확대 가능
- **색상 독립**: 아이콘/텍스트 병행

#### 2. Operable
- **키보드**: Tab, Shift+Tab, Enter/Space, Esc
- **포커스**: 2px 파란 테두리
- **터치 영역**: 최소 44x44px
- **시간 제한**: 자동 저장으로 방지

#### 3. Understandable
- **명확한 레이블**: 모든 입력 필드
- **오류 안내**: 명확한 설명 + 해결 방법
- **일관된 UI**: 동일 기능 = 동일 위치/아이콘

#### 4. Robust
- **시맨틱 HTML**: header, nav, main, aside, footer
- **ARIA**: role, aria-label, aria-describedby, aria-live
- **호환성**: 최신 브라우저 + 보조 기술

### 테스트
- 자동: Lighthouse, axe DevTools
- 수동: 키보드, 스크린 리더 (NVDA, JAWS, VoiceOver)

[↑ 목차로 돌아가기](#목차)

---

## 성능 최적화 방안

### 1. 로딩 성능
- **Code Splitting**: 라우트별 청크
- **Lazy Loading**: 이미지(Intersection Observer), 컴포넌트(React.lazy)
- **Pre-fetching**: 다음 화면 리소스
- **CDN**: 정적 리소스 배포

### 2. 렌더링 성능
- **Virtual Scrolling**: 긴 리스트
- **Debounce/Throttle**: 검색(300ms), 스크롤(100ms)
- **Memoization**: React.memo, useMemo, useCallback
- **CSS 애니메이션**: JavaScript 대신

### 3. 네트워크 최적화
- **API**: 필요 데이터만, 배치 요청
- **캐싱**: Cache-Control, Service Worker, React Query
- **압축**: Gzip, Brotli

### 4. 실시간 동기화
- **WebSocket**: Delta 전송, 배치 업데이트, 지수 백오프
- **Conflict Resolution**: OT 또는 CRDT

### 5. 성능 모니터링
- **Core Web Vitals**: LCP <2.5s, FID <100ms, CLS <0.1
- **모니터링**: Sentry, Google Analytics

### 목표
- FCP: <1.5s, TTI: <3.5s
- Page Load (3G): <5s
- STT: <1s, 실시간 동기화: <500ms

[↑ 목차로 돌아가기](#목차)

---

## 변경 이력

| 버전 | 날짜 | 작성자 | 변경 내용 요약 |
|------|------|--------|----------------|
| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 |
| 1.1.x | 2025-10-21 | 이미준 | AI 요약/참고자료 기능 추가, 대시보드 개선, 회의록 목록 추가 |
| 1.2.x | 2025-10-21 | 이미준, 최유진 | 역할 기반 접근 제어, 회의진행 개선, 스타일 가이드 작성 |
| 1.3.x | 2025-10-21 | 이미준, 도그냥 | 반응형 네비게이션, 회의진행 2열 구조, 공통 컴포넌트 표준화 |
| 1.4.x | 2025-10-22~25 | 이미준, 강지수, 도그냥 | Todo 강화, 화면 재정렬, 검증완료 정책, 용어 통일(생성자/참여자), STT 화자 식별 불가 반영 |
| 1.5.1~1.5.9 | 2025-10-27~28 | 강지수, 도그냥 | MVP v2.4.0~2.4.5 반영: Todo 단순화, AI 메모 기능, 검증완료 강화, 네비게이션 간소화, 용어 통일(참여자/참여) |
| **1.6.0** | 2025-10-29 | 강지수 | **문서 구조 최적화 및 중복 제거 (토큰 효율성 개선)**: 화면 설계 표준 섹션 신규 추가, 인터랙션 패턴 라이브러리 신규 추가, 각 화면 설계 참조 링크 기반으로 간소화, 변경 이력 요약 테이블 형식, 약 35-40% 토큰 절감 |

**주요 버전 세부 변경 사항**:
- **v1.1**: UFR-AI-040 관련 회의록 자동 연결, AI 요약 기능 추가
- **v1.2**: 진행중 회의 표시, 예정 회의 권한 차별화
- **v1.3**: Mobile 하단 네비게이션 3개 → 2개, Desktop 사이드바, AI 제안 탭 상세화
- **v1.4**: Todo 관리 확장, 검증완료 잠금, 참석자 → 참여자 용어 통일
- **v1.5**: MVP 스코프 축소 (Todo 단순 조회, AI 메모 기능, 실시간 협업 제거, Last Write Wins 적용)
- **v1.6**: 문서 구조 최적화 (토큰 35-40% 절감)

[↑ 목차로 돌아가기](#목차)

---

**문서 끝**