UI 기획을 위한 간단한 목업툴. Balsamiq Mockup

기획이라는게 다양한 형태의 문서를 접하거나 작성해야하는게 주요한 업무다보니

파워포인트, 엑셀, 워드, 한글과 같은 다양한 형태의 문서 작성 툴이나 스케치, XD, 피그마와 같은 프토토타입 툴

포토샵과 같은 이미지 편집 툴을 다루거나 접하게 되는 기회가 많습니다.

기획 업무를 시작한 초창기에는 주로 파워포인트를 이용한 화면설계를 주로 진행했다면

어느정도 연차가 되면서 부터는 워드 같은 툴로 사업기획을 주로 담당하게 되었습니다.

물론 그동안 다녔던 회사들이나 참여했던 프로젝트에서 기획자가 둘 이상이 아니었기 때문에 화면설계도 제 몫이였구요

요즘은 맥북을 사용하는 덕분에 스케치를 이용해서 화면설계 및 프로토타입 작업을 병행하고 있습니다.

회사에서 지원을 해줘서 사용하는게 아니라서 디자이너 분은 피그마를 사용하고 계시구요 (다행이 피그마에서 스케치 파일을 불러올 수 있어서.. ^^)

스케치를 사용하기 전에는 윈도우 노트북에서 파워포인트+파워목업 조합으로 화면설계 업무를 주로 했습니다

그리고 그 전에는 오늘 이야기하려는 목업 툴인 Balsamiq mockup을 잠깐 사용했었습니다.

오늘 소개하려는 Balsamiq Mockup은 2010년 즈음 발표된 목업 툴입니다.

화면설계에 필요한 요소들을 드래그&드랍으로 화면에 배치하고 가볍게 구성을 확인해볼 수 있는 형태의 설치형 유료 앱입니다.

화면설계 작업의 대부분을 최근에는 스케치를 활용해서 진행하고 있습니다만,

단순 구상 단계에서는 스케치를 이용해서 작업하는 대신 balsamiq mokcup을 이용해 머리속에서 그려진 그림을 구체화하는데 사용하고 있습니다.

물론 balsamiq에서 작업 후 스케치에서 다시 작업을 해야하는 중복 작업이 비효율적일수도 있지만

구체화되지 않은 구상으로 파워포인트 또는 스케치로 작업을하면서 몇번이고 수정한 기억때문에 가급적이면. 두번 작업을 하고 있습니다.

그리고 전체적인 작업시간을 따져보면 그렇게 많은 차이가 있지도 않구요.

(구체화된 내용을 파워포인트나 스케치로 큰 고민없이 이식만하면 되더라구요)

웹이나 모바일 UI설계에 필요한 요소들이 그룹화되어있어서

쉽게 wireframe을 그릴 수 있습니다. 또한 아이콘 역시 간단하게 추가할 수 있는 형태로 제공되고 있어서

화면의 요소들을 그리거나 찾기위한 시간도 많이 단축할 수 있습니다.

다만, 디스크립션에 대한 기능은 부족한 편이라 복잡한 화면이라면 기획자의 리뷰없이 화면만으로 기획의도를 전달하기는 쉽지 않습니다만,

간단한 화면만이라면 쉽게 기획자의 의도를 전달할 수 있습니다.

불필요한 문서작업을 지양할수도 있고, 화면에서 표현하고자 하는 바를 쉽게 이해시킬수 있기때문에

여러모로 기획과 협의등을 위한 시간을 많이 단축시킬 수 있습니다.

물론 종이나 패드를 이용해 손으로 그려보는 방법도 있지만,

지독한 악필에다 그림을 그리기위한 손재주도 항시 부재중이라 그림을 그려서는 머리속에 있는 그림을 구체화하기 쉽지 않아서

아직까지 balsamiq mockup을 버리지 못하고 사용하고 있습니다.

PDF, PNG등 목업화면을 파일로 저장할 수 있어서 기획한 바를 디자이너나 개발자들과 가볍게 공유하기도 편하구요

제가 앱을 구매할때는 설치형 라이선스만 있어서 계속 사용하고 있는데 (현재 시점에 가격이 1user = $89 입니다. 저는 이것보다 싸게 구매했던거 같은데...)

요즘은 구독형 라이선스도 있으니, 사용 용도에 맞게 알맞은 라이선스를 사용하면 될 것 같습니다.

Balsamiq Mockup에 대한 자세한 내용은 홈페이지에서 한번 확인해보세요.. ^^

Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq

Balsamiq is the company behind Balsamiq Wireframes, the industry standard low-fidelity wireframing tool.

balsamiq.com

댓글