12. UI 스토리보드 작성과 UI 상세설계 가이드

1. 스토리보드(Storyboard)의 이해 

 - Storyboard란, UX구현에 수반되는 사용자와 목표, 인터페이스 간 상호작용을 시각화하여, 

   개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험을 

   미리 보기 위한 방법론 

2. UI 스토리보드의 목적 

 - 모바일앱에 필요한 기능 조각들 간 관계의 설계 

 - 앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립하는 과정

 - 실제 개발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정 

 - 사용자 시나리오를 시각화하면서 평가하는 과정

 - 사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악

 - 개발자와 사용자 간의 피드백을 받으면 스토리보드를 재정비

3. UX 스토리보드의 구성요소 

 - Feature list : UX concept/UX Needs의 구현에 필요한 기능 리스트

 - User Task-flow : 해당 기능수행과 사용자의 행위 매핑 및 흐름도

 - Information Architecture(IA) : 정보의 구조화와 위계관계망(우선순위)

 - Wireframe : 해당기능 구현을 위한 인터페이스 요소의 배치와 화면 구조 

 - Workflow : 여러 개의 와이어프레임 또는 개별 기능 간 화면 전환 흐름도 

4. UI 상세 화면 설계 프로세스 

 1) UI feature 리스트 작성 단계 

  - UI 구현에 수반되는 앱시스템, 서비스, 장치 등 인터페이스 Feature 목록 나열하고 앱 개발에 

     필요한 기능들을 추출하고 우선순위를 정의하는 단계 

  - 사용자의 Needs를 충족시키기 위한 앱의 기능들을 나열

  - 우선순위 설정 방법에 따라 기술된 기능의 우선순위를 정함

  - 기능간의 포함관계를 고려하여 삭제 및 추가

  - 정의된 기능들에 대해 우선순위를 설정

 2) User Task-Flow 작성 단계

  - 기능수행을 위한 사용자의 행위 순서(흐름)로 나열하고 검증하는 단계 

 3) Process Diagram 작성 단계 

  - 각 기능들 사이 관계(조건과 실행)를 정립하여 구조화하는 단계 

 4) IA(Information Architecture) 구조화 단계

  - 각 기능들을 정보의 위계와 관계망으로 구조화

  5) Wireframe 설계 단계

  - 해당기능 구현을 위한 인터페이스와 실제 화면에 그림 

 6) Workflow 설계 단계

  - 화면전환 및 화면 간 상호작용 및 시뮬레이션