[기업 사례] Mercedes Me App: 자동차 UX 프로토타이핑

2025. 2. 24.

Mercedes Me App 프로토타이핑

프로토타이핑은 커넥티드 카 모바일 앱을 개발하는 데 필수적인 과정으로, 사용자 요구를 충족하고 원활한 경험을 제공하는 데 중요한 역할을 합니다.

이 기사를 통해 Mercedes-Benz의 자회사인 MBition이 ProtoPie를 활용하여 Mercedes me 모바일 애플리케이션을 프로토타이핑하는 방법을 소개합니다. MBition의 디자인 프로세스, ProtoPie 컴포넌트 라이브러리를 활용한 디자인 시스템 구축 방법, 그리고 ProtoPie Connect가 자동차 연결 경험을 위한 최적의 프로토타이핑 도구인 이유를 확인해 보세요.

아래에서 "Prototyping Connected Experiences: A Look at the Mercedes me App" 라이브 스트리밍 녹화 영상을 시청하거나, 기사를 통해 MBition의 디자인 프로세스에서 얻을 수 있는 유용한 인사이트와 워크플로우 예시를 살펴보세요.

MBition: 미래 자동차 UX 디자인을 구축하는 팀

MBition은 Mercedes-Benz의 자회사로, 자동차 사용자 경험(UX) 디자인을 주도하는 팀입니다. 독일 베를린에 본사를 두고 있으며, Mercedes-Benz의 소프트웨어 허브의 핵심 부분으로 자동차 연구 및 개발에 적극 참여하고 있습니다. MBition 팀은 900명 이상의 다국적 직원이 함께 일하며, 베를린뿐만 아니라 불가리아 소피아에도 개발 허브를 운영하고 있습니다.

MBition의 목표는 Mercedes-Benz 인포테인먼트 시스템의 미래를 설계하는 것입니다. 인포테인먼트란 "정보(Information)"와 "엔터테인먼트(Entertainment)"의 결합어로, 차량 내 여러 디스플레이를 통해 제공되는 콘텐츠를 의미합니다.

아래 영상을 확인하여 실제 적용 사례를 살펴보세요.

영상 속 차량에서 인포테인먼트 요소를 주의 깊게 살펴보면 다음과 같은 구성 요소를 확인할 수 있습니다.

계기판(Instrument Cluster)
HUD(헤드업 디스플레이, Head-up Display)
HU(헤드 유닛, Head Unit)
PD(탑승자 디스플레이, Passenger Display)

영상에서 또 다른 프로덕트, Mercedes Me 어플리케이션을 확인하실 수 있습니다. 그럼 바로 Mercedes Me 어플리케이션에 대해 더 자세하게 알아보겠습니다.

Mercedes Me App 프로토타이핑: MBition의 혁신적인 접근 방식

Mercedes Me App이란?

Mercedes Me 앱은 Mercedes-Benz 차량 소유자를 위한 동반 앱으로, 2020년 10월에 처음 출시되었습니다.

이 앱을 통해 사용자는 차량과 상호 작용할 수 있으며, 차량 원격 제어 및 상태 확인 기능을 제공합니다. 대표적인 기능으로는 원격 엔진 시동(Remote Engine Start), 원격 도어 잠금 및 해제(Remote Door Lock & Unlock), 차량 위치 찾기(Locate Vehicle) 등이 있으며, 사용자는 이동 중에도 차량을 쉽게 관리할 수 있습니다.

MBition의 UI/UX 디자이너 Szymon Kościelniak과 Feri Irsanto Pujianto는 라이브 스트리밍 세션 Prototyping Connected Experiences: A Look at the Mercedes me App를 통해 ProtoPie를 Mercedes Me 앱의 프로토타이핑 도구로 선택한 이유를 다음과 같이 설명합니다.

"Mercedes Me는 MBition에서 처음 ProtoPie로 프로토타이핑한 제품이었습니다. 여러 도구를 시도했지만, 결국 ProtoPie를 선택하게 되었고 매우 만족하고 있습니다."
— Szymon Kościelniak, MBition UI/UX 디자이너

MBition 팀은 이미 Sketch 기반의 디자인 시스템과 컴포넌트 라이브러리 등 탄탄한 기반을 갖추고 있었지만 새로운 기능이 지속적으로 추가되며 다음과 같은 과제에 직면하게 되었고 프로토타이핑 툴에 대한 니즈가 커졌습니다.

소규모 팀: 인력이 제한된 환경에서 빠르고 효율적인 프로토타이핑 필요
시간 압박: 빠른 반복 테스트가 가능한 고충실도 프로토타이핑 필수
고충실도 프로토타입: 이해관계자를 설득할 수 있는 기능적 프로토타입 필요

Mercedes Me App 프로토타이핑 프로세스 인사이트

이제 MBition에서 모바일 앱 프로토타입을 제작하는 워크플로우를 살펴보겠습니다.

아래는 홈 탭(Home Tab)의 프로토타입 예시입니다. 현재 상태에서는 사용자가 차량 잠금 기능을 조작할 수 있습니다.

MBition은 Mercedes Me 앱의 프로토타입을 만들 때 다음과 같은 3단계 워크플로우를 따릅니다.

Sketch 컨셉 사용
- 컨셉 팀이 정의한 기능을 바탕으로 프로토타이핑 시작
- 간단한 예시: 시작 버튼을 누르면 페이지가 보류 상태로 전환되고, 이후 엔진이 가동되며 정지 버튼이 포함된 사용자 인터페이스가 표시되는 과정 포함
템플릿 활용
- 기존에 구축된 ProtoPie 템플릿을 활용하여 페이지 구조와 기본 인터랙션을 설정
- 적절한 템플릿을 선택 후 복사하여 새로운 기능에 맞게 수정
Sketch 내보내기 기능 사용
- Sketch에서 디자인 요소를 플러그인을 통해 ProtoPie로 직접 내보내어 상호작용하지 않는 요소를 쉽게 반영

ProtoPie 컴포넌트 라이브러리를 활용한 9가지 활용 사례

MBition 팀은 ProtoPie 컴포넌트 라이브러리를 활용하여 프로토타이핑을 더욱 효율적으로 만들었습니다.

컴포넌트 라이브러리를 최적화하는 9가지 팁

변수에 이름 지정 ("int_", "str_", "bool_" 등)
조건문에 이름 지정 (가독성 향상 및 투명성 유지)
트리거 및 리스폰스에 이름 지정 (논리적 구조 정리)
다중 라이브러리 사용 (협업 및 업로드 속도 개선)
배경 색상 및 이름 규칙 사용
트리거 그룹화 (일관된 작업 흐름 유지)
하드 코딩 값 피하기 (유연성 유지)
대소문자 무관한 조건문 사용
컴포넌트 문서화 - 컴포넌트 가이드 활용

ProtoPie 컴포넌트 라이브러리 구조화 방법

MBition 팀은 컴포넌트 라이브러리를 작은 단위로 분류하여 더욱 체계적인 구조를 만들었습니다.
다음은 이들의 컴포넌트 라이브러리를 구성하는 다양한 카테고리와, 각 라이브러리가 어떻게 연결되는지 보여줍니다.

예를 들면 동적 컴포넌트(Dynamic Component)는 하단 우측에서 볼 수 있듯이 Helper 및 Asset 라이브러리의 요소(예: 텍스트 스타일 등)를 포함할 수 있습니다.

그럼 각 라이브러리를 자세하게 살펴 보겠습니다.

1. Helper 라이브러리

Helper 라이브러리는 데이터 수신 및 반환에 초점을 맞춘 기능적 컴포넌트로, 디자인 요소(아이콘, 이미지 등)를 포함하지 않으며 다른 컴포넌트의 자식 요소로 사용됩니다.

예시

✔ 타이머 헬퍼(Timer Helper)

일정 시간이 지나면 신호를 보내는 간단한 헬퍼 컴포넌트

✔ 레이어 스타일 헬퍼(Layer Style Helper)

Sketch 또는 Figma와 같은 디자인 툴의 레이어 스타일 기능을 재현
색상 코드를 입력하면 헥사 코드(hex code)를 출력하며, 라이트 모드 & 다크 모드 스타일 지원
하나의 헬퍼로 모든 컴포넌트의 스타일을 동시에 관리하여 디자인 유지보수 효율성 향상
ProtoPie의 parseJson 함수를 활용해 컬러 코드 및 값 효과적으로 관리

2. Asset 라이브러리

Asset 라이브러리는 다양한 시각적 요소를 포함하는 컴포넌트 모음으로, 다음과 같은 요소들을 포함합니다.

주요 Asset 요소

✔ 아이콘(Icons)

최소한의 로직을 사용하여 Override 기능을 통해 쉽게 변경 가능
부모 컴포넌트에서 색상 값을 받아 적용하는 구조

✔ 텍스트 스타일(Text Style Components)

아이콘과 비슷한 원리로 작동하지만, 추가적인 기능 포함
디자인 시스템을 모방하여 텍스트 스타일 변경 혹은 크기 자동 조정
텍스트 길이에 따라 자동으로 크기 조절, 부모 컴포넌트에 높이 값 전달

✔ 정적인 컴포넌트(Static Components)

기본적인 스타일/컬러 초기화, 라이트 모드 & 다크 모드 스타일 지원
벡터(Vector), PNG, 비디오 등의 요소를 포함하여, 디자인 변경 시에도 컴포넌트 논리를 방해하지 않고 수정 가능

3. Logic 기반 라이브러리

동적(Dynamic) 컴포넌트는 기능을 담당하는 논리적 컴포넌트로, 다른 라이브러리의 요소들을 포함하거나 독립적으로 로직을 구성할 수 있습니다.

예시

✔ 컨트롤 슬라이더(Control Slider)

상태(state) 및 위치(position) 값을 저장하며, 부모 컴포넌트에서 값 설정 가능
상호작용이 성공하면 부모 컴포넌트로 신호 송신

✔ 슬라이더 & 상태 라인(Slider & Status Line Components)

상태(state), 위치(position), 제목(title), 부제목(subtitle) 등의 변수를 저장하며, 부모 컴포넌트에서 설정 가능
텍스트 길이에 따라 자동으로 크기 조절(auto-scale) 기능 포함

✔ 토글 슬라이더(Toggle Slider) – 도어 상태 설정 예시

차량 도어의 열림/닫힘 상태를 변경하는 역할을 합니다.
토글 상태에 따라 Status Line, 차량 일러스트, 슬라이더 등과 상호작용합니다.

✔ 맵(Map) 컴포넌트 – 지도 기반 동적 요소

맵 컴포넌트는 Logic 기반 라이브러리를 활용한 지도 관련 동적 요소입니다.
사용자 및 차량의 위치 좌표를 활용해 "포커스 인(Focus Into)" 인터랙션을 구현합니다.
자이로스코프 센서(Gyroscope Sensor)를 사용해 디바이스 회전 감지 기능을 추가할 수도 있습니다.

ProtoPie 컴포넌트 라이브러리 활용의 이점

Feri는 ProtoPie 컴포넌트 라이브러리를 활용한 프로토타이핑이 다음과 같은 이점을 제공한다고 강조했습니다.

✅ 시간 절약: 템플릿과 가이드라인을 활용해 기존 프로토타입을 수정하는 시간 절감

✅ 유지보수 용이: 일관된 명명 규칙과 공통된 설계 방식 적용

✅ 사용자 중심: 다른 팀원들이 쉽게 적응할 수 있는 구조

✅ 확장 가능: 새로운 기능 추가가 용이한 확장성(Scalability) 지원

✅ 협업 최적화: 여러 명이 동시에 작업 가능, 충돌(Merge Conflict) 방지

✅ 코딩 없이 고충실도(High-fidelity) 인터랙션 구현: 논리적인 사고만으로 고급 프로토타이핑 가능

ProtoPie Connect를 활용한 자동차 연결 경험 프로토타이핑

ProtoPie Connect를 통해 MBition은 차량 내부 디스플레이뿐만 아니라 스마트폰, 태블릿, 노트북, 심지어 실제 차량에서도 동일한 프로토타입을 테스트할 수 있으며 더 나아가서 서로 통신이 가능하도록 구현할 수 있습니다.

ProtoPie Connect의 장점

브릿지 앱을 통한 다양한 디바이스 간 데이터 송수신 가능
차량 데이터를 활용한 실시간 피드백 적용 가능
여러 기기에서 동시에 테스트 가능

"ProtoPie Connect를 활용하면 모바일, 태블릿, 차량 내 실제 환경에서 동일한 프로토타입을 테스트할 수 있습니다. Connect의 놀라운 기능들을 직접 사용하고 브릿지 앱을 만드는 것을 강력히 추천합니다."
— Szymon Kościelniak, MBition UI/UX 디자이너