60–30–10 색상 규칙: 법칙이 아닌 유용한 기준

60, 30, 10이 실제로 뜻하는 것

비율은 픽셀 감사가 아니라 시각적 몫을 설명합니다. 약 60%는 지배적인 분위기, 30%는 보조 층, 10%는 시선의 방향을 만듭니다. 공간은 벽·가구·소품에, 인터페이스는 캔버스·패널·상호작용 강조에 역할을 연결할 수 있습니다.

시각적 무게가 다르므로 면적만 보면 안 됩니다. 작은 선명한 빨간 버튼은 훨씬 큰 옅은 파란 패널보다 눈에 띌 수 있습니다. 숫자는 불균등한 위계를 만들라는 알림으로 읽고 채도, 대비, 위치, 움직임, 의미에 따라 조정하세요.

밝은 제품에서 60% 계열은 페이지 바탕과 열린 여백일 수 있습니다. 30%는 카드, 내비게이션, 차트, 그림 면에 들어갑니다. 10% 강조는 모든 아이콘을 꾸미기보다 소수의 가치 높은 상호작용을 식별해야 합니다.

글자는 면적은 작지만 대부분의 정보를 전달하므로 한 비율에 깔끔하게 들어가지 않습니다. 읽을 수 있는 글자와 포커스는 장식 비율 밖의 필수 조건으로 다루세요. 무드보드 비율을 지키려고 대비를 낮추면 안 됩니다.

사용자가 가장 오래 볼 넓은 지배색부터 정합니다. 화면을 조각내지 않으면서 경계를 만드는 보조 계열을 더합니다. 그다음 두 계열과 충분히 다르고 의도한 역할에 쓸 수 있는 강조색을 고릅니다.

강조색이 가장 높은 RGB 채도일 필요는 없고 맥락 안에서 가장 강한 주목 신호면 됩니다. 옅은 파스텔 페이지에서는 검정에 가까운 버튼이 10% 색 역할을 할 수 있고 어두운 인터페이스에서는 부드러운 크림이 강조가 될 수 있습니다.

밀도가 높은 대시보드, 데이터 시각화, 접근성 테마, 콘텐츠 중심 페이지에는 다른 배분이 필요합니다. 여러 범주의 차트에는 여러 표시색이 필요하고 읽기 화면은 종이색 90%와 나머지 10%일 수 있습니다. 캠페인 랜딩은 의도적으로 큰 두 면을 맞설 수 있습니다.

어떤 계열이 장소를 만들고, 어떤 계열이 구조를 돕고, 무엇이 행동을 끄는지라는 질문은 유지하세요. 여전히 모든 영역이 경쟁한다면 정확한 비율을 강제하기보다 불필요한 색을 줄이고 보조색 채도를 낮추거나 강조색을 더 아껴 쓰세요.

먼저 글자가 안 보일 만큼 축소합니다. 큰 지배색과 보조색 덩어리가 여전히 구분돼야 합니다. 정상 크기에서는 과업을 따라가며 강조가 모든 단계를 끊지 않고 방향을 잡는지 봅니다. 마지막으로 확대해 개별 구성요소의 대비와 상태 차이를 확인합니다.

모바일에서도 반복하세요. 데스크톱에서 30%였던 옆 패널이 휴대폰에서는 전체 폭 블록이 되어 지배할 수 있습니다. 반응형 레이아웃이 비율을 바꾸므로 좁은 화면에서는 같은 토큰의 위치나 강조 빈도를 줄여야 할 수 있습니다.

비율 합계를 정확히 맞춰야 하나요?

아닙니다. 측정 표준이 아니라 구성 경험칙입니다. 불균등한 위계와 절제된 강조를 만드는 데 가치가 있습니다.

중립색을 60%로 써도 되나요?

네. 흰색, 크림, 회색, 검정에 가까운 캔버스가 오래 쓰는 지배 계열이 되고 색은 보조와 강조 역할에 집중되는 경우가 많습니다.

강조색은 반드시 밝고 선명해야 하나요?

아닙니다. 주변과 비교해 적절한 주목을 끌면 됩니다. 매우 밝고 조용한 구성에서는 어둡거나 채도가 낮은 색도 강조가 됩니다.