컬러 팔레트

화면을 그릴 때마다 색을 그 자리에서 고르면 같은 역할의 색이 조금씩 갈립니다. 회색이 열일곱 가지로 불어나는 일이 대표적입니다. 본문 글자와 설명 글자와 테두리에 쓴 회색이 각각 눈으로 골라진 값이라서, 어느 것이 어느 자리의 값인지 아무도 모릅니다.

같은 일이 브랜드 색에서도 벌어집니다. 파란 버튼이 세 화면에 있는데 셋이 조금씩 다른 파랑인 경우입니다. 넘겨받는 쪽에서도 색 코드가 스무 개 흩어져서, 브랜드 색을 바꾸기로 한 날 어디를 고칠지 찾는 일부터 시작합니다.

컬러 팔레트는 쓸 색을 미리 정해 두고 그 밖은 쓰지 않기로 하는 약속입니다. 고민할 것을 몇 단계 가운데 하나로 줄입니다.

색 하나를 정하는 것이 아니라 한 계열을 밝기 단계로 여러 개 만들어 둡니다. 가장 밝은 쪽부터 100, 200 식으로 번호를 붙여 900까지 두는 방식이 흔합니다. 그러면 색을 값이 아니라 단계로 말할 수 있습니다. 배경에는 100번, 버튼에는 600번, 눌린 상태에는 700번을 쓰는 식입니다.

계열 수는 다섯에서 여덟 사이로 끊습니다. 브랜드 계열 하나, 무채색 한 벌, 뜻이 정해진 색 서넛이면 대부분의 화면이 덮입니다. 계열마다 역할도 함께 적어 둡니다.

1. 브랜드와 주요 동작을 대표하는 프라이머리 컬러가 어느 계열의 몇 번인지 지정합니다.
2. 성공과 경고와 오류처럼 뜻이 고정된 시맨틱 컬러를 계열별로 하나씩 둡니다.
3. 배경과 글자와 테두리를 덮는 뉴트럴 컬러는 단계를 여섯이나 여덟으로 못 박고 자리마다 번호를 지정합니다.

여기에 약속이 하나 따라붙습니다. 팔레트 밖의 색은 쓰지 않는다는 것입니다. 새 색이 필요하면 팔레트를 고칩니다. 이 약속이 없으면 목록과 화면이 무관해집니다.

단계로 나눠 두면 검사도 쉬워집니다. 100번 배경 위에 몇 번 글자까지 쓸 수 있는지를 한 번 정해 두면 새 화면에서 밝기 차이를 매번 재지 않아도 됩니다.

"이 회색은 팔레트에 없는 값이에요."

눈으로 고른 색이 섞였으니 정해진 단계에서 고르자는 지적입니다.

"버튼 눌린 상태는 600 말고 700으로 갑시다."

색을 값이 아니라 단계로 이야기하고 있다는 뜻입니다.

"계열이 열한 개면 팔레트가 아니라 목록이에요."

고를 범위를 좁히려고 만든 것인데 그 구실을 못 한다는 말입니다.

페이지덱에서 민서가 팔레트를 다시 짤 때 회색 단계를 열넷에서 여덟으로 줄였습니다. 본문 글자는 800번, 설명 글자는 600번, 테두리는 300번으로 자리를 못 박았습니다.

태오는 그 번호를 코드의 값 이름으로 옮겼습니다. 덕분에 반년 뒤 브랜드 색을 바꿀 때 고친 자리는 팔레트 한 곳이었습니다.