웹사이트 색 조합 고르는 법: 배경·텍스트·버튼부터 정하세요

웹사이트 색 조합을 고를 때 색상표에서 어울리는 세 칸만 찾으면 일이 끝난 것처럼 보인다. 그러나 같은 조합도 배경, 본문, 버튼 중 어디에 놓느냐에 따라 전혀 다른 화면이 된다. 넓은 배경에 적합한 색이 작은 버튼에서는 흐릴 수 있고, 로고에서 선명한 색이 긴 문장을 읽을 때는 피로를 줄 수 있다. 따라서 색 이름보다 먼저 화면에서 맡을 역할을 정해야 한다.

이 가이드는 비전문가가 첫 화면 하나를 만들 수 있는 순서로 설명한다. 기준은 단순하다. 가장 넓은 면을 편안하게 만들고, 글을 분명하게 읽게 하며, 중요한 행동을 빠르게 찾게 해야 한다. 세 조건을 통과한 뒤에 브랜드 분위기를 조정하면 예쁘지만 쓸 수 없는 조합을 피할 수 있다.

1. 실제 콘텐츠부터 준비하기

빈 사각형에 색을 채우기 전에 사이트에서 가장 자주 보일 콘텐츠를 모은다. 서비스 이름, 한 줄 소개, 기본 버튼 문구, 카드 제목, 가격이나 날짜처럼 짧은 정보가 필요하다. 상품을 판매한다면 실제 상품 사진 두 장도 준비한다. 임시 문구만 넣은 시안은 글자 길이와 사진 색이 달라질 때 쉽게 무너진다.

첫 검토 화면은 홈페이지 전체가 아니라 헤더, 소개 문장, 기본 버튼, 카드 두 개 정도면 충분하다. 모바일 폭과 데스크톱 폭을 나란히 만든다. 모바일에서는 카드가 세로로 쌓여 보조색 면적이 갑자기 커질 수 있다. 이 작은 시안이 색 조합의 시험대가 된다.

2. 배경색은 가장 오래 보는 색이다

주조색은 브랜드를 대표하는 가장 강한 색일 필요가 없다. 웹사이트에서는 사용자가 가장 오래 보는 배경과 큰 카드 면을 안정시키는 색이 주조색인 경우가 많다. 순백색뿐 아니라 따뜻한 크림, 옅은 회색, 아주 밝은 청색도 선택지가 된다. 사진이 따뜻한 갈색이라면 차가운 회색보다 크림 계열이 자연스럽고, 데이터가 많은 도구라면 낮은 채도의 중성색이 정보 구분을 돕는다.

소프트 스톤 팔레트는 종이 같은 백색, 조약돌 회색, 차콜을 사용한다. 문서 도구나 지식 서비스처럼 오래 읽는 화면에서 출발점으로 쓰기 좋다. 단, 중간 회색을 본문 글자로 쓰면 흐려질 수 있으므로 차콜을 텍스트에 사용하고 회색은 카드 배경이나 구분선에 제한한다.

어두운 사이트라면 검정을 그대로 쓰기보다 아주 짙은 청색이나 차콜을 검토한다. 완전한 검정과 완전한 흰색의 대비가 부담스러울 때 한 단계 부드럽게 조정할 수 있다. 그러나 어두운 배경이라고 모든 글자를 회색으로 낮추면 정보 위계가 사라진다. 제목과 본문, 보조 설명의 밝기를 구분하고 실제 모니터와 휴대전화에서 확인한다.

3. 본문색은 브랜드색보다 먼저 검증한다

본문은 장식이 아니라 기능이다. 작은 크기의 일반 텍스트는 배경과 충분한 대비를 확보해야 한다. 밝은 배경에는 짙은 회색, 네이비, 짙은 갈색처럼 안정된 색을 먼저 놓고 브랜드색은 제목이나 링크에 제한해 본다. 본문 전체를 대표색으로 칠하면 첫인상은 강하지만 긴 글에서 피로가 커질 수 있다.

색 대비 도구로 수치를 확인한 뒤 실제 문단을 소리 없이 읽어 본다. 숫자를 통과해도 글자 굵기가 너무 얇거나 화면 밝기가 낮으면 읽기 어려울 수 있다. 링크는 색뿐 아니라 밑줄 같은 단서를 함께 제공하고, 오류와 성공 상태는 아이콘과 문구를 더한다. 색을 구분하기 어려운 사용자도 행동의 의미를 알 수 있어야 한다.

4. 버튼색은 한 가지 행동을 가리킨다

강조색은 화면에서 가장 중요한 행동을 찾게 하는 색이다. 회원 가입, 견적 요청, 예약처럼 한 화면의 기본 행동 하나에 먼저 적용한다. 같은 강조색을 태그, 장식 아이콘, 제목 밑줄까지 반복하면 버튼이 특별해 보이지 않는다. 사용자가 어디를 눌러야 할지 망설인다면 색이 부족한 것이 아니라 강조가 너무 많은 경우가 흔하다.

버튼에는 기본, 마우스 오버, 키보드 포커스, 눌림, 비활성 상태가 필요하다. 기본색만 아름답게 고르고 나머지를 투명도로 처리하면 비활성 버튼의 글자가 보이지 않거나 포커스가 사라질 수 있다. 강조색의 더 어두운 변형과 더 밝은 변형을 미리 정하고, 버튼 문구의 텍스트 색도 각각 검증한다.

테라코타 크림 팔레트에서는 크림을 배경, 테라코타를 보조 면, 적갈색을 행동과 제목에 배치할 수 있다. 따뜻한 사진과 잘 어울리지만 적갈색 버튼이 오류 메시지와 비슷하게 느껴질 수 있다. 삭제 행동은 별도 아이콘과 명확한 문구로 구별해야 한다.

5. 60·30·10은 출발점으로만 사용하기

60·30·10은 화면 면적을 생각하게 하는 편리한 설명법이다. 배경과 큰 여백이 약 60, 카드나 섹션이 약 30, 행동과 초점이 약 10을 맡는다고 보면 된다. 그러나 브라우저 폭, 글의 길이, 이미지 수에 따라 실제 면적은 계속 달라진다. 숫자를 픽셀 단위로 맞추기보다 넓은 색, 구조를 나누는 색, 시선을 모으는 색의 순서를 유지하는 것이 중요하다.

콘텐츠 중심 화면은 80·15·5처럼 강조를 더 줄일 수 있다. 캠페인 첫 화면은 60·30·10보다 보조색 면적이 커질 수 있다. 어두운 대시보드는 바탕이 넓더라도 작은 상태색이 매우 선명해 체감 비중이 커진다. 비율은 정답표가 아니라 색이 서로 경쟁하는지 확인하는 질문으로 사용한다. 자세한 차이는 60·30·10 배색 법칙 가이드에서 비교할 수 있다.

6. 밝은 조합과 어두운 조합을 같은 방식으로 보지 않기

밝은 조합은 여백이 넓어 보이고 사진과 긴 글을 받아들이기 쉽다. 대신 카드와 배경의 차이가 너무 작으면 경계가 사라진다. 테두리, 그림자, 미세한 명도 차이 중 하나를 일관되게 선택한다. 모든 카드를 서로 다른 옅은 색으로 칠하면 화면이 부드럽기보다 분류되지 않은 것처럼 보일 수 있다.

어두운 조합은 색이 더 밝고 선명하게 느껴진다. 네온 시안 팔레트처럼 청흑색 바탕에 시안을 두면 작은 선과 상태 표시만으로도 초점이 생긴다. 시안을 긴 본문이나 넓은 카드에 반복하면 눈의 피로가 커지므로 제목, 핵심 수치, 선택 상태처럼 짧은 요소에 제한한다.

7. 상태색은 브랜드 팔레트와 따로 점검하기

웹사이트에는 성공, 경고, 오류, 정보 상태가 존재한다. 브랜드 강조색이 빨강이라면 오류색과 충돌하고, 초록이라면 성공 상태와 기본 버튼이 구별되지 않을 수 있다. 이때 브랜드색을 버리는 대신 모양과 문구를 다르게 설계한다. 오류에는 경고 아이콘과 원인을, 기본 버튼에는 행동 동사를 넣으면 의미를 분리할 수 있다.

상태색을 모두 브랜드색의 변형으로 만들 필요도 없다. 사용자가 이미 아는 관습을 활용하되 전체 화면의 채도와 어울리도록 조정한다. 상태 배경, 테두리, 아이콘, 텍스트 네 요소를 한꺼번에 강하게 칠하지 말고 필요한 신호만 남긴다. 색만 보고 판단하지 않도록 문장으로 결과를 설명한다.

8. 마지막에는 흑백과 실제 기기에서 검사하기

시안을 흑백으로 바꾸면 명도 위계가 남아 있는지 빠르게 볼 수 있다. 제목, 본문, 버튼이 모두 비슷한 회색으로 보인다면 색상 차이에만 의존한 것이다. 버튼을 더 어둡게 하거나 여백과 크기를 조정해 구조를 회복한다. 그 뒤 색을 다시 켜고 채도가 과한 부분을 찾는다.

휴대전화의 밝기를 절반으로 낮추고 창가에서도 확인한다. 작은 화면에서는 긴 버튼 문구가 두 줄이 되고 카드 배경 면적이 달라진다. 키보드만 사용해 링크와 버튼을 이동하고 포커스 표시가 보이는지 확인한다. 마지막으로 팔레트 실험실에서 기준색과 배색 공식을 비교한 뒤, 선택한 HEX를 실제 시안에 적용한다. 화면에서 역할을 통과한 조합이 비로소 쓸 수 있는 웹사이트 색 조합이다.