Transcript 심사발표자료v0.1

Mobile Web Framework
최적화 설계에 관한 연구
2011. 05. 31
지도 교수 : 조 이 남
발 표 자:최용준
0
목차
I
서론
모바일 플랫폼과 모바일 웹 프레임워크 기반 기술
II
III
IV
V
모바일 웹 프레임워크 비교분석
모바일 웹 프레임워크 최적화 설계 및 구현
결론
1
모바일 세계의 개발환경
모바일 앱?
플랫폼 별 개발환경
모바일 웹?
HTML, CSS, Javacript 공통의 개발 환경
빌더를 통한 Javacript 개발 환경
하이브리드 웹
2
I. 서론
연구 목적
연구 목적
-안드로이드, 아이폰 모바일 플랫폼을 살펴보고, 그 각각의 특성을 비교
-오픈소스인 모바일 웹 프레임워크 비교
-안드로이드와 아이폰 Webkit 비교 분석
-모바일 웹앱에 필요한 프레임워크 재설계
3
I. 서론
연구 방법과 범위
연구 방법과 범위
연구방법
- 모바일 플랫폼 기반 기술 파악
- 모바일 웹 프레임워크 기반 기술 파악
- 모바일 웹 프레임워크 비교 분석
- 하이브리드 빌더 비교 분석
연구의 범위
- 모바일 앱 플랫폼 조사
- 모바일 웹 프레임워크 조사
- 서비스 최적 Framework 프로세스 검토
- 효율적인 모바일 개발을 위한 최적의 Framework 설계
4
Mobile Device Market Share
II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술
-2010년 스마트폰 판매량 2.7억대
-2010년 출시된 스마트폰 종류 200여가지
-2010년 모바일 시장규모 84.6억달러
5
국내 스마트폰 사용자 추이
II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술
< Source : http://mobizen.pe.kr>
6
국내 스마트폰 사용 실태
II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술
국내사용자들이 스마트폰을 통해 가장많이이용하는것은모바일웹(95.9%)인것으로조사됨
< Source : http://mobizen.pe.kr>
7
Mobile Trends
II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술
Gartner에서는 주목할만한 모바일10가지 기술로 ‘Mobile Web’을 선정하였으며, 향
후 모바일웹이 B2C 모바일 어플리케이션시장을 주도할 것이라고 예측함
8
모바일 플랫폼 주요요소
II. 모바일 플랫폼과 모바일 웹 프레임워크 기반 기술
안드로이드 프레임워크
아이폰 프레임워크
공통점은
Embedded
Linux 커널
9
III. 모바일 웹 프레임 워크 비교분석
Mobile App과 Mobile Web의 특징
10
III. 모바일 웹 프레임 워크 비교분석
Hybrid App
Hybrid App Native App의 단점과 Mobile Web이 현재 가지고 있는 한계를 극복할 수 있는 대
안 으로 등장한 것이 바로 Hybrid App
11
III. 모바일 웹 프레임 워크 비교분석
Hybrid App
12
III. 모바일 웹 프레임 워크 비교분석
개발 환경 비교
개발자 측면 안드로이드와 아이폰 개발 환경 비교
개발언어
안드로이드
아이폰
자바에 친숙한 개발자에게는 개발이 Objective C 언 어 에 익 숙 한
용이함
개발자에게는 용이함.
내장형 응용 개발이 아닐 경우 웹
언어(HTML/CSS
등) 이용하여 웹 응용 개발 가능
GUI개발
기 존 에 사 용 되 는 GUI 개 발 관 련 기존 GUI 개발 관련 클래스와는
클래스와 비슷한 개념을 쓰고 있어 친숙 다 른 UI 클 래 스 구 조 를 가 지 고
기존 경험을 활용하여 개발 가
있음
능
API활용
개 발 에 사 용 하 는 API 완 성 도 가 API 완성도가 높고 활용 가능한 것,
부족(무분별한 상속 구조, 이벤트 전달 활 용 못 하 는 것 에 대한 구 분이
부실)
명확히 되어있음
UI개발
레이아웃을 XML로 작성할 수 있으나 에디터에서 UI 스타일 확인 가능.
자바로 작성하는 것이 편리. 에디터에서 눈 으 로 직 접 보 면 서 구 성 할 수
UI 스타일 반영 안됨
있음(인터페이스 빌
더).
에뮬레이터
실행 속도가 매우 느림
실행속도 빠름
13
III. 모바일 웹 프레임 워크 비교분석
WebKit 성능 비교
웹킷 기본사양
웹킷 구성요소
지원정보
XML 1.0 : 부분적 지원
JPEG/JFIF : 85 버전 이상
GIF 89 a : 85 버전 이상
XML
Graphic
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 지원
사파리, 크롬, Opera
등은 브라우저 내부에
자바스크립트 엔진으
로 오픈소스인 WebKit
을 사용한다.
웹킷 성능 벤치마크 도구들
개발회사
벤치마크
특징
Dromaeo[26]
SunSpider와 자바스크립트엔진 기반으
로 개발
구글
V8 Benchmark[27]
기존개발된 자바크립트로 구현하여 사용
애플
unSpider[28]
실제사용되는 자바스크립트 코드 사용
모질라
14
III. 모바일 웹 프레임 워크 비교분석
WebKit 성능 비교
벤치마크별 자바스크립트 성능비교
Device
Android 2.2
Android 2.1
iPhone 4
iPad
iPhone 3GS
iPhone 3G*
V8 Benchmark
(Higher ScoreIs Better
Sunspider, In
Seconds
(Lower Score Is
Better)
Dromaeo
(Higher Score Is
Better)
287.0
65.0
83.4
101.0
49.3
23.0
5.8
14.3
10.9
10.1
14.2
41.4
330.39
270.07
319.6
-
안드로이드와 아이폰 웹킷 특징 비교
안드로이드
자바스크립트 엔진
기타
참고자료
아이폰
구글 V8
스쿼럴피쉬
모든 이벤트에 대한 코딩 필요
API로 지원 함
부족함
아이폰개발포럼을 통해 이용가능함
15
III. 모바일 웹 프레임 워크 비교분석
모바일 웹 프레임워크 비교 분석
Sencha Touch와 jQuery Mobile 비교
Sencha Touch
jQuery Mobile
라이브러리
모바일 자바스크립트 라이브러리
모바일 자바스크립트 라이브러리
개발방식
컴포너튼 기반 방식
(ExtJS 라이브러리 중심)
HTML 기반 방식
학습
ExtJS 라이브러리 공부
필요 없음
개발 영역
자바스크립트 엔지니어
자바스크립트 엔지니어/
Web UI Developer
컴포넌트
API식 기능 제공
직접개발
지원브라우저
전체 모바일기기
전체 모바일기기
Back버튼
X
O
기타기능
네이티브 앱과 비슷한 UI 환경
터치
O
16
전체적으로 웹 UI 환경
- 고정바를 둘 수 없음
O
III. 모바일 웹 프레임 워크 비교분석
하이브리드 빌더 비교
하이브리드 빌더에서 디바이스 기능비교
하이브리드 빌더별 지원 기능 비교
Titanium
PhoneGap
Adobe Air
설명
안드로이드 지원
O
O
O
Air는 안드로이드
2.2+
아이폰/아이패드
O
O
O
블랙베리
△
O
X
심비안
X
O
X
팜
X
O
X
Window Phone 7
X
△
X
폰 갭 에 서 는
써드파티로 제공
O
△
△
폰 갭 ,Air
UI
컨 트 롤
및
써드파티고 제공
데스크톱개발환경
O
△
O
폰 갭 은
맥 과
윈도우만 지원
IDE&Tools
Titanuim
Developer
PhoneGap
Tools
Flash Builder,
FT,
FlashDevelop
인터프린팅
자바스크립트
코드
웹류렌더링시
Adobe Aire
실행시
커뮤니티
Developer
Center
Docs, Wiki
사용언어
HTML,JS,CSS
HTML,JS,CSS
Actionscript3
가속계
현재위치
진동
카메라
티타늄는 현재
버전부터 지원
Native UI 지원
Mobile and
Devices
Development
Center
Titanium
전화번호부
멀티터치
SQLite
File
System IO
SMS
Phone API
O
O
O
O
PhoneGa
p
O
O
O
O
Adobe
Air
O
O
X
설명
△
Air
는
Iphone/ipa
d만 지원
못함
O
O
X
O
O
O
O
O
O
O
O
O
O
O
O
O
Copy/Past
e
Sounds
O
O
O
O
△
△
Bluetooh
Video
Capture
X
O
X
X
X
△
17
O
O
폰 갭 과
Air 은 부 분
지원
Air
는
Iphone/ipa
d만 지원
못함
IV. 모바일 웹 프레임워크 최적화 설계 및 구현
통합 모바일 웹 프레임웍
통합 프레임워크
- 오픈소스를 바탕으로 한 W3C 웹표준 스펙준수
- Cross Browing 및 Cross Platform 지원
- 웹접근성을 높이기 위한 CSS, Extension 구조
- 스마트폰에 최적화된 UI 및 디자인 제공
- jQuery를 이용한 안정된 UI 제공
18
I. 통합 프레임웍 설계
Mobile App과 Mobile Web의 특징
통합 Framework 구성
구조
CSS
image
javascript
Extensions
jQtouch
Themes
설명
스타일 관련 파일
이미지 관련 파일
압축 자바스크립트
기타 기능 지원 자바스크립트
jQuery를 기반으로한 플러그인 지원
아이폰/안드로이드 등 각종 테마 구성
19
IV. 모바일 웹 프레임워크 최적화 설계 및 구현
<!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>
20
통합 프레임워크 구현
IV. 모바일 웹 프레임워크 최적화 설계 및 구현
표준화된 테스트 결과1
jQuery 브라우저 성능 테스트
표준화된 테스트 결과2
웹 표준 체크 테스트
21
V. 결론
본 논문은 모바일 플랫폼과 모바일 웹 프레임워크에 대해 주요요소, 비교분석을
하였고 이를 통해 jQuery 오픈소스인 모바일 웹 프레임워크를 재구성했다. 이는
모바일 기술 표준화에 맞춰 브라우저간 상호 호환성 지원하였고 jQuery 기술을
이용하여 모바일 Framework의 편의성 및 확장성을 높이고자 하였다.
결론적으로..
- 유무선의 경계가 사라지고 있으며, 모바일 애플리케이션에서 웹 기술과 플랫폼
협력이 두드러지고 있다는 점이다.
- 오픈 소스와 결합한 하이브리드형 매시업 애플리케이션과 개발 방법이 급속하게
확산되고 있다는 점이다.
-과거와 같이 Native Application과 Web Application이 따로 떨어지는 것이 아니라,
서로가 서로의 장점을 취하며 Native 앱에 근접하게 제작이 가능하다.
22
V. 결론
향후 발전 방향
-차세대 모바일 웹애플리케이션 관련 표준과 기술이 안정화되고 정착되는
과정에서 훨씬 다양한 형태의 모바일 애플리케이션들이 등장하도록 할 것으로
예상
-HTML5 그리고 브라우저 내의 데이터베이스를이용하여 복잡한 캐시와
오프라인 처리를 손쉽게 하면서 다양한 단말의 기능을 제어할 것으로 예상
-사용자 단말의 대기화면과 다양한 서버 사이를 자유롭게 넘나드는 웹 표준
기반의 차세대 웹 애플리케이션과 하이브리드 웹 애플리케이션이 대중화 될
것으로 예상
23
감사합니다.
24