손님이 홈페이지에 들어와 가장 먼저 반응하는 건 글자가 아니라 색이다. 어떤 화면은 3초 만에 '여기 믿을 만하네' 하는 인상을 주고, 어떤 화면은 색이 여기저기서 소리를 질러 어디를 봐야 할지 모르게 만든다. 색은 사장님의 취향 문제가 아니라, 손님의 시선을 어디로 이끌지 정하는 안내판이다. 작은 회사일수록 색 몇 개만 제대로 정하면 큰돈 들이지 않고도 화면이 정돈되고 신뢰가 생긴다. 그 다섯 가지 원칙을 정리했다.
1. 색은 세 층으로 나눠 역할을 준다
좋은 화면은 색이 많은 화면이 아니라 색마다 역할이 분명한 화면이다. 색은 세 가지로 나누는 것이 기본이다.
- 바탕색: 화면의 대부분을 차지하는 흰색 또는 아주 옅은 회색. 눈이 쉬는 자리다.
- 주색(브랜드 색): 로고·제목·아이콘에 쓰는 우리 가게의 대표 색.
- 강조색: 딱 한 가지, 버튼처럼 '눌러야 할 곳'에만 쓰는 색.
비율은 대략 바탕 70, 주색 25, 강조 5 정도가 안정적이다. 색을 이렇게 계급으로 나눠 두면, 새 페이지를 만들 때마다 '이건 무슨 색으로 하지'로 고민할 일이 사라진다.
2. 강조색은 아껴 써야 힘이 산다
초보 사장님이 가장 흔히 하는 실수는 중요해 보이는 것마다 눈에 띄는 색을 칠하는 것이다. 그러면 모든 게 강조되어 결국 아무것도 강조되지 않는다. 강조색은 손님이 눌렀으면 하는 단 하나의 행동, 즉 '문의하기'·'예약하기' 버튼에만 남겨 둔다. 화면에 그 색이 딱 한 군데만 있으면, 손님의 눈은 자연스럽게 그리로 끌려간다. 색을 아끼는 것이 곧 전환을 만드는 설계다.
3. 업종의 '온도'에 맞는 색을 고른다
색에는 온도와 인상이 있다. 손님은 색만 보고도 무의식적으로 업종을 짐작한다.
- 파랑·남색: 신뢰·전문성. 병원, 법률·세무, IT.
- 초록: 건강·자연·안심. 식품, 친환경, 요양.
- 주황·노랑: 활기·친근함. 카페, 아이 관련, 배달.
- 분홍·보라: 감성·정성. 꽃집, 사진관, 뷰티.
유행하는 색을 좇기보다, 우리 업종이 손님에게 주고 싶은 느낌에서 출발하는 편이 오래간다. 로고에 이미 색이 있다면 그 색을 주색으로 그대로 가져오는 것이 가장 자연스럽다.
4. 대비는 취향이 아니라 규칙이다
연한 회색 배경에 연한 회색 글씨는 '세련돼' 보일지 몰라도, 밝은 야외에서 휴대폰으로 보는 손님에겐 아예 안 읽힌다. 글자와 배경의 명암 대비는 취향이 아니라 지켜야 할 기준이 있다. 본문 글자는 배경과의 대비가 최소 4.5 대 1 이상이어야 한다는 것이 웹 접근성의 권고다. 어렵게 느껴진다면 원칙 하나만 기억하면 된다. 밝은 배경엔 확실히 어두운 글자, 어두운 배경엔 확실히 밝은 글자. 애매한 중간색끼리 겹치지 않게만 해도 대부분 해결된다.
5. 색은 값 하나로 관리한다
가게 대표 색을 바꾸고 싶은 날이 온다. 이때 화면 곳곳에 색 코드를 일일이 박아 뒀다면, 수십 군데를 찾아 고쳐야 하고 꼭 한두 곳을 빠뜨린다. 처음부터 색을 이름 붙인 변수 하나로 정해 두면, 그 값 한 줄만 바꿔도 화면 전체 색이 한 번에 따라 바뀐다.
:root {
--brand: #2563eb; /* 주색 */
--accent: #f97316; /* 강조색: 버튼 */
}이렇게 색을 자산처럼 한 곳에서 관리하면, 계절 이벤트나 리뉴얼 때도 색만 갈아 끼워 화면 전체 분위기를 손쉽게 바꿀 수 있다.
정리하며
색은 세 층으로 나누고, 강조색은 버튼에만 아껴 쓰고, 업종의 온도에 맞추고, 대비 기준을 지키고, 값 하나로 관리한다. 이 다섯 가지만 지켜도 홈페이지는 '색이 많은 화면'이 아니라 '보기 편하고 믿음이 가는 화면'이 된다. CYAN 에이전시는 작은 회사의 홈페이지를 만들 때 로고 색에서 출발해 이런 컬러 체계를 함께 정리해 드린다. 화면이 어수선해 어디를 눌러야 할지 모르겠다는 소리를 들어 봤다면, 색부터 다시 정돈해 볼 때다.
