들어가기
이번에는 R이나 데이터 분석과 무관한 주제에 대해서 이야기합니다.
개인적으로 데이터분석 웹앱인 BitStat를 Shiny 기반의 오픈소스로 개발하는 일을 시작하였습니다. 처음에는 암묵적으로 떠올린 개념으로 화면을 개발했으나, 복잡도가 늘어나고 화면의 일관성을 유지하기 위해서 개발에 앞서 와이어프레임을 그려보려 합니다.
Wireframe 도구를 찾던 중 PowerMockup를 소개하는 글을 포스팅하면 무료로 사용할 수 있는 라이센스를 획득할 수 있는 방법이 있어, 부득이하게 제품 소개글을 게시합니다.
파워목업 소개
웹앱이나 앱을 개발할 때 UI/UX를 설계를 목적으로 화면 단위의 레이아웃을 디자인하는 것을 와이어프레임(wireframe)이라 합니다. 와이어프레임이 좀더 정적으로 구체화되면 목업(mockup)이라고 합니다. 용어는 차이가 있으나 두 개 모두 화면을 설계한다는 것에는 차이가 없습니다.
예전에 잠깐 발사믹(Balsmiq mockups)를 사용한 경험이 있어 구글링을 통해서 몇 개의 대표적인 와이어프레임(목업) 도구를 리스트업 했습니다. 그중 파워목업(PowerMockup)을 발견했습니다.
이 툴의 장점은 파워포인트의 애드인(add-in)으로서, 제가 많은 시간 사용하고 있는 파워포인트 안에서 동작한다는 점입니다. 그러니 자연스럽게 파워포인트 문서로 와이어프레임을 디자인합니다. 두번째 장점은 블로그에 소개하면 유로 라이센스를 제공받을 수 있다는 점입니다.
파워목업 다운로드
파워목업 홈페이지인 https://www.powermockup.com/를 방문하면, 다음 그림처럼 프로그램을 다운로드할 수 있는 화면이 떡하니 나타납니다.
정품을 구매하더라도 트라이얼 버전을 다운로드해야 합니다.
사실 트라이얼 버전을 다운로드해서 사용하기에는 어려움이 많습니다. 그 많은 위젯 중에서 몇개만 지원해서 현실적으로 와이어프레임을 디자인하는 것이 불가능하다고 보여집니다.
파워목업 장점
파워목업은 파워포인트 안에서 작동하므로 위젯 등의 도형을 드래그 드롭으로 끌어다 디자인하면 됩니다. 쉽습니다.
파워목업이 내세우는 장점에도 쉬운 사용성을 첫 째로 꼽고 있습니다.
개인적으로 파워목업의 장점은 파워포인트 애드인이라는 점입니다. 아무래도 프로젝트를 위한 많은 문서들을 파워포인트로 만들기 때문에, 사용하기에 익숙하다는 점. 그리고 최종 산출물이 파워포인트 문서 파일로 저장된다는 점입니다.
파워목업 실행하기
다운로드 후 설치를 하였고, 파워포인트를 실행했습니다. 오른쪽의 파워목업의 도형들이 나열되어 있습니다. 이 중에서 필요한 도형을 끌어다가 디자인하면 됩니다.
레이아웃의 예제도 있습니다. 처음부터 하나씩 도형을 엮어 디자인할 수도 있으나, 예제를 먼저 가져다 놓고 수정하는 방법도 있겠죠. 그러나 예제의 사례는 몇 가지가 안되더군요.
체크박스그룹을 가져다 디자인하는 사례입니다. 오른쪽 다이얼로그 박스를 수정하면 다이얼로그 박스의 디자인이 변경됩니다. 도든 도형들이 이렇게 동작하지 않지만, 사용자가 세세하게 컨트롤하는 수고를 덜어주는 기능이라 유용했습니다.
파워목업에 대한 기대
아직은 트라이얼 버전이라 기획하고 있는 와이어프레임을 그릴 수 는 없습니다. 그러나 라이센스를 획득하고 잠겼던 도형들이 열리면 BitStat의 와이어프레임 문서들이 만들어지고, 와이어프레임의 수만큼 앱의 화면도 늘어갈겁니다.