interactive_design/mobile_design

모바일 앱 이미지 프로토타입 만드는 툴과 방법

jisunlee 2013. 6. 10. 07:06

http://baak.me/2012/08/%EC%A0%84%EB%9E%B5%EC%A0%81%EC%9D%B8-%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9D%B4%ED%95%91%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%8B%A4%EC%A0%84-%EA%B0%80%EC%9D%B4%EB%93%9C/


파워포인트나 아크로뱃리더를 이용하는 것도 같은 원리 

https://groups.google.com/forum/?fromgroups#!topic/uiuxstudy/XGzDXiJGZQA


키노트 프로토타이핑 만드는 방법 영상

http://vimeo.com/20778110

http://keynotekungfu.com/


가장 쉬운방법은 드림위버에 구현하고

이를 웹서버에 올려놓고 클릭하게 하는것


iphone

http://popapp.in/

해본것중에 가장 쉬움... 그러나 무료버전은 페이지수에 제한있음 

(안드로이드는 조만간 출시 예정)


사실 웹이나 앱 기획서를 만들면 페이퍼 단위로 그려지기 때문에 액션이나 실제로 돌아가는 모습을 시뮬레이션하기 쉽지 않습니다. 하지만 이 앱을 이용하면 간편하게! 시뮬레이션 해 볼 수 있어서 좋아요

근데 이 앱은 별도의 사용방법 가이드 없이도 쉽게 사용할 수 있어서 좋습니다!

우선 앱스토어에서 앱을 다운 받습니다. (iOS만 지원됩니다!! >_<)

그런 다음 각각의 화면의 상세 링크를 추가하면 되는데요! 링크는 사진과 사진끼리 연결할 수 있습니다.

각각의 부분에 링크영역을 설정한 후, Link to를 누르면 페이지를 선택할 수 있는 화면이 나옵니다.

단순 링크만 있다면 조금 아쉬울 텐데요! 단순히 링크만 거는것이 아니라 화면 전환에 대한 효과도

선택 할 수 있습니다.

Basic / Next / Back / Rise / Dismiss

아래에서 위로 올라오는 효과 혹은 왼쪽에서 오른쪽으로. 그 반대의 액션들을 선택하여 지정할 수 있습니다.



iphone and ipad

http://giveabrief.com/

http://realizerapp.com/


Android



web 기반의 모드 모바일 기기를 지원하는 .. 



(유료) http://www.appgyver.com/prototyper

앱가이버
앱가이버(AppGyver)는 프로토타이핑을 위한 프로토타이퍼(Prototyper), 폰갭(PhoneGapp)을 개발하는 스테로이드(Steroids) 등이 포함된 모바일 개발툴이다.
사람들이 증상에 맞는 의사를 찾을 수 있도록 도와주는 베터닥터(BetterDoctor)의 CEO 아리 툴라는 “앱가이버는 앱개발과 구상 모두에 훌륭한 툴"이라며 "우리는 앱가이버 프로토타입을 사용해 팀 내부는 물론 소비자들과 함께 새로운 아이디어를 실험해보고 검증한다”고 말했다. 그는 아이폰용 개발툴로 앱가이버 스테로이드를 선택한 것에 대해서도 만족한다고 말했다. 그는 "스테로이드는 친숙한 웹 개발 기술로 네이티브 모바일 앱을 개발할 수 있어 완전한 네이티브 코드를 사용하는 것보다 전체 과정을 훨씬 용이하다"며 "단 앱가이버 스테로이드는 현재 핵심 네이티브 요소들을 제공하지만 여전히 부족한 요소들이 있다"고 말했다.


다운로드 받아서 설치해서 쓸수 있음 

http://www.justinmind.com/prototyper/download


다운로드 필요없음

http://proto.io/


http://www.fluidui.com/



웹사이트와 모바일까지 다 커버하는...

http://www.axure.com/