워크플로우 제작하기 / 3.워크플로우 작성

워크플로우 작성

사용자의 여러 상황을 직접 경험하고 감정이입을 통해 직관적이고 편리한 워크플로 우를 제작할 수 있다.

UI 문서의 이해

1. 와이어프레이밍(wireframing)

UI 문서 중 중요한 역할을 담당하는 하나로서 와이어프레임은 화면 단위의 레이아웃 구조 설계하는 단계의 과정이다. 프로젝트 관계자들과 레이아웃을 협의하거나 시스템의 간략한 흐름을 논의하고 공유하기 위한 목적으로 사용하며 UI, UX 디자인에 집중되어 있다. 와이 어프레임 설계에서 중요한 사항은 크게 두 가지로 요약된다. 첫째, 사용자의 콘텐츠 요구 사항에 대하여 구조화 작업을 수행하고, 사용자가 콘텐츠를 편리하게 이용할 수 있도록 콘텐츠 공간의 패턴과 순서를 설계하는 정보구조 설계에 관한 것이다. 둘째, 사용자의 기 능 요구사항의 세부 작업에 대한 동작 설계, 그리고 사용자와 시스템간의 인터랙션 디자 인에 대한 것이다. 따라서 사용자가 태스크를 수행하고 완료하는 과정에 대한 패턴과 순 서 정의를 하기 위하여 태스크를 분석하고, 이에 따라 제공해야 할 콘텐츠 및 기능들을 도출하는 과정을 거쳐야 하는 것이다. 와이어프레임은 GUI(Graphic User Interface) 디자 인의 이전 단계이므로 비주얼 디자인 요소들은 배제되며, 작성 이후에도 몇 번이고 수정 하는 것이 일반적이다. 프로젝트 관계자들과의 의사소통을 위해서 와이어프레임에 포함되 어야 하는 요소들은 다음과 같다.

(1) 와이어프레임(wire frame)

와이어프레임에 포함되어야 하는 요소는 화면의 흐름, 기능, 화면 레이아웃 요소가 필 수적이며, 이와 함께 사용자 편의성이 고려되어야 한다.

(2) 주석(annotation)

주석은 해당 요소에 대한 이름, 또는 단어를 설명하는 글을 말하는 것이지만, 추가적 인 세부 설명이 필요한 경우에도 유용하게 쓰인다.

(3) 화살표(arrows)

화살표나 선 등은 메뉴의 흐름이나 화면의 전환을 표시할 때 유용하게 사용될 수 있 다. 화면과 화면간의 연결이나 사용자 행위의 순서를 나타낼 때도 간단한 주석과 함께 이용한다.

(4) 메타데이터(meta data)

메타데이터에는 제작자의 이름, 와이어프레임 제작일, 수정된 날짜, 향후 해결해야 할 문제 등을 기입한다.

2. 메뉴 구조

사용자들은 주요 기능 3가지 메뉴별 정보를 앱을 통해 제공받게 된다. 앱의 전체적인 메 뉴 구조는 다음 그림과 같다.

3. 사용자 편의성을 고려한 와이어프레임

다음의 와이어프레임은 UI 시나리오 기반의 태스크 분석 결과에서 도출된 ‘잦은 조작 및 복잡한 화면 이동’이라는 문제점을 설정하고, 이를 개선시키고자 작성된 와이어프레임 사례이다. 기존 사용자들이 하나의 메뉴를 이용하고 나면, 다시 이전 화면으로 되돌아오는 것을 반복했던 문제점들을 개선하기 위하여 고정된 화면에서 여러 가지 메뉴를 이용할 수 있는 수평적 구조를 설계함으로써 사용자에게 보다 직관적인 화면 구조와 사용 편의성을 제공할 수 있도록 하였다.

워크플로우 작성의 목적

1. 워크플로우의 활용도

와이어프레임으로 앱의 대표 화면들을 표현하였다면, 구체적으로 화면들이 어떤 흐름으로 전개되고 어떤 단계를 거쳐야하는지 보여주는 작업이 필요하다. 워크플로우는 앱 UI의 구조를 정의하는 설계서이자 개발자들의 코딩 작업을 위해 화면을 확인하기 위한 용도로 사 용되며, 또 사용성 테스트나 프로토타입(prototype) 제작을 위해서 필요한 UI 설계 문서 로 활용된다. 워크플로우를 작성하는 형식에는 규정된 것이 없으며, UX 디자이너에 따라 서 각기 다른 흐름을 보여줄 수도 있다.

2. 워크플로우 점검 사항

앱 사용자의 경험을 고려하여, 보다 직관적이며 편리하고 유용한 화면 구조와 흐름을 설 계하는 것은 앱의 추상적인 형태를 개략적으로 정의하는 과정이다. 워크플로우 작성 시 고려해야 할 사항들은 다음과 같다.

(1) 일관된 사용자 경험을 확인할 수 있어야 한다.

(2) 사용자 입장에서 사용 용이성 및 유용성이 확보될 수 있어야 한다.

(3) 복잡한 인터렉션 흐름을 쉽게 파악할 수 있어야 한다.

(4) 워크플로우 상에서 앱의 실행 방법부터 순서, 작동 방법, 다음 작업에 대한 힌트가 시각적으로 나타나야 한다.

(5) 프로젝트 여러 이해관계자들과 의사소통이 가능하도록 작성되어야 한다.

3. 워크플로우 작성

앱 사용자에게 제공해야 할 콘텐츠 및 기능들을 포함하여 워크플로우를 작성하되, 태스크 분석을 통해 도출된 우선순위가 높은 태스크를 중심으로 화면의 단계를 구성해야 한다. 또 사용자가 주요 태스크를 가장 편리하게 사용할 수 있도록 하기 위해, 사용자의 인지적 인 측면을 고려하여 화면의 복잡성을 최대한 배제하여야 한다. 워크플로우는 다이어그램 형식이나 스케치, 제작 도구를 활용해서 작성하는 등 다양하게 표현될 수 있다.

4. UI 설계 도구

기존 실무에서는 화면 UI 설계 및 인터랙션을 살펴보기 위해 대부분 파워포인트 프로그램 을 사용해왔다. 하지만 최근에는 보다 편리하게 와이어프레임이나 워크플로우, 프로토타입 등의 화면 설계를 할 수 있으며, 수정 작업이 용이한 디지털 제작 도구들이 출시되어 있 다. 시각화 작업을 시작하는 초반에는 주로 스케치 방법을 이용하여 표현해보는 것이 바 람직한 방법이며, 이후 여러 사람과의 의사소통, 공유 및 수정작업을 위해 디지털 제작 도구를 사용하여 옮기는 방법이 바람직하다. 세계적으로 많은 사용자를 확보하고 있으며, 유료로 운영되고 있는 대표적인 디지털 제작 도구들은 다음과 같다.

(1) UX Pin (http://www.uxpin.com/)

(2) AXURE (http://www.axure.com/)

(3) Sketch (http://www.sketchapp.com/)

(4) InVision (http://www.invisionapp.com/)