Mockup 경험기

1.
웹 개발과 관련한 글을 읽을 자주 등장했던 단어가 있었습니다. Mockup. 제가 관심을 가졌던 것을 설명할 때 나오는 단어가 아니라 그냥 지나쳤습니다. 그러다 페친중 어떤 분이 Mockup Application인 Balsamiq Mockup을 이용하여 손으로 만든 것과 비슷한 느낌을 주는 설계서를 올려놓은 적이 있었습니다. 너무 멋져서 다운받아서 설치했었죠. 그리고 몇 달이 지난 어제 비슷한 업무를 할 일이 있어서 Balsamiq Mockup을 실행하였죠. “정품 등록을 하라”고 해서 본격적인 Mockup 탐방을 시작하였습니다.

먼저 Mockup이 무엇인지 알아보았습니다. “실물크기의 모형,시제품” 입니다. Mock의 사전적 의미가 “흉내내다”라는 뜻이고 Mock up은 실물크기의 모형을 만들다는 뜻이라고 합니다. 자주 사용하는 Make up과 Makeup을 떠오르면 이해가 쉽습니다. 그러면 Mockup이 소프트웨어 개발에서 어떤 의미를 지닐까요? 역시 전규현씨가 자세히 정리주셨습니다.

Mock-up은 자동차나 비행기, 기계 등을 만들 때 실제 크기나 혹은 크기를 변화시켜서 기능은 동작하지 않지만 그 외형을 비슷하게 만들어서 교육용, 데모용, 디자인 테스트용 등으로 사용하기 위해서 만든 것입니다. 진짜로 만들려면 비용과 시간이 많이 들기 때문에 기능은 동작하지 않는 외형만 만드는 것입니다.

소프트웨어에서도 이와 비슷한 목적으로 Mock-up을 만듭니다. 소프트웨어 기능이나 UI를 구상하거나 의논할 때 쉽게 Mock-up을 만들 수 있으면 도움이 됩니다. 그런데, 고객이 Mock-up이 아니고 실제 동작하는 Software를 보여줘야만 자세한 요구사항을 알려준다면 엄청나게 비효율적인 것이죠. 요즘은 특히 Mock-up이 고객의 요구사항을 분석하기 위해서 많이 사용합니다.
UI Mock-up중에서

2000년 초반 웹 개발을 할 때 스토리보드를 파워포인트로 만들었던 것과 비슷합니다. 아니면 윈도우 클라이언트를 위하여 Visio로 디자인을 하던 것과 닮았습니다. Mockup Application은 Mockup을 전문적으로 도와주는 프로그램이라고 보면 되네요.

2.
이제 Mockup이 무엇인지 알았습니다. 어떤 프로그램이 좋은지 몇 가지를 찾아서 사용해보았습니다. 첫째는 처음 적었던 Balsamiq Mockup입니다. 문제는 상용이었습니다. 바로 포기를 하고 오픈소스를 찾았습니다.

역시나 대체품이 있었습니다.

Pencil Project입니다. 단독형으로 사용할 수 있고 파이어폭스 플러그인도 가능합니다. 설치한 후 실행을 하였습니다. Built-in Shape가 아주 다양히 지원을 합니다. 하고자 했던 UI 작업을 시작했습니다. 처음 사용해본 Mockup 프로그램은 과거 다른 프로그램에 비해 너무 편합니다. Drag and Drop으로 거의 대부분의 작업을 할 수 있습니다. 수정도 편합니다. 마음에 쏙 들었습니다. 계속 마음에 들었으면 좋았지만 Grid에서 문제가 발생하였습니다. 트레이딩 화면을 기획하신 분들이면 아시겠지만 컬럼수가 아주 많습니다. 특히 주문체결내역이나 잔고정보가 그렇습니다. 주문체결내역을 작업하는데 7개 칼럼까지는 정상이었습니다. 8개가 넘어가니까 칼럼이름이 보이지 않았습니다. Shape의 속성을 확인해보았지만 해결방법을 찾지 못했죠. 여기서 접었습니다. 이 때까지 들어간 시간이 20분정도입니다. 다른 프로그램을 찾았습니다. PowerMockup이 괜찮아 보였습니다. 제가 잘 사용하는 파워포인트의 플러그인입니다. 이상하게 실행을 했지만 파워포인트에서 동작을 하지 않네요. 시간을 내어 해결 방법을 찾고 싶었지만 그냥 다른 서비스를 찾았습니다.

이런 저런 도전끝에 마지막으로 선택한 서비스가 Moqups입니다. 유명한 Mashable에서 추천한 서비스나 제품은 아닙니다만 현재 만족을 합니다. 다른 분들은 아래의 정보를 확인해시고 선택하셔도 좋을 듯 합니다.

9 Excellent Tools for Design Mockups

이런 산고를 뚫고 만든 화면중 하나가 아래입니다.

3.
이번에 작업하려고 했던 UI를 몇 달전 Excel로 한 적이 있었습니다. 그렇지만 산출물이 마음에 들지 않고 생각한 바를 표현하려면 너무 많은 시간과 노력이 들어서 초안수준으로만 작성하였습니다. 그렇다고 요즘 거의 사용하지 않는 듯 한 Visio를 쓰면 품질은 높아지겠지만 시간이 너무 많이 들어가는 단점이 있었습니다. 생산성과 산출물의 품질을 놓고 볼 때 Mockup 프로그램을 사용하면 업무에 많은 도움을 줄 듯 합니다. 어떤 디자이너는 Mockup의 장점을 다음과 설명하고 있습니다.

Mock-ups incite criticism from users because they are low-cost (can be made of cardboard) and low-fidelity. If a user is presented with an early version of a system that has required substantial work, he/she is likely to be more reluctant (as well as able) to critise it.

When using mock-ups of cardboard or similar materials, the user and designer can collectively change the design using familiar tools such as pens, scissors etc. As such, mock-ups are a discussion medium and a discussion facilitator between designer and user.

Not only can the mock-up function as a discussion medium between designer and user but also between the members of the design team. Thus, mock-ups may help facilitate work across disciplinary borders, bringing together a disparate team.

Mock-ups make it possible to do usability testing early in the development process.

Mock-ups incite and legalise experimentation as they are inexpensive to alter.

Mockups focus on content and functionality and turn attention away from details of graphic design.
Mock-ups중에서

엑셀, 파워포인트 및 비지오여! 안녕.