정처기 필기 요약 - 화면 설계

사용자 인터페이스

사용자와 시스템 간의 상호작용을 원할 하게 도와주는 장치나 소프트웨어

 

사용자 인터페이스의 3가지 분야

- 정보 제공과 전달을 위한 물리적 제어에 관한 분야

- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야

- 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

 

사용자 인터페이스의 특징

사용자의 만족도에 가장 큰 영향

소프트웨어 영향 중 변경이 가장 많이 일어나는 부분

유저 인터페이스가 잘되어 있다면 작업시간이 줄어들고 업무 이해도가 높아진다 또한 최소한의 노력으로 원하는 결과, 정보를 얻게 되고 수집자와 공급자 간의 매개역할을 한다.

 

사용자 인터페이스의 구분

- CLI (Commend Line Interface) : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스

- GUI (Graphic User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 인터페이스

- TUI (Text User Interface) : 문자를 의미의 표현 뿐 아니라 레이아웃의 표현에도 이용

- NUI (Natural User Interface) : 말이나 행동으로 조작하는 인터페이스

- WUI (Web User Interface) : 인터넷, 웹브라우저의 인터페이스

 

 

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

직관성

유효성 : 사용자의 목적을 정확하고 완벽하게 수행 가능

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

유연성 : 사용자의 요구를 최대한 수용하고 요류가 있어도 해결 가능해야함

 

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

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

결과 예측 가능, 가시성 (기능 노출), 표준화

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

 

 

UI 표준 및 지침

UI 표준과 지침을 토대로 기술의 중립성(표준), 보편적 표현 보장성(접근성), 기능의 호환성이 고려되었는지 확인

 

한국형 웹 콘텐츠 접근성 지침 (KWCAG)

장애인과 비장애인이 동등하게 접근할 수 있는 웹 콘텐츠 제작의 방법 제시

 

웹 콘텐츠 접근성 지침 준수를 위한 고려사항

- 인식의 용이성

: 대체 텍스트 제공, 멀티미디어 대체 수단 제공, 콘텐츠를 명료하게 전달

- 운용의 용이성 

: 키보드만으로 접근 가능, 충분한 시간 제공, 광과민성 발작 예방, 콘텐츠를 쉽고 편리하게 내비게이션 할 수 있어야 함

- 이해의 용이성

: 읽고 이해하기 쉬움, 기능과 실행결과가 예측 가능,선형 구조로 작성되고 논리적인 순서를 제공, 입력오류를 방지하고 정정할 수 있음

- 견고성

: 마크업 언어의 문법을 준수, 접근성이 있음 

 

내비게이션 : 사용자가 사이트에서 원하는 정보를 빠르게 찾도록 도와주는 장치

 

전자정보 웹 표준 준수 지침

정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약

 

전자정부 웹 표준 준수 지침 사항

- 내용의 문법 준수 (표준 문법 준수)

- 내용과 표현의 분리 (웹 문서 구조화)

- 동작의 기술 중립성 보장

- 플러그인의 호환성

- 콘텐츠의 보편적 표현

- 운영체제에 독립적인 콘텐츠 제공

- 부가 기능의 호환성 확보

- 다양한 프로그램 제공

 

사용자 경험 (UX) 의 고려사항

사용대상, 환경, 목적, 빈도

 

핵심기능의 고려사항

메뉴 구조를 단순화하고 간결한 정보제공

 

호환성 확장성의 고려사항

3개 이상의 브라우저에서 동등한 서비스를 제공

 

정보 소회계층을 접근성

장애인, 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침

 

일관성

이미지 (전송속도, 용량, 사회적 갈등을 없는 이미지로, 저작권)

 

UI 설계 도구

사용자의 요구사항에 맞게 UI를 설계할 때 사용하는 도구

 

와이어 프레임

기획 초기 단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소들에 대한 뼈대를 설계

와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

목업

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

목업 툴 : 파워 목업, 발사믹 목업 등

 

스토리보드

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

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

서비스 구축을 위한 모든 정보가 담겨 있어야 함

스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

작성 절차

1. 메뉴 구성도 만들기

2. 스타일 확정

3. 설계

 

프로토타입

와이어프레임이나 스토리보드 등에 인터렉션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

작성 방법에 따라 페이퍼/디지털 프로토타입으로 나눔

프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

유스케이스

사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술

 

 

UI 요구사항 확인

새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계

 

1. 목표 정의

사용자들을 대상으로 인터부를 하고 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의

인터뷰 진행 시 유의사항

- 사업적, 기술적, 요구사항을 명확히 이해

- 가능한 개별적인 진행

- 한 시간을 넘기지 않는 게 좋음

- 사용자 리서치 시작 전에 해야 함

 

2. 활동사항 정의

- 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의

- 기술의 발전 가능성을 파악하고 UI 디자인의 방향 제시

 

3. UI 요구사항 작성

여러 경로로 수집된 사용자의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성해야 함

실 사용자 중심으로 작성

여러 사람의 인터뷰를 통해 다양한 의견을 수렴하여 작성

전체적인 구조를 파악 & 검토

 

작성 과정

- 요구사항 요소 확인

파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토

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

 

- 정황 시나리오 작성

사용자의 요구사항을 도출하기 위해 작성

사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사

개발하는 서비스의 모습을 상상하는 첫 번째 단계로 사용자 관점에서 시나리오를 작성해야 함

 

- 요구사항 작성

정황 시나리오를 토대로 작성

 

 

품질 요구사항

소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는 가를 나타내는 것

 

ISO/IEC 9126

: 국제 표준으로 소프트웨어 품질 특성과 평가를 위한 표준 지침

기능성, 신뢰성, 사용성, 유지보수성, 이식성

ISO/IEC 25010 의 품질 특성 : 기능성, 사용성, 유지보수성, 이식성, 기능 적합성, 실행 효율성, 호환성, 보안성

 

 UI 프로토타입 제작 및 검토

사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형

테스트 가능

최대한 간단하게 만들어야 함

일부 핵심적인 기능을 제공하지만 최종 제품의 작동방식을 이해시켜줄 기능은 반드시 포함되어야 함

실제 사용자를 대상으로 테스트해야 함

 

UI 프로토타입의 장단점

장점

- 사용자를 설득, 이해시키기 쉬움

- 요구사항을 점검하며 혼선은 예방함으로써 개발 기간을 줄일 수 있음

- 사전 오류 검출 가능

단점

- 프로토타입 제작으로 인해 작업 시간을 증가시킬 수 있음

- 필요 이상의 자원 소모 가능

- 부분적으로 작업 시 중요한 작업이 생략될 수 있음

 

프로토타이핑의 종류

페이퍼 프로토타입

- 아날로그 방법(스케치, 글, 그림) 등을 이용하여 직접 작성

- 제작 지간이 짧고, 제작 비용이 적을 경우, 업무 회의가 빠를 경우, 급하게 만들어야 하는 경우 사용

- 테스트 하기 부족, 상호관계가 많은 경우 나타내기 복잡, 공유 불편

 

디지털 프로토타입

- 프로그램을 사용하여 작성

- 재사용이 필요하거나, 완성 제품과 비슷하게 만들어야 하거나, 숙련된 전문가가 있을 때 사용

- 최종 제품과 비슷하게 테스트 가능

- 사용법을 알아야 함

 

UI 프로토타입 계획 및 작성 시 고려사항

계획 시 고려사항

- 개발 목적, 환경 마련, 일정 마련

- 일정 아키텍처가 확정되고 프로젝트 실제 분석 작업 완료 사이에 진행해야 함

- 프로토타입을 통해서 발생하는 이슈를 모두 취합하여 해결 방법을 제시

- 진행하면서 가장 많은 시간이 소요된 구간을 찾아 그 원인을 분석하여 해결방법을 제시

 

작성 시 고려사항

- 프로젝트의 상황을 감안해서 프로토타입의 범위를 정해야 함

- 완성된 프로토타입이 실제 개발에 참조될 수 있는지 확인

- 최소한의 기간, 비용 고려

 

UI 프로토타입 제작 단계

1 단계

사용자의 요구사항을 분석

기본적인 요구사항이 확정될 때까지 수행

 

2단계

실제 도구를 이용하여 작성

핵심적인 기능을 중심으로 개발

 

3단계

사용자가 요구사항을 잘 수행하는지 확인

다양한 추가 및 수정 의견을 제안할 수 있음

 

4단계

작성된 프로토타입을 기반으로 수정, 합의

개발자는 사용자가 요청한 제안 사항을 수용하여 보완 작업

(사용자가 승인 할 때까지 3~4단계 반복)

 

 

UI 설계서 작성

사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서

 

UI 설계서 작성 순서

1. 표지 작성 

: 다른 문서와 혼동되지 않도록 시스템명 또는 프로젝트 명을 포함시킴

 

2. 개정 이력 작성

: UI 설계서가 수정될때마다 어떤 내용이 수정되었는지를 정리한 문서

초안 작성 V1.0

수정 시 마다 0.1씩 높여간다

 

3. 요구사항 정의서 작성 

: 사용자의 요구사항을 확인하고 정리한 문서

UI 적용 여부를 요구사항 별로 작성

 

4. 시스템 구조 작성

: UI 요구사항 및 UI 프로토 타입에 기초하여 전체 시스템의 구조를 설계

 

5. 사이트 맵 작성

: 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 메뉴별로 구분하여 설계

표 형태로 작성

 

6. 프로세서 정의서 작성

: 사용자의 관점에서 사용자가 요구하는 프로세스를 작업 순서에 따라 작성하여 UI 전체적인 흐름을 파악할 수 있음

 

7. 화면 설계

: UI 프로토타입 및 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계

 

 

UI 유용성 평가

유용성 : 시스템에서 원하는 목표를 얼마나 효과적으로 달성했는지

UI는 유용성이 뛰어난 UI를 제작하는 것이 목표

 

실행차를 줄이기 위한 UI설계 원리 검토

사용 의도 파악 : 사용자의 목적을 파악해서 불필요한 기능이나 중복되는 기능이 없는지 확인

행위 순서 규정 : 행위 순서 세분화

행위의 순서대로 실행 : 프로세스의 흐름을 적접적으로 파악할 수 있도록 제공, 사용자가 행위 순서대로 실행할 때 어려움이 없도록

 

평가차를 줄이기 위한 UI설계 원리 검토

수행한 키 조작의 결화를 사용자가 빠르게 지각하도록 유도

키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도

 

 

UI 상세 설계

UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행

시나리오를 작성해야 함

사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 상호작용의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리

 

UI 시나리오 문서 작성 원칙

설계자 -> 디자이너 -> 개발자가 전체 UI 기능과 작동방식을 이해할 수 있도록 구체적으로 작성

UI 요소와 인터랙션(상호작용)을 일반 규칙으로 정의

인터랙션의 흐름을 정의하고 인터랙션의 순서, 분기, 조건, 반복 등을 명시

예외 상황에 대비한 다양한 케이스를 정의

UI 시나리오 작성을 위한 규칙 지정

 

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

- 주요 키의 위치와 기능

모든 화면에 공통적으로 배치되는 주요 키의 위치와 기능을 설명

여러 화면 간의 일관성 보장

 

- 공통 UI 요소

UI 요소를 언제 어떤 형태로 사용할지 정의

사용자의 조작에 대해 반응하는지에 대한 흐름을 설명

 

- 기본 스크린 레이아웃

모든 화면에 공통적으로 나타나는 요소들에 대한 위치와 속성을 정의

 

- 기본 인터랙션 규칙

터치 제스처 등에 공통으로 사용되는 조작방법과 화면 전환 효과 등을 기술

 

- 공통 단위 task 흐름

많은 기능들에 공통적으로 사용되는 삭제, 검색, 매너 모드 상태 등에 대한 인터랙션 흐름 설명

 

- 케이스 문서

다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의한 문서

 

UI 시나리오 문서의 요건

- 완전성 : 사용자에 맞추어 요구사항이 누락되지 않도록 상세히 기술

- 일관성 : 서비스의 목표, 요구사항, UI 스타일이 모두 일관성을 유지해야 함

- 이해성 : 누구나 쉽게 이해할 수 있도록 설명

- 가독성 : 표준화된 템플릿을 활용하여 읽기 쉽도록 해야 함

- 수정 용이성 : 시나리오의 수정, 개선이 쉬워야 함

- 추적 용이성 : 변경 사항이 언제 어떻게, 왜 발생했는지 쉽게 추적할 수 있어야 함

 

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

사용자의 요구사항, 의사소통의 문제가 감소

재작업 감소, 혼선 최소화

불필요한 기능 최소화

소프트웨어 비용이 줄고 개발기간이 줄어든다

 

HCI (Human Computer Interavtion or Interface)

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

최종 목표는 시스템을 사용하는 데 있어 최적의 사용자 경험을 만드는 것

 

UX (User Experience)

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

특징

- 주관성

- 정황성 : 같은 경험이라도 주변 환경의 영향을 받음

- 총체성 : 총체적인 심리적, 감성적인 결과

 

감성 공학

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

인체의 특징과 감정을 제품 설계에 최대한 반영시키는 기술

 

* 생체 측정 기술 (인간공학, 인지공학)

* 인간의 오감 센서 및 감성 처리 기술

* 감성 디자인 기술 (산업 디자인)

* 새로운 감성을 창출하기 위한 기술 (가상현실로 인간 적합성 판단)

 

감성 공학의 접근 방법

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

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

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

 

 

 

 

2020 ~ 2022 정보처리기사 필기 출제 기준