1.Atomic (http://atomic.io)
아토믹은 뉴질랜드의 한 디자인 회사가 만든 웹 기반 프로토타이핑 툴이다. 러닝커브가 단지 15분 내외이기 때문에 아주 쉽게 인터랙티브한 프로토타입을 누구나 만들 수 있다는 것이 강점인데, CSS에서 지원하는 다양한 easing(Expo, Quint, Quad, Back 등..)을 각 화면 전환에 따라 몇번의 클릭만으로 설정이 가능하다는 점이 아주 큰 장점으로 작용한다.
기획자인 나로써는 인터랙션 디자인을 하면서 모션감을 배워야 했었는데, 이 툴은 초기에 ‘감’을 잡기에는 아주 좋은 툴이다. 또한 웹으로도 쉽게 공유가 가능하기 때문에 이 점도 장점으로 작용한다.
다만 이 툴은 여기까지다. 일단 프로토타이핑의 중요한 과제 자체가, 디자이너와 개발자 간의 커뮤니케이션 단절을 해소하는 것이다. 아토믹은 Export가 따로 지원이 되지 않기 때문에 이 점을 전혀 해소하지 못한다. 또한.. 조만간 지원이 될 터지만, 각 오브젝트별로 별도의 딜레이를 주어 디자인을 못하며, 제스쳐 지원이 없기 때문에 제한적인 인터랙션 디자인만 가능하다.
가장 결정적인 단점은, 네이티브 APP에서 구동되는 급의 인터랙션 디자인에 ‘근접’만 할 뿐, 실제 해당되는 느낌을 툴 자체에서 전달해주지 못한다. Spring 효과나 Bezier-curve 등의 easing이 무슨 이유에서인지 빠져있으며, 심지어 퍼포먼스가 좋은 아이폰에서 끊기기 까지 한다. 이 툴은 코딩을 배우지 않고 단순한 인터랙션 디자인 및 디자인 의도를 전달하고자 하는 사람들에게는 호응을 받을지 모르나, 주류가 되긴 어려울 것으로 보인다.
2. Form (relativewave.com)
폼은 Relativewave라는 작은 스타트업이 구글에 인수되면서 본격적으로 알려진 툴이다. 이 툴은 오리가미와 비슷한 패치 기반의 툴로써, 매우 파워풀한 기능과 패치를 제공하고 있다. 최근 1.3으로 업데이트되면서 framer.js조차 상상도 못하는 기능 구현이 가능하다. (Ex. Device Motion 등)
다만 2주가량 써보면서 느낀점은, 튜토리얼과 커뮤니티 활성화의 부족으로 인해 딱 튜토리얼 정도만 배울 수 있다는 것이다. framerjs는 커피스크립트 기반으로 되어 있기 때문에, 자바스크립트나 커피스크립트 관련 책을 보면 어느정도 개념을 잡을 수 있는 반면 폼은 그렇지 못하다.
사실 튜토리얼에서 제시한 패치만으로도 여러가지 variation이 가능하지만, 개발지식을 요구하는 부분이 큰 듯 싶다. 개발 경험이 없다시피 한 나로서는 일단 개발을 더 공부하고 다시 이용해볼 요량이다. (ㅠㅠ)
3. framer.js (http://framerjs.com)
프레이머는 프로토타이핑 계에서 가장 핫한 툴이라 할 수 있다. 커피스크립트 기반으로 되어 있으며, 커뮤니티가 아주 활발하다. 최근 가장 집중하며 배우는 툴인데, 코드와 개념이 잘 정리되어 있어 개인적으로 Form보다 수월하게 배우고 있다.
프레이머의 장점은 명확하다. ‘엄청난 자유도가 있다는 것’이다. 코드 기반이기 때문에 그럴 수도 있지만, 디자이너가 원하는 점을 정확히 잘 캐치한 듯 싶다.
일단 스케치/포토샵과 연동이 아주 뛰어다나는 점과, Export 시에 콘솔에서 참고하여 개발자에게 넘겨 여러가지 값을 참조할 수 있도록 하고 있다. 또한 Spring 애니메이션을 지원하는데, 이것이 네이티브 앱의 그것과 아주 동일한 느낌을 전달해주고 있다.
다만 위지윅 기반의 툴의 생산성은 기대하기 어려울 것 같다. 일단 디자이너가 스스로 커피스크립트를 배워야 하며, 하나의 의도된 인터랙션을 설계하기에 꼬박 하루 정도는 걸려야 원하는 결과물이 나올만한 듯 싶다.. (물론 플래쉬도 마찬가지겠지만)
또한 인터랙션 플로우를 설계하기에는 부적합하다. 기존 웹/앱 디자인 업무의 경우 유저 플로우가 매우 중요한 부분인데, 이것을 설계하려면 여러가지로 공수가 많이 들 것 같다. 따라서 핵심이 되는 메인 컨셉의 페이지만 설계해볼 때 이를 적극 추천하고 싶다.
