2025 정보처리기사 필기 도전기 10 - UI시나리오 문서 개요

UI시나리오 문서개요

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 Flows)	많은 기능들에 공통적으로 사용되는 삭제,검색,매너모드 상태 등에 대한 인터랙션 흐름을 설명함.
케이스 문서	다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의한 문서. ex)사운드,조명,이벤트 케이스 등

 

UI요소

체크박스 : 여러 개의 선택상황에서 1개 이상의 값을 선택할 수 있는 버튼

라디오 버튼 : 여러 항목 중 하나만 선택할 수 있는 버튼

텍스트 박스 : 사용자가 데이터를 입력하고 수정할 수 있는 상자

콤보 상자 : 이미 지정된 목록 상자에 내용을 표시하여 선택하거나 새로 입력할 수 있는 상자

목록 상자 : 콤보 상자와 같이 목록을 표시하지만 새로운 내용을 입력할 수 없는 상자

 

UI시나리오 문서의 요건

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

 

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

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

2. 개발 과정에서의 재작업이 감소하고, 혼선이 최소화됨

3. 불필요한 기능을 최소화함

4. 소프트웨어 개발 비용이 절감함.

5. 개발 속도를 향상함

 

HCI

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문으로, 최종 목표는 시스템을 사용하는 데 있어 최적의 사용자 경험(UX)을 만드는 것

원래 HCI는 사람과 컴퓨터의 상호작용을 연구해서 사람이 컴퓨터를 편리하게 사용하도록 만드는 학문이었으나, 대상이 컴퓨터뿐만 아니라 서비스, 디지털 콘텐츠 등으로, 사람도 개인뿐만 아니라 사회나 집단으로 확대되었음

HCI는 어떤 제품이 좋은 제품인지 어떻게 하면 좋은 제품을 만들 수 있는지 등을 연구함

 

UX

사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험을 말함.

단순히 기능이나 절차상의 만족뿐만 아니라, 사용자가 참여, 사용, 관찰하고 상호교감을 통해서 알 수 있는 기치 있는 경험을 말함

UX는 기술을 효용성 측면에서만 보는 것이 아니라 사용자의 삶의 질을 향상하는 하나의 방향으로 보는 새로운 개념임

UI가 사용자, 접근성, 편의성을 중시한다면 UX는 이러한 UI를 통해 사용자가 느끼는 만족이나 감정을 중시함

 

UX의 특징

주관성 : 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적임

정황성 : 경험이 일어나는 상황 또는 주변 환경에 영향을 받음

총체성 : 개인이 느끼는 총체적인 심리적, 감성적인 결과임

 

감성공학

제품이나 작업환경을 사용자의 감성을 알맞도록 설계 및 제작하는 기술로, 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합과학임

감성을 과학적으로 측정하기 위해서는 생체계측 기술, 감각계측 기술센서, 인공지능, 생체제어 기술 등이 요구됨

감성공학의 목적은 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것

감성공학은 인간의 감성을 구체적으로 제품 설계에 적용하기 위해 공학적인 접근 방법을 사용함.

감성공학은 인간과 컴퓨터의 상호작용을 나타내는 HCI(Human Computer Interaction or Interface) 설계에 인간의 특성과 감성을 반영하였음

 

감성공학의 요소기술

1. 기반기술 : 제품 설계에 작용할 인간의 특성을 파악함

2. 구현기술 : 인간의 특징에 맞는 인터페이스를 구현함

3. 응용기술 : 인간에 맞는지 파악하여 새로운 감성을 만듦