쿠퍼 컨설팅의 블로그에 올라온 프로토타이핑 툴 비교 아티클.
간단히 메모해두고, 다음 작업 때 필요한 부분을 테스트해봐야겠다.

The evaluation

  1. Time to create prototype: 프로토타입을 만드는데 드는 시간. 배우고 사용하기에 용이한가.
  2. Fidelity: 미리 설계된 인터랙티비티를 얼마나 잘 시뮬레이팅할 수 있는가.
    (scrolling, transitions, flow between pages and states, overall display and appearance)
  3. Collaboration / sharing: 프로토타입의 공유 및 협업 기능
  4. Usability testing: 사용성 테스트 기능
  5. Support: 양질의 튜토리얼, 도큐먼테이션, 라이브러리(UI elements, widgets, icons), 탬플릿  
  6. Interaction / gesture: 제스쳐 방식의 인터랙티비티를 추가하는 기능
  7. Animation: 스크린의 트랜지션이나 내부의 개별 엘리먼트들에 애니메이션을 추가하는 기능
  8. Device testing: 프로토타입을 다른 디바이스에서 테스트할 수 있는 기능


So, what tool should I use?

For a fast turnaround

인터랙티비티들에 대한 의견 공유의 필요성이 크게 없는 상태에서, 빠른 실험 및 방향전환을 위해서는 InVision, 거기에 iOS 애플리케이션일 경우 Flinto도 좋다.

For complex interactions

복잡한 데스크탑 어플리케이션이나 스크린/엘리먼트에 인터랙티비티가 상당히 많을 경우, 좀더 탄탄한 기능을 가진 Axure, Protoshare, Justinmind. 대신 툴을 학습하는데에 시간을 투자할 마음이 충분해야한다. 거기에 만약 웹사이트라면 Easel이 적합하다. Easel은 프로토타입에 대한 CSS/HTML을 제너레이팅하기 쉽다.

For usability testing

클릭 기반의 프로토타입을 가지고 사용성 테스트를 진행해야하고, 피드백을 얻어야할 필요가 있다면 기능에 이에 특화된 Solidfy가 적합하다. 


프로토타이핑 툴들이 서로 중복되는 기능들도 있지만 각자가 특정 시나리오에 맞게 특화된 기능들이 있기 때문에, 아래 차트가 상황에 맞게 툴을 선택하는데 도움이 될 것이다.

원 글에 들어가면 각 툴별로 가격 및 장단점이 더 자세하게 확인할 수 있다.

프로토타이핑 툴 Framer

네덜란드 출신의 Koen Bok이라는 사람이 만든 프로토타이핑 툴이다. 현재 Facebook에서 Product Designer로 일하고 있고, 그 전에는 Sofa라는 인터랙션 디자인 회사를 창업했었는데, Facebook에 인수됐다고 한다.

이미 알려진 프로토타이핑 툴들이 꽤 많고, 그들마다 다른 장단점과 목적이 있겠으나, Framer는 전반적으로 트랜지션이나 애니메이션 자체에 포커스가 맞춰진 툴이라는 느낌이 좀 있어서 흥미가 갔다. 더군다나 최근 공부하고 있는 Javascript라니! 복잡하진 않지만 일일이  코딩을 해줘야하고, 스케치가 아닌 Photoshop PSD 파일을 이용해야 의미가 있기 때문에, 초반 위계나 플로우 설계과정보다는, UI나 인터랙션 스터디 과정에서 Google Now, News Feed 예제처럼 그 애니메이션 자체로는 특별하지 않으나, 서로 싱크를 맞추기에 어려운 움직임을 미리 프로토타이핑하기에는 굉장히 좋은 것 같다. 

일단 코드가 나같은 근본없는 디자이너에게도 다루기가 쉬운 편이다. 기본적인 Javascript 지식만 있으면 충분히 사용 가능하다. 물론 직접 새로운 애니메이션을 만들어내는 것은 좀 힘들겠지만, 기본 예제나 CodePen의 샘플들을 사용하거나 다른 Javascript 기반 라이브러리와 섞어쓰기만으로도 충분할 수 있을 것 같다.

또 모바일 브라우저에서 봐도 애니메이션이 거의 네이티브처럼  잘 굴러간다.

Framer의 모티베이션에 관한 이야기 인용.

Framer tries to solve some of these problems by providing a very lightweight framework … The basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions.


PSD Layer > Javascript Object > event, animation 추가 > 끗!

PSD를 저장한 상태로 Framer를 돌리면 Photoshop의 PSD의 레이어그룹을 View라는 오브젝트로 자동 변환시킨다. View는 Framer의 기본 오브젝트로 x, y, width, height, scale, opacity 등의 기본 properties를 가지고 있고, 텍스트나 이미지를 품을 수 있다. 또 View들은 서로 하아어라키가 있어, subview(자식), superview(부모)를 이용해 종속관계를 만들어 컨트롤할 수 있다.

자동으로 변환된 View들은 Photoshop 레이어 그룹 이름을 그대로 가지는데, 이 이름을 통해 js 파일 안에서 오브젝트(=레이어그룹=View)를 호출 가능하다. 예를 들어 Photoshop에서 NavBar라는 이름의 레이어 그룹을 만들면, 자동생성되는 app.js에서 PSD[“NavBar”] 혹은 PSD.NavBar로 바로 불러올 수 있다. 그리고 불려진 View들은 View.on(<event>, <function>), View.animate({..})를 통해 기본적인 속성에 이벤트 및 애니메이션을 줄 수 있다.

또한 작업 도중 PSD 파일을 지속적으로 수정해도 Framer 자체를 계속 re-run 시켜주면 app.js의 코드는 안전하게 유지된 채로 그래픽 어셋만 업데이트된다.

까먹지말자

Index.html이 부를 수 있는 오브젝트 알아볼 때, Developer Console에서 PSD, PSD.Screen.height 등의 오브젝트를 불러보면 결과가 바로 나와 편하다. 난 이런걸 모르지. 근본이 없으니!

PSD의 그룹 레이어 구조(+마스크, 네이밍)등이 FramerJS 초기화랑 밀접한 연관이 있다. 대부분의 디버깅이 포토샵 레이어 구조 수정이었다. 이 부분은 FramerJS의 The rules for converting Photoshop files 참고.

Shift(누르고 있으면 애니메이션 딜레이가 25배 증가, 애니메이션 관찰용), Escape(토글로 디버그뷰로 전환, 스트럭쳐와 포지션 검사용)의 디버깅 숏컷 기능 제공. 처음에 스크린샷을 찍으려고 shift를 누르는 순간 애니메이션이 느려져서 당황;

-

공식 웹사이트: www.framerjs.com
직접 해본 결과물: goo.gl/Id2q59