[스크랩] 기획자, 디자이너를 그리고 모두를 위한 프로토타입 툴

개인적인 프로젝트 진행시에 프로토타입같은건 작성하지 않는다.

간단할 것 같다고 판단하여 에이포 용지에 대충의 ui를 설계하고 만들면서 수정하고 수정하면서 만들다 보면 간단한 서비스도 실상

그리 간단하지는 않은것 같다. 정리가 안되서 빙글빙글 돌고 돈다. 돌다보면 소스도 꼬인다.. ㅋ

자주 이런식의 패턴이 반복되어서 개선해보기 위해 막상 잘 사용하진 않지만 나름 괜찮은 프로토타입툴을 한번씩은 만져보았다.

그래도 여전히 종이와 팬에 손이간다.  종이와 팬만한 프로토타입툴은 없지만 협업을 할 경우는 아닐 수도 있다.

오늘 SK planet 에서 만든 프로토타입툴인 TouchFake를 처음 써보고 이에 대해 간단하게 정리해 보려한다.

하는김에 그동안 사용해 보았던 프로토타입툴들도 같이 정리하기로 했다.

(아래 언급되는 툴들의 기능은 본인의 사용 미숙으로 정확하지 않을 수도 있습니다)

1. balsamiq mockups( click go to site )

발사믹목업의 경우 2가지(sketch, wireframe) 스킨의 ui component를 제공해준다.

ui component의 종류는 차트, 표, 탭, 브라우저, 버튼, 키보드, 날짜 셀럭터, 비디오 오디오 플레이어등 기대하는 것 이상의 수 많은 종류를 기본으로 지원하며

필요한 경우 사용자가 이미지를 업로드하여 사용가능하다.

각 ui component는 다양한 옵션으로 컨트롤 가능하며 작업한 프로토타입은  full screen으로  확인이 가능하며

PNG, xml 파일로 export 가능하다.

단  google drive 연동하여 이용하기 위해서는 월$5, 년$50의 비용을 지불해야한다.

아쉬운점은 실제 fluidui와 같이 웹이나 에뮬레이터 형식으로 on,off 라인에서 확인이 불가능하다는 점이다.

( 꽤 잘 구성된 툴이라 당연히 있을 것 같았는데 본인은 사용하면서 찾지 못했다. )

프로토타이핑툴의 경우 협업하는 동료나 클라이언트에게 보여줄 경우가 많은데 이미지가 아닌 실제 작동을 보여주지 못한다는 점이 많이 아쉽다.

2. fluidui( click go to site ) 추천!

현재까지 사용해본 프로토타이핑 툴중에 가장 좋다고 생각된다.

다른 툴과 마찬가지로 왠만한 ui component를 제공하며 특징은

1. wireframe
2. ios(iphone, ipad, ios7)
3. android(android, android4.0, android-tablet)
4. window mobile(win8)
5. user upload

5가지 스킨을 제공한다는 점이다.

프로젝트의 성격에 맞게 해당 os및 device를 선택하여 좀더 섬세한 프로토타입 작성이 가능하다.

또한 작업한 프로토타입 페이지들은 페이지 단위로 서로 연결되어 시각적으로 전체적인 프로젝트의 흐름을 한눈에 알아볼 수 있으며

실제로 링크를 걸수 있어 web상에서 device내부에 화면을 띄워서 구동을 해볼 수 있다는 점이다.

해당 url을 공유하거나 메일로 보내는 기능이 있어 모바일 device에서도 확인해 볼 수 있다는건 fludui의 가장큰 장점이다.

3. codiqa( click go to site )

제이쿼리 모바일 앱제작시 매우 빠른 속도로 프로토타입 작성이 가능하다.

제공하는 ui component들이 제이쿼리 모바일의 default gui를 제공하기 때문에

상황에 따라 적절히 사용해야한다.

툴 자체의 완성도는 상당히 좋은거 같으나 플랫폼 제약이 있으며, 사용해볼랬더니

유료 안내페이지가 자꾸떠서..패스.. 유료 결제시 구글 드라이브와 연동하여 사용이가능하다.

월$7, 년$70

4. mockflow( click go to site )

학부시절에 종종 사용했었던 툴이다.

wireframe스타일의 스킨만을 제공해주며, 아래 이미지처럼 매우 심플하다.

신기한 기능은 팀 채팅이 가능하다는점인데 사용해보진 않아서 이에 대해선 언급하지 않겠다.

PDF, PNG, Ms Word(text), Excel(sitemap), PPT, HTML5 타입으로 export 가능하다.

그리고 오늘 처음 사용해본

Sk Planet의 TouchFack( click go to site )

앞의 4가지 툴들은 chrome extension으로 사용했었지만 (codiqa의 경우 pc용 소프트웨어를 제공했던 걸로 알고있다)

TouchFake의 경우 PC용 소프트웨어를 제공하여 오프라인에서 사용이가능하며,

iPhone, Android의 사용은 3월부터 제공된다.

설치후 실행해 보면 아래와 같은 화면을 확인할 수 있다.

new project를 생성시 size를 정할 수 있고 preset으로 save할 수 있다.

에뮬레이터를 사용하여 오프라인에서 확인해 볼 수도 있다.

html 메뉴를 클릭시 html업로드 팝업이 나오며

name과 password를 입력하면 url을 제공해주며 해당 url 접근시

password 입력요구하며 확인 버튼 클릭시 웹상에서 확인이 가능하다.

기획자나 디자이너들이 이를 활용하면 협업시 신속하고 원활한 커뮤니케이션이 가능하고

이로 인해 향상된 사용자 경험을 제공해 줄 수 있지 않을까싶다.

하지만 이러한 효과를 얻기위해서는 좋은 툴을 선택하는 것도 중요하며,

해당 툴을 충분히 숙지하는 것 또한 중요하다는 점을 말하고싶다.

개인적으로는 fluidui를 추천한다.

* TouchFack를 제외한 4가지 툴은  모두 chrome 브라우저에 설치하여 사용할 수 있다.

 

출처: http://superjang.com/?p=1964