프라이머리 컬러

화면을 만들 때마다 강조색을 그 자리에서 고르던 시절이 있었습니다. 목록 화면은 조금 어두운 파랑, 설정 화면은 밝은 파랑, 결제 화면은 초록으로 강조가 붙었습니다. 각 화면만 보면 어색한 데가 없습니다.

이어서 쓰는 사용자에게는 두 가지가 무너집니다. 하나는 이것이 한 제품이라는 감각입니다. 다른 하나는 더 실질적인데, 어디를 누르면 되는지가 화면마다 다시 학습해야 하는 것이 됩니다. 한 화면에 진한 색 버튼이 셋 나란히 놓이면 강조가 서로를 지워서 무엇도 강조되지 않습니다. 가입 화면에서 가입과 둘러보기와 도움말이 모두 같은 진한 파랑이면 사용자는 셋 사이에서 한 번 멈춥니다.

팔레트에서 색 하나를 지정해 두고 한 화면에서 한 번만 씁니다.

1. 팔레트 안에서 단계를 지정합니다. 컬러 팔레트가 한 계열을 밝기 순으로 100에서 900까지 나눠 두었다면, 그중 600번처럼 한 칸을 이 자리로 못 박습니다.
2. 한 화면에 한 번만 씁니다. 그 화면에서 사용자가 하기를 바라는 동작 하나가 이 색을 가져갑니다.
3. 나머지 동작은 물러난 모양으로 둡니다. 테두리만 있는 버튼이나 글자만 있는 버튼, 또는 배경과 글자에 쓰는 무채색인 뉴트럴 컬러를 씁니다.
4. 상태별로 단계를 미리 정합니다. 기본은 600, 마우스를 올렸을 때는 700, 누르는 동안은 800, 눌러도 되지 않는 상태는 300처럼 정해 두면 새 버튼을 만들 때 고를 것이 없습니다.
5. 글자와의 대비를 확인합니다. 이 색 위에 흰 글자를 얹으려면 밝기 차이를 수치로 나타낸 명도 대비가 기준을 넘어야 합니다. 밝은 계열을 프라이머리로 고른 회사에서 이 조건이 자주 걸립니다.

제대로 쓰였는지는 화면을 흐릿하게 만들어 보면 알 수 있습니다. 진한 덩어리 하나만 남으면 맞고, 서넛이 남으면 다시 골라야 합니다.

"이 화면에 프라이머리가 셋이에요. 하나만 남기죠."

강조가 여러 개라 강조가 사라졌다는 지적입니다.

"600에 흰 글자는 대비가 3.9라 못 씁니다. 700으로 내리죠."

같은 계열에서 한 단계 진하게 해 기준을 맞추자는 제안입니다.

"이 버튼은 뉴트럴로 물러나게 하죠."

주 동작이 아니니 색을 내려놓자는 뜻입니다.

페이지덱의 문서 목록 화면에서 이 정리가 있었습니다. 새 문서, 폴더 만들기, 가져오기 버튼이 모두 프라이머리였고, 민서가 새 문서 하나만 남기고 나머지를 테두리만 있는 모양으로 바꿨습니다. 새 문서 버튼을 누르는 비율은 그 뒤에 올라갔습니다.