'Prototyping'에 해당되는 글 1건

  1. 2009.02.01 Balsamiq : fast UI prototyping 1

Balsamiq : fast UI prototyping

IT 2009. 2. 1. 00:39

붓으로 글을 써내려가는데 있어서야 혼신의 힘을 다해 일필휘지로 내리그은 다음 덧대지 않는 것이 가장 바람직한 일이겠지만 코드를 작성하는 데 있어서만큼은 그러한 경우를 맞이하기란 거의 불가능에 가깝다. 특히나 다양한 사용자의 요구를 반영해야 하는 UI를 작성할 때는 한번에 완성된 작품을 만들어내기보다는 빠른 시간 안에 프로토타입을 만들고 이를 지속적으로 변경하는 것이 훨씬 유용하다.

종이에다가 슥슥 그려내는 가장 원초적인 방법에서부터 비지오나 파워포인트같은 툴을 이용한 간단한 드로잉, 그리고 기능하지 않는 더미 코드들을 이용하여 실제로 UI를 구현하는 방법까지 프로토타입을 만드는 방법을 꼽자면 그 수만 해도 손가락의 갯수를 족히 넘겠다. 개인적으로는 지금 만들고 있던 툴을 시작할 때 생각없이 코드로 UI를 구현하고 기능을 덧붙이는 방법을 택했었는데 변경사항이 늘어나면서 죽을 고생을 한두번 했던 경험이 있다. 코드를 작성하지 않는 사용자의 경우 요구사항이 구체적이지도 않거니와 UI요소와 기능 사이를 넘나드는 변경사항을 요구하는 경우가 굉장히 잦은데, 처음에 더미 코드를 이용해 UI를 먼저 만들고 기능을 추가하다가 변경사항때문에 UI요소를 다 뜯어내고 기능을 붙여야 하는 상황이 생기기 때문이다.

정확한 예는 아니지만 다음과 같은 상황을 생각해보면 되겠다. 프로그램 동작을 모니터링하는 로그 패널이 필요하다는 요구사항을 받고 단순히 텍스트 컨트롤이면 문제 없으리라고 생각하고 텍스트컨트롤을 이용해 UI요소에 대한 확정을 받고 기능을 구현하다가 사용자에게서 다음과 같은 요청을 받게 된다. [그런데 저 로그 패널은 맘대로 뜯었다 붙였다 할 수 있고 숨기기 기능이 있으면 좋을 것 같은데 말입니다] ...끄르르르륵.

이런 이유로 더미 어플리케이션을 이용한 UI 프로토타입을 집어치우고 Balsamiq을 이용하기 시작했다. Balsamiq은 앞서 이야기한 프로토타이핑의 방법 가운데 종이와 툴 사이 정도에 위치한 툴인데, 종이 프로토타이핑에 흔히 쓰이는 요소들을 추려내어 PC 기반의 툴로 다시 만들어 내었다. 종이에 그려대는 프로토타입이 빠른 작성에는 용이하지만 저장하고 공유하기에는 불편하고 비지오 같은 드로잉툴은 저장과 공유에는 비교적 편리하지만 범용의 툴이라 UI요소만을 작성하기에는 아무래도 복잡하다는 단점을 해결할 수 있는 도구가 될 수 있겠다.

실제 사용 장면. 종이 공책을 옮겨온 듯한 Look&Feel이 인상적이다.

종이에 손으로 그려낸 것 같은 느낌을 주는 Look&Feel은 사용자에 따라 호불호가 갈릴 만한 부분이지만, 종이를 이용한 프로토타입을 그대로 옮겼다고 생각하면 괜찮을 듯 싶다. 꼭 필요한 부분만을 추려내었기 때문에 사용이 직관적이며 광고하는 대로 굉장히 빠른 작성이 가능하다는 것은 대단히 훌륭하다. 실제로도 코드로 일일이 작성했다면 한참이 걸렸을 부분을 15분 정도만에 세 개 정도의 프로토타입을 만들고 결정할 수가 있었다.

팀원이나 사용자의 요구에 의해 지속적으로 UI를 변경해야 하는 상황이라면 충분히 고려해 볼 만한 어플리케이션이다. AIR 기반의 어플리케이션인데 AIR의 문제인지 어플리케이션의 문제인지 약간 불안정한 면이 있고 앞으로 UI요소가 지속적으로 증가할 경우 현재 버전이 가진 직관성을 해칠 수도 있다는 우려가 없지 않지만 현재로서는 사용해볼 만한 어플리케이션.

B모 플레이어를 보고 따라 그려본 프로토타입. 완성하는데 15분이 채 걸리지 않았다.

p.s : 이른바 일종의 1인 기업으로 실제 제작자는 한 명이며 제작 이외의 관리를 담당하는 Mariah는 자신의 아내라고.
p.s 2 : 텍스트박스를 열고 영어 더미 텍스트인 Lorem Ipsum을 입력해보라.

: