11. UI 시나리오 문서의 이해와 GUI 디자인

1. UI 시나리오의 해석

 1) Story Board

  - 이미지는 사각형에 X, 아이콘은 원, 아바타는 원 안에 사람형태로 표시

  - GUI 디자인, 개발 상 메시지는 구분해서 전달

  

 2) 운영체제 가이드라인 

  - 운영체제 별 다양한 컴포넌트와 콘텐츠 디자인 가이드가 존재

  - Android는 9 Patch, iOS는 Auto-Layout으로 디자인하므로 디자인 전에 이를 확인하고 진행

  - 컬러의 사용, 아이콘 형태, 레이아웃 등 GUI의 모든 시각적 요소는 동일하게 적용되어야 함

 

2. GUI 리서치 및 무드 보드 작성

 1) GUI 리서치의 이해

  - 주변 문제 해결 사례 및 경쟁업체 동향, 디자인 특징 리서치 진행

  - 문제 해결에 대한 방향성은 리서치를 진행하되 이를 풀어내는 구체적인 방법이나 디자인 차별점은

    경쟁 포인트를 잡아 구성

 2) 무드보드 

  - 영감을 얻거나 구체적인 사례가 필요할 경우 이미지, 텍스트, 샘플 등을 조합해서 콜라주하는 보드

  - 직접적인 연관이 없더라도 이를 통해 받은 영감을 추후 반영할 수 있음

  - 실제 출력물, 혹은 파워포인트도 가능하나 한 곳에 보아서 볼 수 있어야 하고 특정 주제로 묶어놓아야

    추후 참조 시 용이 

  - 대표적인 무드보드: https://kr.pinterest.com/, https://mural.co/

3. 디자인 스타일 가이드 문서 작성

 

 1) 필요성

  - GUI 구성 상 일관성, 규칙성을 정리

  - 인수인계, 여러사람이 동시 작업할 경우 Tone & Manner 유지 용이

  - 단, 디자인 초기단계에 작성하는 것은 수정 시 비효율적이기에 디자인이 어느정도 확정된 후

    작성하는 것이 유리

 2) 예시