새 웹사이트를 만들 때 사장님들이 가장 즐겁게 참여하는 단계가 색을 고르는 일입니다. 브랜드 로고의 파랑, 강조하고 싶은 빨강, 깔끔해 보이는 초록, 고급스러운 금색까지 마음에 드는 색을 하나씩 더합니다. 그런데 그렇게 완성된 화면을 처음 본 고객은 어디를 봐야 할지 몰라 눈을 헤맵니다. 색이 많아질수록 화면은 시끄러워지고, 정작 눌러야 할 '문의하기' 버튼은 다른 색들에 묻혀 사라집니다. 색은 더하는 게 아니라 덜어내는 방향으로 잡아야 합니다.
1. 색은 세 가지면 충분하다
잘 만든 작은 회사 사이트는 대부분 세 가지 색으로 굴러갑니다. 화면의 대부분을 차지하는 주조색(보통 흰색이나 옅은 회색 배경), 로고·제목에 쓰는 보조색(브랜드 색), 그리고 행동을 부르는 강조색 하나입니다. 흔히 60·30·10 비율이라고 부릅니다.
- 60% — 배경을 채우는 차분한 주조색
- 30% — 브랜드를 드러내는 보조색
- 10% — 시선을 끌어야 할 곳에만 쓰는 강조색
색을 더 넣고 싶을 땐 새 색을 고르는 대신 같은 색의 밝기를 조절해 쓰는 편이 훨씬 정돈돼 보입니다.
2. 강조색은 '여기를 누르세요'에만 쓴다
강조색이 강조색인 이유는 화면에 드물게 등장하기 때문입니다. 문의·예약·구매처럼 고객이 꼭 해주길 바라는 행동, 즉 핵심 버튼에만 강조색을 씁니다. 그런데 제목에도 쓰고, 아이콘에도 쓰고, 밑줄에도 쓰기 시작하면 어느 순간 버튼이 배경에 섞여버립니다. 한 화면에서 가장 눈에 띄어야 할 단 하나의 버튼을 정하고, 그 색은 그 버튼만의 것으로 남겨두세요.
3. 색만으로 정보를 전하지 않는다
'빨간 글씨가 품절, 초록 글씨가 구매 가능'처럼 색 하나에만 의미를 싣는 화면은 위험합니다. 남성 20명 중 1명꼴로 빨강과 초록을 구분하기 어렵고, 화면 밝기나 조명 때문에 색이 다르게 보이는 경우도 많기 때문입니다. 색은 거들 뿐, 정보는 글자나 아이콘이 함께 전해야 합니다. '품절'이라는 글자, 체크 표시 같은 신호를 색과 나란히 두면 누구에게나 분명하게 읽힙니다.
4. 한 번 정한 색은 코드로 고정한다
같은 파랑이라도 메인 화면은 진하고 문의 페이지는 흐리면, 고객은 같은 회사 사이트인지 의심하게 됩니다. 이런 어긋남은 대개 그때그때 눈대중으로 색을 찍어 넣어서 생깁니다. 브랜드 색은 #1A4FCB처럼 정확한 코드값으로 적어 문서에 남기고, 사이트에서는 CSS 변수 한 곳에서 관리하세요. 나중에 색을 바꿀 때도 한 줄만 고치면 모든 화면이 한꺼번에 따라옵니다.
5. 글자와 배경의 명도 대비를 지킨다
연한 회색 배경에 연한 회색 글씨는 디자인 시안에선 세련돼 보여도, 밝은 야외에서 휴대폰을 보는 고객에겐 거의 읽히지 않습니다. 색을 고를 땐 예쁜지뿐 아니라 글자와 배경의 밝기 차이가 충분한지를 함께 봐야 합니다. 본문 글자는 배경과의 명도 대비가 최소 4.5:1은 되어야 한다는 접근성 기준이 좋은 출발점입니다. 무료 대비 검사 도구에 색 코드 두 개를 넣으면 통과 여부를 바로 확인할 수 있습니다.
색을 줄이면 메시지가 선명해진다
좋은 색 선택은 화려한 팔레트가 아니라, 고객의 시선을 원하는 곳으로 데려가는 절제에서 나옵니다. 색을 하나 더하기 전에 '이 색이 어떤 일을 하는가'를 먼저 물어보세요. CYAN은 작은 회사의 웹사이트를 만들 때 브랜드 색을 코드값으로 정리하고, 강조색이 핵심 버튼에서 제 역할을 하도록 화면 전체의 색을 설계합니다. 색이 적을수록 전하려는 메시지는 오히려 선명해집니다.