UI 상세 설계

clay·2023년 1월 20일

소프트웨어 설계 정보처리기사

소프트웨어 설계

목록 보기

20/39

UI 시나리오 문서 개요

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

UI 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것이다.
UI 설계자 또는 인터랙션 디자이너가 UI 시나리오 문서를 작성하면 그래픽 디자이너가 시나리오를 바탕으로 디자인을 하고 개발자가 UI를 구현한다.
UI 설계자 또는 인터랙션 디자이너가 UI 시나리오 문서를 작성하면 그래픽 디자이너가 시나리오를 바탕으로 디자인을 하고 개발자가 UI를 구현한다.

UI 시나리오 문서 작성 원칙

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

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

UI 시나리오 문서를 작성하면서 적용할 일반적인 규칙은 다음과 같다.

주요 키의 위치와 기능

모든 화면에 공통적으로 배치되는 주요 키의 위치와 기능을 설명한 것으로, 여러 화면 간의 일관성을 보장한다.

공통 UI 요소

체크 박스, 라디오 버튼, 텍스트 박스 등의 UI 요소를 언제, 어떤 형태로 사용할 지를 정의하고, 사용자가 조작하면 어떻게 반응하는지 그 흐름을 설명한다.

기본 스크린 레이아웃

모든 화면에 공통적으로 나타나는 Title, Ok/Back, Soft Key, Option, Functional Buttons 등의 위치와 속성을 정의한다.

기본 인터랙션 규칙

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

공통 단위 태스크 흐름

많은 기능들에 공통적인 사용되는 삭제, 검색, 매너 모드, 상태 등에 대한 인터랙션 흐름을 설명한다.

케이스 문서

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

UI 시나리오 문서의 요건

완전성(Complete)

누락되지 않도록 최대한 상세하게 기술해야 한다.

해당 시스템의 기능보다는 사용자의 태스크에 초점을 맞춰 기술한다.

일관성(Consistent)

서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지해야 한다.

이해성(Understadable)

누구나 쉽게 이해할 수 있도록 설명한다.

불분명하거나 추상적인 표현은 피한다.

가독성(Readable)

표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 해야 한다.

v1.0, v2.0 등과 같이 문서 인덱스에 대한 규칙이나 목차를 제공한다.

읽기 쉽도록 줄 간격, 단락, 들여쓰기 등의 기준을 마련한다.

시각적인 효과를 위해 여백이나 빈 페이지, 하이라이팅을 일관성 있게 지정한다.

하이퍼링크 등을 지정하여 문서들이 서로 참조될 수 있도록 지정한다.