introducing Balsamiq Mockups

웹 프로그램을 만들 때 화면을 어떻게 만들지 미리 그려본 다음에 제대로 디자인을 하게 되죠.
이렇게 화면디자인을 그려 볼 때 직접 종이에 그릴 수도 있고 파워포인트 같은 프리젠테이션 툴을 이용할 수도 있는데요, 보다 편하게 스케치를 할 수 있는 프로그램이 있어서 소개합니다.

프로그램의 이름은 Balsamiq Mockups 입니다.
Balsamiq Mockups 사이트 : http://www.balsamiq.com/products/mockups
여기 가시면 이걸로 그리는 동영상을 바로 보실 수 있습니다.

어떻게 그리는지 간단히 살펴보면

가져다 쓸 수 있는 컨트롤들이 위쪽이 죽 나열되어 있습니다. 그 중에서 웹 브라우저를 한번 땡겨오겠습니다.
(그림을 클릭한 다음 이동한 페이지에서 다시 그림을 클릭하면 원래크기로 보실 수 있습니다.)

메인창에 끌어놓고 마우스를 떼면, 웹 브라우저의 제목이랑 검색창에 들어갈 글자들을 입력할 수 있도록 텍스트 입력칸이 바로 나타납니다. ( 이미 가져와서 쓰고 있는 컨트롤의 경우는 더블클릭하면 동일하게 텍스트 입력칸이 표시됩니다.)

입력을 마치고 다른 곳을 클릭하면, 방금 입력한 텍스트가 반영된 웹브라우저가 완성됩니다.

컨트롤을 끌어다 놓고, 필요하면 내부 형식 및 텍스트를 수정하면 끝입니다. 간단하죠.

이와 같이 해서 금방 만들어 본 '데스 노트 관리 시스템' 의 화면입니다.

왼쪽에는 데스노트들의 등급별 목록 트리가 있고, 오른쪽엔 트리에서 선택하거나 검색을 통해 지정한 하나의 데스노트에 대한 일반정보랑, 해당 노트에 이름이 적혀 죽은 사람들의 정보를 보여 주고 있네요.

야가미 라이토의 손에 들어 있는 데스노트 대한 정보를 보고 계십니다.^^;

Balsamiq Mockups는 Flash 로 만들어졌습니다. Adobe Air를 통해 독립된 클라이언트 프로그램으로 동작합니다.
아주 오래 쓰다 보면 가끔 프로그램이 그냥 종료되거나 저장이 안되거나 하는 현상도 보이는데, 그런 경우를 제외하면 일반적으로 사용시 안정적이라고 할 수 있습니다.

손으로 그리는 것보다 월등한 장점이라면 한 번 그린 걸 여기저기서 가져다 쓸 수 있고, 계속 고치기가 쉽다는 점이죠.
파워포인트 같은 툴보다는 당연히 그리기 훨씬 편하고요.

대신 단점이라면 미리 정해놓은 컨트롤 이외의 창조적인 뭔가를 하긴 힘들다는 점이 있는데, 사용자들이 만들어 놓은 컨트롤들을 가져다 쓸 수 있는 다음의 사이트가 있어서 약간 도움이 됩니다.
http://www.mockupstogo.net/

사이트에서 평가판을 다운받을 수 있습니다. 평가판은 *.bmml 파일로 저장이 안 되는데, export 기능을 사용하면 좀 불편해서 그렇지 내용상으로는 저장하고 불러오는 것과 동일한 기능을 수행할 수 있습니다. (한번에 저장하는 대신, export를 통해 clipboard에 복사된 것을 텍스트에디터에 붙여넣어서 저장하는 식으로 사용 가능. 불러올 때도 마찬가지)

평소에 이런 프로토타입 작업을 많이 하신다면 한번 테스트해 보세요.
한글도 정상적으로 쓸 수 있습니다. 메뉴에서 'use system fonts'항목을 켜 주시면 되는데, 이 때는 영어도 Balsamiq 자체 폰트가 아니라 시스템 폰트를 사용하게 되어서 좀 글자가 덜 이뻐지긴 합니다. 원래는 코믹북 느낌의 귀여운 글자체거든요.