티스토리 뷰
웹기획자는 아니지만 기획에 관심이 많고, 이번에 생각한 아이디어를 현실로 만들기위해서 스토리보드(화면정의서)를 작성하려고 합니다. 파워포인트의 도형을 이용해서 할 수도 있지만 유명한 wireframing tool인 PowerMockup을 사용해 보았습니다.
소프트웨어 사용법을 배울 필요없이 몇분만에 UI를 그릴 수 있습니다 ^^
PowerMockup 소개 영상
실제로 사용해보니 정말 편합니다 ^^
물론 스토리보드를 그릴 이미 많은 요소들을 가지고 있고 회사마다 스타일이 있어서 그 방식대로 해야된다고 해도 PowerMockup의 기능을 이용하면 편합니다. 기존에 요소들을 별도의 카테고리로 만들어서 형상(stencil)으로 저장해 놓으면 copy & paste 하지 않고 해당 형상을 클릭하여 사용하면 됩니다
이렇게 편리한 PowerMockup에 대해 자세히 알아보겠습니다.
PowerMockup을 설치하면 위 그림과 같이 우측에 PowerMockup Stencil Library가 생깁니다.
따로 설정하지 않아도 처음 실행 시 보여지네요
제가 간단히 만든 웹 화면입니다. ajax 처리 시에 하단 내용이 클릭되지 않게 layer를 둔 모습인데 PowerMockup을 사용하니 정말 금방 되네요 ^^
다양한 Container를 제공해서 Tablet, iPhone, browser 등 용도에 맞게 사용하시면 됩니다.
기존에 사용하고 있는 요소들이 있으면 새 카테고리를 추가해서 관리하시면 편합니다.
우측에 PowerMckup Stencil Libarary에 마우스를 갖다 놓고 우측 버튼을 누르면 위 그림과 같이 context menu가 나옵니다. Add Category를 선택해서 카테고리를 추가합니다.
추가된 카테고리의 이름을 알맞게 수정해 줍니다. 저는 my company stencil 이라고 정했습니다.
버튼 형상을 하나 만들기 위해 비슷한 도형을 선택하고 텍스트를 추가합니다. 텍스트가 없으면 매번 오른쪽 버튼을 눌러 텍스트 편집을 해줘야되기 때문에 검색이라고 입력하겠습니다.
위와 같이 검색버튼이 만들어지면 해당 도형을 선택하고 우측 라이브러리에서 마우스 오른쪽 버튼을 클릭하여 Context Menu에서 Add Stencil을 선택합니다.
이렇게 개인적으로 사용할 버튼이 만들어졌습니다. ^^
기존에 사용하시던 요소들이 많으신 분들도 PowerMockup을 이용하면 더 편하고 빠르게 스토리보드 작성을 하실 수 있습니다.
PowerMockup을 이용하면 위와 같은 화면을 만드실 수 있습니다.
쉽게 끌어다가 내려놓으세요 ^^
PowerMockup 웹사이트를 PowerMockup으로 만들었네요 ^^
PowerMockup Trial 버전은 많은 기능을 사용하실 수 없습니다. 그래서 라이센스를 구매해야 제대로 사용하실 수 있습니다.
라이센스 가격은 아래와 같습니다.
쉽고 빨리 그리고 편하게 스토리보드를 작성하는 것에 비하면 결코 비싼 가격은 아닐 것 같네요 ^^
라이센스가 부담스러우시다면 PowerMockup을 블로그에 홍보하시고 info@wulfsoft.com 으로 이름(라이센스 등록 시에 사용됨)과 함께 홍보한 블로그 url을 작성해서 보내주시면 됩니다 ^^
Request a Free Review Copy
As a courtesy to the press, we offer free license codes that enable you to review the full version of PowerMockup. To request a license code, contact Andreas Wulf at info@wulfsoft.com and specify that you are in the process of reviewing PowerMockup (please mention the publication).
Don't hesitate to ask us if you have any questions or concerns. We look forward to hearing from you.
마치며
PowerMockup은 Microsoft PowerPoint Add-on 으로 PowerPoint 2007, 2010, and 2013을 지원하는 유용한 Wirefreming Tool 입니다. 제가 직접 써보니 생각들을 쉽고 빠르게 문서화할 수 있었습니다. 다른 웹기획 툴들이 있지만 그래도 PowerMockup이 저랑 제일 잘 맞는거 같네요 ^^