LG CNS S/W공학센터
김창겸
UI패턴기반
UI디자인/개발
자동화
웹
어플리케이션에서의
[email protected] [email protected]/dmotions
Contact :
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에서
제공하는
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을
제공하고
있음
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
)
편집
기능
위지윅
방식의
편집
기능으로
레이아웃
변경
및
디자인
변경
요구사항
대응
가능함
디자인
테마
변경 화면
레이아웃
변경
화면
패턴
추가
레이아웃
스타일
변경 디자인
스타일
변경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
소스
자동
연동
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
Top Related