홈페이지를 처음 만들 때 가장 빠지기 쉬운 함정은 "좋아하는 색을 전부 넣고 싶다"는 마음입니다. 로고는 파랑, 버튼은 빨강, 제목은 초록, 배경은 노랑. 하나하나는 예쁜 색인데 한 화면에 모이면 시선이 어디에 머물러야 할지 알 수 없어집니다. 손님은 화려한 사이트를 보고 감탄하지 않습니다. 오히려 "여기 정돈이 안 됐네"라는 인상을 받고 조용히 창을 닫습니다. 색은 더하는 것이 아니라 덜어내는 일에 가깝습니다.
1. 색은 세 가지면 충분하다 — 60·30·10 규칙
완성도 높은 화면은 대부분 색을 세 가지로 정리합니다. 화면의 60%를 차지하는 바탕색, 30%를 채우는 보조색, 그리고 단 10%에만 쓰는 강조색입니다.
- 바탕색(60%): 흰색이나 아주 옅은 회색처럼 눈이 편한 색. 글과 사진이 올라앉을 무대입니다.
- 보조색(30%): 로고나 브랜드를 떠올리게 하는 대표 색. 헤더, 푸터, 제목에 씁니다.
- 강조색(10%): 손님이 꼭 눌렀으면 하는 단 한 가지 행동에만 쓰는 색.
색을 세 가지로 줄이는 순간, 신기하게도 사이트는 더 비싸 보이고 더 믿음직해 보입니다.
2. 강조색은 하나만, 가장 누르게 하고 싶은 곳에
버튼마다 색이 다르면 손님은 무엇이 중요한지 알 수 없습니다. '문의하기', '견적 받기'처럼 정말 눌러주길 바라는 버튼에만 강조색을 몰아주세요. 나머지 버튼은 회색 테두리처럼 한 걸음 물러난 모습이어야 합니다. 강조색이 화면에서 단 한 곳에만 빛날 때, 손님의 시선과 손가락은 자연스럽게 그곳으로 향합니다. 모두를 강조하면 아무것도 강조되지 않습니다.
3. 글자와 배경의 명도 차이를 확보하라
예쁜 색에 욕심내다 보면 흔히 옅은 회색 바탕에 옅은 회색 글씨를 얹는 실수를 합니다. 디자이너의 큰 모니터에서는 멀쩡해 보여도, 햇빛 아래 휴대폰을 든 어르신 손님에게는 한 글자도 읽히지 않습니다. 글자와 배경은 명도(밝기) 차이를 충분히 둬야 합니다. 웹 접근성 기준(WCAG)은 본문 글자의 명암비를 최소 4.5:1로 권하는데, 무료 대비 검사 도구에 색 코드 두 개를 넣으면 통과 여부를 바로 확인할 수 있습니다. 가독성은 디자인이 아니라 예의의 문제입니다.
4. 업종이 주는 첫인상에 색을 맞춰라
색에는 말보다 먼저 도착하는 인상이 있습니다. 손님은 글을 읽기 전에 색으로 분위기를 먼저 느낍니다.
- 파랑·남색: 신뢰와 안정. 병원, 법률, 금융, IT에 잘 어울립니다.
- 초록: 건강과 자연. 식품, 친환경, 농산물, 웰니스에 어울립니다.
- 주황·노랑: 활기와 친근함. 교육, 외식, 생활 서비스에 어울립니다.
- 검정·금색: 품격과 전문성. 공방, 디자인, 프리미엄 브랜드에 어울립니다.
유행하는 색이 아니라, 우리 업종이 손님에게 줘야 할 첫 느낌에서 출발하세요.
5. 색은 한곳에서 관리하라 — 일관성이 신뢰다
페이지마다 파랑의 톤이 미묘하게 다르면 손님은 이유를 콕 집지 못해도 "뭔가 어수선하다"고 느낍니다. 쓰는 색의 정확한 코드(예: #1A4D8F)를 메모해 두고 모든 페이지에서 똑같이 쓰세요. 요즘은 CSS 변수에 색을 한 번만 등록해 두면 사이트 전체가 같은 색을 공유하고, 나중에 색을 바꿀 때도 한 줄만 고치면 됩니다. 일관된 색은 그 자체로 "이 회사는 꼼꼼하다"는 메시지가 됩니다.
색을 줄이면 메시지가 선명해진다
좋은 색 설계의 핵심은 화려함이 아니라 절제입니다. 세 가지 색으로 정리하고, 강조색은 한 곳에만 쓰고, 글자는 또렷하게, 톤은 끝까지 일관되게. 이 네 가지만 지켜도 사이트는 한층 정돈되고 믿음직해집니다.
CYAN은 작은 회사의 홈페이지를 만들 때 업종에 맞는 색 한 벌을 먼저 정하고, 그 색을 모든 페이지에서 흔들림 없이 쓰도록 설계합니다. 지금 우리 사이트가 색이 너무 많아 정신없게 느껴진다면, 더하기 전에 덜어내는 일부터 시작해 보세요. 그 한 걸음이 손님이 머무는 시간을 바꿉니다.