by
Jan 10. 2024
쏘카의 MECE로운 경고등 탐색 UX
경고등, 이걸 뭐라고 표현하지?
들어가며
주행 중 차량 경고등이 갑자기 켜지면, 그 순간 당혹감에 휩싸인다. "이게 뭐지? 어떻게 해야 하지?"라는 걱정에 급히 차를 세우고 검색창을 켠다. 하지만 금세 이 경고등을 어떻게 표현해야 할지 미궁에 빠지고 만다.
"이걸 뭐라고 설명하지...?"
운전이 능숙하더라도 수 백 개의 경고등을 외울 수 없고, 이를 간과하면 차량 고장으로 이어져 사고로도 이어질 수 있다. 안전과 직결되지만 당연하게 여겨온 불편함. 쏘카는 이를 놓치지 않고 낯설고 어려운 경고등 문제를 해결하는 '경고등닷컴'을 출시했다.
이번 아티클에서는 경고등닷컴의 이미지 탐색 UX, 그리고 사용자와의 상호작용을 강화하는 브랜드 전략을 분석하고자 한다.
목차
1. Strategy : MECE로 접근하는 정보 유형화 3단계
2. Context : 직렬형 구조가 아니라서 가능한
3. Business : 운전자 관점에서 가치를 더하다
4. Metaphor : 브랜드 경험으로 이어지는 메타포
-
Strategy
MECE로 접근하는 정보 유형화 3단계
시각적인 정보는 단어의 형태로 직접 전달하기 힘든 경우가 많다. 그렇다면 글로 표현하기 어려운 경고등을 알아내려면 어떻게 해야 할까?
핵심은 MECE(상호배제 및 전체 포괄) 기법이다. 쏘카팀은 경고등 이미지가 구성된 특성을 분해하는 것에서 출발한 듯하다. 눈으로 인지 가능한 색상, 문자, 모양으로 정보를 유형화하고, 판단 용이한 기준에서 시작하여 사용자가 필요한 결과를 쉽게 찾을 수 있도록 설계되었다.
결과적으로 이 접근법은 사용자에게 직관적인 탐색 경험을 제공한다. 경고등닷컴의 정보 유형화 3단계는 이러하다.
step1. 경고등이 무슨 색인가요?
직관적으로 제일 먼저 인식할 수 있는 색상이 첫 번째 분류 기준이 된다. 경고등 색상은 차량 상태에 따라 빨강, 노랑, 파랑, 초록, 총 네 가지로 구분되어 있다. 때문에 빈틈과 중복 없는 선택지 구성이 가능하다. 누구나(면허 취득이 불가한 색각자 제외) 쉽게 판단할 수 있으니, 처음부터 심리적 부담감 없이 다음 단계로 이동할 수 있다.
step2. 경고등에 문자가 있나요?
문자의 유무, 즉 'A or not'으로 정보가 다시 나누어진다. 만약 step1에서 '빨간색' 선택지를, step2에서 '문자가 있음' 선택지를 눌렀다면, 빨간색 경고등 중 문자가 있는 경고등으로 추려지는 것이다. 사람마다 이미지인지 문자인지 판단이 다를 수 있기에, '모르겠다면 다음을 눌러 넘어가도 돼요.'라는 가이드 텍스트가 존재한다.
step3. 경고등에 어떤 모양이 있나요?
마지막으로 경고등이 어떤 모양인지 선택한다. 모양의 기준은 선별하기 어렵고 무수하다. 전 단계에 비해 복잡성이 커졌지만, 앞 단계로 인해 탐색의 폭이 좁혀졌다. 이 단계에서의 선택지로는 도로, 사람, 자동차, 느낌표, 화살표가 있으며 중복 선택도 가능하다.
TIP. 이미지 식별을 위한 단계별 MECE 기준
1. 누구도 반박할 수 없는 빈틈과 중복이 없는 그룹
(심리적 부담감 저하를 위해 판단 용이성이 큰 기준)
2. 쉽게 구분할 수 있지만 사람마다 판단이 다른 그룹
3. 세분화 기준이 복잡한 그룹
-
Context
직렬형 구조가 아니라서 가능한
경고등 탐색/검색 플로우는 일반적인 핀테크 앱처럼 여정을 세분화하면서도, 직렬형으로 순차 진행되지 않는다는 특징이 있다. 이는 주행 중 경고등을 찾아야 하는 급박한 상황을 고려한 것으로 보인다. 경고등닷컴은 이러한 긴급 상황에서 효율적인 탐색을 위해 여러 부분에서 단계를 건너뛸 수 있는 기능을 제공하고 있다.
(1) 미 선택 시에도 [다음] 버튼 활성화
정해진 단계별로 진행하지 않아도 된다는 것이 버튼 속성에도 반영되어 있다. 보통은 특정 단계에서 사용자가 액션을 취하지 않으면, [다음] 버튼이 비활성화가 유지된다. 하지만 경고등닷컴은 이 규칙에서 벗어나, step1에서 어떤 선택을 하지 않아도 다음 단계로 즉시 넘어갈 수 있다.
게다가 step2에서 선택한 결과는 다시 step1으로 돌아갔을 때 자동으로 반영된다. 그 결과 사용자는 필요에 따라 유연하게 단계 간 이동이 가능해진다. 일련의 사용자 액션 순서는 [다음] 버튼 위 태그 영역에 표시된다.
(2) [바로 확인하기] 버튼 제공
만약 step1에서 파란색을 선택한 후 [바로 확인하기] 버튼을 누르면, 파란 경고등만 분류된 페이지로 바로 넘어갈 수 있다. 현재 파란색으로 분류된 경고등은 두 개이기 때문에, 모든 탐색 단계를 거치지 않고 식별하고자 하는 경고등을 즉시 확인할 수 있다.
(3) 필터 기능
필터 역시 수많은 경고등 중 특정 조건을 선택하여 결과에 빠르게 도달할 수 있는 기능이다. 서비스에 익숙해지면 한 페이지에 다양한 선택지가 제공되더라도, 과부하를 느끼지 않고 원하는 옵션만을 선택하여 정보를 얻을 수 있다. 여기엔 필터 옵션을 취소할 수 있는 X 버튼이 있어 필터링에서 선택 해제가 가능하다.
(4) 자주 뜨는 경고등
주행 중 자주 발생하는 경고등을 정리한 메뉴를 곳곳에서 제공하고 있다. 이를 통해 사용자는 흔하게 발생하는 문제에 대한 빠른 해결책에 도달할 수 있다. 경고등닷컴의 메인 홈과 검색 페이지, 검색 결과의 Chip 등에서 자주 뜨는 경고등을 발견할 수 있다.
-
Business
운전자 관점에서 가치를 더하다
쏘카의 핵심 미션은 이동의 문제를 해결하고, 이용자 중심의 서비스를 제공하는 데에 있다. 이 미션은 경고등닷컴의 탄생으로 확장되어, 쏘카 이용자를 포함한 모든 운전자를 위한 가치 창출에 집중한다.
(1) 로그인 없이 즉시 접근 가능
웹서비스 출시로 앱 설치와 로그인의 번거로움을 제거하여, 언제든지 간편하게 서비스를 이용할 수 있도록 했다. 긴급한 상황이나 빠른 정보 획득이 필요한 순간에 신속한 대응이 가능하다. 향후 쏘카 앱이나 차량에 부착된 QR코드를 통해 경고등닷컴으로 즉시 접근할 수 있는 편리한 구좌가 마련될 것으로 기대한다.
(2) 운전자가 알고 싶은 정보 제공
차량 경고등이 켜졌을 때, 해당 경고등의 의미뿐만 아니라 발생 이유, 대처 방법에 대한 정보를 제공한다. 이 정보를 사용자가 쉽게 이해할 수 있는 쉬운 언어로 제공함으로써, 운전자가 차량의 상태를 정확히 이해하고 대처할 수 있도록 지원한다.
(3) 직관적인 이미지 사용
텍스트로 설명하면 복잡해지는 차량 내 물리 조작계는 직관적인 이미지 하나로 끝낸다. 조작계 이름을 탭/호버 하면 해당 기기의 이미지가 나타나도록 설계되어 있는데, 이미지를 활용함으로써 서비스와 사용자 간 의사소통을 더 원활하게 해 준다.
(4) 쏘카 이용 중이라면
'쏘카 이용 중이라면' 리스트에서 고객센터와의 대응 방법을 제공한다. 복잡한 전문 용어보다는 '###번 경고등'이라는 표현을 사용하여, 고객센터의 신속한 대응을 가능케 한다. 이 토글 메뉴는 기본적으로 closed 상태로 설정되어 있어 필요한 경우에만 열어서 정보를 확인할 수 있다.
-
Metaphor
브랜드 경험으로 이어지는 메타포
메타포는 복잡하거나 익숙하지 않은 것을 쉽게 설명하거나 전달하기 위해 사용한다. 경고등 자체가 어렵게 느껴질 수 있지만, 쏘카는 윈도우 메타포를 도입하여 브랜드의 감성적 가치를 더하고 사용자와의 상호작용을 강화하였다.
메타포가 브랜드 경험에 끼치는 영향
윈도우 메타포를 반영한 경고등닷컴PC에선 모바일에서는 볼 수 없는 옛날 윈도우 컨셉을 확연히 느낄 수 있다. 경고등이 주는 아날로그함과 레트로한 윈도우 느낌이 잘 어우러진다. 누군가에겐 힙해 보이고 다른 누군가에게는 친숙함과 향수를 불러일으킬 수도 있다. 메타포를 활용하여 브랜드 자체에 감성적인 가치를 부여하고, 사용자들과의 강한 정서적 연결을 이끌어내는 것 같다.
클리피, 아니 두두
클릭하면 바뀌는 두두의 유쾌한 말풍선윈도우의 에이전트인 클리피 같은 캐릭터도 존재한다. '두두'라는 이름을 가진 두더지 친구인데, 사용자에게 도움이 필요한 적절한 순간에 배치되어 길잡이 역할을 한다. '다른 경고등을 찾아볼까요?', '엔진오일 경고등은 지니가 나올 거 같아요' 등 사용자가 다음 활동을 진행하거나 학습으로 이어질 수 있도록 돕는다.
경고등 모아보기에 숨어 있는 두두 주의등