> IT, 창의/효율/경쟁력, Mac, Project Management, Smart Work > App, WEB, iPhone 화면 스케치 – Balsamiq Mockups

App, WEB, iPhone 화면 스케치 – Balsamiq Mockups

가끔 프로젝트 기획시 UI를 그릴 필요가 있었는데, 보통은 Excel, OmniGraffle 등에서 미리 그린 후 Presentation tool에서 import를 하는 형태로 진행했었다. 하지만 이럴 경우 한장 한장 그리는데 시간이 많이걸려서 적잖은 부담이 되었었는데, Balsamiq Mockups라는 프로그램을 사용해 체감상 50% 정도는 빠르게 내부 기획/PT를 마칠 수 있었다. Conceptual Layout을 그리기에는 이만한 대체품이 없는 듯…

좋은 점은 Adobe AIR 형태로 Mac이든 Windows에서든 잘 실행된다는 점이고, 한글도 문제 없이 사용가능하였다.
개인용 Desktop 버전이 있고, WIKI Plugin 버전이 따로 있는데 이 경우에는 자동으로 WIKI에서 rendering을 해준다.
(데이터 포맷이 XML기반이다.)

각종 레이아웃을 미리 정의된 control을 Drag&Drop 한 후 데이터를 텍스트로 입력하면 자동으로 그려주는 방식이다.
예로 아래처럼 Grid/Table 형태를 끌어다 놓고, 텍스트 박스 처럼 입력을 하면 자동으로 테이블이 만들어 진다.

Balsamiq MockupsScreenSnapz001.png

Grid/Table 속성 값으로는 우측에서와 같이 속성을 지정할 수 있어서, 다양한 효과가 가능하다.

  Balsamiq MockupsScreenSnapz002.png  

아래는 이러한 방식으로 Balsamiq Mockups 제품 소개에 있는 예제들이다. 아래 내용을 각 5분 이내에 그대로 재현 가능하다.
200903211021.jpg 200903211021.jpg 200903211021.jpg

200903211021.jpg 200903211021.jpg 200903211021.jpg

200903211022.jpg  

혹시 기획/개발 관련해서 Presentation Layer를 미리 그려야 하는 경우라면 본 Balamiq Mockups를 써보시길 바란다..

백문이불여일견이라고 위 홈페이지에 있는 동영상 소개자료를 꼭 보세요.^^

  1. BG
    3월 23, 2009, 11:24 am | #1

    오~괜찮은데요.
    지금까지는 이런 작업을 visio로 했는데, visio와는 또 다른 매력이 있네요. TRAC이나 redmine에서 사용되는 wiki와도 붙일 수 있다면 더욱 좋겠는데요.(아님, TRAC이나 redmine에 사용되는 wiki를 xwiki로 바꿀 수 있을려나…) 거기다, xml로 export가 되니까 visio 추가 기능을 만들어서 visio에서 열어볼 수도 있을 거 같은데요.
    그나저나, 이런 정보는 어디서 구하세요? 항상 도움되는 좋은 정보 감사드립니다.

    • 3월 23, 2009, 1:05 pm | #2

      WIKI와 붙는 것도 또 다른 매력인 것 같습니다. 저흰 Confluence를 쓰는데 이것과는 잘 붙네요..

  2. BG
    3월 23, 2009, 5:01 pm | #3

    거기다 ‘Desktop’ 버전은 다양한 방법을 통해서 무료로 이용할 수 있군요.

  3. 3월 24, 2009, 2:46 am | #4

    저도 다양한 방법을 통해서 무료로 얻었답니다. ^^
    이태리 개발자이구요.. 아내가 Blog License를 주더라구요.
    이상적인 Venture 같은 느낌이 들었음..

  4. Christopher
    3월 29, 2009, 2:50 am | #5

    우연히 흘러들어왔다가 잘 보고 갑니다. 멋진 소프트웨어네요. 감사합니다.

    • 3월 29, 2009, 8:34 pm | #6

      네. 기획 및 개발자에겐 완소SW인것 같습니다.^^

  5. yongbin
    4월 14, 2009, 3:10 pm | #7

    소개글 보고 잘 사용하고 있습니다~ 감사합니다
    그런데 리뷰내용중 한글이 문제없이 사용된다는 말씀이 있으신데 저와 몇몇분들이 Mac/Windows 에서 테스트를 해봤는데 한글입력이 안되는 문제가 있네요 혹시 어떤환경에서 입력하신건지 알수 있을까요?

    • 4월 14, 2009, 10:07 pm | #8

      메뉴 중 Edit > “Use System Fonts”를 선택하시면 한글 사용에 전혀 문제 없습니다. default로는 한글 사용이 안되요.
      Mockups 잘 활용하시길…

  6. trauma2u
    6월 11, 2009, 1:35 pm | #9

    한글 사용을 위해서 시스템 폰트를 사용하면 원래 분위기랑 좀 매치가 안되는 느낌? 너무 좋은데 그게 좀 아쉽네요. 말씀하시는 다양한 방법이 뭔지를 몰라서 좀 만져보고 실제 구입을 하던가 해야겠네요. 좋은 프로그램 소개시켜 주셔서 감사드립니다 ^^

    • 6월 11, 2009, 8:29 pm | #10

      다양한 방법은이란…………………………………………….. Blog License입니다. 블로그에 사용기 올리는 조건으로 License를 받는 거랍니다. ^^

  7. 3월 28, 2011, 9:52 am | #11

    지금껏 Axure RP를 사용하고 있었죠. 모바일 기획에는 좀 약한 모습을 보여서 아쉬웠는데 발사믹을 함 써봐야 겠네요. 좋은 정보 감사합니다.

  1. 4월 15, 2009, 4:47 pm | #1
  2. 1월 5, 2011, 10:31 pm | #2

댓글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

팔로우

모든 새 글을 수신함으로 전달 받으세요.

다른 49명의 팔로워와 함께 하세요