컬러(색채)의미와 정보 디자인

 

정보를 디자인할 시 고려해야 할 컬러들

복잡한 B2B 솔루션을 하다 보면 Primary 컬러로 정하기에 매우 조심스러운 컬러들이 있습니다.
바로 상태 값을 알려주는 컬러들인데요. 상태 값을 알려주는 컬러라고 하면 와닿지 않으시죠?
쉽게 말해서 에러나 실패는 빨강, 성공은 초록과 같은 범용적으로 시스템이나 산업에서 사용되는 컬러를 뜻합니다.
이 컬러를 잘못 사용하게 되면 사용자들이 착각을 할 수 있으며 휴먼 에러를 일으킬 수 있기 때문에 꼭 의미를 지켜서 사용해야 합니다.
그 외에도 정보를 디자인할 때 컬러 선정 시 고려해야 할 점이 있는데요. 한번 살펴보겠습니다.

국제 표준 산업 규격 컬러?

국가별로 문화가 달라 컬러의 의미도 다를 수 있습니다. 하지만 국제표준(ISO)이나 한국산업규격(KS) 등 범용적으로 제시한 가이드 덕분에 컬러만으로 대부분의 국가에서 의미 전달이 가능해졌습니다. 따라서 해당 표준 컬러를 활용할 때는 의미를 반드시 지켜줘야 합니다.

국민 안전처에서도 컬러에 대한 디자인 가이드를 아래와 같이 제시하였습니다.

컬러에 따른 표준 의미

UI 디자인에서도 위 컬러의 의미가 적용이 됩니다.

빨간색
사용자의 동작이 실패하였을 때, 혹은 사용자의 업무 수행에 있어 심각한 오류를 불러일으킬 경우에 사용됩니다.

노란색
사용자의 업무 수행에 있어 지장은 없지만 차후 문제를 일으킬 수 있으므로 주의를 기울여야 하는 경우에 사용됩니다.

파란색
단순 정보 제공 및 업무를 지시하기 위하여 사용됩니다.

초록색
사용자가 수행한 동작이 성공했을 시 성공한 정보를 전달하기 위한 용도로 사용됩니다.

형태에도 표준적인 의미가 존재?

컬러뿐만 아니라 형태에도 범용적으로 사용되는 표준이 존재합니다.
아래의 이미지와 같이 사용되는데요. 이 역시 UI 디자인에서도 적용이 가능합니다.

형태에 따른 표준 의미

웹 접근성에 의하면 아이콘과 함께 사용하면 의미 전달을 좀 더 명확히 할 수 있다고 합니다.
컬러와 아이콘을 함께 사용한다면 아래와 같겠죠?

컬러와 아이콘으로 전달하는 정보

위 이미지의 쉬운 사례로는 로그인 및 회원가입에서 아이디 혹은 비밀번호를 입력했을 때를 예시로 들 수 있습니다. 그 외에도 다이얼로그에서도 아이콘과 컬러가 함께 제공되어 사용자들의 이해를 돕습니다.

반응형

그 외에 체크리스트!

텍스트와 배경의 명도 대비
웹 접근성에 따르면 텍스트와 콘텐츠 배경간 명도 대비는 4.5대 1 이상 사용할 것을 권장합니다.
핵심 텍스트의 콘텐츠와 배경 간의 충분한 대비를 제공하여, 저시력자, 색각 이상자, 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 하기 때문입니다.

명도대비가 높은 컬러(좌) / 명도 대비가 낮은컬러(우)

컬러와 패턴
저시력자, 색각 이상자를 위해 컬러에 패턴을 활용할 수 있습니다.

색각이상의 유형은 여러 가지가 있지만 적색과 녹색을 구분하지 못하는 적녹색맹이 가장 많으며, 청색과 녹색, 또는 황색을 구분하지 못하는 청 색맹, 색상을 전혀 구분하지 못하고 명암 대비로만 시각 정보를 인식하는 전색맹이 있다.
이들을 위한 배려가 바로 컬러 + 패턴의 사용인데요. 아래 이미지를 예시로 보시죠.

노선도에 레이블을 표시한 케이스(좌) / 노선도를 패턴으로 표시한 케이스(가운데) / 차트 각 점의 모양을 다르게 디자인(우)

시각적으로 불편한 사람들을 위해 다양한 시각 요소를 추가적으로 디자인한 사례라고 볼 수 있습니다.
네이버도 지하철 색각 이상자를 위하여 지하철 노선도를 개편하였는데요.
톤이 다른 라인으로 노선도 구분 / 지하철 라벨 추가 등 색약자들을 위하여 색약모드를 지원하고 있습니다.

네이버 지하철 색약 모드(좌) / 일반 모드(우)

 

이처럼 컬러를 디자인할 때도 단순히 디자인하는 것이 아닌 사용자를 생각해야 한다는 점을 알 수 있었습니다.

 

---

아래는 아티클을 작성할 때 참고한 원문입니다.
https://nuli.navercorp.com/community/article/1132656

색각이상자를 위한 웹 접근성 가이드라인

리메인 스타일가이드 (지금은 도메인이 사라졌네요 .2022.01.12 확인)