브랜드 컬러는 이렇게 씁니다 — 컬러 시스템·다크모드

색을 정할 때 우리는 무엇부터 보나요?

저희가 컬러 작업을 시작할 때 가장 먼저 묻는 건 "무슨 색이 예쁜가"가 아니라 "이 회사가 어떤 인상을 줘야 하는가"입니다. 신뢰가 중요한 금융·의료라면 차분한 색, 활기가 중요한 교육·리테일이라면 채도 높은 색이 출발점이 됩니다. 그다음 메인 색 하나를 정하고, 그 색을 중심으로 보조와 액센트를 가지치기합니다. 처음부터 색을 여러 개 늘어놓고 고르지 않습니다 — 한 색의 역할이 분명해야 나머지가 따라오기 때문입니다. 디자인 파트가 화면을 만드는 전체 순서는 UI는 이렇게 만듭니다에서 정리했습니다.

메인·보조·액센트는 어떻게 나누나요?

저희는 색을 세 역할로 나눠 씁니다. 메인은 브랜드를 대표하는 색으로, 헤더·로고·주요 버튼처럼 가장 넓게 깔립니다. 보조는 메인을 받쳐 섹션을 구분하거나 배경을 채우는, 메인보다 한 발 물러선 색입니다. 액센트는 가장 적게 쓰되 가장 강한 색으로, "여기를 누르세요"를 가리키는 강조 역할만 맡습니다. 흔한 실수가 강조색을 여기저기 흩뿌리는 것인데, 그러면 모든 게 강조라서 결국 아무것도 강조되지 않습니다. 액센트를 아껴야 클릭할 곳이 또렷해집니다.

여기에 글자·배경·테두리에 쓰는 중립색(회색 계열 여러 단계)과, 성공·경고·오류를 알리는 상태색을 더합니다. 이렇게 다섯 묶음이면 거의 모든 화면을 일관되게 칠할 수 있습니다.

디자인 파트 한마디 — 이게 Findable 사이트가 실제로 쓰는 역할별 토큰입니다. 색 이름이 아니라 ‘하는 일’로 묶여 있죠.

액센트(민트)는 화면에서 가장 적게, 문의·진단 버튼 한곳에만 씁니다. 넓은 면은 배경·카드·본문 토큰이 채웁니다.

글자가 안 읽히는 색은 왜 안 되나요?

아무리 멋진 색 조합도 글자가 안 읽히면 실패입니다. 그래서 저희는 색을 고를 때 명도 대비를 반드시 계산합니다. 기준은 WCAG AA입니다. 본문 글자와 배경의 대비는 4.5:1 이상, 큰 글자(약 24px 이상, 또는 굵은 18.66px 이상)는 3:1 이상, 버튼·아이콘 같은 UI 요소의 경계도 3:1 이상을 지킵니다. 연한 회색 글씨가 세련돼 보여도 이 선을 넘으면 저시력 사용자나 햇빛 아래 화면에서는 글자가 사라집니다.

제가 색을 토큰에 넣기 전에 통과시켜야 하는 최소 대비 선들입니다 — 외울 만큼 자주 봅니다.

위 ‘명도 대비 검사기’에 우리 토큰을 넣어보면, 본문(#eef2f3)을 배경(#0a0c10)에 올렸을 때 이 선을 넉넉히 넘깁니다.

대비는 감으로 맞추지 않고 수치로 확인합니다. 디자인 단계에서 대비비를 측정해 통과한 색만 토큰에 넣고, 통과하지 못하면 명도를 조정합니다. 접근성은 색 작업이 끝난 뒤 점검하는 항목이 아니라, 색을 고르는 그 순간의 조건입니다. 글자가 잘 읽히게 만드는 또 다른 축인 글꼴·행간 운용은 웹 타이포그래피는 이렇게 잡습니다에서 다룹니다.

같은 색이 페이지마다 다른 일은 왜 생기나요?

색을 화면마다 손으로 입력하면, 같은 파란색이 어느 페이지는 #2D6CDF, 어느 페이지는 #2E6EE0처럼 미묘하게 달라집니다. 사람 눈에는 '뭔가 안 맞는' 느낌만 남습니다. 그래서 저희는 모든 색을 토큰(변수)으로 한 곳에 정의합니다. '메인색' '본문 글자색' '버튼 배경색'처럼 역할 이름을 붙여 두고, 화면에서는 그 이름만 불러 씁니다.

토큰으로 묶으면 두 가지가 좋아집니다. 첫째, 사이트 어디서나 같은 색이 보장됩니다. 둘째, 나중에 브랜드 색을 바꿀 때 토큰 한 곳만 고치면 전체가 따라옵니다. 다크모드도 바로 이 토큰 구조 위에서 만들어집니다. 색 토큰을 포함한 브랜드 시스템 전반은 브랜딩·콘텐츠에서 함께 설계합니다.

다크모드는 언제, 어떻게 만드나요?

다크모드는 모든 사이트의 필수는 아닙니다. 저희가 권하는 경우는 야간 사용이 많은 서비스, IT·미디어처럼 사용자가 다크모드를 당연하게 기대하는 분야, 또는 운영체제 설정을 그대로 따라가고 싶을 때입니다. 만들기로 했다면, 가장 피해야 할 함정은 라이트모드 색을 그냥 반전시키는 것입니다. 흰 배경을 검정으로, 검정 글자를 흰색으로 뒤집으면 대비가 너무 강해 눈이 피로하고, 그림자·강조색이 깨집니다.

저희 방식은 토큰별로 별도의 다크 팔레트를 정의하는 것입니다. 배경은 완전한 검정 대신 짙은 회색을 쓰고, 글자는 순백 대신 약간 누른 흰색을 써 눈부심을 줄입니다. 액센트색은 어두운 배경에서 충분히 밝아지도록 명도를 다시 올립니다. 그리고 라이트·다크 양쪽 모두에서 명도 대비 기준을 한 번 더 검증합니다. 다크모드는 '라이트의 반대'가 아니라, 같은 브랜드를 어두운 환경에 맞춰 다시 조율한 두 번째 화면입니다.

색이 신뢰와 전환에 정말 영향을 주나요?

색 하나가 매출을 바꾸지는 않습니다. 하지만 저희가 현장에서 확인하는 건, 일관된 색 운용이 '정돈된 회사'라는 인상을 만든다는 점입니다. 페이지마다 색이 들쭉날쭉하면 사용자는 무의식적으로 '대충 만든 곳'으로 느끼고, 그 인상은 곧 신뢰의 문제가 됩니다. 반대로 색이 차분하게 통일돼 있으면 내용도 믿음직하게 읽힙니다.

전환 쪽에서는 액센트색의 절제가 핵심입니다. 강조색을 문의·구매 같은 핵심 행동 한두 곳에만 집중시키면, 사용자의 시선이 자연스럽게 그곳으로 모입니다. 색은 장식이 아니라 '어디를 보고 무엇을 누를지' 알려 주는 신호입니다. 저희가 색을 역할로 나누고 토큰으로 묶고 대비를 지키는 모든 이유가, 결국 사용자가 헤매지 않게 하는 데 있습니다.

그래서 우리는 컬러를 이렇게 마무리합니다

정리하면 순서는 이렇습니다. ① 회사가 줄 인상을 정해 메인 색을 고르고, ② 보조·액센트·중립·상태색까지 역할별로 가지를 치고, ③ 모든 색을 토큰으로 묶고, ④ 라이트·다크 양쪽에서 명도 대비를 검증합니다. 이 네 단계를 거치면 색은 더 이상 취향 다툼이 아니라, 누가 봐도 같은 규칙으로 작동하는 시스템이 됩니다. Findable 디자인 파트가 일하는 전체 방식은 우리는 이렇게 합니다에서, 새 사이트나 리디자인 상담은 무료 진단에서 시작하시면 됩니다.