ROii 안전관리자용 태블릿 UI 디자인
Autonomous Vehicle Operator Interface 디자인

UI/UX

Autonomous Vehicle Operator Interface 디자인

운전석이 없는 자율주행차량 ROii의 안전관리자가 차량 상태를 확인하고 쉽게 조작할 수 있도록 차량 조작용 태블릿 인터페이스를 디자인했습니다. 기존 개발자 중심 화면을 실제 사용자 관점에서 재구성하고, 여러 제어 기능을 빠르게 확인할 수 있도록 정보 우선순위와 화면 흐름을 정리했습니다.

Client
(주)오토노머스에이투지
Year
Tools
Figma

개발 화면을 운행 도구로 바꾸다

비상 시 자율주행차량을 수동으로 조작하고, 차량의 상태를 계속해서 모니터링 하는 안전관리자를 위한 태블릿의 UI를 디자인했습니다.

기존 태블릿 화면은 차량의 기능과 상태값을 텍스트와 간단한 버튼을 사용한 RAW한 데이터로 표출하는 개발자 중심의 인터페이스였습니다. 기능을 사용하는데에는 문제가 없었지만, 개발자가 아닌 안전관리자가 직관적으로 조작 방법을 파악하기 어려운 형태였습니다.

먼저 각 기능들의 작동 방식과 화면 간 관계를 분석한 뒤, 안전관리자가 운행 중 빠르게 정보를 확인하고 조작할 수 있도록 시각적 위계와 인터랙션을 다시 설계했습니다.

위: 기존 메인화면, 아래: 메인화면 디자인 개선 시안

안전관리자는 운전석이 없는 자율주행차량 안에서 차량의 상태를 실시간으로 모니터링합니다. 예기치 못한 오류가 발생하면 자율주행을 중단하고 수동으로 차량을 직접 제어해야 하므로, 화면의 핵심은 많은 정보를 보여주는 것이 아니라 필요한 순간에 중요한 정보를 빠르게 인지하도록 만드는 것이었습니다.

주행 정보 화면에서는 차량이 카메라를 포함한 센서로 인식한 주변 상황을 넓게 보여주고, 자율주행 상태를 보여주는 팝업을 좌측에 배치했습니다. 현재 경로와 뷰어 전환 버튼 등은 주행을 방해하지 않는 범위에서 후순위 정보로 배치했습니다.

주행 정보 화면

익숙한 경험을 녹여내다

움직이는 차량 안에서는 화면을 자세히 살펴보기 어렵고, 차량의 흔들림으로 인해 터치 영역이 의도와는 다르게 벗어날 수 있습니다. 이를 고려해 주요 버튼의 터치 영역을 충분히 확보하고 텍스트를 읽지 않아도 기능을 구분할 수 있도록 아이콘 중심으로 제어 화면을 구성했습니다.

전조등 조작부, 비상등, 와이퍼 작동 등 일반 차량에도 사용하는 아이콘을 그대로 적용하여 운전 경험이 있다면 별도의 학습 없이 조작 방법을 이해할 수 있도록 설계했습니다.

실제 차량에서 사용하는 전조등 조절 버튼과 아이콘
태블릿 제어 화면

가장 직관적인 도구, 아이콘

차량과 자율주행 시스템에서 발생하는 많은 상태들을 상단 영역에서 실시간으로 확인할 수 있도록 표출되는 경고 아이콘도 함께 제작하였습니다.

ISO 7000을 기준으로 사용할 수 있는 기호는 그대로 활용하고, 기존 규격에 없는 자율주행 관련 상태 아이콘은 동일한 언어를 사용하여 직접 제작했습니다.

제작된 아이콘은 안전관리자와 개발자에게 보여주고 기능이 자연스럽게 연상되는지 확인했습니다. 단순히 시각적으로 보기 좋은 아이콘보다, 운행 중 짧은 순간에도 의미가 정확하게 전달되는 아이콘을 선택하는 데 집중했습니다.

직접 제작한 아이콘들

현장의 불편을 개선으로

실제 차량에 적용한 이후에, 운영사의 피드백을 바탕으로 화면을 지속적으로 개선했습니다.

초기 주행 정보 화면에서는 속도 제한, 와이퍼, 출입문 제어만 가능할 수 있어서 공조를 제어하려면 주행 정보 화면에서 나가 별도의 제어 메뉴로 이동해야 했습니다.

특히 덥거나 추운 날에는 공조 기능을 반복적으로 조작해야 했고, 그때마다 화면을 벗어나야 한다는 불편이 있었습니다. 문제의 원인이 기능의 부재가 아니라 잦은 화면 이동에 있다고 판단해 주행 화면 하단에서 주요 기능과 공조 기능을 같이 조작할 수 있도록 추가했습니다.

아이디어 자체는 기아의 '인포테인먼트/공조 전환 조작계'에서 아이디어를 얻었으며 A2Z만의 디자인 언어를 적용하여 개선했습니다.

기아의 인포테인먼트/공조 전환 조작계 사진, 출처: 현대자동차그룹
주행 화면에서의 공조/차량 제어 전환

개발자를 위한 날것의 데이터

안전관리자가 사용하는 화면을 완성한 이후, 차량 센서와 시스템의 원시 데이터를 확인할 수 있는 개발자 모드가 추가로 요청되었습니다. 일반 사용자에게는 필요하지 않지만 개발과 점검 과정에서는 반드시 확인해야 하는 정보였기 떄문에, 기존 운행 화면과 분리된 별도의 영역으로 구성했습니다.

배터리와 전원 계통, 차량 센서, 통신 상태 등 밀도가 높은 데이터를 공통된 표와 상태 컴포넌트로 정리했습니다. 일반 사용자 화면의 직관성을 유지하면서도 개발자는 상세 정보의 접근할 수 있도록 사용자에 따라 정보의 깊이를 구분했습니다.

실제 운행 환경에서 검증된 인터페이스

완성된 시안은 개발팀과 안전관리자 분들께 먼저 검증받고, 구현 이후에는 실제 태블릿을 직접 조작하며 터치 영역과 화면 전환, 상태 표현을 확인했습니다. 실 운행 환경에서는 운영사가 직접 사용하며 발견한 문제와 개선 의견을 전달했고, 이를 다음 업데이트에 반영했습니다.

특히 여러 안전관리자 분들로부터 이전보다 너무 쓰기 편해졌다는 반응을 들으며, 심미적인 개선뿐 아니라 실제 운행 과정에서의 사용성도 함께 향상되었음을 확인할 수 있었습니다.

실제 운행 중인 차량에 적용된 사진

프로젝트를 마무리하며

실제 차량에 적용되는 화면을 설계하며, 정적인 환경에서 사용하는 일반적인 UI보다 터치 정확도와 정보의 직관성을 더욱 세심하게 고려해야 한다는 점을 배웠습니다. 사용자가 화면을 오래 살펴볼 수 없다는 전제에서 출발해 큰 터치 영역과 익숙한 기호, 명확한 상태 표현을 적용했습니다.

이 프로젝트는 한 번의 납품으로 끝난 디자인이 아니라 실제 차량에서 사용되며 계속해서 새로운 기능과 현장의 피드백이 반영되는 제품이었습니다. 개발 화면에 시각적인 외형을 입히는 데 그치지 않고, 실제 사용자의 역할과 환경을 이해해 안전한 운행을 지원하는 도구로 전환했다는 점에서 의미가 큰 작업이었습니다.