[아폴로 그래픽]
어도비XD 호환되는 ProtoPie
프로토타이핑 툴, uiux 디자인, 프로토타입, 어도비xd
Free Your Ideas, ProtoPie
이번에는 UI/UX 디자인을 중심으로 디자인 소프트웨어 학습을 도와주는 아폴로 그래픽 유튜브 채널에서 ProtoPie가 소개되었습니다. ProtoPie의 기본적인 기능에 대한 전반적인 설명뿐만 아니라 실제 ProtoPie Studio 내에서 그러한 기능들이 어떻게 사용되는지 또한 다루고 있습니다.
특히 ProtoPie가 가진 특별한 장점 중 다른 프로토타이핑 툴과의 호환이 가능하다는 점을 Adobe XD를 불러오는 과정을 통해 직접 확인할 수 있는데요. 아폴로 그래픽 채널이 소개한 ProtoPie의 기능에는 어떤 것들이 있는지 미리 만나보겠습니다.
ProtoPie의 기본 이해하기
ProtoPie는 디자인에 애니메이션을 추가해 프로토타입을 제작하는 데 중점을 두는 프로토타이핑 툴로 완성도 높은 결과물을 만들어 낼 수 있습니다. 어떤 행동을 보여줄 때 반응을 보이게 하는 과정, 즉 Object와 Trigger, Response 이 세 가지를 이용해 간단히 인터랙션을 만들 수 있죠.
ProtoPie 공식 사이트 하단에서 ProtoPie Studio로 만든 인터랙션 예제를 확인할 수 있습니다. 키보드와 드래그, 카메라 등을 사용할 수 있는 것은 물론, 간단한 인터랙션을 통해 Unit Converter 또는 계산기 등의 심화된 인터랙션도 어렵지 않게 만들 수 있습니다.
ProtoPie Studio 실행하기
현재 ProtoPie는 30일 무료 체험이 가능합니다. 체험을 원한다면 간단하게 이메일을 입력하여 가입을 하고 ProtoPie Studio를 다운로드하면 됩니다. 다운로드는 Mac과 Windows 모두 지원하고 있습니다. 스튜디오를 실행하면 시작에 앞서 다섯 가지 예제와 Documentation, Tutorials를 제공합니다.
새로 만들기를 원한다면 New Pie를 눌러 작업을 시작할 수 있는데요. ProtoPie Studio는 Scene의 이름을 바꾸거나 추가하고, 디바이스를 설정하는 등 프로토타이핑 작업에 용이한 환경을 갖추고 있습니다.
상단 메뉴를 통해 다른 프로토타이핑 툴에서 제작한 파일이나 이미지, 비디오를 불러올 수 있으며 원하는 Shape Layer과 텍스트도 추가할 수 있습니다. Shape Layer는 오른쪽 패널을 통해 스타일을 변경할 수 있습니다.
Container 메뉴는 Shape Layer를 드래그하여 단순히 그룹을 짓거나, 스크롤(Scroll) 또는 페이징(Paging)을 하고자 하는 작업 영역을 설정할 수 있습니다. 전환 방향을 바꾸거나 Overscroll에 효과를 주고 싶다면 우측의 Property Panel을 이용하면 됩니다.
Adobe XD 불러오기
ProtoPie는 어도비 XD와 피그마, 스케치에서 제작된 파일을 불러올 수 있습니다. Import 할 때에는 Artboard와 Import Size 설정을 비롯한 다양한 옵션을 제공합니다. Re-import를 할 때에도 레이어 사이즈와 위치 덮어쓰기 등의 옵션도 설정할 수 있습니다.
대표적으로 Adobe XD를 import 해보았습니다. 디자인은 물론 그룹이나 레이어 이름도 똑같이 import 되며, image layer와 text layer는 bitmap 이미지 파일로 불러와집니다. 어도비 XD에서 제작한 파일을 성공적으로 불러왔다면, ProtoPie에서는 원하는 인터랙션을 적용하면 됩니다.
아폴로 그래픽에서 제작된 예제를 보면 인터랙션 패널에 Trigger마다 다양한 인터랙션이 만들어진 것을 확인할 수 있습니다. 시작 화면에서는 Opacity와 Reset, 화면을 넘길 때에는 색상과 크기, 3D 회전 등을 설정해 효과를 주었습니다. 버튼을 탭(Tap) 했을 때 연결되는 웹 사이트도 지정할 수 있습니다.
내가 만든 파일 공유하기
다른 사람과 협업이 용이한 ProtoPie는 제작한 파일을 upload 하는 기능도 가지고 있습니다. 업로드를 하게 되면 ProtoPie Cloud에 파일이 저장되고 공유할 수 있는 링크가 생성됩니다.
개인 디바이스에서도 제작한 파일을 사용해 보세요. 상단 메뉴의 디바이스를 클릭하면 QR 코드를 확인할 수 있는데요. 디바이스에 ProtoPie 앱을 다운로드해 QR 코드를 스캔하면 제작한 프로토타입을 시연할 수 있습니다.
다른 프로토타이핑 툴을 사용 중인 유저도 부담 없는 ProtoPie. 완성도 높은 프로토타입을 제작하고 싶다면 직접 체험해 보세요.
아폴로 그래픽이 시현하는
ProtoPie의 특별한 기능
