Gojek은 음식과 티켓부터 배달 기사 고용까지 무엇이든 구매할 수 있게 해주는 인도네시아의 슈퍼 앱입니다.
당연히 Gojek에는 자체 디자인 시스템이 필요합니다. 이 회사는 하나의 생태계 아래 여러 모바일 제품을 보유하고 있으므로, 모든 제품에 걸쳐 사용할 수 있는 간결하고 일관된 디자인 시스템이 중요합니다. 일관성이 전부입니다.
ProtoPie의 장점 중 하나는 팀원들이 각 컴포넌트를 처음부터 다시 만들 필요 없이 고충실도 프로토타입을 만들 수 있다는 점입니다. 또한 이러한 컴포넌트에는 변수와 조건이 포함됩니다.
Gojek은 더 큰 디자인 시스템 내에서의 사용 방식에 따라 서로 다른 변수와 조건을 갖춘, 다양한 제품과 상황에서 사용할 수 있는 작동 가능한 변수를 만들었습니다.
ProtoPie 웨비나 게스트 연사 리야디 라흐만과 루트피 에리안도.
Gojek이 ProtoPie에서 변수를 사용하는 방법
변수란 무엇일까요? 텍스트, 숫자, 색상 등 데이터를 저장하는 데 쓰이는 컨테이너입니다. 특정 트리거나 동작으로 다시 할당할 수 있습니다. 예를 들어 이메일처럼 재사용 가능한 데이터를 입력할 수 있습니다.
변수는 값을 저장하는 “바구니”입니다.
Gojek은 여러 방식으로 변수를 사용합니다.
1. 예약 상태 변수.** **변수에 값을 채워 넣고 이에 대응하는 트리거와 응답을 만들어서
2. 계산을 자동화하기 위해. 예를 들어 타이머
3. 컴포넌트를 동적으로 만들기 위해
여기에서 Gojek 제품 디자이너 Riyadhi와 인터랙션 디자이너 Luthfi가 업무 흐름에서 ProtoPie의 조건과 변수를 어떻게 사용하는지 확인할 수 있는 전체 영상을 볼 수 있습니다.
Gojek이 ProtoPie에서 조건을 사용하는 방법
조건이란 무엇일까요? 충족되면 동작을 트리거하는 매개변수입니다.
ProtoPie는 하나의 조건 아래 여러 매개변수를 허용합니다. 비교를 위한 다양한 옵션도 있습니다. 즉, 한 값을 다른 값과 비교하는 데 사용되는 것들입니다. 완전히 코드로 구현된 최종 제품을 그대로 재현하는 조건을 만들고 싶을 때 유용합니다.
조건은 충족되면 동작을 트리거하는 매개변수입니다.
Gojek이 예약 상태 변수의 변화를 감지하는 트리거를 만들고 싶다고 해봅시다. 트리거를 추가합니다. 값이 올바른지 확인하는 조건을 추가합니다. 마지막으로, 값에 따라 변화를 트리거할 수 있는 응답을 추가합니다.
Gojek의 버튼 활용이 좋은 예입니다. 이 유형의 버튼은 보통 활성 상태와 비활성 상태 두 가지를 가집니다. 적절한 시점과 올바른 조건에서 활성화되어야 합니다. 즉, 버튼이 활성화되기 전에 필드가 채워져 있어야 합니다.
조건부 트리거를 사용해 버튼 상태를 변경하기.
버튼이 채워졌는지 감지하는 조건과, 그 결과로 버튼 색상을 변경하는 트리거 응답을 추가합니다.
마지막으로, 조건을 사용해 사용자를 특정 조건에 따라 서로 다른 흐름으로 안내하는 분기를 제공합니다. 가장 좋은 점은? 트리거는 하나만 사용한다는 것입니다. 먼저 버튼을 누를 때의 트리거를 추가합니다. 사용자가 A 또는 B를 선택했는지 확인하는 조건을 추가합니다. 마지막으로 이 분기들을 서로 다른 조건에 연결합니다.
Gojek이 ‘state’ 변수를 만든 이유
가장 흔한 컴포넌트인 버튼을 보세요. Gojek은 state, theme, loading과 같은 여러 변수를 만들었습니다.
버튼에는 활성과 비활성 두 가지 상태가 있습니다. Gojek 팀은 ‘state’ 변수를 만들고, 각 상태와 그에 대응하는 응답에 대해 두 개의 조건을 가진 트리거를 설정했습니다. 트리거되면 텍스트와 컨테이너 색상이 변경됩니다.
버튼이 비활성 상태로 유지되도록 해야 했습니다. 그래서 ‘state’ 변수를 매개변수로 사용하여 Tap 트리거에 조건을 설정했습니다.
‘loading’ 상태를 조정할 때도 같은 방식을 사용합니다. ‘loading’ 상태는 버튼을 탭한 후에만 가능하므로, loading 변수를 매개변수로 사용하는 Tap 트리거에 조건을 설정하고 그에 따를 응답을 지정했습니다.
버튼 컴포넌트 내에서 변수를 사용해 테마를 변경하기.
ProtoPie가 Gojek의 제품 접근성을 높이는 데 어떻게 도움이 되는가
접근성 향상은 Gojek의 디자인 원칙 중 하나입니다.
다행히 ProtoPie의 Speak 기능 덕분에 시각 장애가 있는 사용자에게 프로토타입을 테스트하고 빠르게 피드백을 수집할 수 있었습니다.
Gojek은 씬에서 개별적으로 식별할 수 있는 ‘selection highlight’ 컴포넌트를 만들었습니다. 이 컴포넌트에는 순서에 따라 구체적으로 식별할 수 있는 ID 변수가 있었습니다.
ProtoPie Studio에서 ‘selection highlight’ 컴포넌트 만들기.
씬 내에서 어떤 항목이 선택되고 있는지 지정하는 데 사용할 수 있는 변수를 만들었습니다. 이름은 ‘item’이었습니다.
‘item’ 변수의 값을 변경하기 위해 Fling 트리거를 사용했습니다. 오른쪽으로 스와이프하면 item 변수에 “+1” 응답이 주어졌습니다. 왼쪽으로 스와이프하면 item 변수에 “-1” 값이 주어졌습니다.
두 가지 핵심 변수가 중요한 역할을 했습니다. ‘ID’ 변수는 ID를 추적했고, ‘item’ 변수는 컴포넌트에 어떤 항목이 선택되었는지 알려주었습니다. 또한 선택 컴포넌트와 씬 간의 통신을 위해, 씬에 Detect 트리거를 설정해 ‘item’ 변수의 변화를 감지했습니다.
Detect 트리거는 ‘item’ 변수의 변화를 감지하는 데 사용됩니다.
Gojek은 선택 컴포넌트 내부에, 어떤 항목이 선택되고 있는지 컴포넌트와 통신할 수 있는 Receive 트리거를 만들었습니다.
조건에 Detect 트리거를 설정해 프로토타입이 어떤 항목이 선택되었는지 감지할 수 있게 했습니다. 자산 조건에서 ‘item’ 변수를 사용하고, swipe에 대해 ‘item’ 변수에 기반한 Speak 응답을 할당했습니다. 그런 다음 아이템의 값이 화면의 아이템 값보다 커지지 않도록 스와이프 제스처에 제한을 설정했습니다.
Speak 응답 할당하기.
이건 꽤 흥미롭습니다. ‘items’ 선택을 위한 추가 기능으로, 그들은 변수를 설정하고 프로토타입으로 사용자의 손가락을 감지했습니다. 손가락의 Y 위치 값이 내려가면 item 변수도 내려갔습니다.
이는 제품 개발 단계를 크게 가속했습니다. 시각 장애가 있는 사용자를 위한 현실적인 프로토타입을 제작함으로써 더 빠르게 진짜 인사이트를 얻고 빠른 속도로 반복 개선할 수 있었습니다.
ProtoPie는 Gojek에 적은 비용으로 실패할 기회를 주었습니다. 시간에 집중하고, 출시 전에 제품을 미세 조정하고 리스크를 줄일 수 있게 했습니다.
Gojek 디자인 팀이 ProtoPie를 사랑하는 이유.
ProtoPie로 제품 개발의 위험을 줄이세요
Google, BMW, GoPro의 디자인 팀은 모두 ProtoPie를 사용해 제품 개발을 가속하고 모든 대담한 시도의 위험을 줄입니다.
지금 무료로 ProtoPie를 사용해 보세요.
