60·30·10 배색 법칙을 브랜드에 적용하는 방법

브랜드 색을 세 가지 골랐는데도 화면이 산만하다면 문제는 조합보다 역할에 있을 가능성이 크다. 60·30·10 법칙은 주조색, 보조색, 강조색이 차지할 대략적인 면적을 정해 시선의 질서를 만드는 방법이다. 숫자를 픽셀 단위로 맞추는 규정이 아니라, 어떤 색이 배경을 만들고 어떤 색이 정보를 나누며 어떤 색이 행동을 부르는지 합의하는 언어로 이해하면 실무에서 훨씬 유용하다.

먼저 구분할 세 가지 개념

수학의 황금비 φ ≈ 1.618은 60:30:10과 같은 비율이 아니다. 황금비는 두 길이 사이의 특정한 수학적 관계이고, 60:30:10은 세 색이 화면에서 맡는 면적과 역할을 쉽게 논의하기 위한 실무 관례다. 이름이 비슷하게 소개되더라도 근거와 쓰임은 구분해야 한다.

색 면적에 관한 역사적 이론도 현대 UI의 고정 공식은 아니다. 괴테와 쇼펜하우어의 색채론에서 이어진 빨강과 초록 1:1, 주황과 파랑 1:2, 노랑과 보라 1:3의 면적 관계는 색의 밝기와 균형을 설명하려던 역사적 이론이다. 특정 HEX 색상쌍을 보장하거나 모든 브랜드 화면에 그대로 적용하는 규칙으로 볼 수 없다.

이 사이트가 제공하는 60:30:10, 70:20:10, 80:15:5는 세 역할의 상대적 면적을 비교하는 실무 UI 프리셋이다. 콘텐츠 밀도와 화면 목적에 맞춰 조정하는 출발점이며 보편 법칙이 아니다.

비율은 색을 고르는 공식이 아니다

60·30·10은 서로 잘 어울리는 색을 자동으로 찾아 주지 않는다. 채도와 명도가 모두 비슷한 세 색을 선택한 뒤 면적만 나누면 여전히 흐릿하거나 시끄럽다. 먼저 브랜드가 전달할 인상과 실제 사용 환경을 기준으로 조합을 고르고, 그다음 비율로 역할을 배치해야 한다. 색 조합은 관계를 정하고 비율은 위계를 정한다는 차이를 기억하자.

화면에서 비율을 셀 때는 로고만 보지 않는다. 배경, 카드, 사진의 빈 영역, 텍스트, 선, 아이콘까지 보이는 면적 전체가 대상이다. 흰색도 적극적으로 선택한 색이다. 예를 들어 고요한 신뢰 팔레트는 밝은 백색을 넓게 두고 슬레이트 블루로 구획을 만들며 네이비로 핵심 행동을 묶는다. 세 색의 성격보다 먼저 각 색이 맡을 일을 읽을 수 있는 사례다.

비율은 페이지마다 조금씩 달라도 된다. 결제 화면은 안정적인 주조색 비중이 커지고, 캠페인 첫 화면은 강조색이 잠시 늘어날 수 있다. 중요한 것은 한 화면 안에서 가장 넓은 색, 구조를 돕는 색, 가장 드문 색이 명확히 구별되는가이다. 모든 화면에서 정확히 같은 숫자를 고집하면 콘텐츠의 목적보다 규칙을 우선하게 된다.

주조색 60

주조색은 배경과 큰 면을 담당하며 사용자가 브랜드 공간에 들어왔을 때 느끼는 기본 온도를 만든다. 웹에서는 페이지 배경, 넓은 카드, 입력 영역, 여백이 주조색 면적에 포함된다. 흰색과 중성색도 반드시 색으로 계산한다. 아무 색도 칠하지 않은 것이 아니라 읽기와 사진을 살리기 위해 밝은 색을 선택한 결과이기 때문이다.

주조색은 오래 바라봐도 피로하지 않아야 한다. 선명한 주황이나 전기 보라가 브랜드 대표색이더라도 전체 배경으로 쓰기보다 옅게 조정한 변형색을 주조색으로 삼을 수 있다. 브랜드 대표색과 화면 주조색이 반드시 같아야 하는 것은 아니다. 로고의 강한 색을 기억점으로 남기고 서비스 화면은 중성 배경으로 운영하면 브랜드성과 사용성을 함께 지킬 수 있다.

주조색을 고른 뒤에는 실제 콘텐츠를 얹어 본다. 긴 문단, 가격 표, 제품 사진, 오류 메시지가 모두 놓였을 때도 바탕이 안정적인지 확인한다. 빈 와이어프레임에서 아름다운 색이 실제 화면에서는 사진과 경쟁할 수 있다. 특히 따뜻한 크림색은 흰 배경 사진과 경계가 약해질 수 있으므로 카드 선이나 그림자를 별도로 설계한다.

보조색 30

보조색은 섹션 구분과 브랜드 성격을 담당한다. 내비게이션, 정보 카드, 큰 제목 띠, 인용 영역처럼 한 단계 다른 공간임을 알려야 하는 곳에 사용한다. 주조색과 충분히 구별되면서도 강조색처럼 소리치지 않아야 한다. 보조색이 너무 강하면 모든 섹션이 행동을 요구하는 것처럼 보이고, 너무 비슷하면 구조가 사라진다.

보조색의 면적은 단순히 삼십 퍼센트를 채우는 일이 아니다. 한 페이지에 카드가 많다면 카드 배경 전체가 아니라 상단 라벨, 구분선, 보조 패널에 분산할 수 있다. 미드나이트 골드 팔레트는 차콜을 보조색으로 두어 크림색 여백에 깊은 구조를 만든다. 금색을 넓히지 않아도 차콜과 크림의 대비만으로 프리미엄 인상이 형성된다.

브랜드 성격은 보조색에서 구체화되는 경우가 많다. 같은 흰색 주조 배경이라도 세이지를 더하면 편안한 웰니스가 되고, 네이비를 더하면 책임감 있는 전문 서비스가 된다. 그래서 보조색을 고를 때는 경쟁사 화면과 나란히 놓고 지나치게 비슷한지 확인한다. 대표색 하나만 비교하지 말고 배경과 섹션을 함께 보아야 실제 경험의 중복을 발견할 수 있다.

강조색 10

강조색은 버튼, 링크, 배지처럼 행동과 기억점을 만든다. 면적은 작지만 의미의 우선순위는 가장 높다. 사용자가 지금 눌러야 할 버튼, 아직 읽지 않은 알림, 중요한 숫자를 빠르게 찾도록 돕는다. 강조색을 로고 장식과 모든 아이콘에 반복하면 희소성이 사라져 정작 핵심 버튼이 보이지 않는다.

처음 적용할 때는 가장 중요한 행동 한 종류만 고른다. 예를 들어 가입이 핵심이면 기본 가입 버튼에만 강조색을 쓰고, 취소와 뒤로 가기는 중성 스타일로 남긴다. 링크에도 같은 색을 쓴다면 밑줄이나 굵기로 버튼과 행동 수준을 구별한다. 색만으로 성공, 경고, 오류를 전달하지 말고 문구와 아이콘을 함께 제공해야 의미 충돌을 막을 수 있다.

시트러스 네이비 팔레트에서는 노랑이 활기를 만들고 네이비가 행동의 신뢰를 붙잡는다. 노랑 위에는 흰 글자가 아니라 검정 계열을 써야 읽기 쉽다. 이처럼 강조색의 면적뿐 아니라 그 위의 텍스트 대비까지 역할 정의에 포함해야 한다. 작은 배지에서 읽기 어려우면 같은 색을 테두리나 아이콘에만 쓰는 대안도 고려한다.

70·20·10과 80·15·5

콘텐츠가 많고 절제된 서비스에는 70·20·10이나 80·15·5가 더 적합하다. 문서 도구, 금융 대시보드, 의료 예약처럼 오래 읽는 화면은 중성 주조색을 늘리고 유색 면적을 줄여 집중을 돕는다. 강조색 오 퍼센트는 존재감이 약하다는 뜻이 아니라 등장 횟수를 엄격히 제한한다는 뜻이다. 희소한 색은 오히려 더 빨리 발견된다.

반대로 행사 포스터나 짧은 캠페인 페이지에서는 보조색 면적이 커질 수 있다. 그래도 강조색이 가장 중요한 행동을 독점하도록 해야 한다. 숫자를 바꿀 때는 브랜드 성격이 아니라 사용자의 체류 시간, 정보 밀도, 과업 위험도를 근거로 삼는다. 결제나 삭제처럼 실수 비용이 큰 화면일수록 안정된 면적과 명확한 상태 표현이 중요하다.

실제 적용 순서

첫째, 세 색에 주조색, 보조색, 강조색 역할을 글로 지정한다. 둘째, 화면을 흑백으로 바꿔도 제목, 카드, 버튼의 위계가 남는지 점검한다. 셋째, 모든 텍스트와 배경 조합의 대비를 확인한다. 넷째, 작은 화면에서 카드가 세로로 쌓이고 강조색이 연속으로 반복될 때도 우선순위가 유지되는지 본다. 역할 지정 → 흑백 점검 → 대비 확인 → 작은 화면 확인 순서를 지키면 취향 논쟁이 구체적인 검토로 바뀐다.

마지막으로 실제 콘텐츠가 들어간 대표 화면 세 개를 나란히 둔다. 첫 화면, 상세 화면, 완료 또는 오류 화면을 함께 보면 특정 색이 한 상황에서만 과도하게 쓰이는 문제를 찾기 쉽다. 비율은 최종 수치가 아니라 팀의 판단을 돕는 출발점이다. 사용자가 어디를 보고 무엇을 해야 하는지가 분명하다면 숫자는 목적에 맞게 조정해도 된다.