통합 요약노트
Ch.5 60:30:10 법칙
배색 비율의 공식 — 주색, 보조색, 강조색과 접근성
이 챕터의 내용
60:30:10 법칙의 원리
인테리어에서 시작된 60:30:10 법칙 — UI 디자인의 배색 비율을 결정하는 가장 검증된 공식입니다.
색은 '무엇을 쓰느냐'보다 '얼마나 쓰느냐'가 중요합니다
60:30:10 법칙은 원래 인테리어 디자인에서 시작되었습니다. 공간을 3가지 색상 비율로 나누면 시각적 균형이 만들어진다는 경험 법칙이죠.
60% 주조색 + 30% 보조색 + 10% 강조색 = 시각적 안정
- 60:30:10 법칙: 인테리어에서 시작된 배색 비율 공식
- 60% 주조색: 배경, 분위기 결정 (중립적 색상)
- 30% 보조색: 카드·사이드바, 구조 형성
- 10% 강조색: CTA·링크·배지, 시선 유도 (높은 채도)
- 흔한 실수: 강조색 남용, 주조-보조 대비 부족
색상 팔레트 구성법
답은 체계적인 팔레트 확장입니다. 하나의 브랜드 색에서 명도와 채도를 조절해 전체 색상 시스템을 만들 수 있습니다.
색상에는 '이름'이 아니라 '역할'을 부여해야 합니다
디자인 시스템에서 색상은 red, blue 같은 색상명이 아니라, primary, error, surface 같은 역할로 정의합니다. 이것을 색상 역할 토큰(Color Role Token)이라 부릅니다.
color-red-500 (X) → color-error (O) — 역할 기반 네이밍이 유지보수의 핵심
- 색상은 이름(red)이 아니라 역할(error)로 정의한다
- 색상 역할 토큰: surface, on-surface, primary, secondary, accent
- 시맨틱 4종: Success(green), Error(red), Warning(amber), Info(blue)
- Gray Scale: 50~900 단계로 배경·테두리·텍스트 커버
- 브랜드 1색 → Tint/Shade 확장 → 역할 매핑으로 전체 팔레트 완성
접근성과 WCAG 대비율
WCAG 대비율 기준과 색각 이상 대응 — 접근 가능한 디자인의 두 가지 핵심 축입니다.
색상 대비란 '읽힐 수 있는가'의 문제입니다
WCAG(Web Content Accessibility Guidelines)는 웹 접근성의 국제 표준입니다. 색상 대비율은 전경색과 배경색의 밝기 차이를 1:1 ~ 21:1 범위의 숫자로 표현합니다.
대비율 1:1 = 동일한 색 (읽기 불가) / 21:1 = 검정 위 흰색 (최대 대비)
- WCAG AA: 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상
- WCAG AAA: 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상
- 색각 이상 3유형: 적색맹, 녹색맹, 청색맹 — 남성 8% 해당
- 핵심 원칙: 색상만으로 정보 전달 금지 → 아이콘·텍스트·패턴 병행
- 다크 모드: 단순 반전 X → 짙은 회색 배경 + pastel 강조색 + 고도별 명도 차이
- 색 항상성: 조명/모드가 바뀌어도 뇌는 같은 색으로 인식하려 함
핵심 용어 모음
60% 주조색
배경 → 분위기 결정 (white, light gray, beige)
30% 보조색
카드·사이드바 → 구조 형성 (gray-100~200, tinted white)
10% 강조색
CTA·링크·배지 → 시선 유도 (brand blue, vivid green 등)
surface
페이지·카드 배경색. 가장 넓은 면적을 차지하는 중립색
on-surface
surface 위의 텍스트·아이콘 색. 충분한 대비율 필수
primary
브랜드 대표색. CTA 버튼, 활성 탭, 선택 상태에 사용
secondary
보조 행동 요소. 두 번째 중요도의 버튼, 칩, 토글
accent
시선 집중 포인트. 배지, NEW 태그, 알림 닷
primary-50
#EFF6FF — 선택 영역 배경, 태그 배경
primary-100
#DBEAFE — hover 배경, 활성 사이드바
primary-500
#3B82F6 — 링크 텍스트, 보조 버튼 테두리
primary-600
#2563EB — CTA 버튼, 활성 탭 (기준색)
비교 정리
| 항목 | 60:30:10 준수 | 비율 깨짐 |
|---|---|---|
| 배경 | 넓은 흰색/밝은 회색이 콘텐츠 공간 확보 | 배경에 진한 색이 과다 → 답답함 |
| 카드/구조 | 보조색이 자연스럽게 영역 구분 | 보조색 부재 → 모든 요소가 같은 평면 |
| CTA 버튼 | 강조색이 버튼에만 집중 → 즉시 눈에 띔 | 강조색이 여러 곳에 분산 → 어디를 눌러야 할지 혼란 |
| 사용자 경험 | 시선이 자연스럽게 흐름 | 시선이 분산되어 피로감 증가 |
| 항목 | 올바른 다크 모드 | 단순 색 반전 |
|---|---|---|
| 배경 | 짙은 회색(#1A1A2E) — 순수 검정 피함 | 순수 검정(#000000) — 눈의 피로 유발 |
| 텍스트 | 밝은 회색(#E0E0E0) — 부드러운 대비 | 순수 흰색(#FFFFFF) — 글자가 번져 보임 |
| 고도(Elevation) | 높은 요소일수록 약간 밝은 배경 → 계층 표현 | 그림자로만 고도 표현 → 다크 배경에서 안 보임 |
| 강조색 | 채도를 낮추고 명도를 올린 pastel 톤 사용 | 라이트 모드와 동일한 채도 → 눈부심 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기