업종별로 검증된 홈페이지 색상 조합
파란 로고·초록 버튼·주황 배너·보라 푸터가 한 화면에 모인 홈페이지.
색이 많을수록 눈에 띄는 것이 아니라, 아무것도 눈에 띄지 않게 됩니다.
이 글은 주색·보조색·강조색의 60·30·10 비율 규칙과 업종별 검증된 조합을 제시합니다.
⚡ 3줄 요약
- 색은 3가지만 정합니다. 화면의 60%를 차지하는 주색, 30%의 보조색, 10%의 강조색입니다.
- 강조색은 버튼·링크 등 행동 요소에만 씁니다. 여기저기 쓰는 순간 10% 규칙이 무너지고 버튼이 묻힙니다.
- 글자와 배경의 명도 대비는 4.5 대 1 이상이 웹 접근성 기준입니다. 회색 글자 남용이 흔한 위반입니다.
홈페이지 색상은 어떻게 정하나요?
색은 3가지만 정합니다. 화면의 60%를 차지하는 주색(대개 흰색·밝은 회색 배경), 30%의 보조색(브랜드 색), 10%의 강조색(버튼·링크)입니다. 이 60·30·10 비율만 지켜도 화면에 통일감이 생기고, 문의 버튼이 자연스럽게 눈에 들어옵니다.
비율이 규칙인 이유는 시선 통제 때문입니다. 방문자의 시선은 색이 튀는 곳으로 이동하는데, 튀는 색이 화면의 10%뿐이면 시선이 버튼으로 모이고, 40%면 어디로도 모이지 않습니다. 색을 잘 고르는 일보다 색의 수를 3가지로 제한하는 일이 먼저입니다. 로고 색을 보조색으로 삼으면 별도 고민 없이 출발점이 만들어집니다.
업종별 조합 예시는 무엇인가요?
표의 조합이 검증됐다고 말하는 근거는 반복 사용입니다. 같은 업종 상위 노출 사이트 10곳을 열어 보면 배색이 비슷하게 수렴하는데, 방문자가 업종에 기대하는 색이 있기 때문입니다. 병원이 검정 바탕에 빨간 글자를 쓰면 정보가 같아도 신뢰가 깎입니다. 차별화는 색이 아니라 사진과 문장에서 만드는 것이 안전한 순서입니다.
| 업종 | 조합 | 의도 |
|---|---|---|
| 병원·클리닉 | 흰색 · 블루 계열 · 청록 | 신뢰·청결의 인상 |
| 카페·베이커리 | 크림 · 브라운 · 오렌지 | 따뜻함·식욕 자극 |
| 법률·세무 | 흰색 · 네이비 · 골드 | 권위·격식 |
| 뷰티·에스테틱 | 화이트 · 블러시 핑크 · 딥로즈 | 부드러움·전문성 |
| 제조·기술 | 라이트 그레이 · 스틸 블루 · 옐로 | 정밀함·안정감 |
강조색은 어디에만 쓰나요?
강조색의 자리는 행동 요소 3가지, 즉 문의·예약 버튼, 링크, 진행 상태 표시입니다. 제목·아이콘·배경 장식에까지 강조색을 쓰면 버튼의 시각적 특권이 사라집니다. 화면 하나에 강조색 요소가 3개를 넘으면 줄이는 것을 검토할 때입니다. 문의 버튼 1개가 화면에서 가장 튀는 색이 되도록 아껴 쓰는 것이 이 규칙의 목적입니다.
명도 대비도 강조색 선택의 조건입니다. 웹 접근성 지침(WCAG)은 본문 글자와 배경의 대비를 4.5 대 1 이상으로 권고합니다. 흰 바탕에 연한 노랑·연한 하늘색 글자는 대비 미달로 읽히지 않으므로, 강조색이 밝다면 글자가 아니라 배경으로 쓰고 글자는 흰색 또는 진회색으로 얹습니다.
배색은 어떤 순서로 정하나요?
마지막 6번이 실무에서 가장 자주 생략됩니다. 색상 코드(#으로 시작하는 6자리)를 기록해 두지 않으면 페이지마다 비슷하지만 다른 파랑이 쌓여 통일감이 무너집니다. 주색·보조색·강조색 3개의 코드를 적은 문서 한 장이면, 나중에 배너나 상세페이지를 외주에 맡길 때도 같은 기준으로 작업물을 받을 수 있습니다.
- 로고 색 또는 브랜드를 대표할 색 1가지를 보조색으로 정합니다.
- 주색은 흰색·밝은 회색 계열에서 1가지를 정합니다.
- 보조색과 어울리는 강조색 1가지를 정합니다(버튼 전용).
- 같은 업종 상위 사이트 10곳의 배색과 비교해 위화감을 점검합니다.
- 글자·배경 대비 4.5 대 1 이상을 확인합니다.
- 색상 코드 3개를 문서로 기록해 모든 페이지에 동일 적용합니다.
그래서 지금 무엇부터 하면 되나요?
- 내 홈페이지 첫 화면을 캡처해 사용된 색이 몇 가지인지 세어 봅니다.
- 같은 업종 상위 노출 사이트 10곳의 배색을 확인하고 내 조합과 비교합니다.
- 배너·상세페이지 외주 시 주색·보조색·강조색 코드 3개를 작업 지침으로 전달합니다.
자주 묻는 질문
브랜드 색이 이미 있으면 어떻게 하나요?
검정 배경은 피해야 하나요?
색상 코드는 무엇을 말하나요?
NOAH가 이 문제를 없애는 방식
NOAH는 검증된 템플릿 구조를 사장님 브랜드에 맞춰 7일 안에 오픈하는 홈페이지 제작 서비스입니다. 템플릿마다 60·30·10 비율이 적용된 배색이 잡혀 있어, 사장님은 브랜드 색 1가지만 정하시면 나머지 조합을 맞춰 드립니다. 시안 2개를 서로 다른 배색으로 받아 비교하실 수 있고 수정 5회가 포함됩니다. 기본 ₩199,000이며 부가세는 별도, 도메인은 연 ₩15,000~ 별도입니다. 업종별 배색이 실제 화면에서 어떻게 보이는지는 레퍼런스에서 먼저 확인해 보셔도 됩니다.
레퍼런스 보기 →관련 글
상업적으로 안전한 한글 웹폰트와 크기 기준상업적 이용이 가능한 무료 이미지 사이트와 확인법기획서 없이 시작한 홈페이지가 3번 갈아엎히는 이유상담부터 오픈까지 홈페이지가 만들어지는 전체 순서참고 자료 — W3C 웹 접근성(WAI) · NN/g 사용성 아티클