[정보처리산업기사 과정평가형

✨ UI / UX 설계

가. UI(User Interface)

: 사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을 높여 주기 위한 기술

나. UX(User Experience)

: UI와 비슷하지만 사용자들의 특성을 객관적 자료 및 통계를 바탕으로 면밀하게 분석하여 사용자의

불편함을 최소화와하기 위해 만들 기술을 의미한다.

다. 인터페이스 종류

1) CLI(Command Line Interface)

: 사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 텍스트 형태로 표현된다.

2) GUI(Graphical User Interface)

: 사용자가 컴퓨터의 자원을 사용할 수 있도록 구성요소들이 그래픽 형태로 표현된다.

3) NUI(자연어 유저 인터페이스, Natural User Interface)

: 사용자의 몸짓, 말소리만으로도 IT 기기를 사용할 수 있는 기술이다.

라. UI 개발

1) 요구사항 분석

: 프로그램을 만들고자 하는 이유가 명확해야 한다. 즉, 어떤 문제점을 해결하고자 프로그램을 개발하게 되었는지 목적이 분명해야 한다.

2) 스토리보드 작성

: 분석된 요구사항을 바탕으로 시각적으로 어떻게 구현하고, 어떻게 흘러 가는지 흐름도를 디자인적으로 스캐치하는 작업을 의미한다.

마. UI 메뉴 설계 구조 확인

1) 사용성 : 사용자가 업무를 쉽고 편리하게 수행하는 것에 의미를 둔다.

2) 유용성 : 사용자가 업무를 수행하는 데 있어 얼마나 정확하게 수행할 수 있는지를 나타내는 것이다.

3) 정보구조 : 처리 내용이나 메뉴의 구조를 표현함 있어 사이트의 구조를 파악할 수 있도록 하는 것이다.

4) 내비게이션 : 사용자가 직관적으로 자신이 찾고 있는 정보를 쉽게 찾을 수 있도록 설계 한다.

5) 유스케이스 : 사용자가 원하는 목표를 위하여 시스템에서 수행해야 하는 내용을 기술한다.

✨UI 구현하기

가. 웹의 3요소

1) 웹 표준

: 웹에서 사용되는 기술이나 규칙을 의미하며 웹 사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 의미한다.

2) 웹 접근성

: 어떠한 사용자(장애인, 노인 등), 어떠한 기술 환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것을 뜻한다.

3) 웹 호환성

: 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것을 의미한다.

나. UI 개발기술

1) 서버

: 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 의미한다.

2) 클라이언트

: 네트워크를 통하여 다른 서버 시스템 상의 컴퓨터에 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 클라이언트라고 한다

3) HTML의 시맨틱 태그

: 태그 이름으로 역할을 짐작할 수 있으며, 웹 페이지에서 사람이 인식하는 정보를 기계가 이해할 수 있도록 하는 컴퓨터 기술을 의미한다.

- 대표적인 시맨틱 태그 : <header>, <nav>, <section>, <article>, <aside>, <footer>

<header> 제목, 머리글
<nav> 메뉴, 링크
<section> 콘텐츠 제목, 그룹핑		<aside> 광고
	<article> 문단1, 보충설명
	<article> 문단2, 보충설명
<footer> 저작권, 회사정보

[ HTML5 시맨틱 구조 ]

가) Header - 해당 페이지의 헤더 영역을 지정하고 주로 로고나 회사명, 사이트 맵 등이 위치

나) Navigation - 본문의 주요 내비게이션(메인 메뉴) 영역을 지정

다) Section - 해당 페이지의 콘텐츠 영역을 지정할 때 사용

라) Article - 독립적인 콘텐츠 항목에 대한 영역을 지정할 때 사용

마) Aside - 본문 내용 이외에 표현하고자 하는 기타 내용이 있을 경우에 영역을 지정 할 때 or 서브 메뉴

바) Footer - 본문 내용의 아래에 위치하며 주로 개인정보 보호정책, 회사 주소 등을 작성한다.

4) CSS(Cascading Style Sheets)

가) 정의

: 웹 페이지 전체의 일관성을 유지할 수 있도록 스타일(색상, 글꼴, 크기 등)을 미리 저장해 둔 시트를 의미한다

나) 특징

(1) 브라우저와 관계없이 적용이 가능하다.

(2) 자바 스크립트를 사용하지 않고도 동적인 페이지를 제작할 수 있다.

(3) 다양한 서식(글자크기, 줄 간격, 여백 등)을 쉽게 설정할 수 있다.

다) CSS 적용 방법

(1) 범용 선택자 : 서식을 웹 페이지의 일부분만 적용되는 것이 아니라 전체를 대상으로 적용

(2) 태그 선택자 : 특정한 태그에 서식 적용

(3) 아이디 선택자 : id로 여러개의 태그를 그룹화하여 서식 적용

(현재페이지에서 간단하게 서식 적용할 때 사용)

(4) 클래스 선택자 : 클래스로 여러개의 태그를 그룹화하여 서식 적용

(여러 페이지에서 자주사용하는 서식을 미리 만들어 둠)

5) 자바스크립트(JavaScript)

: 자바스크립트는 HTML 문서 내에서 <script></script> 태그를 통해 작성되고, 작성되는 위치는 <head> 영역, <body> 영역이며, .js 확장자를 갖는 외부 파일 형태로 작성할 수 있다.

6) 이벤트 처리

*이벤트 함수 예제 보러가기

(1) onclick : 버튼과 같은 HTML의 다양한 폼 요소에서 지원하며, 사용자가 해당 요소를 클릭할 때 동작한다. 만일 onclick 핸들러가 false(거짓)를 반환할 경우에는 해당 요소의 어떠한 기능도 수행하지 않는다.

(2) onmousedown, onmouseup : onclick 핸들러와 유사하게 동작하지만, 마우스를 누를 때와 놓았을 때를 구분하여 동작할 수 있다는 점이 다르다.

(3) onmouseover, onmouseout : 마우스의 포인터가 해당 요소의 위로 올라오거나 벗어날 때 구동한다.

(4) onchange : <input>, <select>, <textarea> 요소에서 지원하며 해당 요소의 입력 포커스를 다른 곳으로 이동할 때 구동한다.

(5) onload : <body> 태그에서 사용되며 해당 페이지와 해당 페이지에 연결된 외부 내용들이 완전히 로딩되었을 때 구동한다

다. UI테스트

: 프로그램 개발 과정에서 생각하지 못한 오류나 버그를 찾고, 새롭게 추가한 세부기능들에 대하여 정상적으로

작동되는지 다양한 시각에서 테스트 해야 한다.

1) Top-Down(하향식) 테스트

: 최상위 모듈에서 하위 모듈로 테스트하는 기법으로 실사용 환경과 유사한 테스트이다. S/W의 변경으로 영향을 받게 될 다른 세부적인 기능에 초점을 맞춘다.

2) Bottom-Up(상향식) 테스트

: 최하위 모듈에서 상위 모듈로 테스트하는 기법으로 대형 시스템에서 주로 사용되며, 초기에 병행 작업이 가능하여 테스트가 용이하다.

3) 사용성 테스트 과정 *시험에나옴

가) 계획 수립 - 목적, 평가 내용(항목) 분석, 사용 환경, 사용자 등을 분석한다.

나) 테스트 설계 - 진행 절차 작성, 테스트 참가자 결정, 테스트 항목의 평가 방향 결정, 다양한 평가 방법

으로 설계한다.

다) 테스트 실행 – 설계된 진행 절차대로 진행한다.

라) 결과 보고서 작성 – 평가에 사용된 데이터를 분류하고 분석하며 결과를 통해 문제점을 분석한 후,

수정에 필요한 의견을 포함하여 보고서를 작성함으로써 피드백을 통해 오류를

수정하도록 한다.

저작자표시

'IT자격증 공부 > 정보처리산업기사 필기' 카테고리의 다른 글

[정보처리산업기사 과정평가형 - 필기] SQL 활용 (2)	2022.06.13
[정보처리산업기사 과정평가형 - 필기] 애플리케이션 테스트 수행 (0)	2022.06.13
[정보처리산업기사 과정평가형] 자격증 취득 후기 - 2022년 개편 (9)	2022.05.30
[과정평가형] 정보처리산업기사 필기 - 후기(2022년 개편) (6)	2022.05.09
[정보처리산업기사 과정평가형 - 필기] 응용 SW 기초 기술 활용 (0)	2022.05.06