2011. 5. 31. 23:57ㆍUI 가벼운 이야기
선행 프로젝트가 아닌 양산형 프로젝트일 경우에는 전략단계 이후 워크플로우 작업이 수반됩니다. 이 때 프로젝트의 규모가 클 수록 UI 기획자가 다루어야할 시나리오는 수백장에 이르는데요.
앨런 쿠퍼는 자신에게 익숙한 툴로 프레임웍을 작성하길 권장하고 있습니다. 하지만 일반 문서도구로는 끊임없이 결정하고 커뮤니케이션해야 UI 프로세스에서 시간과 에너지를 소모적으로 쓸 수 밖에 없는 한계가 있습니다.
현재 국내외에서는 파워포인트, 인디자인, Axure 등 다양한 프로그램을 프레임웍 툴로 사용하고 있습니다. 최근에는 어도비사에서 인터랙션 디자인 전용 툴인 카탈리스트(코드명: Thermo)라는 프로그램도 출시하기도 했습니다.
하지만 대부분커스텀 UI를 작성하기 어렵거나 수백장에 이르는 화면과 시나리오를 컨트롤하기에는 비효율적인 문제점이 있었습니다.
그러나 지금 소개하는'옴니그라플 Omnigraffle 5 pro'은 위의 문제점을 해결하고 있는 매력적인 도구중의 하나입니다.
'옴니그라플 5 pro'는 비즈니스용 소프트웨어 개발로 유명한 Omni group에서 제작하였으며, 다이어그램이나 플로우차트, 도면 설계에 최적화된 프로그램입니다. 기본적으로 Microsoft의 Visio와 매우 흡사하지만 좀 더 정밀한 드로잉까지 가능하다는 차이점이있습니다.
프로그램의 화면 구성은 아래 그림과 같이 Keynote와 유사합니다. 차이가 있다면 좌측의 캔바스 영역에서 레이어 기능을 제공하고 있고, 우측에서는 Stencil library가 배치되어 있음을 볼 수 있습니다.
1. "수백장에서 사용된 폼(Form)을 단 한번의 조작으로 수정이 가능합니다."
UI 워크플로우 문서를 작성하게 되면 인터랙션의 디테일을 살리기 위해 시나리오양이 기하급수적으로 늘어나게됩니다. 이 후 시나리오를 수정하게되면 굳이 사람이 할 필요가 없는 기계적이고 반복적인 업무가 발생하게 됩니다. 옴니그라플은 이러한 문제점을 'Shared layers' 기능으로 해결했습니다.
'Shared layers' 기능을 이용하면 여러 장표(Canvases)에서 사용된 특정 폼(Form)을단 한번의 조작으로 수정이 가능합니다. 이해를 돕기 위해 아래의 예시를 보겠습니다.
좌측의 그림을 보면 Shared layer에 속해 있는 폼의 위치나 텍스트 내용, 컬러 등을 변경할 시 우측의 그림처럼 모든 장표에 적용이 되는 것을 확인할 수 있습니다. 또한 Shared layer는 다중으로 생성이 가능하기 때문에 초기에 키스크린작성에서 레이어 세팅을 잘 해놓게 되면 시나리오 작성 및 수정에서 매우 효과적으로 시간을 절약할 수 있습니다.
2."팀원들과 협업 시 폼(Form)을 빠르게 공유하고 라이브러리를 구축하여 재활용할 수 있습니다."
옴니그라플에서는 Stencil이라는 라이브러리 기능을 지원합니다. 사내 서버를 라이브러리에 두고 작업하게 되면 팀원들과 협업시 폼을 빠르게 공유할 수 있습니다. 그리고 프로젝트가 종료된 이후에도 UI 패턴 라이브러리로 구축이 되어 이후의 관련 프로젝트에서 손쉽게 재활용할 수 있습니다.
또한 graffletopia을 통하여 온라인상에서도 공유를 할 수 있습니다.
Best Practice UX Forms 2.0 by Ryan Younger
3. "키스크린을 작성 후 빠르게 시나리오로 확장할 수 있습니다."
pxd처럼 다양한 플랫폼에서 UI 프레임웍 및 시나리오를 작성해야하는 경우에는 일반 문서 양식으로는 커뮤니케이션하는 것이 쉽지 않습니다. 시나리오를 작성하기 위해서는 연속된 키스크린으로 플로우를 설명해야 하는데 플랫폼에 따라 스크린 크기가 다양하기 때문입니다. 따라서 시나리오를 위하여 키스크린을 재작성해야하는 경우가 발생합니다. 하지만 옴니그라플에서는 캔바스를 확장하는 기능을 제공하기 때문에 키스크린으로 시나리오를 바로 작성할 수 있습니다. 그리고 아웃풋에서는 깨짐없이 확대 및 축소가 가능하게 산출됩니다.
옴그라플에서는 이 외에도 UI 워크플로우에 최적화된 기능 등을 다수 제공하고 있습니다. 예를 들면 프리젠테이션모드에서 폼 별로 하이라이팅이 되는 기능을 제공하며, 버튼 클릭시 화면을 이동할 수 있는 간단한 프로토타입을 구현할 수 있습니다. 그리고 와이어프레임의 스타일을 한 사람이 작성한 것처럼 손쉽게 맞출 수도 있습니다.
이러한 장점에도 불구하고 옴니그라플을 실제 업무에 적용하려면 한 가지 해결해야 할 점이 있습니다. 아웃풋 형태가 PDF, 이미지, HTML, MS Office Visio로 한정되어 있기 때문에 파워포인트를 고집하는 클라이언트의 경우 공유에 문제점이 발생합니다. 물론 PDF로만 공유되어도 커뮤니케이션에는 전혀 문제가 없다는 것이 개인적인 견해입니다. 그리고 인하우스에 있는 UX조직의 경우에도 위의 문제점은 해당이 되지 않습니다. 다만 옴니그라플 소프트웨어 자체가 맥 전용으로만 나와 있기 때문에 맥 환경으로 맞춰야하는 어려움은 있습니다.
끝으로 UI 기획자에게 옴니그라플 같은 도구는 크게 중요하지 않을 수 있습니다. 서비스와 사용자에 대한 끊임없는 고민과 그 이면에 숨겨져 있는 통찰을 찾는 것이 더욱 중요하기 때문입니다. 하지만 그들의 시간과 에너지, 프로젝트의 생산성을 고려해 본다면 충분히 쓸만한 도구임에는 틀림없습니다.