
UI/UX
Driverless Autonomous Vehicle HMI 디자인
운전석이 없는 레벨4 자율주행 모빌리티 ROii의 HMI UI를 디자인했습니다. 승객이 차량의 주행 상태, 차량 정보를 직관적으로 이해할 수 있도록 화면 구조를 설계했습니다. 실제 서비스되는 차량 적용을 고려해 한, 일, 영 다국어 표기, 주행 상황별 안내 화면을 구성했습니다.

운전석이 없는 차량에서 신뢰를 만들다
ROii는 운전석이 없는 완전 자율주행 셔틀입니다. 승객은 운전자의 움직임이나 시선을 통해 차량의 상태를 짐작할 수 없기 때문에, 차량이 주변을 제대로 인식하고 안전하게 판단하고 있는지를 화면을 통해 이해할 수 있어야 했습니다.
국내에서는 42dot을, 해외에서는 Tesla, Waymo, Zoox, WeRide 등 실제 자율주행 서비스를 운영하는 기업의 HMI를 조사했습니다. 대부분의 사례가 차량이 인식한 도로와 주변 객체, 앞으로 이동할 경로를 승객에게 시각적으로 보여주고 있었습니다.
이를 바탕으로 ROii에서도 ‘차량이 무엇을 보고 있으며, 어떤 판단으로 움직이고 있는가’를 가장 먼저 전달하는 것을 핵심 설계 목표로 정했습니다.


승객의 편의에 맞춘 화면 구성
프로젝트를 시작할 당시 주어진 정보는 차량에 설치될 디스플레이의 실제 크기뿐이었습니다. 어떤 정보를 어떤 순서로 보여줄지에 관한 기획은 별도로 존재하지 않았습니다.
자율주행 차량의 주행 과정과 대중교통 이용자의 요구를 함께 고려해 표시 정보를 직접 제안했습니다. 메인 디스플레이에는 차량이 인식한 도로와 주변 객체, 주행 경로, 신호등, 자율주행 상태를 우선 배치했습니다. 이어 현재와 다음 정류장, 도착 예정 정보와 현재 속도를 함께 확인할 수 있도록 구조를 설계했습니다.

차량 내부에는 메인 디스플레이와 사이드 디스플레이가 함께 설치됩니다. 두 화면에 같은 정보를 반복하기보다 각각의 형태와 사용 목적에 맞게 역할을 나누었습니다.
메인 디스플레이는 차량의 주변 인식과 주행 판단을 중심으로 구성했습니다. 도로 위 차량과 보행자, 신호등, 앞으로 이동할 경로를 가장 넓은 영역에 보여주고, 자율주행 상태와 정류장 정보는 분리된 영역에서 확인할 수 있도록 했습니다.
가로로 길고 세로 폭이 좁은 사이드 디스플레이는 대중교통의 안내 화면과 같은 역할을 담당합니다. 승객이 현재 정류장과 다음 정류장, 차량 번호와 운행 방향을 빠르게 파악할 수 있도록 정보의 수를 줄이고 글자를 크게 배치했습니다.


실제 정류장명이 바꾼 정보 구조
초기 사이드 디스플레이는 지하철 노선 안내 화면처럼 현재 정류장과 다음 정류장을 좌우로 나열하는 구조였습니다. 하지만 실제 운행 지역의 정류장명을 적용하자 예상보다 이름이 긴 경우가 많았고, 제한된 폭 안에서 글자가 지나치게 작아지는 문제가 발생했습니다.
이에 좌우 배치를 포기하고 현재 정류장과 다음 정류장을 위아래로 나누는 세로 2단 구조로 변경했습니다. 중요한 현재 정류장은 더 크고 밝게, 다음 정류장은 상대적으로 낮은 강조도로 표현해 정보의 순서도 명확하게 구분했습니다.

실제 승객이 바라보는 거리에서 검증하다
자율주행 차량은 법적으로 입석이 허용되지 않기 때문에 모든 승객이 좌석에 앉은 상태에서 화면을 보게 됩니다. 단순히 Figma 화면에서 글자 크기를 결정하지 않고, 실제 차량과 유사한 위치에 테스트 디스플레이를 설치한 뒤 좌석에서 화면을 바라보며 가독성을 확인했습니다.
화면과 승객 사이의 거리에서 정류장명과 자율주행 상태가 명확하게 읽히는지 반복적으로 확인하며 글자 크기와 대비를 조정했습니다. 이후 실제 차량에 화면이 적용된 뒤에도 시운전에 참여해 데이터가 정상적으로 표시되는지, 주행 중에도 주요 정보를 빠르게 인식할 수 있는지 검수했습니다.

디자인한 환경을 실제 주행 데이터로 연결하다
디자인 단계에서는 주변 차량과 보행자, 도로와 차선, 횡단보도, 신호등과 주행 경로를 직접 제작했습니다. 실제 자율주행 차량에서는 센서가 수집한 데이터를 기반으로 주변 환경이 실시간으로 생성됩니다.
외부 개발사는 디자인 시안을 바탕으로 차량과 도로 환경을 3D 에셋으로 구현하고 실제 센서 데이터와 연결했습니다. 개발 과정에서는 센서의 인식 범위와 카메라 시야각에 따라 디자인 시안과 다른 화면이 나타나기도 했습니다.
특히 FOV와 객체의 크기, 도로가 보이는 범위가 의도와 다르게 구현되는 부분을 반복적으로 확인했습니다. 개발사와 화면을 함께 보며 수정 사항을 전달하고, 실제 구현 결과가 승객에게 보여주려던 정보 구조와 최대한 일치하도록 조율했습니다.

법규를 누구나 이해할 수 있는 경고 체계로
자율주행 차량은 시스템 고장이나 운행 중 위험 상황이 발생했을 때 법령에 따라 승객에게 경고 메시지를 표시해야 합니다. 법규인증팀으로부터 관련 법령과 반드시 표시해야 하는 문구를 전달받고, 개발 시스템에 적용할 수 있는 경고 UI로 변환했습니다.
법령에는 별도의 위험도 구분이 없었지만, 모든 경고를 같은 방식으로 보여주면 상황의 중요도를 승객이 판단하기 어렵다고 보았습니다. 이에 회사 내부에서 위험도를 구분해 표시하는 방식을 제안했고, 해당 의견이 채택되면서 저위험·중위험·고위험 단계별 시안을 제작했습니다.
디자인을 완료한 뒤에는 법규인증팀의 검토를 다시 거치고, 승인된 화면을 개발 부서에 전달하는 방식으로 진행했습니다.
저위험과 중위험은 차량이 계속 운행할 수 있지만 승객에게 상황을 알려야 하는 단계입니다. 차량이 주변을 어떻게 인식하고 있는지 계속 확인할 수 있도록 메인 화면 하단에 팝업을 배치하고, 위험도에 따라 색상과 크기를 다르게 적용했습니다.
고위험 상황에서는 차량이 정상적으로 운행할 수 없기 때문에 경고의 우선순위를 높였습니다. 다만 메인 디스플레이는 차량의 주변 인식 상태를 전달하는 핵심 화면이므로, 센서 시각화를 유지하면서 경고 영역을 크게 확장했습니다.
사이드 디스플레이는 고위험 상황에서 정류장 정보의 중요도가 낮아진다고 판단했습니다. 따라서 전체 화면을 경고 색상과 메시지로 전환해 승객이 상황을 즉시 인지할 수 있도록 했습니다.

운영 현장의 피드백으로 기능을 확장하다
실제 대중교통 서비스가 시작된 이후에는 탑승객과 운영사로부터 새로운 요구사항이 전달됐습니다. 운영사가 차량을 수동으로 조작할 때 사각지대가 많아 주변 장애물을 파악하기 어렵다는 의견을 바탕으로, 차량 주위의 물체 접근 방향을 보여주는 근접객체 경고 시안을 추가했습니다.
일반 차량의 주차 센서 UI에서 착안해 차량 주변에 색상 영역을 표시하고, 장애물이 감지된 위치를 직관적으로 이해할 수 있도록 했습니다.
V2X 연동 이후에는 신호등의 잔여시간도 화면에 추가했습니다. 내비게이션 앱에서 사용하는 신호 잔여시간 UI를 참고해 기존 신호등 정보와 하나의 영역으로 묶고, 현재 신호 상태와 남은 시간을 동시에 확인할 수 있도록 구성했습니다.

여러 지역으로 뻗어나가는 인터페이스
ROii의 운행 지역과 해외 사업 제안이 확대되면서 하나의 한국어 화면을 여러 언어로 번역하는 것만으로는 충분하지 않았습니다. 언어의 길이와 읽는 방향, 현지 도로와 신호 체계까지 함께 고려해야 했습니다.
국내 운행 지역에는 한영 병기를 적용하고 실제 개발까지 완료했습니다. 일본어와 아랍어 버전은 해외 제안을 위해 제작했으며, 실제 적용본과 혼동되지 않도록 별도의 시안으로 관리했습니다.
싱가포르 버전은 현지의 세로형 신호등과 도로 환경을 반영했습니다. 일본 버전은 좌측통행을 기준으로 차선과 신호등, 좌회전·우회전 표현과 도로 시각화를 다시 구성했습니다.
아랍어 버전은 오른쪽에서 왼쪽으로 읽는 RTL 환경을 고려해야 했습니다. 임의로 배치를 결정하지 않고 현지 운영 업체에 화면의 좌우 반전 여부를 확인한 뒤, 정보의 흐름을 반전한 전용 레이아웃을 제작했습니다.

Figma를 중심으로 한 유연한 개발
디자인은 사내에서 단독으로 담당하고, 실제 구현은 외부 개발사가 맡았습니다. Figma 링크를 공유해 개발자가 최신 화면과 상태별 시안을 실시간으로 확인할 수 있도록 했습니다.
복잡한 기능은 화면을 캡처해 PPT에 동작 조건과 세부 설명을 추가했고, 빠른 의사결정이나 상세한 설명이 필요할 때는 유선으로 통화하며 같은 Figma 화면을 함께 확인했습니다.
개발 결과를 전달받은 뒤에는 디자인 시안과 비교하며 객체 크기, 정보 위치, 시야각과 상태별 동작을 검수했습니다. 자사 개발자와 외부 개발사 사이에서 디자인 의도를 설명하고 구현상의 제약을 이해하며 반복적인 수정과 오해를 줄였습니다.


멈추지 않는 새로운 실험
차량의 흰색 인테리어와 주간 운행 환경에 더 자연스럽게 어울릴 수 있도록 라이트 모드를 제작하고, 시간과 환경에 따라 전환할 수 있는 라이트·다크 모드도 실험했습니다.
기능이 계속 추가되면서 기존 레이아웃을 유지하는 것이 최선인지도 다시 검토했습니다. 정류장 정보보다 자율주행 시스템의 상태를 더 강조하면 승객이 차량을 안전하게 느끼는 데 도움이 될 수 있다는 가설을 바탕으로 새로운 정보 구조와 레이아웃을 제작했습니다.
다만 기존 화면을 전면적으로 다시 개발해야 했고, 촉박한 일정과 외부 개발 비용까지 고려해야 했기 때문에 실제 제품에는 적용하지 못했습니다. 적용 여부와 별개로 기존 구조의 한계를 점검하고 다음 버전의 가능성을 탐색한 실험안으로 남겼습니다.

실제 승객에게 닿은 화면
완성된 HMI는 ROii 차량에 실제로 적용되어 국내 운행과 전시에서 사용됐습니다. DIFA와 AME 등 전시 현장에서는 화면의 가독성과 주변 인식 표현에 관한 긍정적인 반응을 확인할 수 있었습니다.
특히 전시를 방문한 현대자동차 관계자로부터 승객의 관점에서 차량이 주변을 어떻게 인식하고 판단하는지 잘 보인다는 의견을 들었습니다. 초기 설계에서 세웠던 ‘운전자가 없는 차량의 판단을 승객에게 보여준다’는 목표가 실제 사용자에게도 전달됐다는 점에서 인상 깊은 피드백이었습니다.




프로젝트를 마무리하며
처음 접하는 차량 HMI 프로젝트였고, 화면의 크기 외에는 정해진 것이 거의 없는 상태에서 시작했습니다. 국내외 사례를 분석해 표시 정보를 정의하고, 실제 차량과 유사한 환경에서 가독성을 검증하며 ROii에 필요한 화면 체계를 만들었습니다.
2년 동안 신규 기능과 운행 지역이 추가될 때마다 법규, 센서 데이터, 실내 환경, 다국어와 현지 도로 체계까지 고려해야 했습니다. 디자인 시안을 만드는 것에 그치지 않고 법규인증팀, 개발 부서, 운영사와 외부 개발사 사이에서 의견을 조율하며 실제 차량에 적용되는 과정 전체를 경험했습니다.
규모가 큰 프로젝트였지만 새로운 문제를 하나씩 해결하다 보니 시간 가는 줄 모르고 몰입했습니다. 직접 설계한 화면을 많은 승객이 실제 차량에서 사용하고, 뉴스와 전시 사진 속에서 마주할 때마다 디자이너로서 큰 보람과 애정을 느꼈습니다.