hgzero/design/uiux_bk/style-guide.md

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

문서 정보

• 작성일: 2025-10-20
• 작성자: 이미준 (서비스 기획자)
• 버전: 1.0
• 설계 철학: Mobile First 디자인
• 접근성 기준: WCAG 2.1 Level AA

---

목차

1. 브랜드 아이덴티티
2. 디자인 원칙
3. 컬러 시스템
4. 타이포그래피
5. 간격 시스템
6. 컴포넌트 스타일
7. 반응형 브레이크포인트
8. 회의록 특화 컴포넌트
9. 인터랙션 패턴
10. 아이콘 시스템
11. 접근성 가이드
12. 변경 이력

---

1. 브랜드 아이덴티티

1.1 디자인 컨셉

"효율적이고 정확한 회의록, 누구나 쉽게"

회의록 작성 및 공유 개선 서비스는 업무 지식이 없어도 누락 없이 정확하게 회의록을 작성할 수 있도록 지원하는 전문 서비스입니다. 디자인은 다음 핵심 가치를 반영합니다:

• 전문성: 신뢰할 수 있는 비즈니스 툴로서의 이미지
• 효율성: 빠르고 정확한 회의록 작성 프로세스
• 접근성: 누구나 쉽게 사용할 수 있는 직관적 UI
• 협업성: 실시간 동기화와 협업 기능 강조
• 지능성: AI 기반 자동화 기능의 시각적 표현

1.2 핵심 가치

1. Mobile First: 언제 어디서나 회의록 작성
2. 실시간 협업: 참석자 간 즉각적 피드백
3. 맥락 기반 지원: AI와 RAG를 통한 스마트한 도움
4. 명확성: 간결하고 이해하기 쉬운 인터페이스

1.3 브랜드 컬러 의미

• Primary Color (청록색): 생산성, 효율성, 신뢰감
• Secondary Color (중간 회색): 중립성, 전문성, 차분함
• Semantic Colors: 직관적 상태 표시 (성공, 경고, 오류)

---

2. 디자인 원칙

2.1 Mobile First 철학

"모바일에서 완벽하면, 데스크톱에서도 완벽하다"

1. 우선순위 중심 설계: 작은 화면에서 가장 중요한 기능에 집중
2. 점진적 향상: 모바일 기본 경험을 먼저 구축한 후, 화면이 커질수록 기능 추가
3. 성능 최적화: 모바일 환경의 제약을 먼저 고려하여 모든 기기에서 빠른 성능 제공

2.2 일관성 원칙

• 시각적 일관성: 동일한 컴포넌트는 모든 화면에서 동일한 스타일
• 행동 일관성: 같은 액션은 같은 방식으로 동작
• 언어 일관성: 동일한 개념은 동일한 용어로 표현

2.3 접근성 우선

• WCAG 2.1 Level AA 준수
• 키보드 네비게이션 완전 지원
• 스크린 리더 호환성 보장
• 색상 대비 충족

2.4 피드백과 상태

• 모든 사용자 액션에 즉각적 피드백 제공
• 시스템 상태를 명확하게 표시
• 오류 발생 시 명확한 안내와 해결 방법 제시

---

3. 컬러 시스템

3.1 Primary Colors (주요 색상)

Primary - 청록색

주 용도: 주요 액션 버튼, 강조, 링크, 진행 표시

이름	Hex	RGB	용도
Primary-50	#ECFDF5	rgb(236, 253, 245)	배경 강조
Primary-100	#D1FAE5	rgb(209, 250, 229)	Hover 배경
Primary-200	#A7F3D0	rgb(167, 243, 208)	연한 강조
Primary-500	#00C896	rgb(0, 200, 150)	기본 Primary
Primary-600	#00B589	rgb(0, 181, 137)	Hover 상태
Primary-700	#00A07C	rgb(0, 160, 124)	Active 상태
Primary-900	#00725C	rgb(0, 114, 92)	진한 강조

접근성: Primary-500 텍스트는 반드시 흰색(#FFFFFF) 사용 (대비 4.52:1 ✓)

3.2 Secondary Colors (보조 색상)

Neutral - 회색 스케일

주 용도: 텍스트, 배경, 보더, 비활성 상태

이름	Hex	RGB	용도
Gray-50	#F9FAFB	rgb(249, 250, 251)	배경 보조
Gray-100	#F3F4F6	rgb(243, 244, 246)	Hover 배경
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)	제목, 최우선 텍스트

3.3 Semantic Colors (의미 색상)

Success - 성공/완료

주 용도: 검증완료, Todo 완료, 성공 메시지

이름	Hex	RGB	용도
Success-50	#ECFDF5	rgb(236, 253, 245)	배경
Success-100	#D1FAE5	rgb(209, 250, 229)	연한 배경
Success-500	#10B981	rgb(16, 185, 129)	기본 Success
Success-700	#047857	rgb(4, 120, 87)	진한 강조

Warning - 경고/주의

주 용도: 검증 필요, 마감일 임박, 주의 메시지

이름	Hex	RGB	용도
Warning-50	#FFFBEB	rgb(255, 251, 235)	배경
Warning-100	#FEF3C7	rgb(254, 243, 199)	연한 배경
Warning-500	#F59E0B	rgb(245, 158, 11)	기본 Warning
Warning-700	#B45309	rgb(180, 83, 9)	진한 강조

Error - 오류/실패

주 용도: 오류 메시지, 필수 항목 누락, 실패 상태

이름	Hex	RGB	용도
Error-50	#FEF2F2	rgb(254, 242, 242)	배경
Error-100	#FEE2E2	rgb(254, 226, 226)	연한 배경
Error-500	#EF4444	rgb(239, 68, 68)	기본 Error
Error-700	#B91C1C	rgb(185, 28, 28)	진한 강조

Info - 정보/안내

주 용도: 정보 메시지, 안내, 작성중 상태

이름	Hex	RGB	용도
Info-50	#EFF6FF	rgb(239, 246, 255)	배경
Info-100	#DBEAFE	rgb(219, 234, 254)	연한 배경
Info-500	#3B82F6	rgb(59, 130, 246)	기본 Info
Info-700	#1D4ED8	rgb(29, 78, 216)	진한 강조

3.4 Background Colors (배경 색상)

이름	Hex	용도
Background-Primary	#FFFFFF	주 배경 (카드, 모달)
Background-Secondary	#F9FAFB	보조 배경 (페이지, 섹션 구분)
Background-Tertiary	#F3F4F6	3차 배경 (비활성 영역)
Background-Dark	#111827	다크 모드 배경 (선택)

3.5 Text Colors (텍스트 색상)

이름	Hex	용도	대비 (on White)
Text-Primary	#111827	제목, 중요 텍스트	16.1:1 ✓
Text-Secondary	#6B7280	본문, 일반 텍스트	5.74:1 ✓
Text-Tertiary	#9CA3AF	보조 정보, 힌트	3.54:1 ✓
Text-Disabled	#D1D5DB	비활성 텍스트	2.01:1
Text-Inverse	#FFFFFF	어두운 배경 위 텍스트	-

---

4. 타이포그래피

4.1 Font Family

--font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;

선택 이유:

• Pretendard: 한글 가독성 우수, 다양한 웨이트 지원, 무료 라이선스
• System Fonts: 빠른 로딩, 플랫폼 네이티브 느낌
• Monospace: 코드, 타임스탬프 등 고정폭 필요 시

4.2 Font Sizes (Mobile First)

이름	Mobile	Tablet	Desktop	용도
Display	-	40px	48px	특별 제목 (Desktop만)
H1	24px	28px	32px	페이지 제목
H2	20px	22px	24px	섹션 제목
H3	18px	20px	20px	카드 제목
H4	16px	18px	18px	소제목
Body	14px	16px	16px	본문 텍스트
Caption	12px	14px	14px	보조 정보
Small	11px	12px	12px	최소 텍스트

CSS 예제:

/* Mobile (기본) */
h1 { font-size: 24px; }

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 28px; }
}

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 32px; }
}

4.3 Font Weights

이름	Weight	용도
Regular	400	본문, 일반 텍스트
Medium	500	강조 텍스트
SemiBold	600	제목, 중요 정보
Bold	700	매우 중요한 제목, 강조

4.4 Line Heights

이름	값	용도
Tight	1.25	제목 (H1-H4)
Normal	1.5	본문 (Body, Caption)
Relaxed	1.75	긴 텍스트 (회의록 내용)

4.5 Letter Spacing

이름	값	용도
Tight	-0.01em	큰 제목 (Display, H1)
Normal	0em	일반 텍스트
Wide	0.02em	작은 텍스트 (Caption, Small)

4.6 타이포그래피 스타일 예제

/* 페이지 제목 */
.title-page {
  font-family: var(--font-primary);
  font-size: 24px; /* Mobile */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* 본문 텍스트 */
.text-body {
  font-family: var(--font-primary);
  font-size: 14px; /* Mobile */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0em;
  color: var(--text-secondary);
}

/* 보조 텍스트 */
.text-caption {
  font-family: var(--font-primary);
  font-size: 12px; /* Mobile */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

---

5. 간격 시스템

5.1 Space Scale (8px 기반 그리드)

--space-0: 0px;
--space-1: 4px;   /* 최소 간격 */
--space-2: 8px;   /* 기본 간격 */
--space-3: 12px;  /* 밀집 간격 */
--space-4: 16px;  /* 표준 간격 */
--space-5: 20px;
--space-6: 24px;  /* 섹션 간격 */
--space-8: 32px;  /* 큰 섹션 간격 */
--space-10: 40px;
--space-12: 48px; /* 페이지 상단/하단 */
--space-16: 64px; /* 매우 큰 간격 */

5.2 Padding

Container Padding (페이지 좌우 여백)

/* Mobile */
padding: 0 16px;

/* Tablet */
@media (min-width: 768px) {
  padding: 0 24px;
}

/* Desktop */
@media (min-width: 1024px) {
  padding: 0 32px;
}

Card Padding

/* Mobile */
padding: 16px;

/* Tablet/Desktop */
@media (min-width: 768px) {
  padding: 20px;
}

Button Padding

크기	Padding	용도
Small	8px 12px	보조 버튼
Medium	12px 16px	기본 버튼
Large	16px 24px	주요 버튼 (CTA)

5.3 Margin

Stack (Vertical)

--stack-small: 8px;   /* 밀집 배치 */
--stack-medium: 16px; /* 일반 배치 */
--stack-large: 24px;  /* 여유 배치 */

Inline (Horizontal)

--inline-small: 8px;   /* 밀집 배치 */
--inline-medium: 12px; /* 일반 배치 */
--inline-large: 16px;  /* 여유 배치 */

5.4 Border Radius

--radius-none: 0px;
--radius-small: 4px;    /* 버튼, 입력 필드 */
--radius-medium: 8px;   /* 카드, 모달 */
--radius-large: 12px;   /* 큰 카드 */
--radius-xlarge: 16px;  /* 강조 요소 */
--radius-full: 9999px;  /* 원형, 태그 */

적용 예제:

• 버튼: border-radius: 4px;
• 입력 필드: border-radius: 4px;
• 카드: border-radius: 8px;
• 모달: border-radius: 12px;
• 아바타: border-radius: 9999px;

5.5 Border Width

--border-thin: 1px;   /* 기본 보더 */
--border-medium: 2px; /* 강조 보더 */
--border-thick: 4px;  /* 매우 강조 (좌측 강조 보더) */

---

6. 컴포넌트 스타일

6.1 Button (버튼)

6.1.1 Primary Button

.button-primary {
  background-color: #00C896;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 100ms ease-in-out;
}

.button-primary:hover {
  background-color: #00B589;
}

.button-primary:active {
  background-color: #00A07C;
}

.button-primary:disabled {
  background-color: #D1D5DB;
  color: #9CA3AF;
  cursor: not-allowed;
}

6.1.2 Secondary Button

.button-secondary {
  background-color: #F9FAFB;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}

.button-secondary:hover {
  background-color: #F3F4F6;
  border-color: #D1D5DB;
}

6.1.3 Outline Button

.button-outline {
  background-color: transparent;
  color: #00C896;
  border: 1px solid #00C896;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}

.button-outline:hover {
  background-color: #ECFDF5;
}

6.1.4 Ghost Button

.button-ghost {
  background-color: transparent;
  color: #6B7280;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 100ms ease-in-out;
}

.button-ghost:hover {
  background-color: #F9FAFB;
}

6.1.5 Button Sizes

크기	높이	Padding	Font Size	용도
Small	32px	8px 12px	12px	보조 액션
Medium	40px	12px 16px	14px	기본 액션
Large	48px	16px 24px	16px	주요 CTA

6.2 Input Field (입력 필드)

.input-field {
  background-color: #FFFFFF;
  color: #111827;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  padding: 0 16px;
  transition: border-color 150ms ease-in-out;
}

.input-field:focus {
  outline: none;
  border-color: #00C896;
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.1);
}

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

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

.input-field::placeholder {
  color: #9CA3AF;
}

Label:

.input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

Error Message:

.input-error-message {
  font-size: 12px;
  color: #EF4444;
  margin-top: 4px;
}

6.3 Card (카드)

.card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px; /* Mobile */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 150ms ease-in-out;
}

@media (min-width: 768px) {
  .card {
    padding: 20px; /* Tablet/Desktop */
  }
}

.card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: #00C896;
}

.card-clickable {
  cursor: pointer;
}

6.4 Modal (모달)

/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 모달 컨테이너 */
.modal {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  width: 90%; /* Mobile */
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .modal {
    width: auto;
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .modal {
    max-width: 800px;
  }
}

/* 모달 헤더 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #9CA3AF;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
}

---

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

7.1 Breakpoints

/* Mobile First (기본) */
@media (min-width: 320px) {
  /* Mobile Small */
}

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

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

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

7.2 레이아웃 전략

Mobile (320px ~ 767px)

• 레이아웃: 단일 컬럼
• 네비게이션: 하단 네비게이션 바
• 모달: 풀 스크린 또는 바텀 시트
• 간격: 16px 컨테이너 패딩
• 카드: 전체 너비, 스택 배치

Tablet (768px ~ 1023px)

• 레이아웃: 2단 컬럼 (메인 + 사이드)
• 네비게이션: 좌측 사이드 바 (고정 또는 접기)
• 모달: 플로팅 모달 (중앙)
• 간격: 24px 컨테이너 패딩
• 카드: 그리드 2열

Desktop (1024px 이상)

• 레이아웃: 3단 컬럼 (네비게이션 + 메인 + 사이드)
• 네비게이션: 좌측 사이드 바 (고정)
• 모달: 인라인 모달
• 간격: 32px 컨테이너 패딩
• 카드: 그리드 3-4열

---

8. 회의록 특화 컴포넌트

8.1 음성 녹음 UI

.voice-recording {
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  height: 80px; /* Mobile */
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .voice-recording {
    height: 100px; /* Desktop */
  }
}

/* 녹음 상태 표시 */
.recording-indicator {
  width: 12px;
  height: 12px;
  background-color: #EF4444;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

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

/* 타이머 */
.recording-timer {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #111827;
}

/* 파형 애니메이션 */
.waveform {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.waveform-bar {
  width: 3px;
  background-color: #00C896;
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}

8.2 실시간 텍스트 표시

.realtime-text {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

/* 화자 표시 */
.speaker-name {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #00C896;
  background-color: #ECFDF5;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* 타임스탬프 */
.timestamp {
  font-size: 12px;
  font-family: var(--font-mono);
  color: #9CA3AF;
  margin-left: 8px;
}

/* 텍스트 내용 */
.text-content {
  font-size: 14px;
  line-height: 1.75;
  color: #374151;
}

/* 타이핑 애니메이션 */
.typing-indicator {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #00C896;
  animation: blink 1s step-end infinite;
}

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

8.3 용어 설명 툴팁

/* 용어 하이라이트 */
.term-highlight {
  color: #00C896;
  border-bottom: 1px dashed #00C896;
  cursor: help;
}

/* 툴팁 */
.tooltip {
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  width: 320px; /* Mobile */
  max-width: 90vw;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

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

/* 툴팁 화살표 */
.tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 20px;
  border: 8px solid transparent;
  border-bottom-color: #E5E7EB;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 21px;
  border: 7px solid transparent;
  border-bottom-color: #FFFFFF;
}

/* 툴팁 섹션 */
.tooltip-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.tooltip-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tooltip-title {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 4px;
}

.tooltip-content {
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

8.4 Todo 카드

.todo-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #6B7280; /* 기본 */
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 150ms ease-in-out;
}

.todo-card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 우선순위별 좌측 보더 */
.todo-card.priority-high {
  border-left-color: #EF4444;
}

.todo-card.priority-medium {
  border-left-color: #F59E0B;
}

.todo-card.priority-low {
  border-left-color: #10B981;
}

/* 체크박스 */
.todo-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #D1D5DB;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.todo-checkbox.checked {
  background-color: #10B981;
  border-color: #10B981;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

/* Todo 내용 */
.todo-content {
  flex: 1;
}

.todo-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.todo-title.completed {
  text-decoration: line-through;
  color: #9CA3AF;
}

/* 담당자 */
.todo-assignee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6B7280;
}

/* 마감일 */
.todo-duedate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6B7280;
  margin-left: 8px;
}

.todo-duedate.urgent {
  color: #EF4444;
  font-weight: 600;
}

/* 회의록 링크 */
.todo-meeting-link {
  font-size: 12px;
  color: #00C896;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.todo-meeting-link:hover {
  text-decoration: underline;
}

8.5 검증 상태 배지

/* 기본 배지 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 12px;
}

/* 검증완료 */
.badge-verified {
  background-color: #ECFDF5;
  color: #10B981;
}

/* 검증 필요 */
.badge-pending {
  background-color: #FEF3C7;
  color: #F59E0B;
}

/* 작성중 */
.badge-in-progress {
  background-color: #DBEAFE;
  color: #3B82F6;
}

/* 확정완료 */
.badge-confirmed {
  background-color: #ECFDF5;
  color: #10B981;
  border: 1px solid #10B981;
}

---

9. 인터랙션 패턴

9.1 실시간 동기화 표시

/* 수정 중인 사용자 하이라이트 */
.editing-highlight {
  background-color: #FEF3C7;
  animation: highlight-fade 3s ease-out forwards;
}

@keyframes highlight-fade {
  0% { background-color: #FEF3C7; }
  100% { background-color: transparent; }
}

/* 수정 중인 사용자 표시 */
.editing-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #F59E0B;
  background-color: #FEF3C7;
  padding: 2px 8px;
  border-radius: 4px;
}

9.2 로딩 상태

/* 스피너 */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #E5E7EB;
  border-top-color: #00C896;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* 스켈레톤 */
.skeleton {
  background: linear-gradient(
    90deg,
    #F9FAFB 25%,
    #F3F4F6 50%,
    #F9FAFB 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

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

/* 프로그레스 바 */
.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #E5E7EB;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #00C896;
  transition: width 300ms ease-out;
}

9.3 피드백 (토스트)

/* 토스트 컨테이너 */
.toast {
  position: fixed;
  bottom: 20px; /* Mobile */
  left: 50%;
  transform: translateX(-50%);
  background-color: #111827;
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: toast-in 150ms ease-out;
}

@media (min-width: 1024px) {
  .toast {
    bottom: auto;
    top: 20px;
    right: 20px;
    left: auto;
    transform: none;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 토스트 유형별 */
.toast-success {
  background-color: #10B981;
}

.toast-error {
  background-color: #EF4444;
}

.toast-info {
  background-color: #3B82F6;
}

.toast-warning {
  background-color: #F59E0B;
}

9.4 호버/포커스 상태

/* 포커스 아웃라인 */
*:focus-visible {
  outline: 2px solid #00C896;
  outline-offset: 2px;
}

/* 버튼 호버 */
.button:hover {
  filter: brightness(0.9);
}

/* 카드 호버 */
.card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: #00C896;
}

/* 링크 호버 */
a:hover {
  text-decoration: underline;
}

9.5 애니메이션 지속 시간

--duration-instant: 100ms;   /* 호버, 클릭 */
--duration-fast: 150ms;      /* 토스트, 간단한 전환 */
--duration-normal: 200ms;    /* 모달, 드롭다운 */
--duration-slow: 300ms;      /* 페이지 전환 */
--duration-slower: 500ms;    /* 복잡한 애니메이션 */

---

10. 아이콘 시스템

10.1 아이콘 스타일

• 스타일: 라인(Outline) 기본
• 선 굵기: 1.5px (Small), 2px (Medium/Large)
• 라이브러리 추천: Heroicons, Feather Icons, Lucide

10.2 아이콘 크기

--icon-small: 16px;   /* 인라인 아이콘 */
--icon-medium: 20px;  /* 버튼 아이콘 */
--icon-large: 24px;   /* 헤더 아이콘 */
--icon-xlarge: 32px;  /* 강조 아이콘 */

10.3 주요 아이콘

카테고리	아이콘	의미
회의	🎤	음성 녹음
	📝	회의록
	👥	참석자
	⏱️	타이머
상태	✅	완료
	⚠️	경고
	❌	오류
	🔄	진행중
액션	➕	추가
	✏️	수정
	🗑️	삭제
	📤	공유
	💾	저장
Todo	☐	미완료
	☑️	완료
	⭐	우선순위
시간	📅	날짜
	⏰	시간
AI	💡	용어 설명
	🤖	AI 처리

10.4 아이콘 컬러

/* 기본 */
.icon {
  color: #6B7280;
}

/* 활성 */
.icon-active {
  color: #00C896;
}

/* 비활성 */
.icon-disabled {
  color: #D1D5DB;
}

/* 강조 (Semantic) */
.icon-success { color: #10B981; }
.icon-warning { color: #F59E0B; }
.icon-error { color: #EF4444; }
.icon-info { color: #3B82F6; }

---

11. 접근성 가이드

11.1 WCAG 2.1 Level AA 준수

11.1.1 색상 대비

모든 텍스트와 UI 컴포넌트는 WCAG 2.1 Level AA 색상 대비 기준을 충족합니다.

요소	전경색	배경색	대비	기준	통과
제목 텍스트	#111827	#FFFFFF	16.1:1	4.5:1	✅
본문 텍스트	#6B7280	#FFFFFF	5.74:1	4.5:1	✅
보조 텍스트	#9CA3AF	#FFFFFF	3.54:1	3:1	✅
Primary 버튼	#FFFFFF	#00C896	4.52:1	4.5:1	✅
보더	#E5E7EB	#FFFFFF	1.34:1	3:1	⚠️ 비텍스트

주의사항:

• 색상만으로 정보를 전달하지 않습니다 (아이콘, 텍스트 병행)
• 링크는 밑줄 또는 다른 시각적 표시와 함께 사용

11.1.2 터치 타겟

모든 인터랙티브 요소는 최소 44x44px 터치 타겟 크기를 보장합니다.

/* 버튼 최소 크기 */
.button {
  min-height: 44px;
  min-width: 44px;
}

/* 아이콘 버튼 */
.icon-button {
  width: 44px;
  height: 44px;
  padding: 12px;
}

/* 체크박스/라디오 */
.checkbox,
.radio {
  width: 20px;
  height: 20px;
  /* 44x44px 클릭 영역 확보 */
  padding: 12px;
}

간격: 인접한 터치 타겟 사이 최소 8px 간격 유지

11.1.3 포커스 표시

/* 포커스 아웃라인 */
*:focus-visible {
  outline: 2px solid #00C896;
  outline-offset: 2px;
}

/* 키보드 네비게이션 순서 */
button, a, input, textarea, select {
  /* 논리적 탭 순서 보장 */
}

11.1.4 ARIA 레이블

<!-- 아이콘 버튼 -->
<button aria-label="회의 시작">
  <svg>...</svg>
</button>

<!-- 폼 필드 -->
<label for="meeting-title">회의 제목</label>
<input id="meeting-title" type="text" />

<!-- Live Region (실시간 업데이트) -->
<div aria-live="polite" aria-atomic="true">
  회의록이 업데이트되었습니다
</div>

<!-- 상태 표시 -->
<div role="status" aria-label="진행률 60%">
  <div class="progress-bar">...</div>
</div>

11.2 키보드 네비게이션

모든 기능은 키보드로 조작 가능해야 합니다.

키	기능
Tab	다음 요소로 포커스 이동
Shift + Tab	이전 요소로 포커스 이동
Enter / Space	버튼 실행, 링크 이동
Esc	모달 닫기
Arrow Keys	드롭다운, 라디오 버튼 네비게이션

11.3 스크린 리더 지원

<!-- 의미론적 HTML -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<section>...</section>
<footer>...</footer>

<!-- 제목 계층 -->
<h1>페이지 제목</h1>
  <h2>섹션 제목</h2>
    <h3>소제목</h3>

<!-- 목록 -->
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

11.4 반응형 텍스트

텍스트는 200%까지 확대 시에도 콘텐츠 손실이 없어야 합니다.

/* rem 단위 사용 */
html {
  font-size: 16px;
}

body {
  font-size: 0.875rem; /* 14px */
}

h1 {
  font-size: 1.5rem; /* 24px */
}

---

12. 변경 이력

버전	날짜	작성자	변경 내용
1.0	2025-10-20	이미준	초안 작성 - 브랜드 아이덴티티, 컬러 시스템, 타이포그래피, 간격 시스템, 컴포넌트 스타일, 회의록 특화 컴포넌트, 인터랙션 패턴, 아이콘 시스템, 접근성 가이드 포함

---

부록 A. CSS 변수 전체 목록

:root {
  /* 컬러 - Primary */
  --primary-50: #ECFDF5;
  --primary-100: #D1FAE5;
  --primary-200: #A7F3D0;
  --primary-500: #00C896;
  --primary-600: #00B589;
  --primary-700: #00A07C;
  --primary-900: #00725C;

  /* 컬러 - Gray */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* 컬러 - Semantic */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-700: #047857;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-700: #B45309;

  --error-50: #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-700: #B91C1C;

  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-700: #1D4ED8;

  /* 폰트 */
  --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;

  /* 간격 */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xlarge: 16px;
  --radius-full: 9999px;

  /* 애니메이션 */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* 아이콘 */
  --icon-small: 16px;
  --icon-medium: 20px;
  --icon-large: 24px;
  --icon-xlarge: 32px;
}

---

부록 B. 참고 자료

• Pretendard 폰트: https://github.com/orioncactus/pretendard
• Heroicons: https://heroicons.com/
• WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Mobile First Design: https://www.uxpin.com/studio/blog/mobile-first-design/

---

문서 끝