topic★★★★★난이도
60:30:10 법칙의 원리
주색 60% · 보조색 30% · 강조색 10% — 인테리어에서 UI까지 통하는 배색 비율의 황금률.
#60:30:10#주색#보조색#강조색#배색비율
왜 배우는가
색이 3개만 있어도 비율을 모르면 산만해진다. 60:30:10은 시각적 안정감을 수학적으로 보장하는 가장 단순하면서도 효과적인 규칙이다.
60:30:10 법칙은 원래 인테리어 디자인에서 유래했다. 방의 벽(60%)에 기본 색을 칠하고, 가구와 커튼(30%)에 보조색을 쓰고, 쿠션이나 꽃병 같은 소품(10%)에 포인트 색을 주는 방식이다. 이 비율은 인간의 눈이 안정감을 느끼는 최적 지점으로, UI 디자인에도 그대로 적용된다.
| 역할 | 비율 | UI에서의 위치 | 예시 |
|---|---|---|---|
| 주색 (Dominant) | 60% | 배경, 여백, 큰 표면 | 흰색/베이지 배경 |
| 보조색 (Secondary) | 30% | 카드, 사이드바, 헤더 | 연한 회색, 뉴트럴 톤 |
| 강조색 (Accent) | 10% | CTA 버튼, 링크, 아이콘 | 브랜드 컬러 (민트, 파랑 등) |
핵심은 강조색을 아끼는 것이다. 화면 전체 면적의 10%만 강조색을 쓰기 때문에, 그 색이 놓인 곳에 자연스럽게 시선이 집중된다. 강조색을 남발하면 '모든 것이 중요해서 아무것도 중요하지 않은' 상태가 된다.
60:30:10은 엄격한 수학이 아니라 방향성이다. 실제 UI에서 픽셀 단위로 60%를 맞출 필요는 없다. 중요한 것은 '배경이 가장 넓고, 강조색이 가장 적다'는 위계(hierarchy)를 유지하는 것이다.
JIT 앱의 60:30:10 — Warm Beige(#FAF6F0)가 배경의 70%, Ink(#1A1A1A) 텍스트가 20%, Mint(#3ECFB4)와 Amber(#F5A623)가 강조 10%를 차지한다. 이 비율 덕분에 민트색 버튼 하나만으로도 강한 시선 유도가 가능하다.