Balsamiq Mockups

Balsamiq Mockups는..
UI 개발전에 동작과 화면구성을 미리 만들어 보는 툴입니다.

예전에도 한번 포스팅한 적이 있었는데요.. http://kimstar.pe.kr/blog/91
이번 포스팅은 제가 근무하는 회사에서 라이센스를 구매하게 되어 사내 교육용으로 발표한 자료입니다.
현재 저희 회사에서는 Wiki / JIRA / PC용 Balsamiq Mockups를 사용중이며, UI 요구사항은 왠만하면 글 대신 Mockup으로 받기로 했답니다.

사용자 삽입 이미지

사용자 삽입 이미지에반게리온 00 영호기 입니다. 초호기(1호기)는 신지가 타고 다니는 놈이구요.. 즉, 1호기가 나오기 이전의 시제품입니다.

좀 유명한 동영상이죠.. 다음 한메일의 UI를 구현한 “페이퍼 프로토타입”입니다.

사용자 삽입 이미지네 처음은 미약하였으나 나중은 심히 창대하리라.
처음은 종이로 시작하였으나 멋진 UI가 탄생하였습니다.

사용자 삽입 이미지프로토타입은 미리 만들어 보는거구요..
완제품처럼 거창하고 멋지게 만들 필요가 없으므로 Low-tech Tool 로 빠르게 의사진행을 하는게 좋습니다.

사용자 삽입 이미지에네르가Z 입니다. 마징가Z의 원형으로 보시면 됩니다. (쇠돌이 아부지가 오토바이타고 조종하십니다.. 헐~)
또한 제품의 상태를 보시면 아직 제작중인 피규어임을 보실 수 있을겁니다.. 완제품 이전에 만들어본 목업입니다.

사용자 삽입 이미지

사용자 삽입 이미지MG 아스트레이 블루프레임의 원형과 시제품.
아~ 레드프레임 구매해 놓고 못만들고 있는데.. 블루프레임도 사고 싶네요..

사용자 삽입 이미지플레이스테이션 3의 원형과 시제품입니다.
처음에 부매랑 컨트롤러로 욕을 바가지로 먹고, 원래 PS2와 같은 형태의 컨트롤러로 회귀했습니다. (특허 문제로 듀얼쇼크라는 이름을 버리고 진동이 빠져버려서 역시 욕을 많이 먹었지만..)

사용자 삽입 이미지목업은 시제품이에요.. 검토용이구요..
실제 제품은 틀릴 수가 있습니다. (롯데리아 햄버거 사진을 생각하시면.. 음.. 비유가 좋지는 않군요..)

사용자 삽입 이미지아이언맨 마크1 입니다.
아이언맨도 처음에는 이렇게 시작했죠..

사용자 삽입 이미지
두둥~
드디어 대망의 Balsamiq Mockups 입니다.
전체적인 모습과 산출물은 대략 위와 같이 생겼구요..

사용자 삽입 이미지공식사이트는 http://www.malsamiq.com 입니다.

사용자 삽입 이미지PC에 설치하시려면 저기 화살표 보이는곳들을 순서대로 클릭하시면 됩니다.
Flash Air(Adobe Integrared Runtime) 로 개발되어 있어서 웹과 PC에서 같은 환경을 제공합니다.

사용자 삽입 이미지실습.. 은 생략

사용자 삽입 이미지아이언맨 마크2
마크1보다 훨씬 보기 좋아졌군요.

사용자 삽입 이미지앞서 설명드린데로.. 저희회사에서 사용하고 있는 환경입니다.
PC뿐만이 아니라 JIRA와 WIKI에 Plugin으로 사용가능합니다.

사용자 삽입 이미지또.. 실습.. 은 생략..

사용자 삽입 이미지아이언맨 마크3
근데.. 이번달에 개봉하는놈은 마크4인가효?

사용자 삽입 이미지기본 글꼴이  손글씨와 비슷한 MS Comic Sans이지만 기본적으로 한글지원이 안됩니다.
PC의 기본글꼴로 사용하고 싶으시면 메뉴에서 “View > Use System Font”를 체크하시면 되구요.
자신이 원하는 글꼴로 바꾸시려면 BalsamiqMockups.cfg 파일을 위와 같이 바꾸시면 됩니다.
경로는 아래와 같습니다.

Windows XP : C:\Documents and Settings\<username>\Application Data\BalsamiqMockupsForDesktop.#numbers#\Local Store
Windows Vista : C:\Users\<yourusername>\AppData\Roaming\BalsamiqMockupsForDesktop.#numbers#\Local Store

사용자 삽입 이미지블로거들은 라이센스를 공짜로 준데요..
근데.. 메일을 저기로 보내야 되요.. 저는 계속 다른곳에 보냈더니 안주더군요..
결국 회사에서 사주긴 했지만..

사용자 삽입 이미지PC에서 작업한 내용을 웹(JIRA or WIKI)로 옮기는 화면입니다.
PC에서 XML로 Export 하구요..

사용자 삽입 이미지WEB에서 XML로 Import 하시면 됩니다.
참 쉽죠?

사용자 삽입 이미지자세한 설명은 생략합니다. Online 도움말을 참고하세요.
http://www.balsamiq.com/products/mockups/help

사용자 삽입 이미지‘목업투고’는  목업을 공유하는 곳입니다.
만들기 귀찮으면 비슷한거 찾아서 고치는게 빠를듯합니다.
http://mockupstogo.net/

 

사용자 삽입 이미지끝.. 찬조출연해주신 아이언맨 마크1~3

CC BY-NC-ND 2.0 KR

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용할 수 있습니다. 크리에이티브 커먼즈 라이선스

저작권과 관련된 파일요청 및 작업요청을 받지 않습니다.

2 댓글

  1. 규석 응답

    요새 웹기획 하면서 맨날 불편한 파워포인트로 스토리보드 작성하는게 너무 비합리적인것 같아 저런 프로토타입 형태로 구현된 스토리보드 작성툴이 있었으면 좋을듯…

댓글 남기기