HybridApp 자료 조사 knight76.tistory.com. Background.

Presentation on theme: "HybridApp 자료 조사 knight76.tistory.com. Background."— Presentation transcript:

1 HybridApp 자료 조사 knight76.tistory.com

2 Background

3 Background of Application 플랫폼별 이슈 (iOS, Android) Device 별 이슈 ( 삼성, LG …) 버전 별 이슈 (Android 2.3.3, 3.1 iOS 3, 4) 모든 버전에서 동작 가능한 어플 또는 여러 벌의 어플을 개발 iOS, Android 발생 이전의 기존 핸드폰 /TV 시장과 똑같은 상황이 벌어지고 있음 - Porting Cost 증가 - 유지보수 Cost 증가

4 대안 플랫폼별 이슈 (iOS, Android) Device 별 이슈 ( 삼성, LG …) 버전 별 이슈 (Android 2.3.3, 3.1 iOS 3, 4) One Source, Multi-platform Web 과 Native 기반에서 동작하는 어플 One Source, Multi-platform Web 과 Native 기반에서 동작하는 어플 HybridApp (Hybrid Mobile WebApp)

5 Android 2.3.3 Android 2.3.3 App iOS 4 App Android 3.1 Android 3.1 App iOS 5 App 각 플랫폼 별로 신경 써야할 내용이 너무 많음 WebKit Web App 오픈 소스인 Webkit 엔진이 동작되도 록 Porting Layer 에 새로운 Device 만 포팅만 해서 사용하도록 함 * 참고 : 블루레이, DVD 는 DTV java 플 랫폼을 이용하고 있음 Device Porting 관점 Porting Glue Device 넷플릭스 기존 배포 단위

6 HybridApp (Hybrid Mobile WebApp) = NativeApp + 모바일 Web Porting 관점 WebKit Native Code (Object C) Native Code (Object C) WebKit Native Code (Java) Native Code (Java) Android App HTML5 + JavaScript + CSS 1. Device API 나 비공유 부분은 각각의 플랫폼 별로 개발해야 함 2. WebKit 을 사용하여 모바일 Web 을 NativeApp 에 적재함 모바일 Web 부분은 HTML5 기반으로 개발되므로, 모든 플랫폼에서 공유 가능 iOS App

7 Mobile WebApp 개발 - NativeApp 으로 어플리케이션을 개발하는 것이 어려움 - 모바일 Web Browser 에서는 HTML5 를 비교적 많이 지원하고 있음 - 단점 : Mobile WebApp 은 카메라, 마이크, 파일 등 Device 접근에 제약이 있음 HybridApp (Hybrid Mobile WebApp) = NativeApp + 모바일 Web - 아직 표준화된 Device API 부재로 인해서 모바일 Web 의 Device 접근성 제약 극복 - HTML5 + CSS3 + JavaScript 을 이용하여 쉽고, 플랫폼 독립적으로 개발 - 단점 : WebKit 및 HybridApp Framework 의 구조적 문제로 속도가 매우 느림 Porting 관점

8 WebKit

9 WebKit Project : 웹 컨텐트를 렌더링하고, 자바스크립트 오류를 검증 툴을 포함 - Not Brower, Just Engine - BSD-style and LGPL licenses. - 포팅된 플랫폼 : iOS, 심비안, Google chrome, Safari, Adobe AIR, Android, Amazon Kindle, QT … - MAC OS X system framework version of the engine - Cross Platform C++, 1.8 Million line - Component - WebCore : HTML 와 SVG 에 대해서 Layout, 렌더링, DOM 파싱 - JavaScriptCore : 자바스크립트 프레임웍 - Drosera : 자바스크립트 오류 확인 툴 - Sunspider : 자바스크립트 성능 측정 툴 - WebKit 포팅시에는 WebCore 와 JavaScriptCore 만 사용 Porting 관점

10 KDE Konqueror Browser (Linux) KDE Konqueror Browser (Linux) KHTML library KJS library Safari Browser Safari Browser WebCore JavascriptCore 오픈 소스화 Mac OS 로 포팅 History

11 WebKit Project WebCore (HTML 파싱, 렌더링) /platforms JavascriptCore (프레임웍) JavascriptCore (프레임웍) Porting Glue OS WebKit API MAC QT Windows graphics, network Architecture

12 Hybrid App 개발 - HybridApp Framework 이용 - NativeApp 에 WebKit 적재

13 - MobileWeb 을 NativeApp 처럼 만들어 주는 Framework - Mobile Web 을 위한 WebKit 제공 - Device 에 접근 가능한 JavaScript 기반 Device API 제공 - NativeApp 과 같이 배포 가능하도록 Packaging 제공 - HTML5 + CSS3 + JavaScript 를 사용하여 App 개발 - One Source, Multi Platform 적용 가능 - JavaScript 를 통하여 MobileWeb 이 접근하지 못하던 Device 에 접근 가능 - 카메라, 마이크, 파일 등 - NativeApp 만큼 Deivce 연동이 매끄럽지 못함 - Device 연동 UI 에도 제약이 많음 - PhoneGap, Titanium, Appspresso 등이 유명함 Hybrid App Framework

14 PhoneGap (http://www.phonegap.com/)http://www.phonegap.com/ - 많이 유명 - WebKit 과 자체 Device API 제공 - iPhone, Android, Blackberry, Palm, Microsoft, Symbian) 지원 Titanium Mobile (http://www.appcelerator.com/)http://www.appcelerator.com/ - JavaScript 를 Cross-Compiler 를 통해 Native Code(Objective-C 나 Java) 로 변환해 주는 Framework - Javascript 가 Native Code 로 Invoke - iPhone, Android, BlackBerry 지원 Hybrid App Framework

15 Appspresso (http://www.appspresso.com/) - 국내사인 KTH 에서 개발 - KTH 의 푸딩얼굴인식이 Appspresso 로 개발됨 - WebKit 과 Device API 지원 - Device API 는 WAC 의 Waikiki 2.0 beta 지원 - 2 개 플랫폼 (iPhone, Android) 지원 Hybrid App Framework

16 NativeApp 에 WebKit 적재 WebKit Native Code WebKit Native Code Platform B HTML5 + JavaScript + CSS Platform A

17 WAC

18 WAC (Wholesale Applications Community) - 세계적인 이동통신사와 제조사들이 통합 AppStore 구축을 위해 만든 커뮤니티 - WAC Spec 을 통해 Device API 표준화를 진행중에 있음 (WAC 2.0 나옴 2011 년 6 월 ) - Waikiki : WAC 에서 개발중인 OS 독립적인 WebApp 플랫폼 개발 프로 젝트 http://public.wholesaleappcommunity.com/redmine/ http://public.wholesaleappcommunity.com/redmine/ WAC

19 Thank You End of Document