UI 색상 팁 3가지
색상은 강한 힘을 가지고 있다, 강한 힘에는 강한 책임이 필요하다. 개인적으로 색상을 책임감 있게 사용하는 게 UI 디자이너로서 가져야 할 기본적인 자세라고 생각한다.
충분한 대비 확보하기
대비는 서로 다른 색들이 얼마나 뚜렷하게 구분되는지를 나타낸다. 웹 콘텐츠 접근성 가이드라인(WCAG)에서 자주 볼 수 있는 표현 중 하나인 4.5:1은 색상이 다른 색상 보다 4.5배 밝거나 어두운 걸 뜻한다. 이 비율을 만족하면 시력에 제한이 있는 사람들을 포함한 대부분의 사람들이 글을 쉽게 읽을 수 있다.
본문 와 같은 작은 글씨(~18px) 뿐만이 아니라 큰 글씨(24px~)와 UI 요소들도 3:1의 명암 대비를 충족해야 한다. 충분한 대비를 확보해야 하는 이유는 단순히 가이드라인을 지키기 위해서 뿐만이 아니다. 사용자는 다양한 환경에서 제품을 사용하는데, 이때 밝은 빛이나 반사로 인해 화면의 가독성이 떨어질 수 있다. 높은 대비는 이러한 요소의 영향을 최소화할 수 있다.
색상과 함께 아이콘 활용하기
신호등에 주로 쓰이는 빨간색, 노란색, 초록색은 각자의 의미를 가지고 있다. 이러한 의미들을 이용하면 사용자에게 더 효율적으로 지시할 수 있다. 하지만 색상에만 의존해서는 안 된다. 색약, 색맹으로 인해 색상을 보지 못하는 사용자도 고려해서 아이콘을 적극 활용해야 한다.
색약자를 위해 추가된 아이콘이지만 정상 시력을 가진 사람들에게도 시각적 앵커 역할을 해서 메시지의 시작 지점으로 시선을 집중시킬 수 있다.
기능적으로 색상 사용하기
버튼, 링크와 같이 주요 액션을 나타내는 색상의 사용에는 더욱 신중해져야 한다. 모든 요소를 강조하는 건 교과서의 모든 부분에 형광펜으로 밑줄 긋는 것과 같다. 사용자 입장에서 바라볼 때 어떤 것이 진짜 중요한지 구별하기 어려워진다.
또 직관적인 행동 유도가 안 될 수도 있다. 로그인과 회원가입 버튼에 동일한 스타일을 사용하면, 사용자는 둘 사이의 차이점을 확인하는 데에 추가적인 인지 작업을 요구받게 된다. 반면 회원가입을 로그인 버튼보다 강조한 경우에는 시선이 회원가입 버튼에 꽂힌 후 로그인으로 이동하는 시선의 흐름이 완성된다.
마치며
UI 디자인에서의 색상은 단순히 예쁘게 보이기 위한 것보다는 디자이너와 사용자 사이의 의사소통 도구다. 또 색상을 사용해서 우선순위를 설정하고, 관련 정보들을 시각적으로 연결하기도 한다. 이런 멋진 도구를 활용해서 사용성이 좋은 서비스를 만들고 싶다.
추가로
위에서 언급한 대비를 확인할 방법으로는 웹 사이트에서 직접 계산하는 방법도 있지만, Figma 플러그인을 추천하고 싶다. Contrast라는 플러그인인데, 선택한 요소나 페이지 전체를 검사해 준다. 대비 값뿐만이 아니라 APCA 알고리즘도 베타지만 지원하고 있어서 좋다. (무엇보다도 회원가입이 필요 없다.)
Contrast 링크 ⬇️
https://www.figma.com/community/plugin/748533339900865323/contrast
APCA 알고리즘이 뭔데 ⬇️
