[정보처리기사] 1과목 - 2장 화면 설계

Section 10. 사용자 인터페이스

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

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

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

* 인터페이스 : 서로 다른 두 시스템이나 소프트웨어 등을 서로 이어주는 부분 또는 접속 장치

• 사용자 인터페이스를 설계하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.

* 소프트웨어 아키텍처 : 개발할 소프트웨어의 기본 틀을 만드는 것 (밑그림) / 논리적 구성 / 비기능적 요구사항

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

• CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터퍼이스
• GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
• NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

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

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

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

• 사용자 중심
• 일관성
• 단순성
• 결과 예측 가능
• 가시성 :  메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계
• 표준화 
• 접근성
• 명확성
• 오류 발생 해결

 

Section 11. UI 표준 및 지침

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

• UI 표준 : 전체 시스템에 포한된 모든 UI에 공통적으로 적용될 내용 / 화면 구성이나 화면 이동 등이 포함
• UI 지침 : UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건

* 웹의 3요소

• 웹 표준 : 웹에서 사용되는 규칙 또는 기술
• 웹 접근성
• 웹 호환성

2. 한국형 웹 콘텐츠 접근성 지침(KWCAG)은 장애인이 비장애인과 동등하게 접근 할 수 있는 웹 콘텐츠의 제작 방법을 제시한다.

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

지침		고려 사항
인식의 용이성	대체 텍스트	텍스트가 아닌 이미지 등의 콘텐츠에는 그 의미를 인식할 수 있는 대체 텍스트를 제공해야 한다.
	멀티미디어 대체 수단	동영상, 음성 등 멀티미디어 콘텐츠에 대한 이해도를 높일 수 있도록 대체 수단(자막,대본,수화 등)을 제공해야 한다.
	명료성	콘텐츠는 색이나 명도, 방향, 모양, 크기, 소리 등에 관계없이 명확하게 전달
운용의 용이성	키보드 접근성	콘텐츠는 키보드만으로도 접근할 수 있어야 한다.
	충분한 시간 제공	콘텐츠를 읽고 사용하는 데 충분한 시간을 제공
	광과민성 발작 예방	광과민성 발작(초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠)을 일이킬 수 있는 콘텐츠는 제공하지 않아야 한다.
	쉬운 내비게이션	반복되는 영역은 건너뛸 수 있도록 하거나 용도나 목적을 이해할 수 있도록 링크 텍스트를 제공하는 등 콘텐츠를 쉽고 편리하게 내비게이션 할 수 있어야 한다.
이해의 용이성	가독성
	예측 가능성
	콘텐츠의 논리성	콘텐츠는 선형 구조로 작성되어야 하고, 논리적인 순서를 제공해야 한다.
	입력 도움	입력 오류를 방지하거나 정정할 수 있어야 한다.
견고성	문법 준수	웹 콘텐츠는 마크업 언어(태그 등을 이용하여 문서의 포맷이나 구조 등을 지정하는 언어)의 문법을 준수해야 한다.
	접근성

* 내비게이션 : 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것 (사용자 중심)

• 메뉴(단추) : 계층 구조를 표현하는 기본 요소로 사용자가 원하는 페이지로 이동할 수 있게 한다.
• 링크
• 이미지 맵 : 그림에 하이퍼링크를 연결하여 원하는 페이지로 이동할 수 있게 한다.
• 사이트 맵 : 사이트의 전체 구조를 한 눈에 알아볼 수 있도록 트리 구조 형태로 만든 것
• 사이트 메뉴바
• 내비게이션 바 : 메뉴를 한 곳에 모아 놓은 그래픽이나 문자열 모음
• 디렉터리 : 주제나 항목을 카테고리별로 표현한 방식

내비게이션 바

3. 전자정부 웹 표준 준수 지침 : 정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약을 정의 한 것

내용의 문법 준수	모든 웹 문서는 적절한 문서타입을 명시하고 문법을 준수해야 한다.
	모든 페이지는 사용할 인코딩(문자들의 집합을 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법) 방식을 표기해야 한다.
내용과 표현의 분리	논리적인 마크업 언어를 사용하여 웹 문서를 구조화해야 한다.
동작의 기술 중립성 보장	스크립트의 비표준 문법을 확장하는 것은 배제해야 한다.
	스크립트 비사용자를 위해 대체 텍스트나 정보를 제공해야 한다.
플러그인의 호환성	플러그인(응용 프로그램에 추가되어 특정한 기능을 수행하도록 구현된 프로그램 모듈)은 다양한 웹 브라우저에서 호환되는 것을 사용해야 한다.
콘텐츠의 보편적 표현	메뉴는 다양한 브라우저에서 접근할 수 있어야 하며 웹사이트를 다양한 인터페이스로 이용할 수 있어야 한다.
운영체제에 독립적인 콘텐츠 제공	운영체제에 종속적이지 않은 범용적인 포맷을 사용해야 한다.
부가 기능의 호환성 확보	실명인증, 전자인증 등의 부가 기능은 다양한 브라우저에서 사용할 수 있어야한다.
다양한 프로그램 제공	별도의 다운로드가 필요한 프로그램은 윈도우,리눅스,맥킨토시 중 2개 이상의 운영체제를 지원해야 하고 정보를 열람하는 기능은 다양한 브라우저에서 사용할 수 있어야한다.

 

Section 12.UI 설계 도구

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구 (미리 보여주기위한 용도)

1. 와이어프레임

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

• 화면 단위로 설계
• 레이아웃을 협의
• 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

와이어프레임 작성

2. 목업

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

• 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다.
• 목업 툴 : 파워 목업, 발사믹 목업

목업 작성

3. 스토리보드

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

• 와이어프레임의 내용에 디스크립션을 추가한 문서
• 작업 지침서로 서비스 구축을 위한 모든 정보가 들어 있다.
• 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI화면, 우측에는 디스크립션을 기입
• 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분으로 명확하고 세부적으로 작성해야 한다.
• 스토리보드 툴 : 파워포인트, 키노트, 스케츠, Axure 등

스토리보드 툴

4. 프로토타입

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

* 인터랙션(Interaction) : UI를 통해 시스템을 사용하는 일련의 상호 작용 (마우스로 화면의 어떤 아이콘을 클릭하면 화면이 그에 맞게 반응하는 것)

인터랙션

• 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플
• 프로토타입 툴 : HTML/CSS , Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

프로토타입

5. 유스케이스(Use Case)

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

 

Section 13. UI 요구사항 확인

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

다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야 한다.

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

1. 목표 정의 

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

• 인터뷰 진행은 반드시 사용자 리서치 (사용자들의 요구사항이나 불편사항 등을 파악하기 위해 진행되는 것)를 시작하기 전에 해야 한다.

2. 활동 사항 정의

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

• 리서치 규모, 디자인 목표 등을 결정할 수 있도록 각각에 필요한 예산과 일정을 결정한다.
• 기술의 발전 가능성을 파악하고 UI 디자인의 방향을 제시한다.
• 인터뷰한 내용을 기반으로 경영진마다 다르게 이해하고 있는 프로젝트에 대해 정확히 이해하고 협의하도록 돕는다.
• 사업 전략 및 목표, 프로세스의 책임자 선정, 회의 일정 및 계획 작성, 우선순위의 선정, 개별적인 단위 업무를 구분

3. UI 요구사항 작성

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

• 실사용자 중심
• UI의 전체적인 구조를 파악 및 검토
• UI 요구사항 작성 순서 : 요구사항 요소 확인 → 정황 시나리오 작성 → 요구사항 작성

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

 3-2. 정황 시나리오 작성

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

• 초기 시나리오
• 사용자 관점에서 작성
• 주로 사용하는 기능 위주로 작성
• 함께 발생되는 기능들은 하나의 시나리오에 통합
• 육하원칙

 3-3. 요구사항 작성

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

 

Section 14. 품질 요구사항

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

 

* ISO/IEC 9126 : 사용자 관점에서 본 소프트웨어의 품질 특성과 평가를 위한 표준 지침으로서 국제 표준

• 기능성 (Functionality) : 소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부

상세 품질 요구사항

적절성/정합성

정밀성/정확성

상호 운용성 (Interoperability)

보안성

호환성 (Compliance)

• 신뢰성 (Reliability) : 소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도

상세 품질 요구사항	설명
성숙성 (Maturity)	결함으로 인한 고장을 피해갈 수 있는 능력
고장 허용성 (Fault Tolerance)	결함 또는 인터페이스 결여 시에도 규정된 성능 수준을 유지할 수 있는 능력
회복성	고장 시 규정된 성능 수준까지 다시 회복하고 직접적으로 영향 받은 데이터를 복구할 수 있는 능력

• 사용성 (Usability) : 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도

상세 품질 요구사항	설명
이해성	소프트웨어의 적합성, 사용 방법 등을 사용자가 이해할 수 있는 능력
학습성	소프트웨어 애플리케이션을 학습할 수 있도록 하는 능력
운용성(Operability)	사용자가 소프트웨어를 운용하고 제어할 수 있도록 하는 능력
친밀성	사용자가 소프트웨어를 다시 사용하고 싶어 하도록 하는 능력

• 효율성 (Efficiency) : 사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도

상세 품질 요구사항

시간 효율성

자원 효율성

• 유지 보수성 (Maintainability) : 환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도

상세 품질 요구사항	설명
분석성
변경성
안정성
시험성	소프트웨어의 변경이 검증될 수 있는 능력

• 이식성 (Portability) : 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도

상세 품질 요구 사항

적용성 (Adaptability)

설치성

대체성

공존성

 

Section 15. UI 프로토타입 제작 및 검토

 프로토타입은 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트가 가능하다.

• 프로토타이핑 및 테스트를 거치지 않고는 실제 사용자와 제품 간의 상호 작용 방식을 예측하기 어려우므로 실제 사용자를 대상으로 테스트하는 것이 좋다.
• 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로, 최대한 간단하게 만드는 것이 좋다.

* 프로토타이핑 : 프로토타입을 만드는 과정으로 사용자의 요구사항 검토부터 최종적인 프로토타입을 완성하기 까지 반복적으로 수행되는 전 과정

 

1. UI 프로토타입의 장단점

2. 프로토타이핑의 종류

 2.1 페이퍼 프로토타입

• 아날로그적인 방법 (스케치,그림,글 등을 이용하여 손으로 직접 작성)
• 장단점

 2.2 디지털 프로토타입

• 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법
• 재사용이 필요한 경우, 숙련된 전문가가 있을 경우 사용
• 장단점

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

4. UI 프로토타입 제작 단계

1. 사용자의 요구사항을 분석하는 단계
2. 요구사항을 충족하는 프로토타입을 작성한다. (핵심적인 기능 중심)
3. 작성된 프로토타입이 요구사항을 잘 수행하고 있는지 사용자가 직접 확인하는 단계
4. 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지는 단계 (승인까지 ->3단계->4단계 반복)

 

Section 16. UI 설계서 작성

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

1. UI 설계서 표지 작성

•  프로젝트명 또는 시스템명을 포함시켜 작성

UI 설계서 ; 표지

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

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

• 초안의 버전을 1.0으로 설정하고 변경 사항이 있을 때마다 버전을 0.1씩 높인다.

UI 설계서 : 개정 이력

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

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

UI 설계서 : 요구사항 정의서(RFP)

4. 시스템 구조 작성

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

UI 설계서 : UI 시스템 구조

5. 사이트 맵 작성

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

6. 프로세스 정의서 작성

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

UI 설계서 : 프로세스 정의서

7. 화면 설계

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

• 화면을 구분하기 위해 화면별 고유ID를 부여하고 별도 표지를 작성
• 와이어프레임(페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계)을 대략적으로 스케치
• 주요 흐름을 스토리보드(와이어프레임에 콘텐츠에 대한 설명,페이지 간 이동 흐름 등을 추가한 문서) 형태로 작성

*  UI 화면 설계의 기본 구성 요소 : 윈도우, 메뉴, 아이콘, 포인터

 

Section 17. 유용성 평가

1. UI의 유용성 평가

• 유용성 : 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도
• 유용한 UI를 설계하기 위해서는 UI의 구조, 기능, 가치 등에 대해 사용자가 생각하는 사용자 모형과 시스템 설계자가 만들려고 하는 개발자 모형 간의 차이 (실행 차, 평가 차)를 최소화해야 한다.

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

* 실행 차 : 사용자가 원하는 목적과 실행 기능이 다르기 때문에 발생

• 사용 의도 파악 : 사용자의 목적을 명확히 파악한 후 불필요한 기능이나 중복되는 기능이 있는지 확인한다.
• 행위 순서 규정 : 사용자가 특정 기능을 사용하기 위한 행위 순서를 세분화시켜 순서대로 제시하고, 사용자가 임의로 행위 순서를 변경할 수 있도록 한다. (최소화, 친숙화)
• 행위의 순서대로 실행

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

* 평가 차 : 사용자가 원하는 목적과 실행 결과가 다르기 때문에 발생

• 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도
• 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
• 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

 

Section 18. UI 상세 설계

1. UI 시나리오 문서

UI 상세 설계는 UI 설계서(UI 흐름 설계+UI 상세설계 / UI 흐름 설계에서 작성한 설계서를 다시 한번 확인하고 추가 또는 수정하여 완성)를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계로 반드시 시나리오를 작성해야 한다.

• 방법이 순차적으로 묘사
• UI시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것
• UI 설계자 또는 인터랙션 디자이너가 시나리오 문서 작성 -> 그래픽 디자이너가 시나리오를 바탕으로 디자인 -> 개발자가 UI 구현

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

UI 시나리오 작성

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

* UI 요소

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

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

• 완전성
• 일관성
• 이해성
• 가독성
• 수정 용이성
• 추적 용이성

* 템플릿 : 화면의 기본 레이아웃 형태

 

Section 19 HCI/UX/감성공학

1. HCI (Human Computer Interacion or Interface)

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문으로 최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경험(UX)을 만드는 것 

• 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들 수 있는지 등을 연구한다.

2. UX (User Experience)

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

UX의 특징

• 주관성
• 정황성 : 경험이 일어나는 상황 또는 주변 환경에 영향을 받는다.
• 총체성 

3. 감성공학

제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술로, 인문사회과학,공학,의학 등 여러 분야의 학문이 공존하는 종합과학