프로토타입이 실제로 움직이는 듯 느껴져야 하는 필요성
‘진짜 그 자체’에서 UX 테스트를 하는 것보다 더 좋은 것은 없습니다. 하지만 자동차 HMI 디자인 작업을 조금이라도 해보았다면, 실제 프로토타입 차량에서 디자인을 테스트하는 일이 얼마나 드문 사치인지 알고 있을 것입니다.
운이 좋다면, 반실제적인 레이아웃에서 UI의 시각적 요소와 인체공학을 판단할 수 있는 벅(buck) 세트업에 접근할 수 있을지도 모릅니다.
특히 사용자 테스트를 할 때는 현실감 부족이 까다롭습니다. 연구자로서 테스트 사용자에게 그들이 보고 있는 것을 이해할 수 있도록 충분한 맥락을 제공하려면 많은 설명이 필요합니다(“이제 당신이 고속도로를 시속 120km로 주행하고 있다고 상상해 보세요.”).
RemotiveLabs는 이 부족한 현실감을 보완해 줄 수 있는 무언가를 개발했습니다. 이들의 도구는 실제 차량 데이터(텔레메트리, 위치 등) 스트림을 제공하여, 자동차 소프트웨어 개발자들이 시뮬레이터에서 현실적인 데이터로 애플리케이션을 테스트할 수 있게 해줍니다.
이를 통해 시뮬레이션을 구동하는 여러 가지 방법이 가능합니다:
사전 제작된 샘플 녹화 라이브러리에서 선택하기,
자신의 신호 데이터 파일(예: BLF, ASC 또는 MF4) 업로드하기
또는 실제 차량을 연결해 실시간 데이터 스트림을 받아, 현실 세계 조건에서 HMI 디자인을 테스트할 수도 있습니다.
실제 차량 데이터로 우리의 인터랙티브 자동차 UI 프로토타입을 테스트할 수 있다면 좋지 않을까요?
디자이너를 위한 사례
이러한 도구는 디자이너에게도 도움이 됩니다:
실제와 유사한 데이터(-시각화)를 사용해 계기판 프로토타입을 테스트하기.
차량 데이터를 활용해 인포테인먼트 목업에 생동감을 불어넣기.
어떤 차든 임시로 터치스크린을 붙여 넣고, 프로토타입 UI에 실시간 데이터를 입력하기.
저처럼 자동차 UX 디자이너가 이것을 실제 디자인 프로토타입에 얼마나 쉽게 통합할 수 있는지 궁금해져서, 저는 RemotiveLabs의 도구를 일반적인 UI 디자인 워크플로에 통합해 보기로 했습니다.
우리의 UI 실험: Figma, Protopie, 그리고 RemotiveCloud
오늘날 사실상의 UI 디자인 도구는 Figma입니다. 디자인 팀과 이해관계자들은 이를 사용해 디자인 제안을 공동으로 반복 개선합니다.
이상적으로는 이러한 디자인 반복 과정에 테스트도 포함되어야 합니다:
디자이너는 자신의 디자인 제안이 ‘움직이는 상태’에서 어떤 동적 측면을 보이는지 평가하기 위해 테스트해야 합니다.
사용자 연구자는 실제 사용자와 함께 사용자 테스트를 진행하여 직관성, 학습 용이성, 인체공학적 요소를 검증해야 합니다.
아쉽게도 Figma의 프로토타이핑 기능은 다소 기본적이라 자동차 용도에는 보통 충분하지 않습니다. 그래서 상호작용형 프로토타이핑에는 저는 다른 도구를 선호합니다: Protopie.
**RemotiveCloud가 터치 디스플레이의 HMI 프로토타입으로 차량 데이터를 스트리밍하는 모습
**
자동차 업계에서 Protopie는 여러 개의 동시 (터치) 디스플레이, 센서, 복잡한 조건 로직을 사용할 수 있게 해주기 때문에 인기 있는 프로토타이핑 플랫폼입니다.
프로토타입이 외부 장치와 데이터 소스와 통신할 수 있게 해주는 Protopie의 추가 기능인 Protopie Connect가 포함된 Protopie 라이선스가 필요합니다.
*ProtoPie Studio를 다운로드하고 ProtoPie Connect에 가입하세요 *
계획은 이렇습니다:
위는 Figma의 예시 디자인입니다
Figma에서 UI 가져오기
우선 Figma의 자동차 대시보드 UI를 가져와 Protopie로 옮겨 상호작용을 추가해 보겠습니다.
Protopie에서 프로토타입을 설정한 뒤에는 RemotiveLabs의 도구 세트와 연결하여 UI의 다양한 객체를 차량 데이터 스트림으로 구동할 것입니다.
이 작업 방법을 알아낼 수 있다면 가능성은 무궁무진합니다. 차량의 실제 데이터를 사용자 인터페이스의 어떤 측면을 제어하는 매개변수로도 사용할 수 있기 때문입니다.
무대를 설정하기
위는 가상의 도시형 마이크로카를 위한 HMI 디자인입니다
우리는 가상의 도시형 미니 모빌리티 차량을 위한 인포테인먼트 화면을 만들 것입니다. 이 차량은 기본적인 중앙 터치스크린을 갖추고 있으며, 간단한 인포테인먼트 화면이자 계기판 역할을 모두 수행합니다.
이 차량은 시내를 오가는 짧은 이동(보통 < 30분)을 위해 설계되었으므로, 기능적으로 시스템은 단순하게 유지하겠습니다:
차량 주행에 필요한 기본 정보를 제공하는 계기판.
내비게이션 기능.
디지털 라디오와 휴대폰용 블루투스 음악 연결을 제공하는 음악 섹션.
자, 시작해 봅시다: Figma에서 데모 프로젝트 설정하기
이번 실험에서는 화면의 계기판 섹션 여러 부분에 실제 차량 데이터를 주입할 것입니다.
이것을 구현하기 위해 Figma에서 특별히 할 일은 없습니다. 늘 하던 방식대로 디자인을 구성하면 됩니다. 물론 모든 레이어에 의미 있는 이름을 붙여두면 모두에게 훨씬 편하지만, 어차피 좋은 습관이기도 합니다.
Figma에서 Protopie로
Figma 프레임을 Protopie로 가져오는 것은 정말 식은 죽 먹기입니다. Protopie의 친절한 분들은 Figma용 플러그인을 제공하여, Figma의 프레임을 가져와 완전히 편집 가능한 Protopie “씬”으로 바꿀 수 있게 해줍니다.
Figma 디자인을 Protopie로 내보내기
Figma 디자인은 일반적으로 95% 정도는 그대로 전달됩니다. 변환 과정에서 제가 본 주요 문제는 다음과 같습니다:
그라디언트
배경 흐림(인기 있는 프로스트드 글라스 효과용)
이미지 비율 — 이는 보통 Protopie에서 쉽게 수정할 수 있습니다
마스크 등으로 쓰이는 그라디언트를 Figma에서 Protopie로 옮기려면, Figma의 그라디언트 레이어를 SVG로 복사해 Protopie에 붙여 넣는 것을 권장합니다.
*ProtoPie의 Figma 가져오기 플러그인을 여기에서 다운로드하세요: *https://www.protopie.io/figma
ProtoPie에서 실시간 데이터 입력을 준비하t
먼저, 조작하고 싶은 모든 레이어나 오브젝트가 변경을 받을 준비가 되도록 해야 합니다. 이를 위해 객체를 선택하고 각각의 “Make editable” 버튼을 클릭합니다.
다시 한번, 각 레이어에 의미 있는 이름이 있는지 확인하세요. 드롭다운 목록에서 다시 찾아야 할 수 있기 때문입니다.
실시간 데이터를 사용해 조작할 모든 레이어가 편집 가능해지면, 이제 사용할 RemotiveLabs 데이터 스트림을 설정할 차례입니다.
RemotiveLabs 도구 설정하기
프로토타입에서 사용할 차량 데이터 매개변수 선택하기
이번 실험에서는 데모에 입력할 수십 가지 서로 다른 변수와 신호에 접근할 수 있는 RemotiveLabs의 무료 체험 라이선스를 사용해 왔습니다.
웹 환경에서는 프로토타입에 사용할 신호를 골라 선택할 수 있습니다. 한 번에 모두 할 필요도 없습니다. 나중에 언제든 돌아와 선택한 신호를 추가하거나 제거할 수 있습니다.
저는 OEM 전용 신호보다, 가능하다면 VSS 신호를 사용하는 편을 선호합니다. VSS는 Covesa의 자동차 데이터 표준화 프로토콜인 “Vehicle Signal Specification”의 약자입니다. 여기에서 자세히 읽어보세요. VSS의 좋은 점은 모든 신호에 의미 있고 설명적인 이름이 붙어 있다는 것입니다.
저는 삶을 더 쉽게 만들어 주는 것들을 좋아합니다.
때로는 올바른 신호 이름을 찾기 위해 약간의 검색이 필요하지만, 보통은 다음과 같은 명명 형식 덕분에 꽤 쉽게 식별할 수 있습니다:
Vehicle.Speed
Vehicle.Powertrain.TractionBattery.StateOfCharge.Displayed
Vehicle.Powertrain.ElectricMotor.Power
Vehicle.CurrentLocation.Latitude
등.
신호 이름은 중요합니다! 우리 프로토타입에서 이를 참조해야 하기 때문입니다.
작업이 끝나면 프로토타입을 실행하는 데 필요한 정확한 설정 명령을 확인할 수 있습니다. 이 명령은 나중에 터미널 창에 붙여 넣을 것이므로, 프로토타입을 실행할 때마다 쉽게 꺼내 쓸 수 있는 위치에 저장해 두세요.
RemotiveCloud는 ProtoPie 통신을 기본적으로 지원합니다
VSS 신호를 ProtoPie에 입력하기
프로토타입을 실행하기 전에 ProtoPie에서 마지막으로 해야 할 일이 하나 있습니다. Pie가 RemotiveCloud 스트림에서 선택한 VSS 신호를 듣고 반응하도록 설정하는 것입니다.
ProtoPie에서 이 작업은 3단계로 이루어집니다:
예를 들어 “speed”라는 숫자 변수와 같은 전역 변수를 만듭니다
ProtoPie Connect에서 VSS 신호를 수신하면 반응할 트리거를 만듭니다. 이 트리거는 데이터 스트림에서 찾은 이름, 예를 들어 “Vehicle.Speed”를 듣게 됩니다
응답을 추가합니다: 이 목적을 위해 준비해 둔 텍스트 레이어에 받은 값을 넣을 수 있습니다(또는 객체의 색을 바꾸거나, 무언가를 [비]가시적으로 만들 수도 있습니다).
이것으로 끝입니다. 물론 Protopie의 다양한 로직 기능을 모두 활용하여, 화면의 숫자 하나를 바꾸는 수준을 훨씬 넘어서는 복잡한 조건부 기능과 풍부한 시각화를 추가할 수 있습니다.
차량 데이터를 어떻게 받고 무엇을 할지 ProtoPie에 알려주기
프로토타입을 처음으로 실행해 보기
이제 실제 데이터로 구동되는 프로토타입을 보기까지 몇 단계만 남았습니다!
1. Protopie Connect
Pie(ProtoPie 파일)를 로컬 드라이브에 저장하여 Protopie Connect가 접근할 수 있게 하세요. 그런 다음 Protopie Connect를 실행하고 로컬 프로토타입을 찾습니다.
가져온 Pie 옆의 작은 “Display” 버튼을 눌러 ProtoPie 데모 창을 엽니다. 이 창에서 우리의 인터랙티브 프로토타입이 실행됩니다.
2. 브라우저 창에서 RemotiveCloud 열기
데이터 스트림을 설정한 브라우저 탭으로 이동합니다. Play를 눌러 데이터 전송을 시작하세요. 선택한 스트림의 길이에 따라 우리가 끝내기 전에 스트림이 소진되면, 중간에 다시 시작해야 할 수도 있습니다.
3. 터미널 창에서 몇 가지 명령줄 마법을 부리기
다음으로, 터미널 창을 열고 명령줄 문자열을 붙여 넣으세요(RemotiveCLI가 이미 설치되어 있다고 가정합니다. 아니라면, 지금이 설치하기 좋은 때입니다). RemotiveCLI는 RemotiveCloud에서 스트리밍되는 데이터와 우리의 ProtoPie 데모 사이의 다리 역할을 할 것입니다.
**Protopie Connect, 들어오는 데이터 스트림 표시 중
**
모든 것이 올바르게 설정되면, Protopie Connect와 RemotiveCloud 데이터 스트림이 모두 준비되었음을 자동으로 감지해야 합니다: Protopie Connect 창에서 관련 데이터 포인트가 모두 스크롤되는 것이 보일 것입니다.
이제 프로토타입의 UI가 들어오는 모든 신호에 반응해야 합니다!
실제 차량 데이터로 인터랙티브 프로토타입을 실행하는 우리의 테스트 설정
디버깅 팁: 작동하지 않으면 Protopie Connect가 신호를 수신하고 있는지 확인하세요.
예: 문제는 ProtoPie 프로토타입에 있습니다.
아니오: RemotiveCloud가 여전히 재생 중인지, 그리고 RemotiveCLI가 제대로 실행되고 있는지 확인하세요(터미널 창에서 오류 메시지를 찾아보세요).
다음 단계의 프로토타이핑: 지도, 위치, 비디오 스트림
RemotiveLabs의 차량 데이터 스트림에는 차량의 위치 데이터도 포함될 수 있습니다(보통 위도와 경도를 나타내는 두 변수로 표시됩니다).
조금 더 도전해 보고 싶다면, 이러한 데이터 포인트를 고급 프로토타이핑에 활용할 수 있습니다:
이동하는 지도(차량의 기록된 위치 데이터를 따라 이동).
연동된 비디오 스트림(예: 주차 보조 시뮬레이션용).
조향 휠 같은 하드웨어 주변장치의 입력과 결합하기.
이를 위해서는 Protopie Connect의 고급 기능인 “Stage View”(웹 뷰나 라이브 비디오 피드를 프로토타입 위에 겹쳐 놓기)와 “Plugins”(Arduino/Teensy, IFTTT, 게임 컨트롤러 통합 같은 멋진 기능용)을 사용해야 합니다.
이들은 이번 실험의 범위를 벗어나지만, 가능하다는 것을 알아두면 좋습니다. 그리고 이러한 가능성에 대한 튜토리얼도 온라인에 많이 있습니다.
*ProtoPie Connect에 대해 자세히 읽어보세요: *https://www.protopie.io/connect
이제 RemotiveLabs 데이터에 접근하는 방법을 알았으니, 이 모든 입력을 결합해 과거에 사용했던 Figma 데모보다 훨씬 더 현실적으로 느껴지는 매우 정교한 프로토타입을 만들 수 있습니다.
RemotiveCloud는 위치 데이터와 비디오 영상도 지원하며, 이것 역시 프로토타입에 가져올 수 있습니다**
**
저자 소개
Bram Bos는 디자인과 실제 구현을 연결하는 데 깊은 열정을 가진 숙련된 UX 및 제품 전략가입니다. HMI 디자인, UX 리서치, 신속한 프로토타이핑 전반의 경력을 바탕으로, Bram은 현재 주요 자동차 브랜드와 함께 일하며 차량 내 사용자 경험의 경계를 넓히는 데 기여하고 있습니다.
