brunch

매거진 ProtoPie 활용 사례

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by ProtoPie Jun 30. 2022

ProtoPie vs. 시리즈: Flinto

ProtoPie와 Flinto의 차이점에 대해 알아보세요.

요약

▶ Flinto(영문)는 간단한 인터랙션과 애니메이션을 만드는 데 유용한 툴이지만, 더 복잡한 요구 사항을 충족하기에는 기능적으로 충분하지 않습니다.

▶ 또한 Flinto는 작업 공유 기능이 다소 매끄럽지 못해 협업 시 불편할 수 있으며, 수준 높은 학습 리소스와 긴밀한 사용자 커뮤니티가 잘 갖춰져 있지 않습니다.
▶ ProtoPie는 활성화된 내부 UX 디자이너 커뮤니티, voice 같은 고도화된 프로토타이핑 기능, 그리고 풍성한 인터랙션으로 채워져 hi-fi 프로토타이핑에 최적화된 툴입니다.

오늘날의 데이터 중심 경제는 점점 더 빠르게 움직이고 있습니다. 따라서, UX 디자이너는 최대한 빠르게 이해관계자들에게 깊은 인상을 줄 수 있는 hi-fi 디자인을 구현해야 하는데요. 이를 위해서 hi-fi 래피드 프로토타이핑 툴은 필수입니다.

현재 시장에는 다양한 프로토타이핑 툴이 있습니다. 하지만, 팀의 필요에 가장 잘 맞는 프로토타이핑 툴은 과연 무엇일까요?

이번 ProtoPie vs. 시리즈를 통해 Adobe XD, Framer, InVision, Figma, Principle, Proto.io 등 다양한 프로토타이핑 툴에 대해 살펴보았는데요.

이번 아티클에서는 ProtoPie와 Flinto의 차이점에 대해 알아보고자 합니다.

구체적으로 아래 내용에 대해 하나씩 살펴보도록 하겠습니다.

▶ Flinto에 대해
▶ ProtoPie에 대해
▶ Flinto 사용 시 장점
     ▷ Transition Designer
     ▷ 마이크로 인터랙션 및 애니메이션 제작
▶ Flinto 사용 시 단점
     ▷ 제한된 프로토타이핑 기능
     ▷ Windows 버전 미지원
     ▷ Mac OS / iOS에서만 미리보기 가능
     ▷ 제한적인 프로토타입 공유 기능
▶ ProtoPie의 차별점
     ▷ Formulas 및 variables를 사용한 동적 프로토타입 구현
     ▷ 인터랙션에 음성을 추가하여 프로토타입 업그레이드
     ▷ 더욱 생동감 있는 스마트워치 경험을 위한 ProtoPie의 Smartwatch Solution

▷ 더욱 수월한 협업

▷ Windows 및 Mac OS 버전 모두 지원

▷ 활발한 ProtoPie 사용자 커뮤니티 및 방대한 학습 리소스

▶ ProtoPie와 Principle, 나에게 맞는 툴은?

Flinto에 대해

Flinto는 전 세계 UX 디자이너들이 모바일, 데스크톱, 웹 앱 등 인터랙티브 프로토타입을 제작하기 위해 사용하는 페이지 기반 래피드 프로토타이핑 툴입니다.
Flinto에서는 버튼 스레드를 통해 함께 연결할 수 있는 여러 화면이 표시됩니다. 한 화면에서 버튼을 탭하면 다른 화면으로 이동하며, 페이드 인, 오른쪽에서 슬라이드 인 또는 아래에서 위로 밀기 등 화면 간 다양한 전환을 선택할 수 있습니다.
기본적인 기능만 탑재한 툴이지만, Flinto를 사용하면 빠르게 목업을 만들어 앱의 흐름을 파악할 수 있습니다. Flinto는 Mac 전용으로, macOS 10.14 및 iOS 12.0 이상에서만 작동합니다.

ProtoPie에 대해

ProtoPie는 복합적인 UI/UX 디자인 아이디어를 hi-fi 인터랙티브 프로토타입으로 변환하기 위한 래피드 프로토타이핑 툴입니다.
디자이너의 무한한 상상력을 현실화할 수 있도록 돕기 위해 만들어진 ProtoPie는 방대한 formulas 및 variables 라이브러리, 디바이스 그리고 OS간의 높은 호환성 등 다양한 강점을 가지고 있어, 시선을 사로잡는 hi-fi 프로토타입을 쉽게 구현할 수 있습니다.
또한 모바일, 데스크톱에서 자동차, 게임 콘솔까지, 다양한 디바이스 그리고 OS에서 프로토타입 테스팅을 진행할 수 있습니다.

위와 같은 이유로 한 유저는 ProtoPie를 “사용하기 쉽고 직관적인 인터페이스를 갖춘 유연하지만 강력한 프로토타이핑 툴”로 높이 평가하였는데요.

ProtoPie는 상상 속의 아이디어를 현실적이고 테스트 가능한 hi-fi 프로토타입으로 옮기는 데 필요한 많은 기능을 갖춘 프로토타이핑 툴입니다. 아주 기본적인 click-through 부터 실제 앱과 동일한 환경을 구현하고, 느끼고, 작동하는 hi-fi 프로토타입까지, ProtoPie와 함께라면 무한한 디자인적 잠재력에 날개를 달 수 있습니다.

Flinto 사용 시 장점

Transition Designer

Flinto의 Transition Designer는 직접적인 시각적 피드백을 원활하게 제공하여 빠르게 transition을 조정할 수 있는 Flinto만의 차별화된 기능입니다.

Flinto의 Transition Designer 화면

하지만 단점도 존재하는데요. 하나의 오브젝트 내 각각 다른 타이밍으로 다양한 속성에 애니메이션을 추가할 경우, 작동이 매끄럽지 않을 수 있습니다.

마이크로 인터랙션 및 애니메이션 제작

Flinto의 마이크로 인터랙션 및 애니메이션 디자인을 위한 다양한 기능은 Flinto의 또 다른 차별점 중 하나입니다. 예를 들어, ‘Behaviors' 기능의 경우 주어진 프로젝트에서 component 재사용이 가능하여 작업 시간을 대폭 절약할 수 있습니다.
Flinto의 transition 기능 중 가장 강력한 기능인 direct feedback 기능은 페이지를 이동할 때 iOS 앱에서와 같이 손가락을 사용하여 앞뒤로 밀어 전환 속도를 조절할 수 있는 기능입니다.

Flinto 사용 시 단점

제한된 프로토타이핑 기능

Flinto는 애니메이션과 마이크로 인터랙션을 만드는 데 좋은 선택이지만, hi-fi 프로토타이핑을 위한 기능이 다소 부족합니다. 예를 들어, 애니메이션을 추가하는 데 불필요하게 오랜 시간이 걸리며,
프로토타입에서 서로 다른 구성 요소 간 인터랙션 추가 시 많은 제한점이 있습니다.

Windows 버전 미지원

Flinto는 Mac OS 10.14 및 iOS 12.0 이상의 버전에서만 작동하며, Windows 버전은 지원되지 않습니다. 따라서, Windows 사용자는 Flinto를 전혀 경험해 볼 수 없습니다.

Mac OS / iOS에서만 미리보기 가능

앞서 언급했던 내용을 미루어 보아, 이 점은 딱히 놀라운 점은 아닙니다. 하지만 전 세계적으로 14억 개의 활성 Windows 디바이스(영문)가 있으며, 그중 다수는 기업체에서 사용되고 있습니다. 따라서 Windows 버전 미지원은 업무적인 부분에서 심각한 제한을 초래할 수 있으며, 프로토타이핑 툴 선정 시 UX 디자이너는 이런 제한점에 대해 진지하게 고려해 보아야 합니다.

뿐만 아니라 프로토타입 미리보기 기능이 간단하지 않다는 것도 또 하나의 단점이라고 할 수 있는데요. Flinto에서 제작된 프로토타입의 미리보기(영문)를 위해서는 iOS 혹은 App Store에서 Flinto View 앱을 추가로 다운로드 해야합니다.

복잡한 프로토타입 공유 기능

Flinto에서는 프로토타입 공유 옵션이 제한적입니다.

프로토타입을 직접적으로 공유할 수 있는 링크가 없기 때문에, 미리보기 창을 녹화한 비디오 파일을 공유하거나 Dribbble에 업로드하여 프로토타입을 공유할 수 있습니다. 아무리 프로토타입을 빠르게 제작할 수 있어도, 이해관계자와 매끄러운 공유가 어렵다면 래피드 프로토타이핑 툴의 의미가 크게 없겠죠.

ProtoPie의 차별점

Flinto는 기본 프로토타이핑에 충실한 툴로, 전체적인 흐름이 아닌 마이크로 인터랙션에 차별화된 툴입니다. 하지만, 대화형 입력 및 영상 플레이어와 같은 고급 기능이 없기 때문에, 복합적인 기능 구현이 불가능하다는 큰 단점이 있습니다.

반면 ProtoPie는 강력한 기능으로 무장하고 있습니다. ProtoPie 내 프로세스 자체가 매우 직관적이기 때문에, UX 제품 디자이너는 매우 정교한 프로토타입을 쉽게 구현할 수 있습니다. 미세한 인터랙션부터 고도화된 프로토타입까지, ProtoPie를 사용하면 상상 이상의 결과물을 만들어 낼 수 있습니다. 또한, ProtoPie는 더욱 직관적인 공유 기능을 탑재해 보다 원활한 디자인 협업이 가능합니다.

Hi-fi 프로토타이핑 제작 시 ProtoPie의 차별점에 대해 좀 더 자세히 알아보겠습니다.

Formulas 및 variables를 사용한 고도화된 프로토타입 구현

Formulas와 variables를 사용하여 동적인 인터랙션이 추가된 프로토타입을 구현할 수 있습니다. Formulas는 비밀번호 확인, 장바구니의 항목 수 계산, 총 계정 잔액 결정과 같은 동적 인터랙션을 만들 수 있는 기능이며, variables는 이름, 비밀번호 또는 계정 잔액 같이 사용자가 나중에 사용할 수 있는 모든 데이터를 저장하는 바구니 역할을 합니다. Variables는 formulas가 사용되는 모든 곳에서 사용 가능합니다.

ProtoPie School(영문)의 튜토리얼을 통해 인터랙션에서 formulas 및 variables를 사용하는 방법에 대해 자세히 알아보세요.

인터랙션에 음성을 추가하여 프로토타입 업그레이드

ProtoPie에서는 trigger와 response를 다양한 조합을 통해 인터랙션을 구현할 수 있을 뿐만 아니라, ProtoPie만의 Voice 기능을 통해 프로토타입에 음성 인식 기능을 추가할 수 있습니다.
마이크와 인터넷 액세스만으로 ProtoPie 에서 음성 인터랙션을 탑재한 프로토타입을 사용해 보세요.

현재 ProtoPie에서 구현 가능한 케이스는 아래와 같습니다.

▶ Speech to Text 인터랙션
▶ Text to Speech 인터랙션

여기를 클릭하여 Voice 기능에 대해 더 자세히 살펴보세요.

ProtoPie는 현재 아래와 같은 언어를 지원하고 있습니다.
▶ 듣기 지원 언어: 52개 국어 (및 지역별 언어 변형)
▶ 말하기 지원 언어: 40개 국어 (및 지역별 언어 변형)

이 튜토리얼(영문)을 따라 음성 인터랙션이 추가된 나만의 프로토타입을 만들어 보세요.

더욱 생동감 있는 스마트워치 경험을 위한 ProtoPie의 Smartwatch Solution

ProtoPie의 Smartwatch Solution(영문)은 현실적인 스마트워치 프로토타이핑과 스마트워치와 관련된 완전 몰입형 경험을 구현하는 데 필요한 모든 것을 갖춘 ProtoPie만의 Enterprise(영문) 솔루션입니다. 처음부터 끝까지 몰입감 넘치는 스마트워치 경험을 프로토타이핑 할 수 있으며,
실제 Wear OS 스마트워치에서 프로토타입을 쉽게 보고, 경험하고, 테스트할 수 있습니다.

Google의 Wear OS팀 UX 엔지니어인 Jeff Hoefs는 ProtoPie에 대해 아래와 같이 평가했습니다.

우리는 몇 년 동안 래피드 프로토타이핑 툴로 ProtoPie를 사용해 왔습니다. 그 전까지는 휴대폰 또는 노트북 화면에서 스마트워치의 컨셉을 구성하는 것에 그쳤으나, 새로운 ProtoPie Smartwatch 솔루션을 통해 실제 하드웨어, 사용자의 손목 및 사용 맥락에서 컨셉을 탐색할 수 있게 되었습니다.

여기(영문)를 클릭하여 ProtoPie의 Smartwatch Solution에 대해 자세히 알아보세요.

더욱 수월한 협업

ProtoPie에서는 휴대폰에서 Wi-Fi 또는 USB 연결을 사용하여 프로토타입을 미리 볼 수 있습니다. 또는 프로토타입을 로컬 드라이브에 저장하고, 오프라인에서 테스팅을 진행할 수도 있습니다.
더 좋은 점은, ProtoPie Cloud에 업로드를 통해, 팀원이나 클라이언트와 링크를 공유하고 데스크톱과 모바일 장치 모두에서 사용해볼 수 있습니다.

Flinto Viewer vs. ProtoPie Player

Windows 및 Mac OS 모두 지원

Flinto와 달리, ProtoPie는 Mac OS와 Windows에서 모두 설치 가능합니다 .

또한 팀원이든 고객이든 관계없이 누구나 iOS, iPad 또는 Android 기기에서 프로토타입을 경험해볼 수 있습니다.
ProtoPie를 통해 아래 환경에 맞는 프로토타입을 구현할 수 있습니다.

▶ Mac OS / Windows
▶ iOS / Android
▶ Smartwatch (Wear OS) (영문)

활발한 ProtoPie 사용자 커뮤니티 및 방대한 학습 리소스

Flinto의 커뮤니티는 작고 수동적이며, YouTube(영문) 내 학습 리소스가 매우 제한적입니다. 실제로 가장 최근 영상은 1년 전에 업로드 되었습니다.

반면 ProtoPie는 ProtoPie 튜토리얼을 포함한 다양한 학습 리소스를 제공합니다. 또한 ProtoPie는 활발한 사용자 커뮤니티를 자랑합니다. 작업 예제를 ProtoPie와 공유하고, 동료 UX 디자이너와 상의를 통해 문제점에 대해 논의하고, 제안할 수 있습니다.

ProtoPie의 Customer Learning 팀은 계속적으로 아래와 같은 새로운 학습 콘텐츠를 업로드하고 있습니다.

▶학습 리소스
    ▷ ProtoPie School (영문)
     ▷ Documentation
     ▷ Ask ProtoPie의 Video Tutorial (영문)
▶ ProtoPie 커뮤니티 (영문)
     ▷ ProtoPioneers: ProtoPie 유저 커뮤니티 Slack 채널
     ▷ Discord
      ▷ Dribbble

ProtoPie에서는 프로토타이핑 관련 챌린지를 계속적으로 주최하여, 유저가 ProtoPie Studio에서 창의적인 프로토타입을 디자인하도록 장려합니다. 또한, 동기부여를 위해 가장 우수한 작품에 한해 다양한 상을 수여합니다. 또한 Discord(영문) 커뮤니티를 통해 최신 트렌드에 대한 정보를 받아보세요.

ProtoPie vs. Flinto, 나에게 맞는 툴은?

Flinto는 간단한 인터랙션과 애니메이션이 포함된 기본적인 프로토타이핑을 위한 훌륭한 툴입니다. 하지만 정교한 래피드 프로토타이핑을 위한 기능이 부족합니다.

반면 ProtoPie는 고도화된 프로토타이핑의 진정한 가치를 아는 유저들을 위한 최고의 래피드 hi-fi 프로토타이핑 툴입니다. 다이나믹 인터랙션을 구현하기 위한 풍부한 기능, 음성 인터랙션 기능, 그리고 폭넓은 지원 OS 등 수준 높은 인터랙션을 위한 다양한 기능이 탑재되었습니다. 또한 ProtoPie Cloud를 통해 팀간의 원활한 협업이 가능하며, 풍부한 학습 리소스와 활성화된 온라인 커뮤니티를 통해 다양한 ProtoPie 사용 팁 그리고 정보를 얻어갈 수 있습니다.