03. UI 저작도구 활용하기

UI 저작도구 파악

개발환경에 적합한 저작도구를 파악할 수 있다.

UI 개발환경 파악

1. WEB 개발환경(JSP 기준) 파악

WEB 애플리케이션 개발을 위해서 구축해야 하는 개발환경을 파악한다. 보통 자바 실행을 위한 JDK(Java Development Kit), 자바와 JSP(Java Server Page) 통합 개발을 위한 Eclipse (자바 개발 프로그램), JSP로 구축된 웹사이트 파일을 실행시켜 주는 엔진 역할의 톰캣 (Tomcat)을 개발 환경에 설치한다.

2. App 개발환경 파악

App이 실행될 운영체제는 대체로 디바이스에 따른 안드로이드와 iOS로 구분된다. 안드로 이드는 구글에 의해 개발되고 배포되는 운영체제이며, iOS는 애플의 스마트기기에 내장되 어 있는 운영체제이다. 스마트기기에서 실행되는 애플리케이션의 경우 네이티브 앱, 웹 앱, 하이브리드 앱으로 구분된다.

UI 저작도구 파악

1. UI 개발 목표 및 범위 정의

시스템 개발 전에 소프트 웨어 개발 목표 및 범위 정의 단계에서 UI 분야의 개발 목표 및 범위 정의를 필수적으로 수행하여 시스템 개발 계획 전반에 반영하고, 성공적인 수행을 위해 이해관계자 간에 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립한다. 수립한 개발 목표 및 범위를 정의하기 위해서 문서편집 도구(예: 마이크로소프트 워드 및 파워포인트, 한글과 컴퓨터의 한글) 및 프로토타입 도구를 활용하여 UI 개발 목표 및 범위를 정의한 내용을 공유한다.

2. UI 화면 디자인

UI 화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포그래피, 화면 디자인 요소들을 그래 픽 형태로 정의한다. 그래픽 저작도구를 활용하여 설계된 UI에 따라 화면을 디자인한다.

3. UI 퍼블리싱

퍼블리싱을 통해 구현된 화면 디자인을 웹 브라우저에서 볼 수 있도록 웹 문서화하는 코 딩 작업을 수행한다. 퍼블리싱의 코딩 작업에는 HTML, CSS, 스크립트(JavaScript, jQuery) 언어를 이용한다.

4. UI 개발

퍼블리싱을 통해 디자인을 최대한 살려서 작성된 html, css, jquery 작업파일을 기반으로 시스템이 작동하고, 데이터와 연결해 주는 코딩을 수행한다.

---

UI 저작도구 선정

UI 구현 표준 검토 결과를 바탕으로 저작도구를 선정할 수 있다.

UI 구현 표준 검토 결과 파악

1. 사이트의 특성을 고려한 UI의 요소와 패턴으로 정의되어 있는가

사이트의 특성을 고려한 UI의 요소와 패턴으로 UI가 정의되어 있는지 파악하고, 통일되고 일관되며 재사용이 가능하도록 UI의 표준이 작성되어 있는지 파악한다.

2. 웹 호환성을 위해서 다양한 브라우저에서 실행되는가

HTML5 기반의 웹 표준을 준수하여 다양한 브라우저(예: 인터넷익스플로러, 크롬)에서 실 행되고, 다양한 형태(예: 네이티브 앱, 하이브리드 웹, web, 웹 앱)로 실행되는지 파악한다.

3. 장애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근 성을 준수하는가

대체 텍스트, 광과민성 발작 예방, 멀티미디어 대체 수단, 쉬운 내비게이션 등을 통해 장 애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근성을 준수하는지 파악한다.

UI 저작도구 선정

1. 프로토타입의 목적 수립

프로토타입의 목적은 주로 시나리오에 대한 검증, 또는 인터랙션에 대한 느낌의 확인이다. 목적에 따라서 시나리오 검증을 위한 툴은 빠르게 제작할 수 있고 기능이 간단하면서 충 실도가 낮은 방법을 활용하여 구현하게 된다. 반면 인터랙션 검증을 위한 툴은 느리게 제 작되지만 기능이 복잡하면서 충실도가 높은 방법으로 구현하게 된다.

2. 프로토타입 목적에 따른 UI 저작도구 선정

프로토타입의 목적과 방법에 따라서 프로토타입 방법(예: 페이퍼 프로토타입, 스토리보드, 디지털 프로토타입)을 선택하고, 이에 따른 UI 저작도구를 선정한다.

---

저작도구 이용하여 프로토타입 UI 제작

선정된 저작도구를 이용하여 프로토타입 UI를 제작할 수 있다.

프로토타입(Prototype)의 개요

1. 프로토타입 개념

사용자의 요구사항을 충분히 분석할 목적으로 시스템의 중요 일부분을 우선 구현한 후 반 복하는 개발 모델을 프로토타입이라고 한다.

2. 프로토타입 특징

프로토타입은 사전에 UI를 시험제작하여서 이해관계자 간의 원활한 의사소통을 수행하는 개발 모델이다. UI를 통해서 프로토타입을 개발한 후에는 이해관계자 간에 평가 및 수정 과정을 반복하면서 요구사항을 검토한다.

3. 프로토타입 종류

프로토타입은 다양한 기능 구현의 정도를 고려하여 수평적 프로토타입과 수직적 프로토타 입으로 구분한다.

출처: NCS학습모듈 UI구현