프로토타이핑은 연결된 자동차 모바일 앱을 개발하는 데 매우 중요하며, 사용자 요구를 충족하고 매끄러운 경험을 제공하도록 보장합니다.

이 글에서는 Mercedes-Benz의 자회사인 MBition이 ProtoPie를 사용해 Mercedes me 모바일 애플리케이션을 프로토타이핑하는 방법을 살펴봅니다. 디자인 프로세스, ProtoPie 컴포넌트 라이브러리로 디자인 시스템을 구축하는 방식, 그리고 연결된 자동차 경험을 프로토타이핑하는 데 ProtoPie Connect가 왜 이상적인지 알아볼 수 있습니다.

아래에서 라이브 스트리밍 「연결된 경험 프로토타이핑: Mercedes me App 살펴보기」의 녹화본을 확인하거나, 계속 읽으며 MBition의 디자인 프로세스에서 얻을 수 있는 유용한 인사이트와 워크플로 예시를 살펴보세요.

비디오

개요

1. MBition 소개: 자동차 UX 디자인의 미래를 만들어 가다

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

3. Mercedes me App이란?

4. Mercedes me App 프로토타이핑 프로세스에 대한 인사이트

5. ProtoPie 컴포넌트 라이브러리를 사용하는 9가지 모범 사례

6. ProtoPie 컴포넌트 라이브러리를 구조화하는 방법

7. ProtoPie 컴포넌트 라이브러리를 사용했을 때의 이점

8. ProtoPie Connect를 활용한 차량 내 연결 경험 프로토타이핑

MBition 소개: 자동차 UX 디자인의 미래를 만들어 가다

MBition은 자동차 사용자 경험의 미래를 만들어 가는 전담 UX 디자인 팀을 보유한 Mercedes-Benz의 자회사입니다. 베를린에서 설립되어 운영되는 MBition은 Mercedes-Benz의 소프트웨어 허브의 핵심적인 일부로서 자동차 연구개발에 적극적으로 참여하고 있습니다. 이 팀은 Mercedes-Benz 인포테인먼트 시스템을 위한 혁신적이고 매끄러운 사용자 경험을 하나의 프로토타입씩 만들어 가겠다는 야심찬 목표에 의해 움직입니다. 추가 거점인 불가리아 소피아에서도 MBition은 두 지역에 걸쳐 900명 이상의 다양한 국적의 직원을 고용하고 있습니다.

MBition이 무엇을 하는 곳인지 궁금할 수 있습니다. 이를 한 문장으로 요약하면 다음과 같습니다. "Mercedes-Benz 인포테인먼트 시스템의 미래를 설계한다." 여기서 인포테인먼트는 "information"과 "entertainment"의 결합어로, 차량의 사용자에게 하나 또는 여러 개의 디스플레이를 통해 제공되는 콘텐츠를 의미합니다.

아래 영상을 확인해 실제 사례를 살펴보세요.

비디오

눈썰미가 좋다면 영상에 등장한 자동차의 인포테인먼트 요소 중 몇 가지를 알아차렸을 것입니다. 예를 들면

• 계기판;

• HUD(헤드업 디스플레이);

• HU(헤드 유닛);

• PD(조수석 디스플레이).

Mercedes-Benz 인포테인먼트 시스템.

영상에서는 또 하나의 제품인 Mercedes me App도 확인할 수 있는데, 이는 다음 섹션에서 더 자세히 살펴보겠습니다.

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

Mercedes me App이란?

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

2020년 10월, Mercedes me App은 Mercedes-Benz 소유자를 위한 동반 앱으로 소개되었습니다. 이 앱을 통해 사용자는 차량 제어와 상태 확인을 포함한 여러 방식으로 자동차와 상호작용할 수 있습니다. 사용자는 차량을 앱과 페어링하고, 원격 엔진 시동(Remote Engine Start), 원격 도어 잠금 및 잠금 해제(Remote Door Lock and Unlock), 차량 위치 찾기(Locate Vehicle) 등의 서비스를 이동 중에도 이용할 수 있습니다.

라이브 스트리밍 연결된 경험 프로토타이핑: Mercedes me App 살펴보기에서는 MBition의 UI/UX 디자이너인 Szymon Kościelniak와 Feri Irsanto Pujianto와 이야기를 나누었습니다. 이들은 자신의 디자인 스택에서 핵심 도구로 사용하는 ProtoPie의 활용 인사이트와 모범 사례를 공유했습니다.

"Mercedes me는 제가 MBition에서 ProtoPie로 처음 프로토타입을 만든 제품이었습니다,"라고 Szymon은 말합니다. "여러 도구를 시도해 봤지만, 결국 ProtoPie를 선택했고 지금도 매우 만족하며 사용하고 있습니다."

Mercedes me App 프로토타이핑에 ProtoPie가 완벽한 선택이었던 이유.

그는 프로토타이핑을 시작할 때 처음부터 제대로 만들고 싶었다고 설명합니다. 그 이유는 다음과 같은 한계를 알고 있었기 때문입니다.

• 비교적 작은 팀 규모;

• 시간 압박;

• 이해관계자를 설득하기 위한 고충실도 프로토타입의 필요성.

MBition 팀은 Sketch의 컴포넌트 라이브러리를 포함한 디자인 시스템 등 탄탄한 기반을 갖추고 있었습니다. 그러나 새로운 기능이 정기적으로 출시되면서 디자이너들은 테스트 케이스를 끊임없이 검증해야 했습니다. 다시 말해, 빠르고 쉽게 기능적이며 인터랙티브한 프로토타입을 개발할 수 있는 고충실도 프로토타이핑 도구가 필요했고, 그 결과 ProtoPie를 선택하게 되었습니다.

Mercedes me App 프로토타이핑 프로세스에 대한 인사이트

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

아래는 홈 탭을 보여 주는 프로토타입입니다. 현재 상태에서 사용자는 차량 잠금 기능을 조작할 수 있습니다.

Mercedes me App 프로토타입의 워크플로 예시.

1. Sketch 콘셉트 사용하기

"예를 들어 프로토타입을 확장해서 원격 엔진 기능을 추가하고 싶다고 해봅시다,"라고 Feri는 말합니다. "우리는 먼저 콘셉트 팀이 만든 기능 콘셉트를 살펴봅니다. 이 예시에서는 콘셉트가 단순화되어 있습니다."

아래 콘셉트에는 시작 버튼을 누르면 페이지가 대기 상태로 전환되고, 이후 정지 버튼이 포함된 사용자 인터페이스로 엔진이 시작되는 흐름이 담겨 있습니다.

원격 엔진 기능의 워크플로 예시.

2. 템플릿 사용하기

"우리는 미리 만들어 둔 템플릿을 사용해 ProtoPie에서 제작을 시작합니다. 이 템플릿은 페이지의 다양한 패턴을 보여 줍니다,"라고 Feri는 말합니다. "즉, 템플릿은 디자인 레이아웃뿐만 아니라 기본 상호작용의 로직도 포함하고 있습니다."

다음 단계는 아래와 같습니다.

• 적절한 템플릿 찾기.

• 씬을 자신의 프로필로 복사하기.

• 모든 항목(예: 변수, 값, 경고) 이름 바꾸기.

• 같은 로직을 기준으로 변수가 정상 동작하는지 확인하기.

• 만들고자 하는 기능에 맞게 씬 이름을 바꾸고, 자리표시자 제목을 대체하기.

• 아이콘, 버튼 라벨, 기타 일반 텍스트를 교체하기.

• Tap 트리거와 Jump 응답 추가하기.

• 홈 탭에서 Tap 트리거를 복제하기.

• 원격 엔진 페이지로 이동하는 Jump 응답 만들기.

팀은 먼저 디자인 레이아웃과 기본 상호작용 로직이 포함된 사전 정의 템플릿을 사용했습니다.

3. Sketch 내보내기 기능 사용하기

경우에 따라 프로토타입에서 해당 요소가 인터랙티브할 예정이 아니라면 컴포넌트가 필요하지 않을 수 있습니다. "그런 경우에는 내보내기 기능을 사용하거나 [ProtoPie] 플러그인을 통해 Sketch에서 직접 요소를 내보낼 수 있습니다,"라고 Feri는 말합니다.

그림에서는 엔진이 활성화되었을 때 정보 라인과 셀 아이템 요소가 보여야 합니다.

Sketch에서 내보낼 때 어떤 요소를 내보낼지 선택할 수 있습니다.

이 과정에는 다음 단계가 포함됩니다.

• 엔진 상태에 따라 긍정 응답을 사용하기.

• 제약 조건과 관련된 모든 설정을 구성해 하단에 유지되도록 하기.

• 명확한 신호를 위해 컨테이너와 요소 이름을 바꾸기.

• 모든 항목의 용량을 0으로 설정하기.

• 활성화되었을 때 하단 액션 바를 어떻게 스케일할지 결정하고, 값을 저장하기(이 경우 206).

• 엔진 상태에 따라 하단 액션 바의 높이를 206으로 조정하고, 정보 라인과 셀 아이템에는 반대 응답을 적용하기. 이 경우 둘 다 100으로 설정됩니다.

• 응답의 이름을 바꿔 명확성을 확보하기.

• 그다음 비활성 상태와 엔진 상태에 대해 반대로 처리하고, 0으로 변경한 뒤 하단 액션 바를 다시 150으로 조정하기.

ProtoPie 컴포넌트 라이브러리를 사용하는 9가지 모범 사례

MBition 팀은 프로토타이핑 접근 방식으로 ProtoPie 컴포넌트 라이브러리를 사용하기로 결정했습니다.

모바일 앱 프로토타이핑 과정에서 팀의 디자인 워크플로를 더 생산적이고 투명하게 만드는 데 도움이 되는 몇 가지 모범 사례를 정립했고, 이를 통해 기능적 프로토타입을 개발하는 데 필요한 시간과 노력을 줄일 수 있었습니다.

변수, 조건, 트리거, 응답의 이름을 명확히 하는 것은 잘 정리된 컴포넌트 라이브러리를 구축하는 핵심입니다.

1. 변수 이름을 지정하세요

변수 앞에 접두사(예: “int_”, “str_”, “bool_”)를 붙이면, 매번 인스펙터를 클릭해 확인하지 않아도 변수 유형을 훨씬 빠르게 식별할 수 있습니다.

2. 조건 이름을 지정하세요

비슷한 방식으로, 조건의 이름을 지정하면 팀의 다른 사용자들에게도 더 높은 투명성을 제공합니다.

3. 트리거와 응답의 이름을 지정하세요

더 빠르게 로직을 파악하려면 트리거와 응답에도 이름을 붙이세요.

라이브러리를 더 작은 논리적 단위로 나누면 협업이 쉬워지고 라이브러리 업로드도 빨라집니다.

4. 여러 라이브러리를 사용하세요

MBition 팀은 컴포넌트가 많았기 때문에 라이브러리를 더 작고 논리적인 단위로 분할하는 것이 유용했습니다. 이렇게 하면 협업 방식이 가능해지고 라이브러리 업로드 속도도 빨라져, 여러 팀원이 서로 다른 영역을 동시에 작업할 수 있습니다.

5. 이름/배경 색상 체계를 사용하세요

MBition은 라이브러리 안에서 특정한 이름 규칙과 색상 코드를 사용해 라이브러리/컴포넌트 간 차이를 강조했습니다.

6. 트리거를 그룹화하세요

트리거를 논리적인 단위로 그룹화하는 것은 로직이 많아 더 나은 개요가 필요한 경우 특히 유효합니다. 또한 컴포넌트 전반의 일관성을 유지해 더 생산적인 워크플로를 가능하게 합니다.

하드 코딩 대신 동적 값을 사용하는 것은 유연성을 유지하고 싶을 때 특히 중요합니다.

7. 하드 코딩된 값을 피하세요

유연성을 유지하고 싶다면 하드 코딩 대신 동적 값을 사용하는 것이 특히 중요합니다.

"많은 사용자가 하드 코딩을 선호하는 것을 봤습니다. 그런데 프로토타입으로 다시 돌아오면, 요소가 조금만 이동했을 뿐인데도 프로토타입을 다시 만들어야 하는 경우가 많습니다,"라고 Szymon은 말합니다.

8. 대소문자 구분 없는 조건을 사용하세요

대소문자 구분을 제거하면 덮어쓸 수 있는 변수를 조금 더 견고하게 만들 수 있습니다.

"우리는 조건 안의 문자열 값을 같은 형식으로 맞추려고 합니다,"라고 Szymon은 말합니다. "예를 들어 항상 대문자를 사용합니다. 누군가 소문자로 쓰든 camel case로 시작하든, 결국에는 상관없습니다."

9. 컴포넌트를 문서화하세요

ProtoPie의 컴포넌트 가이드 기능은 팀원이 참고할 수 있도록 컴포넌트를 문서화하는 도구로 유용합니다.

MBition에서는 스타일링이 문서의 투명성을 높여 주며, 이는 라이브러리에 기여하는 사용자나 여러 동료와 함께 작업할 때 매우 중요합니다.

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

MBition 팀은 컴포넌트 라이브러리를 더 작은 단위로 분할했습니다. 아래는 컴포넌트 라이브러리를 구성하는 다양한 카테고리를 보여 주는 그림이며, 이어서 서로 어떤 관계로 나타날 수 있는지 설명합니다.

컴포넌트 라이브러리는 Helper, Assets, Logic 기반 라이브러리로 나뉘었습니다.

동적 컴포넌트는 텍스트 스타일과 같은 Helper 및 Asset 라이브러리의 요소를 포함할 수 있습니다.

예를 들어 오른쪽 하단에서 볼 수 있듯이, 동적 컴포넌트는 텍스트 스타일과 같은 Helper 및 Asset 라이브러리의 요소를 포함할 수 있습니다.

각 라이브러리를 살펴보겠습니다.

1. Helper 라이브러리

Helper는 순수하게 기능 중심이며 데이터를 받았다가 다시 돌려주는 용도로 설계됩니다. 디자인 요소를 포함하지 않으며 자산이나 다른 컴포넌트도 없습니다. 일반적으로 Helper는 다른 컴포넌트 내부의 자식 요소로 사용됩니다.

일반적으로 Helper는 다양한 컴포넌트 내부의 자식 요소로 사용됩니다.

간단한 예로는 타이머가 끝나면 신호를 보내는 타이머 Helper가 있습니다.

더 복잡한 예로는 Sketch나 Figma 같은 디자인 도구의 레이어 스타일 기능을 복제하는 레이어 스타일 Helper가 있습니다. 이 Helper는 색상 코드를 입력으로 받아 대응하는 hex 코드를 출력하며, 라이트 모드와 다크 모드 스타일을 모두 처리합니다. 스타일 Helper의 핵심 이점은 모든 컴포넌트를 동시에 제어할 수 있어 각 컴포넌트의 색상을 개별적으로 변경할 필요가 없다는 점입니다. 이때 ProtoPie의 parseJson 함수가 유용하게 쓰이는데, 색상 코드와 값 같은 핵심 정보를 관리하고 검색하는 효율성을 높여 주기 때문입니다.

라이트 모드와 다크 모드.

2. Asset 라이브러리

Asset 라이브러리는 다음을 포함한 다양한 컴포넌트의 집합입니다.

• 아이콘: 아이콘은 최소한의 로직만 사용하므로 ProtoPie의 override 기능을 통해 쉽게 교체할 수 있습니다. 이들은 색상을 초기화하고, 부모 컴포넌트로부터 색상 설정값을 받아들이며, Helper의 도움을 받아 색상을 적용하는 역할을 합니다.

• 텍스트 스타일 컴포넌트: 아이콘과 유사한 로직을 따르지만 추가 기능이 있습니다. 디자인 시스템을 모방하며, 부모 컴포넌트로부터 setter를 받아 텍스트를 수정할 수 있습니다. 또한 이 컴포넌트는 텍스트 길이에 따라 자동으로 크기를 다시 조정하거나 레이아웃을 조정하고, 자신의 높이를 부모에게 다시 전달합니다.

• 정적 컴포넌트: 최소한의 로직만 필요하며 주로 색상 초기화와 스타일링에 집중합니다. 색상 적용을 위해 Helper를 사용하고, 라이트 모드와 다크 모드에 맞는 특정 스타일을 가질 수 있습니다. 이러한 컴포넌트는 벡터, PNG 또는 비디오 자료로 구성되며, 컴포넌트 로직을 방해하지 않으면서 시각적 디자인 변경을 쉽게 적용할 수 있습니다.

아이콘 컴포넌트 라이브러리.

3. Logic 기반 라이브러리

동적 컴포넌트는 다른 라이브러리 또는 같은 라이브러리의 컴포넌트를 중첩할 수 있습니다.

동적 컴포넌트는 기능을 위한 로직을 저장하며, 다른 라이브러리 또는 같은 라이브러리의 컴포넌트를 중첩할 수 있습니다. 이들은 부모와 자식 컴포넌트 간 신호를 전달하고, 상태와 같은 덮어쓸 수 있는 변수를 가질 수 있습니다.

예시는 다음과 같습니다.

• Control Slider 컴포넌트는 상태와 위치에 대한 변수를 저장합니다. setter를 사용해 부모 컴포넌트가 이를 덮어쓸 수 있으며, 값은 부모에게 다시 전달됩니다. 성공적인 상호작용은 부모에게 신호를 트리거합니다.

• 마찬가지로 Slider 및 Status Line 컴포넌트는 상태, 위치, status, 제목, 부제목 변수들을 저장합니다. 부모가 이를 덮어쓸 수 있습니다. Status Line 컴포넌트는 텍스트 높이에 따라 자동으로 크기 조정도 수행합니다.

• 컴포넌트를 결합하면 서로 다른 컴포넌트가 send/receive 개념을 통해 통신하여 상호작용을 가능하게 합니다. 예를 들어 토글 슬라이더는 도어의 열림과 닫힘 상태를 설정하는 역할을 합니다. 상태에 따라 신호는 status line, 자동차 일러스트레이션 컴포넌트, 슬라이더 자체와 같은 개별 컴포넌트로 배분됩니다.

반면 지도 컴포넌트는 지도 전용의 Logic 기반 컴포넌트입니다. 이는 동적 컴포넌트 라이브러리와 동일한 개념을 더 큰 규모로 사용합니다.

Mercedes me App에서 사용된 지도 컴포넌트 예시.

위 예시의 모든 요소는 컴포넌트 라이브러리에서 가져온 것입니다. 장치 회전을 감지하기 위해 자이로스코프 센서를 사용하며, "focus into" 상호작용을 위해 사용자와 차량 위치의 좌표를 활용합니다.

위 예시의 모든 요소는 컴포넌트 라이브러리에서 가져온 것입니다. 장치 회전을 감지하기 위해 자이로스코프 센서를 사용하며, "focus into" 상호작용을 위해 사용자와 차량 위치의 좌표를 활용합니다.

ProtoPie 컴포넌트 라이브러리를 사용했을 때의 이점

Feri는 초기 단계부터 디자인 팀이 "고충실도 프로토타이핑의 단점, 예를 들어 프로토타입 제작에 드는 높은 노력과 낮은 유지보수성 등을 최소화해야 한다"는 점을 알고 있었다고 전합니다. 그는 ProtoPie에서 컴포넌트 라이브러리를 활용한 프로토타이핑 접근 방식이 여러 가지 이점을 제공했다고 말합니다.

• 시간을 절약합니다. 이러한 접근 방식을 사용하면 팀은 일반적으로 처음부터 프로토타입을 만들 때 들였을 많은 시간을 절약할 수 있습니다.

• 유지 관리가 쉽습니다. 가이드라인과 공통 규칙/루틴 덕분에 MBition 팀은 더 큰 프로토타입도 관리할 수 있습니다.

• 사용자 중심적입니다. 다른 동료들이 프로토타입 작업에 참여하려 해도 더 적은 마찰로 합류할 수 있습니다.

• 확장 가능합니다. 콘셉트가 성숙함에 따라 더 많은 기능을 프로토타입에 추가할 수 있습니다.

• 협업에 적합합니다. 서로 다른 사람들이 병합 충돌을 일으키지 않고 각기 다른 라이브러리에서 작업할 수 있습니다.

• 코드가 필요 없습니다. 고충실도 상호작용은 코딩이 아니라 논리적 사고만 있으면 됩니다.

ProtoPie에서 컴포넌트 라이브러리를 사용할 때의 이점.

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

Mercedes-Benz 생태계 안의 Bridge 앱 및 ProtoPie Connect.

그렇다면 MBition의 맥락에서 **연결된 경험 **이란 무엇일까요?

이 글의 시작 부분에 나온 영상에서는 자동차 안에서 찾을 수 있거나 자동차와 연동해 사용할 수 있는 여러 장치가 등장했습니다. ProtoPie Connect 덕분에 이러한 모든 장치를 대상으로 프로토타입을 만들고, 심지어 서로 통신하게 만드는 것도 가능합니다.

브리지 앱을 사용해 자동차 데이터나 다양한 상호작용 지점을 프로토타입에 공급하는 것도 가능합니다.

"좋은 점은 적절한 설정만 갖추면 모바일 기기, 태블릿, 노트북은 물론 실제 차량에서도 동일한 프로토타입을 테스트할 수 있다는 것입니다,"라고 Szymon은 말합니다.

Szymon은 덧붙입니다. "ProtoPie Connect가 있다면 이 거대한 가능성의 세계를 꼭 탐험해 보시길 추천합니다. 시간을 내서 사용해 보고, 이것저것 시도해 보며, 직접 브리지 앱을 만들어 보세요."

마지막으로 영상으로 잠시 돌아가 보겠습니다. Lewis Hamilton의 손에 들려 있던 휴대폰을 기억하시나요?

정답입니다. 그 프로토타입은 ProtoPie로 제작되었습니다.

ProtoPie로 만든 프로토타입.

ProtoPie로 자동차 사용자 경험 개선하기

자동차 UX 프로토타이핑은 자동차 산업의 발전과 혁신에 필수적입니다. 이를 통해 기업은 새로운 아이디어를 현실화하고, 디자인을 다듬고, 사용자 경험을 향상시킬 수 있습니다.

ProtoPie를 사용하면 기업은 개발 시간을 획기적으로 줄이고, 디자인 팀과 엔지니어링 팀 간 협업을 촉진하며, 고객을 사로잡는 최첨단 차량을 제공할 수 있습니다. 데모를 예약하고 ProtoPie가 차량 내 프로토타이핑 프로세스를 어떻게 혁신할 수 있는지 알아보세요.