ProtoPie vs. 시리즈: AdobeXD
ProtoPie와 Adobe XD 간 차이점에 대해 살펴보겠습니다.
*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
요약
▶ Adobe XD는 훌륭한 벡터 기반 UI 및 UX 디자인 기능을 다양하게 제공하지만, 프로토타이핑 기능이 매우 제한적입니다.
▶ ProtoPie는 코딩 없이도 초현실적인 인터랙티브 프로토타입을 만들 수 있는 프로토타이핑 툴입니다.
▶ Adobe XD 연동을 위한 ProtoPie 플러그인을 통해 매끄러운 End to End 디자인 워크플로를 구축하고, 각 툴의 특정한 기능을 활용할 수 있습니다.
전반적인 프로덕트 개발 속도를 높이기 위해서는, 디자인 팀의 필요에 맞는 도구를 선택해야 합니다. 적합한 툴은 협업의 효율성이 높아지며, 완성도 높은 hi-fi 프로토타입 구현 및 보다 빠른 사용자 피드백 수렴또한 가능해집니다.
그러나 적합한 툴이란 과연 무엇일까요? 반드시 사용해야 하는 솔루션과 피해야 할 솔루션을 어떻게 구분할 수 있을까요?
ProtoPie vs. [ ] 시리즈를 통해, 현재 업계 가장 많이 사용되는 프로토타이핑 툴에 대해 살펴보고 있습니다.
이미 ProtoPie가 Figma 및 Framer와 어떻게 비교되는지는 기존 아티클을 통해 비교했었죠. 이번 아티클에서는 ProtoPie와 Adobe XD를 비교해 보고자 합니다.
ProtoPie와 Adobe XD 각각의 장단점을 살펴보고, ProtoPie와 Adobe XD 연동을 통해 디자인 프로세스에 두 툴을 모두 적용할 수 있는 방법을 알아보겠습니다.
구체적으로 이번 아티클에서는 아래 내용에 대해 다룰 예정입니다.
▶ Adobe XD의 주요 기능 및 프로토타이핑 기능에 대한 개요
▶ ProtoPie만의 특별한 기능
▷ Multi-touch gestures를 사용하여 다양한 기능 구현
▷ Conditional logic을 사용하여 더 복합적인 인터랙션 구현
▷ ProtoPie의 native sensor 기능을 사용하여 현실적인 카메라 인터랙션 구현
▷ 코딩 없이 sensor로 프로토타입 제작
▶ ProtoPie와 Adobe XD를 동시에 사용하여 각 툴의 장점을 누릴 수 있는 방법
Adobe XD란?
Adobe XD는 스마트워치 앱에서 본격적인 웹사이트까지 모든 것을 디자인하는 데 사용할 수 있는 벡터 기반 UI 및 UX 디자인 도구입니다. 강력하고, 사용이 용이하며, Mac 및 Windows 시스템에서 모두 사용할 수 있어 플랫폼 간 호환성도 우수합니다. 요약하자면, Adobe XD는 디자인 팀이 효과적으로 협업해 놀라운 경험을 만드는 데 필요한 모든 것을 제공합니다.
Adobe XD의 기능
Adobe XD에는 고품질의 디지털 경험을 구현할 수 있도록 다양한 기능을 제공합니다.
Adobe XD에서 제공되는 주요 기능은 아래와 같습니다.
▶ Content-Aware Layout
▶ Repeat Grid
▶ Components & States
▶ Auto-Animate
Adobe XD의 Repeat Grid로 복제된 요소 세트를 만들거나 다양한 디자인을 탐색할 수 있습니다.Adobe XD 프로토타이핑: XD 프로토타입에서 기대할 수 있는 것
Adobe XD는 인터랙티브 프로토타이핑 기능(영문)을 일부 제공합니다. 이를테면, Adobe XD의 Auto-Animate 기능을 프로토타입에 추가하여 간단한 애니메이션을 만들 수 있고, wire 및 transition을 통해 화면 간의 인터랙티브한 부분을 연결할 수 있습니다.
그러나 더 복합적인 인터랙션(영문)을 생성하기에는 기능이 충분하지 않습니다.
Adobe XD의 프로토타입 모드
다음 내용에서는 Adobe XD와 ProtoPie를 구별하는 요소에 대해 좀 더 자세히 살펴보겠습니다. 그리고 어떻게 ProtoPie로 Adobe XD의 기능적 제한을 메꿀 수 있는지도 알아보세요.
ProtoPie만의 특별한 기능
ProtoPie는 현재 시장에서 가장 사용하기 쉬운 hi-fi 프로토타이핑 툴입니다. 단 1의 코딩이 필요 없이, formulas, variables, 그리고 고도화된 인터랙션을 사용하여 현실적인 디자인을 만들 수 있습니다.
실제로 ProtoPie는 Adobe XD에서 제공되지 않는 기능을 다수 제공합니다. 따라서 디자이너가 더 풍성한 프로토타입을 구현할 수 있도록 Adobe XD와의 연동 기능을 론칭했습니다.
또한, Adobe XD와 다르게 ProtoPie에서는 다양한 trigger 및 response를 사용하여 더 완성도 높은 프로토타입을 구현할 수 있습니다.
그중에서도, 이번 아티클에서는 아래 trigger 및 response에 대해 더 자세히 알아보겠습니다.
▶ Multi-Touch Gestures
▶ Conditional Logic
▶ ProtoPie Camera Access
▶ Smart Device Sensors
Multi-touch gestures를 사용하여 다양한 기능 구현
ProtoPie에서 touch trigger는 사용자가 스마트 장치의 디스플레이를 물리적으로 터치할 때 활성화됩니다. 해당 trigger는 탭, 길게 누르기 또는 드래그 등을 통해 활성화될 수 있습니다. ProtoPie animation은 pinch, pull, 그리고 rotate와 같은 다른 multi-touch gestures 또한 지원합니다.
ProtoPie Studio의 Drag 및 pinch triggers를 사용한 맵 프로토타입위 프로토타입을 구현하는 법에 대해 자세히 알아보려면, AskProtoPie의 영상 튜토리얼(영문)을 확인하세요.
Conditional logic을 사용하여 더 복합적인 인터랙션 구현
Touch trigger와 달리 conditional trigger는 특정 조건에 따라 인터랙션을 활성화합니다. 예를 들어, 사용자는 프로토타입이 실행되기 시작할 때, 레이어를 미리 지정된 다른 위치로 자동으로 이동하도록 설정할 수 있습니다.
여기를 클릭하여 ProtoPie animation에서 지원되는 다양한 trigger에 대해 알아보세요.
ProtoPie의 condition을 사용해 구현된 비밀번호 유효성 검사ProtoPie의 native sensor 기능을 사용하여 현실적인 카메라 인터랙션 구현
ProtoPie에서는 camera, vibration, tilt, compass 및 3D touch 등 장치 내 기본 기능들을 사용한 프로토타입을 구현할 수 있습니다.
아래 튜토리얼을 통해 ProtoPie의 센서 기능을 사용하여 간단하면서도 현실성 높은 카메라 인터랙션을 만드는 방법을 배워보세요.
코딩 없이 sensor로 프로토타입 제작
ProtoPie가 Adobe XD에 비해 더 나은 프로토타이핑 툴인지 아직 확신이 없으신가요?
그렇다면, 아래 내용을 꼭 확인해 보세요.
아래 영상파일에서 보여지듯, ProtoPie에서는 tilt, compass, sound, 3D touch, 및 proximity와 같은 sensor trigger를 사용하여 다양한 기능을 구현할 수 있습니다. 한 예로, tilt trigger는 장치의 각도에 따라 프로토타입의 response를 변경하며, 기기를 옆으로 돌리면 프로토타입이 그에 따라 반응합니다. 마찬가지로 프로토타입에 compass trigger를 적용하면 장치가 가리키는 방향에 따라 response가 결정됩니다.
ProtoPie는 코딩 없이도 sensor를 사용하여 프로토타이핑이 가능합니다.즉, ProtoPie를 통해 Adobe XD의 auto-animate transition을 훨씬 능가하는 매우 현실적인 인터랙션을 만들 수 있습니다.
ProtoPie로 구현 가능한 프로토타입을 더 살펴보고 싶다면 여기를 클릭하세요.
ProtoPie + Adobe XD: 업그레이드된 결과물을 위한 워크플로
이번 아티클의 제목이 ProtoPie vs. Adobe XD지만, 반드시 둘 중 하나를 선택해서 독점적으로 사용해야 한다는 뜻은 아닙니다.
대신, ProtoPie 와 Adobe XD를 연동하면 각 툴에서 제공하는 특장점을 동시에 누릴 수 있습니다.
많은 디지털 디자이너가 Adobe XD에서 디자인 프로세스를 시작합니다. 그러나 Adobe XD 용 ProtoPie Plugin(Mac OS / Windows)을 사용하면 XD에서 작업한 초기 디자인을 ProtoPie로 가져올 수 있습니다. Adobe XD에서 디자인된 복수의 아트보드를 scene으로 가져오고, Adobe XD 파일과 동일한 레이어 계층, 위치 및 제약 조건을 유지하면서 개체를 가져올 수 있게 됩니다. 디자인이 ProtoPie로 이동되면, 직접 만져보고 경험해 볼 수 있는 현실적인 인터랙티브 프로토타입을 구현할 수 있습니다.
ProtoPie의 Adobe XD 연동을 통해 더 고도화된 hi-fi 프로토타입을 구현해 보세요.프로토타이핑 툴 간 기능 격차 해소
Adobe XD에는 모호한 개념을 강력한 디자인으로 바꾸는 데 도움이 되는 기능을 다수 보유하고 있지만, hi-fi 프로토타입 구현을 위한 기능이 충분하지 않습니다. 이때, ProtoPie로 프로토타입의 수준을 한 단계 높일 수 있습니다.
ProtoPie를 사용하면 다음과 같은 인터랙션을 구현할 수 있습니다.
● 현실적이고 커스터마이징된 인터랙션
● Conditional 인터랙션
● Cause-and-effect 인터랙션
● Text input, voice, Media playback, sensor 및 여러 장치와 연결된 인터랙션
● 특정 터치스크린 trigger가 추가된 인터랙션
ProtoPie 및 Adobe XD를 사용해 원활한 워크플로를 설정하는 방법을 알아보려면 여기를 클릭하세요.
