LG CNS S/W공학센터

김창겸

UI패턴기반

UI디자인/개발

자동화

웹

어플리케이션에서의

chgkim@lgcns.com dmotions@gmail.comtwitter.com/dmotions

Contact :

Agenda

. SW자동화의

배경

. UI패턴의 개념 및 이해

. UI자동화 도구 시연 및 매커니즘 설명

. Q&A

Automation

Trends

Prepare for a Paradigm Shift to Automated Application Development (Gartner, 2008/03)

-

낮은

생산성, 신기술에

대한

스킬

부족

등으로

인해

Application Development은

자동화로

진행.

-

해외(offshore) 개발

인력

활용

및

Outsourcing 보다, 자동화가

중요한

Application Development

트랜드로서

나타날

것임.

Programmers vs. Machines (Gartner. 2008/04)

-

낮은

생산성과

개발자

부족

문제는

덜

비싼

해외

개발

인력(offshore) 활용과

함께

자동화를

통해

해결될

것임.

-

자동화는

Application Development의

궁극적인

목표임.

Trends in Model-Driven Development (Gartner. 2008/08)

-

앞으로

비즈니스

모델을

실시간으로

해석하고, 프로그램

코드

생성

필요

없이

Business Logic을

수행하는

S/W 기술들을

통해

실시간

Business Logic을

수행하는

발전된

능력을

보게

될

것임.

최근 가트너 보고서에서는 가격 경쟁력 확보를 위한 방안으로 어플리케이션 자동화가 중

요한 개발 Trends가

될 것으로 전망함

“기계적인

일은

기계에게

! 사람은

창의적인

작업만

!! ”

Machine does it

분석 설계 구현 테스트

Human does it

.단순 반복 작업

.표준화/정형화된 작업.창의적 작업

개발

프로세스

비효율성

제거

생산성

품질

향상

자동화

Philosophy of Automation

코드네임:

STRATUS Proj. (2008.2~8)

UI패턴기반

화면설계서

및

UI구현

자동화

코드네임:

NIMBUS Proj. (2008.1~6)

UI패턴기반

UI Design 및

UI개발템플릿

자동화

뜬구름

잡는

프로젝트?

DevOn UI : 웹기반

프로젝트의

분석/설계/구현단계에

따라

UI개발의

품질

및

생산성을

향상시키고

최적화하기위한

LG CNS 공식

UI개발

표준

프레임워크

DevOn

UI Overview

• 2007년

3월말, 업계

최초로

웹표준

프레임웍인

‘LAF/UI 2.0 for Web Standard(현

DevOn

UI)’를

개발하여

언론매체(전자신문, 디지털타임즈등

9개

신문사)에

보도됨, 현재

공공프로젝트를

중심으로

적용

및

확산하고

있음

• DevOn

UI는

2004년부터

약

300여개의

프로젝트에

적용, 검증이

되었으며

DevOn

UI를

웹

시스템

개발

프로

젝트에

적용함으로써

신속하고

안정적인

화면UI구현을

도모할

수

있음

DevOn

UI 사이트

( LG*NET에서만

접속가능)

DevOn

UI 2.0(구LAF/UI 2.0) 웹표준

프레임워크에

대한

언론

보도

자료

언론보도자료

디지털타임즈

2008년

2월1일

DevOn

UI에서

제공하는

Asset

UI Component

UI Pattern

Web Standard

-

웹접근성, 크로스브라우징등을

지켜셔

개발하기위한

Asset-

웹표준

프로세스, 웹표준

개발가이드, 소스

템플릿, DevOn

UI W3C Validator

-

개별

컴포넌트

및

Tool 형태로

제공되는

Asset- Ajax기반

Dynamic UI Component- Javascipt

& CSS Library

- UI개발

생산성을

극대화하기

위한

Asset-

범용성과

사용성

측면에서

검증된

CRUD 기반의

화면흐름과

레이아웃

유형이

반영- Global Layout Pattern, Page Navigation Pattern

(Web Pattern, X-Internet Pattern)

화면패턴

기반의

설계/구현

자동화

및

UI디자인

자동화

도구

UI 자동화

툴

X-Internet

-

X-Internet기반

프로젝트의

개발생산성

및

활용성을

높이기

위한

Asset-

Gauce, Trustform, Miplatform등의 X-Internet제품군에 대한

UI Pattern 샘플

및

가이드, Component 샘플

및

가이드

DevOn

UI 2.0에서는

4가지

Category로

UI Asset을

제공하고

있음

UI자동화 툴 적용 단계

웹

어플리케이션

구축시의

UI개발

프로세스

DevOn

UI-Designer

배경

분석/설계단계에서 디자인테마와 화면패턴을 적용하여 화면개발템플릿(HTML)과 화면개발가이드

및 디자인표준(WSG)을 빌드함으로써 UI 디자인 구현에 대한 개발생산성을 높힐 수 있도록 함.

사용성과 품질이 검증된 레이아웃 패턴과 디자인 라이브러리 활용으로 UI 품질에 대한 근거와 일

관성을 확보할 수 있도록 함.

자동화 기능 내역

시스템 개발에 필요한 레이아웃 패턴과 디자인테마를 선택하면 화면개발템플릿(HTML)을 자동으로 생성해 줌

선택한 레이아웃 패턴과 디자인테마를 반영한 디자인표준(WSG) 및 화면개발가이드를 생성해 줌

적용현황

화면디자인 시안 및 화면개발가이드: 90%이상

화면소스코드(HTML, CSS, Javascript) 자동화율: 90%이상

적용 중인 프로젝트 : 공공, 금융, 계열사등 30여개 프로젝트

DevOn

UI-Designer

: 화면패턴기반

UI Design 및

UI 템플릿

자동화툴

DevOn

UI-Designer의

매커니즘

레이아웃 패턴 선택

디자인

테마

선택

화면개발가이드

(MS Word)

DevOn UI-Designer

UI 코딩

템플릿

(HTML, CSS, Image, Javascript

)

DevOn

UI-Designer

화면

편집

기능

위지윅

방식의

편집

기능으로

레이아웃

변경

및

디자인

변경

요구사항

대응

가능함

디자인

테마

변경 화면

레이아웃

변경

화면

패턴

추가

레이아웃

스타일

변경 디자인

스타일

변경UI 요소

추가/삭제

다양한

디자인테마를

제작하여

라이브러리

형태로

재사용함

디자인 테마 개발

자동화툴에

적용

웹시스템 디자인 사례 수집

테마화 적합도 검증

차별화 요소별로 분류

디자인 유형화 방향성 정리

표준화 구성을 고려한 디자인

개발 적용 용이성 검토

Html/css로 코딩

블럭별 테마로 제공

기본 디자인테마 업로드

디자인테마

제작웹디자인

사례

수집

사전에

준비된

디자인

라이브러리를

활용하므로

디자인

제작

기간

단축

및

화면

개발

적용이

간편해짐을

적용한

레이아웃

템플릿

사용으로

패턴기반의

설계

및

구현

이

가능해짐

디자인테마

라이브러리

디자인

최적화

프로젝트

사례를

분석하여

CRUD패턴에

대응되는

레이아웃

패턴을

도출한

후

적용함

화면

레이아웃

패턴

개발

분류

및

유형화웹화면

수집

및

분석 자동화툴에

적용

화면설계서 수집

화면요소 정의

화면요소별 통계 분석

빈도 높은 화면 추출

화면 형태를 추상화함

레이아웃 패턴 정의

기본 화면 템플릿으로 제공

디자인테마 반영

DevOn UI

화면패턴을

적용한

레이아웃

템플릿

사용으로

패턴기반의

설계

및

구현이

가능해짐

화면개발

효율성을

고려한

웹표준

스펙의

html 템플릿을

제공함

웹표준

소스

구조와

표현

분리 크로스브라우징

반영W3C 표준

스펙

적용

XHTML 1.0 적용

시맨틱 마크업

Validator 검증

비표준 브라우저: IE 6/7

※ IE8도 고려함

표준 브라우저: Firefox 등

HTML/CSS 분리

CSS 레이아웃 기법 적용

테마별 CSS 분리

Html

테마별

css

6/7/8HTML 시멘틱

마크업

Validation

웹표준

기술

적용으로

소스코드의

표준화, 코드량

감소, 네트워크

부하

감소, 크로스브라우징

등의

효과

가 있음

DevOn

UI-Modeler

배경

현재 분석단계에서부터 화면패턴을 활용하여 화면 프로토타이핑, 화면 정의서를 작성함으로써 생

산성 및 품질을 높이도록 하는 작업이 진행 중임.

화면패턴 기반으로 프로젝트를 수행함으로써 산출물이 자연스럽게 표준화, 정형화됨으로 자동화

할 수 있는 계기가 됨

자동화 기능 내역

PPT를 읽어서 워드와 HTML를 자동으로 생성해 줌

업무분석가가 작성한 화면프로토타이핑(PPT)를 읽어들여서 화면설계서(Word)와 화면소스코드(HTML)을 자동

으로 제너레이터 함

적용현황

화면설계서(Word) 자동화율: 80%이상

화면소스코드(HTML, JSP, GAUCE, MiPlatform) 자동화율: 80%이상

적용 중인 프로젝트 : 공공, 금융, 계열사등 30여개 프로젝트

DevOn

UI-Modeler

: 화면패턴기반

화면설계/구현

자동화툴

DevOn

UI-Modeler의

매커니즘

DevOn UI-Modeler

화면

정의서(PPT)

코딩

템플릿(velocity)

코드

(HTML, X-Internet)

화면설계서(MS Word)

DevOn

UI패턴(PPT)

DisplayElementMacro.vm DesignStandard.vm

XML화면정의서(PPT)

블럭별

MarkUp

규칙 블럭별

디자인

속성값

화면설계서

DisplayElementMacro.vm

HTML화면정의서(PPT) 화면설계서

디자인

속성값은

NIMBUS에서

빌드한

css와

images 사용

Web (HTML)

X-internet (GAUCE, MiPlatform)

DevOn

UI-Modeler

DevOn

UI-Modeler

블럭별

MarkUp

규칙 블럭별

디자인

속성값

DevOn

UI-Modeler

매커니즘

상세

HTML화면정의서(PPT) UI-Modeler

DevOn

UI-Designer와

UI-Modeler의

소스

연동

작업

UI-Designer

자동

생성된

소스

CSS & images레이아웃

패턴

및

디자인

테마

선택

HTML + CSS & images

소스

자동

연동

? !Question and Answer

Contact

chgkim@lgcns.com dmotions@gmail.com

http://twitter.com/dmotions

Web Standard, Ajax, J2EE

Layout Pattern Library

Design Theme Library

UI Component Library

GUI(Web Client)

#별첨: DevOn

UI-Designer의

구조

DevOn UI-Designer

GUI Engine TemplateGenerater

Core Engine

Nimbus Web Service

Eclipse Rich Client Platform

DevOn UI-Modeler

Java Virtual Machine

POI주1 Velocity주2

주1) POI : 마이크로소프트

오피스

문서

파싱(parsing)을

위한

아파치

오픈소스

라이브러리

주2) Velocity : 템플릿

기반

코드

생성을

위한

아파치

오픈소스

라이브러리

Stratus Engine

#별첨: DevOn

UI-Modeler의

구조