사용자 경험을 사용자에게 알맞게 적용하기 위해 와이어 프레임을 적용하는데 이 때 사용할 수 있는 몇가지 도구를 소개합니다.
1. Fluid UI (https://www.fluidui.com/)
미리보기 기능에서 화면 이동도 가능하며 UI가 실제 스마트폰과 비슷한 형태로 보여집니다. UI파트는 Wireframe, iPhone, iPad, Android, Android 4, Android Tablet, Windows Phone중에서 선택해서 사용할 수 있습니다. 그리고 다양한 콘텐츠가 제공되어 있고 이미지도 별도로 업로드해서 사용할 수 있습니다.
가장 중요한 특징은 특정 부분을 탭하면 이동을 할 수 있고 미리보기에서 실행 동작을 확인할 수 있습니다.
2. Proto.io (http://proto.io)
라이브 미리보기 기능이 있고 간단하게 사용할 수 있는 장점이 있습니다. iPhone, iPad, Android, Android Tablet 포로토타입을 만들 수 있는 웹앱입니다.
간단한 UI가 특징이고 바로 사용할 수 있습니다. 화면 이동은 안되지만, 목록이나 텍스트 입력 조작감을 실제 스마트폰에서
사용할 수 있습니다. QR코드를 만들어주는데 이것을 통해 스마트폰에서 바로 확인할 수 있습니다.
3. InVision (http://www.invisionapp.com/)
이미지를 기반으로 화면 이동을 만들 수 있는 도구입니다. 이 도구는 와이어 프레임을 만드는 도구는 아니기 때문에 화면을 그리는 작업을 별도로 해야 합니다. 이미지를 선택하고 별도로 이미지에 링크를 붙일 수 있어 이미지를 조합하여 간단하게 실제 모형을 만들 수 있습니다.
사용자끼리 리뷰하는 기능도 있고 실제 모형을 공유하여 화면 일부분에 대해서 댓글을 주석형태로 넣을 수 있습니다. 이 도구로는 화면이동이나 와이어프레임 방향성이 어느 정도 정해진 단게에서 실제로 움직이는 형태를 리뷰할 수 있는 도구입니다.
4. Prototyper (http://www.justinmind.com/prototyper)
Windows, Mac, Linux대응하는 프로토타입 작성도구입니다. 스마트폰, 스마트웹사이트에 제한적이지 않고 PC용 웹사이트 및 Facebook페이지 프로토타입을 만드는 기능도 제공합니다. 브라우저에서 테스트할 수 있는 것이 장점입니다. 텍스트입력이나 체크박스처리, 화면이동을 하는 실제조작과 비슷한 조작을 할 수 있습니다. 유료서비스로 사용할 경우 페이지를 공유할 수 있습니다.
5. Moqups (https://moqups.com)
이전에 블로그를 통해서 소개했던 와이어프레임 작성 도구로 별도 등록없이 이용할 수 있는 서비스입니다. 또는 별도로 등록하면 PNG, PDF로 저장할 수 있고 메일이나 URL로 공유할 수 있습니다.
페이지 링크기능도 되고 UI부분별로 링크를 설정 가능합니다. 실행은 미리보기가 가능합니다.
6. Cacoo (https://cacoo.com/)
웹에서 모형을 만들 수 있는 도구로 스텐실이 다양하고 플로우차트나 UML, ER, 와이어프레임등 다양한 것들을 만들 수 있고 Cacoo스토어에서 스텐실을 별도로 구입하여 확장할 수 있습니다. 중요한 것은 여러 사용자와 실시간으로 공통편집도 가능하다는 점입니다.
7. Pencil (http://pencil.evolus.vn/)
Windows, Mac에 별도 프로그램을 설치해서 사용할 수 있는 와이어프레임 도구입니다. 기본적으로 iPhone, Android 4, 웹페이지용을 사용할 수 있고, 온라인에서 파트를 검색해서 다운로드받아 확정할 수 있습니다. Ui파트가 부족하다고 느끼면 아래 사이트에서 SVG파일을 다운로드받아 사용할 수 있습니다.
OpenClipArt: http://openclipart.org/