UI에서 컬러의 역할과 중요성
인간의 눈은 수많은 색을 인식하고 구별합니다. 하지만 각각의 색이 주는 느낌과 의미는 모두 다른데요. 사용자 경험과 직접적으로 연결되는 디자인을 할 때도 어떤 컬러를 어디에 사용할 지는 필수적으로 고려해야하는 요소 중 하나입니다.
컬러와 의미
하루에도 몇 십개의 새로운 어플리케이션이 출시되고 있는 요즘, 어플들은 각기 다른 브랜드 컬러를 지니고 있는 경우가 많습니다. 카카오의 노란색, 네이버의 초록색, 당근마켓의 주황색 등등... 특히 배달의 민족의 오묘한 민트 컬러는 이제 길거리에서도 많이 찾아볼 수 있습니다. 컬러는 사람이 어떤 물체를 볼 때 가장 먼저 인지하는 요소이자 가장 오래 기억에 남는 요소입니다. 그래서 브랜드 컬러는 브랜드가 나타내고 싶은 이미지를 지속적으로 사용자(또는 소비자)들에게 인지시키고 또 기억될 수 있다는 점에서 굉장히 중요한 역할을 합니다.
컬러가 갖는 의미 컬러는 어떠한 이미지와 의미를 동반합니다. 문화적으로 다른 경우도 존재합니다만, 일반적으로 빨간색은 정열, 힘, 사랑, 주의를 뜻하며 초록색은 자연, 치유를, 은행의 브랜드 컬러로 자주 사용되는 파란색은 신뢰와 평화 등을 나타냅니다. 브랜드 컬러를 지정할 때는 타겟 지역에서 컬러가 갖는 이러한 의미를 잘 고려해서 브랜드와 맞는 컬러를 선택해야 하며, 같은 색이라도 채도와 명도에 따라 다른 느낌을 줄 수 있기 때문에 적절히 고려해 사용합니다.
UI에서 컬러의 역할
그렇다면 UI에서 컬러가 하는 역할은 무엇일까요?
UI에서 컬러는 브랜드 이미지를 전달하기도 하지만, 해당 요소의 중요도와 상태를 나타내는 역할을 합니다. 이 때 앞에서 언급한 컬러가 갖는 관습적인 의미를 잘 활용해야 합니다.
중요도 나타내기
강조하고 싶은 버튼에는 눈에 띄는 컬러 또는 브랜드 컬러를 사용합니다. 사진에서 보이는 것처럼 컬러는 중요도를 나타내기 편리합니다. 강조하고 싶거나 사용자가 누르게 하고 싶은 요소에 눈에 띄는 컬러(보통은 브랜드 컬러나 프라이머리 컬러)를 사용하고, 나머지 요소는 채도가 빠진 그레이 컬러나 또는 세컨더리(secondary) 컬러를 사용함으로써 요소 간의 중요도를 확실하게 표시합니다. 이처럼 컬러만 제대로 사용해도 사용자를 원하는 방향으로 이끌 수 있습니다.
상태(state) 나타내기
UI 컴포넌트는 사용자와의 인터랙션을 보여주기 위해 다양한 상태를 갖습니다.
tmi) 당시 작업의 primary 컬러가 오렌지였습니다. 예시로 텍스트필드를 들어볼게요. 텍스트필드는 비어있는 상태도 있어야하고, 유저가 입력 중인 포커스 상태도 있어야 하며, 입력을 끝낸 상태와 오류를 알리는 상태도 필요합니다. 이런 상태 구분이 없다면 사용자는 제대로 작동하고 있는 건지 알 수가 없겠죠. 이처럼 컴포넌트의 상태가 변화하는 것은 사용자들이 잘 인지하지 못하지만 사용자의 액션에 반응한다는 것을 즉각적으로 보여줌으로써 사용성에 있어 큰 부분을 차지합니다.
이렇게 컴포넌트마다 갖는 다양한 상태를 나타내기에 컬러가 중요한 역할을 합니다. 위 사진만 보더라도 다양한 컬러가 사용되었습니다. 비어있는 상태를 나타내기 위해서 그레이 컬러가 메인으로 사용되었고, 입력 중인 포커스 상태에서는 텍스트필드가 활성화되어 있다는 것을 나타내기 위해 프라이머리 컬러와 함께 좀 더 짙은 그레이 컬러를 사용했습니다. 입력이 끝난 후에는 가장 짙은 그레이를 사용해 입력되었고 수정이 가능하다는 것을 표시했습니다.
스낵바(snackbar)도 마찬가지입니다. 일반적인 스낵바 특성 상 잠시 나타났다가 사라지므로 컬러로 요청한 정보가 어떻게 처리되었는 지에 대한 상태 또는 결과를 나타내기 위해서는 텍스트보다 시각적으로 먼저 인지되는 컬러를 이용하는 것이 좋습니다.
예시 사진이 약간은 극단적이지만, UI 디자인 시에는 무엇보다 컬러의 관습적 의미를 잘 활용해야 한다는 것을 표현하고 싶었습니다. 일반적으로 우리는 초록색은 긍정을, 빨간색은 부정이라고 판단합니다. 그런데 만약 '실패'에 초록색이 사용된다면 어떨까요?
실패해도 괜찮습니다. 실패=성공의 어머니 텍스트 앞에 사용된 아이콘 덕분에 그렇게 심각해보이진 않습니다만, 실패가 달갑지도 싫지도 않은 뜻드미지근한 상태처럼 보이는 것은 피할 수 없네요. 이처럼 관습적 의미를 벗어나 아무렇게나 사용된 컬러는 사용자를 혼란에 빠뜨릴 수 있으니 주의해야 합니다.
그레이 컬러를 잘못 사용한 경우
앞서 얘기한 긍정과 부정의 컬러 사용보다 좀 더 까다로운 것이 그레이 컬러를 사용하는 것입니다. 그래서인지 그레이를 잘못 사용한 경우는 꽤나 자주 찾아볼 수 있었는데요. 제가 최근에 마주한 두 가지 서비스를 함께 살펴 보고자 합니다.
카카오에서 이런 실수를...
카카오 QR 체크인 전화번호 인증 화면첫번째 예시는 카카오톡에서 QR 체크인을 위해 전화번호를 인증하는 화면입니다. 브런치에 글을 쓰면서 카카오의 UX에 대해 논하는 것이 조금은 아이러니하지만... 더 나은 UX를 위해 힘쓴다면 카카오는 저를 채용하시는 것도 괜찮을 것 같습니다.
아무튼 여기서 혼란스러웠던 부분은 '전화번호를 확인해 주세요.'라는 문구와 함께 나타난 텍스트필드 때문입니다. 전화번호를 확인해달라는 문구로 인해 전화번호를 입력하거나 수정하기 위해 비어있는 텍스트필드를 클릭합니다. 그런데 이 텍스트필드는 입력을 요구하는 텍스트필드가 아니었어요. 옅은 그레이 컬러의 플레이스홀더인줄 알았는데 disabled 상태였습니다. 심지어 아래 인증번호를 입력하는 텍스트필드가 비어있을 때와 동일한 형태라 전화번호를 입력하려고 몇 번이나 클릭하고 나서야 이게 disabled이고 입력할 필요가 없다는 것을 깨달았어요. 전화번호 입력이 필요없기 때문에 이미 가지고 있는 정보를 보여준다는 점에서 disabled 상태를 표현하기 위해 저런 형태의 UI가 나온 것 같은데, 디자이너로서 고찰해보면 이해는 되지만 사용자는 그렇지 않겠죠.
어떻게 개선할 수 있을까
전화번호를 입력할 필요가 없다면, disabled가 아닌 입력한 인증번호가 표시되는 것과 같은 형태의 텍스트필드를 사용한다.
전화번호를 확인하라는 문구 대신 인증번호를 입력하라는 문구로 변경한다.
에어서울 모바일 체크인
드롭다운 메뉴의 상태 변화다음 예시는 에어서울 모바일 체크인 화면입니다. 드롭다운(dropdown) 메뉴인데요. 체크인을 하거나 취소, 좌석변경 등이 가능한 중요한 메뉴인 것과 다르게 전혀 중요해보이지 않게 디자인된 것을 살펴볼 수 있습니다.
배경색과 너무 비슷한 스케일의 그레이 컬러를 텍스트와 스트로크 모두에 적용해놓아 배경색과 구분도 안될 뿐더러 클릭할 수 없는 disabled 상태로 보이기까지 합니다. 이런 디자인은 UI 요소 간의 중요도를 고려하지 않았기 때문에 다른 정보와의 위계도 흐트려 사용자를 혼랍스럽게 합니다. 탑승정보를 입력하고 확인 버튼을 눌렀는데 무엇을 해야할 지 몰라 꽤 헤맸어요. 게다가 '선택'이라는 버튼때문에 드롭다운을 눌러야할 지 '선택' 버튼을 눌러야할 지도 헷갈렸습니다.
이처럼 그레이 컬러는 깔끔하고 무난한 이미지를 줄 수 있지만 사용할 때는 다른 정보와의 위계를 흐트리진 않는 지, 가시성 등 고려해야할 것이 많습니다.
어떻게 개선할 수 있을까
드롭다운의 배경색을 흰색(#ffffff)으로 변경하고, 스트로크에 사용된 그레이 컬러의 명도를 낮춘다.
'선택' 버튼을 '확인' 또는 '완료'로 변경하고 버튼 컬러를 변경한다.
지금까지 UI와 컬러에 대한 내용을 쓰면서 컬러가 잘못 사용된 경우도 함께 살펴보고 해결 방안을 모색해보았습니다. 특히 그레이 컬러는 UI와 떼놓을 수 없는 컬러지만 그만큼 주의해서 신중히 사용해야 할 것 같습니다.
