로고를 만들 때 디자이너가 컬러 시안을 다섯 개 뽑아줬다. 다 마음에 들어서 사이트에 전부 넣었더니, 화면은 더 화려해지기는커녕 어디를 봐야 할지 모르게 산만해졌다. 색이 많다고 풍부해 보이는 게 아니다. 잘 만든 사이트는 보통 색을 아주 적게 쓴다. 작은 회사 웹사이트의 컬러 팔레트를 정리하는 다섯 가지 원칙을 정리했다.
1. 메인 컬러는 하나, 비율은 60·30·10으로
가장 흔한 실수는 브랜드 컬러를 두세 개 동등하게 쓰는 것이다. 색에는 위계가 필요하다. 화면의 약 60%는 배경(보통 흰색이나 아주 옅은 회색), 30%는 보조색, 나머지 10%만 메인 브랜드 컬러에 할당한다는 감각으로 접근하면 좋다. 메인 컬러가 화면의 10%만 차지할 때 오히려 더 또렷하게 각인된다.
2. 회색도 엄연한 색이다
본문 글자, 구분선, 카드 배경, 비활성 버튼까지 — 사이트의 대부분은 사실 회색 계열로 이뤄진다. 그런데 이 회색을 순수한 검정·회색(#000, #888)으로만 쓰면 화면이 차갑고 딱딱해진다.
- 중성 회색 계조를 5단계 정도 미리 정해둔다. 가장 진한 글자색부터 가장 옅은 배경색까지 단계를 만들어두면 어디에 어떤 회색을 쓸지 고민할 일이 없다.
- 회색에 메인 컬러를 아주 살짝 섞는다. 푸른 브랜드라면 회색에도 푸른 기를 약간 넣으면 사이트 전체가 한 톤으로 묶인다.
3. 강조색은 '행동'을 위해 아껴 쓴다
구매·문의·신청처럼 고객이 눌러야 할 버튼에 쓰는 색을 강조색(accent)이라고 한다. 이 색은 화면에서 가장 눈에 띄어야 하므로, 다른 곳에 함부로 쓰면 안 된다. 제목에도 쓰고 아이콘에도 쓰고 버튼에도 쓰면, 정작 중요한 버튼이 묻혀버린다. 강조색이 보이는 곳 = 눌러야 할 곳이라는 약속을 사이트 전체에서 지키면, 고객은 설명 없이도 다음에 뭘 할지 안다.
4. 색만으로 정보를 전달하지 않는다
"빨간 항목은 품절입니다" 같은 안내는 색을 구분하지 못하는 사용자에게는 전달되지 않는다. 색은 항상 텍스트나 아이콘과 함께 쓴다. 또한 글자색과 배경색의 명도 대비가 충분한지 확인해야 한다. 옅은 회색 배경 위 옅은 회색 글자는 디자이너 화면에선 멋져 보여도, 밝은 야외에서 휴대폰을 보는 고객에게는 읽히지 않는다. 본문 텍스트는 배경과 대비 4.5:1 이상을 기준으로 잡는다.
5. 색은 한 곳에 정의하고 변수로 부른다
같은 파란색이 페이지마다 미묘하게 다르다면, 색 코드를 그때그때 직접 입력하고 있다는 뜻이다. 메인·보조·강조·회색 계조를 CSS 변수로 한 번 정의해두고 사이트 전체가 그 변수를 부르게 하면, 나중에 브랜드 컬러를 바꿔야 할 때 한 줄만 고치면 된다. 색의 일관성은 감각이 아니라 구조로 지키는 것이다.
결국 절제가 전문성을 만든다
컬러 팔레트의 핵심은 '어떤 색을 더 넣을까'가 아니라 '어떤 색을 빼도 되는가'에 가깝다. 메인 한 색, 정돈된 회색, 아껴 쓴 강조색 — 이 세 축만 잡아도 사이트는 한결 단정하고 믿음직해 보인다.
CYAN 에이전시는 작은 회사의 사이트를 만들 때 색을 먼저 줄이는 것에서 시작한다. 브랜드가 가진 단 하나의 색을 또렷하게 살리는 화면을 고민하고 있다면, 지금 쓰는 사이트의 색부터 한 번 정리해보길 권한다.