[UX 디자인] 와이어 프레임 스케치부터 와이어프레임까지

사회조사분석을 통해 모임숲이라는 앱의 컨셉을 정했고, 다음으로 와이어 프레임을 정하게 됐다.

 

와이어 프레임이란 소프트웨어와 웹 디자인의 세계에서 쓰이는 개념으로, 웹사이트의 골격이나 앱의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합이다.

 

바로 디지털 드로잉을 하기보다는 먼저 대략적인 스케치를 통해 앱에 필요한 주요 기능과 서비스 등을 구상하면서 레이아웃을 잡아보았다.

 

 

 

 

사회조사분석 결과는 다음 링크를 참조

UX 스마트문화앱 - 사용자 조사방법 PPT

 

 

 

 

 

 

와이어프레임 스케치 예시

 

와이어프레임 스케치에서 홈메뉴에 들어갈 대메뉴부터 정하고, 각 대메뉴 속에 들어갈 콘텐츠에 맞는 UI 레이아웃을 대략적으로 스케치해보았다.  

 

스케치하면서 자유롭게 캐릭터나 아이콘에 관한 구상도 함께 했고, 각 메뉴들이 유기적으로 어떤 동선으로 연결되는지 상상하면서 그렸다.

 

위와 같은 과정을 거쳐 만들어진 와이어프레임은 다음과 같이 설계되었다. [디자인]과 [개발사항]부분을 나눠서 디자인에 맞는 개발 사항은 어떤 부분이 필요한지 표기했다.

 

PPT에 포함된 주제는 다음과 같다.

 

1. 와이어프레임 스케치 : 본격적으로 와이어프레임을 만들기에 앞서 대략적으로 아이디어를 스케치해본다.

 

2. UI 정보구조 스토리보드 : 각 페이지마다 포함되어야할 디자인과 기능에 관해 명시했다.

 

3. 유스케이스 : 사용자가 앱을 이용하는 구체적인 목적에 따라 작성한다.

    예를들어 모임숲의 경우 모임을 검색하고 참여하고 싶은 모임을 결정해서 참여하고 약속을 잡는 것이
가장 중요한 태스크라고 할 수 있다.

4. 태스크 : 태스크는 사용자가 취하는 경로나 과정을 보여준다.  이때 시나리오 기반의 태스크를 분석하게 된다.
 사용자가 앱을 이용하면서 경험하게 될 가상의 시나리오를 작성하고, 이를 바탕으로 서비스할 기능의 구조를
 사용자 입장에서 결정한다.

5. 태스크 다이어그램 작성 : 복잡한 인터렉션의 흐름을 도형으로 쉽게 파악할 수 있다는 것이 장점이다.

 

6. IOS와 안드로이드 운영체제의 장단점 비교 및 앱 개발 인터페이스 결정

7. 내비게이션

8. 사용자 피드백을 반영한 보완된 내비게이션