[Info] ProtoPie와 Figma 중 고급 프로토타이핑에 적합한 툴은?
2023. 7. 19.
고객의 니즈는 항상 변화합니다. 그래서 프로덕트와 UI/UX 디자인도 고객 니즈에 따라 항상 변화해야 합니다. 충실도가 높은(Hi-fidelity) 프로토타입 툴에 대한 요구가 높아지는 이유도 여기에 있습니다.
디지털 저널(Digital Journal) 리포트에 따르면, 2022년 UX 서비스 시장 가치는 192억 달러까지 상승했습니다.
UX 서비스가 성장하고 프로젝트 지분이 커지자 훌륭한 디지털 사용자 경험을 확보하는 것이 중요해졌습니다. 이러한 흐름에 따라 디자인 팀은 전보다 더 빨리, 더 혁신적인 프로젝트를 성공시켜야 한다는 압박을 받고 있습니다. 여기서 경쟁력을 확보하려면 충실도가 높은 프로토타입이 필요합니다.
그렇다면 이러한 요구를 모두 충족시킬 수 있는 고급 프로토타입 툴이란 과연 무엇일까요?
Figma는 2023년 Config에서 ‘고급 프로토타이핑’ 기능을 공개하며 주목 받았습니다. 고급 프로토타이핑 기능을 사용하는 유료 사용자는 변수, 표현식, 조건에 액세스할 수 있습니다. Figma와 ProtoPie 모두 고급 프로토타이핑을 지원하는 디자인 툴입니다. Figma의 발전 덕분에 충실도 높은 프로토타입과 인터랙션 디자인이 많은 관심을 받을 수 있었습니다.
그러나 한편으로는 고급 프로토타이핑에 대한 Figma와 ProtoPie의 접근 방식이 어떻게 다른지 의문도 함께 떠오르게 됩니다. 이제부터 Figma와 ProtoPie를 비교해 봅시다.
핵심요약
ProtoPie로는 다중 시나리오에 대한 현실적이고 다이나믹한 멀티 모달 형태의 프로토타입을 제작할 수 있습니다. ‘고급 프로토타이핑’ 기능을 사용해도 Figma로는 이러한 프로토타입을 제작하기 어렵습니다.
ProtoPie에서는 Figma에는 없는 고급 프로토타이핑 기능을 사용할 수 있습니다. 따로 구성할 필요 없이 무료로 즉시 사용 가능합니다. Figma의 ‘고급 프로토타이핑’ 기능은 ‘Pro’ 플랜 이상을 구독해야지만 사용할 수 있습니다.
한 단계 앞선 프로토타입을 제작하고 싶다면 Figma와 ProtoPie를 함께 사용하는 것을 추천합니다.
- Figma와 ProtoPie는 목적이 다릅니다.
- 각 툴의 장점이 서로를 보완합니다.
- 워크플로우를 최적화하기 위해 Figma와 ProtoPie를 함께 활용하는 방법을 알아보세요.
Figma란?
2022 디자인 툴 설문조사에 따르면, Figma는 전 세계에서 가장 인기 있는 UI 디자인 툴입니다. 엄밀히 말하면 프로토타입 툴은 아니지만 프로토타입 기능이 있습니다.
Figma에서는 정적 화면 간의 기본적인 전환 시퀀스 프로토타입을 제작할 수 있습니다. 프레임을 연결하고 간단한 인터랙션을 몇 가지 추가하면 하면 됩니다. 실제 인터랙션까지 보여줄 필요 없이 클릭하여 플로우만 보여주기만 하면 되거나 상태가 몇 가지 되지 않는 프로토타입을 제작할 때는 Figma가 적합합니다.
하지만 상태를 조금만 더 추가해도 아래 이미지처럼 선이 국수처럼 얽혀 혼란이 발생할 수 있습니다. 상태를 추가할 수록 더 복잡해집니다.
이론적으로는 각 프레임을 선으로 연결하는 와이어링 모델이 유의미하긴 하나, 프로토타입이 복잡해질 수록 이해, 관리, 유지가 어려워집니다.
혼란스러운 Figma 프레임 연결. Luke Dowding
Figma에서 이 문제를 해결하기 위해 내놓은 것이 바로 ‘고급 프로토타이핑’ 기능입니다. 고급 프로토타이핑은 유료 사용자에게 제공되는 기능이며, 변수, 표현식, 조건에 액세스할 수 있습니다. Figma는 해당 기능을 통해 단순한 선형 프로토타이핑에서 벗어나기 시작했습니다.
Figma는 언제 사용하면 좋을까?
Figma는 다음과 같은 경우에 사용하면 좋습니다.
‘단일’하거나 기본적인 인터랙션을 제작할 때
프레임에 상태가 많지 않은 클릭쓰루 프로토타입을 제작할 때
유저 플로우 비주얼 프리뷰를 제작할 때
인터랙션을 재현할 필요가 없는 초기 단계 프로토타입을 제작할 때
단순한 인과관계 인터랙션을 제작할 때
위의 다섯 가지 경우 외에 더욱 복잡한 프로토타입을 제작해야 한다면 Figma와 함께 ProtoPie를 사용하거나, ProtoPie를 단독으로 사용하는 것이 좋습니다. ProtoPie를 사용하면 하나 이상의 연결 장치에 대한 현실적이고 역동적인 멀티 모달 프로토타입을 제작할 수 있습니다.
게임을 플레이할 때 핸드폰을 기울이면 어떤 반응이 나오는지, 혹은 자동차 디스플레이의 음성 활성화가 어떻게 작동하는지 테스트하고 싶을 때에는 ProtoPie가 적합합니다.
Figma를 단독으로 사용하여 음성이나 터치로 활성화 되는 멀티 모달 인터랙션 프로토타입을 제작하긴 어렵습니다.
다음과 같은 경우에는 특히 Figma 외에 다른 툴의 도움이 필요합니다.
다양한 화면과 기기를 제작할 때
탭과 클릭 이상으로 정교하고 사실적인 마이크로 인터랙션을 제작할 때
(커스터마이징)하드웨어, API 등과 프로토타입을 연결할 때
ProtoPie란?
2022년 디자인 툴 설문조사 결과, 고급 프로토타이핑 부문에서 ProtoPie가 우수한 성적을 거두었습니다. ProtoPie는 인터랙션 디자인 아이디어를 현실화할 수 있는 사용하기 쉽고 충실도가 높은 프로토타입 툴입니다.
스크린 개수에 관계 없이 아래와 같은 모든 디지털 기기에 대해 충실도 높은 프로토타입을 제작할 수 있습니다.
모바일 기기
데스크탑
웹
IoT
차내 경험 관련 기기
기타 디지털 기기
다양한 업계에서 매일 ProtoPie를 단독으로, 혹은 Figma와 함께 사용하여 충실도 높은 프로토타입을 제작합니다. ProtoPie를 사용하는 기업은 대표적으로 Meta, Microsoft, Zillow, Mercedes-Benz, Gojek, Flipkart 등이 있습니다.
ProtoPie는 언제 사용하면 좋을까?
다음과 같은 경우에는 ProtoPie를 사용하는 것이 효율적입니다.
상태와 종속성이 다양한 경우
조건과 인과관계 인터랙션이 다른 인터랙션을 트리거하는 경우
특정 터치스크린 트리거뿐만 아니라 ‘비표준’ 트리거와의 상호 작용이 필요한 경우
텍스트 입력, 음성, 미디어 플레이백, 센서 등을 포함한 멀티 모달 인터랙션이 필요한 경우
다양한 기기 간 인터랙션이 필요한 경우
커스터마이징 하드웨어, API 등과 관련된 인터랙션이 필요한 경우
프로토타이핑에서 ProtoPie가 Figma에 비해 유용한 이유는 무엇일까?
마법처럼 뿅하고 디자인이 완성된다면 얼마나 좋을까요? 물론 이런 마법은 없지만, 효율적인 디자인을 돕는 툴은 있습니다. ProtoPie도 그중 하나로, 디자인에 필수적인 다양한 기능을 제공하며 충실도 높은 프로토타입을 제작할 수 있습니다.
Figma에 비해 ProtoPie가 프로토타입 제작 시 유용한 9가지 이유를 소개합니다.
멀티 모달리티를 구현할 수 있는 다양한 Trigger와 Response
Figma에서 제공하는 트리거는 대부분 표준 탭과 마우스 트리거입니다. 단순한 유저 플로우, 인터랙션, 프레젠테이션을 제작할 때는 충분하지만 이보다 복잡한 작업에는 부족합니다.
Figma와 ProtoPie의 인터랙션 트리거 간 차이점을 알아봅시다.
ProtoPie는 멀티 모달 인터랙션을 만들 수 있는 다양한 trigger와 response를 제공합니다.
Trigger만 해도 touch, conditional, mouse, key, input, sensor 총 여섯 가지 카테고리로 나뉩니다. 기본적인 터치 트리거는 핸드폰 tapping, sliding, pulling, pincing, rotating으로 구성됩니다. 마우스 버튼을 누르고 있을 때만 마우스 오버 인터랙션이 가능하도록 설정하는 등 터치 트리거를 여러 개 합칠 수도 있습니다.
Conditional trigger는 더욱 강력합니다. 일련의 이벤트를 연결할 수도 있고, 사용자의 이메일 주소 같이 입력된 데이터를 감지할 수도 있습니다. 마우스 오버 및 마우스 아웃 트리거로 마우스가 엘리먼트를 지나갈 때 반응하는 인터랙션을 만들 수 있습니다. 키가 눌렸을 때 실행되는 키 프레스 트리거는 물론, 센서, 보이스, 사운드, 틸트, 컴패스 트리거도 갖춰져 있습니다.
프로토타입에 드래그 및 스크롤 영역 추가하기
Figma에서도 드래그 인터랙션 및 스크롤 영역을 만들 수 있습니다. 하지만 특정 엘리먼트로만 가능합니다. 같은 프레임에서 다른 엘리먼트가 인터랙션에 영향을 줄 수도 없습니다.
하지만 ProtoPie로는 다른 인터랙션을 촉발하는 드래그 인터랙션 및 스크롤 영역을 만들 수 있습니다. 레이어를 오른쪽이나 왼쪽으로 드래그하면 총 점수가 감소 및 증가하도록 만드는 것도 가능합니다. 한 화면 안에서 이러한 인터랙션을 프로토타이핑할 수 있습니다.
물론 패럴랙스 스크롤링 등 다른 레이어에 영향을 줄 수 있는 다양한 스크롤링을 생성할 수 있습니다.
프로토타입에 실제로 텍스트 입력하기
고급 프로토타입은 실제 상품을 똑같이 재현해야 합니다. 예컨대 스마트폰 앱 프로토타입은 실제 스마트폰에서 사용할 최종 제품처럼 동작해야 합니다.
로그인 페이지 프로토타이핑을 한다고 생각해 봅시다. ProtoPie에서는 인풋 레이어와 추가 인터랙션을 넣기만 하면 로그인 페이지 프로토타입이 완성됩니다.
하지만 Figma에서는 키보드 자체를 프로토타이핑하는 복잡한 와이어링 프로토타입을 만들어야 합니다. 아니면 사람들의 상상력에 맡기는 수밖에 없습니다. 두 방법 모두 번거로울 뿐만 아니라 실감나는 프로토타이핑과는 정반대됩니다. 시간이 더 오래 걸리기도 합니다.
텍스트 인풋을 허용하는 모바일 프로토타입.
이 예시 프로토타입으로 ProtoPie의 텍스트 인풋 기능을 체험해 보세요.
프로토타입에서 오디오, 비디오, Lottie 파일 재생하기
디자인은 풍성할 수록 좋습니다. 그래서 프로토타입에 미디어 파일을 삽입해야 하는 경우도 생깁니다. ProtoPie는 풍성한 디자인을 위해 오디오, 비디오, Lottie 파일을 지원합니다.
미디어 플레이백이 추가된 비디오 플레이어 프로토타입. ProtoPie로 제작.
하지만 Figma에서는 오디오나 비디오를 바로 임베드할 수 없습니다. 프로토타입에 다양한 미디어를 추가하고 싶다면 ProtoPie를 추천합니다.
ProtoPie의 미디어 플레이백을 확인하고 싶다면 이 예시 프로토타입을 확인해 보세요.
프로토타입에 ‘if/then’ 조건 사용하기
성공적인 프로토타이핑을 위해서는 핵심 ‘if/then’ 규칙을 설정하는 조건을 제대로 사용해야 합니다. 재사용 가능한 토글 버튼 컴포넌트를 제작한다고 가정해 봅시다. 오른쪽으로 토클하면 비행기 모드를 활성화하고 왼쪽으로 토글하면 비활성화하는 동시에 특정 옵션은 회색으로 표시하려고 합니다.
Figma에서 인터랙티브 컴포넌트와 베리언츠를 사용하면 재사용 토글 버튼을 만들 수 있습니다. 기존에는 상태에 따라 다른 레이어와 인터랙션에 영향을 주는 토글 버튼을 제작하기 어려웠습니다. 하지만 Figma는 최근 출시한 고급 프로토타이핑 기능에 간단한 ‘if/then’ 조건을 사용할 수 있도록 하여 이 문제를 해결했습니다. 하지만 앞서 언급했듯, Figma의 고급 프로토타이핑 기능은 유료 사용자에게만 제공됩니다.
ProtoPie가 Figma와 차별화되는 것은 바로 이 지점입니다. ProtoPie의 formula와 variable로 다양한 조건부 인터랙션을 제작할 수 있습니다.
다이얼 위치에 따라 조건과 함께 표시되는 숫자가 결정됩니다.
이 예시 프로토타입으로 조건부 인터랙션을 확인해 보세요.
다이나믹 인터랙션 활용하기
ProtoPie의 formula와 variable은 다이나믹 인터랙션의 핵심입니다. ProtoPie가 Figma나 다른 프로토타입 툴과 차별화되는 지점이기도 합니다. 인터랙션에 formula를 추가하기만 하면 프로토타입이 다이나믹해집니다.
Formula는 리터럴 값 외에도 variables, arithmetic 및 modulo operations, text appends, layer properties, functions으로 구성되어 있습니다.
Formula에서 개체의 모든 속성을 사용할 수 있다는 것도 큰 장점입니다. 움직이는 물체의 위치 X를 모니터링하고 특정한(계산된) 값에 도달할 때 리스폰스를 트리거하는 것도 가능합니다.
Formula를 사용해 만들 수 있는 다이나믹 인터랙션은 다음과 같습니다.
볼륨 레벨이 특정 트레시홀드를 넘어서면 경고 표시하기
JSON 형식으로 API 리스폰스 분석하기
계좌 잔액 확인 프로토타입.
스마트 기기에 탑재된 하드웨어 최대한 활용하기
프로토타입은 실제 작동해야 할 하드웨어와 원활하게 인터랙션되어야 합니다. 제일 많이 사용되는 모바일 기기인 스마트폰이나 태블릿만 해도 탑재된 하드웨어 기능이 매우 많습니다.
ProroPie는 카메라(사진 촬영, QR 및 바코트 스캠), 마이크, 자이크로스코프, 근접 센서 등 기기에 내장된 하드웨어를 최대한 활용합니다. 인스타그램이나 틱톡과 유사한 앱, 음성 지원, 받아쓰기 앱, 모바일 게임, 증강 현실(AR) 앱 모두 ProtoPie로 프로토타이핑할 수 있습니다.
보이스 프로토타이핑 기능으로 제작한 TV 프로토타입.
카메라와 센서를 탑재한 열 감지 키오스크 프로토타입.
ProtoPie의 카메라, 보이스 프로토타이핑, 센서 기능을 더 자세히 확인해 보세요.
다양한 기기에 활용 가능한 프로토타입 제작하기
기기 한 대만 사용하는 현대인은 거의 없을 것입니다. 생태계를 구성했다고 해도 과언이 아닐만큼 여러 기기를 연결해 사용하는 경우가 많습니다. 그렇기 때문에 UX가 기기 하나에만 국한되어서는 안 됩니다. 이에 따라 멀티 디바이스 경험의 중요성이 커지고 있습니다.
멀티 디바이스 시나리오는 다음과 같습니다.
핸드폰에서 핸드폰으로 문자 메시지를 전송하고 알림을 보내는 경우
태블릿에서 넷플릭스 프로그램을 정주행하고 스마트 TV로 멈춘 부분부터 다시 보고 싶은 경우
물리적 게임 컨트롤러를 사용해 태블릿에서 모바일 게임을 플레이하고 싶은 경우
앱 하나로 가정용 보안 카메라를 조정하는 경우
음성으로 인포테인먼트 시스템을 제어하는 동시에 핸들로 차를 운전하는 경우
게임패드 통합 프로토타입.
Figma로는 위와 같은 멀티 디바이스 시나리오를 구현할 수 없습니다. 이같은 시나리오를 프로토타이핑하여 사용성 테스트에 활용하려면 ProtoPie가 필요합니다. 사실 매일 맞닥뜨리는 멀티 디바이스 시나리오는 이보다 훨씬 많습니다.
프로토타입 공유 및 핸드오프
충실도 높은 프로토타입을 만든다는 것은 그 자체로도 의미가 크지만 이에 따라오는 효과 또한 큽니다.
ProtoPie를 사용하면 충실도 높은 프로토타입 제작 그 이상의 효과를 얻을 수 있습니다. ProtoPie를 통해 얻을 수 있는 효과들은 다음과 같습니다.
프로토타입을 공유하여 아이디어를 전달하고 이해관계자의 동의를 얻거나 설득합니다.
사용자 테스트를 통해 아이이어를 빠르고 유의미하게 검증합니다.
핸드오프를 통해 디자이너와 개발자 간의 커뮤니케이션 격차를 최소화합니다.
ProtoPie에서는 이해관계자들과 프로토타입을 원활하게 공유할 수 있습니다. 프로토타입에 액세스할 수 있는 사람은 물론, 프로토타입 표시 방법까지 관리할 수 있습니다. iOS, iPadOS, 안드로이드에서 ProtoPie 플레이어나 ProtoPie 클라우드를 통해 프로토타입을 공유하고 핸드오프할 수 있습니다.
프로토타입에는 민감한 정보가 포함될 수 있으므로 프로토타입에 액세스할 수 있는 사람을 꼭 관리할 수 있어야 합니다.
ProtoPie의 새로운 유저 테스트 기능은 프로토타입을 즉시 사용할 수 있는 단일 생태계 내에서 디자이너와 리서처가 모더레이팅 유저 테스트(원격 및 대면)를 진행할 수 있는 기능입니다. 해당 기능으로 유용한 피드백을 얻을 수 있으며, 시간과 리소스를 절약할 수 있습니다.
프로토파이의 핸드오프 기능으로 프로토타입의 가치를 더욱 높입니다. 개발자에게 정확한 인터랙션 사양을 제공하여 구현하는 방법을 정확하게 알려줍니다. 이 예제 인터랙션 레코딩을 확인해 보세요.
Figma와 ProtoPie 함께 사용하기
Figma는 훌륭한 프로토타입 툴입니다. 하지만 충실도가 높은 프로토타이핑에는 부족할 수 있습니다. 최종 제품과 유사한 멀티 모달 다이나믹 인터랙션을 구현하려면 Figma와 ProtoPie를 함께 사용해야 합니다.
물론 Figma와 ProtoPie 둘 중 하나를 선택해 고급 프로토타입을 제작할 수도 있습니다. 하지만Figma와 ProtoPie를 함께 사용하는 것이 가장 효율적이라는 점을 강조하고 싶습니다.
제품 UI를 디자인하거나 아이디어를 시각적으로 구현해야 할 때는 Figma가 유용합니다. 다이나믹 인터랙션과 멀티 모달을 구현하여 최종 상품과 유사한 프로토타입을 제작하려면 ProtoPie가 유용합니다. Figma의 디자인을 ProtoPie로 가져오기만 하면 됩니다. 만족스러운 결과물을 얻을 때까지 Figma와 ProtoPie를 함께 사용하세요.
충실도 높은 프로토타입의 매력에 빠져보세요. 코드를 사용할 필요도 없습니다!
Figma와 ProtoPie를 동시에 사용해야 할 이유는 충분히 설명이 되었을 것 같습니다.
자 그럼 ProtoPie를 사용해 Figma 디자인을 현실적이고 충실도 높은 프로토타입으로 재현해 볼까요?
