홈페이지 색은 몇 가지를 고를지보다 어떤 역할에 어떤 색을 쓸지부터 정하는 편이 쉽습니다. 배경·글자·선처럼 화면 대부분을 차지하는 바탕색, 브랜드를 알아보게 하는 대표색, 버튼과 링크처럼 누르는 곳을 알리는 행동 색으로 나누면 됩니다.
역할이 정해지면 색 수는 자연스럽게 정리됩니다. 대표색 하나와 바탕색 몇 가지만으로도 화면을 충분히 구성할 수 있고, 행동 색을 버튼과 링크에만 쓰면 방문자가 어디를 눌러야 하는지 찾기 쉬워집니다.
색은 어떤 역할로 나누나요?
첫째는 바탕색입니다. 배경, 본문 글자, 구분선과 상자 테두리에 쓰는 색으로 화면에서 가장 넓은 면적을 차지합니다. 흰색이나 아주 옅은 회색 배경에 검정에 가까운 짙은 글자를 쓰는 경우가 많고, 이 색들이 차분해야 다른 색이 눈에 들어옵니다.
둘째는 대표색입니다. 로고, 제목 옆 표시, 그림과 아이콘처럼 브랜드를 알아보게 하는 곳에 씁니다. 대표색을 여러 곳에 넓게 칠하기보다 눈이 가야 할 몇 곳에 두는 편이 정돈되어 보입니다.
셋째는 행동 색입니다. 상담 신청 버튼, 링크, 선택된 메뉴처럼 방문자가 누르거나 지금 위치를 알아야 하는 곳에 씁니다. 대표색과 같은 색을 써도 되지만, 같은 색을 장식에도 넓게 쓰면 어디가 눌리는 곳인지 구분하기 어려워집니다.
여기에 필요하면 상태 색을 더합니다. 입력 오류를 알리는 붉은 계열, 완료를 알리는 초록 계열처럼 특정 상황에서만 나타나는 색입니다.
로고 색을 그대로 써도 되나요?
로고 색을 대표색으로 쓰는 것은 자연스러운 출발점입니다. 다만 로고 색이 노랑이나 연두, 연분홍처럼 밝은 색이라면 흰 배경 위의 글자나 버튼 글씨로 쓰기 어렵습니다. 밝은 색 위에 흰 글씨를 얹거나, 흰 배경에 밝은 색 글씨를 쓰면 읽기 힘들어질 수 있기 때문입니다.
이럴 때는 로고 색을 로고와 그림, 넓은 띠 배경처럼 글자가 적은 곳에 두고, 글자와 버튼에는 같은 계열에서 짙기를 조절한 색을 따로 정합니다. 로고 색이 여러 개라면 그중 하나를 대표색으로 정하고 나머지는 보조로 아껴 씁니다. 로고 파일과 색상 코드가 있으면 상담 때 함께 전달해 주시면 좋습니다.
버튼 색은 왜 아껴 써야 하나요?
방문자는 화면을 처음 볼 때 색이 다른 곳에 먼저 눈이 가기 쉽습니다. 상담 신청 버튼과 같은 색이 제목 장식, 배경 띠, 아이콘에도 똑같이 쓰이면 버튼만 따로 눈에 띄기 어렵습니다.
그래서 행동 색을 정했다면 버튼과 링크, 선택된 메뉴처럼 누를 수 있거나 위치를 알려 주는 곳에만 쓰는 원칙을 정해 두는 것이 좋습니다. 버튼을 어디에 몇 개 둘지는 홈페이지 문의 버튼 위치 글에서 따로 정리했습니다.
가상의 꽃집으로 전후를 비교해 보면
이해를 돕기 위한 가상의 상황이며 실제 고객 사례가 아닙니다. 연분홍 로고를 쓰는 작은 꽃집이 홈페이지 시안에서 배경, 제목 글자, 버튼, 아이콘을 모두 연분홍과 진분홍으로 칠했다고 해 보겠습니다. 화면 전체가 분홍빛이라 브랜드 느낌은 강하지만, 연분홍 배경 위의 흰 버튼 글씨가 흐리게 보이고 어디가 눌리는 곳인지 한눈에 들어오지 않습니다.
역할을 나눠 다시 정하면 배경은 흰색, 본문 글자는 짙은 갈색에 가까운 어두운 색, 연분홍은 로고와 꽃 사진 주변 띠에만 둡니다. 예약 문의 버튼과 링크는 연분홍보다 훨씬 짙은 자주색 하나로 통일합니다. 브랜드 색은 그대로 남아 있으면서 글자는 읽기 쉬워지고 누를 곳이 분명해집니다.
색을 확정하기 전에 무엇을 확인하나요?
색 조합이 마음에 들어도 실제 화면에서 확인해야 할 점이 있습니다.
- 본문 글자와 배경의 밝기 차이가 충분합니다.
- 버튼 글씨와 버튼 바탕의 밝기 차이가 충분합니다.
- 행동 색이 버튼과 링크 말고 다른 곳에 넓게 쓰이지 않았습니다.
- 필수 표시나 오류처럼 중요한 정보를 색만으로 알리지 않고 글자도 함께 씁니다.
- 휴대폰 화면에서 밝은 곳과 어두운 곳에서 실제로 열어 봤습니다.
밝기 차이에는 공개된 기준이 있습니다. 웹 접근성 지침 WCAG 2.2의 대비 기준 설명은 일반 글자와 배경의 명암 대비를 최소 4.5:1, 큰 글자는 3:1로 정하고 있습니다. 버튼 테두리나 입력칸처럼 글자가 아닌 요소도 비텍스트 대비 기준에서 주변 색과 3:1 이상을 요구합니다. 색상 코드를 넣으면 대비 값을 계산해 주는 도구로 확인할 수 있고, 글자 대비와 색 구분을 포함한 접근성 점검은 웹 접근성 기본 글에 따로 정리해 두었습니다.
몇 가지 색이 적당한가요?
정해진 개수는 없습니다. 다만 역할마다 색을 하나씩 정하고 시작하면 바탕색 서너 가지에 대표색 하나, 행동 색 하나 정도로도 대부분의 화면을 만들 수 있습니다. 대표색과 행동 색을 같은 색으로 쓰면 더 줄어듭니다.
색을 더하고 싶어질 때는 그 색이 어떤 역할을 맡는지 먼저 적어 봅니다. 맡을 역할이 없다면 지금 있는 색의 짙기를 바꾸는 것으로 충분한 경우가 많습니다. 서비스 종류를 색으로 구분하고 싶을 때도 색만으로 나누기보다 이름표나 아이콘을 함께 두면 헷갈리지 않습니다.
뉴클리어웹은 색을 어떻게 정하나요?
뉴클리어웹의 제작 안내에서 디자인 방향 확인은 구성과 원고를 정리한 다음 단계입니다. 핵심 화면에서 서체, 색상, 이미지와 필요한 모션을 먼저 확인하고, 방향을 맞춘 뒤 나머지 화면으로 넓힙니다. 색을 처음부터 모든 화면에 칠하기보다 대표 화면 하나에서 역할별 색을 맞춰 보는 방식입니다.
홈페이지 제작을 준비하실 때는 로고와 사용 가능한 사진, 기존 소개서 같은 브랜드 자료를 함께 확인합니다. 정해 둔 색이 없어도 괜찮습니다. 로고 파일과 마음에 드는 사이트 한두 곳, 피하고 싶은 느낌을 알려 주시면 그 자료에서 색의 역할을 함께 나눕니다. 무료 상담 신청하기에서 상담 방법을 확인하시거나 전화 010-5611-8632로 이야기를 시작해 주세요.
자주 묻는 질문
업종마다 어울리는 색이 정해져 있나요?
업종에 흔히 쓰이는 색은 있지만 반드시 따라야 하는 기준은 아닙니다. 같은 업종의 다른 곳과 비슷한 색을 쓰면 익숙해 보일 수 있고, 다른 색을 쓰면 구별되기 쉬울 수 있습니다. 어느 쪽이든 글자가 잘 읽히고 누를 곳이 분명한지가 먼저입니다.
어두운 배경으로 만들어도 되나요?
됩니다. 다만 어두운 배경에서는 글자와 배경의 대비를 밝은 배경과 같은 기준으로 다시 확인하고, 사진과 로고가 배경에 묻히지 않는지 봐야 합니다. 글이 긴 페이지라면 본문 구간만 밝은 배경으로 두는 방법도 있습니다.
나중에 색을 바꾸기 어렵나요?
색을 역할별로 정리해 두었다면 같은 역할의 색을 한꺼번에 바꾸기 쉬운 편입니다. 반대로 화면마다 다른 색을 그때그때 썼다면 바꿀 곳이 많아집니다. 제작 뒤 디자인 변경은 별도 협의 대상이므로, 색은 핵심 화면 확인 단계에서 충분히 보고 정하는 편이 좋습니다.
