제가지난 HCI KOREA 2010에서사례발표한 UI패턴기반 UI설계/개발자동화발표자료입니다.

1. 웹 어플리케이션에서의
UI패턴기반 UI디자인/개발 자동화
LG CNS S/W공학센터 김창겸
Contact : chgkim@lgcns.com
dmotions@gmail.com
twitter.com/dmotions

2. Agenda
. SW자동화의 배경
. UI패턴의 개념 및 이해
. UI자동화 도구 시연 및 매커니즘 설명
. Q&A

3. Automation Trends
최근 가트너 보고서에서는 가격 경쟁력 확보를 위한 방안으로 어플리케이션 자동화가 중
요한 개발 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을 수행하는 발전된 능력을 보게 될 것임.

4. Philosophy of Automation
“기계적인 일은 기계에게 ! 사람은 창의적인 작업만 !! ”
.단순 반복 작업
.창의적 작업
.표준화/정형화된 작업
Machine does it Human does it
자동화
개발
생산성
프로세스
품질
비효율성
향상
제거
분석 설계 구현 테스트

7. 뜬구름 잡는 프로젝트?
코드네임: NIMBUS Proj. (2008.1~6)
UI패턴기반 UI Design 및 UI개발템플릿 자동화
코드네임: STRATUS Proj. (2008.2~8)
UI패턴기반 화면설계서 및 UI구현 자동화

8. DevOn UI Overview
DevOn UI : 웹기반 프로젝트의 분석/설계/구현단계에 따라 UI개발의 품질 및
생산성을 향상시키고 최적화하기위한 LG CNS 공식 UI개발 표준 프레임워크
DevOn UI 사이트 ( LG*NET에서만 접속가능)
• DevOn UI는 2004년부터 약 300여개의 프로젝트에 적용, 검증이 되었으며 DevOn UI를 웹 시스템 개발 프로
젝트에 적용함으로써 신속하고 안정적인 화면UI구현을 도모할 수 있음
• 2007년 3월말, 업계 최초로 웹표준 프레임웍인 ‘LAF/UI 2.0 for Web Standard(현 DevOn UI)’를 개발하여
언론매체(전자신문, 디지털타임즈등 9개 신문사)에 보도됨, 현재 공공프로젝트를 중심으로 적용 및 확산하고 있음

9. 언론보도자료
DevOn UI 2.0(구LAF/UI 2.0) 웹표준 프레임워크에 대한 언론 보도 자료
디지털타임즈 2008년 2월1일

10. DevOn UI에서 제공하는 Asset
DevOn UI 2.0에서는 4가지 Category로 UI Asset을 제공하고 있음
UI Component Web Standard
- 개별 컴포넌트 및 Tool 형태로 제공되는 Asset
- Ajax기반 Dynamic UI Component
- Javascipt & CSS Library - 웹접근성, 크로스브라우징등을 지켜셔
UI 자동화 툴 개발하기위한 Asset
- 웹표준 프로세스, 웹표준 개발가이드,
소스 템플릿, DevOn UI W3C Validator
화면패턴 기반의 설계/구현
UI Pattern X-Internet
자동화 및 UI디자인 자동화 도구
- UI개발 생산성을 극대화하기 위한 Asset - X-Internet기반 프로젝트의 개발생산성 및 활용성을 높이기
- 범용성과 사용성 측면에서 검증된 CRUD 기반의 화면흐름과 위한 Asset
레이아웃 유형이 반영 - Gauce, Trustform, Miplatform등의 X-Internet제품군에 대한
- Global Layout Pattern, Page Navigation Pattern UI Pattern 샘플 및 가이드, Component 샘플 및 가이드
(Web Pattern, X-Internet Pattern)

11. UI자동화 툴 적용 단계
웹 어플리케이션 구축시의 UI개발 프로세스

12. DevOn UI-Designer
DevOn UI-Designer : 화면패턴기반 UI Design 및 UI 템플릿 자동화툴
배경
분석/설계단계에서 디자인테마와 화면패턴을 적용하여 화면개발템플릿(HTML)과 화면개발가이드
및 디자인표준(WSG)을 빌드함으로써 UI 디자인 구현에 대한 개발생산성을 높힐 수 있도록 함.
사용성과 품질이 검증된 레이아웃 패턴과 디자인 라이브러리 활용으로 UI 품질에 대한 근거와 일
관성을 확보할 수 있도록 함.
자동화 기능 내역
시스템 개발에 필요한 레이아웃 패턴과 디자인테마를 선택하면 화면개발템플릿(HTML)을 자동으로 생성해 줌
선택한 레이아웃 패턴과 디자인테마를 반영한 디자인표준(WSG) 및 화면개발가이드를 생성해 줌
적용현황
화면디자인 시안 및 화면개발가이드: 90%이상
화면소스코드(HTML, CSS, Javascript) 자동화율: 90%이상
적용 중인 프로젝트 : 공공, 금융, 계열사등 30여개 프로젝트

13. DevOn UI-Designer의 매커니즘
디자인 테마 선택
화면개발가이드 (MS Word)
레이아웃 패턴 선택
DevOn UI-Designer
UI 코딩 템플릿
(HTML, CSS, Image, Javascript )

14. DevOn UI-Designer 화면

15. 편집 기능
위지윅 방식의 편집 기능으로 레이아웃 변경 및 디자인 변경 요구사항 대응 가능함
디자인 테마 변경 화면 레이아웃 변경
화면 패턴 추가
UI 요소 추가/삭제 레이아웃 스타일 변경 디자인 스타일 변경

16. 디자인 테마 개발
다양한 디자인테마를 제작하여 라이브러리 형태로 재사용함
웹디자인 사례 수집 디자인테마 제작 자동화툴에 적용
웹시스템 디자인 사례 수집 디자인 유형화 방향성 정리 Html/css로 코딩
테마화 적합도 검증 표준화 구성을 고려한 디자인 블럭별 테마로 제공
차별화 요소별로 분류 개발 적용 용이성 검토 기본 디자인테마 업로드
사전에 준비된 디자인 라이브러리를 활용하므로 디자인 제작 기간 단축 및 화면 개발 적용이 간편해짐을
적용한 레이아웃 템플릿 사용으로 패턴기반의 설계 및 구현 이 가능해짐

17. 디자인테마 라이브러리

18. 디자인 최적화

19. 화면 레이아웃 패턴 개발
프로젝트 사례를 분석하여 CRUD패턴에 대응되는 레이아웃 패턴을 도출한 후 적용함
웹화면 수집 및 분석 분류 및 유형화 자동화툴에 적용
화면설계서 수집 빈도 높은 화면 추출 기본 화면 템플릿으로 제공
화면요소 정의 화면 형태를 추상화함 디자인테마 반영
화면요소별 통계 분석 레이아웃 패턴 정의
DevOn UI 화면패턴을 적용한 레이아웃 템플릿 사용으로 패턴기반의 설계 및 구현이 가능해짐

20. 웹표준 소스
화면개발 효율성을 고려한 웹표준 스펙의 html 템플릿을 제공함
W3C 표준 스펙 적용 구조와 표현 분리 크로스브라우징 반영
XHTML 1.0 적용 HTML/CSS 분리 비표준 브라우저: IE 6/7
시맨틱 마크업 CSS 레이아웃 기법 적용 ※ IE8도 고려함
Validator 검증 테마별 CSS 분리 표준 브라우저: Firefox 등
HTML 시멘틱 마크업 테마별 css
6/7/8
Validation
Html
웹표준 기술 적용으로 소스코드의 표준화, 코드량 감소, 네트워크 부하 감소, 크로스브라우징 등의 효과
가 있음

21. DevOn UI-Modeler
DevOn UI-Modeler : 화면패턴기반 화면설계/구현 자동화툴
배경
현재 분석단계에서부터 화면패턴을 활용하여 화면 프로토타이핑, 화면 정의서를 작성함으로써 생
산성 및 품질을 높이도록 하는 작업이 진행 중임.
화면패턴 기반으로 프로젝트를 수행함으로써 산출물이 자연스럽게 표준화, 정형화됨으로 자동화
할 수 있는 계기가 됨
자동화 기능 내역
PPT를 읽어서 워드와 HTML를 자동으로 생성해 줌
업무분석가가 작성한 화면프로토타이핑(PPT)를 읽어들여서 화면설계서(Word)와 화면소스코드(HTML)을 자동
으로 제너레이터 함
적용현황
화면설계서(Word) 자동화율: 80%이상
화면소스코드(HTML, JSP, GAUCE, MiPlatform) 자동화율: 80%이상
적용 중인 프로젝트 : 공공, 금융, 계열사등 30여개 프로젝트

22. DevOn UI-Modeler의 매커니즘
코딩 템플릿(velocity)
DevOn UI패턴(PPT)
화면설계서(MS Word)
DevOn UI-Modeler
화면 정의서(PPT)
코드 (HTML, X-Internet)

23. DevOn UI-Modeler 매커니즘 상세
Web (HTML)
화면정의서(PPT) DevOn UI-Modeler HTML 화면설계서
DisplayElementMacro.vm
디자인 속성값은
NIMBUS에서
빌드한 css와
images 사용
블럭별 MarkUp 규칙 블럭별 디자인 속성값
X-internet (GAUCE, MiPlatform)
화면정의서(PPT) DevOn UI-Modeler XML 화면설계서
DisplayElementMacro.vm DesignStandard.vm
블럭별 MarkUp 규칙 블럭별 디자인 속성값

24. DevOn UI-Designer와 UI-Modeler의 소스 연동 작업
자동 생성된 소스
화면정의서(PPT) UI-Modeler HTML
HTML + CSS & images
소스 자동 연동
레이아웃 패턴 및 UI-Designer
디자인 테마 선택 CSS & images

25. ? !
Question and Answer
Contact
chgkim@lgcns.com
dmotions@gmail.com
http://twitter.com/dmotions

26. #별첨: DevOn UI-Designer의 구조
DevOn UI-Designer
UI Component Library
Design Theme Library
Layout Pattern Library
GUI
(Web Nimbus Web Service
Client)
Core Template
GUI Engine
Engine Generater
Web Standard, Ajax, J2EE

27. #별첨: DevOn UI-Modeler의 구조
DevOn UI-Modeler
Stratus Engine
Eclipse
POI주1 Velocity 주2
Rich Client Platform
Java Virtual Machine
주1) POI : 마이크로소프트 오피스 문서 파싱(parsing)을 위한 아파치 오픈소스 라이브러리
주2) Velocity : 템플릿 기반 코드 생성을 위한 아파치 오픈소스 라이브러리