hgzero/design/uiux/style-guide.bk.md

# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드

## 문서 정보
- **작성일**: 2025-10-21
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.0
- **기반**: Mobile First Design Philosophy

---

## 목차
1. [브랜드 아이덴티티](#브랜드-아이덴티티)
2. [디자인 원칙](#디자인-원칙)
3. [컬러 시스템](#컬러-시스템)
4. [타이포그래피](#타이포그래피)
5. [간격 시스템](#간격-시스템)
6. [컴포넌트 스타일](#컴포넌트-스타일)
7. [반응형 브레이크포인트](#반응형-브레이크포인트)
8. [서비스 특화 컴포넌트](#서비스-특화-컴포넌트)
9. [인터랙션 패턴](#인터랙션-패턴)
10. [아이콘 시스템](#아이콘-시스템)
11. [애니메이션 가이드](#애니메이션-가이드)
12. [상태 표시](#상태-표시)
13. [접근성 표준](#접근성-표준)
14. [변경 이력](#변경-이력)

---

## 1. 브랜드 아이덴티티

### 디자인 컨셉
**"정확하고 지능적인 협업"**

업무 지식이 없어도 AI의 도움으로 정확한 회의록을 작성하고, 실시간으로 협업하며, 효율적으로 공유할 수 있는 전문적이면서도 접근하기 쉬운 서비스.

### 핵심 가치
- **정확성 (Accuracy)**: AI 기반 자동 작성과 맥락 기반 용어 설명으로 정확한 회의록 보장
- **협업 (Collaboration)**: 실시간 동기화와 섹션별 검증으로 참석자 간 원활한 협업
- **지능 (Intelligence)**: AI 자동 요약, Todo 추출, 관련 회의록 연결 등 스마트한 기능
- **효율성 (Efficiency)**: Mobile First 설계로 언제 어디서나 빠르고 편리한 접근

### 브랜드 성격
- **전문적 (Professional)**: 비즈니스 환경에 적합한 신뢰감
- **접근 가능 (Accessible)**: 누구나 쉽게 사용할 수 있는 직관성
- **스마트 (Smart)**: AI 기술의 지능적 활용
- **협력적 (Collaborative)**: 팀워크를 촉진하는 협업 중심

### 디자인 키워드
- Clean & Modern
- Intuitive & User-friendly
- Professional & Trustworthy
- Collaborative & Connected
- AI-powered & Smart

---

## 2. 디자인 원칙

### 2.1 Mobile First
**작은 화면에서 시작하여 큰 화면으로 확장**

- **우선순위 중심**: 제한된 공간에서 가장 중요한 기능과 정보에 집중
- **점진적 향상**: 모바일 기본 경험을 먼저 완성하고, 화면이 커질수록 기능 추가
- **성능 최적화**: 모바일 환경의 제약(네트워크, 처리 능력)을 우선 고려
- **터치 우선**: 터치 인터랙션을 기본으로 설계, 마우스는 추가 기능

### 2.2 사용자 중심 설계
**사용자가 목표를 쉽게 달성할 수 있도록 지원**

- **단순함 (Simplicity)**: 복잡한 기능을 간단하게 표현
- **일관성 (Consistency)**: 동일한 패턴과 용어를 전체 서비스에서 일관되게 사용
- **피드백 (Feedback)**: 모든 사용자 액션에 즉각적이고 명확한 반응 제공
- **오류 방지 (Error Prevention)**: 실수를 사전에 차단하고, 발생 시 명확한 해결 방법 제공

### 2.3 접근성 우선
**모든 사용자가 동등하게 사용할 수 있도록 설계**

- **WCAG 2.1 Level AA 준수**: 국제 웹 접근성 표준 충족
- **키보드 네비게이션**: 모든 기능을 키보드만으로 조작 가능
- **스크린 리더 지원**: 시각장애인을 위한 적절한 ARIA 속성 제공
- **색상 대비**: 최소 4.5:1 대비율로 가독성 보장

### 2.4 실시간 협업 지원
**여러 사용자가 동시에 작업할 수 있도록 최적화**

- **즉각적 동기화**: 변경 사항을 실시간으로 모든 참석자에게 전달
- **충돌 방지**: 동시 편집 충돌을 사전 감지 및 해결
- **명확한 상태 표시**: 누가 무엇을 하고 있는지 실시간으로 표시

### 2.5 AI 투명성
**AI 기능을 이해하기 쉽고 신뢰할 수 있게 표현**

- **진행 상황 표시**: AI 처리 중임을 명확히 알림
- **신뢰도 표시**: AI 결과의 신뢰도를 시각적으로 전달
- **수정 가능성**: AI 결과를 언제든 수동으로 수정 가능

---

## 3. 컬러 시스템

### 3.1 Primary Colors (주요 색상)

#### Blue (메인 브랜드 색상)
전문성, 신뢰, 기술을 나타내는 주요 색상

- **Primary 50**: `#E3F2FD` - 배경, 하이라이트
- **Primary 100**: `#BBDEFB` - 호버 배경
- **Primary 200**: `#90CAF9` - 비활성 상태
- **Primary 300**: `#64B5F6` - 보조 요소
- **Primary 400**: `#42A5F5` - 인터랙티브 요소
- **Primary 500**: `#2196F3` ⭐ **기본** - 주요 버튼, 링크
- **Primary 600**: `#1E88E5` - 호버 상태
- **Primary 700**: `#1976D2` - Active 상태
- **Primary 800**: `#1565C0` - 강조
- **Primary 900**: `#0D47A1` - 최고 강조

**사용 예시:**
- 주요 액션 버튼 (회의 시작, 저장, 공유)
- 링크 텍스트
- 선택된 탭/메뉴
- 진행 바
- 포커스 인디케이터

### 3.2 Secondary Colors (보조 색상)

#### Green (성공, 완료)
완료 상태, 긍정적 액션을 나타냄

- **Secondary 50**: `#E8F5E9`
- **Secondary 100**: `#C8E6C9`
- **Secondary 500**: `#4CAF50` ⭐ **기본**
- **Secondary 700**: `#388E3C`
- **Secondary 900**: `#1B5E20`

**사용 예시:**
- 검증 완료 배지
- Todo 완료 체크
- 성공 메시지
- 진행률 표시

#### Purple (AI 기능)
AI 관련 기능을 시각적으로 구분

- **Accent 50**: `#F3E5F5`
- **Accent 100**: `#E1BEE7`
- **Accent 500**: `#9C27B0` ⭐ **기본**
- **Accent 700**: `#7B1FA2`

**사용 예시:**
- AI 자동 작성 인디케이터
- 전문용어 하이라이트
- AI 제안 배지
- 맥락 기반 설명 툴팁

### 3.3 Semantic Colors (의미 색상)

#### Success (성공)
- **Color**: `#4CAF50` (Green 500)
- **Background**: `#E8F5E9` (Green 50)
- **사용**: 성공 메시지, 완료 상태

#### Warning (경고)
- **Color**: `#FF9800` (Orange 500)
- **Background**: `#FFF3E0` (Orange 50)
- **사용**: 경고 메시지, 주의 필요

#### Error (오류)
- **Color**: `#F44336` (Red 500)
- **Background**: `#FFEBEE` (Red 50)
- **사용**: 오류 메시지, 필수 항목 누락

#### Info (정보)
- **Color**: `#2196F3` (Blue 500)
- **Background**: `#E3F2FD` (Blue 50)
- **사용**: 정보 메시지, 안내

### 3.4 Neutral Colors (중립 색상)

#### Gray Scale
텍스트, 배경, 테두리에 사용

- **Gray 50**: `#FAFAFA` - 페이지 배경
- **Gray 100**: `#F5F5F5` - 카드 배경
- **Gray 200**: `#EEEEEE` - 비활성 배경
- **Gray 300**: `#E0E0E0` - 테두리
- **Gray 400**: `#BDBDBD` - 비활성 텍스트
- **Gray 500**: `#9E9E9E` - 보조 텍스트
- **Gray 600**: `#757575` - 아이콘
- **Gray 700**: `#616161` - 부제목
- **Gray 800**: `#424242` - 본문 텍스트
- **Gray 900**: `#212121` - 제목 텍스트

#### White & Black
- **White**: `#FFFFFF` - 카드, 모달 배경
- **Black**: `#000000` - 텍스트 (투명도 87%)

### 3.5 색상 접근성 가이드

#### 텍스트 대비율 (WCAG 2.1 Level AA)
- **일반 텍스트**: 최소 4.5:1
- **대형 텍스트** (18px 이상 또는 14px Bold): 최소 3:1
- **UI 컴포넌트**: 최소 3:1

#### 색상 조합 예시 (통과)
- Primary 500 (`#2196F3`) on White - **대비율 3.1:1** ✅ (Large Text)
- Gray 900 (`#212121`) on White - **대비율 16.1:1** ✅
- Gray 700 (`#616161`) on White - **대비율 5.7:1** ✅
- White on Primary 700 (`#1976D2`) - **대비율 5.3:1** ✅

#### 색상만으로 정보 전달 금지
- ❌ 빨간색 텍스트만으로 오류 표시
- ✅ 빨간색 + 아이콘 + "오류" 텍스트

---

## 4. 타이포그래피

### 4.1 폰트 패밀리

#### Primary Font (한글)
```css
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif;
```

**Pretendard 특징:**
- 한글 가독성 우수
- 다양한 굵기 지원 (Thin~Black)
- 웹폰트 최적화 (가변 폰트 지원)
- 무료 라이선스 (OFL)

**대체 폰트:**
- macOS/iOS: -apple-system (San Francisco)
- Windows: 맑은 고딕 (시스템 기본)
- 기타: Noto Sans KR

#### Secondary Font (영문, 숫자)
```css
font-family: 'Inter', 'Roboto', Arial, sans-serif;
```

**Inter 특징:**
- 숫자 가독성 우수 (Tabular Numbers)
- UI 최적화
- 웹폰트 최적화

### 4.2 타입 스케일

#### Heading (제목)

| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 |
|------|------|------|------|-----------|----------|
| **H1** | 32px | Bold (700) | 1.2 (38px) | `.text-h1` | 페이지 제목 |
| **H2** | 24px | Bold (700) | 1.3 (31px) | `.text-h2` | 섹션 제목 |
| **H3** | 20px | SemiBold (600) | 1.4 (28px) | `.text-h3` | 카드 제목 |
| **H4** | 18px | SemiBold (600) | 1.4 (25px) | `.text-h4` | 서브섹션 제목 |
| **H5** | 16px | Medium (500) | 1.5 (24px) | `.text-h5` | 그룹 제목 |
| **H6** | 14px | Medium (500) | 1.5 (21px) | `.text-h6` | 라벨 제목 |

#### Body (본문)

| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 |
|------|------|------|------|-----------|----------|
| **Body Large** | 16px | Regular (400) | 1.5 (24px) | `.text-body-lg` | 주요 본문 |
| **Body** | 14px | Regular (400) | 1.5 (21px) | `.text-body` | 기본 본문 |
| **Body Small** | 13px | Regular (400) | 1.5 (19px) | `.text-body-sm` | 보조 텍스트 |
| **Caption** | 12px | Regular (400) | 1.4 (17px) | `.text-caption` | 캡션, 메타 정보 |

#### Special (특수)

| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 |
|------|------|------|------|-----------|----------|
| **Button Large** | 16px | SemiBold (600) | 1.0 | `.text-btn-lg` | 주요 버튼 |
| **Button** | 14px | Medium (500) | 1.0 | `.text-btn` | 기본 버튼 |
| **Button Small** | 13px | Medium (500) | 1.0 | `.text-btn-sm` | 작은 버튼 |
| **Label** | 12px | Medium (500) | 1.0 | `.text-label` | 입력 레이블 |
| **Code** | 14px | Regular (400) | 1.5 | `.text-code` | 코드, 기술 정보 |

### 4.3 타이포그래피 원칙

#### 가독성 우선
- **최소 본문 크기**: 14px (모바일), 16px (데스크톱 권장)
- **적절한 행간**: 본문은 1.5 이상
- **적절한 줄 길이**: 50-75자 (한글 기준 25-40자)

#### 계층 구조
- **제목과 본문의 명확한 구분**: 크기, 굵기, 색상 차이
- **일관된 스케일**: 1.25배 비율 (Modular Scale)

#### 색상 사용
- **제목**: Gray 900 (`#212121`)
- **본문**: Gray 800 (`#424242`)
- **보조 텍스트**: Gray 600 (`#757575`)
- **비활성 텍스트**: Gray 400 (`#BDBDBD`)

### 4.4 반응형 타이포그래피

#### Mobile (320px~767px)
```css
/* H1 축소 */
.text-h1 { font-size: 28px; }
.text-h2 { font-size: 22px; }

/* Body 기본 유지 */
.text-body { font-size: 14px; }
```

#### Tablet (768px~1023px)
```css
/* 기본 스케일 유지 */
.text-h1 { font-size: 32px; }
.text-body { font-size: 14px; }
```

#### Desktop (1024px+)
```css
/* Body 확대 */
.text-body-lg { font-size: 18px; }
.text-body { font-size: 16px; }
```

---

## 5. 간격 시스템

### 5.1 기본 단위
**Base Unit: 4px**

모든 간격은 4px의 배수를 사용하여 일관성 유지

### 5.2 간격 스케일

| Token | 값 | Rem | 사용 예시 |
|-------|-----|-----|----------|
| `spacing-0` | 0px | 0 | 간격 없음 |
| `spacing-1` | 4px | 0.25rem | 아이콘-텍스트 간격 |
| `spacing-2` | 8px | 0.5rem | 버튼 내부 패딩 (세로) |
| `spacing-3` | 12px | 0.75rem | 작은 요소 간격 |
| `spacing-4` | 16px | 1rem | 기본 요소 간격 |
| `spacing-5` | 20px | 1.25rem | 중간 요소 간격 |
| `spacing-6` | 24px | 1.5rem | 카드 내부 패딩 |
| `spacing-8` | 32px | 2rem | 섹션 간격 |
| `spacing-10` | 40px | 2.5rem | 큰 섹션 간격 |
| `spacing-12` | 48px | 3rem | 페이지 상하 여백 |
| `spacing-16` | 64px | 4rem | 특별한 강조 간격 |

### 5.3 컴포넌트별 간격

#### 버튼
```css
/* Primary Button */
padding: 12px 24px; /* spacing-3 spacing-6 */
gap: 8px; /* 아이콘-텍스트 간격 */

/* Small Button */
padding: 8px 16px; /* spacing-2 spacing-4 */
```

#### 카드
```css
padding: 24px; /* spacing-6 */
gap: 16px; /* 내부 요소 간격 */
```

#### 폼
```css
/* Input Field */
padding: 12px 16px; /* spacing-3 spacing-4 */
margin-bottom: 16px; /* 필드 간격 */

/* Label */
margin-bottom: 8px; /* spacing-2 */
```

#### 리스트
```css
/* List Item */
padding: 16px; /* spacing-4 */
gap: 12px; /* 내부 요소 간격 */

/* List */
gap: 8px; /* 항목 간격 */
```

### 5.4 레이아웃 간격

#### 페이지 여백
```css
/* Mobile */
padding: 16px; /* spacing-4 */

/* Tablet */
padding: 24px; /* spacing-6 */

/* Desktop */
padding: 32px; /* spacing-8 */
```

#### 섹션 간격
```css
/* 같은 그룹 내 섹션 */
margin-bottom: 24px; /* spacing-6 */

/* 다른 그룹 간 섹션 */
margin-bottom: 48px; /* spacing-12 */
```

---

## 6. 컴포넌트 스타일

### 6.1 버튼 (Buttons)

#### Primary Button
**주요 액션 (회의 시작, 저장, 공유 등)**

```css
background: Primary 500 (#2196F3);
color: White;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

/* Hover */
background: Primary 600 (#1E88E5);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);

/* Active */
background: Primary 700 (#1976D2);
transform: scale(0.98);

/* Disabled */
background: Gray 200 (#EEEEEE);
color: Gray 400 (#BDBDBD);
cursor: not-allowed;
```

#### Secondary Button
**보조 액션 (취소, 건너뛰기 등)**

```css
background: White;
color: Primary 500;
border: 1px solid Primary 500;
padding: 12px 24px;
border-radius: 8px;

/* Hover */
background: Primary 50 (#E3F2FD);
border-color: Primary 600;
```

#### Text Button
**경량 액션 (더보기, 닫기 등)**

```css
background: transparent;
color: Primary 500;
padding: 8px 16px;

/* Hover */
background: Primary 50;
```

#### Icon Button
**아이콘만 있는 버튼**

```css
width: 44px;
height: 44px; /* 터치 영역 확보 */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;

/* Hover */
background: Gray 100;
```

#### Floating Action Button (FAB)
**화면 고정 액션 버튼**

```css
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: Primary 500;
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
z-index: 100;

/* Hover */
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5);
```

### 6.2 입력 필드 (Input Fields)

#### Text Input
```css
border: 1px solid Gray 300;
border-radius: 8px;
padding: 12px 16px;
font-size: 16px; /* iOS 확대 방지 */
background: White;
transition: border-color 0.2s;

/* Focus */
border-color: Primary 500;
outline: 2px solid Primary 100;

/* Error */
border-color: Error (#F44336);
outline: 2px solid rgba(244, 67, 54, 0.1);

/* Disabled */
background: Gray 100;
color: Gray 400;
cursor: not-allowed;
```

#### Textarea
```css
/* Text Input 속성 + */
min-height: 100px;
resize: vertical;
```

#### Select / Dropdown
```css
/* Text Input 속성 + */
appearance: none;
background-image: url('chevron-down-icon.svg');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
```

#### Checkbox
```css
width: 20px;
height: 20px;
border: 2px solid Gray 400;
border-radius: 4px;
cursor: pointer;

/* Checked */
background: Primary 500;
border-color: Primary 500;
/* Checkmark icon */
```

#### Radio Button
```css
width: 20px;
height: 20px;
border: 2px solid Gray 400;
border-radius: 50%;

/* Selected */
border-color: Primary 500;
/* Inner dot */
background: radial-gradient(Primary 500 40%, transparent 40%);
```

#### Toggle Switch
```css
width: 48px;
height: 24px;
border-radius: 12px;
background: Gray 300;
position: relative;

/* Circle */
width: 20px;
height: 20px;
border-radius: 50%;
background: White;
position: absolute;
left: 2px;
transition: left 0.2s;

/* On State */
background: Primary 500;
/* Circle moves right */
left: 26px;
```

### 6.3 카드 (Cards)

#### Standard Card
```css
background: White;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: box-shadow 0.2s;

/* Hover (클릭 가능한 경우) */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
cursor: pointer;
```

#### Todo Card
```css
/* Standard Card + */
border-left: 4px solid transparent;

/* 완료 */
border-left-color: Success (#4CAF50);
opacity: 0.7;

/* 마감 임박 */
border-left-color: Warning (#FF9800);

/* 지연 */
border-left-color: Error (#F44336);
```

#### Meeting Card
```css
/* Standard Card + */
gap: 12px;
display: flex;
flex-direction: column;
```

### 6.4 배지 (Badges)

#### Status Badge
```css
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;

/* 작성중 */
background: Warning 50;
color: Warning 700;

/* 확정완료 */
background: Success 50;
color: Success 700;

/* 검증완료 */
background: Primary 50;
color: Primary 700;
```

#### Count Badge
```css
min-width: 20px;
height: 20px;
padding: 0 6px;
background: Error (#F44336);
color: White;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
```

### 6.5 모달 (Modals)

#### Modal Overlay
```css
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
```

#### Modal Container
```css
background: White;
border-radius: 16px;
max-width: 500px;
width: calc(100% - 32px);
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);

/* Mobile: Full Screen */
@media (max-width: 767px) {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border-radius: 0;
}
```

### 6.6 알림 (Toast / Snackbar)

```css
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: Gray 800;
color: White;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 2000;
animation: slideUp 0.3s ease-out;

/* Success */
background: Success (#4CAF50);

/* Error */
background: Error (#F44336);

/* Warning */
background: Warning (#FF9800);
```

---

## 7. 반응형 브레이크포인트

### 7.1 브레이크포인트 정의

```css
/* Mobile Small */
@media (min-width: 320px) { /* ... */ }

/* Mobile */
@media (min-width: 375px) { /* ... */ }

/* Mobile Large */
@media (min-width: 425px) { /* ... */ }

/* Tablet */
@media (min-width: 768px) { /* ... */ }

/* Desktop */
@media (min-width: 1024px) { /* ... */ }

/* Desktop Large */
@media (min-width: 1440px) { /* ... */ }
```

### 7.2 디바이스별 최적화

#### Mobile (320px~767px)
- **레이아웃**: 단일 컬럼
- **네비게이션**: 하단 탭 바
- **터치 영역**: 최소 44x44px
- **폰트**: 기본 스케일
- **간격**: 16px 페이지 여백

#### Tablet (768px~1023px)
- **레이아웃**: 2컬럼 (일부 화면)
- **네비게이션**: 좌측 사이드바 (선택)
- **폰트**: 기본 스케일
- **간격**: 24px 페이지 여백

#### Desktop (1024px+)
- **레이아웃**: 2-3컬럼
- **네비게이션**: 좌측 고정 사이드바
- **폰트**: 확대 스케일
- **간격**: 32px 페이지 여백
- **추가 기능**: 단축키, 고급 필터

---

## 8. 서비스 특화 컴포넌트

### 8.1 실시간 발언 표시기

**회의 진행 중 현재 발언자와 텍스트 표시**

```css
.live-speech {
  background: Accent 50 (#F3E5F5);
  border-left: 4px solid Accent 500 (#9C27B0);
  padding: 16px;
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.speaker-name {
  font-weight: 600;
  color: Accent 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.speaking-indicator {
  width: 8px;
  height: 8px;
  background: Error (#F44336);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.speech-text {
  color: Gray 800;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}
```

### 8.2 전문용어 하이라이트

**AI가 감지한 전문용어 표시**

```css
.term-highlight {
  background: linear-gradient(180deg, transparent 60%, Accent 200 60%);
  cursor: pointer;
  position: relative;
  border-bottom: 1px dotted Accent 500;
  transition: background 0.2s;
}

.term-highlight:hover {
  background: Accent 100;
}

/* 툴팁 */
.term-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: Gray 900;
  color: White;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  width: 250px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 100;
}
```

### 8.3 검증 완료 섹션

**섹션별 검증 상태 표시**

```css
.section-verified {
  border: 2px solid Success (#4CAF50);
  border-radius: 8px;
  padding: 24px;
  position: relative;
}

.verified-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: Success;
  color: White;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 검증자 아바타 */
.verifier-avatars {
  display: flex;
  margin-top: 12px;
}

.verifier-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid White;
  margin-left: -8px;
}

.verifier-avatar:first-child {
  margin-left: 0;
}
```

### 8.4 실시간 동기화 인디케이터

**다른 사용자의 수정 사항 표시**

```css
.sync-indicator {
  position: fixed;
  top: 80px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: White;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 50;
}

.sync-dot {
  width: 8px;
  height: 8px;
  background: Success;
  border-radius: 50%;
}

/* 동기화 중 */
.sync-dot.syncing {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 다른 사용자 편집 중 */
.editing-highlight {
  background: rgba(255, 152, 0, 0.1);
  border-left: 3px solid Warning (#FF9800);
  animation: fadeHighlight 3s ease-out;
}

@keyframes fadeHighlight {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
```

### 8.5 AI 처리 인디케이터

**AI가 처리 중임을 표시**

```css
.ai-processing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: Accent 50;
  border-radius: 8px;
  border-left: 4px solid Accent 500;
}

.ai-icon {
  width: 20px;
  height: 20px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ai-text {
  color: Accent 700;
  font-size: 13px;
  font-weight: 500;
}

/* 신뢰도 표시 */
.confidence-indicator {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.confidence-bar {
  height: 4px;
  width: 40px;
  background: Gray 200;
  border-radius: 2px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: Success;
  transition: width 0.3s;
}

/* 높음: 80%+ = Success */
/* 보통: 60-80% = Warning */
/* 낮음: <60% = Error */
```

### 8.6 Todo 진행 상태 카드

**Todo 완료 상태 시각화**

```css
.todo-progress-card {
  background: White;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 원형 진행 바 */
.circular-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    Primary 500 var(--progress-percent),
    Gray 200 var(--progress-percent)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-inner {
  width: 80px;
  height: 80px;
  background: White;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progress-percent {
  font-size: 24px;
  font-weight: 700;
  color: Primary 500;
}

.progress-label {
  font-size: 12px;
  color: Gray 600;
}
```

---

## 9. 인터랙션 패턴

### 9.1 터치 인터랙션 (Mobile)

#### 기본 터치 영역
```css
/* 최소 터치 영역: 44x44px */
min-width: 44px;
min-height: 44px;
```

#### 스와이프 액션
**리스트 항목 스와이프로 빠른 액션**

- **좌→우 스와이프**: 완료 처리 (Todo)
- **우→좌 스와이프**: 삭제/편집 메뉴 표시

```css
.swipe-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  transform: translateX(100%);
  transition: transform 0.3s;
}

.swiped .swipe-action {
  transform: translateX(0);
}

.swipe-button {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipe-button.delete {
  background: Error (#F44336);
}

.swipe-button.edit {
  background: Primary 500;
}
```

#### Pull to Refresh
**화면 당겨서 새로고침**

```css
.pull-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: top 0.3s;
}

.pulling .pull-refresh-indicator {
  top: 20px;
}

.refresh-icon {
  animation: rotate 1s linear infinite;
}
```

### 9.2 키보드 인터랙션 (Desktop)

#### 포커스 표시
```css
*:focus {
  outline: 2px solid Primary 500;
  outline-offset: 2px;
}

/* 마우스 클릭 시 포커스 숨김 */
*:focus:not(:focus-visible) {
  outline: none;
}
```

#### 단축키 안내
```css
.keyboard-hint {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: Gray 800;
  color: White;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  opacity: 0.8;
}

.kbd {
  background: Gray 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  border: 1px solid Gray 600;
}
```

**주요 단축키:**
- `Ctrl/Cmd + S`: 저장
- `Ctrl/Cmd + K`: 검색
- `Esc`: 모달 닫기
- `Tab`: 다음 요소
- `Shift + Tab`: 이전 요소
- `Enter`: 확인/실행

### 9.3 로딩 상태

#### Spinner
```css
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid Gray 200;
  border-top-color: Primary 500;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
```

#### Skeleton UI
```css
.skeleton {
  background: linear-gradient(
    90deg,
    Gray 200 0%,
    Gray 100 50%,
    Gray 200 100%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
```

#### Progress Bar
```css
.progress-bar {
  width: 100%;
  height: 4px;
  background: Gray 200;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: Primary 500;
  transition: width 0.3s;
}

/* Indeterminate (불명확한 진행) */
.progress-fill.indeterminate {
  width: 30%;
  animation: indeterminate 1.5s infinite;
}

@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
```

### 9.4 실시간 협업 피드백

#### 사용자 커서 표시
```css
.user-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 999;
}

.cursor-flag {
  background: var(--user-color);
  color: White;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -4px;
}

.cursor-pointer {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--user-color);
}
```

#### 편집 중 표시
```css
.editing-user {
  background: rgba(var(--user-color-rgb), 0.1);
  border-left: 3px solid var(--user-color);
  padding-left: 12px;
}

.editing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--user-color);
  color: White;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
```

---

## 10. 아이콘 시스템

### 10.1 아이콘 스타일

**아이콘 세트**: Material Icons (Outlined)

**스타일 가이드:**
- **스타일**: Outlined (선 스타일)
- **일관성**: 동일한 두께(2px), 동일한 라운딩
- **크기**: 20px (Small), 24px (Default), 32px (Large)

### 10.2 주요 아이콘 매핑

| 기능 | 아이콘 이름 | 사용 위치 |
|------|------------|----------|
| 회의 시작 | `play_circle` | 회의 시작 버튼 |
| 회의 종료 | `stop_circle` | 회의 종료 버튼 |
| 녹음 | `mic` | 녹음 상태 표시 |
| 일시정지 | `pause_circle` | 녹음 일시정지 |
| 저장 | `save` | 저장 버튼 |
| 공유 | `share` | 공유 버튼 |
| 편집 | `edit` | 수정 버튼 |
| 삭제 | `delete` | 삭제 버튼 |
| 검색 | `search` | 검색 입력 |
| 필터 | `filter_list` | 필터 메뉴 |
| 설정 | `settings` | 설정 메뉴 |
| 알림 | `notifications` | 알림 아이콘 |
| 프로필 | `account_circle` | 사용자 프로필 |
| 캘린더 | `calendar_today` | 날짜 선택 |
| 시간 | `schedule` | 시간 선택 |
| 첨부파일 | `attach_file` | 파일 첨부 |
| 다운로드 | `download` | 파일 다운로드 |
| 체크 | `check_circle` | 완료, 검증 |
| 경고 | `warning` | 경고 메시지 |
| 오류 | `error` | 오류 메시지 |
| 정보 | `info` | 정보 메시지 |
| AI | `auto_awesome` | AI 기능 |
| Todo | `check_box` | Todo 항목 |
| 참석자 | `group` | 참석자 목록 |
| 더보기 | `more_vert` | 메뉴 |
| 뒤로가기 | `arrow_back` | 이전 화면 |
| 닫기 | `close` | 모달 닫기 |
| 펼치기 | `expand_more` | 아코디언 열기 |
| 접기 | `expand_less` | 아코디언 닫기 |

### 10.3 아이콘 색상

```css
/* Default */
color: Gray 600 (#757575);

/* Active/Selected */
color: Primary 500 (#2196F3);

/* Disabled */
color: Gray 400 (#BDBDBD);

/* On Color Background */
color: White;

/* Semantic */
.icon-success { color: Success (#4CAF50); }
.icon-warning { color: Warning (#FF9800); }
.icon-error { color: Error (#F44336); }
.icon-ai { color: Accent 500 (#9C27B0); }
```

---

## 11. 애니메이션 가이드

### 11.1 애니메이션 원칙

- **목적성**: 모든 애니메이션은 명확한 목적이 있어야 함
- **자연스러움**: 현실 세계의 물리 법칙을 따름
- **적절한 속도**: 너무 빠르거나 느리지 않게
- **성능**: CSS 애니메이션 우선, GPU 가속 활용

### 11.2 이징 (Easing)

```css
/* 표준 Easing */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design */
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);

/* 탄성 (Elastic) */
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
```

### 11.3 지속 시간 (Duration)

| 용도 | 지속 시간 | 예시 |
|------|----------|------|
| **Instant** | 0ms | 즉시 변경 |
| **Quick** | 100ms | 호버 효과, 색상 변경 |
| **Normal** | 200-300ms | 모달 열기, 탭 전환 |
| **Slow** | 400-500ms | 페이지 전환, 복잡한 애니메이션 |

### 11.4 애니메이션 라이브러리

#### 페이드 인
```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s var(--ease-out);
}
```

#### 슬라이드 업
```css
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-up {
  animation: slideUp 0.3s var(--ease-out);
}
```

#### 스케일
```css
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scaleIn 0.2s var(--ease-out);
}
```

#### 쉐이크 (오류 시)
```css
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s var(--ease-in-out);
}
```

### 11.5 성능 최적화

**GPU 가속 속성만 사용:**
- ✅ `transform` (translate, scale, rotate)
- ✅ `opacity`
- ❌ `left`, `top` (리플로우 발생)
- ❌ `width`, `height` (리플로우 발생)

**will-change 활용:**
```css
.will-animate {
  will-change: transform, opacity;
}

/* 애니메이션 완료 후 제거 */
.animated {
  will-change: auto;
}
```

---

## 12. 상태 표시

### 12.1 회의록 상태

| 상태 | 색상 | 배지 텍스트 | 설명 |
|------|------|-----------|------|
| **작성중** | Warning | `작성중` | 회의 진행 중 또는 수정 중 |
| **확정완료** | Success | `확정완료` | 최종 확정된 회의록 |
| **공유됨** | Primary | `공유됨` | 참석자에게 공유됨 |

### 12.2 Todo 상태

| 상태 | 색상 | 표시 | 설명 |
|------|------|------|------|
| **진행중** | Gray | `○` | 할당되었으나 미완료 |
| **완료** | Success | `✓` | 완료 처리됨 |
| **마감 임박** | Warning | `⚠` | 3일 이내 마감 |
| **지연** | Error | `!` | 마감일 경과 |

### 12.3 검증 상태

| 상태 | 표시 | 설명 |
|------|------|------|
| **미검증** | 빈 원 | 아직 검증되지 않음 |
| **검증 중** | 부분 체크 | 일부 참석자 검증 |
| **검증 완료** | 체크 아이콘 + 배지 | 모든 참석자 검증 |
| **잠김** | 자물쇠 아이콘 | 수정 불가 |

### 12.4 동기화 상태

| 상태 | 표시 | 설명 |
|------|------|------|
| **동기화됨** | 녹색 점 | 최신 상태 |
| **동기화 중** | 깜빡이는 점 | 서버와 동기화 중 |
| **오프라인** | 회색 점 | 네트워크 끊김 (로컬 저장) |
| **충돌** | 빨간색 느낌표 | 동시 수정 충돌 |

### 12.5 AI 처리 상태

| 상태 | 표시 | 설명 |
|------|------|------|
| **처리 중** | 회전 아이콘 | AI 분석 중 |
| **완료** | 체크 아이콘 | 처리 완료 |
| **오류** | 오류 아이콘 | 처리 실패 |
| **신뢰도 높음** | 3개 바 녹색 | 80% 이상 |
| **신뢰도 보통** | 2개 바 노란색 | 60-80% |
| **신뢰도 낮음** | 1개 바 빨간색 | 60% 미만 |

---

## 13. 접근성 표준

### 13.1 WCAG 2.1 Level AA 준수

#### Perceivable (인식 가능)
- ✅ 모든 이미지에 대체 텍스트 제공
- ✅ 색상 대비 4.5:1 이상 (일반 텍스트)
- ✅ 색상 대비 3:1 이상 (대형 텍스트, UI 컴포넌트)
- ✅ 텍스트 200% 확대 시 레이아웃 유지
- ✅ 색상만으로 정보 전달 금지

#### Operable (조작 가능)
- ✅ 모든 기능 키보드로 접근 가능
- ✅ 포커스 순서 논리적
- ✅ 포커스 표시 명확 (2px 파란색 테두리)
- ✅ 터치 영역 최소 44x44px
- ✅ 시간 제한 없음 (자동 저장)

#### Understandable (이해 가능)
- ✅ 명확한 레이블 및 안내
- ✅ 오류 메시지 구체적
- ✅ 일관된 네비게이션
- ✅ 예측 가능한 동작

#### Robust (견고함)
- ✅ 시맨틱 HTML 사용
- ✅ ARIA 속성 적절히 사용
- ✅ 최신 브라우저 및 보조 기술 지원

### 13.2 ARIA 속성 가이드

#### 랜드마크
```html
<header role="banner"></header>
<nav role="navigation" aria-label="주요 메뉴"></nav>
<main role="main"></main>
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>
```

#### 버튼 및 링크
```html
<!-- 아이콘 버튼 -->
<button aria-label="검색">
  <icon>search</icon>
</button>

<!-- 외부 링크 -->
<a href="..." target="_blank" aria-label="새 창에서 열기">
  링크 텍스트
  <icon aria-hidden="true">open_in_new</icon>
</a>
```

#### 폼
```html
<label for="meeting-title">회의 제목 (필수)</label>
<input
  id="meeting-title"
  type="text"
  required
  aria-required="true"
  aria-invalid="false"
  aria-describedby="title-error"
/>
<span id="title-error" role="alert" aria-live="assertive">
  <!-- 오류 메시지 -->
</span>
```

#### 모달
```html
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">모달 제목</h2>
  <p id="modal-description">모달 설명</p>
</div>
```

#### 실시간 업데이트
```html
<!-- 중요한 업데이트 (즉시 알림) -->
<div role="alert" aria-live="assertive">
  회의록이 저장되었습니다.
</div>

<!-- 일반 업데이트 (현재 작업 완료 후 알림) -->
<div role="status" aria-live="polite">
  3명이 편집 중입니다.
</div>

<!-- 화면만 업데이트 (알림 X) -->
<div aria-live="off">
  <!-- 내용 -->
</div>
```

### 13.3 스크린 리더 테스트

**주요 테스트 도구:**
- **NVDA** (Windows, 무료)
- **JAWS** (Windows, 유료)
- **VoiceOver** (macOS/iOS, 내장)
- **TalkBack** (Android, 내장)

**테스트 체크리스트:**
- [ ] 모든 이미지에 적절한 alt 텍스트
- [ ] 모든 폼 필드에 레이블 연결
- [ ] 버튼 및 링크 용도 명확
- [ ] 모달 열림/닫힘 알림
- [ ] 오류 메시지 즉시 알림
- [ ] 실시간 업데이트 알림
- [ ] 키보드만으로 전체 기능 사용 가능

---

## 14. 변경 이력

| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|----------|
| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 14개 섹션 완료 |

---

## 부록

### A. 개발 참고 자료

#### CSS 변수 정의
```css
:root {
  /* Primary Colors */
  --primary-50: #E3F2FD;
  --primary-500: #2196F3;
  --primary-700: #1976D2;

  /* Secondary Colors */
  --secondary-500: #4CAF50;
  --accent-500: #9C27B0;

  /* Semantic Colors */
  --success: #4CAF50;
  --warning: #FF9800;
  --error: #F44336;
  --info: #2196F3;

  /* Neutral Colors */
  --gray-50: #FAFAFA;
  --gray-800: #424242;
  --gray-900: #212121;

  /* Spacing */
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-6: 24px;

  /* Typography */
  --font-primary: 'Pretendard', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.3);

  /* Transitions */
  --transition-fast: 0.1s;
  --transition-normal: 0.2s;
  --transition-slow: 0.3s;
}
```

### B. 디자인 도구

**권장 도구:**
- **Figma**: UI 디자인 및 프로토타입
- **Material Icons**: 아이콘 세트
- **Coolors**: 색상 팔레트 생성
- **WebAIM Contrast Checker**: 색상 대비 검사

### C. 품질 검사 도구

**접근성:**
- Lighthouse (Chrome DevTools)
- axe DevTools
- WAVE Browser Extension

**성능:**
- WebPageTest
- Chrome DevTools Performance
- React DevTools Profiler

### D. 참고 문헌

- Material Design 3 Guidelines
- Apple Human Interface Guidelines
- WCAG 2.1 Level AA
- Mobile First Design - Luke Wroblewski
- Inclusive Components - Heydon Pickering