EV Infotainment
EV Infotainment
EV Infotainment
Infotainment screen UI for first-time EV drivers
Infotainment screen UI for first-time EV drivers
Role
Role
UXUI Designer
UXUI Designer
Timeline
Timeline
2024.1 - 2024.2
2024.1 - 2024.2
Team
Team
Personal Project
Personal Project
Overview
자동차 인포테인먼트 스크린은 한때 부가적인 기능에 불과했지만, 전기차(EV)에서는 인포테인먼트 시스템의 모든 기능을 통합하는 핵심 요소가 되었습니다. 그러나 물리적인 버튼이 전부 터치스크린으로 대체된 전기차의 인포테인먼트 스크린을 처음 접하는 운전자에게는 직관적으로 느껴지지 않을 수 있습니다.
대부분의 사람이 터치스크린 인터페이스를 스마트폰 UI를 연상한다는 점에 주목해, EV 인포테인먼트 UI를 재설계했습니다. 스마트폰 사용자에게 익숙한 느낌을 유지하면서, 운전자의 편의성을 높이는 사용 경험을 구현하는 데 주안점을 두었습니다.
자동차 인포테인먼트 스크린은 한때 부가적인 기능에 불과했지만, 전기차(EV)에서는 인포테인먼트 시스템의 모든 기능을 통합하는 핵심 요소가 되었습니다. 그러나 물리적인 버튼이 전부 터치스크린으로 대체된 전기차의 인포테인먼트 스크린을 처음 접하는 운전자에게는 직관적으로 느껴지지 않을 수 있습니다.
대부분의 사람이 터치스크린 인터페이스를 스마트폰 UI를 연상한다는 점에 주목해, EV 인포테인먼트 UI를 재설계했습니다. 스마트폰 사용자에게 익숙한 느낌을 유지하면서, 운전자의 편의성을 높이는 사용 경험을 구현하는 데 주안점을 두었습니다.
디자인 시스템
디자인 시스템
Home screen app icon
Home screen app icon
Menu bar icon
Menu bar icon
Small icon
Small icon
Full-height widget
Full-height widget
Mid-height widget
Mid-height widget
Min-height widget
Min-height widget
스마트폰 사용자를 위한 디자인
전기차는 이미 자동차 업계에서 주류로 자리 잡았지만, 아직도 많은 운전자들이 내연기관 차량에서 전기차로 바꿀 때 낯설다고 느낍니다. 전통적인 자동차 운전자와 전기차 운전자 간의 간극을 좁히기 위해, 저는 대다수에게 가장 익숙한 터치스크린 기기인 스마트폰을 핵심 요소로 삼았습니다. 이러한 접근을 통해, 스마트폰 사용자들이 자연스럽게 느낄 수 있도록 레이아웃을 최적화하는 동시에, 일관적이고 통합적인 디자인 시스템을 유지하도록 설계했습니다.
전기차는 이미 자동차 업계에서 주류로 자리 잡았지만, 아직도 많은 운전자들이 내연기관 차량에서 전기차로 바꿀 때 낯설다고 느낍니다. 전통적인 자동차 운전자와 전기차 운전자 간의 간극을 좁히기 위해, 저는 대다수에게 가장 익숙한 터치스크린 기기인 스마트폰을 핵심 요소로 삼았습니다. 이러한 접근을 통해, 스마트폰 사용자들이 자연스럽게 느낄 수 있도록 레이아웃을 최적화하는 동시에, 일관적이고 통합적인 디자인 시스템을 유지하도록 설계했습니다.
홈 화면
홈 화면
테슬라의 인포테인먼트
테슬라의 인포테인먼트
Problem
모호한 홈 화면과 작은 아이콘
대표적인 전기차 제조사인 테슬라는 드로어(Drawer) 스타일의 인터페이스를 채택하여 앱에 접근하도록 설계했습니다. 이를 홈 화면을 대신하는 역할로 활용하고 있습니다. 그러나 일반적으로 홈 화면은 앱에 진입하는 경로로 인식되는 경우가 많습니다.
또한, 화면 공간이 충분함에도 불구하고 앱 아이콘의 크기가 작아, 운전 중 터치하기에 불편함이 존재합니다. 이는 운전자의 시인성과 사용성을 저하시킬 수 있는 요소로 작용할 수 있습니다.
대표적인 전기차 제조사인 테슬라는 드로어(Drawer) 스타일의 인터페이스를 채택하여 앱에 접근하도록 설계했습니다. 이를 홈 화면을 대신하는 역할로 활용하고 있습니다. 그러나 일반적으로 홈 화면은 앱에 진입하는 경로로 인식되는 경우가 많습니다.
또한, 화면 공간이 충분함에도 불구하고 앱 아이콘의 크기가 작아, 운전 중 터치하기에 불편함이 존재합니다. 이는 운전자의 시인성과 사용성을 저하시킬 수 있는 요소로 작용할 수 있습니다.
홈 화면으로 이동
홈 화면으로 이동
Solution
홈 화면, 홈 버튼, 더 커진 아이콘
스마트폰 인터페이스와 마찬가지로, 앱 페이지와 홈 화면을 분리되었고, 운전자와 동승자가 메뉴 바 측면에 배치된 홈 버튼을 탭하면 손쉽게 홈 화면으로 이동할 수 있습니다.
또한, 홈 화면의 앱 아이콘을 더 크게 디자인하여, 운전자가 시선을 많이 빼앗기지 않고도 쉽게 아이콘을 선택할 수 있도록 했습니다. 이를 통해 주행 중 조작의 편의성과 안전성을 모두 향상시켰습니다.
스마트폰 인터페이스와 마찬가지로, 앱 페이지와 홈 화면을 분리되었고, 운전자와 동승자가 메뉴 바 측면에 배치된 홈 버튼을 탭하면 손쉽게 홈 화면으로 이동할 수 있습니다.
또한, 홈 화면의 앱 아이콘을 더 크게 디자인하여, 운전자가 시선을 많이 빼앗기지 않고도 쉽게 아이콘을 선택할 수 있도록 했습니다. 이를 통해 주행 중 조작의 편의성과 안전성을 모두 향상시켰습니다.
현대의 인포테인먼트
현대의 인포테인먼트
Problem
흐릿한 인터페이스
흐릿한 인터페이스 문제 많은 자동차 제조사는 일관된 인터페이스를 유지하기 위해 모노톤 디자인 시스템을 채택하고 있습니다. 그러나 이러한 디자인은 모든 아이콘이 비슷하게 보여 운전자가 빠르게 구별하기 어렵습니다. 특히, 주행 중 화면에 온전히 집중할 수 없는 상황에서는 직관적인 인지가 더욱 어려워질 수 있습니다.
흐릿한 인터페이스 문제 많은 자동차 제조사는 일관된 인터페이스를 유지하기 위해 모노톤 디자인 시스템을 채택하고 있습니다. 그러나 이러한 디자인은 모든 아이콘이 비슷하게 보여 운전자가 빠르게 구별하기 어렵습니다. 특히, 주행 중 화면에 온전히 집중할 수 없는 상황에서는 직관적인 인지가 더욱 어려워질 수 있습니다.
Solution
다양한 색의 아이콘
각 아이콘은 고유한 색상 배경을 사용해 아이콘의 정체성을 명확히 보여주며, 운전자는 이를 한눈에 인지하고 빠르게 선택할 수 있습니다. 예를 들어, 녹색 아이콘은 배터리를 의미하고, 흰색 바탕에 빨간색이 포함된 아이콘은 캘린더를 나타내는 식으로 시각적 구분이 강화되었습니다.
각 아이콘은 고유한 색상 배경을 사용해 아이콘의 정체성을 명확히 보여주며, 운전자는 이를 한눈에 인지하고 빠르게 선택할 수 있습니다. 예를 들어, 녹색 아이콘은 배터리를 의미하고, 흰색 바탕에 빨간색이 포함된 아이콘은 캘린더를 나타내는 식으로 시각적 구분이 강화되었습니다.
퀵바
퀵바
물리 버튼을 가진 전통적인 센터 콘솔
물리 버튼을 가진 전통적인 센터 콘솔
원하는 기능으로 바로 이동할 수 있는 퀵바
원하는 기능으로 바로 이동할 수 있는 퀵바
Problem
물리 버튼의 부재
전기차를 처음 접하는 운전자들은 물리 버튼이 없어 원하는 기능에 접근하기 위해 여러 단계를 거쳐야만 하는 불편함을 겪는 경우가 많습니다.
전기차를 처음 접하는 운전자들은 물리 버튼이 없어 원하는 기능에 접근하기 위해 여러 단계를 거쳐야만 하는 불편함을 겪는 경우가 많습니다.
Solution
퀵바
메뉴 바에는 자주 사용하는 기능 버튼과 앱을 여러 개 배치할 수 있으며, 슬라이드 동작만으로도 기존 센터 콘솔에 여러 개의 물리 버튼이 있는 것처럼 다양한 기능에 빠르게 접근할 수 있습니다.
메뉴 바에는 자주 사용하는 기능 버튼과 앱을 여러 개 배치할 수 있으며, 슬라이드 동작만으로도 기존 센터 콘솔에 여러 개의 물리 버튼이 있는 것처럼 다양한 기능에 빠르게 접근할 수 있습니다.
