모바일 UI/UX디자인 [모바일 앱 UI 스토리보드]

UI스토리보드 작업 순서

STEP 1. 

기본 구성 페이지 중에서도 제일 중요한 것을 먼저 디자인한다.

작업의 순서로 보면, 1.메인 콘텐츠/메인 페이지를 우선한다.

사용자들이 제일 큰 가치로 여기는 콘텐츠/기능이 중심이 되어야 하기 때문이다.

앱 아이콘을 먼저 디자인할 것이 아니라 메인 콘텐츠부터 디자인해야한다.

STEP 2. 

나중에 작업할 것, 작업의 성격을 명확히 안다.

기획은 메인 콘텐츠/메인 페이지가 나온 후부터 진행한다.

초반에 앱 아이콘을 작업하면 바뀔 확률이 높다.

앱아이콘은 굉장히 중요하므로 작업의 시점과 작업 프로세스를 명확히 아는 것이 중요하다.

STEP 3. 

진행하는 프로젝트가 속한 카테고리의 일반적인 디자인 패턴을 참조하여 구성한다.

게임 카테고리라면, 유틸리티라면, SNS라면...리서치를 통해 카테고리별로 공통된 디자인 패턴을 파악해서 따를지 말지를 결정해야 한다. 

STEP 4. 

메인 페이지가 잘 진행되지 않는다면, 이전의 UI디자인 패턴을 통해 해결한다.

UI스토리보드 템플릿의 활용

· UI스토리보드 템플릿에 스케치 방식으로 작업한다.

· 앞에서 배운 작업 순서 및 주의사항을 참조하여 스케치를 시작한다.

-연필을 사용하여 작업하고, 컬러펜으로 네비게이션 등을 표시한다.

-표현은 와이어프레임으로, 가결하게 하는것이 좋다.

UI스토리보드를 활용한 리서치

· 벤치마킹 리서치 툴 목적의 사용

UI스토리보드를 활용하여 스케치로 다른 앱의 구조를 그린다면, 굉장히 짧은 시간 안에 앱의 전체적인 구조, 네비게이션, 목적 지향적 UI구조를 파악할 수 있다.

· 디자인 패턴 관점의 UI스토리보드 활용

페이지 구성 시 로그인, 회원 가입, 결제 프로세스 등과 같이, 트렌드 및 기술에 따라 사용자가 민감하게 반응하는 디자인 패턴 부분은, 해당 문제 부분이 무엇인지를 먼저 정의한 다음, 동일 카테고리의 앱이 아니더라도 해당 문제에 대한 답을 가지고 있는 앱의 특정 부분만 분석 비교함으로써 쉽게 문제에 대한 해답을 찾아낼 수 있다.

· 개인 분석용, 내부 목적용이라면 와이어프레임도 문제없다.

· UI스토리보드 구성시 퀄리티를 높여야 할 때가 있다.

외부 미팅용, 클라이언트 보고용, 자료보관용 등이 목적이라면 스크린샷으로 구성하는 것을 권장한다.

UI스토리보드, 템플릿을 활용한 실습

UI스토리보드 작업 단계

· UI스토리보드를 먼저 작업한다. 전체 구조를 파악할 수 있고, 작은 사이즈로 작업하게 도므로 디테일 보다는 주요 콘텐츠/기능에만 관심을 둘 수 있어서 작업 속도를 빠르게 할 수 있는 장점이 있다.

· 반드시 관련 정보를 먼저 기입하고 진행한다. 앱의 이름, 작성 날짜, 작성자, 앱 버전, 대상 디바이스 종류 등은 필수 사항들이다.

· 네비게이션, 그룹핑, 제스처-모션 등의 요소도 반드시 기입한다.

· 스룹핑, 페이지 네이밍도 기록한다. 각 페이지별로 어떠한 역할 혹은 디자인 패턴 명칭으로 불리울 지를 감안하여 네이밍하고, 여러페이지로 구성될 경우에는 그룹핑+네이밍 표시한다.

· 스케치에 문제가 생길경우 다시 그리지말고 포스트잇 활용한다.

메인 플로우 UI디자인 스케치

· UI스토리보드중, 메인페이지-메인 플로우 부분을 스마트폰 템플릿에 스케치한다. UI스토리보드를 통해 러프하게 그려진 레이아웃을 큰 사이즈로 그리면서 보다 구체화한다.

· 구체적으로 어느 부분을 어떻게 가지고 올 것인지 계획하고 진행한다. 결제, 로그인, 첫 진입시 앱 설명 등 고민을 많이 하는 부분은 빼와서 구체적으로 스마트폰 템플릿에 스케치한다.

· 네비게이션-인터랙션 디자인 부분을 컬러 펜으로 표시한다.

· 구체적인 사용자 유즈 케이스 혹은 시나리오를 작성하는 것도 큰 도움이 된다.