시맨틱 컬러

색을 화면마다 어울리는 것으로 고르던 동안에는 같은 색이 자리마다 다른 뜻을 얻었습니다. 한 화면에서 위험을 뜻한 빨강이 다른 화면에서 강조를 뜻하면, 사용자는 색을 보고 아무것도 짐작하지 못합니다.

페이지덱에서도 그 일이 있었습니다. 삭제 버튼과 오류 문구에 같은 빨강을 오래 써 왔는데, 새 요금제를 알리는 배너 배경에 그 빨강이 들어갔습니다. 들어온 문의는 배너 내용에 관한 것이 아니었습니다. 무슨 경고인지 묻는 문의였습니다. 지현이 숫자를 열어 보니 배너를 누른 사람도 평소보다 적었습니다. 사용자가 빨강을 위험으로 배워 둔 상태였기 때문입니다.

시맨틱 컬러는 그 배움을 지켜 주는 약속입니다. 색과 뜻을 짝지어 고정해 두고, 그 짝 밖에서는 같은 색을 쓰지 않습니다.

뜻마다 색을 하나씩 정해 두고 그 뜻으로만 씁니다. 대개 네 짝입니다.

1. 성공은 초록. 저장이 끝났거나 결제가 통과한 상태입니다.
2. 경고는 노랑이나 주황. 지금 문제는 아니지만 확인이 필요한 상태입니다. 저장 용량이 80퍼센트에 닿았다는 안내가 여기 들어갑니다.
3. 오류는 빨강. 실패했거나 되돌릴 수 없는 동작입니다.
4. 안내는 파랑. 알아 두면 좋은 정보이고 사용자가 할 일은 없습니다.

한 뜻에 색 하나만 두면 모자랍니다. 뜻마다 배경용, 테두리용, 글자용 값을 따로 둡니다. 같은 빨강을 배경과 글자에 함께 쓰면 명도 대비가 나오지 않아 읽히지 않으니, 배경은 연한 단계, 글자는 진한 단계로 갈라 둡니다.

색만으로 구분하지 않는 것도 함께 지킵니다. 성공을 초록 점, 실패를 빨강 점으로만 표시한 목록은 스무 명 중 한 명꼴로 구분되지 않으니, 색각 이상 고려에 따라 아이콘이나 글자를 함께 답니다.

이름을 짓는 자리에서 차이가 갈립니다. 값에 이름을 붙여 디자인 토큰으로 등록할 때 색 이름이 아니라 뜻으로 짓습니다. 빨강이라고 붙여 두면 오류 색을 주황으로 바꿀 때 이름과 값이 어긋나고, 오류라고 붙여 두면 값만 바꾸면 끝납니다.

"이 배너 배경은 오류 색입니다. 다른 계열로 바꾸죠."

정해 둔 뜻 밖에서 그 색을 쓰지 말자는 지적입니다.

"토큰 이름을 빨강이 아니라 오류로 바꿔 주세요."

색이 아니라 역할로 이름을 붙이자는 요청입니다.

"초록을 유료 플랜 강조에 쓰면 결제 전인데 다 된 것처럼 보입니다."

성공으로 학습된 색을 다른 뜻으로 쓰면 오해가 생긴다는 말입니다.

페이지덱은 그 뒤 색의 뜻을 한 장에 적어 두고 새 화면에서는 그 표에서만 고르기로 했습니다. 민서가 표를 만들고 태오가 토큰 이름을 뜻으로 바꿨습니다. 요금제 배너는 브랜드 계열 색으로 다시 나갔습니다.