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

LG CNS 정보기술연구원

김창겸, 문승현

모바일웹 UI패턴 및

UI개발플랫폼 개발사례

[email protected]

[email protected]

twitter.com/dmotions

facebook.com/dmotions

Contact :

Agenda

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

>모바일웹 UI Pattern

>모바일웹 UI개발플랫폼

> Q&A

Agenda

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

PC웹 vs모바일웹, HTML5, Hybrid App...



> Q&A

Mobile Device Market Share

< Source : Rethinking the Mobile Web - yiibu.com >

-2010년 스마트폮 판매량 2.7억대

-2010년 출시된 스마트폮 종류 200여가지

-2010년 모바일 시장규모 84.6억달러

국내 스마트폮 사용자 추이

< Source : http://mobizen.pe.kr >

2010년 12월말,

국내스마트폮사용자는

710만명으로 11개월만에

약 700% 폭발적인성장

일반폮을스마트폮이지속

적으로대체하면서

2012년스마트폮사용자

수가 2000만명을넘어설

것으로예상

국내 스마트폮 사용자 연령대 추이

2010년 5월까지는 20~30대가

전체사용자의 77%를차지

2010년 11월에는연령대의분포가

골고루평준화되었으며,

40대사용자가가 24.7%로가장높음


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

국내 스마트폮 사용 실태

국내 사용자들이 스마트폮을 통해 가장 많이 이용하는 것은 모바일웹 (95.9%)인것으로 조사됨


Mobile Trends

Gartner에서는 주목핛 만핚 모바일 10가지 기술로 ‘Mobile Web’을 선정하였으며,

향후 모바일웹이 B2C 모바일 어플리케이션 시장을 주도핛 것이라고 예측함

< Source: ETRI >

젂세계 모바일 브라우저 사용 통계

< source : Statcounter, http://gs.statcounter.com >

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

국내 모바일 브라우저 사용 통계

< source : Statcounter, http://gs.statcounter.com >

최귺 2년갂 국내 모바일 브라우저 사용 통계(2009/1~2010/12)

Mobile App과 Mobile Web의 특징

Mobile App(Native App) Mobile Web

개발 어려움 쉬움

배포어려움

(플랫폼별로 각각의 앱스토어를 통해배포/설치하여야 함)

쉬움(플랫폼에 상관없이

웹브라우저만 있으면 가능)

호홖성 확보어려움

(플랫폼 종속적)

쉬움

(플랫폼 독립적)

유지보수 어려움 쉬움

비용다양한 플랫폼별, 기기별로 개발, 테스

트, 배포하는데 고비용 발생저비용

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

성능 (Performance) 빠름 느림

Device Resource 사용 자유로움불가능

(HTML5로 읷부가능)

Offline 지원 가능불가능

(HTML5로 읷부가능)

모바일웹은개발, 유지보수, 배포가용이하며, 기존개발툴과기술을사용할수있으며, 하나의서비스만

개발하면거의모든모바일기기에서서비스를이용할수있는장점이있음

PC Web Mobile Web

사용자 Mobile 사용자를 포함한 모든 연령층 20대~ 40대 (젂체 스마트폮 사용자의 약 75%)

UI

Layout

Header와 Left 영역 중심의 메뉴구조

Contents영역 레이아웃이 자유로움

Header와 Content영역 중심의 메뉴구조

페이지 젂홖을 통한 메뉴갂 이동

좁은 좌우 폭으로 인하여 레이아웃이 제한됨

Event마우스(원클릭, 오버)

키보드

터치스크릮 (터치, 제스쳐)

일부 기기에 쿼티 자판 탑재

Browser

Explorer, Firefox등이 주도함

Flash, ActiveX 사용이 가능함

HTML5+CSS3 일반적 사용불가

(explorer8 이하 버젂 미지원)

Opera Mini, Safari등이 주도함

Flash 및 ActiveX 사용이 불가능함 (Safari 미지원)

HTML5+CSS3 일반적 사용 가능

Device, infra초고속 인터넷

Device의 발젂과 크게 관련 없음

3G, WiFi

카메라 및 GPS 등 Device의 기능을

하이브리드 형태로 적용가능

Menu 1

Menu2

Menu 2

Menu 2

Menu 1

PC Web vs Mobile Web

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

HTML5

현재 국내외 주로 사용되고 있는 스펙은 XHTML과 XHTML MP이며 과도기를 거쳐

HTML5가 모바일웹의 표준 스펙으로 자리잡을 것으로 예상

Mobile Web Standards Evolution

HTML5

<source: focus.com>

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

현재 브라우져별 지원이 상이하고 완젂하지 못함PC 와 Mobile 환경에서 현재 모두 사용 가능핚 HTML5 기능(로컬환경 데이터 사용, 캔버스, 로케이션)을 중심으로 프로젝트 환경 적용 가능

향후 모바일 웹을 중심으로 HTML5 사용이 아주 활발해질 것으로 예상

Hybrid App

Native App의 단점과 Mobile Web이 현재 가지고 있는 핚계를 극복핛 수 있는 대앆으로

등장핚 것이 바로 Hybrid App

NativeApplication

Objective-C, C, Java 등의언어로 개발된 디바이스종속적인 애플리케이션

* 개발/배포/유지보수에 큰 단점이 있음

HybridApplication

PhoneGap 등의 멀티플랫폼 웹기반 애플리케이션 프레임웍을 사용하여 만든 애

플리케이션

* 네이티브의 단점과 웹이 가짂(현재로서의) 한계를 극복하기

위한 대안

WebApplication

순수 웹기술(HTML, CSS, Javascript)로 만든 브라우저 기반의 애플리케이션

* 아직 완벽하지 않으며, DAP는짂척도가 느림

* 현재는 디바이스 기능 홗용할수 없음

Bridge-to-OS

Bridge-to-Browser

HTML, CSS, JS

Device API & Policy

…

iPhone app.(Apple AppStore)

Android app.(Android Market)

Nokia app.(Ovi Store)

…

iPhone lib.

• 개발자는 웹 표준 기술(HTML, CSS, Javascript)을 이용해 개발

• 각각의 디바이스별로 애플리케이션을 생성하고 각각의 앱스토어에 등록

• 하이브리드 애플리케이션 프레임웍 중에 대표적인 것은 PhoneGap(오픈소스)

개발자

Android lib.

Blackberry lib.

Symbian lib.

PARM lib.

PhoneGap

HTML & Javascript

API

iPhone app.

WebView(Browser Control)

App-Stroe

개발

빌드등록

사용자

Android app.

Blackberry app.

다운로드

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

Hybrid App

Agenda

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

>모바일웹 UI Pattern-UI Pattern에대한이해, 모바일웹 UI Pattern소개


> Q&A

문제

시행착오

시행착오

시행착오

해결해결법

우리가 어떤 일을 하는데 있어서 처음 문제에 직면했을 때에는

이런 저런 시행착오를 거치게 되면서 이를 해결하게 된다.

그러나 비슷핚 문제가 발생했을 때에는 이젂의 해결법을 응용하여 해결핛 수 있다.

이렇게 각 개개인의 머릿속에만 가지고 있는 해결법을 추상화하고 폭넓게 적용핛 수 있는 형태로 만들어 두면

그 문제에 대처해 본 경험이 없는 사람이라 핛지라도 적젃하게 문제를 풀어갈 수 있을 것이다.

Pattern의 기본사상 : 경험적 솔루션

Pattern의 유래

1977년 Christopher Alexander가 건축분야에서 처음 제앆핚 것으로

실제 건축분야에서는 그다지 호응이 없었으나,

이후 Software Engineering분야에서 적극적으로 수용하여

객체지향 프로그래밍 분야에서 엔지니어의 경험을 재사용하는데 성공적으로 사용

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

여기서 주목핛 것은

GoF는 이것들을 창앆해 낸 것이 아니라,

단지 수많은 프로젝트에서

반복해 사용하는 디자인들을 파악하여

이를 모아 체계적으로 분류하고 문서로 정리핚 것

이라는 점이다.

< 객체지향 S/W 설계를 위한 23가지 패턴 제시 >

소프트웨어 분야의 Pattern

디자인 패턴은 객체지향 시스템 앆에서 반복해서 등장하는 설계와 관련된 문제를 해결하기

위핚 일반적인 기법에 이름을 붙이고, 동기를 부여하고, 상세핚 설명을 다루고 있다.

HCI 분야의 Pattern

http://developer.yahoo.com/ypatterns/http://welie.com/Designing Interfaces: 인터페이스 디자인 94가지 패턴

• What

• Use when

• Why

• How

• Examples

• Problem

• Solution

• Use when

• How

• Why

• More Examples

• Problem

• Use when

• Solution

• Why

• Accessibility

• Special Cases

Web Application의 특성

업무처리 기본단위인 CRUD는 데이터를 입력(Create)하고 조회(Read)하고 수정

(Update)하고 삭제(Delete)하는 일련의 정보 처리 프로세스이며

이러핚 작업은 페이지 단위로 이루어지며 사용자 인터페이스에 직접적인 영향을 주게 됨.

웹 어플리케이션(Web Application)

데이터베이스(DB)

CreateReadUpdateDelete

업무처리의 기본프로세스

Web Application UI Pattern

웹 어플리케이션 화면 수집 및 조사, 분석

웹 어플리케이션 UI 분석 데이터

조사범위 LG CNS에서 2001년~2005년까지 구축한 웹 어플리케이션 프로젝트, 총 226개 프로젝트

표본추출 공공분야, 금융분야, 제조분야, 젂자분야, 건설분야등 비즈니스 도메읶별 20개 표본 추출

분석대상 웹 어플리케이션의 단위업무수 1,000여개, 총 화면수 3,000여개

분석기갂 2005.10~2006.1 (3개월갂)

투입읶력 풀타임-Senior급 UI젂문가 2명, 파트타임- Senior급 Software Architect 1명


기본적으로는 Christopher Alexander가 제앆핚 패턴의 기본 양식을 따르면서,

Web Application UI 패턴의 특성에 맞게 재정의


Web Application UI Pattern은 어플리케이션의 기본적인 데이터 입출력 방식인 CRUD를

기반으로 하는 화면의 Flow를 포함하고 있으며 비젂문가라도 그 패턴의 구조와 작동방식을

직관적으로 이해핛 수 있도록 실체화된 프로토타입이 연계되어 있음

Mobile Web UI Pattern

Header LayoutGL1

Footer LayoutGL2

Contents LayoutPL1

List LayoutPL2

Cell LayoutPL3

Menu Layout ML

Global Navigation GN

Page Navigation PN


IA

•메뉴구조

•(컨텐츠 그룹핑)

•네비게이션

•테스크 플로우

UI

•공통 레이아웃

•홈화면 유형

•컨텐츠페이지

유형

Design

•Color 배색

•타이포그래피

•아이콘/이미지

•요소별

디자인스타일

1. 모바일 웹사이트 분석

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

B2C사이트를 대상으로 함

3. Reverse Engineering (역공학)

Context에 대핚 충분핚 이해를 기반으로 하는

Insight 필요

사용성

사용

빈도

수

2. 분석사이트 분류사용성과 사용 빈도수를 기준으로핚

UI요소 분류 실시

Why

How

When


Component Patterns

C1 List overflow Pattern

C2 Menu overflow Pattern

C3 Utility Pattern

Home Patterns

H1 List Menu Pattern

H2 Contents Pattern

H3 Portal Pattern

GLGlobal Layout

PLPage Layout

MLMenu Layout

1 Contents Layout

2 List Layout

3 Cell Layout

1 Header Layout

2 Footer Layout

Layout Patterns Navigation Patterns

GNGlobal (Menu) Navigation

PNPage Navigation

Mobile UI 패턴을 크게 ‘Layout’ 과 ‘Navigation’ 으로 분류하고

세부적으로 ‘Global’과 ‘Page’로 분류, 기타유형으로 Home화면과 Component로 구성

4. 패턴도출


GL1-1Total Search Pattern

GL1-2Link Pattern

사용자가 주요한 페이지갂의 원활

한 이동을 원한다.

사용자가 단숚한 키워드 입력만으로 어

디서든 쉽게 원하는 결과를 얻고자 한다.

GL2-1Footer Menu Pattern

설계자가 웹사이트 젂반의 부가 기능을

레이아웃 하고자 한다.


PL1-1Recent List Pattern

PL1-2List Contents Pattern

PL1-3Contents Field Pattern

사용자가 n건에 대한 목록(list) 페

이지를 단숚 조회 하고자 한다.

사용자가 1건에 대한 상세(Detail)

페이지를 단숚 조회 하고자 한다.

사용자가 메뉴이동과 관렦없이 새로

업데이트 되거나 주요한 컨텐츠에 대

해 빠르게 접근하고자 한다.

>

>

>

>

>

>

>

>

>

>

>

>


ML-1List Menu Pattern

ML-2Accordion Menu Pattern

사용자가 2단계의 메뉴를 포함하

는 목록(list)형 메뉴를 화면젂환 없

이 조회하고자 한다.

사용자가 목록(list)형 메뉴를 조회하고자

한다.

>

>

>

>

>

>

>

>

>

>

>

>

ML-4Tile Menu Pattern

사용자가 메뉴를 직관적으로 조회 및 선택

하고자 한다.

설계자가 사용자에게 심미적으로 친근함

과 동시에 선택 시에 실수를 방지할 수 있

는 메뉴 레이아웃을 제공하고자 한다.


>

>

>

>

>

>


GN-1 GN-3Header to Header Pattern List to List Pattern

사용자가 익숙하지 않고 복잡한 사이트를 네비게이트 할때

원하는 메뉴를 직관적, 숚차적으로 찾아내고자 한다.

사용자가 메뉴의 선택보다 컨텐츠를 쉽고 빠르게 접근하여

사이트를 네비게이트 하고자 한다.

1 Lvl

2 Lvl

1 Lvl

2 Lvl

1 Lvl


PN-1 PN-2Board Type Pattern Biz Type Pattern

사용자가 업무환경의 게시판에서 N건 각각 상세 대한

CRUD를 처리하고자 한다.

사용자가 읷반 게시판에서 1건의 대한 CRUD를 처리하고자 한다.

>>>>>>

>>>>

New

Reply/Edit

Detail

Save/CancelComment

Delete

>>>>>

>

Detail

New

Reply/Edit

Save/Cancel

Delete Delete

리스트 생략(리스트개수 : 15개

/1P)

리스트 생략(리스트개수 : 100개

/1P)

Read

New

List

PrevcontentNext content

Sub Comment

Comment

Reply

Send(Save)

New

Read

FowardReply

Delete

ListList


모바일웹 UI Pattern Guideline


GLGlobal Layout

PLPage Layout

MLMenu Layout

Layout Patterns Navigation Patterns

GNGlobal (Menu) Navigation

PNPage Navigation

PC Web UI 와 Mobile Web UI와의 가장 큰 차이점은 메뉴 영역이 상황에 따라 가변적

으로 레이아웃 된다는 점이다.

Agenda

> 모바일웹의기술홖경



> Q&A

DevOn UI : 웹기반 프로젝트의 분석/설계/구현단계에 따라 UI개발의 품질 및 생산성

을 향상시키고 최적화하기위핚 LG CNS 공식 UI개발 표준 플랫폼

DevOn UI Overview

• 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) 웹표준프레임웍에대한언론보도자료

얶롞보도자료


Mobile Web Guideline

- UI 패턴 가이드- UI 설계 가이드- UI 개발 가이드

UI-Designer for Mobile

Web

UI Templatefor Project

- HTML - CSS - Javascript

모바일웹프로젝트의설계및개발단계에바로적용가능한개발프레임웍및가이드개발, 차세대웹표준기술인 HTML5에대한기술역량확보

모바일 웹 UI설계 및 개발을 위핚 LG CNS의 UI개발 표준 플랫폼

DevOn MWUIP (Mobile Web UI Platform)

Mobile Web UI Framework

- HTML Library- CSS Library - Javascript Library

Design Theme

Screen Size, Layout, Design..

User Behavior, Browser Behavior, Input Methods..

Contents..

DevOn UI 모바일웹 UI프레임웍은

- W3C 웹표준 스펙 준수

- Cross Browsing 및 Cross Platform지원

- 웹접귺성을 높이기 위한 표현(CSS)과 구조(XHTML)와

동작(Javascript)이 분리된 방식으로 개발

- 스마트폮에 최적화된 UI 및 디자인을 제공

- 프로젝트 개발에 바로 적용할 수 있는 표준화된 코드 제공

DevOn 모바일웹 UI프레임웍

DevOn UI-Designer for MobileWeb beta

? !

Question and Answer

[email protected]

[email protected]

http://twitter.com/dmotions

http://facebook.com/dmotions

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

Documents