인테리어에서 유래한 60-30-10 법칙이 웹 디자인에도 적용됩니다. 이 간단한 비율만 지키면 조화로운 색상 배치를 할 수 있습니다.
법칙의 의미
주요 색상 60%, 보조 색상 30%, 강조 색상 10% 비율로 사용합니다. 보통 60%는 배경색(흰색이나 밝은 회색), 30%는 주요 콘텐츠 영역, 10%는 CTA 버튼이나 링크에 사용합니다.
웹사이트에 적용
예를 들어 흰 배경(60%)에 진한 남색 텍스트와 카드(30%), 오렌지색 버튼(10%)을 조합합니다. 색상 변환기로 각 색상의 HEX 값을 정리하세요.
실수 피하기
강조색을 너무 많이 쓰면 오히려 눈에 안 띕니다. 10%를 넘기지 마세요. 또한 세 가지 색 외에 추가 색상은 최소화하세요.
다크 테마에서
다크 테마에서는 60%가 어두운 배경이 됩니다. 비율은 같지만 명도 관계가 반전됩니다.
웹사이트별 비율 적용 예시
기업 웹사이트: 흰색 배경 60%, 진한 남색 텍스트/네비게이션 30%, 오렌지 CTA 버튼 10%. 대시보드: 밝은 회색 배경 60%, 카드와 차트 30%, 경고/성공 표시 10%. 색상 변환기에서 각 색상의 정확한 값을 정하세요.
비율은 면적 기준
60-30-10은 화면에 보이는 면적 기준입니다. 버튼 하나가 화면의 10%를 차지하지 않더라도, 시각적 중요도가 10%라는 의미입니다. 강조색은 적게 써야 강조가 됩니다.
실전 컬러 매칭
60-30-10 법칙을 적용할 때 브랜드 가이드의 색상을 어떻게 배분할지 미리 계획하세요. 메인 컬러가 진한 파랑이라면 60%는 흰색/연한 회색 배경, 30%는 진한 파랑 요소, 10%는 보색 계열 강조색으로 구성할 수 있습니다.