Balsamiq Mock Up

Mock up이란?

목적한 무엇을 만들기 전에 시험삼아 제작하는 시제품, 모형 정도로 인식된다.

누군가에겐 너무 기초적인 영단어라 저렇게 정리하는 것조차 웃기는 일이겠지만, 사실 영어에 약한 본인으로선 타 개발자들이 내뱉는 처음듣는 영어단어는 마치 전문용어 못지않은 장벽이 느껴진다. ㅡ,.ㅡ;;

아무튼 본론으로 넘어가서...

게임 디자인에 있어서 빼놓을 수없는 GUI!

상당수의 기획자들이 이 GUI를 디자인할 때 애용하는 툴은 아마도 MS오피스군 내의 파워포인트, 비지오 정도가 아닐까 싶다.

본인도 바로 엊그제까지만해도 파워포인트를 애용해왔으며, 크게 불편함을 느끼지 않았다.

하지만, 지난주에 회사동료 개발자로부터 한가지 툴을 소개받았으니...

그게 바로 지금 소개할 Balsamiq Mockups 이다.

기존 방식에 딱히 불편함을 느끼지 못한 분들이 "기존 방식을 버려도 좋을만큼 괜찮은거냐?" 라고 한번에 정곡을 콕 찝어 물어본다면 주저없이 "그렇다!"라고 대답할 수있다.

이유는 간단하다.

이 툴은 UI 디자인에 최적화되어있다. (게임, 웹등의 UI 및 스토리보드 디자인)

오피스군의 파워포인트나 비지오는 그 기능의 방대함에선 절대 우위에 있으나, UI 제작에 최적화되어있는 툴은 아니다.

본인은 특정 UI를 디자인하기 위해 매번 버튼이나 리스트, 기타 여러 UI 컴포넌트들을 새로 제작해왔다.

서로 다른 UI의 경우 각각 필요한 컴포넌트들이 다를 수 있어 새로 제작해야만 할 수도 있으나, 사실 거의 비슷한 역할의 UI라도 미세한 차이가 발생하면 뭔가 내 의도가 다른 개발자들에게 제대로 전달되지 않을 것 같은 강박관념 같은 것이 작용한 결과일 것이다.

또한, 보는 입장에서 최대한 그럴싸하게 보이도록 하기 위해 본인의 전문 분야가 아님에도 불구하고 꾸미기 작업에 힘을 쏟는다.

이 과정을 거치는 도중에 사실상 상당히 불필요한 작업들에 할당되는 작업 시간이 제법 크게 잡히게 된다.

이 툴은 바로 위와 같은 불필요한 작업의 반복을 최소화하고, 적당히 이쁘고 빠르고 정확하게 자신의 의도를 전달할 수 있는 결과물을 산출해내기 위한 도구라고 할 수 있다.

대략 툴의 모습은 이와 같다. 뭔가 있어보이는가?

그렇다면 잘못본 것이다. 사실 툴 자체는 별거 없다. ㅡ,.ㅡ;

윈도의 기본적인 편집기능(복사, 자르기, 붙이기 등등)과 대부분의 UI에서 사용되는 컴포넌트들의 나열.

사용자는 제공되는 이 기능들만을 사용해서 자신이 원하는 어떠한 형태의 UI라도 디자인할 수 있다.

[사용 방법]

1. 맘에드는 컴포넌트를 Drag & Drop

2. 사이즈 조정 및 정렬

3. 컴포넌트 속성 편집

4. 1~3 반복

대부분의 인터페이스가 오피스군과 비슷하며, 한번보면 이게 뭐구나라는 것을 알기쉽게 직관적으로 보여주고 있으므로 걱정말고 그냥 써보면 된다.

그럼 한번 시험해보자.

본인이 최근 두달여간 열심히 플레이하고 있는 '마비노기 영웅전'의 거래소 UI이다.

요 화면을 Balsamiq Mockups로 옮겨보면 아래와 같다.

어떤가? 그럴싸한가?

위 UI 목업을 제작하는데 정확하게 20분 정도 소요되었다.

물론 이미 존재하는 UI를 그대로 옮겨놓았기 때문에 측정된 시간은 큰 의미가 없을 수도 있다.

하지만, 이것은 본인이 이 툴을 처음 사용하여 제작한 첫 결과물이라는 점. 툴이 아직 익숙치않아 제작 시간 중 상당 시간을 본인이 원하는 컴포넌트를 찾는 것에 허비했다는 것을 감안한다면 숙련된 이후의 기대효과는 더욱 커질 것으로 생각된다.

정리하면, 이 툴의 최대 장점은 이렇다.

UI 디자인에 있어 불필요한 실 제작 작업 시간을 최소화하여 정작 필요한 고민의 시간을 벌어준다.

Balsamiq Mockups를 받으려면 아래의 공식 사이트를 찾아가보자.

공식 사이트 : http://www.balsamiq.com

이 툴은 Adobe Air 기반으로 가동되므로, 사전에 Adobe Air를 설치해 두어야 한다.

[확장성]

Balsamiq은 XML 포맷으로 Export를 하여 Jira나 Wiki로 옮겨 등록할 수 있다.

본인이 몸담고 있는 회사에서도 최근 Jira를 사용하여 프로젝트 관리를 하게되어 다른 개발자들과의 공유가 손쉽게 이루어질 듯 하다.

[활용 Tip]

Adobe Air 기반의 어플리케이션은 대부분 한글 폰트를 지원하지 않는다.

하지만 이 툴의 경우 자신이 원하는 폰트를 사용할 수 있는 기능을 지원한다.

간단히 현재 윈도에서 사용하는 시스템 폰트를 사용하도록 해보자.

'메뉴의 View > Use System Fonts' 를 클릭하여 체크상태 유지

만약 시스템 폰트 이외에 원하는 폰트를 사용하고자 한다면 BalsamiqMockups.cfg 파일을 아래와 같이 수정하자.

<?xml version="1.0" encoding="UTF-8"?>
<config>
      <fontFace>Malgun Gothic</fontFace>
      <rememberWindowSize>false</rememberWindowSize>
      <useCookies>false</useCookies>
</config>

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

[라이센스]

Balsamiq Mockups는 기본적으로 7일간의 데모 기간을 제공한다.

7일 이후에도 계속 사용할 수는 있지만(잘 모르겠으나 아마 그런듯...) 몇몇 기능의 제약이 있다.

정식 라이센스를 받으려면 위 공식 사이트로 가서 $79의 가격을 지불해야 한다.

하지만, 아래의 경우 프리 라이센스를 받을 수 있다고 한다.

GET MOCKUPS FOR DESKTOP FOR FREE

You can download Mockups for Desktop for free. The application is fully functional for 7 days, but you'll need a key in order to save your work after the evaluation period is over. You can also try the Mockups editor on the web here.

We love donating our software to good people, we think it's a whole lot of WIN!

To apply for a free license key, you can do one of the following:

• If your company bought Mockups for Confluence, JIRA, FogBugz or XWiki, ask your IT admin for your company's license information and use it FREE of charge.
• If you are a do-gooder of any sort (non-profit, charity, open-source contributor, you get the idea), email us with a short blurb and we'll send you a license, FREE of charge.
• If you are willing to demo Mockups to an audience of at least 15 professionals (at a team meeting, user group, a conference, a BarCamp),email us your info and we'll give you two licenses, one for you to keep and one to give away at the event, FREE of charge.
• If you teach a high-school class, email us the name of your school and your class, plus the number of students in your class. We will send you a license for all of them.
• If you are a usability professional, you might be interested in our Free Mockups for UX Training program.
• A note to university students and professors: we currently do not offer free licenses to universities, but we'll be happy to offer you an additional 50% off any orders of 10 or more licenses. Let us know if you're interested and we'll set up a discount code for you.

If you don't fit in any of the five buckets above, you can use the demo on this site or the Desktop trial and use "Export..." to save your work manually. Or you can just buy a single-user license of Mockups for Desktop for $79 below.

IMPORTANT: due to the large volume of requests we have been receiving lately, we cannot promise we'll answer every email. We try our best, but please be understanding if you don't hear back from us.