공부 기록/자격증 공부

NCS 정보처리산업기사 정리 (화면구현/애플리케이션 테스트)

우준성 2022. 11. 3. 13:43

사용자 인터페이스(UI)의 종류와 의미 알기 (84P)

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

CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 표현됨

GUI(Graphical User Interface) : 구성요소들이 그래픽 형태로 표현됨

NUI(Natural User Interface) : 몸짓, 말소리만으로 IT 기기를 사용할 수 있음

 

UI 개발 화면 설계 도구 종류 (85P)

화면 설계 도구

  • 파워포인트
  • 와이어프레임 (기획 단게에서 페이지 레이아웃, 화면 이동, 구성요소에 대한 내용 기술한 문서)
  • 스토리보드 (와이어프레임의 내용에 description(설명) 등을 포함한 설계 문서)
  • 목업 (설계 단계에서 실제 화면과 같은 형태)

프로토타입 : interaction(상호작용)이 포함되어 테스트가 가능한 형태

UI디자인 : 화면의 모양이나 기능을 표현한 것

 

UI 메뉴 구조 관련 용어의 이해 (사용성, 유용성, 정보구조, 내비게이션, 유스케이스) (86P)

사용성(usability)

  • 특정 목적을 성취하고자 하는 사용자들에 의해 제품이 사용될 때 특정 맥락에서의 효과성, 효율성, 만족도에 관한 것
  • 한마디로, 사용자가 업무를 쉽고 편리하게 수행하는 것을 의미

유용성(usefulness)

  • 사용자가 업무를 수행하는 데 있어 얼마나 정확하게 수행할 수 있는지 나타내는 것

정보 구조 (information architecture)

  • 설계 단계에서 사이트를 구성하는 처리 내용, 메뉴 구조 표현 ➡️ 사이트 구조를 파악할 수 있게 하는것 (사이트맵)
  • 정보 구조 표현 방법에 따라 계층적 구조, 계열 구조, 그리드 구조, 네트워크 구조 등으로 나뉨

내비게이션 (navigation)

  • 사용자가 사이트에서 원하는 정보를 찾도록 안내하는 것
  • 사이트맵(사이트 구조)와 관계있고, 설계/구현 시 사용자가 중심이 되어야 함
  • 내비게이션은 메뉴, 버튼, 링크 등으로 구성되며 이들은 모든 페이지에서 일관성 지켜 혼동하지 않게 하기
  • 사용자가 직관적으로 자신이 찾고 있는 정보를 알아가는 데 도움을 줘야 함

유스케이스 (use case)

  • 사용자 측면에서의 요구사항. 주로 기능 개선에 대한 내용으로, 사용자가 원하는 목표를 위해 시스템에서 수행해야 하는 내용을 기술한다.
  • 유스케이스에 기록된 내용을 토대로 실제 수행 방법을 구현하게 된다.
  • 사용자에게 있어 외부 시스템이나 서브 시스템과의 의사소통 수단으로 사용됨
  • 하나의 단위 업무에 대한 독립적인 기능을 수행할 수 있도록 표현

 

웹의 3요소와 각각의 의미 (88-89P)

웹의 3요소 : 웹 표준, 웹 접근성, 웹 호환성

  • 웹 표준(Web Standards) : HTML, CSS, JS 등에 대한 규정과, 다른 기종/플랫폼에서도 구현되도록 제작하는 기법 등 포함
  • 웹 접근성(Web Accessibility) : 어떠한 사용자, 기술 환경에서도 사용자가 전문적 능력없이 웹사이트에서 제공하는 모든 정보 접근을 보장하는 것. 모든 사용자가 웹 콘텐츠에 보다 쉽게 접근할 수 있게 하는 것
  • 웹 호환성(Web Browsing) : 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 달라도 동일한 서비스 제공

 

UI 구현 관련 용어와 특징 (서버, 클라이언트, 웹사이트, 웹페이지) (89-90P)

서버

  • 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 또는 프로그램
  • 웹서버 : 웹 브라우저로부터 HTTP 요청을 받고, HTML 문서를 반환하는 서버
  • 대표적 서버 프로그램) Apache, IIS, nginx, GWS 등

클라이언트

  • 네트워크를 통해 다른 서버에 접속할 수 있는 응용 프로그램이나 서비스
  • 대표적 클라 종류) 파이어폭스, 크롬, IE 등

 

웹 사이트 (web site) : 웹 페이지들의 의미있는 묶음

웹 페이지 (web page) : 월드와이드웹 상에 있는 각각의 문서

 

HTML의 기본 태그 (91P 표)

<!DOCTYPE html> : 웹페이지가 HTML5 문서임을 의미 (HTML5에는 반드시 표기해야 함)

<html> ... </html> : HTML 문서의 시작과 끝을 의미

<head> ... </head> : 스타일과 스크립트를 선언하는 부분

<title> ... </title> : 브라우저에서의 제목 표시

<body> ... </body> : 사용자에게 보여주는 내용이 구현되는 부분

 

HTML의 레이아웃 태그 (91P)

Header : 해당 페이지의 헤더 영역 지정. 로고, 회사명, 사이트맵, 로그인/회원가입 버튼, 검색 버튼 등 위치

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

Section : 해당 페이지의 콘텐츠 영역 지정 시 사용

Article : 독립적인 콘텐츠 항목에 대한 영역 지정 시 사용

Aside : 본문 내용 이외에 표현하고자 하는 기타 내용 영역 지정

Footer : 본문 내용 아래에 위치하도록 지정, 주로 개인정보보호정책, 회사 주소 등 작성

출처https://velog.io/@gud_wns/HTML%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC-CSS

 

주요 HTML 태그 (92P)

<br> : 줄 바꾸기

<p> : 단락 바꾸기 (한 줄 떨어짐)

<hr> : 가로줄

<center> ... </center> : 내용을 가운데 정렬

<font> ... </font> : 내용의 폰트를 바꿈

<ul><li> ... </li></ul> : 순서없는 목록

<ol><li> ... </li></ol> : 순서있는 목록

<table></table> : 표 만들기

   <tr></tr> : 행

      <td></td> : 열

<td colspan=숫자></td> : 그 셀부터 숫자만큼의 오른쪽 셀 병합

<td rowspan=숫자></td> : 그 셀부터 숫자만큼의 아래쪽 셀 병합

 

CSS의 문법 구조 및 선택자의 종류 (92-93P)

CSS(Cascading Style Sheets)으로 HTML의 스타일을 지정할 수 있다.

p {
	color: red;
    text-align: center;
}
  • 선택자(selector)는 스타일을 적용하기 위한 대상. HTML 요소, 아이디, 클래스 사용 가능
  • 스타일은 속성 : 값 형태로 지정

 

선택자의 종류

  • 공용 선택자 (Universal Selector) : HTML의 모든 요소(*)를 선택자로 스타일 적용
  • 태그 선택자 (Type Selector) : 지정한 태그에 스타일 적용 ex) input
  • 클래스 선택자 (Class Selector) : .클래스 형식으로 HTML 요소 그룹화 스타일 지정 가능
  • 아이디 선택자 (ID Selector) : #아이디 형식으로 특정 ID에 스타일 지정

 

HTML 이벤트 처리를 위한 HTML 태그의 여러 속성 (96P)

  • onclick : 버튼과 같은 HTML의 다양한 폼 요소에 지원, 사용자가 해당 요소를 클릭할 때 동작 (만약 false 리턴시 어떤 기능도 수행 X)
  • onmousedown, onmouseup : 마우스를 누를 때와 놓았을 때를 구분하여 동작
  • onmouseover, onmouseout : 마우스 포인터가 해당 요소의 위로 올라오거나 벗어날 때 동작
  • onchange : <input>

 

DOM 개념과 자바스크립트의 관계 (96P)

  • DOM은 자바스크립트에서 HTML 페이지의 요소에 접근/변경할 수 있게 함
  • 웹브라우저는 웹페이지 로딩 시 해당 페이지에 대한 DOM 생성, 이 HTML DOM은 요소들을 계층 구조 형태로 나열
  • HTML DOM을 통해 자바스크립트는 다음과 같은 일 수행 가능
    • 해당 페이지 요소 변경/추가/삭제
    • 해당 페이지 요소 속성 변경/추가
    • 해당 페이지 CSS 변경/추가/삭제
    • 새로운 HTML 이벤트 생성

 

JSP의 스크립트 지향 태그 (표) (104P)

  • 지시어 : JSP 페이지 속성 지정 ( <%@ %> )
  • 선언부 : 변수나 메서드 선언 ( <%! %> )
  • 표현식 : 계산식, 함수 호출 결과 등을 문자열로 출력 ( <%= %> )
  • 스크립트릿 : 자바 코드 기술 ( <% %> )
  • 주석 : JSP 페이지에 설명 넣음 ( <%-- --%> )

 

UI 사용성 테스트 과정(순서) (107P)

1. 계획 수립 : 목적, 평가 내용, 사용 환경, 사용자 등 분석

2. 테스트 설계 : 진행 절차 작성, 테스트 참가자 결정, 테스트 항목의 평가 방향 결정, 다양한 평가 방법으로 설계

3. 테스트 실행 : 설계된 절차대로 진행

4. 결과보고서 작성 : 결과를 통해 문제점 분석 후 보고서 작성, 피드백을 통해 오류 수정

 

UI 사용성 테스트에서 분야별 테스트 내용 (유효성검사, 웹 호환성, 웹 접근성) (108P)

유효성 검사

  • W3C Markup Validator 또는 W3C CSS Validator 등의 검증 시스템을 활용하여 웹 표준 문법 준수 여부

 

웹 호환성

  • 웹 브라우저의 해당 페이지 내에 기능이 정상적으로 동작되는지 점검
  • 다양한 웹 브라우저 버전에서 동등한 레이아웃으로 구현되었는지 여부 확인
  • 최신 웹 표준 기술 사용 여부

 

웹 접근성

  • 어떤 사용자라도 사이트에 접근할 수 있도록 구현되었는지 점검
  • 로그인, 보안, 구간 암호화, 공인인증, 영상, 멀티미디어, 파일 송수신 등에서 사용자 접근성 고려 점검

 

 

테스트의 개요 및 소프트웨어 생명 주기의 V-모델 (110P)

테스트 : 소프트웨어 오류를 찾기 위해 시스템을 실행하여 평가하는 작업

테스트 과정에서 필요한 역할은 소프트웨어 아키텍트, 테스트 매니저이다.

 

테스트 방법 및 그 종류 <표1-2> <표1-3> (112-113P)

통합 테스트 방법

  • 기능적 요구사항 : 요구사항 명세서, 비즈니스 절차, 유스케이스 등 명세서 기반의 블랙박스 테스트
  • 비기능적 요구사항 : 성능 테스트, 회복 테스트, 보안 테스트, 내부 시스템 메뉴 구조, 구조적 요소에 대한 화이트박스 테스트
반응형
저작자표시