#IT tool, #mockup, #wireframe,#prototype

 

머리에 돌아다니는 무수한 아이디어와 의견을 실제로 존재하게 만들어 내는 과정 ..

그것이 기획과 개발의 한과정이라고 말할수 있다

디자이너와 기획자가 웹화면의 메뉴 화면 구성을 스토리보드라고 한다면 

해당화면에서 버튼과 텍스트, 이미지 등의 실제 보이는것을 그대로 그려내는것, 실제로 만들어지는 모형을 스케치하는 디자인, 화면설계 작업을  목업(mockup)이라고 한다. 

또한 뼈대를 잡는다고 해서 와이어플레임이라는 용어로도 쓴다. 즉 디자인이 들어가기 전 단계에서,  선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말한다.  
 

목업이 끝난 이후에 서비스나 제품기획, 웹페이지,  앱화면제작 을 할때 본격적인 상품화나 서비스에 앞서 성능을 검증, 개선하기 위해  핵심 기능만 넣어 제작한 기본 모델을 프로토타입(prototype)이라고 하며 만들어진 프로토타입을 고객에게 제공하고 문제점을 체크하여 피드백을 받는 과정을 프로토타이핑이라고 한다.
제품이나 서비스가 완성되어가는 단계까지의 설명을 한것인데  건축에 비교하자면 설계도가 와이어프레임, 모형제작이 프로토타입과정이라고 보면된다. 

​ 

용어가 어려워 설명이 길어졌는데 기획의 단계는 스토리보드 -> 와이어플레임, 목업 -> 프로토타입 진행단계로 진행된다고 보면 된다.
하드웨어와 달리   웹, 앱, 소프트웨어 같은 실체가 없는  S/W개발의 단계는 스토리보드, 목업과 와이어프레임, 프로토타입 이 한꺼번에 같은 개념으로 사용되기도 한다.  

개발자와 디자이너, 기획자를 위해서  현업에서 UI구현을 위해서 사용하는 mockup tool을 소개하려고 한다 

물론 종이에 그려서 스캔할수도 있고, 파워포인트에서 그릴수도 있고 포토샵에 그릴수도 있고 방법은 다양하다.

그러나 목업과 프로토파이핑을 위한 툴은 단순히 그림만 그리는 툴이 아닌 손쉽고 유연한 UI작업이 가능해야 하고

여러 분야와 원활한 커뮤니케이션에 활용되기 위해서 다양한 방식의 내보내기와 공유기능, 손쉬운 수정기능이 제공되는것이 좋다 

balsamic mockup 

https://balsamiq.com/

PC에서 설치하는 방식이며 가장 널리 알려져있으며 패치하면  한글메뉴로 전환되고 한글입력도 가능하기 때문에 많이 사용된다.

가장 큰 단점이라면 구매를 해야 한다는 점인데 사용하면 전문 UI기획자라면 거의 쓰고 있다고 봐도 된다. 

 
  

https://cacoo.com/

설치하지 않아도 되는 온라인 방식의 mockup tool이다. 이메일만 입력하면 로그인이 되며 간단하게 사용하고 경험해 볼수 있는 site이다.

한글메뉴와 영문메뉴가 혼합되어  제공된다 

무료인경우는 6개의 sheet가 제공되며 일년에 $49을 내면 1000sheet을 만들수 있고 내보내기, 공유, 수정이력관리가 가능한다. 

사용 인터페이스는 구글오피스와 유사하다.  
 

파워목업

https://www.powermockup.com/

파워포인트+mockup가 결합된 제품군이다. 

파워포인트 안에서 mockup 을 할수 있도록 클립아트 같은 컴포넌트가 추가된 형식인데 구매버젼이다. 파워포인트로 목업을 하는 국내유저가 많은데  목업용 아이콘과 클립아트가 많으므로 파워포인트를 즐겨쓰는 분이라면 추천해본다.  

oven

https://ovenapp.io/

다음카카오가 만든 온라인 프로토타이핑을 제공하는 한글메뉴 사이트이다.

설치하지 않아도 되며 무료로 쉽게 사용할수 있다 최대 30mb 또는 30개의 이미지업로드 공간을 제공받으며 

이메일 인증을 받으면 standard로 업그레이드 된다.  standard는 5000mb 또는 500개의 이미지업로드 공간을 제공받을수 있게 된다. 

프로토나우 

http://software.naver.com/software/summary.nhn?softwareId=GWS_001435

네이버에서 만든 목업 툴이다.프로토타이핑 도구 활성화 목적으로 시작하였으나 

2016년 12월에 더 이상의 버젼은 나오지 않게 되어 작업중인 사용자들의 공분을 사기도... 설치형이다. 

 

백문이 불여일견. 웹페이지나 앱페이지를 개발해 본다면 종이에 그린것을 화면에 옮겨보고 , 그 내용을 회의하여 공유하고 수정할수 있고

저장해두고 나중에 꺼내볼수 있는 목업툴을 사용해 보길 권한다. 

 

​글쓴이 _ jussi 

비영리기관에서 독서문화, 작은도서관 활성과 홍보 등의 업무를 하고 있습니다