Balsamiq. UI 디자인을 간단하게

UI디자인을 위해 어떤 방법을 사용하시나요.
연습장에 열심히 그리다 보면 나중엔 지저분해져서 알 수도 없고 레이아웃 좀 바꾸려면 처음부터 다시 그려야 하고, 그래서 포토샵같은 그래픽 프로그램을 써보면 깔끔하고 수정은 편리하지만 처음부터 제공되는 것들이 없으니 하나하나 손으로 그려줘야 하는 불편함이 있죠.

아래에 보이는 사진만큼 깔끔한 디자인을 간단하게 구현할 수 있다면 얼마나 좋을까요
(물론 아래 이미지는 실제로 제작된 것이지요)

아니면 이렇게 해본다면요?
유명한 Gmail 동영상이죠. 이렇게 한다면 레이아웃 하나 그리는데 하루 종일 걸리겠군요.


혹은 이런 도구와 전용 종이를 사용할 수도 있지요.
(이미지는 펀샵에서 퍼왔습니다. 관심 있으신 분들은 http://www.funshop.co.kr 로 방문해보세요)

저도 UI프로그램이 필요해서 찾던 중 우연히 발견한 이것

Balsamiq Mockups 입니다.

간단하게 UI를 그릴 수 있는 프로그램 입니다. 플래시 기반으로 구현되어서 웹이나 데스크탑에서 모두 실행 가능하고 자체 저장기능에(데스크탑의 경우) xml로 export도 가능하고 이미지로 출력 할 수도 있지요.

아주 기본적인 내용부터 웹, 차트, 테이블이라던지, 심지어 아이폰 키보드까지 그릴 수 있습니다.

우선 이 프로그램으로 그린 몇 가지 예제를 보시죠.
- 아이튠즈를 그렸네요.

- 이것은 아이폰 어플 UI입니다.

다들 깔끔하고 이쁘죠.

이 프로그램에선 아래와 같은 컨트롤들을 지원한다고 합니다.
펜으로 슥슥 그린듯한 컨트롤들이 아주 느낌이 좋아요.

이렇게 봐서는 몇 종류 없는것 같은데 실제 사용해 보시면 컨트롤마다 각종 옵션이 제공되고, 자신만의 이미지나 아이콘 등도 넣을 수 있어서 훨씬 다양한 표현이 가능하답니다.


가격은 라이센스당 $79고 볼륨 라이센스등도 제공하는군요. 그리고 잘 읽어보시면 '무료'로 받으실 수 있는 방법도 있답니다 ^^
하지만 그냥 써보고 싶으신 분들은 Try it now만 누르시면 설치라던지 필요 없이 즉시 써 보실 수 있어요.
데스크탑용 데모도 무료로 제공되고요.

웹이나 데모버젼은 저장이 안되지만 xml로 export는 가능하기 때문에 전문적인 작업을 하실것이 아니라면 좀 불편하지만 xml을 노트패드로 저장해 두시면 나중에 import해서 다시 볼 수 있어요. 그려 놓으신 내용만 필요하다면 이미지로 저장도 가능하고요.

더 자세한 내용은 아래 주소에서 확인이 가능하답니다.
http://www.balsamiq.com

지금 당장 연필을 내려 놓으시고 방문해보세요~