홈페이지를 만들 때 색은 대개 맨 마지막에, 그것도 '내가 좋아하는 색'으로 정해집니다. 그렇게 파랑도 넣고 초록도 넣고 주황 버튼까지 얹으면, 화면은 알록달록해지지만 정작 손님의 눈은 쉴 곳을 잃습니다. 색이 많다는 건 강조가 없다는 뜻이고, 강조가 없으면 손님은 어디를 눌러야 할지 모른 채 떠납니다. 색은 취향의 문제가 아니라 시선을 설계하는 도구입니다. 작은 회사가 브랜드 컬러를 정할 때 지켜야 할 다섯 가지를 정리했습니다.
1. 색은 세 가지 역할로 나눠 쓴다
좋은 배색의 출발점은 색을 '몇 개 쓰느냐'가 아니라 '어떤 역할을 맡기느냐'입니다. 흔히 쓰는 60·30·10 규칙이 여기서 나옵니다.
- 주색(60%): 배경과 큰 면적을 채우는 바탕색. 대개 흰색이나 아주 옅은 회색처럼 조용한 색이 맡습니다.
- 보조색(30%): 로고·제목·헤더 등 브랜드를 드러내는 색. 회사를 기억하게 하는 색입니다.
- 강조색(10%): 버튼·링크·중요한 표시에만 쓰는 색. 손님의 손끝을 유도하는 색입니다.
색을 세 역할로 나누는 순간, 화면에는 자연스러운 위계가 생깁니다.
2. 강조색은 아낄수록 힘이 세진다
많은 홈페이지가 실패하는 지점이 바로 여기입니다. '문의하기' 버튼도 빨강, 옆의 배너도 빨강, 하단 아이콘도 빨강이면 정작 눌러야 할 버튼이 배경 속에 묻힙니다. 강조색은 화면에서 가장 드물게 등장할 때 가장 강하게 보입니다. 손님이 꼭 눌렀으면 하는 단 하나의 행동(전화, 예약, 문의)에만 강조색을 남겨 두세요. 나머지 요소가 조용할수록 그 하나가 또렷해집니다.
3. 대비를 지켜야 누구나 읽는다
연한 회색 배경에 흰 글씨, 노란 바탕에 흰 버튼. 디자이너의 화면에선 멀쩡해 보여도 밝은 야외나 오래된 모니터에서는 글자가 사라집니다. 색을 고를 때는 예뻐 보이는지뿐 아니라 글자와 배경의 명암 대비를 함께 봐야 합니다. 웹 접근성 기준(WCAG)은 본문 글자에 배경 대비 4.5 대 1 이상을 권합니다. 무료 대비 검사 도구에 두 색을 넣어 보면 통과 여부가 바로 나옵니다. 대비를 지키는 건 저시력 손님을 위한 배려이자, 모든 손님이 편히 읽게 하는 기본입니다.
4. 색에는 업종의 인상이 담긴다
색은 말보다 먼저 감정을 전합니다. 손님은 첫 화면의 색만으로 '이 가게가 어떤 곳인지'를 반쯤 판단합니다.
- 파랑·청록: 신뢰·전문성 — 병원, 법무, IT, 금융에서 즐겨 씁니다.
- 초록: 건강·자연·안심 — 식품, 친환경, 요양 분야에 어울립니다.
- 따뜻한 주황·빨강: 활력·식욕·즉시성 — 음식점, 세일, 행동 유도에 강합니다.
- 검정·금색: 고급·절제 — 공방, 주얼리, 프리미엄 브랜드에 맞습니다.
물론 규칙보다 중요한 건 '우리 손님이 우리에게 기대하는 인상'입니다. 색을 고르기 전에 그 인상부터 한 문장으로 적어 보세요.
5. 색은 코드 한곳에서 관리한다
브랜드 색을 정했다면 그 값을 화면 곳곳에 직접 적어 넣지 말고 한곳에 모아 두는 것이 중요합니다. CSS 변수(디자인 토큰)에 --brand, --accent 같은 이름으로 색을 등록해 두면, 나중에 브랜드 색을 바꿀 때 값 하나만 고쳐도 사이트 전체가 한 번에 바뀝니다. 색을 페이지마다 손으로 박아 두면 리뉴얼 때마다 수십 곳을 뒤져 고쳐야 하고, 그 과정에서 빠뜨린 한 곳이 어색한 색으로 남습니다. 색을 자산처럼 한곳에서 다루는 습관이 유지보수 비용을 줄입니다.
정리하며
색을 잘 쓴다는 건 화려하게 쓴다는 뜻이 아니라 절제해서 쓴다는 뜻입니다. 주색으로 여백을 만들고, 보조색으로 브랜드를 기억시키고, 강조색으로 딱 한 곳만 가리키면, 손님의 시선은 저절로 정돈됩니다. 브랜드 컬러 하나가 홈페이지 전체의 인상과 전환율을 좌우합니다.
CYAN 에이전시는 작은 회사의 업종과 손님을 먼저 이해한 뒤, 역할이 명확한 컬러 시스템과 접근성 대비까지 함께 설계해 드립니다. 색이 정리되지 않아 답답한 홈페이지가 있다면 편하게 문의해 주세요.
