hgzero/design-gappa/style-guide.md

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

**버전**: 1.0
**작성일**: 2025-10-15
**작성자**: 유진 (Frontend Developer)
**레퍼런스**: 클로바노트 (Naver)
  
---

## 목차

1. [브랜드 아이덴티티](#1-브랜드-아이덴티티)
2. [디자인 원칙](#2-디자인-원칙)
3. [컬러 시스템](#3-컬러-시스템)
4. [타이포그래피](#4-타이포그래피)
5. [간격 시스템](#5-간격-시스템)
6. [컴포넌트 스타일](#6-컴포넌트-스타일)
7. [반응형 브레이크포인트](#7-반응형-브레이크포인트)
8. [회의록 서비스 특화 컴포넌트](#8-회의록-서비스-특화-컴포넌트)
9. [인터랙션 패턴](#9-인터랙션-패턴)
10. [변경 이력](#10-변경-이력)

---

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

### 1.1 디자인 컨셉

**"Smart Collaboration"** - 스마트한 협업 도구

회의록 작성 및 공유 서비스는 AI 기반의 자동화와 실시간 협업을 통해 업무 효율을 극대화하는 스마트한 협업 플랫폼입니다.

### 1.2 핵심 가치

| 가치 | 설명 | 디자인 반영 |
|------|------|------------|
| **정확성** | 누락 없이 정확하게 기록 | 명확한 시각적 위계, 검증 상태 표시 |
| **효율성** | AI 자동화로 작성 부담 감소 | AI 제안 영역, 자동 완성 패턴 |
| **협업** | 실시간 동기화 및 공유 | 협업 인디케이터, 커서 표시 |
| **접근성** | 업무 지식 없이도 사용 가능 | 전문용어 설명, 친근한 일러스트레이션 |

### 1.3 브랜드 성격

- **전문적이면서도 친근한**: 업무용 도구이지만 사용하기 쉬운
- **신뢰감 + 혁신성**: AI 기능의 정확성과 미래지향적 이미지
- **협업 중심**: 개인이 아닌 팀의 성공을 지원

### 1.4 비주얼 무드

- **색상**: 밝고 활기찬 청록색 (혁신, 성장, 활력)
- **형태**: 둥근 모서리, 부드러운 곡선 (친근함, 접근성)
- **일러스트레이션**: 캐릭터 기반, 간결하고 현대적 (클로바노트 스타일 참조)

---

## 2. 디자인 원칙

### 2.1 명확성 (Clarity)

**사용자가 무엇을 해야 하는지 즉시 이해 가능해야 합니다.**

- 명확한 시각적 위계 유지
- 혼란스러운 요소 최소화
- 액션 버튼의 목적을 분명히 표현
- 에러 메시지는 문제와 해결 방법을 함께 제시

**예시**:
- ✅ "회의록을 저장하지 못했습니다. 네트워크 연결을 확인하고 다시 시도해주세요."
- ❌ "오류가 발생했습니다."

### 2.2 효율성 (Efficiency)

**최소한의 클릭으로 목표를 달성할 수 있어야 합니다.**

- 자주 사용하는 기능은 빠른 접근 제공 (FAB, 단축키)
- 불필요한 단계 제거
- 자동 완성 및 제안 기능 활용
- 키보드 단축키 지원

**예시**:
- Ctrl+N: 새 회의 예약
- Ctrl+S: 회의록 저장
- Ctrl+F: 검색

### 2.3 일관성 (Consistency)

**동일한 패턴과 예측 가능한 동작을 유지해야 합니다.**

- 동일한 기능은 동일한 아이콘과 레이블 사용
- 색상, 타이포그래피, 간격의 일관된 적용
- 네비게이션 구조 일관성 유지
- 브랜드 아이덴티티 유지

### 2.4 피드백 (Feedback)

**모든 액션에 즉각적이고 명확한 피드백을 제공해야 합니다.**

- 버튼 클릭 시 시각적 피드백 (호버, 액티브 상태)
- 로딩 상태 명확히 표시 (스켈레톤 UI, 스피너)
- 성공/실패 토스트 알림
- 실시간 저장 상태 표시 ("저장됨", "저장 중...")

### 2.5 접근성 (Accessibility)

**모든 사용자가 서비스를 쉽게 이용할 수 있어야 합니다.**

- WCAG 2.1 Level AA 준수
- 키보드 네비게이션 지원
- 스크린 리더 호환
- 충분한 색상 대비 (4.5:1 이상)
- 터치 영역 최소 44x44px

### 2.6 협업 중심 (Collaboration-First)

**실시간 협업이 핵심 경험이 되어야 합니다.**

- 다른 사용자의 활동을 명확히 표시 (커서, 아바타)
- 실시간 변경 사항 즉시 반영
- 충돌 방지 및 해결 메커니즘
- 버전 관리 및 변경 이력 추적

---

## 3. 컬러 시스템

### 3.1 Primary Color (주요 액션, 브랜드)

**Teal/Emerald** - 혁신, 성장, 활력을 상징

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Primary-Light | `#4DFFDB` | rgb(77, 255, 219) | 호버, 비활성화 상태 |
| **Primary-Main** | **`#00D9B1`** | **rgb(0, 217, 177)** | **주요 버튼, 링크, 강조** |
| Primary-Dark | `#00A88A` | rgb(0, 168, 138) | 눌림 상태, 강조 |

**사용 예시**:
- Primary 버튼 배경
- 링크 텍스트
- 체크박스, 라디오 버튼 선택 상태
- 진행률 바
- FAB (Floating Action Button)

### 3.2 Secondary Color (보조, 협업 강조)

**Indigo** - 협업, 신뢰, 전문성을 상징

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Secondary-Light | `#A5B4FC` | rgb(165, 180, 252) | 배경, 비활성화 |
| **Secondary-Main** | **`#6366F1`** | **rgb(99, 102, 241)** | **보조 버튼, 협업 요소** |
| Secondary-Dark | `#4F46E5` | rgb(79, 70, 229) | 강조 |

**사용 예시**:
- 협업 인디케이터 (다른 사용자 커서)
- 보조 버튼
- 배지 (검증 중 상태)
- 알림 아이콘

### 3.3 Semantic Colors (상태 표현)

#### Success (성공, 완료)

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Success-Light | `#6EE7B7` | rgb(110, 231, 183) | 배경 |
| **Success-Main** | **`#10B981`** | **rgb(16, 185, 129)** | **완료, 검증 완료** |
| Success-Dark | `#059669` | rgb(5, 150, 105) | 강조 |

#### Warning (경고, 주의)

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Warning-Light | `#FCD34D` | rgb(252, 211, 77) | 배경 |
| **Warning-Main** | **`#F59E0B`** | **rgb(245, 158, 11)** | **경고, 작성 중** |
| Warning-Dark | `#D97706` | rgb(217, 119, 6) | 강조 |

#### Error (오류, 실패)

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Error-Light | `#FCA5A5` | rgb(252, 165, 165) | 배경 |
| **Error-Main** | **`#EF4444`** | **rgb(239, 68, 68)** | **오류, 긴급** |
| Error-Dark | `#DC2626` | rgb(220, 38, 38) | 강조 |

#### Info (정보, 알림)

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Info-Light | `#93C5FD` | rgb(147, 197, 253) | 배경 |
| **Info-Main** | **`#3B82F6`** | **rgb(59, 130, 246)** | **정보, 알림** |
| Info-Dark | `#2563EB` | rgb(37, 99, 235) | 강조 |

### 3.4 Neutral Colors (배경, 텍스트, 테두리)

| 이름 | HEX | RGB | 사용처 |
|------|-----|-----|--------|
| Gray-50 | `#F9FAFB` | rgb(249, 250, 251) | 페이지 배경 |
| Gray-100 | `#F3F4F6` | rgb(243, 244, 246) | 카드 배경, 호버 |
| Gray-200 | `#E5E7EB` | rgb(229, 231, 235) | 테두리 |
| Gray-300 | `#D1D5DB` | rgb(209, 213, 219) | 비활성화 테두리 |
| Gray-400 | `#9CA3AF` | rgb(156, 163, 175) | 플레이스홀더 |
| Gray-500 | `#6B7280` | rgb(107, 114, 128) | 보조 텍스트 |
| Gray-600 | `#4B5563` | rgb(75, 85, 99) | 본문 텍스트 |
| Gray-700 | `#374151` | rgb(55, 65, 81) | 제목 |
| Gray-800 | `#1F2937` | rgb(31, 41, 55) | 강조 제목 |
| Gray-900 | `#111827` | rgb(17, 24, 39) | 최고 강조 |
| White | `#FFFFFF` | rgb(255, 255, 255) | 카드, 모달 배경 |
| Black | `#000000` | rgb(0, 0, 0) | 절대 검정 (거의 사용 안 함) |

### 3.5 다크모드 (선택적)

다크모드를 지원하는 경우 다음 색상을 사용합니다.

| 요소 | 라이트모드 | 다크모드 |
|------|-----------|---------|
| 페이지 배경 | Gray-50 | Gray-900 |
| 카드 배경 | White | Gray-800 |
| 본문 텍스트 | Gray-600 | Gray-100 |
| 제목 | Gray-900 | Gray-50 |
| 테두리 | Gray-200 | Gray-700 |
| Primary | #00D9B1 | #22D3B0 (밝기 조정) |

### 3.6 색상 사용 가이드

#### 텍스트 색상

- **제목**: Gray-900 (라이트), Gray-50 (다크)
- **본문**: Gray-600 (라이트), Gray-100 (다크)
- **보조 텍스트**: Gray-500
- **플레이스홀더**: Gray-400
- **링크**: Primary-Main (호버 시 Primary-Dark)
- **에러 텍스트**: Error-Main

#### 배경 색상

- **페이지**: Gray-50 (라이트), Gray-900 (다크)
- **카드**: White (라이트), Gray-800 (다크)
- **호버**: Gray-100
- **선택**: Primary-Light (투명도 20%)

#### 테두리 색상

- **기본**: Gray-200
- **호버**: Gray-300
- **포커스**: Primary-Main (2px)
- **에러**: Error-Main

---

## 4. 타이포그래피

### 4.1 폰트 패밀리

#### Primary Font (본문 및 UI)

**한글**: Pretendard
- 깔끔한 고딕 계열
- 뛰어난 가독성
- 다양한 굵기 지원 (100~900)
- 시스템 폰트와 유사한 렌더링

**영문/숫자**: Inter
- 웹 환경 최적화
- 명확한 문자 구분 (l, I, 1 등)
- Pretendard와 조화로운 조합

**폰트 스택**:
```css
font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
```

#### Monospace Font (코드, 데이터)

**Fira Code, Consolas**
- 코드 스니펫
- API 응답
- 로그, 에러 메시지

**폰트 스택**:
```css
font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
```

### 4.2 폰트 크기 스케일

**1.25 배율 기반**

| 레벨 | 이름 | 크기 (px / rem) | 사용처 |
|------|------|----------------|--------|
| 1 | Display | 48px / 3rem | 랜딩 페이지 메인 제목 |
| 2 | H1 | 36px / 2.25rem | 페이지 제목 |
| 3 | H2 | 30px / 1.875rem | 주요 섹션 제목 |
| 4 | H3 | 24px / 1.5rem | 서브 섹션 제목 |
| 5 | H4 | 20px / 1.25rem | 카드 제목, 작은 섹션 |
| 6 | Body-Large | 18px / 1.125rem | 강조 본문, 리드 텍스트 |
| 7 | **Body** | **16px / 1rem** | **기본 본문 (기준점)** |
| 8 | Body-Small | 14px / 0.875rem | 보조 정보, 캡션 |
| 9 | Caption | 12px / 0.75rem | 작은 라벨, 타임스탬프 |

### 4.3 폰트 굵기 (Font Weight)

| 레벨 | 값 | 사용처 |
|------|---|--------|
| Light | 300 | 보조 정보, 긴 본문 (선택적) |
| **Regular** | **400** | **기본 본문** |
| Medium | 500 | 강조 본문, 버튼 텍스트 |
| SemiBold | 600 | 제목 (H3, H4), 중요 정보 |
| Bold | 700 | 큰 제목 (H1, H2), 최고 강조 |

### 4.4 행간 (Line Height)

| 이름 | 값 | 사용처 |
|------|---|--------|
| Tight | 1.25 | 큰 제목 (Display, H1, H2) |
| **Normal** | **1.5** | **본문 텍스트 (기본)** |
| Relaxed | 1.75 | 긴 본문, 읽기 편안함 필요 시 |

### 4.5 자간 (Letter Spacing)

| 이름 | 값 | 사용처 |
|------|---|--------|
| Tight | -0.02em | 큰 제목 (Display, H1) |
| **Normal** | **0** | **본문 (기본)** |
| Wide | 0.02em | 작은 캡션, 레이블 (대문자) |

### 4.6 텍스트 스타일 예시

#### Display
```css
font-size: 48px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
```

#### H1
```css
font-size: 36px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
```

#### H2
```css
font-size: 30px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
```

#### H3
```css
font-size: 24px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
```

#### Body (기본)
```css
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
```

#### Caption
```css
font-size: 12px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.02em;
```

---

## 5. 간격 시스템

### 5.1 기본 단위

**8px 기반 시스템**

모든 간격은 8의 배수를 사용하여 일관성과 시각적 리듬을 유지합니다.

### 5.2 스케일

| 레벨 | 값 (px / rem) | 사용처 |
|------|--------------|--------|
| 0 | 0px / 0 | 간격 없음 |
| 1 | 4px / 0.25rem | 최소 간격 (아이콘-텍스트) |
| 2 | 8px / 0.5rem | 작은 간격 (인라인 요소) |
| 3 | 12px / 0.75rem | 밀접한 요소 (버튼 내부) |
| **4** | **16px / 1rem** | **기본 간격** |
| 5 | 20px / 1.25rem | 적당한 간격 |
| 6 | 24px / 1.5rem | 컴포넌트 간 |
| 8 | 32px / 2rem | 섹션 내부 |
| 10 | 40px / 2.5rem | 섹션 간 |
| 12 | 48px / 3rem | 큰 섹션 간 |
| 16 | 64px / 4rem | 페이지 여백 |
| 20 | 80px / 5rem | 대형 섹션 |

### 5.3 컴포넌트별 간격

#### 버튼
- **패딩**: 12px (상하) × 24px (좌우) - 중형
- **패딩 (소형)**: 8px (상하) × 16px (좌우)
- **패딩 (대형)**: 16px (상하) × 32px (좌우)
- **아이콘-텍스트 간격**: 8px

#### 입력 필드
- **패딩**: 12px (상하) × 16px (좌우)
- **레이블-필드 간격**: 8px

#### 카드
- **패딩**: 24px
- **카드 간 간격**: 16px (그리드), 24px (리스트)

#### 모달
- **패딩**: 32px
- **헤더-본문 간격**: 24px
- **본문-푸터 간격**: 32px

#### 페이지 여백
- **데스크탑**: 64px (좌우)
- **태블릿**: 32px (좌우)
- **모바일**: 24px (좌우)

### 5.4 컨테이너 최대 너비

| 크기 | 최대 너비 | 사용처 |
|------|---------|--------|
| Small | 640px | 폼, 로그인 화면 |
| Medium | 768px | 템플릿 선택 |
| Large | 1024px | 회의 예약 |
| XLarge | 1280px | 대시보드 |
| 2XLarge | 1536px | 회의 진행 (에디터) |
| Full | 100% | 풀 레이아웃 |

---

## 6. 컴포넌트 스타일

### 6.1 버튼 (Button)

#### Primary Button (주요 액션)

**스타일**:
- 배경: Primary-Main (#00D9B1)
- 텍스트: White
- 패딩: 12px (상하) × 24px (좌우)
- 테두리 반경: 8px
- 폰트: Medium (500), 16px
- 그림자: 없음 (기본), 0 2px 4px rgba(0, 0, 0, 0.1) (호버)

**상태**:
- **Hover**: 배경 Primary-Light + transform: translateY(-1px) + 그림자 증가
- **Active**: 배경 Primary-Dark + transform: scale(0.98)
- **Disabled**: 배경 Gray-300 + 텍스트 Gray-500 + 커서 not-allowed

**코드 예시**:
```css
.btn-primary {
  background-color: #00D9B1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  transition: all 150ms ease-out;
}

.btn-primary:hover {
  background-color: #4DFFDB;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:active {
  background-color: #00A88A;
  transform: scale(0.98);
}

.btn-primary:disabled {
  background-color: #D1D5DB;
  color: #6B7280;
  cursor: not-allowed;
}
```

#### Secondary Button (보조 액션)

**스타일**:
- 배경: Transparent
- 텍스트: Primary-Main
- 테두리: 1px solid Primary-Main
- 패딩: 12px × 24px
- 테두리 반경: 8px

**상태**:
- **Hover**: 배경 Primary-Main (투명도 10%)
- **Active**: 배경 Primary-Main (투명도 20%)
- **Disabled**: 테두리 Gray-300 + 텍스트 Gray-400

#### Text Button (덜 중요한 액션)

**스타일**:
- 배경: Transparent
- 텍스트: Gray-700
- 패딩: 8px × 16px
- 테두리 반경: 8px

**상태**:
- **Hover**: 배경 Gray-100
- **Active**: 배경 Gray-200

#### Icon Button

**스타일**:
- 크기: 40×40px (중형), 32×32px (소형), 48×48px (대형)
- 테두리 반경: 50% (원형) 또는 8px (사각형)
- 아이콘 크기: 20px (중형), 16px (소형), 24px (대형)
- 배경: Transparent

**상태**:
- **Hover**: 배경 Gray-100
- **Active**: 배경 Gray-200

#### Floating Action Button (FAB)

**스타일**:
- 크기: 56×56px
- 테두리 반경: 50% (완전 원형)
- 배경: Primary-Main
- 아이콘: White, 24px
- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
- 위치: 우측 하단 고정 (16px 여백)

**상태**:
- **Hover**: 그림자 0 6px 16px rgba(0, 0, 0, 0.2) + transform: translateY(-2px)
- **Active**: transform: scale(0.95)

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

#### Text Input

**스타일**:
- 높이: 48px
- 패딩: 12px (상하) × 16px (좌우)
- 테두리: 1px solid Gray-300
- 테두리 반경: 8px
- 배경: White
- 폰트: Regular, 16px
- 플레이스홀더: Gray-400

**상태**:
- **Focus**: 테두리 Primary-Main 2px + outline 4px Primary-Main (투명도 20%)
- **Error**: 테두리 Error-Main + 하단 에러 메시지 (Error-Main, 14px)
- **Disabled**: 배경 Gray-100 + 텍스트 Gray-400 + 커서 not-allowed
- **Success**: 테두리 Success-Main (선택적)

**코드 예시**:
```css
.input {
  height: 48px;
  padding: 12px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  transition: all 150ms ease-out;
}

.input:focus {
  border-color: #00D9B1;
  border-width: 2px;
  outline: 4px solid rgba(0, 217, 177, 0.2);
}

.input.error {
  border-color: #EF4444;
}

.input:disabled {
  background-color: #F3F4F6;
  color: #9CA3AF;
  cursor: not-allowed;
}
```

#### Textarea

**스타일**:
- 최소 높이: 120px
- 패딩: 12px × 16px
- 나머지는 Text Input과 동일
- resize: vertical (세로 크기 조절 가능)

#### Select / Dropdown

**스타일**:
- Input과 동일
- 우측 아이콘: Chevron Down, 16px, Gray-500

### 6.3 카드 (Card)

**스타일**:
- 배경: White
- 테두리: 1px solid Gray-200 (선택적, 없을 수도 있음)
- 테두리 반경: 12px
- 패딩: 24px
- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1) (기본)

**상태 (인터랙티브 카드)**:
- **Hover**: 그림자 0 4px 12px rgba(0, 0, 0, 0.15) + transform: translateY(-2px)
- **Active**: 그림자 0 1px 2px rgba(0, 0, 0, 0.1) + transform: scale(0.99)

**코드 예시**:
```css
.card {
  background-color: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 200ms ease-out;
}

.card.interactive:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
```

### 6.4 모달 (Modal)

**스타일**:
- 배경: White
- 테두리 반경: 16px
- 패딩: 32px
- 최대 너비: 600px (중형), 800px (대형), 480px (소형)
- 그림자: 0 20px 25px rgba(0, 0, 0, 0.15)

**백드롭 (Backdrop)**:
- 배경: rgba(0, 0, 0, 0.5)
- 클릭 시 모달 닫기 (선택적)

**애니메이션**:
- 등장: Fade In (200ms) + Scale (0.95 → 1.0)
- 사라짐: Fade Out (150ms) + Scale (1.0 → 0.95)

### 6.5 토스트 알림 (Toast)

**스타일**:
- 배경: White
- 테두리 반경: 8px
- 패딩: 16px × 20px
- 최대 너비: 400px
- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
- 위치: 우측 상단 (16px 여백)

**타입별 색상**:
- **Success**: 좌측 테두리 4px Success-Main + Success 아이콘
- **Error**: 좌측 테두리 4px Error-Main + Error 아이콘
- **Warning**: 좌측 테두리 4px Warning-Main + Warning 아이콘
- **Info**: 좌측 테두리 4px Info-Main + Info 아이콘

**동작**:
- 자동 사라짐: 4초 후
- 닫기 버튼: 우측 상단 X 아이콘
- 애니메이션: 우측에서 슬라이드 인

### 6.6 배지 (Badge)

**스타일**:
- 패딩: 4px (상하) × 12px (좌우)
- 테두리 반경: 12px (완전 둥근 형태)
- 폰트: Medium, 12px

**타입별 색상**:
- **Primary**: 배경 Primary-Light, 텍스트 Primary-Dark
- **Success**: 배경 Success-Light, 텍스트 Success-Dark
- **Warning**: 배경 Warning-Light, 텍스트 Warning-Dark
- **Error**: 배경 Error-Light, 텍스트 Error-Dark
- **Neutral**: 배경 Gray-200, 텍스트 Gray-700

**사용 예시**:
- 상태 표시: "작성 중", "검증 중", "확정됨"
- 카운트: "3개의 알림", "5명 참석"

---

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

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

| 디바이스 | 범위 | 레이아웃 | 주요 조정 |
|---------|------|---------|----------|
| **Mobile** | 320px ~ 767px | 단일 컬럼 | 햄버거 메뉴, 하단 탭, 스택 레이아웃 |
| **Tablet** | 768px ~ 1023px | 2단 레이아웃 | 토글 사이드바, 터치 최적화 |
| **Desktop** | 1024px ~ 1439px | 3단 레이아웃 | 고정 사이드바, 키보드 단축키 |
| **Large Desktop** | 1440px 이상 | 확장 레이아웃 | 더 넓은 중앙 패널, 4단 가능 |

### 7.2 디바이스별 UI 조정

#### Mobile (320px ~ 767px)

**네비게이션**:
- 햄버거 메뉴로 사이드바 숨김
- 하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
- 상단 헤더 고정

**레이아웃**:
- 1단 스택 레이아웃
- 카드/위젯을 세로로 배치
- 패딩 감소 (24px → 16px)

**인터랙션**:
- 최소 터치 영역: 44×44px
- 버튼 크기 증가
- 스와이프 제스처 지원

**05-회의진행 화면**:
- 탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
- 툴바를 하단 고정 (터치 용이성)

**09-Todo관리 화면**:
- 칸반 보드 대신 리스트 뷰 권장
- 상태 변경은 드롭다운으로

#### Tablet (768px ~ 1023px)

**네비게이션**:
- 사이드바 토글 가능 (기본 숨김)
- 상단 헤더에 메뉴 아이콘

**레이아웃**:
- 2단 그리드 레이아웃 (2×2 또는 2×3)
- 적절한 여백 유지

**05-회의진행 화면**:
- 2단 레이아웃 (에디터 + AI 제안 패널)
- 참석자 목록은 드로어로 표시

**터치 최적화**:
- 버튼 크기: 최소 44×44px
- 간격: 최소 8px

#### Desktop (1024px 이상)

**네비게이션**:
- 전체 사이드바 항상 표시
- 호버 효과 및 툴팁

**레이아웃**:
- 3단 그리드 레이아웃 (3×2)
- 더 많은 위젯 동시 표시

**05-회의진행 화면**:
- 3단 레이아웃 (참석자 + 에디터 + AI 제안)
- 모든 패널 동시 표시

**키보드 단축키**:
- Ctrl+N: 새 회의
- Ctrl+S: 저장
- Ctrl+F: 검색
- Ctrl+/: 단축키 가이드

### 7.3 미디어 쿼리 예시

```css
/* Mobile First 접근 */
.container {
  padding: 16px;
}

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

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

/* Large Desktop */
@media (min-width: 1440px) {
  .container {
    max-width: 1536px;
    margin: 0 auto;
  }
}
```

---

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

### 8.1 실시간 협업 인디케이터

#### 사용자 커서

**스타일**:
- 사용자별 색상 코드:
  - User 1: Primary-Main (#00D9B1)
  - User 2: Secondary-Main (#6366F1)
  - User 3: Warning-Main (#F59E0B)
  - User 4: Info-Main (#3B82F6)
  - User 5: Error-Main (#EF4444)
- 커서 크기: 2px (너비) × 20px (높이)
- 커서 상단에 아바타 + 이름 레이블
- 레이블 배경: 사용자 색상, 텍스트: White
- 레이블 패딩: 4px × 8px, 테두리 반경: 4px

#### 편집 중 하이라이트

**스타일**:
- 배경: 사용자 색상 (투명도 20%)
- 지속 시간: 사용자가 편집하는 동안 유지
- 애니메이션: 부드러운 페이드인

#### 변경 하이라이트

**스타일**:
- 배경: Warning-Light (노란색)
- 지속 시간: 3초
- 애니메이션: 3초 동안 페이드아웃

### 8.2 상태 배지

#### 작성 중

**스타일**:
- 배경: Warning-Light (#FCD34D)
- 텍스트: Warning-Dark (#D97706)
- 아이콘: Edit 아이콘 (선택적)

#### 검증 중

**스타일**:
- 배경: Info-Light (#93C5FD)
- 텍스트: Info-Dark (#2563EB)
- 아이콘: Clock 아이콘 (선택적)

#### 확정됨

**스타일**:
- 배경: Success-Light (#6EE7B7)
- 텍스트: Success-Dark (#059669)
- 아이콘: Check 아이콘 (선택적)

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

**스타일**:
- 밑줄: 2px dotted Primary-Main
- 커서: pointer

**호버 상태**:
- 툴팁 표시
  - 배경: Gray-800
  - 텍스트: White
  - 패딩: 8px × 12px
  - 테두리 반경: 6px
  - 최대 너비: 300px
  - 화살표 표시

**클릭 상태**:
- 우측 패널의 "용어 설명" 탭으로 전환
- 해당 용어 상세 설명 표시

### 8.4 AI 제안 영역

**스타일**:
- 배경: Gray-50
- 테두리: 1px dashed Primary-Main
- 테두리 반경: 8px
- 패딩: 16px
- 아이콘: AI Sparkle 아이콘 (Primary-Main)

**액션 버튼**:
- 적용: Primary 버튼 (소형, 패딩 8px × 16px)
- 무시: Text 버튼

**애니메이션**:
- 등장: 페이드인 + 약간의 상승 (translateY)
- 업데이트: 부드러운 전환 (200ms)

### 8.5 Todo 카드

**레이아웃**:
- 카드 형태
- 패딩: 16px
- 테두리 반경: 8px
- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1)

**우선순위 표시**:
- 높음: 좌측 테두리 4px Error-Main + Error 점 (8px 원)
- 보통: 테두리 없음, Gray 점
- 낮음: 표시 없음

**진행률 바**:
- 높이: 4px
- 배경: Gray-200
- 채워진 부분: Primary-Main
- 테두리 반경: 2px
- 위치: 하단

**마감일 표시**:
- D-day 형식: "D-3", "오늘", "D+2 (지남)"
- 색상:
  - 지남: Error-Main
  - 오늘: Warning-Main
  - 여유: Gray-500

**드래그 핸들**:
- 아이콘: 점 6개 (2×3)
- 색상: Gray-400
- 위치: 좌측 상단

**호버 상태**:
- 그림자 증가
- 드래그 핸들 색상 변경 (Gray-600)

### 8.6 타임라인

**스타일**:
- 세로 라인: 2px solid Gray-300
- 위치: 좌측 고정

**이벤트 점**:
- 크기: 12px 원
- 배경: Primary-Main
- 테두리: 2px solid White
- 위치: 라인 중앙

**타임스탬프**:
- 폰트: Caption (12px), Gray-500
- 위치: 이벤트 점 우측

**이벤트 내용**:
- 폰트: Body-Small (14px), Gray-700
- 위치: 타임스탬프 하단

---

## 9. 인터랙션 패턴

### 9.1 버튼 인터랙션

**Hover**:
```css
transition: all 150ms ease-out;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
```

**Active (클릭)**:
```css
transform: scale(0.98);
```

**Disabled**:
```css
cursor: not-allowed;
opacity: 0.6;
```

### 9.2 카드 인터랙션 (인터랙티브 카드)

**Hover**:
```css
transition: all 200ms ease-out;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
```

**클릭**:
```css
transform: scale(0.99);
```

### 9.3 모달 애니메이션

**등장**:
```css
/* Backdrop */
opacity: 0 → 1;
transition: opacity 200ms ease-out;

/* Modal */
opacity: 0 → 1;
transform: scale(0.95) → scale(1.0);
transition: all 200ms ease-out;
```

**사라짐**:
```css
opacity: 1 → 0;
transform: scale(1.0) → scale(0.95);
transition: all 150ms ease-in;
```

### 9.4 토스트 알림 애니메이션

**등장**:
```css
transform: translateX(400px) → translateX(0);
opacity: 0 → 1;
transition: all 200ms ease-out;
```

**사라짐**:
```css
transform: translateX(0) → translateX(400px);
opacity: 1 → 0;
transition: all 150ms ease-in;
```

**자동 사라짐**: 4초 후

### 9.5 로딩 상태

#### 스켈레톤 UI

**스타일**:
- 배경: Gray-200
- 테두리 반경: 4px
- 애니메이션: 펄스 (밝기 변화)

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

.skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
```

#### 스피너

**스타일**:
- 색상: Primary-Main
- 크기: 24px (소형), 40px (중형), 56px (대형)
- 애니메이션: 회전

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

.spinner {
  animation: spin 1s linear infinite;
}
```

### 9.6 드래그 앤 드롭

**드래그 시작**:
```css
opacity: 0.5;
cursor: grabbing;
```

**드롭 영역 (유효)**:
```css
border: 2px dashed #00D9B1;
background-color: rgba(0, 217, 177, 0.05);
```

**드롭 영역 (무효)**:
```css
border: 2px dashed #EF4444;
background-color: rgba(239, 68, 68, 0.05);
```

**드롭 완료**:
```css
transition: all 300ms ease-out;
transform: translate(newX, newY);
```

### 9.7 포커스 스타일

**인풋/버튼 포커스**:
```css
outline: 4px solid rgba(0, 217, 177, 0.2);
outline-offset: 0;
border-color: #00D9B1;
```

**키보드 네비게이션 포커스**:
```css
/* 마우스 클릭 시에는 outline 숨김 */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/* 키보드 탐색 시에만 outline 표시 */
.focus-visible {
  outline: 2px solid #00D9B1;
  outline-offset: 2px;
}
```

### 9.8 페이지 전환 애니메이션

**페이드 전환**:
```css
/* 나가는 페이지 */
opacity: 1 → 0;
transition: opacity 150ms ease-out;

/* 들어오는 페이지 */
opacity: 0 → 1;
transition: opacity 200ms ease-in;
```

---

## 10. 변경 이력

| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|----------|
| 1.0 | 2025-10-15 | 유진 | 초안 작성 - 레퍼런스 클로바노트 기반 스타일 가이드 설계 완료 |

---

## 부록

### A. 색상 접근성 체크리스트

- [ ] Primary-Main (#00D9B1) + White: 대비율 3.5:1 (AA Large) ✅
- [ ] Gray-600 (#4B5563) + White: 대비율 8.6:1 (AAA) ✅
- [ ] Primary-Main + Gray-900: 대비율 4.8:1 (AA) ✅
- [ ] 모든 상태 색상 (Success, Warning, Error, Info) + White: AA 이상 ✅

### B. 디자인 도구 및 에셋

**권장 디자인 도구**:
- Figma (프로토타입 및 디자인 시스템)
- Adobe XD (대안)

**아이콘 라이브러리**:
- Heroicons (추천)
- Feather Icons
- Lucide Icons

**일러스트레이션**:
- unDraw (무료, 색상 커스터마이징 가능)
- Storyset (Freepik)
- 자체 제작 (브랜드 일관성)

### C. 프론트엔드 구현 권장사항

**CSS 프레임워크**:
- Tailwind CSS (유틸리티 우선, 빠른 개발)
- Emotion / styled-components (CSS-in-JS)

**컴포넌트 라이브러리**:
- Headless UI (접근성 우수)
- Radix UI (무스타일 프리미티브)
- 자체 제작 (완전한 커스터마이징)

**애니메이션**:
- Framer Motion (React)
- GSAP (고급 애니메이션)
- CSS Transitions (단순 애니메이션)

### D. 참고 자료

- **WCAG 2.1 가이드라인**: https://www.w3.org/WAI/WCAG21/quickref/
- **클로바노트**: https://clovanote.naver.com/
- **Pretendard 폰트**: https://cactus.tistory.com/306
- **Tailwind CSS 컬러 팔레트**: https://tailwindcss.com/docs/customizing-colors

---

**문서 끝**