1

Mobile Web Framework

최적화 설계에 관한 연구

2011. 05. 31

지도 교수 : 조 이 남

발 표 자 : 최 용 준

2

목 차

모바일 플랫폼과 모바일 웹 프레임워크 기반 기술IIII

IVIV

IIIIII

서론

모바일 웹 프레임워크 비교분석

모바일 웹 프레임워크 최적화 설계 및 구현

VV 결론

II

3

모바일 세계의 개발환경

플랫폼 별 개발환경

HTML, CSS, Javacript 공통의 개발 환경

빌더를 통한 Javacript 개발 환경

4

I. 서론

- 안드로이드 , 아이폰 모바일 플랫폼을 살펴보고 , 그 각각의 특성을 비교

-오픈소스인 모바일 웹 프레임워크 비교

-안드로이드와 아이폰 Webkit 비교 분석

-모바일 웹앱에 필요한 프레임워크 재설계

연구 목적

연구 목적

5

I. 서론

연구방법

- 모바일 플랫폼 기반 기술 파악

- 모바일 웹 프레임워크 기반 기술 파악

- 모바일 웹 프레임워크 비교 분석

- 하이브리드 빌더 비교 분석

연구의 범위

- 모바일 앱 플랫폼 조사

- 모바일 웹 프레임워크 조사

- 서비스 최적 Framework 프로세스 검토

- 효율적인 모바일 개발을 위한 최적의 Framework 설계

연구 방법과 범위

연구 방법과 범위

6

-2010 년 스마트폰 판매량 2.7 억대-2010 년 출시된 스마트폰 종류 200 여가지-2010 년 모바일 시장규모 84.6 억달러

II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술 Mobile Device Market Share

7

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

국내 스마트폰 사용자 추이II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술

8

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

국내 스마트폰 사용 실태

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

II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술

9

Mobile Trends

Gartner 에서는 주목할만한 모바일 10 가지 기술로 ‘ Mobile Web’ 을 선정하였으며 , 향후 모바일웹이 B2C 모바일 어플리케이션시장을 주도할 것이라고 예측함

II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술

10

모바일 플랫폼 주요요소II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술

안드로이드 프레임워크 아이폰 프레임워크

공통점은 Embedded Linux

커널

11

III. 모바일 웹 프레임 워크 비교분석 Mobile App 과 Mobile Web 의 특징

12

Hybrid App Native App 의 단점과 Mobile Web 이 현재 가지고 있는 한계를 극복할 수 있는 대

안 으로 등장한 것이 바로 Hybrid App

Hybrid AppIII. 모바일 웹 프레임 워크 비교분석

13

Hybrid AppIII. 모바일 웹 프레임 워크 비교분석

14

개발 환경 비교

개발자 측면 안드로이드와 아이폰 개발 환경 비교

안드로이드 아이폰개발언어 자바에 친숙한 개발자에게는 개발이

용이함Objective C 언 어 에 익 숙 한 개발자에게는 용이함 .내장형 응용 개발이 아닐 경우 웹 언어 (HTML/CSS등 ) 이용하여 웹 응용 개발 가능

GUI 개발 기 존 에 사 용 되 는 GUI 개 발 관 련 클래스와 비슷한 개념을 쓰고 있어 친숙 기존 경험을 활용하여 개발 가능

기존 GUI 개발 관련 클래스와는 다른 UI 클래스 구조를 가지고 있음

API 활용 개발에 사용하는 API 완성도가 부족( 무분별한 상속 구조 , 이벤트 전달 부실 )

API 완성도가 높고 활용 가능한 것 , 활용 못하는 것에 대한 구분이 명확히 되어있음

UI 개발 레이아웃을 XML 로 작성할 수 있으나 자 바 로 작 성 하 는 것 이 편 리 . 에디터에서 UI 스타일 반영 안됨

에디터에서 UI 스타일 확인 가능 .눈으로 직접 보면서 구성할수 있음( 인터페이스 빌더 ).

에뮬레이터 실행 속도가 매우 느림 실행속도 빠름

III. 모바일 웹 프레임 워크 비교분석

15

WebKit 성능 비교

웹킷 기본사양

지원정보XML XML 1.0 : 부분적 지원Graphic JPEG/JFIF : 85 버전 이상

GIF 89 a : 85 버전 이상

CSS CSS 1: 85 버전 이상CSS 2.1: 대부분 지원CSS 3: 조금 지원

DOM DOM level 1: 85 버전 이상DOM level 21: 대부분 지원DOM level 3: 조금 지원

Javascript JavaScript 1.5 extensions 지원

개발회사 벤치마크 특징

모질라 Dromaeo[26]SunSpider 와 자바스크립트엔진 기반으로 개발

구글 V8 Benchmark[27] 기존개발된 자바크립트로 구현하여 사용

애플 unSpider[28] 실제사용되는 자바스크립트 코드 사용

웹킷 성능 벤치마크 도구들

웹킷 구성요소

III. 모바일 웹 프레임 워크 비교분석

사파리 , 크롬 , Opera 등은

브라우저 내부에 자바스크립트

엔진으로 오픈소스인 WebKit 을 사용한다 .

16

벤치마크별 자바스크립트 성능비교

안드로이드와 아이폰 웹킷 특징 비교

DeviceV8 Benchmark(Higher ScoreIs Better

Sunspider, InSeconds(Lower Score IsBetter)

Dromaeo(Higher Score IsBetter)

Android 2.2 287.0 5.8 330.39Android 2.1 65.0 14.3 270.07

iPhone 4 83.4 10.9 -iPad 101.0 10.1 -

iPhone 3GS 49.3 14.2 319.6iPhone 3G* 23.0 41.4 -

안드로이드 아이폰

자바스크립트 엔진 구글 V8 스쿼럴피쉬

기타 모든 이벤트에 대한 코딩 필요 API 로 지원 함

참고자료 부족함 아이폰개발포럼을 통해 이용가능함

III. 모바일 웹 프레임 워크 비교분석 WebKit 성능 비교

17

모바일 웹 프레임워크 비교 분석

Sencha Touch 와 jQuery Mobile 비교

Sencha Touch jQuery Mobile

라이브러리 모바일 자바스크립트 라이브러리 모바일 자바스크립트 라이브러리

개발방식 컴포너튼 기반 방식(ExtJS 라이브러리 중심 )

HTML 기반 방식

학습 ExtJS 라이브러리 공부 필요 없음

개발 영역 자바스크립트 엔지니어 자바스크립트 엔지니어 /Web UI Developer

컴포넌트 API 식 기능 제공 직접개발

지원브라우저 전체 모바일기기 전체 모바일기기

Back 버튼 X O

기타기능 네이티브 앱과 비슷한 UI 환경 전체적으로 웹 UI 환경- 고정바를 둘 수 없음

터치 O O

III. 모바일 웹 프레임 워크 비교분석

18

하이브리드 빌더 비교

Titanium PhoneGap Adobe Air 설명

안드로이드 지원 O O OAir 는 안드로이드 2.2+

아이폰 /아이패드 O O O

블랙베리 △ O X티 타 늄 는 현 재 버전부터 지원

심비안 X O X

팜 X O X

Window Phone 7

X △ X폰 갭 에 서 는 써드파티로 제공

Native UI 지원 O △ △폰 갭 ,Air UI 컨 트 롤 및 써드파티고 제공

데스크톱개발환경 O △ O 폰 갭 은 맥 과 윈도우만 지원

IDE&ToolsTitanuim

DeveloperPhoneGap

Tools

Flash Builder, FT, FlashDevel

op

인터프린팅 자바스크립트 코드 웹류렌더링시 Adobe Aire

실행시

커뮤니티 Developer Center

Docs, Wiki

Mobile and Devices

Development Center

사용언어 HTML,JS,CSS HTML,JS,CSSActionscrip

t3

Titanium

PhoneGap

Adobe Air

설명

가속계 O O O현재위치 O O O

진동 O O X카메라 O O △ Air 는

Iphone/ipad 만 지원 못함

전화번호부 O O X멀티터치 O O OSQLite O O O

File System

IO

O O O

SMS O O OPhone

APIO O O

Copy/Paste

O O O

Sounds O △ △ 폰갭과 Air은 부 분 지원

Bluetooh X X XVideo

CaptureO X △ Air 는

Iphone/ipad 만 지원 못함

하이브리드 빌더별 지원 기능 비교 하이브리드 빌더에서 디바이스 기능비교

III. 모바일 웹 프레임 워크 비교분석

19

IV. 모바일 웹 프레임워크 최적화 설계 및 구현 통합 모바일 웹 프레임웍

통합 프레임워크 - 오픈소스를 바탕으로 한 W3C 웹표준 스펙준수- Cross Browing 및 Cross Platform 지원- 웹접근성을 높이기 위한 CSS, Extension 구조- 스마트폰에 최적화된 UI 및 디자인 제공- jQuery 를 이용한 안정된 UI 제공

20

I. 통합 프레임웍 설계 Mobile App 과 Mobile Web 의 특징

구조 설명CSS 스타일 관련 파일image 이미지 관련 파일javascript 압축 자바스크립트 Extensions 기타 기능 지원 자바스크립트jQtouch jQuery 를 기반으로한 플러그인 지원Themes 아이폰 /안드로이드 등 각종 테마 구성

통합 Framework 구성

21

통합 프레임워크 구현

<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Intranet Employee Directory</title> <style type="text/css" media="screen"> @import "jqtouch/jqtouch.min.css"; ..............................① </style> <style type="text/css" media="screen"> @import "themes/jqt/theme.min.css"; ...........................② </style> <scriptsrc="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>.............................................③ <script src="jqtouch/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>.............................................④ <script type="text/javascript">...........................................⑤ var jQT = $.jQTouch({ icon : 'icon.png' }); </script></head><body> <div class="home"> <div class="toolbar"> <h1>Employees</h1> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#list-style">List</a></li> <li class="arrow"><a href="#table-style">Table</a></li> </ul> </div></body></html>

IV. 모바일 웹 프레임워크 최적화 설계 및 구현

22

jQuery 브라우저 성능 테스트

표준화된 테스트 결과 1 표준화된 테스트 결과 2

웹 표준 체크 테스트

IV. 모바일 웹 프레임워크 최적화 설계 및 구현

23

V. 결론

본 논문은 모바일 플랫폼과 모바일 웹 프레임워크에 대해 주요요소 , 비교분석을 하였고 이를 통해 jQuery 오픈소스인 모바일 웹 프레임워크를 재구성했다 . 이는 모바일 기술 표준화에 맞춰 브라우저간 상호 호환성 지원하였고 jQuery 기술을 이용하여 모바일 Framework 의 편의성 및 확장성을 높이고자 하였다 .

결론적으로 ..

- 유무선의 경계가 사라지고 있으며 , 모바일 애플리케이션에서 웹 기술과 플랫폼 협력이 두드러지고 있다는 점이다 .

- 오픈 소스와 결합한 하이브리드형 매시업 애플리케이션과 개발 방법이 급속하게 확산되고 있다는 점이다 .

-과거와 같이 Native Application 과 Web Application 이 따로 떨어지는 것이 아니라 , 서로가 서로의 장점을 취하며 Native 앱에 근접하게 제작이 가능하다 .

24

V. 결론

-차세대 모바일 웹애플리케이션 관련 표준과 기술이 안정화되고 정착되는 과정에서 훨씬 다양한 형태의 모바일 애플리케이션들이 등장하도록 할 것으로 예상

-HTML5 그리고 브라우저 내의 데이터베이스를이용하여 복잡한 캐시와 오프라인 처리를 손쉽게 하면서 다양한 단말의 기능을 제어할 것으로 예상

-사용자 단말의 대기화면과 다양한 서버 사이를 자유롭게 넘나드는 웹 표준 기반의 차세대 웹 애플리케이션과 하이브리드 웹 애플리케이션이 대중화 될 것으로 예상

향후 발전 방향

25

감사합니다 .