[정보처리기사] 1과목 소프트웨어 설계 : 2장. 화면 설계

1. 사용자 인터페이스 ***
2. UI 표준 및 지침
3. UI 설계 도구 ***
4. UI 요구사항 확인
5. 품질 요구사항
6. UI 프로토타입 제작 및 검토 ***
7. UI 설계서 작성
8. 유용성 평가
9. UI 상세 설계
10. HCI / UX / 감성공학

 

 

 

1. 사용자 인터페이스 ***

 

사용자 인터페이스(UI)

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

 

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

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

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

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

​

소프트웨어 아키텍처

- 개발하고자 하는 소프트웨어의 특성과 본질을 파악하고 다양한 시작에서 모형화

- 전체 시스템의 전반적인 구조를 설계

- 작업자들 간의 상호 이해, 타협 및 의사소통을 원활하게 하기 위해 사용됨

​

사용자 인터페이스의 구분

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

- GUI(Graphical User Interface): 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스

- NUI(Natural User Interface): 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

​

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

- 직관성, 유효성, 학습성, 유연성

​

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

- 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

 

 

 

2. UI 표준 및 지침

 

UI 표준 및 지침

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

​

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

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

- 웹 콘텐츠 저작자, 웹 콘텐츠 설계자 등이 접근성이 보장된 웹 콘텐츠를 쉽게 제작할 수 있도록 도와줌

​

내비게이션

- 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것으로 사용자가 중심이 되어야 함

- 원하는 정보를 쉽고 빠르게 찾을 수 있도록 다양한 경로와 방법을 제공해야 함

- 메뉴, 사이트맵, 버튼, 링크 등의 구성 요소는 사용자가 직관적으로 찾아 사용할 수 있도록 설계되어 있어야 하고, 사용자가 혼동하지 않도록 전체 페이지에서 일관성이 있어야 함

내비게이션 구조의 요소: 메뉴, 링크, 이미지맵, 사이트맵, 사이트 메뉴바, 내비게이션 바, 디렉터리

​

전자정부 웹 표준 준수 지침

- 정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약을 정의한 것으로, 모든 사람이 시스템 환경에 구애받지 않고 정부기관의 홈페이지를 이용할 수 있도록 하는 것

지침 사항

- 내용의 문법 준수

- 내용과 표현의 분리

- 동작의 기술 중립성 보장

- 플러그인의 호환성

- 콘텐츠의 보편적 표현

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

- 부가 기능의 호환성 확보

- 다양한 프로그램 제공

 

 

 

3. UI 설계 도구 ***

 

UI 설계 도구

- 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로, 종류에는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있음

​

1) 와이어프레임

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

- 툴: 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵

​

2) 목업

- 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

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

​

3) 스토리보드

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

- 디자이너와 개발자가 최종적으로 참고하는 작업 지침서로, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 있음

- 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분으로, 명확하과 세부적으로 작성해야 함

- 툴: 파워포인트, 키노트, 스케치, Axure

​

4) 프로토타입

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

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

​

5) 유스케이스

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

- 유스케이스 다이어그램, 유스케이스 명세서 작성

 

 

 

4. UI 요구사항 확인

 

UI 요구사항 확인

- 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계로, 다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성

​

1) 목표 정의

- 사용자들을 대상으로 인터뷰를 진행한 후 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의

- 인터뷰를 통해 사업적, 기술적인 요구사항을 명확히 이해

인터뷰 진행 시 유의사항

- 가능하면 개별적으로 진행

- 가능한 많은 사람을 인터뷰하여 다양한 의견을 수렴하되, 다수의 의견으로 인해 개인의 중요한 의견을 놓치지 않도록 주의

- 인터뷰 진행은 반드시 사용자 리서치를 시작하기 전에 해야 함

​

2) 활동 사항 정의

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

- 리서치 규모, 디자인 목표 등을 결정할 수 있도록 각각에 필요한 예산과 일정을 결정

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

- 사업 전략 및 목표, 프로세스의 책임자 선정, 회의 일정 및 계획 작성, 우선순위의 선정, 개별적인 단위 업무를 구분

​

3) UI 요구사항 작성

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

UI 요구사항 작성 순서

(1) 요구사항 요소 확인

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

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

(2) 정황 시나리오 작성

- 사용자의 요구사항을 도출하기 위해 작성하는 것으로 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사

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

(3) 요구사항 작성

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

 

 

 

5. 품질 요구사항 

 

품질 요구사항

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

- ISO/IEC 9126: 소프트웨어 품질 특성과 평가를 위한 표준 지침으로서 국제 표준으로 널리 사용됨

(* ISO/IEC 25010은 위를 개정하여 만든 소프트웨어 제품에 대한 국제 표준)

​

 

 

6. UI 프로토타입 제작 및 검토

 

UI 프로토타입의 개요

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

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

- 일부 핵심적인 기능만을 제공하지만 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함되어야 함

- 사용자 요구사항이 모두 반영될 때까지 프로토타입을 계속해서 개선하고 보완해야 함

​

UI 프로토타입의 장단점

장점

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

- 요구사항과 기능의 불일치 등으로 인한 혼선을 예방할 수 있어 개발 시간을 줄일 수 있음

- 사전에 오류를 발견할 수 있음

단점

- 프로토타입에 사용자의 모든 요구사항을 반영하기 위한 반복적인 개선 및 보완 작업 때문에 작업 시간을 증가 시킬 수 있고, 필요 이상으로 자원을 소모할 수 있음

- 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있음

​

프로토타이핑의 종류

1) 페이퍼 프로토타입

- 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 방법

- 제작 기간이 짧은 경우, 제작 비용이 적을 경우, 업무 협의가 빠를 경우 사용

2) 디지털 프로토타입

- 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법

- 재사용이 필요한 경우, 산출물과 비슷한 효과가 필요한 경우, 숙련된 전문가가 있을 경우 사용

​

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

1) 계획 시 고려사항

- 프로토타입의 개발 목적 확인

- 소프트웨어, 하드웨어 등 프로토타입 개발에 필요한 환경 마련

- 프로토타이핑 일정은 일반적으로 아키텍처가 확정된 이후 프로젝트의 실제 분석 작업이 완료되기 이전에 진행해야 함

- 아키텍처의 핵심이 되는 UI 요소를 프로토타입의 범위로 잡음

- 프로토타입의 개발 인원 확인

- 주어진 비즈니스 요구사항을 모두 만족하는지 프로토타입 아키텍처를 검증

- 프로토타이핑을 진행하면서 분석, 설계, 개발, 테스트 등의 표준 가이드를 확정

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

2) 작성 시 고려사항

- 프로토타입의 작성 계획을 세움

- 프로젝트 범위나 리스크 상황 등 주변 여건을 감안해서 프로토타입의 범위를 정함

- 프로토타입을 통해 얻고자 하는 목표를 확인

- 프로토타입 개발 목표를 달성하기 위해 최소한의 기간과 비용을 확인

​

UI 프로토타입 제작 단계

 

 

 

7. UI 설계서 작성

 

UI 설계서의 개요

- 사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서로, 상세 설계 전에 대표적인 화면들을 설계

​

1) UI 설계서 표지 작성

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

2) UI 설계서 개정 이력 작성

- UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리해 놓은 문서

3) UI 요구사항 정의서 작성

- 사용자의 요구사항을 확인하고 정리한 문서로, 사용자의 요구사항의 UI 적용 여부를 요구사항 별로 표시

4) 시스템 구조 작성

- UI 요구사항과 UI 프로토타이벵 기초하여 전체 시스템의 구조를 설계한 것으로 사용자의 요구사항이 어떻게 시스템에 적용되는지를 알 수 있음

5) 사이트 맵 작성

- 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계

6) 프로세스 정의서 작성

- 사용자 관점에서 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리한 것으로 UI의 전체적인 흐름을 파악할 수 있음

7) 화면 설계

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

​

UI 화면 설계의 기본 구성 요소

- 윈도우, 메뉴, 아이콘, 포인터

 

 

 

8. 유용성 평가 

 

UI의 유용성 평가

- 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도로, UI의 주된 목적은 유용성이 뛰어난 UI를 제작하는 것

- 사용자 측면에서 복잡한 시스템을 얼마나 편리하게 사용할 수 있는지를 평가하는 것으로, 시스템의 문제점을 찾아내고 개선 방향을 제시하기 위한 조사 과정

​

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

- 사용 의도 파악

- 행위 순서 규정

- 행위의 순서대로 실행

​

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

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

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

- 사용자가 가진 원래 의도와 시스템 결과 간의 유사 장도를 사용자가 쉽게 파악하도록 유도

 

 

 

9. UI 상세 설계

 

UI 시나리오 문서 개요

- UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계로, UI 상세 설계를 할 떄는 반드시 시나리오를 작성해야 함

- 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것

- 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사되어 있음

​

UI 시나리오 문서 작성 원칙

- 개발자가 전체 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성, 보통 계층 구조 또는 플로차트 표기법으로 작성

- 모든 기능에 공통적으로 적용될 UI 요소와 인터랙션을 일반 규칙으로 정의

- 대표 화면의 레이아웃과 그 화면에 속할 기능을 정의

- 인터랙션의 흐름을 정의하며, 화면 간 인터랙션의 순서, 분기, 조건, 루프 등을 명시

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

​

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

- 주요 키의 위치와 기능:모든 화면에 공통적으로 배치되는 주요 키의 위치와 기능을 설명한 것으로, 여러 화면 간의 일관성을 보장

- 공통 UI 요소: 체크 박스, 라디오 버튼, 텍스트 박스 등의 UI 요소를 언제, 어떤 형태로 사용할 지를 정의하고, 사용자가 조작하면 어떻게 반응하는지 그 흐름을 설명

- 기본 스크린 레이아웃: 모든 화면에 공통적으로 나타나는 Titles, OK/Back, Soft Key, Option, Functional Buttons 등의 위치와 속성을 정의

- 기본 인터랙션 규칙: 터치 제스처 등에 공통적으로 사용되는 조작 방법과 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등을 기술

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

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

​

UI 시나리오 문서의 요건

- 완전성: 누락되지 않도록 상세히 기술, 시스템의 기능보다는 사용자의 태스크에 초점을 맞춰 기술

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

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

- 가독성: 표준화된 템플릿을 활용하여 문서를 쉽게 이해할 수 있도록 해야 함

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

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

​

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

- 요구사항이나 의사소통에 대한 오류 감소

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

- 불필요한 기능 최소화

- 소프트웨어 개발 비용 절감

- 개발 속도 향상

 

 

 

10. HCI / UX / 감성공학

 

HCI (Human Computer Interaction)

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

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

​

UX (User Experience)

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

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

UX의 특징

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

​

감성공학

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

- 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합 과학

감성 공학의 요소 기술

- 기반 기술, 구현 기술, 응용 기술