UI 저작도구 파악
개발환경에 적합한 저작도구를 파악할 수 있다.
UI 개발환경 파악
WEB 개발환경 파악
WEB 애플리케이션 개발을 위해서 구축해야 하는 개발환경을 파악한다. 보통 자바 실행을 위한 JDK(Java Development Kit), 자바와 JSP(Java Server Page) 통합 개발을 위한 Eclipse (자바 개발 프로그램), JSP로 구축된 웹사이트 파일을 실행시켜 주는 엔진 역할의 톰캣 (Tomcat)을 개발 환경에 설치한다.
App 개발환경 파악
App이 실행될 운영체제는 대체로 디바이스에 따른 안드로이드와 iOS로 구분된다. 안드로 이드는 구글에 의해 개발되고 배포되는 운영체제이며, iOS는 애플의 스마트기기에 내장되 어 있는 운영체제이다. 스마트기기에서 실행되는 애플리케이션의 경우 네이티브 앱, 웹 앱, 하이브리드 앱으로 구분된다.
UI 저작도구 파악
UI 개발 목표 및 범위 정의
시스템개발전에소프트웨어개발목표및범위정의단계에서UI 분야의개발목표및 범위 정의를 필수적으로 수행하여 시스템 개발 계획 전반에 반영하고, 성공적인 수행을 위해 이해관계자 간에 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립한다. 수립한 학습 목표 • 개발환경에 적합한 저작도구를 파악할 수 있다.
UI 화면 디자인
UI 화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포그래피, 화면 디자인 요소들을 그래 픽 형태로 정의한다. 그래픽 저작도구를 활용하여 설계된 UI에 따라 화면을 디자인한다.
UI 퍼블리싱
퍼블리싱을 통해 구현된 화면 디자인을 웹 브라우저에서 볼 수 있도록 웹 문서화하는 코 딩 작업을 수행한다. 퍼블리싱의 코딩 작업에는 HTML, CSS, 스크립트(JavaScript, jQuery) 언어를 이용한다.
UI 개발
퍼블리싱을 통해 디자인을 최대한 살려서 작성된 html, css, jquery 작업파일을 기반으로 시스템이 작동하고, 데이터와 연결해 주는 코딩을 수행한다.
UI 개발환경을 파악한다.
일반적인 사이트 개발을 위한 WEB 개발환경(JSP 기준)을 파악한다.
일반적인 웹사이트 개발을 위한 개발언어로는 jsp, asp, php 등이 사용 가능하다. jsp의 경 우, JDK 설치를 통해서 java 파일을 구동시키고, Elipse와 같은 통합 개발도구를 설치하여 java 파일과 jsp 파일을 기준으로 시스템을 개발한다. 또한, 웹서버인 Tomcat이 설치되어 jsp로 구축된 웹사이트 파일을 실행시킨다.
App 개발환경을 파악한다.
스마트폰에서 구동되는 애플리케이션인 앱(App)의 경우 운용 플랫폼 환경에 따라 크게 3 가지로 구분된다. 즉, 스마트폰 운영체제에서 프로그래밍 언어를 사용하여 제작하는 네이 티브앱, 웹브라우저를통해실행되는앱인웹앱, 웹표준기술과네이티브앱변환을 통해서 구동되는 하이브리드 앱으로 구분되며, 운영체제의 종류에 따라 Android Studio(안 드로이드 환경)와 Xcode(iOS)를 이용하여 앱을 개발한다.
UI 저작도구를 파악한다.
UI 개발 목표 및 범위를 정의한다.
시스템 개발 전에 이해관계자(예:사용자, 기획자, 디자이너, 개발자) 간에 소프트웨어 개발 목표에따른UI에대한개발목표및범위를정한다. 수립한개발목표및범위는문서편 집도구 및 프로토타입 도구를 통해서 정의하여 이해관계자 간에 공유한다.
UI 화면 디자인을 위한 저작도구를 파악한다.
UI 화면 디자인에 활용될 레이아웃, 컬러, 타이포그래피, 화면 디자인 요소 등을 정의하여 전체적으로 통일감 있게 화면 디자인을 만드는 단계로, 사용하는 디자인 저작도구에 따라 화면 디자인된 이미지의 형태가 벡터 또는 비트맵 형태로 구현된다. 대표적인 툴로서 미 국 A사에서 개발한 그래픽 저작도구의 경우 비트맵 기반으로 다양한 사진과 이미지를 저 작할수있고, 그외벡터기반의그래픽저작도구의경우벡터를기반으로빠르고유연 한 저작이 가능하며, 인터페이스 디자인 기반의 그래픽 저작도구의 경우 제작된 화면들을 실제 동작되는 것처럼 프로토타이핑할 수 있다.
UI 퍼블리싱을 위한 저작도구를 파악한다.
완성된 이미지 형태의 화면 디자인 이미지를 웹 브라우저에서 볼 수 있도록 HTML, CSS, Javascript, jQuery 형태로 웹 문서화하는 퍼블리싱 단계에서 코딩이 가능한 편집도구를 파악한다.
UI 개발을 위한 저작도구를 파악한다.
웹 개발 경우의 설치항목을 파악한다.
WEB 개발(JSP 기준)의 경우, 웹 개발을 수행하기 위해 자바 구동을 위한 자바 엔진(JDK), 웹사이트 및 앱 개발을 위한 통합 개발도구인 Eclipse, 웹서버 구동을 위한 Tomcat을 개발환경에 설치한다.
앱 개발 경우의 설치항목을 파악한다.
앱 개발의 경우, 운영체제에 따라 안드로이드에서는 Android Studio를 설치하여 안드로 이드 전용 앱 개발을 수행하고, iOS에서는 Xcode를 설치하여 iOS 전용 앱 개발을 수행 한다.
UI 저작도구 선정
UI구현 표준 검토 결과를 바탕으로 저작도구를 선정할 수 있다.
UI 구현 표준 검토 결과 파악
사이트의 특성을 고려한 UI의 요소와 패턴으로 정의되어 있는가
사이트의 특성을 고려한 UI의 요소와 패턴으로 UI가 정의되어 있는지 파악하고, 통일되고 일관되며 재사용이 가능하도록 UI의 표준이 작성되어 있는지 파악한다.
웹 호환성을 위해서 다양한 브라우저에서 실행되는가
HTML5 기반의 웹 표준을 준수하여 다양한 브라우저(예: 인터넷익스플로러, 크롬)에서 실 행되고, 다양한 형태(예: 네이티브 앱, 하이브리드 웹, web, 웹 앱)로 실행되는지 파악한다.
장애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근 성을 준수하는가
대체 텍스트, 광과민성 발작 예방, 멀티미디어 대체 수단, 쉬운 내비게이션 등을 통해 장 애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근성을 준수하는지 파악한다.
UI 저작도구 선정
프로토타입의 목적 수립
프로토타입의 목적은 주로 시나리오에 대한 검증, 또는 인터랙션에 대한 느낌의 확인이다. 목적에 따라서 시나리오 검증을 위한 툴은 빠르게 제작할 수 있고 기능이 간단하면서 충 실도가 낮은 방법을 활용하여 구현하게 된다. 반면 인터랙션 검증을 위한 툴은 느리게 제 작되지만 기능이 복잡하면서 충실도가 높은 방법으로 구현하게 된다.
프로토타입 목적에 따른 UI 저작도구 선정
프로토타입의 목적과 방법에 따라서 프로토타입 방법(예: 페이퍼 프로토타입, 스토리보드, 디지털 프로토타입)을 선택하고, 이에 따른 UI 저작도구를 선정한다.
수행 순서
프로토타입 목적을 수립한 후 이에 따른 방법을 선택한다.
시나리오 검증 목적이라면 낮은 충실도 형태의 프로토타이핑을 수행한다.
아이디어를 도출해 내기 위하여 시나리오 스케치를 한다.
아이디어 표현, 브레인스토밍을 통해서 아이디어를 도출한다(페이퍼 프로토타입의 전 단계).
속도감 있게 제작하기 위해 페이퍼 프로토타입 제작 여부를 고려하여 제작한다.
종이를 이용하여 해당 서비스를 실제 구현한 것처럼 제작하는 방법이며, 화면 설계 시 문제를 발견하고자 할 때 활용한다. 디테일에 속도감 있고 유연성 있게 활용한다.
충실도 높은 프로토타입을 위해 와이어프레임 제작 여부를 고려하여 제작한다.
와이어프레임 제작 툴을 이용하여 작업하며, 페이퍼 프로토타입 결과를 한 단계 더 구 현하여 충실도가 높은 형태로 정리하는 데 적합하다. 실제 콘텐츠의 기능을 세밀하게 표현하기도 하나 정적인 화면들로 구성되기 때문에 이용의 흐름과 같은 실제 사용자 들의 경험은 그대로 표현하지 못하는 단점이 있다.
서비스의 이해도를 높이기 위해 스토리보드 제작 여부를 고려하여 제작한다.
스토리보드는 스케치한 내용이나 그림을 순서대로 배치하여 사용 사례를 표현한 형태 이다. 서비스를 시각적이고 풍부한 묘사로 표현하므로 정제된 아이디어를 나타낼 수 있다. 프로세스나 시스템을 보여줄 때 유용하며, 서비스와 관련된 이해도를 높여준다.
인터랙션 확인 목적이라면 높은 충실도 형태의 프로토타이핑을 수행한다.
(1) 디지털 프로토타입 제작 여부를 고려하여 제작한다.
마우스클릭, 키보드입력등의인터랙션에대한사용자반응을바로확인할수있고, 반복 테스트가 중요하다. 주의할 점은 페이퍼 프로토타입과 전반적으로 유사하다.
카드보드 프로토타입 제작 여부를 고려하여 제작한다.
골판지 등을 이용해 물리적인 시제품을 만들어 서비스의 많은 측면을 검토하는 방법 으로 서비스 개발의 후반 단계에 유용한 방법이다.
피지컬 프로토타입 제작 여부를 고려하여 제작한다.
제품이나 서비스가 완성되기 전에 물리적인 프로토타입을 제작하고 테스트하는 방법 이다. 개발 초기에 신속하게 대강의 프로토타입을 제작하고, 후기에는 동작과 관련된 외형을 프로토타입으로 제작하고 검증하는 데 사용한다.
프로토타입 목적에 따른 UI 저작도구를 선정한다.
1. F 저작도구 적용의 적절성을 판단한다.
모바일 전용 프로토타입 툴로서, 화면 간의 이동을 확인함으로써 시나리오를 검증하는 데 최적화되어 있다. 화면에 터치 영역을 지정하고 이동할 화면을 선으로 연결한 뒤 트랜지 션 효과를 정해주면 간단한 화면 간 이동 효과가 만들어진다.
2. I 저작도구 적용의 적절성을 판단한다.
시나리오 검증에 최적화되어 있는 툴로서, 시중의 툴 가운데 가장 빠른 프로토타이핑을 할 수 있다. 모바일 환경에서 발생하는 대부분의 터치 인터랙션과 트랜지션을 제공한다. 웹과 와이어프레임 제작도 지원한다.
3. O 저작도구 적용의 적절성을 판단한다.
K사에서 제공하는 프로토타이핑 툴로서, 내부에서 제공하는 컴포넌트가 다양하기 때문에 준비된 리소스가 없어도 프로토타이핑이 가능하다. 트랜지션 효과는 지원하지 않는다.
4. P 저작도구 적용의 적절성을 판단한다.
준비된 화면이 있으면 빠르게 인터랙션만 추가해서 프로토타입을 할 수 있으며, 오븐처럼 기본적으로 제공되는 컴포넌트가 있기 때문에 이를 활용한 프로토타이핑도 가능하다.
5. O 저작도구 적용의 적절성을 판단한다.
패치라고 하는 각각의 기능을 가진 박스들을 선으로 연결하여 하나의 프로그램을 완성시 키는 형태이며, 인터랙션 프로토타이핑을 하는 데 최적화되어 있다. High-Fidelity 툴 중에 서는 비교적 접근하기 쉬운 툴이기는 하나 적지 않은 시간을 들여야 하고, 쿼츠컴포저가 M사 OS에서 제공되는 플랫폼이기 때문에 사용 환경이 제한적이다.
저작도구 이용하여 프로토타입 UI 제작
선정된 저작도구를 이용하여 프로토타입 UI를 제작할 수 있다.
프로토타입(Prototype)의 개요
1. 프로토타입 개념
사용자의 요구사항을 충분히 분석할 목적으로 시스템의 중요 일부분을 우선 구현한 후 반 복하는 개발 모델을 프로토타입이라고 한다.
2. 프로토타입 특징
프로토타입은 사전에 UI를 시험제작하여서 이해관계자 간의 원활한 의사소통을 수행하는 개발 모델이다. UI를 통해서 프로토타입을 개발한 후에는 이해관계자 간에 평가 및 수정 과정을 반복하면서 요구사항을 검토한다.
프로토타입 종류
프로토타입은 다양한 기능 구현의 정도를 고려하여 수평적 프로토타입과 수직적 프로토타 입으로 구분한다.
프로토타입의 개발 절차
프로토타입의 개발 절차는 시스템 개발 계획서를 기반으로 계획을 수립하고, 요구사항 분 석 과정에서 프로토타입을 식별한 후, 핵심 기능을 기준으로 프로토타입을 개발하며, 평가 한 후 폐기하거나 실제 시스템에 적용한다.