팔레트 만들기

팔레트는 역할의 목록이다

화가의 팔레트는 물감을 짜 놓은 판이다. 물감 열두 개를 짜 두었다고 열두 색만 쓰는 것은 아니다. 섞고, 물을 타고, 덧칠해 수백 가지 색을 만든다. 디자인의 팔레트는 반대 방향으로 움직인다. 색은 얼마든지 만들 수 있으니, 쓸 수 있는 색을 일부러 줄이고 각각에 일을 맡긴다. 버튼은 이 색, 본문 글자는 이 색, 경고는 이 색. 그래야 화면 백 장을 여러 사람이 만들어도 한 가게의 화면처럼 보인다.

그래서 디자인 팔레트는 보통 세 층으로 짓는다. 맨 아래는 실제 색 값을 단계별로 늘어놓은 톤 스케일(Tonal scale), 곧 한 색상을 밝은 쪽에서 어두운 쪽까지 열 단계쯤으로 나눈 사다리다. 그 위에 "버튼 바탕", "본문 글자", "테두리"처럼 쓰임의 이름을 붙인 의미 토큰(Semantic token)이 있다. 토큰은 색 값을 직접 갖지 않고 사다리의 한 칸을 가리키는 이름이다. 맨 위에는 그 토큰으로 칠한 버튼, 카드, 알림 같은 부품이 있다.

층을 나누는 이유는 바뀌는 것과 바뀌지 않는 것을 떼어 놓기 위해서다. 브랜드 초록이 조금 바뀌어도 "버튼 바탕은 브랜드의 가장 진한 쓸 만한 칸"이라는 규칙은 그대로다. 어두운 화면에서는 같은 "링크"라는 역할이 사다리의 더 밝은 칸을 가리켜야 한다. 이 장의 시뮬레이터는 이 세 층을 아래에서부터 하나씩 쌓아 올린다.

한 색에서 열 단계로

톤 스케일을 만드는 가장 손쉬운 방법은 색 고르기 도구에서 HSL의 명도(L)만 10%씩 바꾸는 것이다. 1장과 3장에서 본 대로, HSL의 명도는 사람이 느끼는 밝기가 아니다. 그래서 그렇게 만든 사다리는 어떤 칸 사이는 성큼 뛰고 어떤 칸 사이는 거의 붙는다. 색상에 따라서도 다르다. 노랑으로 같은 일을 하면 밝은 쪽 다섯 칸이 거의 구별되지 않는다.

지각 균일 공간 OKLCH에서 명도를 고르게 나누면 칸 사이의 밝기 차이가 눈에 고르게 느껴진다. 다만 한 가지 제약이 있다. 아주 밝거나 아주 어두운 쪽에서는 화면이 낼 수 있는 채도가 줄어든다. 그래서 OKLCH 사다리는 명도를 고르게 나누되, 채도는 그 명도에서 낼 수 있는 만큼으로 줄인다. 아래 시뮬레이터에서 두 방식을 바꿔 가며 아래 그래프의 명도(L*) 계단이 얼마나 고른지 본다.

OKLCH 사다리의 점들은 거의 곧은 대각선 위에 놓인다. 명도 차가 고르다는 뜻이다. 그래프 위 칸에 붙은 표시는 그 칸의 색을 흰 바탕 위 글자로 썼을 때 대비가 4.5:1을 넘는지를 알려 준다. 대비는 두 색의 상대 휘도로 계산한다(13장).

이것이 지각 균일 사다리의 실용적인 장점이다. 초록 사다리든 빨강 사다리든 600번이 흰 바탕에서 4.5:1 근처에 오도록 만들어 두면, "흰 바탕 글자는 600번 이상"이라는 한 줄짜리 규칙이 모든 색에 통한다. HSL 사다리라면 색마다 그 경계가 두세 칸씩 왔다 갔다 한다.

회색에도 온도가 있다

화면에서 가장 넓은 자리를 차지하는 색은 브랜드 색이 아니라 중립색(Neutrals)이다. 바탕, 본문 글자, 테두리, 흐린 안내 글자처럼 색상이 거의 없는 회색 계열을 말한다. 웹 화면의 대부분은 이 회색들이 칠한다. 그래서 회색을 어떻게 고르느냐가 브랜드 색보다 화면의 인상을 더 크게 좌우하기도 한다.

완전한 회색(채도 0)은 차갑고 기계적으로 느껴질 때가 있다. 많은 디자이너가 회색에 브랜드 색상을 아주 조금 섞는다. 채도로 치면 OKLCH 0.005~0.015, 화면에서 "회색인데 어딘가 초록 기운이 도는" 정도다. 7장에서 본 회색의 힘, 곧 탁한 색이 선명한 색을 살린다는 원리를 화면의 바탕에 적용하는 셈이다. 아래는 책방 E의 웹 화면을 밝은 화면과 어두운 화면으로 나란히 칠한 것이다. 회색에 섞는 색의 양을 바꿔 본다.

어두운 화면은 밝은 화면을 뒤집은 것이 아니다. 바탕은 검정 대신 아주 어두운 회색(이 장에서는 중립 900, L* 약 8)을 쓰고, 글자는 흰색 대신 아주 밝은 회색을 쓴다. 순수한 검정 위의 순수한 흰 글자는 대비가 21:1로 너무 세서 글자 둘레가 번져 보이는 사람이 있기 때문이다. 브랜드 색도 그대로 가져가지 않는다. 같은 초록이라도 어두운 바탕 위에서는 더 어둡고 무겁게 보이므로(9장의 동시대비), 더 밝은 칸을 쓴다. 토큰이 있으면 이 일은 "어두운 화면에서 링크는 400번"이라는 화살표 하나를 바꾸는 일이 된다.

상태색: 초록이 두 번 나올 때

화면에는 브랜드와 상관없이 정해진 의미를 가진 색들이 있다. "완료되었다", "주의하라", "실패했다", "참고하라"를 알리는 상태색(Status colors)이다. 관례적으로 성공은 초록, 경고는 노랑·주황, 위험은 빨강, 정보는 파랑을 쓴다. 이 관례는 신호등과 경고 표지에서 온 것이라 많은 사람에게 통하지만 보편적인 것은 아니다(12장). 그래서 상태색은 언제나 글자와 아이콘을 함께 쓴다(13장).

브랜드 색이 초록인 책방 E에는 곤란한 점이 하나 있다. "성공"의 초록과 브랜드 초록이 화면에 같이 나오면, 손님은 "예약하기" 버튼과 "예약 완료" 알림을 같은 종류로 읽는다. 선택지는 둘이다. 성공 초록을 브랜드 초록에서 색상으로 충분히 떼어 놓거나, 아예 성공에 브랜드 초록을 쓰고 버튼에는 다른 표시를 더하거나. 아래에서 성공 초록의 색상을 옮겨 가며 두 초록이 얼마나 떨어져야 구별되는지 본다.

성공 초록을 브랜드보다 노랑 쪽(145° 근처)으로 옮기면 일반 색각에서는 두 초록이 구별된다. 하지만 어떤 색상을 골라도 제2색각에서 성공 초록과 위험 빨강은 가까워진다. 빨강–초록 축이 바로 그 색각에서 약해지는 축이기 때문이다. 결국 상태색의 결론은 색의 문제가 아니다. 색은 상태를 빠르게 알리는 보조 수단이고, 상태를 정확히 알리는 일은 글자와 모양이 한다.

브랜드 색은 한 벌이다

"우리 브랜드 색은 초록"이라고 할 때 그 초록은 사실 하나가 아니다. 로고에 쓰는 기준색, 화면에서 쓰는 사다리, 인쇄용 값(15장), 간판 페인트 견본이 모두 "그 초록"을 맡는다. 여기에 대개 짝이 되는 보조색 하나와 강조색 하나가 붙는다. 그리고 이 색들이 화면에서 얼마만큼씩 쓰이는지가 색 자체만큼 중요하다.

아래 그림은 같은 네 가지 색(중립 바탕, 글자, 브랜드 초록, 강조 호박색)으로 칠한 웹 화면 세 개다. 색은 같고 넓이만 다르다.

대부분의 웹 화면은 B에 가깝다. 정보가 많은 화면에서 브랜드 색은 바탕이 아니라 신호로 일할 때 힘이 세다. 7장의 채도 예산(선명한 색은 화면의 10% 안팎)과 같은 이야기다. 반대로 포스터, 에코백, 간판처럼 한눈에 알아봐야 하는 곳에서는 A처럼 브랜드 색을 크게 쓰는 편이 낫다. 같은 브랜드라도 매체마다 넓이의 규칙이 다르다.

브랜드 색 한 벌을 정리할 때는 보통 다음을 함께 적는다. 기준색(로고)의 OKLCH와 hex, 화면용 톤 스케일, 밝은 바탕용·어두운 바탕용 변형(9장), 보조색과 강조색, 그리고 인쇄용 값(15장). 이 목록은 길어 보이지만, 한 번 적어 두면 간판 업체와 인쇄소와 웹 개발자가 각자 "그 초록"을 짐작으로 고르는 일을 막는다.

데이터에 맞는 팔레트

차트의 색은 장식이 아니라 숫자를 읽게 하는 도구다. 그래서 데이터 시각화 팔레트는 데이터의 종류로 고른다. 지도 제작자 신시아 브루어(Cynthia Brewer)가 지도 색 고르기 도구 ColorBrewer에서 정리한 세 갈래가 지금도 표준처럼 쓰인다.

책방 E의 10월 기록으로 세 팔레트를 써 본다. 순차는 하루 방문자 수를 달력에 칠하고, 발산은 작년 같은 날과 비교한 증감을, 범주는 주별 행사 종류별 참가자를 막대로 보여 준다. 색각 단추로 각 팔레트가 다른 색각에서 어떻게 보이는지도 확인한다.

범주 팔레트는 같은 명도·채도에서 색상만 고르게 나누는 것이 정석처럼 보이지만, 그 방법은 색상 하나에만 기대므로 색각이상에 약하다. 실제로 쓰이는 범주 팔레트들은 명도도 조금씩 엇갈리게 두어, 색상이 무너져도 밝기로 구별이 남게 만든다. 그리고 범주는 다섯에서 일곱 개를 넘으면 색만으로는 구별이 어렵다. 그보다 많으면 비슷한 것끼리 묶거나, 가장 중요한 하나만 색으로 칠하고 나머지는 회색으로 두는 편이 낫다.

무지개 색지도가 속이는 법

기온 지도, 높낮이 지도, 열화상 사진처럼 값이 연속으로 이어지는 자료에는 오랫동안 무지개 색지도가 쓰였다. 파랑에서 청록, 초록, 노랑, 빨강으로 이어지는 띠다. 색이 많아 화려하고 "자세해" 보인다. 하지만 시각화 연구자들은 이 색지도가 자료를 왜곡한다고 거듭 지적해 왔다(Borland, Taylor 2007; Crameri 외 2020). 문제는 두 가지다. 명도가 값을 따라 고르게 변하지 않고, 색상의 경계가 자료에 없는 선을 그린다.

아래 그림은 왼쪽에서 오른쪽으로 완전히 고르게 올라가는 경사면에, 가운데쯤 낮은 언덕 하나를 얹은 자료다. 언덕을 끌어 옮기고, 색지도를 바꿔 본다. 아래 그래프는 각 색지도가 값 0에서 1까지 가는 동안 명도(L*)가 어떻게 변하는지 보여 준다.

무지개 색지도의 "걸음 비"가 크다는 것은, 같은 크기의 값 변화가 어떤 구간에서는 크게, 어떤 구간에서는 거의 안 보인다는 뜻이다. 독자는 색이 크게 바뀌는 곳에 경계가 있다고 읽는다. 자료에는 없는 경계다. 2015년 matplotlib(파이썬의 대표적인 그래프 도구)의 개발자 스테판 반 데르 발트와 나타니엘 스미스가 명도가 고르게 오르도록 설계한 viridis를 발표했고, 이 색지도는 2017년 matplotlib 2.0부터 기본 색지도가 되었다. 지금은 많은 과학 도구가 무지개 대신 이런 지각 균일 색지도를 기본으로 둔다.

사진에서 색 뽑기

팔레트를 처음부터 만들지 않고 사진이나 그림에서 뽑아 오기도 한다. 가게의 실내 사진, 좋아하는 풍경, 공공 도메인의 명화(11장)에서 주요 색 다섯 개를 뽑으면, 그 장면의 분위기를 닮은 팔레트가 나온다. 컴퓨터는 이 일을 보통 k-평균 군집(k-means clustering)으로 한다. 사진의 모든 화소를 색 공간의 점으로 찍은 뒤, 점들을 k개의 무리로 나누고 각 무리의 평균색을 대표색으로 삼는 방법이다.

아래는 책방 E의 실내를 그린 가상의 사진이다(이 장이 캔버스로 그린 그림이다). 뽑을 색의 수 k를 바꾸고, 사진 위를 눌러 스포이드로 한 점을 찍으면 그 화소가 어느 대표색에 속하는지 보여 준다.

k-평균이 뽑은 다섯 색은 그 장면을 "평균낸" 색이다. 그래서 대개 탁하고 차분하다. 사진 속에서 눈길을 끌던 작은 색(빨간 책 한 권, 창밖의 하늘)은 넓이가 작아 빠지기 쉽다. 그런데 그 장면의 인상을 만드는 것은 종종 바로 그 작은 색이다. 그래서 뽑은 팔레트는 출발점으로 쓴다. 넓은 색은 바탕과 중립색 후보로, 작은 색은 손으로 다시 골라 강조색 후보로 둔다.

팔레트를 한 장에 정리하기

지금까지 만든 것을 모으면 한 벌의 팔레트가 된다. 브랜드 사다리 열 칸, 중립 사다리 열 칸, 상태색 네 개, 데이터용 팔레트 세 종류, 그리고 이 칸들을 가리키는 토큰 표. 마지막으로 이것을 한 장으로 정리한다. 아래 표는 이 장의 케이스에서 서윤이 정리한 토큰 표의 일부다.

점검 칸의 숫자는 그 토큰이 바탕 위에서 갖는 WCAG 대비다(밝은 화면 · 어두운 화면). 마지막 시뮬레이터는 이 표를 만드는 작업대다. 원판 위에서 브랜드 색을 고르면 사다리, 중립색, 토큰, 두 화면의 미리보기, 그리고 점검 목록이 한꺼번에 다시 계산된다. 원판은 OKLCH의 한 단면(가운데 회색, 바깥으로 갈수록 선명, 둘레를 돌면 색상)이다.

작업대에서 몇 가지를 움직여 보면, 팔레트의 품질이 색 하나의 아름다움보다 규칙이 얼마나 잘 버티는가에 달려 있다는 것이 보인다. 좋은 팔레트는 브랜드 색을 조금 바꾸어도, 어두운 화면으로 넘어가도, 다른 색각으로 보아도 점검 목록이 크게 무너지지 않는다. 그리고 무너지는 지점이 어디인지 미리 알고 있다. 서윤이 이번 장에서 만든 것도 그런 규칙의 묶음이다.

서윤의 작업 노트