[정보처리기사][화면 설계] 사용자 인터페이스 (UI : User Interface)

사용자 인터페이스 - UI : User Interface

사용자와 시스템 간의 상호작용이 원활하게 이루어지도록 도와주는 장치 또는 소프트웨어

 

• UI의 분류
  • 정보 제공과 전달을 위한 물리적 제어에 관한 분야
  • 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
  • 모든 사용자가 편리하고 간편하게 사용할 수 있도록 하는 기능에 관한 분야

1. UI의 구분

• CLI(Command Line Interface) - 명령과 출력이 텍스트의 형태로 구성
• GUI(Graphical User Interface) - 아이콘이나 메뉴등을 선택하는 그래픽 환경의 구성
• NUI(Natural User Interface) - 음성인식, 행동등으로 구성

2.UI의 기본 원칙

• 직관성 - 누구나 쉽게 이해하고 사용할 수 있어야 한다.
• 유효성 - 사용자의 목적을 정확하고 완벽하게 달성해야 한다.
• 학습성 - 누구나 쉽게 배우고 익힐 수 있어야 한다.
• 유연성 - 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다.

 

UI 설계 도구

UI를 설계하는 대표적인 설계 도구

• 와이어프레임 (Wireframe)
• 목업 (Mockup)
• 스토리보드 (Story Board)
• 프로토타입 (Prototype)
• 유스케이스 (Use Case)

1. 와이어프레임 - Wireframe

페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 도구

• 기획 초기에 제작한다.
• 개발자와 디자이너등이 소통 및 공유하기 위해 주로 사용한다
• 화면단위로 페이지의 구분, 콘텐츠, 텍스트 배치등을 설계한다.
• 주로 사용되는 툴로는 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등등

 

2. 목업 - Mockup

와이어프레임보다 더 실제 화면과 유사하게 만든 정적인 형태의 모형

• 디자인, 사용방법, 평가등을 위해 만든다.
• 시각적 목적의 모형이지 실제 구현은 되지 않는다.
• 주로 사용되는 툴로는 파워목업, 발사믹 목업 등등

3. 스토리보드 - Story Board

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름등을 추가한 문서

• 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
• 서비스 구축을 위한 모든 정보가 들어가 있다.
• 주로 사용되는 툴로는 파워포인트, 키노트, 스케치 등등

4. 프로토타입 - Prototype

실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

• 페이퍼 프로토 타입
  • 아날로그적인 방법
  • 그림, 글등 직접적으로 제작하는 방법
  • 제작기간이 짧거나, 비용이 적을 경우 주로 사용
• 디지털 프로토 타입
  • 프로그램을 이용하는 방법
  • 재사용이 필요하거나 산출물과 비슷한 효과가 필요한 경우
  • 비용이 많이 소비되며 전문가가 필요함

5. 유즈케이스 - Use Case

사용자의 요구사항을 기능 단위로 표현하는 것

• 사용자의 요구사항을 달성하기 위한 내용을 기술한다.
• 프로젝트 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화하는 과정
• 일반적으로 다이어그램 형식으로 묘사된다.

UI 설계과정

1.UI 설계서 작성

UI설계를 구체화하여 작성하는 행위

• 순서
  1. UI 설계서 표지 작성
  2. UI 설계서 개정 이력 작성
  3. UI 요구사항 정의서 작성
  4. 시스템 구조 작성
  5. 사이트 맵 작성
  6. 프로세스 정의서 작성
  7. 화면 설계

2.UI 흐름 설계

업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계

• 순서
  1. 기능 작성
  2. 입력 요소 확인
  3. 유스케이스 설계
  4. 기능 및 양식 확인

3.UI 상세 설계

실제 설계 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계

반드시 시나리오 작성이 필요하다.

 

• 순서
  1. 요구사항 확인
  2. UI 설계서 표지 및 개정 이력 작성
  3. UI 구조 설계
  4. 메뉴 구조 설계
  5. 화면 설계

3.1 UI 시나리오 문서

UI의 기능 구조, 대표화면, 화면 간 인터랙션의 흐름 다양한 상황에서의 예외처리등을 정리한 문서

 

• 주요 요건
  • 완전성(Complete) - 누락되지 않도록 상세하게 기술해야 함
  • 일관성(Consistent) - 목표, 요구사항 UI스타일등이 일관성을 유지해야 함
  • 이해성(Understandable) - 누구나 쉽게 이해해야 함
  • 가독성(Readable) - 표준화를 통해 누구나 쉽게 문서를 읽을 수 있어야 함
  • 수정 용의성(Modifiable) - 수정 개선이 쉬어야 함
  • 추적 용의성(Traceable) - 변경 사항의 시점, 부분, 이유 등을 쉽게 추적할 수 있어야 함.

HCI - Human Computer Interaction or Interface

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구 개발하는 학문

시스템을 사하는 사용자에게 최적의 경험(UX)을 만드는 것이 목표

 

UX - User Experience

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

• UI는 사용성, 접근성, 편의성을 중시한다.
• UX는 사용자가 느끼는 만족이나 감정을 중시한다.
• UX는 기술적 측면이 아니라 사용자의 삶의 질을 향상하는 하나의 방향으로 보는 개념

1.UX의 특징

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

감성공학

제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술