[2020 정보처리기사 필기 요약] 1과목 - 소프트웨어 설계 요약(화면설계)

  -  2  -  화면 설계

 

 

 

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

* 장애인, 비장애인 관계 없이 누구나 동등하게 인터페이스를 가지고 동일한 결과를 얻을 수 있으며, 조작 방법이 간단하도록 설계하는 것을 생각하면 됩니다!

 

 

 

 

 

1) 사용자 인터페이스의 개요

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

 

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

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

* 인터페이스는 사용자가 정보를 물리적으로 조종하고, 그 기능을 간편하게 사용할 수 있어야 합니다.

 

 

 

 

 

 

 

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

• 사용자의 만족도에 가장 큰 영향을 미치는 요소. 가장 많은 변경이 발생.
• 편리성과 가독성을 높여주고 업무에 대한 이해도를 높여줌
• 최소한의 노력으로 원하는 결과를 얻을 수 있게함
• 수행 결과의 오류를 줄여줌.
• 막연한 작업 기능에 대한 구체적인 방법을 제시함
• 정보 제공자와 공급자 간의 매개역할을 수행
• 사용자 인터페이스를 설계 하기 위해선 소프트웨어 아키텍처를 반드시 숙지해야 함.

 

 

 

 

 

 

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

CLI : 명령과 출력이 텍스트 형태로 이뤄진 인터페이스(*콘솔 창 같은 거요!)

GUI : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경

NUI : 사용자의 말이나 행동으로 조작하는 인터페이스

 

 

 

 

 

 

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

직관성 : 누구나 쉽게 이해하고 사용할 수 있음.

유효성 : 사용자의 목적을 정확하고 완벽하게 달성

학습성 : 누구나 쉽게 배우고 익힘

유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화

 

 

 

 

 

 

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

사용자 중심	사용자가 쉽게 이해하고 편리하게 사용하는 환경 제공, 실사용자에 대한 이해가 바탕
일관성	버튼이나 조작 방법등을 일관성 있게 제공
단순성	조작 방법을 단순화시켜 인지적 부담을 감소
결과 예측 기능	작동시킬 기능만 보고도 결과를 미리 예측할 수 있어야 함
가시성	메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계 해야 함
표준화	기능 구조와 디자인을 표준화
접근성	사용자의 연령, 성별, 인종 등 다양한 계층이 이용
명확성	사용자가 개념적으로 쉽게 인지할 수 있도록 설계
오류 발생 해결	오류 발생시 사용자가 쉽게 인지 할 수 있도록 설계

 

 

 

 

 

 

 

 

 

9.  UI 표준 및 지침

 

1) UI 표준 및 지침

중립성(웹 표준), 보편적 표현 보장성(웹 접근성), 기능의 호환성(웹 호환성)이 고려되었는지 확인

UI 표준 : 전체시스템에 포함된 모든 UI에 공통적으로 적용될 내용, 화면 구성이나 화면 이동이 포함됨

UI 지침 : UI 요구사항. 구현시 제약사항 등 UI 개발 과정에서 꼭 지켜야할 공통의 조건

 

*웹의 3요소

웹 표준 : 웹 사이트 작성 시 이용하는 HTML, JavaScript 등에 대한 규정, 웹 페이지가 다른 기종이나 플랫폼에서도 구현되도록 제작하는 기법

웹 접근성 : 누구나, 어떠한 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것

웹 호환성(Cross browsing) : 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것

 

 

 

 

 

 

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

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

 

 

 

 

 

3) 전자정부 웹 표준 준수 지침

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

• 내용의 문법 준수 : 모든 페이지는 사용할 인코딩 방식을 표기
• 내용과 표현의 분리 : 논리적인 마크업 언어 사용. 사용된 스타일 언어는 표준적인 문법을 준수
• 동작의 기술 중립성 보장 : 스크립트의 비표준 문법을 확장하는 것은 배제. 스크립트 비 사용자를 위해 대체 텍스트나 문법을 준수
• 플러그인의 호환성 : 다양한 웹 브라우저에서 호환 되는 것을 사용
• 콘텐츠의 보편적 표현 : 다양한 브라우저에서 접근 가능 및 다양한 인터페이스로 이용
• 운영체제에 독립적인 콘텐츠 제공 : 종속적이지 않은 범용적인 포맷을 사용
• 부가 기능의 호환성 확보 : 실명인증, 전자인증 등의 부가 기능도 다양한 브라우저에서 사용되어야 함.
• 다양한 프로그램 제공 : 정보를 열람하는 기능도 다양한 브라우저에서 제공되어야 함.

 

 

 

 

 

 

 10. UI 설계 도구

 

1) UI 설계 도구

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구 .

UI 설계 도구로 작성된 결과물은 사용자의 요구사항이 실제 구현되었을 때 어떻게 구성이 되었는지, 어떤 방식으로 수행되는지 등을 기획 단계에서 미리 보여주기 위한 용도

 

 

 

 

2) 와이어프레임

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

- 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계

- 개발자나 디자이너 등이 레이아웃을 협의, 진행 상태를 공유하기 위해 사용

 

종류 : 손 그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

* 손으로 슥슥 스케치하는 그림이라고 생각하면 돼요!

 

 

 

 

3) 목업

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

- 시각적으로만 구성 요소를 배치

 

종류 : 파워 목업, 발사믹 목업

 

* 핸드폰 매장 같은 곳에서 새기종 핸드폰을 세워놓잖아요? 그것과 같은 겁니다!

 

 

 

 

 

 

4) 스토리보드

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름(인터랙션)을 추가한 문서.

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

- 상단이나 우측에는 제목, 작성자를 입력. 좌측에는 UI 화면, 우측에는 디스크립션(설명)을 기입

- 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리를 명확하게 작성

 

종류 : 파워포인트, 키노트 스케치, Axure

 

* 실제 업무에서는 파워포인트를 많이 사용하죠! 콘텐츠와 기능에 대해 직관적으로 이해할 수 있어서 작업하기 편해요!

 

 

 

 

 

5) 프로토타입

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

- 페이퍼 프로토타입과 디지털 프로토타입으로 나뉨

 

종류 : HTML/css, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

* 완성품은 아니고, 견본품 정도로 생각하시면 되요!

 

 

 

 

 

6) 유스케이스

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

- 사용자의 요구사항을 빠르게 파악함으로 프로젝트 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화함.

- 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것 -> 다이어그램으로 묘사

- 유스케이스가 작성되면 유스케이스 명세서를 작성

 

* 유스케이스에 관한 것은 아래 링크로!

https://narup.tistory.com/70?category=888818

[UML] 유스케이스 다이어그램(Usecase Diagram)

* 사용자의 요구사항에 맞춰서 유스케이스 다이어그램으로 문서를 제작해요!

 

 

 

 

 

 

 

 

 

 

11. UI 요구사항 확인

 

1) UI 요구사항 확인

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

 

순서

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

 

 

 

 

 

 

2) 목표 정의

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

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

 

유의사항

•  인터뷰는 가능하면 개별적으로 진행
•  다양한 의견을 수렴하되, 다수의 의견으로 개인의 중요한 의견을 놓치지 않도록 주의
•  인터뷰는 1시간을 넘지 않도록 진행
•  인터뷰 진행은 반드시 사용자 리서치를 시작하기 전에 해야 함!!

*리서치 : 사용자들의 요구사항이나 불편사항 등을 확인하기 위해 진행 되는 것(설문조사, 개인 인터뷰)

 

 

 

 

 

3) 활동 사항 정의

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

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

 

 

 

 

 

4) UI 요구사항 작성

• 여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성.
• 반드시 실 사용자 중심으로 작성
• 여러 사람의 인터뷰를 통해 다양한 의견을 수렴해서 작성
• UI 요구사항 바탕으로 UI의 전체적인 구조를 파악 및 검토

UI 요구사항 작성 순서

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

 

 

 

 

 

 

 

 

 

5) 요구사항 요소 확인

• 데이터 요구 : 사용자가 요구하는 모델과 객체들의 주요 특성을 기반으로 하여 데이터 객체들을 정리(이메일의 메시지 속성 -> 제목, 발신인, 답변 등)
• 기능 요구 : 사용자의 목적 달성을 위해 무엇을 실행해야 하는지를 동사형으로 설명. 기능 요구 리스트는 최대한 철저하게 정리(읽거나 삭제, 다른 메시지와 함께 보관)
• 제품/서비스의 품질 : 데이터 및 기능 요구 외에 제품의 품질, 서비스, 여기에 감성적인 품질 등을 고려하여 작성.(얼마나 빠르게 처리할 수 있는지의 여부 등 정량화가 가능한 요구사항)
• 제약 사항 : 제품 완료 데드라인, 전체 개발 및 제작에 필요한 비용, 시스템 준수에 필요한 규제가 포함.(제약사항의 변경 가능 여부 확인)

 

 

 

 

 

 

6) 정황 시나리오 작성

• 사용자의 요구사항을 도출하기 위해 작성하는 것. 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사
• 요구사항 정의에 사용되는 초기 시나리오
• 개발하는 서비스의 모습을 상상하는 첫번째 단계로, 사용자 관점에서 시나리오 작성
• 주로 사용하는 기능 위주로 작성. 함께 발생되는 기능들은 하나의 시나리오로 통합

 

 

 

 

 

 

 

7) 요구사항 작성

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