UX측면에서 잘 만들어진 B2C사례: 6부, 테슬라의 경험디자인

시장에는 많은 자동차 및 소프트웨어 서비스가 있습니다. 개인적으로 벤츠의 클러스터 시동 시나리오 경험이 가장 아름답고 감동을 느끼며, 재규어 AVN[1]스크린의 디자인도 훌륭하다고 생각합니다. 또한 구글과 애플에서도 안드로이드 오토와 애플 카플레이의 UXUI가 친숙하게 느껴집니다.

그렇지만 ‘전기차’와 ‘자율주행’하면 가장 먼저 떠오르는 회사는 역시 테슬라입니다. 여러 불안한 예측과 전망, 그리고 대표인 일론 머스크의 기행에도 불구하고 끊임없이 성장하고 있습니다. 덩달아 테슬라의 충성 고객들은 ‘테슬라 터치스크린의 사용 경험’에 대해 찬사를 보내고 있습니다. 과연 그 이유는 무엇일까요? 오늘은 테슬라를 UX 측면에서 분해해보는 시간을 가져보겠습니다.

목차

0. Cockpit, 복잡한 시스템과 사용자 경험

1. Futuristic Design, 실험적인 인터페이스 

2. That’s Fun,007 이스터 에그와 숨겨진 기능들

3. Customized,디테일한 사용자 맞춤형 설정

4. At a glance, 운전 경험을 반영한 인터페이스

칵핏은 운전석 조종석을 뜻하는 영어 단어로 옛날 범선 시절 방향타를 조작하던 곳을 뜻하던 말이었습니다. 지금은 자동차, 기차, 지하철, 비행기, 배 등 조종석이 있는 여러 탈것을 조정하는 곳으로 쓰입니다. 중요한 곳이기 때문에 항상 최첨단 기술을 적용해 왔으며, 전기차 시장이 커져가면서 신기술을 뽐내는 장소로 바뀌어 왔습니다.

한창 자동차 사용자 경험에 빠져있을 때 지인과 그런 얘기를 한 적이 있었죠. 사용성 측면에서 편리한 관점으로 본다면 현재의 운전대보다 게임의 콘솔 형태가 더 편하지 않겠냐고. 그렇지만 운전의 세계는 사용성 측면에서만 발전하지 않았습니다. 대중이 익숙해질 만한 시간이 필요해서일까요? 현재로선 그 밖의 이유는 떠오르지 않습니다. UI의 그림을 제대로 그리고 어렵고 복잡한 시스템을 제대로 설계할 수 있는 것. 바로 이 타이밍에 UX 측면으로 잘 설계된 것에 대한 유무를 판별할 수 있습니다.

*복잡한 시스템을 디자인한다는 것

각종 자동차 모터쇼에서 보는 많은 콘셉트카와 디자인 사이트에 올려져 있는 멋있는 디자인 목업 이미지들. 눈에 보이는 디자인처럼 미니멀하고 심플하게, 또는 화려하게 상용 제품이 만들어지면 얼마나 좋을까요. 그러나 프로젝트가 커지고, 점차 이해관계가 많아지면서 초기의 멋진 디자인은 사라지고 결국 특별할 것 없는 느낌의 제품이 완성됩니다. 왜 이렇게 되는 걸까요? 바로 전달할 기능과 정보들이 많아져서 그렇습니다.

멋진 디자인을 고수하기 위해서는 복잡한 UI의 정보 요소와 기능을 체계적으로 정리하고 버릴 수 있는 용기와 버리기로 선별한 것을 상위 관계자나 고객에게 말할 수 있는 설득력이 필요합니다. 특히 복잡함을 줄이는 한 가지 팁은 UI를 그룹 별로 구조화를 하는 일입니다. UI의 구조감에 대해 혹시 들어보셨나요? UI 요소는 아무 곳이나 배치하는 것이 아닙니다. 모듈화하여 상위 체계 안에 하위 요소들을 적절하게 배치하여 사용자가 이해하기 쉽게 만드는 일입니다. 기능을 효과적으로 배열하여 인지성이 높고, 친밀함이 높은 인터페이스를 개발하여 사용자의 부담감을 덜어줄 필요가 있습니다.

1. Futuristic Design, 실험적 인터페이스

1-1. Autopilot, 선행 인터페이스

최근 테슬라는 AI데이에서 자동차를 ‘살아있는 사람’에 비유했습니다. 2D가 아닌 4D 이미지를 전달하고, 사람의 신경망과 유사한 카메라 기능을 가지고 있고, 실시간으로 정보를 제공하는 내비게이션이 테슬라 전기차 시리즈의 특징입니다. 그 밖에도 172cm, 57kg의 테슬라 봇을 공개했는데, 이 로봇은 짐을 실어 올리는 등 누구나 하기 싫은 단순 작업을 대체함으로써 인건비를 줄이고, 인간이 보다 생산적인 일에 집중하는 데 도움을 줄 것이라고 발표했습니다.

오토 파일럿[2].에 대한 많은 의심의 눈초리와 비판이 있지만, 타사에서는 선행 과제에나 나오는 듯한 미래 지향적인 UX 디자인이 테슬라에서는 오래전부터 적용되어 상용화되고 있었습니다. 6년 전에 처음 접한 테슬라 화면은, 이전의 클래식한 자동차의 화면과 분명 달랐고 마치 스마트폰이나 태블릿 UI같이 느껴졌습니다. 단순한 스타일 가이드에서 더 나아가 사용자 경험이 잘 녹여져 있습니다. 애플의 미니멀한 UI와 전기 자동차 사용자 경험이 적절하게 사용된 느낌이 들었습니다.

*참조 : 자율주행 단계 이해하기: https://yozm.wishket.com/magazine/detail/622/

테슬라 AI데이 https://www.youtube.com/watch?v=Ah-TMrKSvic&t=116s

1-2. Sustainable Design, 탄소 배출권[3]과 에너지 절감

탄소 배출권을 양도하는 사업이 테슬라의 주요 BM 중에 하나였다는 것을 알고 계십니까? 미국뿐만 아니라 한국에서도 이런 탄소 배출 관련 규제와 실행되고 있습니다. 전기 배터리 방전으로 테슬라 차 안에 갇혀 있다 구출된 뉴스도 가끔 접하게 되지만, 디젤 규제와 더불어 전기 자동차가 미래로 나아가는 지점에 서 있음을 누구도 부인할 수 없는 사실입니다.

2. That’s Fun, 007 이스터 에그와 숨겨진 기능들

유머는 보통 여유 있는 사람에게서 나올 수 있습니다. 동양에서는 무재칠보시에 ‘화안시’라는 말이 있습니다. ‘따뜻한 미소를 지으며 부드럽고 공손하게 사람을 대하라’라는 뜻입니다. 웃는 얼굴이 상대에게 할 수 있는 최고의 보시, 즉 배려라는 겁니다. 테슬라에는 다소 장난스럽지만, 유머스러운 기능이라고 할 수 있는 몇 가지 모드와 기능이 있습니다. 자동차를 운전할 때는 안전 운전, 교통사고, 주의 산만 등으로 긴장하기 마련인데, 이런 기능을 통해 운전자의 긴장감을 풀어줄 수 있을 것입니다.

2-1. 이스터 에그

007을 입력하면, 제임스 본드 007에서 출연 한 선박이 화면에 노출된다고 합니다. 아쉽게도 추가 기능은 없고, 무드만 느낄 수 있지만! 그래도 재미있습니다. 그 밖에도 신나는 크리스마스 파티, 루디 클로스 모드, 무지개 도로를 달리는 마리오 카트 모드가 있습니다. 충전 중 충전기의 버튼을 10번 누르면 충전 단자에 여러 색의 LED가 점등되는 것도 충전 중에 경험해 볼 수 있습니다. 

참조: https://www.thegear.kr/news/articleView.html?idxno=11823

2-2. Dog mode

사용자 시나리오를 확인해 보려면 Tesla 유튜브 공식 계정을 찾아보세요! 정차 중 차 안에 강아지만 있을 때 사진과 같은 모드를 제공하고 있습니다.

*참조: Dog mode: https://www.youtube.com/watch?v=T2rbdMlmpYY

*자동차에 기능이 많은 것이 최선일까?

자동차의 기능만 보았을 때, 일본 차들이 단연 독보적으로 많습니다. 정말 혀를 내두를 정도로 그 기능이 세분화되어 있습니다. 예컨대 storage 관련한 부분만 봐도 장애인을 위한 서비스도 얼마나 많은 기능을 제공하고 있는지 알 수 있습니다. 하지만 운전할 때 그 수많은 기능이 과연 필요할까요? 자동차 기능의 사용 빈도를 체크하고 우선순위의 경중을 가려내어 가능한 운전자가 집중할 수 있게 정리하는 일 역시 사용자 경험 디자이너의 몫입니다.

3. Customized, 디테일한 사용자 맞춤형 설정

3-1. Driver profiles & 맞춤형 서비스

자동차는 재산세에 포함될 만큼, 고가의 제품군에 해당됩니다. 따라서, 스마트폰처럼 한 사람당 1대를 사용하는 퍼스널 기기가 아닙니다. 가족들이 함께 쓰는 경우도 많기 때문에 운전자의 상태에 따른 맞춤형 서비스 제공이 필요합니다. 매번 설정하는 것은 번거로운 일이기 때문에 운전자를 등록하고, 운전자의 취향과 사이즈에 맞는 운전 시트 설정과 운전대 높이, 사이드 미러(wing mirror) 조정 등이 이루어집니다. 테슬라는 모델 3 이전 버전에서도 이런 서비스를 계속 제공하고 있습니다. 지금은 타사 소프트웨어에서도 쉽게 볼 수 있지만, 6년 전에 이 기능을 알았을 때는 무척 새롭게 느껴졌습니다.

참조: https://www.youtube.com/watch?v=tS-GZnKOxaE

3-2. 디테일의 차이가 명품을 만든다 - 테슬라 모델3의 환경 설정

타사에 비해 한 층 더 섬세한 맞춤형 설정 기능 제공으로 호평을 받고 있습니다. 에어컨 설정은 온도, 세기뿐만 아니라 취향에 맞게 방향을 설정하는 등 더 촘촘하게 맞춤 설정이 가능합니다. 속도 제한 모드를 설정한 경우, 해당 속도 지점이 되면, 액셀을 밟아도 속도가 늘어나지 않습니다. 이러한 섬세한 사용 시나리오 설계는 사용자를 감동시킵니다.

출근 시간에 내비게이션의 자동 내비게이션 토글 버튼을 켜 두면, 내비게이션은 자동으로 직장을 목적지로 안내합니다. 더불어 현 충전 상태로 원거리인 목적지에 도착할 수 없다고 판단하면, 자동으로 슈퍼 차지가 가능한 정류장을 안내합니다.

테슬라 앱에서는 특정 속도 제한과 음성인식 기능, autopilot 기능을 원격으로 조정할 수 있습니다. 테슬라 앱으로 위치 정보를 탑승 전 보내주어 차에 타면 목적지 입력 없이 바로 경로 안내가 이루어짐으로 탑승 후 목적지 설정 단계를 건너뛸 수 있습니다. 충전 중에는 앱을 이용해 충전하고 싶은 배터리의 양을 간단하게 설정 가능합니다.

3-3. 테슬라 모델3의 가이드 화면과 애니메이션

테슬라의 도움말과 사용 매뉴얼은 이해하기 쉽게 써져있습니다. 특히, 화면 속 동작 가이드에는 적절한 애니메이션이 적용되어 있습니다. 미니멀한 디자인에 기계의 동작 방향과 각도를 그려 주의사항에 대한 사용 학습이 쉽게끔 제작되었습니다. 

*인터렉션 디자인이란?

인터랙션 디자인은 인간이 제품이나 서비스를 사용하면서 상호작용을 쉽게 할 수 있는 디자인을 말합니다. 기술이 진화하고 기계가 보다 정교해질수록 제품에 대한 이해와 사용 방법과 더불어 만족감, 즐거움까지 전달할 수 있습니다. 사용자 만족감과 즐거움을 극대화하기 위해서 인터렉션 디자인에 감성적인 요소를 가미할 필요가 있습니다. 

4. At a glance, 운전 경험을 반영한 인터페이스

4-1. 운전자 시야에 가까운 테슬라 디스플레이 영역

 운전석과 가까운 영역에 운전 중 화면이 제공되고 있습니다. 이는, 운전자의 시야에 가장 잘 들어오는 위치에 조절 가능한 영역을 배치하여 운전 중 주의 분산을 최소화하기 위함입니다. 기타 AVN 영역과 현 자동차의 배터리 상황을 화면 좌측에 위치합니다. 

4-2. 중복 레이어 노출과 효과적 화면 배치

한 화면에 많은 정보와 기능을 담아내어 디자인을 할 때가 진정으로 UX의 역량을 보여 줄 때라고 생각하는데요. 테슬라의 사례를 보면 한 화면에 여러 서비스를 적절하게 중복하여 내비게이션 사용 경험과 동시에 제공하고 있습니다. 이전의 운전 경험을 방해하지 않도록 모니터 아래에 Half layer 형태로 노출되고 있습니다. 

4-3. 테슬라 모델3의 업데이트 기능

자동차 내 순정 내비게이션과 AVN은 통상적으로 업데이트가 느려 커넥티비티(음악 및 미디어 스트리밍, 실시간 교통 정보 등 데이터를 통해 이용 가능한 정보) 기능이 발전하게 되었습니다. 따라서 UX 콘셉트 도출을 위한 리서치 시, 커넥티비티는 주요 카테고리였습니다. 반면 테슬라는 소프트웨어의 업데이트가 매달 신속하게 이루어지는 장점이 있습니다.

4-4. 안전 주행을 위한 Wi-Fi기능

언뜻 보기에 친숙한 모바일 스마트폰의 UI 같지만, 가운데 T자를 선택 시, 쉽게 Wi-Fi 조절이 가능하게 만들었습니다. 그리고 운전 중에는 Wi-Fi가 중지됨으로써 안전 운전을 돕습니다.

SUMMARY

• 한 눈에 파악하기 쉬운 선행적인, 실험적인 화면을 제공한다
• 숨은 그림 찾기처럼 히든 기능을 제공하여, 사용자의 즐거움을 높인다.
• 한 스푼 더 디테일한 환경 설정은 사용자에게 차별화된 만족감을 선사한다
• 운전 중 조절이 필요한 기능과 주행 모드 영역은 운전자석에 가깝게, 안전 주행을 방해할 수 있는 기능은 주행 중 막아 주의 산만을 줄이고 안전 운전을 돕는다.

[1]  AVN: Audio, Video, 그리고 Navigation의 약자. 오디오, 미디어와 내비게이션 관련한 서비스를 접할 수 있습니다. 이전의 운전자들은 지도를 사용했고, 그다음 순정 내비게이션을 사용하게 되었습니다. 그러다 점차 업데이트가 빠른 T map과 카카오 내비게이션을 사용하는 유저들이 많아진 상태입니다. 

[2]  테슬라에서는 오토파일럿 내비게이션, 속도제한 경고, 차량 호출(summon), 크루즈, 차선이탈 회피, 자동 긴급 제동, 장애물 감지 감속, 사각지대 충돌 경고음 등을 제공하고 있습니다.

[3]  탄소배출권 거래제(Emissions Trading System, ETS): 쓰레기 종량제 실행으로, 쓰레기를 버리고 싶은 사람은 쓰레기봉투를 사서 버려야 합니다. 이와 마찬가지로 탄소를 일정 기준 이상으로 내뿜는 기업에서는 탄소 배출이 적은 회사에서 기준치 이상만큼의 배출권을 구매해야 합니다. 테슬라는 탄소 배출량에 대한 권리를 타 회사에게 판매하여 수익을 올리고 있습니다.

[4]  이스터 에그(Easter eggs): 개발자들이 짬이 나면 이상한 기능을 집어넣어보는데, 이러한 기능들을 ‘이스터 에그(Easter eggs)’라고 합니다. 사용자 입장에서는 서비스를 즐기는 또 하나의 재미입니다.