2024-01-11

어렵고 복잡한 경고등, 디자이너들이 해결하다!

안전한 운전 생활을 위해, 쏘카의 경고등닷컴

운전자라면 갑자기 경고등이 떠서 당황한 기억이 한 번은 있을 것이다. 운전 중에 모르는 경고등에 불이 들어오면 사고 날 정도로 위험한 상황은 아닌지 긴장하게 된다. 어떻게 잘 아냐고? 에디터의 경험담이다.

온라인 내 자동차 커뮤니티에는 에디터와 비슷한 경험을 한 동지들이 수두룩하다. 처음 보는 경고등에 놀라고, 이 경고등이 무슨 뜻인지 몰라 사진을 찍어서 물어본다. 그나마 사진은 알아보기 쉽다. 경고등의 모양을 설명한 글을 보고 있으면 대체 무슨 말인지 모르겠다. 만약, 이와 같은 경험을 한 사람이 있다면 답답했던 속을 시원하게 풀어주겠다. 이 의사소통의 어긋남은 당신의 잘못이 아니다.

경고등이 차종과 제조사별로 다른 것이 ‘진짜’ 문제다. 게다가 우리가 살면서 다 마주할 수 없을 정도로 경고등의 종류가 많다는 점도 문제다. 그렇기에 모든 경고등을 다 알 필요는 없다. 하지만 안전한 운전 생활을 위해선 경고등이 떴을 때 제때 해결해야 한다. 모든 사람이 자유롭게 이동하는 세상을 꿈꾸는 ‘쏘카’는 경고등에 대한 운전자의 고민을 해결하고 편리한 운전을 돕기 위해 경고등의 모든 정보를 망라한, 경고등의 지식인 격인 ‘경고등닷컴(https://경고등.com)’을 오픈했다.

경고등닷컴은 PC와 모바일 모두 접속할 수 있어요

Interview with

쏘카 아이덴티티디자인팀 김지혜 디자이너 &

브랜드디자인팀 김수현 디자이너

─ 카셰어링 서비스가 메인인 쏘카가 경고등닷컴을 기획한 계기가 있나요?

김지혜: 쏘카는 모빌리티 서비스인만큼 안전과 뗄레야 뗄 수 없는 관계인 것 같아요. 그래서 저희는 실제 안전 운전에 도움을 드릴 수 있는 서비스를 만들고 싶었어요. 이왕이면 쏘카 이용자뿐 아니라 전체 운전자에게 도움이 되면 좋겠다고 생각했고요. 저 또한 에디터님처럼 경고등 때문에 당황한 기억이 몇 번 있거든요.

─ 안전과 관련된 기능 중에서 왜 경고등에 초점을 맞췄나요?

김지혜: 아이템을 조사하던 중, 수현님이 유명 유튜버의 에피소드를 봤어요. 차를 잘 아는데도 모르는 경고등이 떠서 고생했다는 이야기였죠. 생각해 보니까 저희도 경고등에 대한 정보를 찾느라 고생한 경험이 한 번은 있더라고요. 또, 온라인 커뮤니티에 경고등을 물어보는 글이 생각보다 많은 걸 보고 경고등으로 고생하는 사람이 많은 것에 비해 믿을만한 정보를 제공하는 콘텐츠가 없다는 걸 알았어요.

─ 경고등닷컴은 브랜드 디자인이 아닌 서비스인데요. 이를 브랜드디자인팀에서 기획부터 제작까지 담당한 이유는 뭔가요?

김지혜: 일반적으로 마케터가 서비스나 이벤트를 기획하면, 디자이너와 개발자가 함께 작업하는 방식으로 이뤄져요. 그런데 작년 초부터 색다르게 일해보자는 취지로 디자이너가 주도하는 프로젝트를 시작했어요. 디자이너의 시각으로 바라보면 새로운 문제점을 발견하고 해결할 수 있지 않을까 해서요. 실제로 쏘카의 디자이너들은 어떻게 하면 쏘카를 일상 속에서 더 자주 마주하게 할 수 있을지 계속 고민하는데요. 이런 고민들이 모여서 경고등닷컴처럼 쏘카 이용자는 물론, 모든 운전자에게 도움이 되는 서비스가 나올 수 있었던 것 같아요.

─ 브랜드 디자인과 웹 디자인은 다른 영역인데, 왜 최종 결과물을 웹 사이트로 만들었나요?

김수현: 말씀처럼 브랜드 디자이너는 웹 사이트를 기획하고 디자인할 일이 없기 때문에 저희에겐 어려운 도전이었어요. 사실, 브랜드디자인팀의 강점을 활용한 결과물을 만들 수도 있었지만, 운전자에게 실질적인 도움이 되기 위해서는 접근이 쉬운 웹 사이트로 만들어야 한다고 판단했죠. 웹 기획부터 제작까지 모두 저희의 전문 분야가 아니었기 때문에 쉽지 않았는데요. 회사 내부의 프로덕트 팀에게 물어가면서 완성할 수 있었어요. 지금은 잘한 선택이라고 생각해요.

경고등닷컴의 두 가지 화면 시안. 사전 스타일(왼) VS 초기 인터넷 스타일(오). 후자가 선택되었습니다. ​

─ 디자이너의 시각이 오롯이 담겨서 그럴까요? 초기 인터넷 스타일의 화면 디자인이 눈에 띄어요.

김지혜: 경고등닷컴은 경고등의 정보를 총망라한, 일종의 경고등 웹 사전과 같은 개념이라고 생각했어요. 그래서 웹 사이트의 이름도 직관적으로 ‘경고등닷컴’이라고 지었고요. 이름의 ‘닷컴(.com)’은 대표적인 도메인 주소이지만, 천리안이나 누리안같이 인터넷이 보편화되던 시대를 떠오르게 해요. 이 특이점에서 영감을 얻어 1990년대 인터넷의 향수를 불러일으키는 그래픽 스타일로 디자인했어요.

─ 경고등닷컴을 마주했을 때, 세대마다 느끼는 감정이 다를 것 같아요.

김지혜: 내부 직원들을 대상으로 그래픽 스타일에 대한 사용자 테스트를 했는데, 확실히 윈도우98을 경험해 본 세대는 공감하면서 재미를 느끼더라고요. 그와 달리 20대는 어색해하면서도 잘 정리된 디자인에서 신뢰도가 느껴진다는 의견을 줬어요.

김수현: 원래 두 가지 디자인 시안이 있었어요. 하나는 지금의 윈도우98 스타일의 그래픽이었고, 다른 하나는 사전처럼 정보를 깔끔하게 정리한 그래픽 스타일이었어요. 하지만 경고등닷컴의 키포인트는 ‘검색창’이라고 생각했기에 최종적으로 검색창을 강조하는 그래픽인 전자를 선택했어요. 또, 사전과 같은 그래픽 스타일은 자칫 잘못하면 경고등닷컴의 첫인상을 딱딱하게 만들 수 있다는 생각이 들었어요.

저만 따라오세요! 경고등닷컴의 마스코트, 두두입니다.

─ 경고등닷컴이 친근하게 다가오는 이유 중 하나는 캐릭터라고 생각해요. 두두라는 캐릭터가 친절하게 사용법을 안내하더라고요.

김지혜: 경고등닷컴은 경고등에 관한 정보를 전달하는 사이트인 만큼 어렵거나 무겁게 느껴질 수 있겠다고 생각했어요. 특히 초보운전자인 경우, 경고등이 떠서 불안한데 문제를 해결하고자 접속한 웹 사이트마저 경직된 분위기라면 정보가 눈에 들어오지 않을 것 같았죠. 그런 경험이 쌓이면 결국 사이트 이용을 꺼릴 거고요. 그래서 사용자의 긴장을 풀어주기 위해 사람들이 친근하게 느끼는 동물 캐릭터를 안내원으로 활용하기로 했습니다.

─ 두두를 보면 윈도우에서 검색할 때 등장했던 강아지가 생각나요. 두두는 어떤 캐릭터인가요?

김지혜: 두두는 두더지예요. 두더지가 땅속을 빠르고 깊게 디깅한다는 점에서 착안해서 수많은 경고등 중에서 사용자가 궁금해하는 단 하나의 경고등을 빠르게 찾아준다는 의미로 두더지를 선택했어요. 그리고 당황한 사용자에게 믿음을 줄 수 있게 안경을 씌워 똑똑하게 보이도록 했어요. 원래 두더지의 눈은 작은데 안경 때문에 두두의 눈이 엄청 커졌어요. 더 똘똘해 보이지 않나요?

김수현: 사용자에게 더 친근하게 다가가기 위해서 소소한 재미를 넣었는데요. 팁을 하나 드리면 메인 화면에 등장한 두두를 클릭하면 멘트가 바뀌어요. 꼭 한 번 해보세요.

쏘카 브랜드 디자이너들은 각자 경고등을 보고 떠오르는 단어를 적고, 그 안에서 공통된 단어를 찾았다.

─ 현재 경고등닷컴에는 몇 개의 경고등이 등록되어 있나요?

김수현: 270개가 넘는 경고등이 등록되어 있어요. 앞으로 틈틈이 더 추가할 예정이에요.

─ 270개라니! 이 많은 경고등을 어떻게 조사했나요?

김수현: 처음에는 해외 학술지를 보면서 경고등 종류를 정리했어요. 그런데 국내에선 이용하지 않는 해외 및 대형 차종의 경고등에 관한 정보가 많았어요. 운전자에게 실질적인 도움을 주기 위해서는 국내에서 자주 이용하는 차종과 국내 제조사에서 제공하는 경고등이 필요했어요. 그래서 국내 제조사에서 나온 안내서를 참고하고, 쏘카 내부 인력의 도움을 받으면서 데이터를 최대한 많이 수집했습니다.

─ 270개가 넘는 경고등을 분류한 기준과 방법도 궁금해요.

김수현: 경고등의 모양은 제조사, 차종별로 조금씩 달라요. 그래서 내부 워크숍을 통해 각 경고등에 태그를 붙이는 작업을 하면서 공통점을 찾았어요. 경고등을 보고 생각나는 단어를 하나씩 붙이고, 그중 공통되는 단어를 정리하고 카테고리를 나눴죠. 사람마다 다르게 해석하는 경고등에서 공통점을 찾고, 직관적으로 매칭되는 단어를 찾는 과정이 어려웠어요.

─ 경고등의 모양과 의미가 통일되지 않았다는 점이 운전자를 헷갈리게 만드는 가장 큰 원인이네요.

김수현: 명칭은 동일한데 모양이 다르게 생기거나, 의미가 다른데 명칭이 비슷한 경우도 있었어요. 또, 경고등이 지시하는 의미가 조금씩 다른 경우도 많았고요. 한편으론 창의적으로 해석한 경고등도 많아서 재미있었어요.

통일성 있는 경고등 모양을 위해 270개가 넘는 경고등을 하나, 하나 다듬었습니다.

─ 모양이 각기 다른 경고등을 통일성 있게 다듬었다고 들었어요.

김지혜: 제조사마다 선의 굵기, 비율, 서체 등이 달라서 이를 통일성 있게 다듬는 과정이 필요했어요. 만약 저희가 새롭게 디자인하면 차량 내 경고등과 사이트 내 경고등 모양이 다르게 보여서 운전자가 두 경고등을 일치시킬 수 없기 때문에 최소 규정만 정해두고 모양을 다듬었어요.

─ 경고등을 다듬는 과정에서 무엇을 제일 중요하게 생각했나요?

김지혜: 기존 형태를 많이 해치지 않고 가독성을 높이는 데 중점을 뒀어요. 그래서 속공간을 일정하게 다듬고, 크기를 동일한 비율로 맞췄어요. 또, 서체를 통일해서 시인성을 높였고요.

경고등이 떴나요? 검색 3단계를 거치면 찾을 수 있습니다!

─ 경고등닷컴은 무엇보다 검색 기능이 매우 중요한 서비스예요. 사용해 보니 색-문자의 유무-경고등의 모양 순으로 검색할 수 있더라고요.

김수현: 사용자가 경고등을 쉽고 빠르게 찾을 수 있도록 직관적으로 인지할 수 있는 정보 순서로 검색을 구성했어요. 또, 객관적으로 답변할 수 있는 정보인지도 고려했고요. 색과 문자의 유무는 깊이 생각하지 않아도 바로 답할 수 있으니까요.

─ 검색의 마지막 단계에서는 경고등에 사용된 몇 가지의 모양을 제시했고, 검색 필터에서도 다양한 모양이 분류되어 있어요. 이 모양은 어떻게 선별했나요?

김수현: 경고등에서 가장 많이 사용되는 모양 중에서 사용자가 쉽게 필터링할 수 있는 모양을 선별했어요. 예를 들면 사람, 화살표, 자동차와 같이 세계가 공통으로 사용하는 아이콘 형태를 우선적으로 선별하고, 자주 뜨는 경고등에 반복적으로 등장하는 모양도 포함했어요. 한편, 모양의 변형이 자유롭거나, 해석의 여지가 많은 모양은 최대한 제외했습니다.

보다 다양하고 빠른 검색을 위해 필터 기능의 정밀도와 결과의 정확도에 집중했습니다.

─ 메인 화면에 검색창과 함께 자주 뜨는 경고등을 노출했어요. 급할 땐 매우 유용하겠더라고요.

김지혜: 검색창만 남길지 고민도 했지만, 사용자에게 도움이 되는 걸 1순위로 생각했어요. 불가피하게 쏘카 이용 중에도 경고등이 뜰 때가 가끔 있어요. 이럴 때, 이용자는 쏘카 CS팀에 문의하는데요. 전화로 소통하기 때문에 이용자는 경고등을 설명하느라 힘들고, CS팀은 이용자의 설명을 정확하게 알아듣기가 어렵다는 점이 문제였어요. 때로는 정말 쉬운 문제인데 커뮤니케이션 오류로 해결 시간이 배로 걸리는 경우도 있었고요. 그래서 CS팀과 논의하여 자주 문의하는 경고등을 정리했고, 그를 검색 첫 화면에 띄워서 사용자가 바로 볼 수 있도록 했어요.

─ 경고등은 안전과 직결되기 때문에 빠른 검색과 정확한 해결 방법의 제시가 중요하죠.

김수현: 그래서 경고등 상세 페이지 하단에 ‘쏘카 이용 중이라면’이라는 탭을 두었어요. 일반 운전자와 쏘카 이용자는 상황이 다르기 때문에 그를 고려한 장치가 필요했거든요. 또, 경고등닷컴의 내용을 바탕으로 가이드북을 만들어서 CS팀에 배포했어요. 앞으로 경고등 관련 문의를 하면 경고등닷컴으로 편하게 소통할 수 있게요.

명칭부터 뜻, 해결방법, 쏘카 이용자를 위한 꿀팁까지! 경고등의 백과사전!

─ 경고등닷컴이 전국의 운전자들에게 어떤 서비스가 되었으면 하나요?

김지혜: 긴급 상황에 119를 떠올리는 것처럼 경고등이 뜨면 바로 경고등닷컴이 생각났으면 좋겠어요. 경고등닷컴이 경고등에 관한 모든 정보를 알려드릴 테니 경고등이 뜨면 당황하지 말고 경고등닷컴을 찾아주세요.

김수현: 급하게 필요할 때 제일 먼저 떠오르고, 운전자의 불안감이 해소되는 사이트가 되었으면 해요. 쏘카는 차가 없어도, 차에 관한 전문지식이 높지 않아도 누구나 안전하게 운전할 수 있는 세상을 바라요. 차에 관한 전문 지식은 경고등닷컴과 같은 서비스에서 얻으면 되니까 모두 자신 있게 운전하세요.

허영은 객원 기자

취재 협조 및 자료 제공 쏘카 브랜드그룹

허영은
다양성이 세상을 아름답게 만든다고 믿는다. 그래서 숨겨진 이야기들을 찾아내서 보고, 듣고, 읽고 쓴다.

콘텐츠가 유용하셨나요?

0.0

Discover More
어렵고 복잡한 경고등, 디자이너들이 해결하다!

SHARE

공유 창 닫기
주소 복사