hgzero/design/uiux/style-guide.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 (한글)

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 (영문, 숫자)

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)

/* H1 축소 */
.text-h1 { font-size: 28px; }
.text-h2 { font-size: 22px; }

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

Tablet (768px~1023px)

/* 기본 스케일 유지 */
.text-h1 { font-size: 32px; }
.text-body { font-size: 14px; }

Desktop (1024px+)

/* 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 컴포넌트별 간격

버튼

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

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

카드

padding: 24px; /* spacing-6 */
gap: 16px; /* 내부 요소 간격 */

폼

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

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

리스트

/* List Item */
padding: 16px; /* spacing-4 */
gap: 12px; /* 내부 요소 간격 */

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

5.4 레이아웃 간격

페이지 여백

/* Mobile */
padding: 16px; /* spacing-4 */

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

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

섹션 간격

/* 같은 그룹 내 섹션 */
margin-bottom: 24px; /* spacing-6 */

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

---

6. 컴포넌트 스타일

6.1 버튼 (Buttons)

Primary Button

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

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

보조 액션 (취소, 건너뛰기 등)

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

경량 액션 (더보기, 닫기 등)

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

/* Hover */
background: Primary 50;

Icon Button

아이콘만 있는 버튼

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

/* Hover */
background: Gray 100;

Floating Action Button (FAB)

화면 고정 액션 버튼

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

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

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

Select / Dropdown

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

Checkbox

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

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

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

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

/* 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

/* Standard Card + */
gap: 12px;
display: flex;
flex-direction: column;

6.4 배지 (Badges)

Status Badge

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

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

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

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)

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 브레이크포인트 정의

/* 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 실시간 발언 표시기

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

.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가 감지한 전문용어 표시

.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 검증 완료 섹션

섹션별 검증 상태 표시

.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 실시간 동기화 인디케이터

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

.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가 처리 중임을 표시

.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 완료 상태 시각화

.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)

기본 터치 영역

/* 최소 터치 영역: 44x44px */
min-width: 44px;
min-height: 44px;

스와이프 액션

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

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

.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

화면 당겨서 새로고침

.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)

포커스 표시

*:focus {
  outline: 2px solid Primary 500;
  outline-offset: 2px;
}

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

단축키 안내

.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

.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

.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

.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 실시간 협업 피드백

사용자 커서 표시

.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);
}

편집 중 표시

.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 아이콘 색상

/* 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)

/* 표준 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 애니메이션 라이브러리

페이드 인

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

슬라이드 업

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

스케일

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

쉐이크 (오류 시)

@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 활용:

.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 속성 가이드

랜드마크

<header role="banner"></header>
<nav role="navigation" aria-label="주요 메뉴"></nav>
<main role="main"></main>
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>

버튼 및 링크

<!-- 아이콘 버튼 -->
<button aria-label="검색">
  <icon>search</icon>
</button>

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

폼

<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>

모달

<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>

실시간 업데이트

<!-- 중요한 업데이트 (즉시 알림) -->
<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 변수 정의

: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