‘중요한 디자인 구성요소에는 중요한 컬러를 적용‘에서 디자인을 구성하는 색의 역할에 대해서 알아보았습니다.
- 주제색(Primary Color): 주인공 역할을 하는 색, 브랜드 컬러(Brand Color)
- 강조색(Accent Color): 강조하는 역할을 하는 색
- 배경색(BG Color): 바탕, 백그라운드(BG, Background)에 사용하는 색
- 보조색(Sub Color): 보조적인 역할을 하는 색
디자이너는 색의 역할에 맞는 컬러를 정하는 ‘컬러 계획(Color Scheme)’을 세우고 디자인을 진행합니다. 앞서 색의 의미에서 주제색 또는 브랜드 컬러를 찾는 방법과 색을 조화롭게 배색하는 방법도 알아보았습니다.
그리고 ‘비전공자를 위한 디자인 TIP! 01. 컬러와 폰트는 1~2개만 사용하자!‘에서는 중요한 역할을 하는 요소에 중요한 컬러인 주제색 또는 강조색 1~2개, 그리고 5~10% 정도로 사용하면 좋은 디자인을 할 수 있다고 했습니다.
중요한 컬러(강조색, 주제색)가 10% 이하로 사용되면 좋은 색 구성의 디자인할 수 있는 비밀이 바로 60-30-10 법칙에 있습니다! 60-30-10 법칙은 색을 구성하는 데 있어서 구성 비율의 균형을 조화롭게 맞추는 공식입니다.
60-30-10 법칙(The 60-30-10 Rule)
60-30-10 법칙은 색을 적용할 때 또는 컬러 계획(Color Scheme)을 세울 때 색의 비율을 균형감 있게 맞추기 위해 사용되는 간단한 법칙입니다.
기본적으로 60%의 비율로 배경색, 30%는 보조색, 10%는 강조색으로 색 구성에 적용하는 것입니다. 색의 역할에 따라 비율을 조정하여 적용하면 색 구성에 있어서 조화로운 균형을 줄 수 있습니다.
색이 60%에 사용되는 경우 보통 배경에 사용되기 때문에 배경색(바탕색, BG Color)으로 명칭 할 수 있습니다. 흰색, 회색, 검은색처럼 무채색이나 중성색(Neutral Color)이 무난하게 많이 적용되곤 합니다. 주로 사용되는 색이라고 해서 주조색(Dominant Color)이라고 부르기도 합니다.
30%에 적용되는 두 번째 컬러(Secondary Color)인 보조색은 배경색 60%와 강조색 10%를 연결하는 색상입니다. 배경색 60%와 어느 정도 대비를 이루는 색을 조합하는 것이 좋으며, 보조 브랜드 컬러가 적용되는 예도 많습니다.
60-30-10 법칙에 의하면 강조색은 10% 이하로 적용하는 것이 색 구성에 효과적인데 주제색 또는 브랜드 컬러가 적용될 수 있습니다.
그래서 중요한 역할을 하는 색, 주제색과 강조색을 중요한 디자인 구성요소에 10% 정도만 적용하는 것입니다. 너무 많은 비율로 분배하면 중요성, 강조성이 저하되어 사용자가 중요한 것을 인지하는 데 어려움을 겪게 됩니다.
그러면 60-30-10 법칙이 디자인에 적용된 사례를 통해 알아보도록 하겠습니다.
1) 인테리어 디자인(Interior Design)
60-30-10 법칙은 인테리어 디자인에도 많이 적용됩니다. 위의 인테리어를 보면 전체적으로 배경이 되는 벽과 가구에 무채색인 흰색(배경색 60%)이 사용되었고, 검은색이 보조색(30%) 역할을 합니다. 강조색 10% 정도로 노란색 의자 소파가 배치된 것을 알 수 있습니다.
2) 로고 디자인(Logo Design)
‘d-mark’ 로고 디자인 어플리케이션에는 로고의 컬러를 토대로 배경색 60%, 보조색 30%, 강조색 10% 비율로 적용되었습니다. 로고 디자인보다는 로고를 다른 매체에 응용할 때 로고의 구성 컬러를 활용하여 60-30-10 법칙에 맞춰 색 구성의 균형을 맞출 수 있습니다.
E-JUNG 회사의 명함 디자인을 보면 기본 로고의 메인 브랜드 컬러(Main Brand Color)를 배경색 60%, 흰색을 보조색 30%, 서브 브랜드 컬러(Sub Brand Color)를 강조색 10% 정도로 적용한 것을 알 수 있습니다.
3) 웹 디자인(Web Design)
출처: BBC StoryWorks
BBC Storyworks의 웹 디자인의 경우, 검은색이 배경색으로 60%, 흰색이 보조색 30%, 제목과 ‘Discover’ 버튼에 10% 정도로 적용된 것을 알 수 있습니다.
웹 디자인이나 앱 디자인에서 중요한 버튼에 강조색을 적용하는 경우가 많습니다. 모든 버튼에 강조색을 활용하게 되면 사용자가 어떤 버튼이 중요한 버튼인지 인지하는 데 혼란을 주게 되겠지요?
4) 앱 디자인(APP Design)
출처: starbucks.com
스타벅스 앱 디자인을 보면 배경색으로 검은색 60%, 보조색으로 흰색 30%, 강조색 10% 정도로 녹색이 적용된 것을 볼 수 있습니다. 스타벅스 로고의 주제색인 브랜드 컬러가 강조색으로 활용된 경우로 브랜드 컬러인 녹색이 ‘카드 등록하기’ 버튼과 하단의 배달 버튼에 사용되었습니다.
이처럼 주제색 또는 브랜드 컬러가 강조색의 역할로 적용될 수 있습니다.
(The Token Logo)
출처:mcdonalds.com
맥도날드 앱 디자인에는 배경색 60% 비율로 흰색, 보조색에는 브랜드 컬러인 노란색이 30%, 강조색으로 브랜드 컬러인 빨간색이 10% 정도 사용되고 있습니다.
‘회원가입’ 버튼, 할인 정보 심볼, 하단의 ‘홈’ 아이콘에 브랜드 컬러인 빨간색이 적용되어 중요한 정보를 강조하고 있는 것입니다.
이처럼 웹 디자인과 앱 디자인과 같은 UI(User Interface, 유저 인터페이스) 디자인에서 중요한 버튼과 아이콘에 강조색이 활용됩니다.
60-30-10 법칙에서 강조색을 10% 정도로 구성하는 이유 중 하나는 UI 디자인에서처럼 정말 중요한 정보를 표시하는 디자인 구성요소에만 적용해서 사용자의 인지를 쉽게 도와주는 것입니다.
5) 소프트웨어 디자인(Software Design)
출처: Adobe Photoshop 2020 캡처
포토샵의 작업영역은 전체적으로 어두운 회색톤으로 디자인되어 있습니다. 새 문서(파일 > 새로 만들기) 대화 상자를 보면 어두운 회색이 배경색 60%, 흰색과 밝은 회색이 보조색 30%, 선택된 항목과 만들기(Create) 버튼을 표시하는 파란색이 강조색 10%로 구성되었습니다.
60-30-10 법칙은 색 구성 비율의 균형을 조화롭게 맞출 수 있는 아주 유용한 공식입니다!
참조
- Nick Babich, 6 Simple Tips On Using Color In Your Design, UX Planet, 2019.03.07.
- Danny Sapio, 10 Principles for Color Usage in UI Design, UX Collective, 2020.07.13.
- Wojciech Zieliński, How to use colors in UI Design, Prototypr.io, 2017.01.23.
- 김준범, 웹디자인을 위한 컬러 선택, 2020.08.19.
- 이랑주, 좋아 보이는 것들의 비밀, 인플루엔셜, 2016.