04 .UI 제작하기

UI 화면 제어기능을 어떤 방법으로 할 것인지 선택할 수 있다.
자가 검증을 위하여 단위별 상세 체크리스트를 작성할 수 있다.
UI 구현 표준에 따라서 GUI 디자인 가이드를 기반으로 UI를 제작할 수 있다.

UI 개발환경 수립

1. UI 디자인 및 퍼블리싱 환경 수립

UI 제작을 위하여 시스템의 목표 및 범위에 따라 그래픽 저작도구 및 퍼블리싱 도구를 PC에 설치하여 이미지로 만들고, HTML 및 CSS로 웹 문서화하는 퍼블리싱을 수행한다

 

2. UI 개발환경 수립

제작된 이미지와 퍼블리싱된 파일을 개발하기 위하여 Web 및 App 환경의 엔진 및 통합 개발도구를 설치한다.

UI 제작

1. UI 디자인 가이드 숙지

제작될 UI의 공통 규칙(네이밍 규칙, 폰트, 색상 등) 및 리소스 내용(레이아웃, 내비게이션, 버튼, 이미지 등) 등이 언급된 UI 디자인 가이드를 숙지한다.

2. 개발언어 숙지

(1) HTML5

(가) DOCTYPE(Document Type Declaration)

HTML5 문서 최상단에 DOCTYPE을 반드시 넣어 주어야 한다. DOCTYPE은 HTML 과 XHTML의 두 가지가 있으므로 HTML5 작성 시 HTML로 작성할지, XHTML로 작 성할

지를 첫 부분에 선언해 주어야 한다

(나) 요소(Element)

화면의 영역을 나타내는 Semantic 태그들과 화면 제어 기능과 관련된 Element 요 소들로 구성한다.

(다) 인풋 타입(input Type)

HTML 5 화면에서 사용자로부터 데이터를 받아들이기 위해 상호적인 제어가 가능 한 input Type의 태그는 여러 가지 타입으로 활용 가능하다

 

(라) 속성(attribute)

속성(attribute)은 특징을 명세한다. 요소에 추가적인 정보를 제공하며, 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

(2) CSS

(가) 기본 구조

CSS 규칙은 선택자(selector)와 선언부(declaration)로 나뉜다. 선언부는 다시 속성 (property)과 속성값(value)으로 나뉜다.

(나) 적용 방법

CSS 적용 방법은 인라인/내부 스타일 시트/외부 스타일 시트의 세 가지로 적용할 수 있다

 

(다) 클래스(class) 선택자

클래스를 선택 가능한 선택자이다. 예를 들어 p{color:blue}로 지정하면 문단의 색깔 이 파란색으로 지정된다. 

 

(라) 아이디(id) 선택자

클래스는 .을 이용하여 정의하고 아이디는 #을 이용하여 정의한다. 클래스와 아이 디의 차이점은 클래스의 경우 여러 개를 사용할 수 있지만 아이디는 고유성을 가 지므로 한 문서에 한 번만 사용할 수 있는 점이다. 

 

(마) 텍스트 color

컬러의 속성을 텍스트, 문단, 테이블 안에 적용하여 사용이 가능하다

(바) direction

direction 속성을 사용하면 글자의 방향성을 지정할 수 있다. 

direction 속성값을 ltr로 지정

(사) line-height

라인의 높이를 지정한다. 라인의 높이라기보다 줄간격으로 해석하는 것이 좋다. 

 

단위별 상세 체크리스트 검토

UI 자가검증을 위하여 제작한 UI에 대한 레이아웃, 색상 등 종합적인 측면의 상세 체크리 스트를 작성한다.

4-2 단위 테스트 수행

작성된 체크리스트에 따라서 단위 테스트를 수행할 수 있다.
단위 테스트 수행한 결과의 오류 여부를 확인하여 반영할 수 있다

1단위 테스트에 대한 이해

1. 단위 테스트의 개념

UI 기반의 단위 테스트는 사전에 정의된 테스트 시나리오별로 테스트를 수행한다. 테스트 를 통해 시스템의 안정성, 견고성, 사용성을 검증할 수 있으며, 사용자에게 편의성을 제공 할 수 있다.

2. 단위 테스트의 특징

2 테스트 케이스 설계 기법

UI 기반의 단위 테스트 수행 시, 효율적인 테스트를 수행하기 위하여 테스트 목적에 따라 테스트 케이스를 설계해야 한다.

1. 명세 기반 테스트 케이스 설계

(1) 개념

주어진 명세를 바탕으로 테스트 케이스를 도출하고 테스트 케이스를 실행해 봄으로써 결함이 없음을 보장하는 테스트 기법이다.

(2) 종류

 

2. 경험 기반 테스트 케이스 설계

(1) 개념

이전에 테스트 수행자(또는 테스터)가 다루었던 유사 애플리케이션이나 기술에서의 경 험, 직관, 테스터의 기술 능력으로부터 테스트 케이스를 추출하는 기법이다.

(2) 종류

3. 구조 기반 테스트 케이스 설계

(1) 개념

소스코드와 개발 설계 문서등을 참고하여 SW를 제작한 정보를 참고하여 테스트 사례 별로 테스트 케이스를 설계하는 기법이다.

 

(2) 종류

단위 테스트 자동화 툴

1. 단위 테스트 자동화 툴의 필요성

단위 테스트 수행 시 자동화 테스트 도구를 도입하면, 테스트 수행, 평가 및 프로세스에 대해 많은 시간과 비용을 줄일 수 있어 테스트의 효율을 높이고, 테스트의 충분성을 나타 내는 지표인 코드 커버리지(Code Coverage)를 향상시킬 수 있다.

2. 단위 테스트 자동화 툴의 종류

단위 테스트 수행 시 자동화 테스트 도구를 도입하면, 테스트 수행, 평가 및 프로세스에 대해 많은 시간과 비용을 줄일 수 있다

3. 단위 테스트 자동화 툴 도입 효과

단위 테스트 자동화 툴 도입 시 시스템 기능에 대한 결함 발견 확률이 높아지고, 회귀 테 스트(Regression Test)를 같이 자동화시킨다면 결함 발견의 확률이 한층 더 높아진다. 또 한, 자동화 테스트가 실행되는 동안 테스터가 좀 더 중요한 이슈에 집중하여 업무를 진행 할 수 있고, 테스트 통과를 눈으로 확인하면서 시스템의 품질을 파악하기에도 수월하다