ProtoPie에서는 고객들과 꾸준히 소통하는 것을 정말 좋아합니다. 이를 통해 제품을 개선하는 데 도움이 되는 소중한 피드백을 얻을 수 있을 뿐만 아니라, 세계에서 가장 혁신적이고 미래지향적인 UX 디자이너(또는 에이전시)들로부터 직접 이야기를 들을 수 있기 때문입니다.
독일 자르브뤼켄을 기반으로 하는 독일의 선도적인 UX 디자인 에이전시 중 하나인 Centigrade처럼 말이죠.
Centigrade는 꽤 인상적인 고객사를 보유하고 있지만, 그중에서도 특히 눈에 띄는 한 곳이 있습니다. Centigrade는 최근 혁신적인 자동차 스타트업인 ELEXIR와 협력하여, 첨단 자동차 소프트웨어 스택과 쇼카의 프로토타입을 제작하고 엔지니어링했습니다.
우리는 Centigrade의 선임 비주얼 디자이너인 Marius Hubertus와 이야기를 나누며, 그가 ProtoPie와 실시간 데이터 기능을 활용해 ELEXIR의 혁신적인 비전을 어떻게 구현했는지 자세히 알아보았습니다.
한눈에 보는 Centigrade
개인적으로 저는 비주얼 디자인, 3D, 모션 디자인 분야에서 일해 온 비교적 다학제적인 배경을 가지고 있습니다. 현재 저는 Centigrade의 선임 비주얼 디자이너로, 스타트업, 중견 기업, 그리고 다양한 비즈니스 영역의 글로벌 기업들을 대상으로 서비스를 제공하는 독일 UX 에이전시에서 일하고 있습니다.
Centigrade에는 컴퓨터 과학자, 디자이너, 게임 개발자, 사용자 리서처, 심리학자 등으로 구성된 매우 다학제적인 팀이 있습니다. 이를 통해 우리는 최신 기술 혁신, 디자인 모범 사례, 심리학적 통찰을 활용한 독창적인 사용자 경험을 제공할 수 있습니다. 우리는 각 분야에서 가장 좋은 접근 방식을 조합하려고 노력합니다. 솔직히 말해, 우리의 사명은 디지털 제품의 전체 수명 주기 전반에 걸쳐 놀라움을 주는 사용자 경험을 만드는 것입니다.
ELEXIR가 찾고 있던 것
올해 초, 스스로를 “자동차 덕후”라고 부르는 스타트업 ELEXIR가 우리를 찾아와 비전을 제시했습니다. 그들은 각 사용자가 자신의 정확한 요구나 선호에 맞게 완전히 개인화할 수 있는 지속 가능한 자동차를 만들고 싶어 했습니다.
이미 이를 가능하게 해 줄 기반 소프트웨어 아키텍처와 실시간 OS를 구축해 둔 상태였습니다. 흥미로운 점은 오픈소스 방식을 채택했다는 것으로, 누구나 시스템에 기여할 수 있다는 뜻이었습니다. 고객은 말 그대로 하드웨어 요소를 직접 추가, 수정, 교체할 수 있으며, ELEXIR 팀이 추가로 개선하는 소프트웨어의 혜택도 자동으로 누릴 수 있습니다.
그들의 아이디어를 듣자마자 저는 완전히 매료되었습니다. 그들은 이미 소프트웨어 아키텍처를 구축해 두었고 차량의 모든 하드웨어 측면도 완전히 통제하고 있었습니다. 하지만 처음부터 새로운 인간-기계 인터페이스(HMI)를 만들어야 했습니다. 혁신적인 소프트웨어와 하드웨어를 시각적으로 표현해야만 이해관계자들에게 자신들이 가치 있는 무언가를 만들어냈다는 점을 설득할 수 있었습니다.
Centigrade가 ProtoPie를 선택한 이유
하드웨어 통합과 개인화에 중점을 둔 프로젝트였기 때문에, 우리는 정적 화면의 한계를 훨씬 뛰어넘는 고급 디자인 소프트웨어가 필요하다는 것을 알고 있었습니다. 기본적으로 우리는 매우 정교하고 매우 동적인 프로토타입을 만들고 싶었고, 그것은 우리의 아이디어를 사용자에게 잘 전달하고 빠르게 반복하며 극도로 짧은 시간 안에 솔루션을 도출하는 데 도움이 되어야 했습니다.
이전에 ProtoPie를 사용해 본 경험이 있었기 때문에, 이것이 이 작업에 단연 최고의 도구라는 것을 알고 있었습니다.
우리는 HMI 패널에서의 사용자 상호작용이 쇼카 내부에서 실제 물리적 효과로 이어지도록, 여러 하드웨어 장치와 화면 전반에 걸친 실시간 데이터 연결이 필요했습니다. 바로 이것이 ProtoPie가 제공하는 기능이었습니다. 게다가 우리의 마감 기한은 믿을 수 없을 만큼 촉박했습니다. 우리는 개인적으로는 빠르게 움직이되, 동시에 매끄럽게 협업할 수 있기를 원했습니다. ProtoPie를 사용하면 저와 동료들은 서로 독립적으로 작업할 수 있었고(예를 들어 컴포넌트를 만드는 방식으로), 마지막 단계에서 모든 것을 하나로 합칠 수 있었습니다.
정말 완벽한 조합이었습니다. 저와 다른 Centigrade UX 디자이너들은 각자의 구체적인 산출물에 집중하되, 마지막에는 모든 것이 잘 맞물릴 것이라는 확신 속에서 작업할 수 있었기 때문입니다.
Centigrade의 디자인 접근 방식
우리는 바퀴를 다시 발명하고 싶지도 않았고(진부한 농담이라 죄송합니다!) 사용자를 압도하고 싶지도 않았습니다. 그래서 익숙한 상호작용 메커니즘을 사용하고 각 사용 사례에 필요한 정보만 표시하여, 프로토타입에 군더더기 없는 미니멀한 느낌을 주었습니다. 그렇다고 해서 쾌락주의적인 의미에서 단순하거나 기본적이었다는 뜻은 아닙니다. 예를 들어 사용자 안내와 사용의 즐거움을 높이기 위해 3D 시각화를 사용했습니다.
또한 우리는 실제 사물의 시각적 표현을 활용해 사용자가 다양한 기능을 제어할 수 있도록 하는 데 큰 기대를 걸었습니다. 좌석 위치를 바꾸고 싶다면 화면에서 조작할 수 있지만, 실제로는 좌석이 몸 아래에서 움직이는 것을 느끼게 됩니다. 정말 멋지지 않나요?
실제 작업에 들어가다
여기서는 약간의 균형 감각이 필요했습니다. 현대 자동차 회사를 떠올리면 자연스럽게 규모와 대량 생산을 생각하게 됩니다. 하지만 그럼에도 불구하고 우리는 디자인 과정에서 최대한 민첩하게 움직이려고 했습니다.
우리는 라이브러리에 새로운 컴포넌트를 도입할 때 지속적이고 점진적인 접근 방식을 따랐습니다. 확장 가능하고 재사용 가능하게 만들면 다양한 사용 사례에 적용할 수 있다는 것을 알고 있었기 때문입니다. 그래서 우리는 원자적 접근 방식을 택해 작은 컴포넌트들을 만들었고, 그것들이 결국 더 큰 오가니즘 안에 중첩되더라도 어떤 시각 디자인의 틈도 생기지 않도록 했습니다.
유지보수성을 보장하기 위해 우리는 소프트웨어의 각기 다른 부분과 출력 장치마다 여러 파일을 사용했습니다. 이 각 파일은 모든 컴포넌트를 포함하는 총괄 글로벌 라이브러리에 연결되었습니다. 며칠씩 정적인 화면 디자인을 하는 대신, ELEXIR와 함께 시각 디자인 시스템 언어를 정의하고 이를 시험해 보기 위한 몇 개의 기본 컴포넌트를 설정한 뒤, 곧바로 ProtoPie 작업에 들어갔습니다.
이 시점부터 우리의 작업 흐름은 세 가지 주요 개발 단계로 나뉘었습니다:
시각 디자인
OBD 포트를 사용한 실시간 데이터 연결
실제 제품에 통합, 테스트 및 반복 개선
ProtoPie가 Centigrade가 ELEXIR의 비전을 구현하는 데 어떻게 도움을 주었는가
프로토타이핑은 항상 제 워크플로의 핵심이었습니다. 너무 많은 시간을 낭비하지 않고도 아이디어를 빠르게 시각화하고, 테스트하고, 반복할 수 있게 해주기 때문입니다. 이는 안전망 역할을 하며, 구현 과정에 들어가기 전에 제 아이디어가 실제로 작동하는지 검증할 수 있게 해줍니다.
수년간 저는 다양한 도구를 테스트하고 사용해 왔고, 그 과정에서 기술적 한계나 기능 부족 때문에 종종 좌절을 겪었습니다. 하지만 ProtoPie는 달랐습니다. 고급 컴포넌트 기능 덕분에 단순히 정적 화면 사이를 전환하는 수준을 넘어설 수 있습니다. 말 그대로 무엇이든 애니메이션화할 수 있습니다.
ProtoPie는 제가 다른 어떤 도구에서도 아직 경험해 보지 못한 수준의 유연성을 제공합니다. UI 컴포넌트를 개별적으로 만들면서도, 각 컴포넌트 간에 소통할 수 있게 해주는 전용 컴포넌트 라이브러리라는 단일 진실의 원천에 저장할 수 있습니다.
마지막으로, 실제 최종 제품에서(실제 쇼카 하드웨어를 사용해) 모든 것을 직접 테스트할 수 있었다는 점은 우리에게 완전히 게임 체인저였습니다.
ProtoPie를 최대한 활용하기 위한 Marius의 핵심 팁
우리는 내비게이션 시스템과 설정용으로 자동차와 그 구성 요소를 3D로 표현하고 싶었습니다. 비디오나 정적 이미지로는 충분하지 않았고, 우리가 원하는 것을 구현하려면 훨씬 더 많은 유연성이 필요했습니다.
현재 ProtoPie에 3D 데이터를 통합할 방법은 없지만, 저는 조금 조사해 보고 도구에 이미 있는 변수와 함수를 사용해 이를 구현하는 방법을 알아냈습니다(고맙습니다, Khonok Lee!). ProtoPie에는 훌륭한 디자이너들로 이루어진 강력한 커뮤니티가 있어서, 문제가 생기더라도 인터넷 어딘가에서 거의 항상 해결책을 찾을 수 있습니다.
또한 ProtoPie에서는 여러 체인, if 조건, send/response 함수, Lottie 통합 등이 많아지면 꽤 빠르게 복잡해질 수 있다는 점도 언급할 가치가 있습니다. 저는 디자이너들이 모든 레이어에 이름을 붙이고 구조 디자인을 컴포넌트로 분리할 것을 강력히 권합니다. 이처럼 거대한 프로젝트를 진행하다 보면 금세 세부 사항을 놓치게 되므로, 체계적으로 정리하고 모든 것을 깔끔하게 보관해 두는 것이 큰 도움이 됩니다.
마지막으로, 성능과 관련된 아주 작은 권장 사항 두 가지가 있습니다(하지만 걱정하지 마세요. ProtoPie의 성능은 보통 아주 훌륭합니다!):
이미지는 표시될 해상도보다 더 큰 해상도로 통합하지 마세요.
가능한 한 확장 가능한 벡터 그래픽(SVG)과 동영상 대신 Lottie 파일을 사용해 보세요.
이 두 가지를 제외하면 더 걱정할 것은 없습니다. 저희는 Centigrade에서 ProtoPie를 정말 좋아하며, 다른 모든 디자이너/에이전시에도 강력히 추천합니다. 또한 저희 UX 디자인이 전문 심사위원들에게 인정받게 되어 매우 자랑스럽습니다. 그 때문에 저희는 German UX Design Award 2022 후보로 지명되었습니다.
귀사의 조직을 위한 솔루션 살펴보기
15,000개 이상의 기업이 프로토타이핑 목표를 달성하기 위해 ProtoPie를 신뢰합니다. 데모를 예약하여 ProtoPie가 어떻게 귀사의 팀이 저희의 ProtoPie 산업 솔루션을 통해 성공하도록 도울 수 있는지 알아보세요.
