ProtoPie 와 자동차의 미래 구현하기
파트너사 Centigrade가 혁신을 이룬 사례에 대해 소개합니다.
ProtoPie는 고객과의 직접적인 소통을 매우 중요하게 생각합니다. 현재의 솔루션을 개선할 수 있는 중요한 피드백을 얻을 수 있을 뿐만 아니라, 독일 자르브뤼켄에 위치한 UX 디자인 에이전시 Centigrade같이 미래 지향적이고 혁신적인 UX 디자이너 및 에이전시와 직접적으로 소통할 수 있기 때문이지요.
Centigrade와 협업을 진행한 다양한 고객사 중 한 곳이 특히 눈에 띄었는데요. 최근 Centigrade는 혁신적인 자동차 스타트업인 ELEXIR와 협업하여 고도화된 자동차 소프트웨어 스택과 전시용 차량의 프로토타이핑 및 제작을 진행했습니다.
Centigrade의 수석 비주얼 디자이너인 Marius Hubertus와 이야기를 나누며, ProtoPie와 탑재된 실시간 데이터 기술을 통해 ELEXIR의 혁신적인 비전을 실현한 방법에 대해 알아보았습니다.
Centigrade에 대한 간단한 소개
개인적으로 저는 비주얼 디자인, 3D, 그리고 모션 디자인 등 여러 방면에서 경험을 쌓아왔습니다. 현재는 스타트업, 중견기업 그리고 글로벌 대기업을 대상으로 다양한 비즈니스 분야에 도움을 제공하고 있는 독일의 UX 에이전시 Centigrade에서 수석 비주얼 디자이너로 근무하고 있습니다.
수석 비주얼 디자이너 Marius HubertusCentigrade에서는 컴퓨터 과학자, 디자이너, 게임 개발자, 유저 리서처 그리고 심리학자 등 다양한 분야의 지식을 보유한 사람들이 함께하고 있는데요. 그래서 심리학 인사이트, 디자인 사례 및 최신 기술 등 각 분야의 최고의 접근법을 결합하여 유일무이한 사용자 경험을 만들고자 힘쓰고 있습니다.
단도직입적으로 말하자면, 모든 디지털 프로덕트 사이클에서 입이 벌어질 만큼 놀라운 사용자 경험을 만드는 것이 저희의 미션입니다.
ELEXIR가 그리는 비전
올해 초, 자칭 자동차 덕후들의 스타트업인 ELEXIR가 하나의 비전을 가지고 저희를 찾아왔습니다. 지속 가능하면서도 각 유저의 세세한 요구 사항이나 기호에 맞게 조정할 수 있는 100% 맞춤형 자동차 제작에 대한 비전이었습니다.
ELEXIR는 이미 맞춤형 설정이 가능하도록 실시간 OS 와 소프트웨어 아키텍처를 구축했습니다. 흥미로웠던 것은 시스템에 누구든지 설정을 변경할 수 있도록 오픈소스 방식으로 접근했다는 것인데요. 고객은 ELEXIR팀 내 소프트웨어 업데이트가 제공하는 혜택을 받을 수 있을 뿐만 아니라, 개인의 필요에 따라 하드웨어 요소를 직접 추가, 변경 그리고 대체할 수 있습니다.
그들의 아이디어를 듣자마자 가슴이 뛰었습니다. 이미 소프트웨어 아키텍처는 구축되었고, 자동차 하드웨어 부분에서 완전한 컨트롤을 가지고 있었습니다. 하지만 새로운 HMI (휴먼 머신 인터페이스)를 처음부터 구축해야 했습니다. 이해관계자들에게 그들이 가치 있는 무언가를 제작했다는 것을 증명하기 위해서는 혁신적인 소프트웨어 및 하드웨어의 시각적 프레젠테이션이 필요했습니다.
Centigrade 가 ProtoPie를 선택한 이유
본 프로젝트가 하드웨어 결합과 개인화에 중점을 두었기에, 정적인 화면을 뛰어넘는 고도화된 디자인 소프트웨어가 필요하다는 것을 알았습니다.
우리의 아이디어가 잘 표현되고, 빠르게 아이디어를 반복할 수 있고, 아주 짧은 시간 안에 솔루션을 만들 수 있으면서도 매우 정교하고 역동적인 프로토타입을 제작하고 싶었습니다. 기존에 ProtoPie로 작업했던 경험상, ProtoPie가 이번 프로젝트의 가장 적합한 툴임을 확신할 수 있었습니다.
HMI 패널의 유저 인터랙션을 통해 전시용 차량에서 실제 효과를 보여주고 싶었기 때문에, 복수의 하드웨어 디바이스와 화면 간 데이터를 실시간으로 연결할 수 있는 기능이 필요했는데요. ProtoPie는 저희에게 이런 꼭 필요한 기능을 제공했습니다.
뿐만 아니라, 저희에게 주어진 시간이 많지 않았기 때문에, 개인의 업무를 빠르게 진행할 수 있도록 하면서도 원활한 협업이 가능한 툴이 필요했습니다. ProtoPie를 통해, 저와 저희 동료들은 마지막 단계에서 모든 것들을 하나로 결합하기 전 요소 제작 등 필요한 업무들을 개별적으로 진행할 수 있었습니다.
완벽한 조합이었죠. 개인의 작업물이 최종 단계에서 하나로 잘 조합될 것을 확신했기에, 저를 포함한 Centigrade의 다른 UX 디자이너들은 각자 주어진 일에 집중할 수 있었습니다.
Centigrade의 디자인 접근
시간을 들여 이미 있는 것들을 처음부터 다시 제작하거나, 유저에게 부담을 주고 싶지 않았습니다. 따라서 프로토타입에 가볍고 미니멀한 느낌을 줄 수 있도록 익숙한 인터랙션 메커니즘을 사용하고, 각 사용 케이스에는 필요한 정보들만 보이도록 하였습니다. 동시에 3D 시각화를 통해 유저 가이드를 제작하여 사용 시 재미 및 미적인 요소도 함께 추가하였습니다.
또한 유저가 다양한 기능을 조절할 수 있도록 실제 사물의 시각적 자료를 사용했습니다. 예를 들어, 유저가 시트를 조정하고 싶다면, 조정은 화면을 통해 가능하지만, 유저는 좌석이 실제로 움직이는 것 같은 느낌을 받을 수 있습니다. 멋지지 않나요?
본격적인 작업 시작
여기서는 약간의 균형을 잡는 작업이 필요했습니다. 오늘날의 자동차 회사를 생각했을 때, 일반적으로 스케일링과 대량 생산을 떠올리게 되죠. 그럼에도 저희는 디자인 프로세스를 최대한 가볍게 유지했습니다.
새로운 컴포넌트를 라이브러리에 추가할 때, 지속적이면서도 점진적인 방법으로 접근하였습니다. 컴포넌트 제작 시 확장성과 재사용을 염두에 두고 제작한다면, 추후 다양한 케이스에 사용될 수 있을 것을 알고 있었기 때문입니다. 그래서 시각적 디자인에 해를 끼치지 않는 선에서 작은 컴포넌트들이 모여 하나의 큰 작품을 만들 수 있도록 작업하였습니다.
유지 보수 측면의 안정성을 위해 소프트웨어 내 다양한 부분과 출력 장치를 다양한 파일로 저장하고, 각 파일은 모든 컴포넌트들을 포함하여 어우르는 글로벌 라이브러리 안에 연결되도록 설정하였습니다. 정적 화면을 일일이 작업하는 대신, ELEXIR와 함께 시각적 디자인 시스템 언어를 만들어, 일부 기본적인 컴포넌트를 만들고 테스트 진행 후 바로 ProtoPie로 옮겼습니다.
그 이후 저희의 주요 워크플로우를 아래 세 가지로 나누었습니다.
1. 비주얼 디자인
2. OBD포트를 사용한 실시간 데이터와의 연결
3. 실제 제품과의 연동, 테스팅 및 동일 프로세스 반복
ProtoPie를 사용하여 ELEXIR의 비전 현실화하기
프로토타이핑은 저의 워크플로우에서 항상 가장 중요한 부분이었습니다. 많은 시간을 들이지 않고도 시각화, 테스트 그리고 반복을 빠르게 할 수 있기 때문이지요. 또한 아이디어가 본격적으로 적용되기 전 실제로 실행 가능성이 있는지 검증을 도와주는 안전망이 되기도 합니다.
지난 몇 년간 저는 다양한 툴을 사용하면서, 기능의 부족이나 기술적 한계로 종종 답답함을 느꼈었는데요. ProtoPie의 고도화된 컴포넌트 기능을 통해 정적인 화면에서 움직이는 것 이상으로 역동적인 프로토타입을 제작할 수 있었습니다. 말 그대로 ProtoPie를 사용하면 어떤 것에든 애니메이션 효과 추가가 가능합니다.
ProtoPie는 다른 툴에서는 찾아볼 수 없었던 고도의 유연성을 제공합니다. UI 컴포넌트를 별개로 구축하고, 구축된 컴포넌트들을 단일화된 소스 저장소인 컴포넌트 전용 라이브러리에 저장하여 다른 컴포넌트와 같이 사용이 가능하도록 설정할 수 있습니다.
마지막으로, 실제 전시용 차량의 하드웨어를 사용하여 완성된 프로토타입 직접 테스트 할 수 있었다는 점도 저희에게는 엄청난 게임 체인저였습니다.
ProtoPie를 최대한 활용하기 위한 Marius만의 꿀팁
자동차뿐만 아니라 자동차 내비게이션 시스템의 컴포넌트 그리고 설정을 3D 형태로 나타내고 싶었습니다. 그래서 영상이나 정적인 이미지를 사용하는 것만으로는 충분하지 않았어요. 저희가 원하는 목표를 달성하기 위해서는 더 높은 유연성이 필요했습니다.
현재는 3D 데이터를 ProtoPie로 연동할 방법은 없지만, 약간의 리서치를 통해 툴 내 다양한 variable과 function을 통해 비슷한 기능을 구현해낼 수 있는 방법을 찾았습니다. (Khonok님, 이 자리를 빌려 좋은 팁 감사드려요!) ProtoPie 커뮤니티에는 정말 훌륭한 디자이너들이 많아서, 사용 중 어떤 문제가 발생해도 인터넷 검색 하나로 해결책을 찾을 수 있습니다.
프로토타입 내 chain, if-conditions, send/response functions, Lottie integrations 등이 많아지면서 컴포넌트 구조들이 빠르게 복잡해질 거에요. 따라서 모든 레이어에 이름을 추가하고, 모든 구조적 디자인을 컴포넌트 단위로 나누기를 추천합니다. 이렇게 범위가 큰 프로젝트를 진행하다 보면 진행 상황이나 내용을 찾기가 어려워지므로, 작업물을 자주 저장하고 보기 좋게 정리하는 것이 무엇보다 중요합니다.
마지막으로, 두 가지 성능 관련 부수적인 권장 사항 드립니다.
(하지만 ProtoPie는 전반적인 성능 면에서 우수하니 너무 걱정 마세요!)
1. 보일 화면보다 더 큰 해상도로 이미지를 연동하지 마세요.
2. 동영상 파일보다는 Lottie 파일이나 SVG 파일 사용을 권장합니다.
위 두 가지 사항을 제외하고는 ProtoPie는 손색이 없는 훌륭한 툴입니다. Centigrade에서는 ProtoPie를 자주 사용하고 있으며 다른 에이전시 혹은 디자이너에게도 ProtoPie 사용을 적극적으로 권장하고 있습니다. 그리고 저희 작업물이 전문 심사위원에게 인정받은 것에 대해 매우 자랑스럽게 생각합니다. German UX Design Award 2022에서 지명된 저희 디자인을 살펴보세요.
