Your SlideShare is downloading. ×
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[HCI2010]UI패턴기반 UI설계/개발자동화사례발표

4,425
views

Published on

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

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


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,425
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
194
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 자동화 개발 생산성 프로세스 품질 비효율성 향상 제거 분석 설계 구현 테스트
  • 5. 뜬구름 잡는 프로젝트? 코드네임: NIMBUS Proj. (2008.1~6) UI패턴기반 UI Design 및 UI개발템플릿 자동화 코드네임: STRATUS Proj. (2008.2~8) UI패턴기반 화면설계서 및 UI구현 자동화
  • 6. 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개 신문사)에 보도됨, 현재 공공프로젝트를 중심으로 적용 및 확산하고 있음
  • 7. 언론보도자료 DevOn UI 2.0(구LAF/UI 2.0) 웹표준 프레임워크에 대한 언론 보도 자료 디지털타임즈 2008년 2월1일
  • 8. 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)
  • 9. UI자동화 툴 적용 단계 웹 어플리케이션 구축시의 UI개발 프로세스
  • 10. DevOn UI-Designer DevOn UI-Designer : 화면패턴기반 UI Design 및 UI 템플릿 자동화툴 배경 분석/설계단계에서 디자인테마와 화면패턴을 적용하여 화면개발템플릿(HTML)과 화면개발가이드 및 디자인표준(WSG)을 빌드함으로써 UI 디자인 구현에 대한 개발생산성을 높힐 수 있도록 함. 사용성과 품질이 검증된 레이아웃 패턴과 디자인 라이브러리 활용으로 UI 품질에 대한 근거와 일 관성을 확보할 수 있도록 함. 자동화 기능 내역 시스템 개발에 필요한 레이아웃 패턴과 디자인테마를 선택하면 화면개발템플릿(HTML)을 자동으로 생성해 줌 선택한 레이아웃 패턴과 디자인테마를 반영한 디자인표준(WSG) 및 화면개발가이드를 생성해 줌 적용현황 화면디자인 시안 및 화면개발가이드: 90%이상 화면소스코드(HTML, CSS, Javascript) 자동화율: 90%이상 적용 중인 프로젝트 : 공공, 금융, 계열사등 30여개 프로젝트
  • 11. DevOn UI-Designer의 매커니즘 디자인 테마 선택 화면개발가이드 (MS Word) 레이아웃 패턴 선택 DevOn UI-Designer UI 코딩 템플릿 (HTML, CSS, Image, Javascript )
  • 12. DevOn UI-Designer 화면
  • 13. 편집 기능 위지윅 방식의 편집 기능으로 레이아웃 변경 및 디자인 변경 요구사항 대응 가능함 디자인 테마 변경 화면 레이아웃 변경 화면 패턴 추가 UI 요소 추가/삭제 레이아웃 스타일 변경 디자인 스타일 변경
  • 14. 디자인 테마 개발 다양한 디자인테마를 제작하여 라이브러리 형태로 재사용함 웹디자인 사례 수집 디자인테마 제작 자동화툴에 적용 웹시스템 디자인 사례 수집 디자인 유형화 방향성 정리 Html/css로 코딩 테마화 적합도 검증 표준화 구성을 고려한 디자인 블럭별 테마로 제공 차별화 요소별로 분류 개발 적용 용이성 검토 기본 디자인테마 업로드 사전에 준비된 디자인 라이브러리를 활용하므로 디자인 제작 기간 단축 및 화면 개발 적용이 간편해짐을 적용한 레이아웃 템플릿 사용으로 패턴기반의 설계 및 구현 이 가능해짐
  • 15. 디자인테마 라이브러리
  • 16. 디자인 최적화
  • 17. 화면 레이아웃 패턴 개발 프로젝트 사례를 분석하여 CRUD패턴에 대응되는 레이아웃 패턴을 도출한 후 적용함 웹화면 수집 및 분석 분류 및 유형화 자동화툴에 적용 화면설계서 수집 빈도 높은 화면 추출 기본 화면 템플릿으로 제공 화면요소 정의 화면 형태를 추상화함 디자인테마 반영 화면요소별 통계 분석 레이아웃 패턴 정의 DevOn UI 화면패턴을 적용한 레이아웃 템플릿 사용으로 패턴기반의 설계 및 구현이 가능해짐
  • 18. 웹표준 소스 화면개발 효율성을 고려한 웹표준 스펙의 html 템플릿을 제공함 W3C 표준 스펙 적용 구조와 표현 분리 크로스브라우징 반영 XHTML 1.0 적용 HTML/CSS 분리 비표준 브라우저: IE 6/7 시맨틱 마크업 CSS 레이아웃 기법 적용 ※ IE8도 고려함 Validator 검증 테마별 CSS 분리 표준 브라우저: Firefox 등 HTML 시멘틱 마크업 테마별 css 6/7/8 Validation Html 웹표준 기술 적용으로 소스코드의 표준화, 코드량 감소, 네트워크 부하 감소, 크로스브라우징 등의 효과 가 있음
  • 19. DevOn UI-Modeler DevOn UI-Modeler : 화면패턴기반 화면설계/구현 자동화툴 배경 현재 분석단계에서부터 화면패턴을 활용하여 화면 프로토타이핑, 화면 정의서를 작성함으로써 생 산성 및 품질을 높이도록 하는 작업이 진행 중임. 화면패턴 기반으로 프로젝트를 수행함으로써 산출물이 자연스럽게 표준화, 정형화됨으로 자동화 할 수 있는 계기가 됨 자동화 기능 내역 PPT를 읽어서 워드와 HTML를 자동으로 생성해 줌 업무분석가가 작성한 화면프로토타이핑(PPT)를 읽어들여서 화면설계서(Word)와 화면소스코드(HTML)을 자동 으로 제너레이터 함 적용현황 화면설계서(Word) 자동화율: 80%이상 화면소스코드(HTML, JSP, GAUCE, MiPlatform) 자동화율: 80%이상 적용 중인 프로젝트 : 공공, 금융, 계열사등 30여개 프로젝트
  • 20. DevOn UI-Modeler의 매커니즘 코딩 템플릿(velocity) DevOn UI패턴(PPT) 화면설계서(MS Word) DevOn UI-Modeler 화면 정의서(PPT) 코드 (HTML, X-Internet)
  • 21. 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 규칙 블럭별 디자인 속성값
  • 22. DevOn UI-Designer와 UI-Modeler의 소스 연동 작업 자동 생성된 소스 화면정의서(PPT) UI-Modeler HTML HTML + CSS & images 소스 자동 연동 레이아웃 패턴 및 UI-Designer 디자인 테마 선택 CSS & images
  • 23. ? ! Question and Answer Contact chgkim@lgcns.com dmotions@gmail.com http://twitter.com/dmotions
  • 24. #별첨: 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
  • 25. #별첨: DevOn UI-Modeler의 구조 DevOn UI-Modeler Stratus Engine Eclipse POI주1 Velocity 주2 Rich Client Platform Java Virtual Machine 주1) POI : 마이크로소프트 오피스 문서 파싱(parsing)을 위한 아파치 오픈소스 라이브러리 주2) Velocity : 템플릿 기반 코드 생성을 위한 아파치 오픈소스 라이브러리