[1과목-2장-018] UI 상세 설계

* UI 상세 설계: UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계

- 반드시 시나리오를 작성해야 함

 

* UI 시나리오 문서

- 포함되는 것

1) 사용자 인터페이스의 기능 구조

2) 대표 화면

3) 화면 간 인터랙션 흐름

4) 다양한 상황에서의 예외 처리

- 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사

 

* 역할

* UI 설계자 or 인터랙션 디자이너 > UI 시나리오 문서 작성

* 그래픽 디자이너 > 시나리오 바탕으로 디자인

* 개발자 > UI 구현

 

1. UI 시나리오 문서 작성 원칙

1) 개발자가 전체적 UI 기능과 작동 방식을 한 눈에 이해할 수 있도록 구체적으로 작성 (by 계층구조 or 플로차트 표기법)

2) 모든 기능에 공통으로 적용될 UI 요소와 인터랙션을 일반 규칙으로 정의

3) 레이아웃, 기능 정의

4) 인터랙션의 흐름 정의, 화면 간 인터랙션의 순서/분기/조건/루프 등을 명시

5) 예외 상황에 대비한 다양한 케이스를 정의

6) UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의

7) UI 시나리오 규칙을 지정

 

 

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

1) 주요 키의 위치와 기능

: 여러 화면 간 일관성을 보장

 

2) 공통 UI 요소

: UI 요소를 언제, 어떤 형태로 사용할지를 정의, 어떻게 반응하는지 그 흐름을 설명

 

3) 기본 스크린 레이아웃

: Titles, Ok/Back, Soft Key, Option, Functional Buttons 등의 위치와 속성을 정의

 

4) 기본 인터랙션 규칙

: 터치 제스처 등에 공통적으로 사용되는 조작 방법과 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등을 기술

 

5) 공통 단위 태스크 흐름

: 삭제, 검색, 매너 모드 상태 등에 대한 인터택션 흐름을 설명

 

6) 케이스 문서

: 다양한 상황에서 공통 적용되는 시스템 동작을 정의한 문서

ex. 사운드, 조명, 이벤트 케이스 등

 

 

** UI 요소

1) 체크 박스

2) 라디오 버튼

3) 텍스트 박스

4) 콤보 상자

5) 목록 상자

 

3. UI 시나리오 문서의 요건

1) 완전성(Complete)

- 누락되지 않도록 상세하게

- 기능보다는 사용자의 태스크에 초점

 

2) 일관성(Consistent)

- 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등 일관성 유지

 

3) 이해성(Understandable)

- 불분명 X, 추상적 X

 

4) 가독성(Readable)
- 표준화된 템플릿 등을 활용하기

- 문서 인덱스에 대한 규칙, 목차 제공

 

** 템플릿: 화면의 기본 레이아웃 형태

 

5) 수정 용이성(Modifiable)

: 시나리오 수정, 개선이 쉬워야 함

 

6) 추적 용이성(Traceable)

: 변경 사항은 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야 함

 

 

4. UI 시나리오 문서로 인한 기대 효과

1) 요구사항이나 의사소통에 대한 오류 감소

2) 개발 과정에서의 재작업 감소, 혼선 최소화

3) 불필요 기능 최소화

4) SW 개발 비용 절감

5) 개발 속도 향상