SlideShare a Scribd company logo
1 of 44
Download to read offline
모바일웹 UI패턴 및
UI개발플랫폼 개발사례




                            LG CNS 정보기술연구원
                                   김창겸, 문승현

       Contact : chgkim@lgcns.com
                 dmotions@gmail.com
                 twitter.com/dmotions
                 facebook.com/dmotions
Agenda



   > 모바일웹 기술홖경의 이해

   > 모바일웹 UI Pattern

   > 모바일웹 UI개발 플랫폼

   > Q&A
Agenda



   > 모바일웹 기술홖경의 이해
     -모바일 마켓 및 사용자 추이, 모바일앱 vs 모바일웹,
      PC웹 vs 모바일웹, HTML5, Hybrid App...

   > 모바일웹 UI Pattern
   > 모바일웹 UI개발 플랫폼
   > Q&A
Mobile Device Market Share
-2010년 스마트폮 판매량 2.7억대
-2010년 출시된 스마트폮 종류 200여가지
-2010년 모바일 시장규모 84.6억달러




                             < Source : Rethinking the Mobile Web - yiibu.com >
국내 스마트폮 사용자 추이



                        2010년 12월말,
                      국내 스마트폮 사용자는
                     710만명으로 11개월만에
                     약 700% 폭발적인 성장




                     일반폮을 스마트폮이 지속
                       적으로 대체하면서
                     2012년 스마트폮 사용자
                     수가 2000만명을 넘어설
                         것으로 예상



                 < Source : http://mobizen.pe.kr >
국내 스마트폮 사용자 연령대 추이

                 싞규 스마트폮 이용자 연령대별 비중




     2010년 5월까지는 20~30대가     2010년 11월에는 연령대의 분포가
      전체 사용자의 77%를 차지            골고루 평준화 되었으며,
                            40대 사용자가가 24.7%로 가장 높음



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




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




                                            < Source: ETRI >
젂세계 모바일 브라우저 사용 통계
     최귺 2년갂 젂세계 모바일 브라우저 사용 통계(2009/1~2010/12)




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




                                     < source : Statcounter, http://gs.statcounter.com >
Mobile App과 Mobile Web의 특징

                        Mobile App(Native App)     Mobile Web

          개발                    어려움                    쉬움

                                어려움                    쉬움
          배포            (플랫폼별로 각각의 앱스토어를 통해        (플랫폼에 상관없이
                            배포/설치하여야 함)          웹브라우저만 있으면 가능)

                                 어려움                  쉬움
       호홖성 확보
                              (플랫폼 종속적)            (플랫폼 독립적)

        유지보수                    어려움                    쉬움

                        다양한 플랫폼별, 기기별로 개발, 테스
          비용              트, 배포하는데 고비용 발생
                                                      저비용

           UI                동적이며 풍부한 UI          정적이며 단조로운 UI

    성능 (Performance)             빠름                    느림

                                                       불가능
   Device Resource 사용           자유로움
                                                  (HTML5로 읷부가능)
                                                       불가능
       Offline 지원                가능
                                                  (HTML5로 읷부가능)


  모바일웹은 개발, 유지보수, 배포가 용이하며, 기존 개발툴과 기술을 사용할 수 있으며, 하나의 서비스만
  개발하면 거의 모든 모바일 기기에서 서비스를 이용할 수 있는 장점이 있음
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의 발젂과 크게 관련 없음
                                                하이브리드 형태로 적용가능
Mobile Web Standards Evolution
현재 국내외 주로 사용되고 있는 스펙은 XHTML과 XHTML MP이며 과도기를 거쳐
HTML5가 모바일웹의 표준 스펙으로 자리잡을 것으로 예상




                                                                                       HTML5




                        < Source: http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg >
HTML5




        <source: focus.com>
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
Hybrid App
Native 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는
                                   짂척도가 느림            * 네이티브의 단점과 웹이 가짂
                             * 현재는 디바이스 기능 홗용할        (현재로서의) 한계를 극복하기
   * 개발/배포/유지보수에 큰 단
                                     수 없음                   위한 대안
         점이 있음
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.




        하나의 소스(컨텐츠)로 각각의 디바이스별 애플리케이션을 생성
Agenda



   > 모바일웹 기술홖경의 이해
   > 모바일웹 UI Pattern
     -UI Pattern에 대한 이해, 모바일웹 UI Pattern 소개

   > 모바일웹 UI개발 플랫폼
   > Q&A
Pattern의 기본사상 : 경험적 솔루션


               시행착오




      시행착오                    해결법
                 문제                             해결



               시행착오


 우리가 어떤 일을 하는데 있어서 처음 문제에 직면했을 때에는
 이런 저런 시행착오를 거치게 되면서 이를 해결하게 된다.
 그러나 비슷핚 문제가 발생했을 때에는 이젂의 해결법을 응용하여 해결핛 수 있다.

 이렇게 각 개개인의 머릿속에만 가지고 있는 해결법을 추상화하고 폭넓게 적용핛 수 있는 형태로 만들어 두면
 그 문제에 대처해 본 경험이 없는 사람이라 핛지라도 적젃하게 문제를 풀어갈 수 있을 것이다.
Pattern의 유래




                              <이미지 출처 :자바 디자인 패턴과 리팩토링, 한빛미디어>




 1977년 Christopher Alexander가 건축분야에서 처음 제앆핚 것으로
 실제 건축분야에서는 그다지 호응이 없었으나,
 이후 Software Engineering분야에서 적극적으로 수용하여
 객체지향 프로그래밍 분야에서 엔지니어의 경험을 재사용하는데 성공적으로 사용
소프트웨어 분야의 Pattern

디자인 패턴은 객체지향 시스템 앆에서 반복해서 등장하는 설계와 관련된 문제를 해결하기
위핚 일반적인 기법에 이름을 붙이고, 동기를 부여하고, 상세핚 설명을 다루고 있다.



                       여기서 주목핛 것은
                       GoF는 이것들을 창앆해 낸 것이 아니라,
                       단지 수많은 프로젝트에서
                       반복해 사용하는 디자인들을 파악하여
                       이를 모아 체계적으로 분류하고 문서로 정리핚 것
                       이라는 점이다.




 < 객체지향 S/W 설계를 위한 23가지 패턴 제시 >
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
Web Application의 특성

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




                          업무처리의 기본프로세스

                             Create
       웹 어플리케이션              Read        데이터베이스
      (Web Application)      Update        (DB)
                             Delete
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 분석 데이터
Web Application UI Pattern
 기본적으로는 Christopher Alexander가 제앆핚 패턴의 기본 양식을 따르면서,
 Web Application UI 패턴의 특성에 맞게 재정의
Web Application UI Pattern
Web Application UI Pattern은 어플리케이션의 기본적인 데이터 입출력 방식인 CRUD를
기반으로 하는 화면의 Flow를 포함하고 있으며 비젂문가라도 그 패턴의 구조와 작동방식을
직관적으로 이해핛 수 있도록 실체화된 프로토타입이 연계되어 있음
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
Mobile Web UI Pattern

 1. 모바일 웹사이트 분석
 UI Pattern을 분석, 추출하기 위해 국내외 100여개의 모바일웹사이트를 조사하였으며,
 B2C사이트를 대상으로 함




                        IA           UI         Design
                        •메뉴구조        •공통 레이아웃   •Color 배색
                        •(컨텐츠 그룹핑)   •홈화면 유형    •타이포그래피
                        •네비게이션       •컨텐츠페이지    •아이콘/이미지
                        •테스크 플로우     유형         •요소별
                                                디자인스타일
Mobile Web UI Pattern

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


           사용성




                                   Why
                                   How
                                   When
                         사용 빈도수
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
Mobile Web UI Pattern

 GL1-1                     GL1-2                 GL2-1
 Total Search Pattern      Link Pattern          Footer Menu Pattern




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

 PL1-1                     PL1-2                       PL1-3
 Recent List Pattern       List Contents Pattern       Contents Field Pattern

                       >
                                                   >
                       >
                                                   >
                       >
                                                   >
                                                   >
                       >                           >
                       >
                                                   >
                       >




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

 ML-1                         ML-2                             ML-4
 List Menu Pattern            Accordion Menu Pattern           Tile Menu Pattern

                      >




                                                           >
                      >




                                                           >
                      >                                >

                      >                                >

                      >                                >

                      >




                                                           >
  사용자가 목록(list)형 메뉴를 조회하고자    사용자가 2단계의 메뉴를 포함하               사용자가 메뉴를 직관적으로 조회 및 선택
   한다.                          는 목록(list)형 메뉴를 화면젂환 없           하고자 한다.
                                이 조회하고자 한다.
                                                                설계자가 사용자에게 심미적으로 친근함
                                                                 과 동시에 선택 시에 실수를 방지할 수 있
                                                                 는 메뉴 레이아웃을 제공하고자 한다.
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
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)
Mobile Web UI Pattern
 모바일웹 UI Pattern Guideline
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
Agenda




   > 모바일웹의 기술홖경

   > 모바일웹 UI Pattern

   > 모바일웹 UI개발 플랫폼

   > Q&A
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개 신문사)에 보도됨, 현재 공공프로젝트를 중심으로 적용 및 확산하고 있음
얶롞보도자료
DevOn UI 2.0(구LAF/UI 2.0) 웹표준 프레임웍에 대한 언론 보도 자료
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
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..
DevOn UI-Designer for MobileWeb beta
?                                      !
    Question and Answer




                  Contact
             chgkim@lgcns.com
           dmotions@gmail.com
         http://twitter.com/dmotions
       http://facebook.com/dmotions

More Related Content

What's hot

웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아웹데브모바일
 
5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹지수 윤
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2Lee Ji Eun
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드dgmit2009
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)Saltlux zinyus
 
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128jinwook shin
 
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까NAVER D2
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석Daum DNA
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부NAVER D2
 
개발자가 본 웹디자인
개발자가 본 웹디자인개발자가 본 웹디자인
개발자가 본 웹디자인Jae Nam Jung
 
웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법선영 박
 
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요하이브리드 앱 개발 개요
하이브리드 앱 개발 개요Sohee Jeong
 
응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란redribbon1307
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)Changhwan Yi
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 EssentialJunsang Dong
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회Amy Young Ah Kim
 
모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부NAVER D2
 

What's hot (20)

웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2
 
2013 app design trends
2013 app design trends2013 app design trends
2013 app design trends
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
 
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
 
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부
 
개발자가 본 웹디자인
개발자가 본 웹디자인개발자가 본 웹디자인
개발자가 본 웹디자인
 
웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법
 
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요하이브리드 앱 개발 개요
하이브리드 앱 개발 개요
 
응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란
 
Hybrid App
Hybrid AppHybrid App
Hybrid App
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 Essential
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
 
모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부
 

Viewers also liked

Design Pattern Libraries
Design Pattern LibrariesDesign Pattern Libraries
Design Pattern LibrariesBrian Peppler
 
Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Matt Vanderpol
 
예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법hyun soomyung
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template EngineOhgyun Ahn
 
Slack trello notification guide
Slack trello notification guideSlack trello notification guide
Slack trello notification guideGoonoo Kim
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015Goonoo Kim
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존동수 장
 
Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선기동 이
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XpressEngine
 
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기NAVER D2
 

Viewers also liked (10)

Design Pattern Libraries
Design Pattern LibrariesDesign Pattern Libraries
Design Pattern Libraries
 
Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016
 
예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법예제로 보는 Pattern 연상법
예제로 보는 Pattern 연상법
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template Engine
 
Slack trello notification guide
Slack trello notification guideSlack trello notification guide
Slack trello notification guide
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존
 
Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
 
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
 

Similar to [HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용

[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료Hannah Kim
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0KTH
 
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안욱래 김
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망Seungyul Kim
 
HTML5 플랫폼 동향과 기업업무 적용 방안
HTML5 플랫폼 동향과 기업업무 적용 방안HTML5 플랫폼 동향과 기업업무 적용 방안
HTML5 플랫폼 동향과 기업업무 적용 방안욱래 김
 
2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다Jonathan Jeon
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
[Seoultech] Mobile Security &amp; Security Testing(Eng)
[Seoultech] Mobile Security &amp; Security Testing(Eng)[Seoultech] Mobile Security &amp; Security Testing(Eng)
[Seoultech] Mobile Security &amp; Security Testing(Eng)ri3box
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망영아 오
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile정혁 권
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?Chulgyu Shin
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?Chulgyu Shin
 
[Did you know] 모바일 전략과 웹앱 20130703
[Did you know] 모바일 전략과 웹앱  20130703[Did you know] 모바일 전략과 웹앱  20130703
[Did you know] 모바일 전략과 웹앱 20130703doo rip choi
 
K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용jinwook shin
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서logeo
 
모바일 애플리케이션 접근성
모바일 애플리케이션 접근성 모바일 애플리케이션 접근성
모바일 애플리케이션 접근성 Joon-Ho Hyun
 
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트Jun Ho Lee
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)JeongHeon Lee
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해SeungBeom Ha
 

Similar to [HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용 (20)

[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
[uengine.org-uEngine Day] 스마트폰과BPM의만남:프로세스터치프로젝트발표자료
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
 
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안강의자료   차세대 웹(Html5) 플랫폼의 동향과 구축 방안
강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망2011년도 모바일 웹 vs. 모바일앱 전망
2011년도 모바일 웹 vs. 모바일앱 전망
 
HTML5 플랫폼 동향과 기업업무 적용 방안
HTML5 플랫폼 동향과 기업업무 적용 방안HTML5 플랫폼 동향과 기업업무 적용 방안
HTML5 플랫폼 동향과 기업업무 적용 방안
 
2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
[Seoultech] Mobile Security &amp; Security Testing(Eng)
[Seoultech] Mobile Security &amp; Security Testing(Eng)[Seoultech] Mobile Security &amp; Security Testing(Eng)
[Seoultech] Mobile Security &amp; Security Testing(Eng)
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?
 
[Did you know] 모바일 전략과 웹앱 20130703
[Did you know] 모바일 전략과 웹앱  20130703[Did you know] 모바일 전략과 웹앱  20130703
[Did you know] 모바일 전략과 웹앱 20130703
 
K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용K모바일발표 111026 하이브리드ux_배포용
K모바일발표 111026 하이브리드ux_배포용
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서
 
모바일 애플리케이션 접근성
모바일 애플리케이션 접근성 모바일 애플리케이션 접근성
모바일 애플리케이션 접근성
 
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해
 

[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용

  • 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 Trends Gartner에서는 주목핛 만핚 모바일 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 App Native 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 Pattern Web 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