UI 상세 설계 - UI 시나리오 작성, UI 시나리오 작성 규칙, UI 시나리오 작성시 고려 사항

CODEDRAGON Development/UI&UX

반응형

 

 

UI 상세 설계

·       UI 시나리오 작성

·       UI 시나리오 작성 규칙

·       UI 시나리오 작성시 고려 사항

 

 

UI 시나리오 작성

·       UI 상세 설계의 첫 단계는 시나리오 문서의 작성이다. 전체 기능을 한 번에 확인하고 이해할 수 있도록 기능 구조를 만들게 되는데, 보편적으로 계층 구조 또는 플로차트 형태로 작성하게 된다.

·       모든 기능에 대해서 공통적으로 적용되는 UI 요소와 사용자와의 상호 작용에 대한 일반적인 규칙을 정의한다.

·       사용자와 화면과 화면의 상호 작용에 대한 흐름과 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 을 명시한다.

·       UI에 대한 일반 규칙을 준수하고 각 기능의 상세 시나리오를 작성한다.

 

 

 

UI 시나리오 작성 규칙

UI 시나리오 작성을 위한 일반적인 규칙

작성 규칙

설명

주요 버튼의 위치와 기능

화면에서 공통으로 배치되는 주요 버튼들의 위치와 기능을 설명하는 것으로 화면들에 대한 일관성을 보장한다.

공통 UI 요소

다양한 형태의 입력 폼(일반 버튼, 체크 박스, 라디오 버튼, 텍스트 입력, 탭 등)과 각 UI 요소들에 대해 언제 사용되는지, 어떤 형태를 갖는지를 정의하며 사용자의 조작에 대해 어떻게 반응하는지를 설명한다.

기본 레이아웃

여러 화면에 공통적으로 나타나는 제목, 버튼들, 인디케이터 등의 위치와 속성을 설명한다.

기본 상호 작용 규칙

공통적으로 사용되는 조작 방법과 실행, 이전, 다음 등과 같은 화면 전환효과 등에 대해 설명한다.

공통 단위의 테스크 흐름

대다수의 기능에 공통적으로 사용되는 삭제, 검색 등에 대한 반응 흐름을 설명한다.

 

 

 

UI 시나리오 작성시 고려 사항

고려사항

설명

완전성

(Complete)

누락되는 것이 없도록 최대한 상세하게 기술해야 하며 해당 시스템보다는 사용자의 사용 방법에 기초하여 작성해야 한다.

일관성

(Consistent)

전체 화면과 UI 요소들은 일관성을 갖고 있어야 한다.

가독성

(Readable)

표준화된 템플릿 등을 활용하여 작업자 간에 문서 통한 소통이 원활하여야 하며 문서를 쉽게 읽을 수 있어야 한다.

이해성(Understandable)

추상적이거나 보편적으로 사용하지 않고 이해하기 어려운 용어의 사용은 피한다.

수정 용이성

(Modifiable)

수정이나 개선 사항에 대해서 시나리오에 반영하는 것이 쉬워야 한다.

추적 용이성

(Traceable)

변경 사항에 대해서 언제, 어떤 부분이 어떤 이유로 변경 되었는지에 대해 쉽게 추적할 수 있어야 한다.