색
색의 역할
Color Roles
색의 역할은 화면에 쓰는 색을 중립색·주색·강조색으로 나눠 각 색에 맡은 임무를 정해 주는 방식입니다.
강조 배지
브랜드 색상330°
정의
색의 역할이란 화면에 쓰는 색을 그냥 여러 개 늘어놓는 것이 아니라, 각 색에게 맡은 임무를 정해 주는 방식입니다. 화면 대부분의 배경과 글자, 테두리는 눈에 튀지 않는 중립색(주로 회색 계열)이 조용히 담당하고, 사용자가 눌러야 할 주요 버튼이나 중요한 링크는 브랜드를 대표하는 주색이 맡으며, 아주 가끔 시선을 확 끌어야 하는 곳에만 강조색을 씁니다. 색을 몇 개 쓰느냐보다 각 색이 무슨 일을 하는지가 정해져 있느냐가 훨씬 중요하며, 이렇게 역할을 나누는 것이 색을 다루는 첫 단추입니다.
왜 중요한가
이 구분이 중요한 이유는 사용자가 화면을 읽는 부담을 크게 줄여 주기 때문입니다. 중립색이 바탕을 조용히 받치고 있으면 주색으로 칠해진 요소가 자연히 도드라져, 사용자는 어디를 눌러야 할지 별다른 고민 없이 알아챕니다. 반대로 모든 요소가 저마다 화려한 색을 두르면 무엇이 중요한지 판단할 단서가 사라져 화면이 어수선해지고 값싸 보입니다. 색을 역할별로 정리해 두면 새 화면을 만들 때마다 색을 새로 고민할 필요도 없어져, 제품 전체가 한 사람이 만든 것처럼 일관된 인상을 갖게 됩니다. 또한 역할이 정해져 있으면 나중에 브랜드를 새로 단장할 때도 주색 한 자리만 교체하면 되어, 수십 개의 화면을 일일이 뒤지지 않고도 전체 톤을 한 번에 바꿀 수 있습니다.
흔한 실수
- 강조색을 여기저기 남발하는 경우입니다. 강조는 흔해지는 순간 강조가 아니게 됩니다. 화면의 거의 모든 것이 밝은 색이면 정작 진짜 중요한 버튼이 파묻혀, 사용자의 시선을 원하는 곳으로 이끌 수 없습니다.
- 중립색을 순수한 회색으로만 쓰는 것입니다. 브랜드 색과 아무 관계 없는 무채색 회색은 화면을 차갑고 저렴해 보이게 만들기 쉽습니다. 중립색에도 주색의 기운을 아주 살짝 섞어 주면 화면 전체가 한 가족처럼 묶여 훨씬 조화롭게 느껴집니다.
- 주색을 배경처럼 넓은 면적에 통째로 칠하는 것입니다. 주색은 눌러야 할 곳을 가리키는 신호인데, 넓게 깔아 버리면 어디가 실제 버튼인지 알 수 없어져 원래의 안내 역할을 잃습니다.
실무 팁
- 색은 '많이'가 아니라 '역할별로' 쓰세요. 중립·주색·강조 세 자리를 먼저 정하고 그 안에서만 색을 배치하면, 브랜드 색 하나만 바꿔도 제품 전체 인상이 통째로 달라지는 것을 확인할 수 있습니다. 슬라이더로 주색을 돌려 보면 이 위력이 한눈에 들어옵니다.
- 각 역할에 밝기 단계를 함께 갖춰 두세요. 주색 하나가 아니라 연한 배경용부터 진한 글자용까지 단계가 있어야 실제 화면의 다양한 상황에 대응할 수 있습니다.
- 색이 정해지면 반드시 대비 기준을 통과하는지 확인하세요. 아무리 예쁜 조합도 글자가 읽히지 않으면 역할을 제대로 수행하지 못한 것입니다.