컬러

색을 고르는 일은 오랫동안 취향의 문제로 다뤄졌습니다. 화면을 만드는 사람이 그때그때 마음에 드는 파랑을 하나 집어 쓰고, 다음 화면에서는 또 다른 파랑을 집었습니다. 화면이 열 장일 때는 별일이 아닙니다. 문제는 화면이 200장이 되고 만드는 사람이 여섯 명이 됐을 때 드러납니다.

페이지덱에서도 같은 일이 있었습니다. 민서가 시안에 쓴 버튼 파랑과 태오가 구현한 버튼 파랑이 미묘하게 달랐고, 두 화면을 나란히 띄워 놓고서야 그 사실을 알았습니다. 회색은 더 심했습니다. 본문 글자, 설명 글자, 테두리, 비활성 버튼에 쓰인 회색을 세어 보니 서로 다른 값이 열일곱 가지였습니다. 어느 것이 맞는지 물어볼 데가 없었고, 새로 들어온 사람은 옆 화면에서 값을 복사해 왔습니다. 그러면 잘못된 회색도 같이 복사됐습니다. 한 번 퍼진 값은 되돌리기 어렵습니다. 어느 회색이 원본이고 어느 것이 복사 중에 어긋난 값인지 아무도 기억하지 못했기 때문입니다.

값이 흩어진 것보다 더 큰 문제는 색이 맡고 있던 일이 눈에 보이지 않았다는 데 있습니다. 색은 장식만 하고 있는 것이 아닙니다. 한 화면에 같은 크기 같은 색의 버튼 넷이 놓여 있으면 사람은 넷을 다 읽어야 하지만, 하나만 진한 색이면 나머지는 훑고 지나갑니다. 빨간 글자는 읽기 전에 이미 문제가 생겼다는 뜻으로 읽히고, 연회색 글자는 지금 누를 수 없다는 뜻으로 읽힙니다. 색이 이렇게 위계와 상태를 나르고 있는데도 그 역할에 이름이 붙어 있지 않으니, 시안 회의에서는 "이 파랑이 좀 튀는 것 같아요" 처럼 취향을 말하는 문장만 오갔습니다. 취향에는 반박할 근거가 없어서 그런 회의는 대개 직급이 높은 사람의 말로 끝났습니다. 그렇게 정해진 색은 다음 화면에서 또 흔들립니다. 근거가 사람이면 사람이 바뀔 때마다 결정도 바뀝니다.

컬러가 한 일은 색을 낱개 선택에서 체계로 옮겨 놓은 것입니다. 값을 먼저 고르는 대신 역할을 먼저 정합니다. 주요 동작에 쓸 색, 위험을 알릴 색, 배경에 깔 색처럼 자리를 정해 두고 그 자리에 값을 하나씩 넣습니다. 그러면 회의 문장이 바뀝니다. "이 파랑이 튄다" 대신 "여기는 주요 동작 자리가 아닌데 주요 동작 색을 썼다" 가 되고, 뒤엣말은 확인할 수 있는 지적입니다. 비주얼 디자인 안에서 타이포그래피나 레이아웃과 나란히 서는 재료이고, 셋 다 보이는 것으로 무엇을 먼저 읽게 할지를 정한다는 같은 목적을 가집니다. 다만 글자 크기는 재 보면 크고 작음이 바로 나오는 데 비해 색은 그렇지 않아서, 색만 유독 규칙 없이 남아 있는 제품이 많습니다.

컬러 아래 용어는 네 갈래로 묶입니다. 무슨 색을 어떤 역할로 둘지 정하는 구성, 그 색이 실제로 읽히는지 재는 품질, 같은 화면을 다른 밝기로 내놓는 테마, 색을 숫자로 적는 표기입니다. 구성이 먼저이고 나머지 셋은 그 결과를 검사하거나 변형하거나 기록하는 자리입니다.

구성은 네 자리입니다.

1. 컬러 팔레트 — 제품에서 쓰기로 정한 색의 묶음입니다. 파랑 하나를 정하는 게 아니라 같은 계열을 밝기 순으로 여러 단계 만들어 둡니다. 가장 밝은 단계부터 100, 200, 300 식으로 번호를 붙여 900까지 두는 방식이 흔합니다. 이렇게 해 두면 배경에는 100번, 버튼에는 600번, 눌린 상태에는 700번처럼 단계로 말할 수 있습니다. 팔레트 밖의 색은 쓰지 않는다는 약속이 여기 따라붙습니다. 계열은 대개 다섯에서 여덟 개 사이로 끊습니다. 브랜드 계열 하나, 무채색 한 벌, 뜻이 정해진 색 서넛이면 대부분의 화면이 덮입니다.
2. 프라이머리 컬러 — 그 팔레트에서 브랜드와 주요 동작을 대표하는 색입니다. 한 화면에서 가장 하고 싶은 일 하나에만 씁니다. 가입 화면이라면 가입 버튼 하나가 이 색을 가져가고, 그 옆의 둘러보기 버튼은 테두리만 있는 모양으로 물러납니다. 이 색을 세 군데 넘게 쓰면 강조가 서로를 지워서 아무것도 강조되지 않습니다. 화면을 흐릿하게 만들어 놓고 봤을 때 진한 덩어리 하나만 남으면 제대로 쓴 것이고, 서넛이 남으면 다시 골라야 합니다.
3. 시맨틱 컬러 — 뜻이 미리 정해진 색입니다. 성공은 초록, 경고는 노랑, 오류는 빨강, 안내는 파랑처럼 짝을 고정해 두고 그 뜻으로만 씁니다. 고정이 깨지면 학습이 무너집니다. 삭제 버튼을 빨강으로 쓰다가 어느 화면에서 홍보 배너 배경으로 같은 빨강을 쓰면, 사용자는 그 배너를 경고로 읽고 한 번 멈칫합니다. 초록도 마찬가지입니다. 성공 표시로 써 온 초록을 유료 요금제 강조에 쓰면, 결제 화면에서 아직 되지 않은 일이 이미 된 것처럼 보입니다.
4. 뉴트럴 컬러 — 배경과 글자와 테두리에 쓰는 무채색 계열입니다. 눈에 띄지 않지만 실제 화면의 대부분을 덮습니다. 회색이 열일곱 가지로 불어나는 사고가 늘 이 갈래에서 벌어지기 때문에, 단계를 여섯이나 여덟으로 못 박고 그 안에서만 고르게 합니다. 본문 글자는 가장 진한 단계, 설명 글자는 그 아래 단계, 테두리는 밝은 쪽 단계처럼 자리마다 번호를 지정해 두면 새 화면에서 고민할 일이 없어집니다.

품질은 한 자리입니다. 명도 대비는 글자와 배경의 밝기 차이를 하나의 수치로 나타낸 값입니다. 흰 배경 위의 연회색 글자는 2.8 대 1 정도이고, 같은 회색을 두 단계 진하게 하면 4.7 대 1이 됩니다. 본문 글자는 4.5 대 1 이상을 기준으로 삼는 것이 일반적이라 앞엣것은 떨어지고 뒤엣것은 통과합니다. 색을 고른 뒤에 재는 것이 아니라 고르는 자리에서 함께 재야 하는 값입니다. 다 만들어 놓고 나중에 확인하면 팔레트를 다시 짜야 합니다. 브랜드 색이 노랑 계열인 회사에서 특히 자주 걸립니다. 노랑은 흰 배경에서 대비가 거의 나오지 않아 버튼 위의 흰 글자가 읽히지 않고, 그때는 글자를 검정으로 바꾸거나 색을 한참 어둡게 내려야 합니다.

테마도 한 자리입니다. 다크 모드는 어두운 배경을 기준으로 구성한 화면입니다. 밝은 화면의 색을 그대로 뒤집는 작업이 아닙니다. 어두운 배경 위에서는 같은 파랑이 훨씬 세게 보여서 대개 한두 단계 연한 값을 씁니다. 그림자로 층을 표현하던 자리도 어두운 배경에서는 보이지 않아 밝기 차이로 대신합니다. 그래서 다크 모드를 지원하려면 색마다 밝은 화면용 값과 어두운 화면용 값을 짝으로 들고 있어야 합니다. 배경도 완전한 검정을 쓰지 않는 편입니다. 순수한 검정 위의 흰 글자는 번져 보여서 오래 읽기 어렵고, 한 단계 올린 짙은 회색이 더 편하게 읽힙니다.

표기도 한 자리입니다. 컬러 모델은 색을 숫자로 적는 체계입니다. 빨강·초록·파랑의 양으로 적는 방식과, 색상과 채도와 밝기로 적는 방식이 대표적입니다. 후자를 쓰면 밝기 값만 바꿔 같은 계열의 단계를 만들기 쉬워서 팔레트를 설계할 때 유리합니다. 어느 표기를 쓰든 그 값에 이름을 붙여 디자인 토큰으로 등록해 두면 시안과 코드가 같은 이름을 부르게 됩니다. 민서가 시안에서 버튼 색을 한 단계 진하게 바꾸면 태오는 값을 다시 받아 적는 대신 같은 이름이 가리키는 값이 바뀐 것만 확인하면 됩니다.

네 갈래는 한 줄로 이어집니다. 구성이 역할과 값을 정하고, 품질이 그 값이 읽히는지 거르고, 테마가 같은 역할을 다른 밝기에서 다시 정의하고, 표기가 그 전부를 기계가 읽을 수 있는 형태로 적습니다. 앞쪽이 비면 뒤쪽이 할 일이 없습니다. 역할을 정하지 않은 채 대비만 맞추면 읽히기는 하는데 무엇이 중요한지는 여전히 알 수 없는 화면이 나옵니다. 반대로 역할만 정하고 표기를 이름으로 묶어 두지 않으면, 정한 규칙이 문서 안에만 있고 화면에는 옛날 값이 그대로 남습니다.

"이 버튼은 프라이머리로 가면 안 될 것 같아요. 한 화면에 주요 동작이 둘이 돼요."

강조를 나눠 주면 둘 다 강조가 아니게 된다는 말입니다.

"이 회색 본문이 배경이랑 3 대 1이에요. 한 단계 진한 걸로 바꿀게요."

취향이 아니라 대비 기준에 걸려서 바꾼다는 뜻입니다.

"그 색 팔레트에 없는 값인데 어디서 가져왔어요?"

정해 둔 묶음 밖의 색이 화면에 들어왔다는 지적입니다.

페이지덱에서 색 이야기가 가장 길었던 때는 다크 모드를 처음 붙이던 분기였습니다. 민서가 밝은 화면의 색을 밝기만 뒤집어 어두운 화면 시안을 만들어 봤더니, 오류 메시지의 빨강이 눈에 아플 만큼 세게 보였고 비활성 버튼의 회색은 배경에 묻혀 사라졌습니다. 색을 뒤집는 문제가 아니라 역할마다 값을 다시 정하는 문제라는 것이 그 자리에서 드러났습니다.

태오는 화면 코드에 색 값이 직접 적힌 자리가 300군데가 넘는다고 알렸습니다. 어두운 화면용 값을 넣으려면 그 300군데를 다 찾아야 했습니다. 지현은 다크 모드 출시를 한 분기 미루고, 그 사이에 색 값을 전부 이름으로 바꿔 두기로 정했습니다. 이름으로 바꿔 두면 어두운 화면용 값은 그 이름이 가리키는 값을 한 벌 더 만드는 일로 끝납니다. 급한 것은 다크 모드였지만 먼저 해야 할 것은 이름 붙이기였습니다. 그 분기에 민서와 태오가 한 일은 새 색을 고르는 일이 아니라 이미 쓰고 있던 색에 자리를 찾아 주는 일에 가까웠습니다.

색을 브랜드 인상의 문제로만 읽는 오해가 가장 흔합니다. 로고 색을 정하는 일과 화면의 색을 정하는 일이 같은 단어로 불리니 그렇게 굳기 쉽습니다. 실제로 화면에서 색이 하는 일의 대부분은 인상이 아니라 정보 전달입니다. 무엇을 먼저 볼지, 지금 누를 수 있는지, 방금 한 일이 잘됐는지가 색으로 전해집니다. 인상의 문제로만 보면 색은 기획이 끝난 뒤 마지막에 입히는 장식이 되고, 그 순서로 만들면 버튼 셋이 똑같이 눈에 띄는 화면이 나옵니다. 사용자는 어느 것을 눌러야 할지 몰라 3초를 멈추고, 그 3초가 전환율에 그대로 나타납니다.

색만으로 정보를 구분해도 된다고 보는 오해도 자주 있습니다. 목록 왼쪽에 초록 점과 빨강 점을 찍어 두면 한눈에 갈라져 보이니 잘 만든 화면처럼 느껴집니다. 그런데 남성 스무 명 중 한 명꼴로 그 두 색이 비슷한 갈색으로 보입니다. 흑백으로 인쇄된 문서에서도 두 점은 같아집니다. 그대로 두면 그 사용자들에게는 상태 열이 통째로 비어 있는 것과 같아서, 성공한 항목과 실패한 항목을 하나씩 열어 확인해야 합니다. 색에 모양이나 글자를 하나 더 얹는 것으로 끝나는 일이라 색각 이상 고려는 팔레트를 짜는 단계에서 함께 처리합니다.