ProtoPie vs. 시리즈: Figma
이번 포스트에서는 ProtoPie와 Figma의 차이점에 대해 살펴보고, 최상의 결과물을 위하여 언제, 어떤 툴을 사용해야 하는지 알아보도록 하겠습니다.
요약
- Figma는 아주 기본적인 초기 프로토타이핑을 제작하기에는 적합하지만, 다양한 상태의 시나리오를 추가하기에는 기능이 매우 제한되어 있거나 불가능한 경우가 많습니다. 이때, ProtoPie를 사용하면 보다 더 사실적이고 동적인 프로토타입을 생성할 수 있습니다.
- ProtoPie는 Figma에 없는 필수적인 hi-fi 프로토타이핑 기능을 제공합니다.
- 최상의 프로토타입 결과물을 위해서는 Figma와 ProtoPie를 동시에 사용하세요. 각자 다른 방면에서 여러분의 프로토타입을 완성도를 높여줄 것입니다.
Figma는 세계에서 가장 사랑받는 UI 디자인 툴 중 하나입니다. 프로토타이핑만을 위한 툴은 아니지만, 몇 가지 프로토타이핑 기능을 가지고 있죠. 예를 들어, Figma를 사용하여 프레임들을 연결하고 몇 가지 간단한 상호 작용을 추가하면 click-through 프로토타입을 만들 수 있습니다. Figma는 실제 상호작용이 아닌 전반적인 흐름에 중점을 두고, 몇개의 상태를 두고 클릭할 수 있는 간단한 프로토타입을 만들기에 좋은 툴입니다.
하지만 초기 아이템의 개수가 적은 상황이라 할지라도, 아이템이 점차 많이 추가되면 될수록 전반적인 구조가 더욱 복잡해지고 어지러워 집니다. 모든 프레임이 와이어로 서로 연결되어 있다고 하는 와이어링 모델이 이론적으로는 적용이 가능하지만, 실제로 프로토타입이 복잡해지면 전반적인 구조를 이해하고, 관리하고, 유지하는 것이 복잡해집니다.
Figma 사용 시 발생되는 구조적 혼란. 이미지 작성자 Luke Dowding.
실제 환경과 비슷한 프로토타입을 제작하기 위해서는
1) 사실적인 마이크로인터랙션 적용이 가능해야 하고
2) 다양한 아이템을 추가할 수 있어야 하고
3) 상황에 맞는 여러 개의 화면으로 구성할 수 있어야 하는데요.
동시에 확장성까지 갖춘 프로토타입을 제작하기 위해서는Figma 하나만으로는 기능이 충분하지 않을 것입니다.
여러 상태가 있는 화면은 와이어 수를 크게 증가시킵니다. 이미지 작성자 Steve Ruiz.
이것이 바로 ProtoPie 가 당신에게 필요한 이유입니다.
Figma 대신, 또는 ProtoPie를 함께 사용하여 보다 다이나믹이고 현실적인 프로토타입을 만드는 방법에 대해 좀 더 자세히 알아볼까요?
Figma를 사용하면 좋은 경우
진행하는 프로젝트가 아래의 조건에 해당하는 경우, Figma를 사용하는 것이 좋습니다.
1) 프로토타입끼리 서로 연결되어 있지 않고 간단한 인터랙션만을 필요로 할 때
2) 제작하고자 하는 Click-through 프로토타입이 최소한의 상태를 포함한 프레임일때
3) 사용자 흐름을 시각적으로 미리 확인하고자 할 때
4) 상호 작용을 다시 만들 필요 없는 초기 단계 프로토타입을 제작하고자 할 때
ProtoPie를 사용하면 좋은 경우
그러나 진행하는 프로젝트가 아래의 조건에 해당하는 경우, ProtoPie를 사용하는 것이 좋습니다.
1) 복수의 상태 및 종속성이 있는 시나리오
2) 조건부 및 인과 관계 인터랙션
3) 텍스트 입력, 음성, 미디어 재생, 센서, 여러 장치 등과 관련된 인터랙션
4) 특정 터치스크린 트리거와의 인터랙션
5) 멀티 디바이스 간의 인터랙션
6) 맞춤형 하드웨어와 관련된 인터랙션
그렇다면, ProtoPie는 무엇인가요?
ProtoPie는 가장 쉽게 인터랙션 디자인 아이디어를 현실적인 프로토타입으로 바꿀 수 있는 툴입니다. 모바일, 데스크탑, 웹, IoT를 위한 인터랙티브 등 디지털 화면으로 나타내지는 어떤 프로덕트도 ProtoPie를 통해 프로토타입 제작이 가능합니다.
Microsoft, BMW, Headspace, Snap 및 Electronic Arts 와 같은 전 세계의 다양한 산업 분야의 회사의 디자이너들이 프로토타이핑을 위해 Figma 와 ProtoPie를 함께 사용하고 있습니다.
Figma와 비교했을 때 ProtoPie의 필수 기능은?
디자인에는 지름길도, 정답도 없습니다. 하지만 사용하는 툴에 따라 시간과 작업물의 퀄리티가 달라지기 때문에, 디자이너는 작업할 툴을 신중하게 선택해야 합니다. 또한 사용하는 툴에는 작업 시 꼭 필요한 기능들이 있어야 합니다. ProtoPie는 프로토타이핑 시 반드시 필요한 다양한 기능을 제공하는데, 그 중 몇 가지 중요한 기능들에 대해 좀 더 살펴보도록 하겠습니다.
Text Input
프로토타입은 실제 환경을 그대로 모방해야 합니다. 스마트폰 앱을 디자인하는 경우, 작업된 프로토타입은 실제 스마트폰에서 사용하는 것처럼 작동해야 합니다.
로그인 페이지의 프로토타입을 제작하고 있다고 상상해봅시다. ProtoPie에서 입력 레이어와 몇 가지 추가 인터랙션을 추가하면 바로 완성됩니다. 그러나 같은 기능을 제작하더라도 Figma에서는 복잡한 와이어 세트를 통해서만 제작이 가능하며, 아닌 경우 유저들의 타이핑 방식을 상상에 의지할 수 밖에 없게 됩니다. 이런 방법은 현실적인 프로토타이핑의 전제에 어긋날 뿐만 아니라, 더욱 번거롭고 시간도 많이 소요됩니다.
텍스트 입력 기능이 추가된 예제 프로토타입 사용해보기
Input Layer 에 대해 더 알아보기
Media Playback
어떤 상황에서도 디자인은 가능한 한 풍부해야 합니다. 더욱 풍부하고 현실적인 프로토타입을 제작하기 위해서는 간혹 미디어 파일을 프로토타입에 삽입해야 하는 경우가 있습니다. 그래서 ProtoPie는 오디오, 비디오 및 Lottie 파일 추가 기능을 제공하고 있습니다.
반면 Figma는 사용자가 오디오나 비디오를 직접 삽입할 수 있는 기능을 제공하지 않습니다. 미디어가 풍부한 프로토타입을 제작해야 하는 경우 유일안 대안은 ProtoPie 하나 뿐입니다.
Media Playback 예제 프로토타입 사용해보기
Media Playback에 대해 더 알아보기
Conditions
Conditions는 성공적인 프로토타입의 핵심이며, 주요 'if/then' 규칙을 설정합니다. 재사용이 가능한 토글 버튼 구성 요소가 있다고 상상해봅시다. 예를 들어, 비행기 모드를 활성화하려면 토글 버튼을 오른쪽으로 드래그하고, 비활성화하려면 토글 버튼을 왼쪽으로 드래그해야 합니다. 실제로 휴대폰에서 비행기 모드를 활성화하면 특정 아이콘이 사라지고, 한 옵션이 화면에서 회색으로 표시되는 동안 다른 아이콘이 나타납니다.
Figma에서는 대화형 구성 요소와 변형을 사용하여 재사용이 가능한 토글 버튼을 만들 수 있습니다. 그러나 토글 버튼이 상태에 따라 고유하게 다른 레이어와 인터렉션에 영향을 미치도록 하는 것은 매우 어렵습니다. 이 기능을 구현하기 위해서는 ProtoPie가 반드시 필요합니다.
Condition이 있는 예제 프로토타입 사용해보기
Condition에 대해 더 알아보기
Formulas & Variables
ProtoPie의 Formulas 와 Variables는 다이나믹 인터랙션을 가능하게 하는 필수 기능들입니다. 이것은 ProtoPie를 Figma 또는 다른 프로토타이핑 툴과 진정으로 차별화시키는 요소 중 하나입니다. 인터랙션에 Formula를 추가하기만 하면 프로토타입에 움직임이 더해집니다. 이메일 주소 확인, 최소 암호 길이, 장바구니에 담긴 상품의 수 계산, 그리고 총 계정 잔액 결정 등의 다이내믹 인터랙션을 구현하려면 Formula 를 사용하면 됩니다.
Formulas 와 Variables를 사용하면 프레임을 서로 연결하는 것만으로는 구현이 불가능한 수준의 사실감과 동작을 프로토타입에 추가할 수 있습니다.
Formula 와 variable 에 대해 더 알아보기
Camera, voice, and sensors
디자인하고 있는 프로토타입과 프로토타입의 사용 대상이 되는 하드웨어의 인터랙션이 원활해야 합니다. 스마트폰과 태블릿을 예로 들면, 각 디바이스 내에 다양한 하드웨어 기능들이 장착되어 있습니다.
그래서 ProtoPie는 카메라, 마이크, 자이로스코프 및 근접 센서와 같은 장치의 내장 하드웨어를 최대한 많이, 쉽게 활용할 수 있도록 설계되었습니다. Instagram 또는 TikTok과 유사한 앱, 보이스 어시스턴트, 받아쓰기 앱, 모바일 게임, 증강 현실(AR) 앱의 프로토타입 제작, 모두 ProtoPie에서는 가능합니다.
https://www.youtube.com/watch?v=1SJlMFqCqa8&feature=youtu.be
https://www.youtube.com/watch?v=fmvxhviD9R8&feature=youtu.be
camera, voice prototyping, 그리고 sensors에 대해 더 알아보기.
멀티 디바이스
우리는 서로 연결된 세상에 살고 있습니다. 사람들은 다양한 디바이스를 통해 소통하기 때문에 UX는 하나의 디바이스로 제한될 필요가 없습니다. 따라서 디자이너는 멀티 디바이스 경험을 프로토타이핑할 수 있는 장비를 갖추어야 합니다.
다양한 멀티 디바이스 시나리오의 예:
- 휴대폰으로 문자 메세지를 보내고, 받은 메세지에 대한 알림 표시
- 태블릿에서 최신 Netflix 쇼를 시청한 후, 스마트 TV에서 중단한 부분부터 다시 시작
- 실제 게임 컨트롤러를 가지고 태블릿에서 모바일 게임 진행
- 하나의 앱에서 홈 보안 카메라 조정
- 음성으로 인포테인먼트 시스템 컨트롤과 동시에 실제 핸들로 자동차 운전
https://www.youtube.com/watch?v=aDLQ-EeiJEA&feature=youtu.be
https://www.youtube.com/watch?v=aBzCrEow94I&feature=youtu.be
Figma로 작업하게 되면 이와 같이 다양한 인터랙션을 구현하기 어렵습니다. 위에서 언급된 케이스와 같은 시나리오를 프로토타입하고 사용성 테스트를 진행하려면 반드시 ProtoPie가 필요합니다. 실제로 생각해보면, 사람들이 매일 직면하는 멀티 디바이스 시나리오는 이미 무한합니다.
ProtoPie Industry Solution에 대해 더 알아보기
프로토타입 공유 및 핸드오프
사용자 테스트, 사용성 테스트 및 구현 등을 위해 이해 관계자와 프로토타입을 공유해야 하는데, 고유의 프로토타입에 접근 권한이 있는 모든 사용자는 iOS 및 Android의 ProtoPie Player뿐만 아니라 모바일 또는 데스크탑 브라우저에서 프로토타입을 실행해 볼 수 있습니다.
프로토타입 공유 및 핸드오프
엔지니어에게 Interaction Recipe를 제공하여 전반적인 프로토타입의 가치를 더욱 높여보세요. 무엇을 어떻게 구현해야 하는지 더욱 구체적인 커뮤니케이션이 가능해진다면 한층 더 완성도 높은 프로토타입 설계가 가능해질 것입니다.
Interaction Recipe
Interaction Recipe 예제 프로토타입 사용해보기
Interaction Recipe에 대해 더 알아보기
Figma와 ProtoPie를 동시에 사용했을 때의 이점
Figma는 초기 프로토타이핑에는 적합하지만, 실질적인 프로토타이핑을 제작하기에는 기능이 충분하지 않습니다. 프로토타입의 인터랙션을 보다 사실적이고 실제 움직임과 비슷하게 제작하려면, ProtoPie의 프로토타이핑 기능이 반드시 필요합니다.
초기 프로토타입만 제작하는 경우 Figma와 ProtoPie 둘 중에 어떠한 툴을 사용해도 무방하지만, Figma와 ProtoPie는 각각 용도가 다르기 때문에 동시에 사용될 때 시너지 효과가 납니다.
먼저 Figma를 사용하여 제품의 UI를 디자인하고 아이디어를 시각적으로 구체화하세요. 제작된 프로토타입에 인터랙션을 추가할 준비가 되면, Figma에서 ProtoPie로 디자인을 불러와 역동적이고 사실적인 프로토타입을 제작해 보세요. 제작하는 동안, 적절하다고 판단되는 만큼 두 프로그램을 번갈아 가면서 사용하세요.
Figma와 ProtoPie는 각자 용도가 다르기에, 동시에 사용될 경우 최상의 결과를 가져다줄 수 있습니다.
Figma와 ProtoPie의 장점을 모두 누릴 준비가 되셨나요?
