[정보처리기사 필기] 제1과목 소프트웨어 설계 - 화면 설계

 

 

UI: 사용자 인터페이스

 

 

1. 사용자 인터페이스(UI)

 

- 물리적인 제어를 어떻게 전달할 것인가

- 콘텐츠 표현과 전체적인 구성

- 편리하고 간편한 사용을 위한 기능

 

 

2. 사용자 인터페이스의 특징

: 사용자의 만족도에 가장 큰 영향을 미치는 요소

- 사용자 중심 설계

- 구체적 방법 제시

- 소프트웨어 아키텍처

 

 

3. 사용자 인터페이스의 구분

 

- CLI, Command Line Interface: 텍스트

- GUI, Graphic User Interface: 아이콘, 그래픽 환경

- NUI, Nutral User Interface: 말, 행동으로 기기 조작

 

 

4. 사용자 인터페이스 기본 원칙

 

- 직관성: 쉽게 이해할 수 있어야 한다.

- 유효성: 목적을 달성

- 학습성: 쉽게 배울 수 있어야 한다

- 유연성: 쉽게 바꿀 수 있어야 한다 -> 사용자 요구사항 수용

 

 

5. 사용자 인터페이스의 설계 지침

 

- 사용자 중심, 일관성, 단순성,

- 결과예측 가능, 가시성, 평준화

- 접근성, 명확성, 오류발생 해결

 

 

UI 표준

 

 

1. 웹 스타일 가이드 구성 사례

- 스타일 가이드: 각종 규칙들의 기준이 되는 집합

Introduction

Basic Rules: 폰트, 컬러 등

Layout 시안

Elements

 

 

2. 정책

웹 스타일 가이드 운영 정책

조직의 identity 유지 정책

 

 

3. 기본 환경

용량 규정

메인화면 전체 페이지 및 이미지 사이즈 등

 

 

4. 한국형 웹 콘텐츠 접근성 지침

인식의 용이성

운용의 용이성

이해의 용이성

견고성

 

 

5. 전자정부 웹 표준 준수 지침

내용의 문법 준수: 적절한 문서 타입, 문서타입에 맞는 문법 준수

내용과 표현의 분리: 논리적인 마크업 언어 사용, 표준적인 문법 준수

동작의 기술 중립성 보장: 비표준 문법 배제

플러그인의 호환성: 다양한 웹 브라우저에서 호환되는 플러그인 사용

콘텐츠의 보편적 표현: 다양한 브라우저 사용

운영체제에 독립적인 콘텐츠 제공: 운영체제에 종속적이지 않은 범용적인 포맷

부가 기능의 호환성 확보: ex. 실명인증, 전자인증

다양한 프로그램 제공: 다양한 브라우저에서 사용 가능

 

 

6. UI 지침

 

- UX 사용자 경험의 고려사항: 사용대상 환경 목적 빈도

- 핵심 기능의 고려사항: 메뉴 구조를 단순화하고 간결한 정보 제공

- 호환성 확장성의 고려사항: 3개 이상의 브라우저에서 동등한 서비스를 제공

- 정보 소외계층의 접근성: 장애인, 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침

- 일관성

- 이미지: 전송속도, 낮은 용량, 사회적 갈등을 유발하지 않는, 저작권 이슈가 없는

- 기타 설계 지침: 사용자 중심, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류발생 해결

 

 

UI 설계 도구

 

 

1. 와이어프레임 Wireframe

: 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대 설계

 

ex. 손그림, 파워포인트, 스케치, 일러스트, 포토샵

 

 

2. 목업 Mockup

: 시각적으로 구성 요소 배치

 

 

3. 스토리보드 Story Board

: 디자이너와 개발자가 최종적으로 참고하는 작업 지침서

 

 

4. 프로토타입

: 테스트가 가능한 동적인 형태의 모형

 

 

5. 유스케이스

: 사용자 측면에서의 요구사항

주로 다이어그램 형식으로 묘사

유스케이스, 유스케이스 명세서

 

 

UI 요구사항 확인

 

 

1. UI 요구사항 확인

목표 정의 > 활동 사항 정의 > UI 요구사항 작성

 

 

* 목표 정의: 인터뷰로 요구사항 정의

* 활동 사항 정의: 앞으로 해야 할 활동 사항 정의

* UI 요구사항 작성: 여러 사람의 인터뷰를 통해 다양한 의견 수렴

요구사항 요소 확인 > 정황 시나리오 작성 > 요구사항 작성

 

- 요구사항 요소 확인: 데이터 요구, 기능 요구, 제품/서비스 품질, 제약 사항

- 정황 시나리오 작성: 요구사항을 도출하기 위해 작성

- 요구사항 작성: 정황 시나리오를 토대로 작성

 

 

2. 품질 요구사항

 

- ISO/IEC9126: 기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성

- ISO/IEC25010: 기능적합성, 성느 효율성, 호환성, 사용성, 신뢰성, 보안성, 유지보수성, 이식성

 

 

3. UI 프로토 타입

: 실제 동작하는 것처럼 만든 동적인 형태의 모형, 테스트가 가능하다

 

 

4. UI 유용성 평가

: 얼마나 효과적으로 목적을 달성했는가

 

 

HCI / UX / 감성공학

 

 

1. HCI: Human Computer Interface

: 사람이 시스템을 어떻게 하면 편리하고 안정하게 사용할 수 있는지를 연구하는 것

 

최적 사용자 경험을 만드는 것

-> 사람과 컴퓨터 시스템 간의 상호 작용을 연구하고 설계하는 것으로, 사람이 컴퓨터를 편리하게 사용할 수 있도록 한다.

 

 

2. UX: User Experience 

: 사용자 경험

 

-> 주관성, 정황성, 총체성

 

 

3. 감성공학

:생체 측정 기술, 인간의 오감 센서 및 감성 처리 기술, 감성 디자인 기술, 새로운 감성을 창출하기 위한 기술

 

- 감성공학의 접근 방법

감성공학 1류: 인간의 감성 이미지를 측정하는 방법

감성공학 2류: 개인이 갖고 있는 이미지를 구체화하는 방법

감성공학 3류: 인간의 감각을 측정하고, 수학적 모델을 구축하여 활용