UI정보구조 설계 / 3. 와이어프레임 작성

와이어프레임 작성

인터페이스(interface) 기능 요소와 사용자 편의를 고려하여 항목들을 배치하는 것을 통해 와이어프레임(wire frame)을 작성할 수 있다.

기능 구조 정의

1. 주요 기능 정의

카드소팅 수행을 통하여 콘텐츠와 기능에 대하여 다양하게 그룹핑 및 배열을 시도하면서 기능구조를 정의하였다면, 사용자 태스크 흐름을 중심으로 각 그룹의 사용빈도와 중요도 를 파악한다. 그리고 정의된 기능들에 대해 우선순위를 설정해야 하는데, 이 과정에서 중 요하지 않거나 불필요하다고 판단되는 기능들은 삭제하기도 하고, 새로운 기능이 필요하 다고 판단될 경우에는 추가하기도 한다.

2. 메뉴 구조도

(1) 메뉴 구조도 정의

메뉴 구조도는 앱 공간의 형태를 시각적으로 보여주며, 메뉴와 각 메뉴의 기능을 문서 로 정리 한 것을 말한다.

(2) 메뉴 구조도 기능

메뉴 구조도는 앱 개발자와 디자이너를 위해서 각 업무에 대한 요약이나, 기본적인 사 항들을 기록하는 기능을 한다. 페이지와 다른 정보 요소 간의 관계, 흐름, 과정을 보여 주기 때문에 정보구조를 파악하는데 도움을 줄 수 있다.

와이어프레임(wire frame)

1. 와이어프레임의 정의

비주얼 디자인 단계 이전에 대표적인 화면들에 표시되는 콘텐츠, 기능, UI 요소, 레이아웃 을 대략적으로 요약해 보여주는 것으로 화면 설계도를 말한다. 일반적으로 색상, 타이포그 래피, 이미지 등의 디자인 요소들은 생략하고 대신, 흑백의 윤곽선(frame)으로 표현하며 박스나 선을 주로 이용한다. 와이어프레임은 앱에 들어갈 기능 요소들을 정의한 문서들을 포함하고 있으며, 이런 기능들이 들어가게 된 기술적, 사용자 측면의 이유들이 디자인 시 안과 함께 제시되기도 한다. 잘 제작된 와이어프레임은 UI/UX 디자인의 방향성을 잡아줄 뿐만 아니라, 프로젝트의 구성원들인 디자이너, 웹 퍼블리셔, 개발자사이에서, 그리고 클 라이언트와의 소통을 원활하게 하는데 많은 도움이 된다.

(1) 사용자 태스크의 흐름(flow)이나 진행 과정으로부터 나온 기능 구조를 인터페이스의 기능으로 어떻게 변환해야 하는지를 정의한다.

(2) 사용자가 이동하면서 수행하는 태스크 수행에 연속성을 부여하고 행동에 제한을 주 는 요소들을 최소화한다.

(3) 사용자가 태스크를 수행하는 각 단계마다 행동 유도성을 고려하여 화면설계 작업을 진행한다.

(4) 메뉴 구조도를 참고하여 작성하고, 앱 인터페이스에 표현되는 콘텐츠와 정보구조 가 복잡해지지 않게 고려하여 설계한다.

2. 와이어프레임의 종류

(1) 와이어프레임 스케치

와이어프레임 스케치는 앱 인터페이스의 작동 방법에 대한 콘셉트를 실행해 볼 수 있 는 효율적인 방법이다. 깔끔한 선 처리, 정확한 형태, 정돈된 레이아웃 등은 배제하고 연필이나 펜으로 아이디어가 떠오르는 대로 러프하고 빠르게 표현한다. 와이어프레임 스케치를 할 때 가장 많이 사용하는 도구는 모눈종이나 격자종이를 이용하는 것이지 만, 그리는 사람마다 자신에게 편한 방법과 도구를 이용하면 된다. 스케치를 하는데 있어서 중요한 것은 사용자가 수행하는 절차와 동선의 흐름을 따라 각 화면에 구성된 인터페이스 요소들을 매우 자연스럽게 사용할 수 있도록 연결하는 것이다.

(2) 제작 도구를 이용한 와이어프레임

제작 도구내의 다양한 요소를 활용하여 크기와 위치 조정, 요소의 재사용이 가능하기 때문에 앱의 UI/UX 콘셉트를 보다 구체화(refining)하고 상세하게 표현할 수 있는 방법이다. 정교한 단위로 와이어프레이밍을 하기 때문에 앱 인터페이스의 구조와 전체 흐 름 및 어떻게 작동하는 지에 대한 구체적인 정보를 보다 명확하게 만들어준다는 장점 이 있다.

3. 와이어프레임 구조의 검토 사항

1. 홈 화면을 어떻게 정의할 것인가?
2. 메뉴 구조는 어떻게 정의할 것인가?
3. 앱과 사용자 목적에 맞는 태스크를 모두 포함하였나?
4. UI 구성 요소가 실제로 쓸모가 있는가?
5. 화면 간 관계를 어떻게 정의할 것인가?