하나의 제품을 만들기 위해서는 여러단계를 거쳐서 진행이 됩니다.
무작정 기능을 넣어 배치하고, 예쁘게 꾸미는 것만으로 제대로된 제품이 나오기 힘듭니다.

App와 Web service design 진행될 때 필요할 과정들이 있죠, 시장조사와 리서치부터 시작해서, Shadow tracking, Survey, Persona, Analysis, key finding, Wire frame, Information Architect, Story board 등 많은 과정을 거쳐서 진행이 됩니다. 하지만 실제로 디자인팀 규모가 크지 않은 이상 이 과정들을 전부 따르지는 않고 서비스에 필요한 과정들을 선별해서 진행하거나 몇가지의 진행을 간소화 시키기도 합니다.

그렇지만 빼놓지 않고 진행 되어야 할 과정을 꼽자면 바로 와이어 프레임입니다.
와이어 프레임은 말 그대로 선(wire)을 이용해서 뼈대(frame)를 만드는 것으로 GUI 적인 요소를 생략합니다. 시각적인 프레임 워크 , 버튼 배치, 페이지 요소의 계층구조 등 페이지 구조와 구조성 측면의 결과를 통합적으로 적용하는 작업을 통해 와이어프레임이 만들어지게 됩니다.
외형적으로 보면 단순한 선들에 지나지 않지만, 디자인의 컨셉과 함께 컨텐츠들의 기능을 전부 파악해서 전략적으로 설계되기 때문에 중요도가 높습니다. 또 디자이너는 이 와이어프레임을 이용해서 개발 구성원과의 소통을 해야됩니다.

고민을 많이 해야하고 많은 시도를 하면서 와이어 프레임 작업은 꽤 많은 시간이 소요됩니다. 디자인 요소를 배제한다고 하지만, 앞서 말했다시피 혼자만 보는 것이 아니기 때문에 와이어 프레임을 스케치 할 때도 대충하면 안되겠죠.

그래서 와이어프레임 많은 도움이 되는 툴들이 나와있습니다. 이런 툴을 이용해서 작업을 하게 되면 디자이너는 본래의 기능이 컨텐츠와 구조성에 더 집중을 할 수 있게 됩니다.

그 중에서 제가 써본 WireframeSketcher 라는 툴을 한번 소개하고자 합니다.

와이어프레임 툴을 사용하다 보면 몇가지 애로사항이 생기게 됩니다. 바로 디자이너들이 손으로 스케치 하는 듯한 자유도가 아무래도 많이 떨어지게 된다는 것입니다. 많은 디자이너들이 익숙한 손 스케치를 선호하는 이유가 여기에 있습니다. 바로바로 생각이 닿는 방향으로 수정을 할 수 있고 종이 위를 자유롭게 사용할 수 있습니다.

와이어프레임 초안 작업을 하기 위해서는 이 방법이 더 쉬울 수 있습니다. 하지만 페이지 수가 많아진다면? 이 방법으로는 한계가 있습니다. 몇 십장이 되어버리는 페이지, 그것도 반복되는 요소들은 손으로 일일이 그려야 한다면 말그대로 멘붕이 올 것입니다. 게다가 이런 스케치로는 자신은 알아볼 수 있겠지만 구성원과의 소통이 힘들어 질 수가 있습니다.

이런 문제점을 보완하기 위해서 툴을 익히는 것이 훨씬 효율적입니다. WireframeSketcher 는 캔버스 영역을 자유롭게 오가면 작업을 진행 할 수 있습니다. 디자이너가 손수 그려넣을 필요없이 해당하는 UI요소를 캔버스로 던져넣으면 바로 생성이 되죠. 텍스트를 수정한다던지, 크기조절도 마우스를 이용해 직관적으로 사용할 수 있습니다. 디자이너는 기능과 구조적인 배치만 고민에 집중하고 나머지는 툴에게 맡기면 되는 것입니다. 

사실 WireframeSketcher 의 첫인상은 아이콘도 옛스럽고, 상대적으로 미려한 외관을 자랑하던 다른 맥 애플리케이션들에 비해서 디자인적으로 가장 밋밋하다는 것입니다. 그래도 간단한 UI를 가지고 있어, 디자이너나 개발자가 따로 익히지 않고도 사용하기 쉽고, 비전문가도 어느정도만 만져본다면 쉽게 사용할 수 있을만큼 직관적입니다. 게다가 이 툴은 맥 뿐만 아니라 윈도우, 리눅스 버전으로도 나와있기 때문에 플랫폼간 호환성도 좋습니다.

WireframeSketcher의 특징

좀 더 자세히 활용 설명을 해보겠습니다. 

왼편에서는 프로젝트를 불러올 수 있으며, 구성 요소를 설정할 수 있고, 요소에 대한 레이어를 관리하고 UI요소에 링크를 걸어서 페이지 이동을 시킬 수 있습니다. 오른편에서는 UI요소를 불러 올 수 있는 팔레트가 있습니다. 그리고 가운데 스크린에서 와이어프레임을 만드는 작업을 합니다. 제공되는 아이콘들은 벡터이미지 이기 때문에 크기를 조절할때 부담없이 사용할 수 있습니다. 

Mockups Gallery

팔레트에서 가져올 수 있는 UI요소들은 한정되어 있지만 WireframeSketcher 웹사이트의 Mockups Gallery 를 통해서 안드로이드, 아이폰 등의 UI요소 (Stencils, Templates, Icons)를 다운 받아 사용할 수 있습니다. 간단히 해당 기기와 서비스에 대한 GUI를 가져올 수 있어 디자이너는 더 높은 완성도를 가진 와이어프레임을 손쉽게 만들수 있습니다. 이정도도만 되어도 와이어프레임을 만드는데 부족함이 없지만, 사용자가 원한다면, 아이콘이나 로고 등도 Asset에 추가시켜 간단히 불러올 수 있어, 자유로운 디자인이 가능합니다. 

Mockups Gallery 에서는 Stencils, Templates 뿐만 아니라 Annotations, Touch Gestures 등을 다운받을 수 있습니다. 이것을 사용하면 와이어프레임 안에서 필요한 설명을 깔끔하게 정리해서 넣을 수 있습니다. 

Wiki formatting 

와이어 프레임을 사용해야 할때 유용하게 쓰이는 기능 중 하나로 wiki formatting 이 있습니다. 이것을 이용하면 아래와 같은 테이블도 간단한 문법코드을 이용해서 쉽게 만들어 낼 수 있습니다. 처음 볼때는 뭔가 복잡한 수식이 있어 거부감이 들겠지만 생각보다 훨씬 쉬운 코드들이기 때문에 예시코드를 보고 직접 따라해보면 활용하기엔 크게 어렵지 않습니다.

그 밖에도 손으로 스케치 한듯한 Sketch 와 깨끗한 라인을 보여주는 Clean 테마가 있어서 입맛에 맛게 설정할 수 있으며, UI요소들은 쉽고 빠르게 배치 할 수 있게 Grid Snapping 과 Smart Guides가 도와줍니다. 

또한 마스터 템플릿기능으로, 사용자 만의 스텐실을 만들어 놓으면 수정시에 모든 스크린에 적용 되기 때문에 효율성이 더 커집니다.

프로토 타이핑

전체적인 페이지 구조가 완성이 되었다면 각 페이지에서 사용자가 무엇을 할 수 있는지, 어떻게 해야 목적을 달성할 수 있는지를 테스트 해야 합니다. 사용자의 행동 패턴이나 페이지에서 페이지로 이동하는 흐름이 막힘없는지도 테스트해야 합니다. 

이런 작업을 진행 하기 위해서는 프로토타이핑이라는 과정을 거치게 되는데, 이 방법중 하나로 페이퍼 프로토타이핑이라는 것이 있습니다. 와이어 프레임을 종이 위에 그려서 그것을 사용자가 실제 사용하는 것 처럼 페이지 이동과 사용자의 인터렉션을 보고 연구하게 됩니다. 이런 페이퍼 프로토 타입을 만들기 까지는 수시간이 필요하게 됩니다. 그리고 그것을 완벽하게 숙지한 작업자는 사용자가 사용할때 옆에서 인터렉션기능을 수행해야 하지요. 

이런 번거로운 작업을 WireframeSketcher라면 어떻게 해야할까요? 

링크기능을 이용한다면 간단한 프로토타이핑 툴로 쓸 수 있습니다. 마치 웹 사이트처럼 각각의 ui요소에 이동하게 될 페이지 제목을 링크해 줍니다. 그리고 나중에 그 버튼을 클릭하면 그 페이지로 이동합니다. 

이런 프로토타이핑 툴의 장점은 실제와 같이 만들거나, 다양한 효과를 넣는것이 아니라, WireframeSketcher 처럼 간단하고 효율적으로 구현해서 만들기 단계를 최소화 함에 따라 디테일한 UX 수정작업에 더 시간을 투자할 수 있다는 것입니다. 또한 WireframeSketcher 에서는 이것을 pdf로 만들어서 사용자에게 쉽게 테스트 할 수 있도록 만들어 줍니다. 

서비스의 완성도를 높이려면 설계도, 즉 와이어프레임에 시간을 더 쏟아야 함에는 틀림없습니다. UX design 서적에서는 이렇게 나와있습니다.

"실제로 사용자의 객관적인 시선이 필요한 경우 완성된 프로토타입단계에서 별문제가 없어도 다시 한번 사용성 테스트를 거친다. 높은 수준의 프로토 타입은 실제 제품이나 다름이 없기 때문에 유용성, 심미성, 안정성 등 전반적인 품질 수준을 확인할 수 있다." 
- UX design : 사용자가 경험하는 모든것을 디자인 하라

하지만 프로젝트의 정해진 기간이 있는 만큼 많은 시간을 투자하기는 어렵습니다. 단기간 안에 얼마나 효율적으로 와이어프레임 단계 본연의 작업을 수행하느냐에 따라서 서비스 디자인의 질은 달라질 것입니다. 

반드시 WireframeSketcher 를 이용해야 되는 것은 아닙니다. 다양한 프로토타입 툴들이 많이 나와있기 때문에 직업 살펴보고 마음에 드는 것을 사용하는 것이 좋습니다. 

제목에서 말했다시피, 와이어 프레임 툴을 이용해서 디자이너는 와이어프레임 본질에 집중을 하고 작업한다면 디자인, 기획에 있어서 큰 도움이 될 것입니다.

씸플 홈페이지 / 페이스북 / 트위터

WireframeSketcher의 가격은 99$로 높은 편이지만 학생할인으로 50%할인을 받거나 비영리목적으로 사용할 경우에는 무료로 사용할 수 있다고 합니다.