Ch.5 60:30:10 법칙

60:30:10 법칙의 원리

60:30:10 비율 법칙의 기원과 원리를 이해한다UI 디자인에서 주조색·보조색·강조색의 역할을 설명할 수 있다비율 위반이 시각적 피로를 유발하는 원리를 설명할 수 있다

왜 어떤 화면은 편안하고 어떤 화면은 눈이 피곤할까?

고급 호텔 로비에 들어서면 자연스럽게 시선이 흐릅니다. 벽면의 넓은 베이지, 가구의 짙은 나무색, 쿠션의 포인트 컬러 — 이 조합은 우연이 아닙니다.

같은 색을 써도 비율에 따라 완전히 다른 인상이 되는 이유는?

인테리어에서 시작된 60:30:10 법칙 — UI 디자인의 배색 비율을 결정하는 가장 검증된 공식입니다.

article

핵심 내용

색은 '무엇을 쓰느냐'보다 '얼마나 쓰느냐'가 중요합니다

60:30:10 법칙은 원래 인테리어 디자인에서 시작되었습니다. 공간을 3가지 색상 비율로 나누면 시각적 균형이 만들어진다는 경험 법칙이죠.

60% 주조색 + 30% 보조색 + 10% 강조색 = 시각적 안정

이 법칙이 패션, 그래픽 디자인을 거쳐 UI/UX 디자인에도 그대로 적용됩니다. 화면이라는 '공간'도 결국 색의 면적 비율로 인상이 결정되기 때문입니다.

주조색·보조색·강조색 — 각각의 역할이 다릅니다

60% 주조색 (Dominant)

화면의 분위기를 결정하는 배경색입니다. 흰색, 밝은 회색, 연한 베이지 등 중립적인 색상이 일반적입니다. 사용 영역: 페이지 배경, 콘텐츠 영역의 기본 바탕

30% 보조색 (Secondary)

구조와 영역을 구분하는 색상입니다. 카드 배경, 사이드바, 섹션 구분선, 헤더 영역에 사용됩니다. 주조색과 명확한 대비가 있되, 너무 강하지 않아야 합니다.

10% 강조색 (Accent)

시선을 끄는 포인트 색상입니다. CTA 버튼, 링크 텍스트, 배지, 알림 아이콘 등 사용자 행동을 유도하는 요소에 집중됩니다. 면적은 작지만, 가장 강한 채도를 가집니다.

같은 색상이라도 비율이 깨지면 전혀 다른 느낌이 됩니다

흔한 실수 2가지 1. 강조색 남용: 빨간색 버튼이 페이지당 5개 이상 → 어디가 중요한지 모름 2. 주조-보조색 대비 부족: 배경(#FFFFFF)과 카드(#FAFAFA) → 영역 구분 안 됨

60:30:10 법칙에서 '30%'에 해당하는 보조색의 주요 역할은 무엇인가?

강조색을 전체 화면의 30% 이상 사용하면 시각적 피로가 발생한다

60:30:10 법칙은 웹 디자인에서 처음 만들어진 원칙이다

key

배경 → 분위기 결정 (white, light gray, beige)

카드·사이드바 → 구조 형성 (gray-100~200, tinted white)

CTA·링크·배지 → 시선 유도 (brand blue, vivid green 등)

compare_arrows

비율을 지키면 '깔끔하다', 비율이 깨지면 '어수선하다'는 인상을 준다

image

check_circle

퀴즈와 인터랙션으로 더 깊이 학습하세요