2016. 7. 21. 07:50ㆍ리뷰
ProtoPie는 현재 무료로 사용하실 수 있으며. Windows 버전은 아직 공개되지 않았습니다.
https://protopie.io/
특징
3D Touch, 디바이스 센서를 활용한 인터렉션 구현
ProtoPie는 인터렉션 중심의 프로토타입을 제작할 수 있는 툴로, 이미 많은 분들이 사용하고 있는 Pixate나 Proto.io 등과 비슷한 수준의 프로토타입을 개발할 수 있는 툴입니다. 또 3D터치와 디바이스 센서를 활용한 인터렉션을 개발할 수 있다는 ProtoPie만의 특징도 가지고 있습니다. 홈페이지에 접속해보면 가장 눈에 띄는 것이 이러한 인터렉션을 활용한 예제들인데요, 평소 이 기능을 테스트해보고 싶었던 분 들이라면 만족할 만한 부분이 아닐까합니다. 개인적으로는 이러한 기능을 적용한 프로토타입을 제작한 적이 없어 크게 와닿진 않았지만, 제작할 수 있는 프로토타입의 유형을 넓혀 준다는 점에선 큰 장점이라 볼 수 있을 것 같습니다.
디바이스 센서를 활용한 다양한 인터렉션 프로토타입
학습하기 좋은 깔끔한 인터페이스
보통 툴의 성격에 따라 Low-fi, High-fi로 구분하고 중간 정도에 있는 툴을 Mid-fi라 부르곤 하는데요. 그 성격에 따라 툴에서 제공하는 기능도 대부분 비슷합니다. 그렇기 때문에 “사용자가 얼마나 쉽게 학습을 할 수 있느냐” 가 툴을 선택하는데 높은 우선순위를 가진다고 생각합니다. ProtoPie는 인터페이스 디자인이 잘 되어있어 화면 복잡도를 줄여주었고, 이는 사용자가 툴을 접근하는데 드는 부담감을 없애주고, 필요한 기능을 찾아 사용하는데 드는 시간을 줄여주게합니다. 간결한 인터페이스는 작업과정을 한결 편하게 해주는데요. 어떤 툴은 인터렉션 속성와 오브젝트의 속성들이 좌우로 나뉘어 있어, 시선과 마우스커서를 반복적으로 번갈아가면서 작업을 해야하는데, ProtoPie는 이런 불필요한 피로감을 줄여주었습니다.
트리거를 통한 인터렉션 구현
ProtoPie는 사용자 제스처와 모션을 조합한 Trigger를 추가하여 인터렉션을 개발할 수 있도록 설계되었습니다. 예를들면 먼저 Tap이나 Pinch와 같은 터치 제스처 Trigger를 생성한 뒤, Move나 Scale등의 모션을 추가하여 하나의 인터렉션을 생성하는 방식인 것이죠. 개인적으론 이 부분이 무척 맘에 들었는데요, 이 방식은 인터렉션 개발의 순서가 자연스럽게 연결되도록 유도해주고, Trigger에서 조합할 수 있는 옵션들이 자동적으로 분류되어 사용자가 인터렉션을 개발하는데 필요한 고민을 줄여주고 있습니다. 다만 트리거 생성이 많아 질 경우 대상 오브젝트를 확인하기 어렵고, 관리가 어려워 진다는 불편함은 있습니다.
프레임 구성이 잘되어 있어 인터페이스가 잘 정돈 된 느낌을 줍니다.
아쉬운 Preview 기능
작업한 결과물은 디바이스에 ProtoPie 앱을 설치하여 확인할 수 있습니다. QR코드를 이용해서 무선으로 연결할 수 도 있고, USB 케이블로 이용하여 사용하실 수 도 있습니다. 다만 프로그램 내에서 Preview 기능이 없는 것은 조금 아쉽습니다. 프로토타입의 특성상 빠르게 작업물을 확인하는 경우가 많기 때문에, ProtoPie 앱내부에서 Preview를 제공했다면 좀 더 편리하지 않았을까 라는 생각을 해보았습니다.
작업물을 확인 하기 위해선 반드시 디바이스 연결을 해야합니다.
예제 만들어보기
저는 툴을 학습하기 위해 보통 두 가지 타입의 프로토타입을 만들어 보는데요. 첫번째로는 스토리보드 중심, 두번째로는 모션이 중심이 되는 프로토타입입니다. 이 두가지 타입으로 제작을 하는 이유는 툴의 성격을 파악하는데 도움이 되고요. 또 이 두 가지가 일반적으로 프로토타이핑에 가장 많이 활용되는 영역이기 때문입니다.
iPhone Appstore
첫번째로는 iPhone Appstore를 만들어 봤습니다. 간단한 모션도 들어가있고 페이지 전환 효과도 확인할 수 있는 예제입니다. 먼저 상단의 계속적으로 반복되는 스크롤링을 어떻게 구현할 수 있을까 많은 고민을 했습니다만, 이것까진 구현하기는 힘들 것 같더군요. 그 외 다른 인터렉션을 구현하는데는 큰 어려움이 없었는데, Scroll 인터렉션을 적용하려면 Container Layer를 생성하여 화면상의 스크롤 범위를 정하고, 스크롤이 될 컨텐츠를 Container Layer 하위 레이어로 추가해야합니다. 이는 Pixate와 비슷한 방식인데, 이런 방식을 사용하는 툴을 사용해본 경험이 없다면 어려움을 겪을지도 모르는 부분일 것 같습니다. 전 Pixate를 써봤음에도 못찾아 메일로 문의했네요. :)
Scroll 기능을 구현하기 위한 레이어 구성
Scroll 바운스백 효과는 어딘가 어색해보이기도 합니다. 애니메이션 옵션을 제공했다면....
머티리얼 디자인
두번째로는 모션 인터렉션을 테스트 하기에 가장 적합하다 생각하는 머티리얼 디자인을 흉내내어 보았습니다. 이 작업 또한 기능구현을 하는데는 어려움을 느끼진 못했습니다. 애니메이션 옵션을 다양하게 제공하고 있어 정밀한 표현을 할 수 있도록 해주고, Trigger 조합으로 복합적인 모션을 쉽게 연출 할 수도 있습니다. 그렇지만 불편한 부분 또한 있었는데요, 머티리얼 디자인 같이 오브젝트의 움직임이 많은 화면 같은 경우, 좌표값을 설정하는 것이 작업속도에 미치는 영향이 큽니다. ProtoPie는 오브젝트의 좌표값을 설정하는데 절대값만 지정할 수 있도록 되어있습니다. 이는 사용자가 오브젝트를 임의의 위치에 반복적으로 변화를 줄 경우 일일히 그 값을 확인해야 한다는 불편함을 가지게 됩니다. 저 같은 경우 이 작업을 하면서 오브젝트의 원위치와 이동할 위치를 반복적으로 변경하면서 작업을 했기 때문에 불편함이 배가 되었구요. 저는 상대값 옵션이 있었다면 작업하는데 훨씬 용이했을거라 생각합니다.
절대좌표와 상대좌표를 선택 할 수 있는 옵션을 제공해 달라!!
마무리하며
글을 쓰다보니 문득 불평불만이 부각되어 툴이 부정적으로 인식되지 않을까 내심 걱정이 됩니다. 기대가 컸던 터라 아쉬운 부분들을 좀더 표현하게 된 것 같습니다. 그렇지만 잘 만들어진 툴이라는 것은 틀림없습니다. 개인적으로는 많은 분들이 좋아하고 사용하고 계시는 Pixate와 비교한다면 활용 측면에서나 학습적인 부분, 프로토타입을 제작과정에서의 편리함 등 많은 부분에서 ProtoPie에 손을 들어주고 싶습니다. 무엇보다 정말 쉽습니다. 또 아직 베타버전이기 때문에 앞으로 업데이트 될 내용들이 더 있을거라 예상합니다. 제품이 본격 출시되면 좀더 좋은 모습을 보여주리라 기대해봅니다.
[참고##프로토타이핑##]