# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드
## 문서 정보
- **작성일**: 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
```
#### 버튼 및 링크
```html
링크 텍스트
open_in_new
```
#### 폼
```html
```
#### 모달
```html
```
#### 실시간 업데이트
```html
회의록이 저장되었습니다.
3명이 편집 중입니다.
```
### 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