2장 - 화면설계 | 섹션14. UI 상세 설계, 섹션15. HCI / UX / 감성공학

2024년도 시나공 필기 책 내용 정리

---

섹션14. UI 상세 설계

 

1. UI 시나리오 문서 개요

 

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

---

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

 

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

---

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

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

 

UI 요소

 

• 체크박스(Check Box) : 여러 개의 선택 상황에서 1개 이상의 값을 선택할 수 있는 버튼
• 라디오 버튼(Radio Buttion) : 여러 항목 중 하나만 선택할 수 있는 버튼
• 텍스트 박스(Text Box) : 사용자가 데이터를 입력하고 수정할 수 있는 상자
• 콤보 상자(Combo Box) : 이미 지정된 목록 상자에 내용을 표시하여 선택하거나 새로 입력할 수 있는 상자
• 목록 상자(List Box) : 콤보 상자와 같이 목록을 표시하지만 새로운 내용을 입력할 수 없는 상자

---

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

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

---

섹션15. HCI / UX / 감성공학

 

1. HCI(Human Computer Interaction or Interface)

 

• 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
• 최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경험(UX)을 만드는 것
• 원래 HCI 사람과 컴퓨터의 상호작용을 연구해서 사람이 컴퓨터를 편리하게 사용하도록 만드는 학문이였으나 대상이 컴퓨터뿐만 아니라 서비스, 디지털 콘텐츠 등으로 사람도 개인뿐아니라 사회나 집단으로 확대 되었음
• 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들 수 있는지 등을 연구

---

2. UX(User Experience)

 

• 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
• 단순히 기능이나 절차상의 만족뿐 아니라 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치 있는 경험을 말함
• 기술을 효용성 측면에서만 보는 것이 아니라 사용자의 삶의 질을 향상시키는 하나의 방향으로 보는 새로운 개념
• UI가 사용성, 접근성, 편의성을 중시한다면 UX는 이러한 UI를 통해 사용자가 느끼는 만족이나 감정을 중시

UX의 특징

 

• 주관성(Subjectivity) : 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적
• 정황성(Contextuality) : 경험이 일어나는 상황 또는 주변 환경에 영향을 받음
• 총체성(Holistic) : 개인이 느끼는 총체적인 심리적, 감성적인 결과

---

3. 감성(사용자가 제품을 사용한 경험을 통해 얻은 복합적인 감각) 공학

 

• 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술로 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합과학
• '감성'을 과학적으로 측정하기 위해서는 생체계측 기술, 감각계측 기술, 센서, 인공지능, 생체제어 기술 등이 요구됨
• 목적은 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것을 목적으로 함
• 인간의 감성을 구체적으로 제품 설계에 적용하기 위해 공학적인 접근 방법을 사용함
• 인간의 신체적, 정식적 특성을 배려한 제품 설계에서 더 나아가 인간의 감성까지 고려하고 HCI 설계에 인간의 특성과 감성을 반영한 것
• 개인이 느끼는 총체적인 심리적, 감성적인 기능에 해당 됨

감성공학의 요소기술

 

• 기반 기술 : 제품 설게에 적용할 인간의 특성을 파악
• 구현 기술 : 인간의 특성에 맞는 인터페이스를 구현
• 응용 기술 : 인간에 맞는지 파악하여 새로운 감성을 만듦