[정보처리산업기사 | 필기] 3. 화면 구현

2023년 08월 06일 19시 18분 10초에 업로드 된 글입니다.

작성자: 이주여이

1-1. UI 설계 내용 확인

1. UI(User Interface)

CLI(명령어): 사용자 시스템이 상호작용하며 명령과 출력이 텍스트 형태로 표현
GUI(그래픽): 구성요소들이 그래픽 형태로 표현
NUI(자연어): 몸짓, 말소리로 IT 기기를 사용할 수 있는 사용자 인터페이스

2. UI 표준 및 지침

시스템 전반에 걸쳐 모든 UI에 공통 적용되는 내용을 의미하며 화면 구성, 화면 이동 등이 포함
UI 개발 과정에서 UI 요구사항이나 구현 제약사항 등 지켜야야 할 공통 조건

3. 소프트웨어 아키텍처

소프트웨어 구성요소 중 외부에 드러나는 요소 특성과 요소들 간의 관계를 표현

4. 제약사항(Constraints Requirements)

시스템 설계 및 구현시 관련된 기술이나 표준, 규정
기술 제약사항과 표준 적합 제약사항으로 분류

5. UI 개발 도구 분류

화면 설계
1. 파워포인트
2. 와이어프레임
3. 스토리보드
4. 목업
프로토타입
UI 디자인

6. UI 설계서

웹 사이트의 페이지 구성요소를 기록한 설계도이며 정적 화면 형태로 와이어 프레임이나 목업 등을 이용하여 작성

1-2. UI 메뉴 구조 확인

1. 사용성(Usability)

사용자들에 의해 제품이 사용될 때와 같은 맥락에서 사용했을 때의 효과성, 효율성, 만족도를 의미
사용자가 업무를 쉽고 편리하게 수행하는 것에 의미를 둠

2. 유용성(Usefulness)

사용자가 업무를 얼마나 정확하게 수행할 수 있는지의 정도

3. 정보 구조(Information Architecture)

설계 단계에서 사이트를 구성하는 처리 내용, 메뉴 구조를 표현함으로써 사이트의 구조를 파악
계층적 구조, 계열 구조, 그리드 구조, 네트워크 구조

4. 내비게이션(Navigation)

사이트에서 원하는 것을 찾도록 안내
사용자 중심으로 설계 및 구현
사용자가 직관적으로 찾을 수 있도록 설계(메뉴, 버튼 등)

5. 유스케이스(Use Case)

사용자 측면에서의 요구사항
기록된 내용을 토대로 구현
외부 시스템이나 서브 시스템과의 의사소통 수단
단위 업무에 대한 독립적인 기능을 수행할 수 있도록 표현

2-1. UI 구현 지침 확인

1. W3C(World Wide Web Consortium)

월드 와이드 웹을 위한 표준을 개발하고 장려하는 국제 컨소시엄 조직
웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발한다.

2. 한국형 웹 콘텐츠 접근성 지침(KWCAG, Korean Web Content Accessibility Guidelines)

장애인이 비장애인과 동등하게 웹 콘텐츠에 접근할 수 있어야한다.

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

특정 운영체제나 웹 브라우저에 상관없이 접속할 수 있어야한다.

4. 웹의 3요소

웹 표준(Web Standards): HTML, CSS , JS에 대한 규정과 다른 기종이나 다른 플랫폼에서도 웹페이지가 구현되도록 제작한다.
웹 접근성(Web Accessibility): 어떠한 사용자, 어떠한 기술 환경에서도 사용자가 전문적인 능력없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있다.
웹 호환성(Cross Browsing): 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공한다.

2-2. UI 구현

1. 서버

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

2. 클라이언트

네트워크를 통해 다른 서버 시스템의 컴퓨터에 접속할 수 있는 응용 프로그램 혹은 서비스
웹 브라우저에 URL을 입력하면 해당 URL의 웹 서버로 요청을 전달한다.
파이어폭스, 크롬, IE …

3. 웹 사이트(Web Site)와 웹 페이지(Web Page)

웹 사이트: 인터넷 프로토콜 기반의 네트워크에서 URL을 통해 보이는 웹 페이지들의 묶음을 의미한다.
웹 페이지: WWW 상에 있는 개개의 문서를 의미한다.

3. HTML

<!DOCTYPE html> <!-- 웹 페이지가 HTML5 문서임을 의미 -->
<html> <!-- HTML 문서 시작 -->
<head> <!-- 스타일 및 스크립트 선언부 -->
    <title> </title> <!-- 브라우저 제목 -->
</head>
<body> <!-- 구현체 -->
<h1>Hello World!</h1>
</body>
</html> <!-- HTML 문서 끝 -->

header: 로고, 회사명, 사이트 맵, 로그인/회원가입 버튼, 검색 버튼 등
nav: 메뉴 영역
section: 콘텐츠 영역
article: 독립적인 콘텐츠 영역
aside: 서브 메뉴 영역
footer: 개인정보 보호정책, 회사 주소 등

4. CSS

1. CSS 문법

a { color: black; text-decoration: none; }

a - 선택자: 스타일을 적용하기 위한 대상(id, class 형태로 지정)
color: black, text-decoraton: none: 스타일은 ‘속성 : 값’으로 지정

2. CSS 선택자

공용 선택자: 해당 HTML 요소 모두 스타일이 적용된다.

* { font-family: ... }

태그 선택자(h1, span, p …): 지정한 태그에 스타일이 적용된다.

span { padding-left: 10px; }

클래스 선택자(.wrap, .login-form …): 특정 HTML 요소들을 그룹화하여 스타일을 지정한다.

.wrap { display: flex; }

아이디 선택자(#login-form, #id, #password …): 특정 ID에 스타일을 지정한다.

#login-form { width: 500px; display: flex; justify-content: space-between; }

5. Javascript

1. 자바스크립트 구현 예

<script>
    window.addEventListener('DOMContentLoaded', function() {
        alert("Hello World!");
})
</script>

2. 자바스크립트 작성 방법

<!DOCTYPE html> <!-- 웹 페이지가 HTML5 문서임을 의미 -->
<html> <!-- HTML 문서 시작 -->
<head> <!-- 스타일 및 스크립트 선언부 -->
    <title> </title> <!-- 브라우저 제목 -->
</head>
<body> <!-- 구현체 -->
<h1>Hello World!</h1>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        alert("Hello World!");
})
</script>
</body>
</html> <!-- HTML 문서 끝 -->

<body> 영역 내부에 <script> 태그를 선언 후, 작성한다.

3. HTML 이벤트 처리

onclick: 해당 요소 클릭시 이벤트 발생
onmouseover, onmouseout: 마우스 포인터가 해당 요소 위로 올라오거나 벗어났을 때 이벤트 발생
onchange: <input> , <select> , <textarea> 요소에서 지원하며 해당 요소의 입력 포커스를 다른 곳으로 이동할 때 이벤트 발생
onload: <body> 태그에서 사용되며 해당 페이지와 해당 페이지에 연결된 외부 페이지가 완전히 로딩되었을 때 이벤트 발생

4. DOM(Document Object Model)과 자바스크립트 관계

DOM은 자바스크립트에서 HTML 페이지의 요소에 접근하거나 변경할 수 있다.
웹 브라우저는 웹 페이지가 로딩될 때 해당 페이지에 대한 DOM을 생성하며 생성된 DOM은 해당 페이지의 요소들을 계층 구조의 형태로 나열한다.

2-3. UI 테스트

1. 사용성 테스트(Usability Test)

목적
1. 사용자의 제품 만족도, 노력 대비 높은 효율성, 개발 생산성 대비 낮은 에러, 학습 이해도, 높은 품질, 사용자 실수 최소화 등의 효과를 달성 할 수 있다.
특징
1. 사이트 구성 메뉴의 문제점과 요구사항의 반영 여부를 점검한다.
2. 사용자가 접근하고 이용하는 측면에서 선호할만한 웹 사이트의 기능을 테스트한다.
3. 구현 전체 절차에 사용자의 재 요구사항이 반영되도록한다.

2. 사용성 테스트 과정

계획 수립: 목적, 평가 내용 분석, 사용 환경, 사용자 분석
테스트 설계: 진행 절차 작성, 참자가 결정, 테스트 항목 결정
테스트 실행
결과 보고서 작성: 데이터 분석 후, 결과를 통해 문제점을 분석하고 필요한 의견을 포함하여 보고서 작성

3. 테스트 케이스 작성

어떤 실행 환경에서 어떤 입력 값들을 부여해 원하는 결과가 정확히 나오는지 판단한다.

4. 유효성 검사

HTML 문서 작성 후, 실수를 대비해 HTML 문서를 검사한다.

저작자표시 비영리 동일조건

'ETC > 정보처리산업기사' 카테고리의 다른 글

[정보처리산업기사 \| 실기] 성적관리 프로그램 (0)	2023.08.09
[정보처리산업기사 \| 실기] 수강신청 싸이트 (0)	2023.08.08
[정보처리산업기사 \| 필기] 2. 응용 SW 기초 기술 활용 (0)	2023.08.06
[정보처리산업기사 \| 필기] 1. 프로그래밍 언어 활용 (0)	2023.08.06
[정보처리산업기사 \| 실기] 쇼핑몰 회원관리 (0)	2023.08.02

다음글이 없습니다.

이전글이 없습니다.