UX 디자인 프로토타입핑 툴 총 정리
목적 지향적 프로토타입핑 툴 선정하기
1. 프로토타입을 왜 하는가
“이제 정적인 그래픽만을 생각해서는 안됩니다. 모션과 인터랙션이 어우러진 디자인을 처음부터 생각 해야 하고, 프레이머는 정적인 그래픽을 생각함과 동시에 인터랙션을 같이 생각 할 수 있는 툴로 가기 위해 노력하고 있습니다.
- Koen Bok, Founder of Framer”
씨애틀에서 열리는 프레이머 밋업에 창업자가 와서 발표를 한 적이 있다. 그때 당시에 프레이머의 가장 큰 업데이트인 Design 탭이 추가 되었는데, 아이디어는 스켓치 같은 그래픽 툴을 쓰지 말고 프레이머에서 애시당초 디자인을 시작하라는 이야기 이다. 위의 말에 동의 한다. 우리는 experience를 디자인 하는 UX 디자이너 아닌가. 이제는 정적인 그래픽으로는 디자인의 한계가 있을수밖에 없고, 여러개의 스크린들이 어떻게 움직이는지 알기 위해서는 직접 동작을 해보는 수밖에 없다. 프로토타입은 그 중 가장 싸게 효율적으로 스크린들을 엮어 줄 수 있는 방법이고, 각각의 디자인 프로세스에서 프로토타입은 아래와 같이 유용하게 사용된다.
1.1. Concept & develop your ideas
디자이너는 사용자의 인풋을 어떻게 받아들일지 의미 있는 모션들과 적절히 조합해야 한다. 특히나 모바일에서 애니매이션은 의미 전달에 상당히 큰 역할을 한다. 특히나 요즘 미니멀 & 플랫 디자인에서는 모션을 통한 표현을 중시한다. 이런 것들은 기존의 스켓치나 포토샵으로는 표현이 거의 불가능하다고 볼 수 있다
1.2. Create shared understanding of your product
“이게요, 이렇게 움직이구요, 저렇게 움직여서 다음 스크린으로 넘어가요” 흔히 들을 수 있는 디자이너와 엔지니어의 미팅이다. 이렇게 설명하고서는 '우리는 같은것을 생각하고 있을꺼야' 라는 가정을 억지로 해야 한다. 본게 없이 설명만 들었으니, 같은걸 생각하고 있을지는 사실 아무도 알 수 없다. 하지만, 프로토타입은 그야말로 10분 설명해야 common ground가 설정될 수 있는 것을 몇초만에 쉭쉭 보여줌으로써 쉽게 설명 될 수 있다.
1.3. Get feedback and validation
아이디어는 싸다. 그러나 실제 프로덕션은 비싸다. 다른말로 하면 엔지니어의 비용이 만만치 않다는 것이다. 이런 비용을 확신도 없는 아이디어에 투자 하기에 부담은 만만치 않다. 그래서 테스트를 해보고 실제로 이 디자인이 초기에 설정한 문제를 해결하는지 확인할 수 있는 효율적인 방법이다.
이렇게 디자인 프로세스 전반에 걸쳐서 프로토타입은 유용하게 활용된다. 초기의 아이디어 빌딩에서부터 후반에 테스팅까지 프로토타입은 각각의 프로세스 목적에 따라서 잘 버무려져야 한다. 이 프로토타입의 fidelity는 다를 수 있다. 컨셉 빌딩에서 완벽하게 refine된 프로토 타입은 약간의 낭비이고, 와이어프레임 레벨로 테스팅을 하는 것도 원하는 피드백을 잘 못 얻을 수도 있다. 그러므로 몇개의 프로토타입 툴을 준비해두고 맞게 사용하는게 이상적이다. 그래서 아래의 리스트들을 준비 했다. 도움이 되었으면 좋겠다.
내가 회사에서 주로 하는 design workflow에 따르면 다음과 같은 조건이 충족 되어야 한다.
- 스케치 혹은 다른 그래픽 툴들과 연동이 되어야 한다.
- 쉽게 쉐어 할 수 있어야 한다.
- 툴이 디자인 아이디어를 제한해서는 안된다. 어느정도의 자유도가 확보되어야 한다.
우리가 원하는건 어쩌면 파워풀 하면서 배우기 쉬운 툴일지도 모르겠다. 아마 그게 세상에 나온다면 모두가 그 툴을 쓸테다. 하지만, 그건 불가능하다. 2. 간단하지만 제한적 툴
2.1. Balsamiq (https://balsamiq.com/)
최고로 간단한, 간단함을 목적으로 한 소프트웨어다. 사실 내 생각에는 별로다. 와이어프레임이라는게 그 다음 단계인 mid-fidelity design으로 이어질 수 있어야 하는데, 다음 단계로 넘어갈때 와이어프레임을 새로 그려야 한다. 그냥 손으로 스케치 하는게 나을수도 있다.
2.2. invision & Marvel (https://www.invisionapp.com/)
invision과 marvel은 상당히 비슷한 컨셉으로 만들어져 있다. 스크린을 임포트 하고, 핫스팟을 만들어서 연결하는 방식이다. 특히 invision같은 경우 최근 Craft (https://www.invisionapp.com/craft)라는 스케치 플러그인을 통해서 약진을 꾀하고 있다. 내 생각에는 “간단한" screen by screen프로토타입에서는 최고가 아닌가 생각 된다. 그 외에 Craft 플러그인을 활용하면 스타일 가이드 라인 만들어내기, 스케치 앱 안에서 프로토타입, 스탁 포토 넣기 등 다양한 이점이 있다. 스크린간의 인터랙션을 프로토타입 하고 싶다면 최적의 툴이 아닌가 싶다.
장점:
- 빠르다, 쉽다. 그게 다다.
단점:
- 이런 간단한 프로토타입은 쉽지만 하다보면 약간의 한계와 어색함을 느끼게 된다. 예를 들어 애니매이션은 스크린과 스크린간의 트랜지션에서만 넣을 수 있다.
- 조그마한 change가 있으면 다시 스크린을 넣어야 하는데, 이게 참 귀찮다.
- Marvel의 iOS앱은 본인의 모든 프로젝트들을 쉽게 볼 수 있으며 트라이 해보는데 참 좋다.
3. 중급이지만 쓸만한 툴
3.2. axureRP (https://www.axure.com/)
듣기로는 아마존에서 엄청 많이 쓴단다. 사실 나는 잘 몰라서 안쓴다.
3.3. flinto (https://www.flinto.com/)
위의 툴들 보다는 조금 더 고급 애니매이션이 가능하다. 사실 잘 모른다.
3.4. principle (http://principleformac.com/)
우리 회사에서 코드랑 친숙하지 않는 디자이너들이 많이 사용한다. 타임라인과 키 프레임을 설정할 수 있다는 장점이 있다. 하지만, 극명한 단점으로 웹으로 쉐어 할 수 없고, 비디오를 만들어서 쉐어 할 수 있는 방법 밖에는 없다.
3.5 Adobe XD (http://www.adobe.com/products/experience-design.html)
만약 어도비 툴로 거의 모든 디자인을 만든다면 고려해볼만한 툴이다. 하지만 역시나 어느정도의 기능적인 면에서 제한적이다.
4. 복잡하지만 최고의 자유도
4.1. Aftereffect
한마디로 모든걸 다 할 수 있다. 애초에 모션 그래픽을 위해서 어도비에서 나온 툴이다. 즉 프로토타입을 위한 툴이 아니라, 모션 그래픽을 위한 툴이기 때문에 한번 배우고 나면 디자인의 영역이 넓어진다는걸 느낄 수 있다. 실제로 거의 대부분의 모션 디자이너가 이 툴을 사용한다. 관심이 있다면 https://robots.thoughtbot.com/accessible-after-effects
장점:
- 어도비 툴을 쓴다면 워크 플로우에 자연스럽게 녹아들 수 있다.
단점:
- 스켓치를 주요 디자인 툴로 쓴다면 익스포트 하고 일러나 포토샾에 넣은 후에 재정리 하는 과정이 꽤나 귀찮다. 회사에서 모션 디자이너랑 일을 하게 되면 스케치 파일을 전부 일러나 포토샾으로 바꿔서 줘야 한다.
- 배우기 어렵다. 기본적인 애니매이션에 대한 지식이 있어야 한다.
- 비디오를 익스포트 하고 실제적으로 클릭을 할 수는 없다.
4.4. Form (http://www.relativewave.com/form/)
최근에 구글이 샀다. Quartz composer와 비슷한 수준의 성능을 자랑한다.
4.3. Quartz composer (http://origami.design/)
옛날 애플에서 만들어낸 제품이지만, 페이스북에서 Origami toolkit을 제공함으로써 프로토타입 툴로서 부각 되었다.
장점:
꽤나 자유도가 높고 결과가 괜찮게 나온다.
디바이스의 센서와 카메라의 기능까지 활용할 수 있다.
단점:
어렵다. node connection이 쉬워 보이긴 하지만, 기본적인 프로그래밍에 대한 이해가 있어야 한다.
인터랙션이 복잡해지면 노드와 라인들이 라면처럼 꼬여버려서 전체적인 큰 그림을 보기가 힘들다.
4.5. Framer
자바스크립트 베이스로 또한 꽤나 자유도가 높다. 하지만 코드를 써야 한다. 최근에 디자인 탭이 업데이트 됨으로써 툴 안에서 디자인까지 실행해볼 수 있다.
장점:
자바스크립트에 대한 이해가 어느정도 있다면 할만 하다.
프레이머 스튜디오를 통해서 쉽게 디바이스로 보낼 수 있다.
페북 커뮤니티, 오프라인 밋업 등 커뮤니티가 굉장히 활성화 되어 있다.
디자이너가 코드에 대한 개념을 이해하기 위해 코드 입문용으로도 꽤나 괜찮다.
단점:
자바스크립트를 알아야 한다. 좀 어려울 수 있다.
5. 총정리
위에서 말했듯이 프로토 타입은 다양한 목적을 달성할 수 있다. 컨셉의 증명이 될 수도 있고, 커뮤니케이션이 될 수도 있고, 테스팅이 될 수도 있다. 중요한 것은 목적을 달성하기 위해 어떤 프로토타입을 만들어야 하는가 질문 되어야 하고, 그 프로토타입을 만들기 위해서 어떤 툴을 써야 하는지 결정이 되어야 한다.
그러나, 하나의 툴을 마스터 한다는 것은 꽤나 정성과 시간이 들어가는 작업이다. 모든 프로토타입을 다 잘 할수는 없으므로 선택의 기로에 서야 한다. 나의 결론은 이렇다. 아직 프로토타입이 본인의 디자인 프로세스에 정착되어 있지 않다면, 프로토타입을 본인의 디자인 프로세스에 항상 넣으려는 의식적인 노력이 필요하고, 쉽게 다룰 수 있는 툴을 골라야 한다. 여기서 말하는 '쉽게 다룰 수 있는 툴' 의 정의는 그 툴을 하는 본인의 모습을 상상했을때 한숨이 안나오는 툴을 이야기 한다. 나의 개인적인 의견으로는 가장 기초적인, 빠르고 쉬운, 툴 하나와 가장 고급의 툴을 하나 선택 했다. 나는 invision과 Framer를 쓴다. 당장 엔지니어들과 미팅이 있는데 디자인을 커뮤니케이션 해야 한다면 invision을 쓰고, 특정한 micro interaction을 증명해야 한다면 Framer를 쓴다.
"뭐가 제일 나을까요?” 라는 질문은 비유를 들어보면 아이폰이 좋아요, 안드로이드가 좋아요? 질문과 비슷하다. 둘 다 목적은 어느정도 달성할 수 있다. 그냥 선택하고 파라. 그러면 금이 나올테니.
----- 업데이트 ----
찾아보다 보니 이런 훌륭한 웹 사이트가 있었습니다.
http://www.prototypr.io/prototyping-tools/
2018. 03. 02 update
쿠퍼 디자인 에이전시에서 프로토타입핑을 잘 정리해둔 페이지가 있어 Add 합니다. 본인의 목적에 맞게 기능들을 선택하고 그 기능에 맞는 프로토타입핑 툴을 선정해 줍니다.
https://www.cooper.com/prototyping-tools
