색은 글자보다 먼저 도착한다
손님이 우리 홈페이지를 열면, 문장을 읽기도 전에 화면 전체의 색부터 눈에 들어온다. 차분한 남색 바탕에 정갈한 회색 글씨면 '믿을 만한 곳' 같고, 형광 노랑·빨강·파랑이 뒤섞여 있으면 내용과 상관없이 '싸구려' 같다는 인상이 3초 만에 굳어 버린다. 색은 취향의 문제가 아니라 신뢰의 문제다. 작은 회사일수록 로고 하나, 버튼 하나의 색이 곧 브랜드의 첫인상을 대신한다. 오래 웹사이트를 만들며 확인한, 색을 고를 때 지켜야 할 다섯 가지 원칙을 정리했다.
1. 색은 취향이 아니라 업종의 기대에서 출발한다
손님은 업종마다 무의식적으로 기대하는 색이 있다. 병원·약국·법률사무소는 청결과 신뢰를 떠올리게 하는 파랑·청록 계열에서 안심하고, 음식점·베이커리는 식욕을 부르는 따뜻한 주황·빨강·갈색에서 반응한다. 아이 관련 업종은 밝은 파스텔, 프리미엄 서비스는 짙은 남색·검정에 금색 한 점을 얹는다. 내가 좋아하는 색이 아니라 손님이 이 업종에 기대하는 색에서 주색(main color) 하나를 먼저 정하는 것이 순서다.
2. 색은 딱 세 개면 충분하다
초보가 가장 많이 하는 실수는 색을 많이 쓰는 것이다. 색이 늘어날수록 화면은 어수선해지고, 어수선한 화면은 저렴해 보인다. 검증된 비율은 60:30:10이다.
- 주색 60% — 배경과 큰 면적을 차지하는 기본 톤
- 보조색 30% — 영역을 구분하고 강약을 만드는 색
- 강조색 10% — 시선을 끌어야 하는 딱 한 곳에만 쓰는 색
세 가지 안에서 명도만 조금씩 달리해도 충분히 풍부한 화면이 나온다. 색을 더하고 싶을 때는 새 색을 꺼내지 말고, 쓰던 색의 밝기를 조절하는 편이 훨씬 정돈돼 보인다.
3. 강조색은 '누르는 곳'에만 쓴다
강조색은 손님의 눈길을 한곳으로 모으는 신호등이다. '상담 신청', '전화하기', '구매하기'처럼 손님이 눌러야 하는 버튼에만 강조색을 쓰면, 그 색이 보일 때마다 손님은 '여기를 누르면 되는구나'를 학습한다. 반대로 제목·아이콘·테두리에까지 강조색을 뿌리면 정작 버튼이 묻혀 버려서, 손님은 어디를 눌러야 할지 몰라 화면만 훑다 나간다. 강조색은 아낄수록 강해진다.
4. 순백·순검을 피하고 대비를 확보한다
배경을 완전한 흰색(#FFFFFF)으로, 글씨를 완전한 검정(#000000)으로 두면 대비가 너무 세서 눈이 금방 피로해진다. 배경은 아주 옅은 회색이나 미색으로, 본문 글씨는 짙은 회색으로 살짝 낮춰 주면 오래 읽어도 눈이 편하다. 다만 대비가 지나치게 약해도 안 된다. 옅은 회색 바탕에 옅은 회색 글씨는 나이 든 손님이나 밝은 야외에서 아예 읽히지 않는다. 본문과 배경의 명도 대비는 최소 4.5 대 1을 확보해야 누구에게나 읽힌다.
5. 화면 밖에서도 같은 색이어야 한다
홈페이지의 파랑과 명함의 파랑, 간판의 파랑, 인스타그램 프로필의 파랑이 조금씩 다르면 손님은 '같은 가게가 맞나'를 무의식적으로 의심한다. 브랜드 색은 느낌으로 기억하지 말고 정확한 색 값(HEX 코드)으로 고정해, 명함·간판·SNS·포장까지 같은 값을 쓰는 것이 핵심이다. 색 두세 개의 HEX 값을 적어 둔 브랜드 색 규칙 한 장이 있으면, 누가 어떤 도구로 무엇을 만들든 색이 흔들리지 않는다. 그 일관성이 쌓여 '어디서 봐도 알아보는 브랜드'가 된다.
색은 가장 싸게 신뢰를 사는 방법이다
색을 바꾸는 데는 돈이 들지 않는다. 그런데도 색 세 개를 제대로 고르고 규칙대로 쓰는 것만으로, 같은 내용의 홈페이지가 훨씬 믿음직해 보인다. 업종에 맞는 주색을 정하고, 색은 셋으로 줄이고, 강조색은 버튼에만, 대비는 넉넉히, 그리고 화면 밖까지 같은 값으로. 이 다섯 가지만 지켜도 '왠지 싸 보인다'는 말은 사라진다. CYAN은 작은 회사의 홈페이지를 만들 때 색부터 이렇게 규칙으로 잡아, 오래 봐도 질리지 않고 어디서 봐도 알아보는 브랜드를 함께 설계한다.
