|UI 상세 설계

• UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한자세한 설계를 진행하는 단계
• 반드시 시나리오를 작성해야함

|UI 시나리오 문서 개요

• 사용자 인터페이스 기능 구조, 대표 화면, 화면 간 인터렉션 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것
• 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사되어 있다.
• UI설계자 또는 인터렉션 디자이너가 UI시나리오 문서를 작성하면 그래픽 디자이너가 시나리오를 바탕으로 디자인을 하고 개발자가 UI를 구현

|UI 시나리오 문서 작성 원칙

• 개발자가 전체적인 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성
• 계층(Tree) 구조 또는 플로차트(Flow Chart) 표기법으로 작성
• 모든 기능에 공통적으로 적용될 UI 요소와 인터랙션을 일반 규칙으로 정의
• 대표 화면의 레이아웃과 그 화면에 속할 기능을 정의
• 인터랙션 흐름을 정의하며, 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop)등을 명시
• 예외 상황에 대비한 다양한 케이스를 정의
• UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의
• UI 시나리오 규칙을 지정

|UI 시나리오 문서 작성을 위한 일반 규칙

• 여러 화면간의 일관성을 보장 | | 공통 UI 요소 | - 체크 박스, 라디오 버튼, 텍스트 박스 등의 UI 요소를 어떤 형태로 사용할 지를 정의
• 사용자가 조작하면 어떻게 반응하는지 그 흐름을 설명 | | 기본 스크린 레이아웃 (Basic Screen Layouts) | - 모든 화면에 공통적으로 나타나는 Titles, Ok/Back, Soft Key, Option, Functional Buttons 등의 위치와 속성을 정의 | | 기본 인터랙션 규칙 (Basic Interaction Rules) | - 터치 제스처 등에 공통적으로 사용되는 조작 방법과 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등을 기술 | | 공통 단위 태스크 흐름 (Task Flow) | - 많은 기능들에 공통적으로 사용되는 삭제, 검색, 매너 모드 상태 등에 대한 인터랙션 흐름을 설명 | | 케이스 문서 | 다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의한 문서 |

|UI 시나리오 문서의 요건

| 완전성 Complete | - 누락되지 않도록 최대한 상세하게 기술

• 해당 시스템의 기능보다는 사용자의 태스크에 초점을 맞춰 기술 | | --- | --- | | 일관성 Consistent | - 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지 | | 이해성 Understandable | - 누구나 쉽게 이해할 수 있도록 설명
• 불분명하거나 추상적인 표현은 피함 | | 가독성 Readable | - 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 해야 함
• v1.0, v2.0 등과 같이문서 인덱스에 대한규칙이나 목차를 제공
• 읽기쉽도록 줄 간격, 단락, 들여쓰기 등의 기준을 마련
• 시각적인 효과를 위해 여백이나 빈 페이지, 하이라이팅을 일관성 있게 지정
• 하이퍼링크 등을 지정하여 문서들이 서로 참조될 수 있도록 지정 | | 수정 용이성 Modifiable | - 시나리오의 수정이나 개선이 쉬워야 함 | | 추적 용이성 Traceable | - 변경 사항은언제, 어떤 부분이, 왜 발생했는 지 쉽게 추적할 수 있어야 함 |