뉴트럴 컬러

강조색은 정할 때 회의를 거치지만 회색은 그렇지 않습니다. 눈에 띄지 않으니 논의 대상에서 빠지고, 화면을 만드는 사람이 그때그때 조금 더 밝거나 어두운 값을 새로 넣습니다.

페이지덱에서 민서가 코드에 들어간 회색 값을 세어 보니 열일곱 개였습니다. 문제는 개수가 아니라 결과였습니다. 설명 글자에 쓰인 회색이 화면마다 달라서 어떤 화면에서는 읽히고 어떤 화면에서는 배경에 묻혔습니다.

뉴트럴 컬러를 따로 이름 붙여 관리하는 이유가 여기 있습니다. 가장 자주 쓰이는 색이라 흩어지면 제품 전체가 흐려지고, 흐려졌다는 것이 눈에 잘 띄지 않습니다.

밝은 쪽에서 어두운 쪽으로 단계를 만들어 두고 그 안에서만 고릅니다. 정해 둘 것은 다섯 가지입니다.

1. 단계 수를 먼저 못 박습니다. 여섯이나 여덟이면 화면 대부분을 덮습니다.
2. 자리마다 쓸 단계를 지정합니다. 본문 글자는 가장 진한 단계, 설명 글자는 그 아래 단계, 테두리는 밝은 쪽, 화면 배경은 가장 밝은 단계입니다.
3. 순수한 무채색을 쓸지 색기를 조금 섞을지 정합니다. 파랑을 미세하게 섞은 회색은 브랜드 계열과 나란히 놓였을 때 덜 따로 보입니다. 다만 한 제품에 한 벌만 둡니다.
4. 단계를 고르는 자리에서 명도 대비를 함께 잽니다. 본문 글자는 배경과 4.5 대 1 이상을 기준으로 삼는 것이 일반적이고, 이 검사를 나중으로 미루면 단계를 다시 짜야 합니다.
5. 어두운 테마에서는 단계를 뒤집는 것으로 끝나지 않습니다. 어두운 배경 위의 가장 밝은 흰색은 글자가 번져 보이므로 한 단계 낮춘 값을 본문에 씁니다.

컬러 팔레트에 없는 회색은 쓰지 않는다는 약속이 이 모든 것을 지탱합니다. 예외를 한 번 허용하면 다음 화면에서 다시 열일곱 개가 됩니다.

"회색이 열일곱 개예요. 여덟 단계로 줄이고 자리마다 번호를 지정합시다."

값을 줄이는 일과 자리를 정하는 일이 같이 가야 한다는 말입니다.

"설명 글자에 이 단계를 쓰면 대비가 3 대 1이에요. 한 단계 진하게 가야 합니다."

무채색 선택이 읽히는지의 문제로 이어진다는 지적입니다.

"이 테두리 색은 팔레트에 없는 값이에요. 정해진 단계로 바꿔 주세요."

예외를 만들지 말라는 요청입니다.

민서가 여덟 단계로 정리하면서 열일곱 개 값이 여덟 개로 줄었습니다. 그 과정에서 설명 글자가 배경에 묻히는 화면 네 개를 찾아 한 단계 진하게 고쳤습니다.

예상하지 않은 결과도 하나 있었습니다. 배경과 테두리가 조용해지면서 주요 동작에 쓰는 프라이머리 컬러가 전보다 눈에 잘 들어왔습니다. 강조색을 더 진하게 만들자는 이야기가 그 자리에서 사라졌습니다.