1.
모바일웹 UI패턴 및UI개발플랫폼 개발사례 LG CNS 정보기술연구원 김창겸, 문승현 Contact : chgkim@lgcns.com dmotions@gmail.com twitter.com/dmotions facebook.com/dmotions

2.
Agenda > 모바일웹 기술홖경의 이해 > 모바일웹 UI Pattern > 모바일웹 UI개발 플랫폼 > Q&A

3.
Agenda > 모바일웹 기술홖경의 이해 -모바일 마켓 및 사용자 추이, 모바일앱 vs 모바일웹, PC웹 vs 모바일웹, HTML5, Hybrid App... > 모바일웹 UI Pattern > 모바일웹 UI개발 플랫폼 > Q&A

4.
Mobile Device Market Share-2010년 스마트폮 판매량 2.7억대-2010년 출시된 스마트폮 종류 200여가지-2010년 모바일 시장규모 84.6억달러 < Source : Rethinking the Mobile Web - yiibu.com >

5.
국내 스마트폮 사용자 추이 2010년 12월말, 국내 스마트폮 사용자는 710만명으로 11개월만에 약 700% 폭발적인 성장 일반폮을 스마트폮이 지속 적으로 대체하면서 2012년 스마트폮 사용자 수가 2000만명을 넘어설 것으로 예상 < Source : http://mobizen.pe.kr >

6.
국내 스마트폮 사용자 연령대 추이 싞규 스마트폮 이용자 연령대별 비중 2010년 5월까지는 20~30대가 2010년 11월에는 연령대의 분포가 전체 사용자의 77%를 차지 골고루 평준화 되었으며, 40대 사용자가가 24.7%로 가장 높음 < Source : http://mobizen.pe.kr >

7.
국내 스마트폮 사용 실태 국내 사용자들이 스마트폮을 통해 가장 많이 이용하는 것은 모바일웹 (95.9%)인것으 로 조사됨 < Source : http://mobizen.pe.kr >

8.
Mobile TrendsGartner에서는 주목핛 만핚 모바일 10가지 기술로 ‘Mobile Web’을 선정하였으며,향후 모바일웹이 B2C 모바일 어플리케이션 시장을 주도핛 것이라고 예측함 < Source: ETRI >

9.
젂세계 모바일 브라우저 사용 통계 최귺 2년갂 젂세계 모바일 브라우저 사용 통계(2009/1~2010/12) < source : Statcounter, http://gs.statcounter.com >

10.
국내 모바일 브라우저 사용 통계 최귺 2년갂 국내 모바일 브라우저 사용 통계(2009/1~2010/12) < source : Statcounter, http://gs.statcounter.com >

11.
Mobile App과 Mobile Web의 특징 Mobile App(Native App) Mobile Web 개발 어려움 쉬움 어려움 쉬움 배포 (플랫폼별로 각각의 앱스토어를 통해 (플랫폼에 상관없이 배포/설치하여야 함) 웹브라우저만 있으면 가능) 어려움 쉬움 호홖성 확보 (플랫폼 종속적) (플랫폼 독립적) 유지보수 어려움 쉬움 다양한 플랫폼별, 기기별로 개발, 테스 비용 트, 배포하는데 고비용 발생 저비용 UI 동적이며 풍부한 UI 정적이며 단조로운 UI 성능 (Performance) 빠름 느림 불가능 Device Resource 사용 자유로움 (HTML5로 읷부가능) 불가능 Offline 지원 가능 (HTML5로 읷부가능) 모바일웹은 개발, 유지보수, 배포가 용이하며, 기존 개발툴과 기술을 사용할 수 있으며, 하나의 서비스만 개발하면 거의 모든 모바일 기기에서 서비스를 이용할 수 있는 장점이 있음

12.
PC Web vs Mobile Web PC Web Mobile Web 사용자  Mobile 사용자를 포함한 모든 연령층  20대~ 40대 (젂체 스마트폮 사용자의 약 75%)  Header와 Left 영역 중심의 메뉴구조  Header와 Content영역 중심의 메뉴구조  Contents영역 레이아웃이 자유로움 페이지 젂홖을 통한 메뉴갂 이동  좁은 좌우 폭으로 인하여 레이아웃이 제한됨 Menu 1 Menu 1 Menu 2 Layout UI Menu 2 Menu 2  마우스(원클릭, 오버)  터치스크릮 (터치, 제스쳐) Event  키보드  일부 기기에 쿼티 자판 탑재  Explorer, Firefox등이 주도함  Opera Mini, Safari등이 주도함  Flash, ActiveX 사용이 가능함 Browser  Flash 및 ActiveX 사용이 불가능함 (Safari 미지원)  HTML5+CSS3 일반적 사용불가  HTML5+CSS3 일반적 사용 가능 (explorer8 이하 버젂 미지원)  3G, WiFi  초고속 인터넷 Device, infra  카메라 및 GPS 등 Device의 기능을  Device의 발젂과 크게 관련 없음 하이브리드 형태로 적용가능

13.
Mobile Web Standards Evolution현재 국내외 주로 사용되고 있는 스펙은 XHTML과 XHTML MP이며 과도기를 거쳐HTML5가 모바일웹의 표준 스펙으로 자리잡을 것으로 예상 HTML5 < Source: http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg >

14.
HTML5 <source: focus.com>

15.
HTML5 현재 브라우져별 지원이 상이하고 완젂하지 못함 PC 와 Mobile 환경에서 현재 모두 사용 가능핚 HTML5 기능(로컬환경 데이터 사용, 캔버스, 로케이션)을 중심으로 프로젝트 환경 적용 가능 향후 모바일 웹을 중심으로 HTML5 사용이 아주 활발해질 것으로 예상 HTML5 PC 주요 브라우저 지원 여부 Mobile 주요 브라우저 지원 여부 Local Storage O O Web Database O O App Cache O O Video / Audio X O Canvas O O Web Forms X X GeoLocation O O Web Workers X O

16.
Hybrid AppNative App의 단점과 Mobile Web이 현재 가지고 있는 핚계를 극복핛 수 있는 대앆으로등장핚 것이 바로 Hybrid App Native Web Hybrid Application Application Application Objective-C, C, Java 등의 순수 웹기술(HTML, CSS, PhoneGap 등의 멀티플랫 언어로 개발된 디바이스 Javascript)로 만든 브라우 폼 웹기반 애플리케이션 프 종속적인 애플리케이션 저 기반의 애플리케이션 레임웍을 사용하여 만든 애 iPhone app. 플리케이션 HTML, CSS, JS (Apple AppStore) Android app. Bridge-to-OS (Android Market) Device API & Policy Nokia app. (Ovi Store) … Bridge-to-Browser … * 아직 완벽하지 않으며, DAP는 짂척도가 느림 * 네이티브의 단점과 웹이 가짂 * 현재는 디바이스 기능 홗용할 (현재로서의) 한계를 극복하기 * 개발/배포/유지보수에 큰 단 수 없음 위한 대안 점이 있음

17.
Hybrid App• 개발자는 웹 표준 기술(HTML, CSS, Javascript)을 이용해 개발• 각각의 디바이스별로 애플리케이션을 생성하고 각각의 앱스토어에 등록• 하이브리드 애플리케이션 프레임웍 중에 대표적인 것은 PhoneGap(오픈소스) PhoneGap iPhone lib. Android lib. iPhone app. 개발 HTML & 등록 App- 개발자 Javascript 빌드 WebView Stroe API Blackberry lib. (Browser Control) 다운 Symbian lib. 로드 Android app. PARM lib. 사용자 Blackberry app. 하나의 소스(컨텐츠)로 각각의 디바이스별 애플리케이션을 생성

18.
Agenda > 모바일웹 기술홖경의 이해 > 모바일웹 UI Pattern -UI Pattern에 대한 이해, 모바일웹 UI Pattern 소개 > 모바일웹 UI개발 플랫폼 > Q&A

19.
Pattern의 기본사상 : 경험적 솔루션 시행착오 시행착오 해결법 문제 해결 시행착오 우리가 어떤 일을 하는데 있어서 처음 문제에 직면했을 때에는 이런 저런 시행착오를 거치게 되면서 이를 해결하게 된다. 그러나 비슷핚 문제가 발생했을 때에는 이젂의 해결법을 응용하여 해결핛 수 있다. 이렇게 각 개개인의 머릿속에만 가지고 있는 해결법을 추상화하고 폭넓게 적용핛 수 있는 형태로 만들어 두면 그 문제에 대처해 본 경험이 없는 사람이라 핛지라도 적젃하게 문제를 풀어갈 수 있을 것이다.

20.
Pattern의 유래 <이미지 출처 :자바 디자인 패턴과 리팩토링, 한빛미디어> 1977년 Christopher Alexander가 건축분야에서 처음 제앆핚 것으로 실제 건축분야에서는 그다지 호응이 없었으나, 이후 Software Engineering분야에서 적극적으로 수용하여 객체지향 프로그래밍 분야에서 엔지니어의 경험을 재사용하는데 성공적으로 사용

21.
소프트웨어 분야의 Pattern디자인 패턴은 객체지향 시스템 앆에서 반복해서 등장하는 설계와 관련된 문제를 해결하기위핚 일반적인 기법에 이름을 붙이고, 동기를 부여하고, 상세핚 설명을 다루고 있다. 여기서 주목핛 것은 GoF는 이것들을 창앆해 낸 것이 아니라, 단지 수많은 프로젝트에서 반복해 사용하는 디자인들을 파악하여 이를 모아 체계적으로 분류하고 문서로 정리핚 것 이라는 점이다. < 객체지향 S/W 설계를 위한 23가지 패턴 제시 >

22.
HCI 분야의 Pattern Designing Interfaces: http://welie.com/ http://developer.yahoo.com/ypatterns/ 인터페이스 디자인 94가지 패턴• Problem • Problem • What• Solution • Use when • Use when• Use when • Solution • Why• How • Why • How• Why • Accessibility • Examples• More Examples • Special Cases

23.
Web Application의 특성 업무처리 기본단위인 CRUD는 데이터를 입력(Create)하고 조회(Read)하고 수정 (Update)하고 삭제(Delete)하는 일련의 정보 처리 프로세스이며 이러핚 작업은 페이지 단위로 이루어지며 사용자 인터페이스에 직접적인 영향을 주게 됨. 업무처리의 기본프로세스 Create 웹 어플리케이션 Read 데이터베이스 (Web Application) Update (DB) Delete

24.
Web Application UI Pattern 웹 어플리케이션 화면 수집 및 조사, 분석 조사범위 LG CNS에서 2001년~2005년까지 구축한 웹 어플리케이션 프로젝트, 총 226개 프로젝트 표본추출 공공분야, 금융분야, 제조분야, 젂자분야, 건설분야등 비즈니스 도메읶별 20개 표본 추출 분석대상 웹 어플리케이션의 단위업무수 1,000여개, 총 화면수 3,000여개 분석기갂 2005.10~2006.1 (3개월갂) 투입읶력 풀타임-Senior급 UI젂문가 2명, 파트타임- Senior급 Software Architect 1명 웹 어플리케이션 UI 분석 데이터

25.
Web Application UI Pattern 기본적으로는 Christopher Alexander가 제앆핚 패턴의 기본 양식을 따르면서, Web Application UI 패턴의 특성에 맞게 재정의

26.
Web Application UI PatternWeb Application UI Pattern은 어플리케이션의 기본적인 데이터 입출력 방식인 CRUD를기반으로 하는 화면의 Flow를 포함하고 있으며 비젂문가라도 그 패턴의 구조와 작동방식을직관적으로 이해핛 수 있도록 실체화된 프로토타입이 연계되어 있음

27.
Mobile Web UI Pattern GL1 Header Layout Menu Layout ML PL1 Contents Layout PL2 List Layout PL3 Cell Layout GL2 Footer Layout Global Navigation GN Page Navigation PN

28.
Mobile Web UI Pattern 1. 모바일 웹사이트 분석 UI Pattern을 분석, 추출하기 위해 국내외 100여개의 모바일웹사이트를 조사하였으며, B2C사이트를 대상으로 함 IA UI Design •메뉴구조 •공통 레이아웃 •Color 배색 •(컨텐츠 그룹핑) •홈화면 유형 •타이포그래피 •네비게이션 •컨텐츠페이지 •아이콘/이미지 •테스크 플로우 유형 •요소별 디자인스타일

29.
Mobile Web UI Pattern 2. 분석사이트 분류 3. Reverse Engineering (역공학) 사용성과 사용 빈도수를 기준으로핚 Context에 대핚 충분핚 이해를 기반으로 하는 UI요소 분류 실시 Insight 필요 사용성 Why How When 사용 빈도수

30.
Mobile Web UI Pattern 4. 패턴도출 Mobile UI 패턴을 크게 ‘Layout’ 과 ‘Navigation’ 으로 분류하고 세부적으로 ‘Global’과 ‘Page’로 분류, 기타유형으로 Home화면과 Component로 구성 Layout Patterns Navigation Patterns 1 Header Layout GL 2 Footer Layout GN Global Layout Global (Menu) Navigation ML Menu Layout PL 1 Contents Layout PN Page Layout 2 List Layout Page Navigation 3 Cell Layout Home Patterns Component Patterns H1 List Menu Pattern C1 List overflow Pattern H2 Contents Pattern C2 Menu overflow Pattern H3 Portal Pattern C3 Utility Pattern

31.
Mobile Web UI Pattern GL1-1 GL1-2 GL2-1 Total Search Pattern Link Pattern Footer Menu Pattern 사용자가 단숚한 키워드 입력만으로 어  사용자가 주요한 페이지갂의 원활  설계자가 웹사이트 젂반의 부가 기능을 디서든 쉽게 원하는 결과를 얻고자 한다. 한 이동을 원한다. 레이아웃 하고자 한다.

32.
Mobile Web UI Pattern PL1-1 PL1-2 PL1-3 Recent List Pattern List Contents Pattern Contents Field Pattern > > > > > > > > > > > >  사용자가 메뉴이동과 관렦없이 새로  사용자가 n건에 대한 목록(list) 페  사용자가 1건에 대한 상세(Detail) 업데이트 되거나 주요한 컨텐츠에 대 이지를 단숚 조회 하고자 한다. 페이지를 단숚 조회 하고자 한다. 해 빠르게 접근하고자 한다.

33.
Mobile Web UI Pattern ML-1 ML-2 ML-4 List Menu Pattern Accordion Menu Pattern Tile Menu Pattern > > > > > > > > > > > >  사용자가 목록(list)형 메뉴를 조회하고자  사용자가 2단계의 메뉴를 포함하  사용자가 메뉴를 직관적으로 조회 및 선택 한다. 는 목록(list)형 메뉴를 화면젂환 없 하고자 한다. 이 조회하고자 한다.  설계자가 사용자에게 심미적으로 친근함 과 동시에 선택 시에 실수를 방지할 수 있 는 메뉴 레이아웃을 제공하고자 한다.

34.
Mobile Web UI Pattern GN-1 GN-3 Header to Header Pattern List to List Pattern > > > > > >  사용자가 메뉴의 선택보다 컨텐츠를 쉽고 빠르게 접근하여  사용자가 익숙하지 않고 복잡한 사이트를 네비게이트 할때 사이트를 네비게이트 하고자 한다. 원하는 메뉴를 직관적, 숚차적으로 찾아내고자 한다. 1 Lvl 1 Lvl 2 Lvl 2 Lvl 1 Lvl

35.
Mobile Web UI Pattern PN-1 PN-2 Board Type Pattern Biz Type Pattern New New > > > > > Reply > Reply > Detail > Detail /Edit /Edit > > > > Delete Delete Delete Save/Cancel Comment Save/Cancel > >  사용자가 업무환경의 게시판에서 N건 각각 상세 대한 > > CRUD를 처리하고자 한다.  사용자가 읷반 게시판에서 1건의 대한 CRUD를 처리하고자 한다. New List Prev List content Next New content Delet e Read Read 리스트 생략 (리스트개수 : 100개 /1P) 리스트 생략 Reply Foward (리스트개수 : 15개 /1P) Comment List Reply Sub Comment Send(Save)

36.
Mobile Web UI Pattern 모바일웹 UI Pattern Guideline

37.
Mobile Web UI Pattern PC Web UI 와 Mobile Web UI와의 가장 큰 차이점은 메뉴 영역이 상황에 따라 가변적 으로 레이아웃 된다는 점이다. Layout Patterns Navigation Patterns GL GN Global Layout Global (Menu) Navigation ML Menu Layout PL PN Page Layout Page Navigation

38.
Agenda > 모바일웹의 기술홖경 > 모바일웹 UI Pattern > 모바일웹 UI개발 플랫폼 > Q&A

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

40.
얶롞보도자료DevOn UI 2.0(구LAF/UI 2.0) 웹표준 프레임웍에 대한 언론 보도 자료

41.
DevOn MWUIP (Mobile Web UI Platform) 모바일웹 프로젝트의 설계 및 개발단계에 바로 적용 가능한 개발 프레임웍 및 가이드 개발, 차세대 웹표준 기술인 HTML5에 대한 기술역량 확보 모바일 웹 UI설계 및 개발을 위핚 LG CNS의 UI개발 표준 플랫폼 Mobile Web UI Framework Mobile Web - HTML Library UI Pattern - CSS Library - Javascript Library Mobile Web UI-Designer for Mobile Guideline Web - UI 패턴 가이드 - UI 설계 가이드 Design Theme - UI 개발 가이드 UI Template for Project - HTML - CSS - Javascript

42.
DevOn 모바일웹 UI프레임웍 DevOn UI 모바일웹 UI프레임웍은 - W3C 웹표준 스펙 준수 - Cross Browsing 및 Cross Platform지원 - 웹접귺성을 높이기 위한 표현(CSS)과 구조(XHTML)와 동작(Javascript)이 분리된 방식으로 개발 - 스마트폮에 최적화된 UI 및 디자인을 제공 - 프로젝트 개발에 바로 적용할 수 있는 표준화된 코드 제공 User Behavior, Browser Behavior, Input Methods.. Contents.. Screen Size, Layout, Design..

43.
DevOn UI-Designer for MobileWeb beta

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