시맨틱 컬러

정의

시맨틱 컬러는 색 자체에 정해진 '뜻'을 부여해 쓰는 색입니다. 초록은 성공이나 완료, 노랑과 주황은 주의나 경고, 빨강은 오류나 위험, 파랑은 안내나 정보라는 식으로 색과 의미를 짝지어 두는 것입니다. 이 짝은 신호등이나 도로 표지판처럼 오랜 시간에 걸쳐 사회 전체에 쌓인 문화적 관습에서 왔기 때문에, 사용자는 글자를 읽기도 전에 색만 보고도 대략의 상태를 먼저 짐작합니다. 즉 시맨틱 컬러는 브랜드 취향으로 고르는 색이 아니라, 사용자와 이미 맺어 둔 약속을 지키는 색입니다.

왜 중요한가

이 색들이 중요한 이유는 사용자가 화면의 상태를 아주 빠르게 파악하도록 돕기 때문입니다. 폼을 제출했을 때 붉은 메시지가 뜨면 무언가 잘못됐다는 것을, 초록 배지가 보이면 잘 처리됐다는 것을 사용자는 글자를 읽기도 전에 순식간에 이해합니다. 만약 오류를 초록으로, 성공을 빨강으로 칠한다면 사용자는 매번 멈춰서 글자를 다시 읽어야 하고, 관습을 거스른 화면은 불안하고 신뢰하기 어렵게 느껴집니다. 시맨틱 컬러를 일관되게 지키는 것은 제품 전체에서 상태 표현의 공통 언어를 만드는 일이며, 이는 사용자의 학습 부담을 크게 줄여 줍니다. 한 화면에서 익힌 색의 뜻이 다른 화면에서도 그대로 통하므로, 사용자는 새 기능을 만나도 이미 아는 규칙으로 상태를 읽어 낼 수 있습니다.

흔한 실수

• 색 하나만으로 의미를 전달하는 경우입니다. 붉은 테두리만으로 오류를 표시하면 색각 이상이 있는 사용자는 그것이 정상 상태와 무엇이 다른지 구분하지 못합니다. 색은 의미를 보조할 뿐, 단독으로 전부를 짊어져서는 안 됩니다.
• 상태 색을 브랜드 색과 뒤섞어 쓰는 것입니다. 브랜드가 초록이라고 성공 배지도 완료 알림도 전부 초록으로 칠하면, 정작 상태를 구분해야 할 순간에 색이 아무 신호도 주지 못합니다. 상태 색과 브랜드 색은 역할이 다르므로 서로 겹치지 않게 나눠 두어야 합니다.
• 관습을 무시하고 새로운 색 짝을 임의로 정하는 것입니다. 오류를 파랑으로, 성공을 보라로 바꾸면 개성 있어 보일지 몰라도, 사용자가 평생 익혀 온 신호와 어긋나 매번 뜻을 다시 배워야 하는 부담을 안깁니다.

실무 팁

• 색만으로 의미를 전달하지 말고 반드시 아이콘과 텍스트를 함께 쓰세요. 오류에는 붉은색과 함께 경고 아이콘, 그리고 무엇이 잘못됐는지 설명하는 문구를 붙여야 색이 보이지 않는 상황에서도 뜻이 온전히 전달됩니다. 이것이 접근성의 기본입니다.
• 성공·주의·오류·정보 네 가지 의미의 색을 처음에 확정해 토큰으로 정의해 두세요. 팀 전체가 같은 값을 참조하면 화면마다 상태 색이 제각각인 사태를 막을 수 있습니다.
• 상태 색에도 밝은 배경용과 진한 글자용 단계를 함께 준비하세요. 배경과 글자에 같은 원색을 쓰면 대비가 무너지거나 지나치게 튀기 쉽습니다.

관련 개념