UI 제작하기

4-1. UI 제작

UI 화면 제어기능을 어떤 방법으로 할 것인지 선택할 수 있다

자가 검증을 위하여 단위별 상세 체크리스트를 작성할 수 있다.

UI 구현 표준에 따라서 GUI 디자인 가이드를 기반으로 UI를 제작할 수 있다

1.UI 개발환경 수립

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

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

구분	저작도구	설명
그래픽 저작도구	PPP	미국의 A사가 발표한 저작도구 비트맵을 기반으로 다양한 사진과 이미지 처리
	III	미국의 A사가 발표한 저작도구 벡터를 기반으로 아이콘스케치
퍼블리싱 도구	아톰 텍스트 에디터	벡터를 기반으로 아이콘스케치 HTML, CSS, JAVASCRIPT 기술로 웹 화면 구현 및 UI 제어

2. UI 개발환경 수립

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

구분	저작도구	설명
Web 개발 환경	JDK	Java Development Kit JRE(java runtime engine) 포함: java 실행 시 사용
Web 개발 환경	Eclipse	개발자별 운영체제에 적합한 이클립스 설치 자바와 jsp 개발 위한 통합 개발 툴
Web 개발 환경	Tomcat	jsp로 구축된 웹사이트 파일을 실행시켜 주는 엔진 시스템 종류(예: 32bit, 64bit)에 적합한 톰캣 설치
App 개발 환경	Android Studio	구글의 공식 Android 앱 개발을 위한 IDE
App 개발 환경	Xcode	애플의 macOS, iOS, watchOS 및 tvOS 개발 전용 통합개발도구

2.UI 제작

1. UI 디자인 가이드 숙지

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

2. 개발언어 숙지

(1) HTML5

(가) DOCTYPE(Document Type Declaration)

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

(나) 요소(Element)

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

구분	Element	설명
Language	Header	문서의 Header 영역을 나타낸다.
Language	Header	문서의 Header 영역을 나타낸다.
Language	Nav	문서 내의 Navigation 요소를 나타낸다.
Language	Section	문서 영역 구성, 문서 구조를 H1~H6태그와 사용한다.
Language	Aside	주요 콘텐츠 외 참고 가능한 콘텐츠 구성 시 사용한다.
Language	Audio,Video	HTML5 Element 중 멀티미디어 콘텐츠를 표시할 때 사용한다.
화면 제어 기능	Embed	플러그인 형태의 콘텐츠를 표시할 때 사용한다.
화면 제어 기능	Progress	작업 진행상황을 나타낼 때 사용한다
화면 제어 기능	Meter	HTML5 Element 중 멀티미디어 콘텐츠를 표시할 때 사용한다.
화면 제어 기능	Canvas	Bitmap Graphic을 표시할 때 사용한다.
화면 제어 기능	Time	날짜, 시간을 표시할 때 사용한다.
화면 제어 기능	progress	날짜, 시간을 표시할 때 사용한다.

(다) 인풋 타입(input Type)

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

(라) 속성(attribute)

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

(마) 웹 폼(Web Form)

checkbox, radio, password 등 몇 개의 입력타입을 가지고 있는 Form이다.

Web Form	설명
datetime	날짜와 시간을 달력 형태로 보여주는 type
datetime	날짜와 시간을 달력 형태로 보여주는 type
date	날짜를 달력 형태로 보여주는 type
week	날짜를 주 단위로 보여주는 type
time	시간의 정보를 보여주는 type
email	email을 받아들이는 type<input type = “ email ”/>
url	url의 정보를 나타내는 type<input type = “ url ”/>
color	색상을 선택하는 type<input type = “ color ”/>
search	검색어를 입력하는 검색 입력 type<input type = “ search ”/>
number	숫자를 입력하는 type< input type = “ number” min= “ 1 ” max = “ 100 ” />
range	입력형태를 number Type에서 제공할 수 있는 Spin Control과 다르게 Slide Control로 rendering< input type = “ range” min= “ 0 ” max = “ 100 ” step=“10“ value= ” 0 “ />
tel	완전히 숫자만 입력하는 전화번호 type< input type = “ tel” />
file	file을 선택하는 컨트롤 type< input type = “ file ” accept = “ image / *” multiple / >

(2) CSS

(가) 기본 구조

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

(나) 적용 방법

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

적용 방법	설명
인라인	HTML 태그에 직접 적용 <div style = "background:#fff000">
내부 스타일 시트	HTML 문서 내 style 태그로 CSS 적용 <style> div{background:#fff000}
외부 스타일 시트	HTML 외부에서 CSS 파일을 적용하는 방법 < link href="style.css.css" type="text/css" rel="stylesheet">

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

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

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

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

(마) 텍스트 color

컬러의 속성을 텍스트, 문단, 테이블 안에 적용하여 사용이 가능하다.
<td style = color : red“ > 셀 안에 붉은색으로 지정 </td>

(바) direction

direction 속성을 사용하면 글자의 방향성을 지정할 수 있다.
<p style =“ direction: ltr” > direction 속성값을 ltr로 지정 </p>

(사) line-height

라인의 높이를 지정한다. 라인의 높이라기보다 줄간격으로 해석하는 것이 좋다
< p style =“ line-height: 10px; background-color:gray;> </p>

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

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

구분	항목	설명
레이아웃	레이아웃의 일관성	화면의 레이아웃이 일관되게 적용되는가?
레이아웃	데이터 입력 영역의 시각화	데이터 입력 영역이 시각적으로 명확하게 표현되는가?
레이아웃	메뉴의 접근성	한 화면에서 스크롤 없이 모든 메뉴의 접근이 가능한가?
색상	색의 대비	텍스트와 배경색의 시각적 대비가 명확한가?
색상	색상의 적정성	주색상에는 3가지 색상과 강조색으로 색 선택을 하였는가?
호환성	플러그인 기술 사용 여부	플래시 애니메이션을 사용하고 있는가?