하이브리드앱

4,515 views

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,515
On SlideShare
0
From Embeds
0
Number of Embeds
249
Actions
Shares
0
Downloads
103
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

하이브리드앱

  1. 1. HybridApp자료 조사<br />knight76.tistory.com<br />
  2. 2. Background<br />
  3. 3. Background of Application<br />플랫폼별 이슈<br />(iOS, Android)<br />Device 별 이슈<br />(삼성, LG …)<br />모든 버전에서 동작 가능한 어플 또는 여러 벌의 어플을 개발 <br />- Porting Cost 증가<br /> - 유지보수Cost 증가<br />버전 별 이슈<br />(Android 2.3.3, 3.1<br />iOS 3, 4)<br /><ul><li>iOS, Android 발생 이전의 기존 핸드폰/TV시장과 똑같은 상황이 벌어지고 있음</li></li></ul><li>대안<br />플랫폼별 이슈<br />(iOS, Android)<br />One Source, Multi-platform<br />Web 과 Native 기반에서 <br />동작하는 어플<br />Device 별 이슈<br />(삼성, LG …)<br />HybridApp (Hybrid Mobile WebApp) <br />버전 별 이슈<br />(Android 2.3.3, 3.1<br />iOS 3, 4)<br />
  4. 4. Porting 관점<br />App<br />App<br />넷플릭스<br />기존<br />iOS 4<br />Android<br />2.3.3<br />Web App<br />배포 단위<br />Device<br />Device<br />WebKit<br />Porting Glue<br />App<br />App<br />iOS 5<br />Android<br />3.1<br />Device<br />Device<br />Device<br />Device<br />Device<br />오픈 소스인 Webkit엔진이 동작되도록 Porting Layer에 새로운 Device만 포팅만 해서 사용하도록 함<br />* 참고 : 블루레이, DVD는 DTV java 플랫폼을 이용하고 있음<br />각플랫폼 별로 신경 써야할 내용이 너무 많음<br />
  5. 5. Porting 관점<br />HybridApp (Hybrid Mobile WebApp) = NativeApp + 모바일Web <br />HTML5 + JavaScript + CSS<br />WebKit<br />WebKit<br />Native Code<br />(Object C)<br />Native Code<br />(Java)<br />Android App <br />iOS App <br />1. Device API나 비공유 부분은 각각의 플랫폼 별로 개발해야함<br />2. WebKit을 사용하여 모바일Web을 NativeApp에 적재함<br />모바일Web 부분은 HTML5 기반으로 개발되므로, 모든 플랫폼에서 공유 가능 <br />
  6. 6. Porting 관점<br />Mobile WebApp개발<br /><ul><li>NativeApp으로 어플리케이션을 개발하는 것이 어려움
  7. 7. 모바일Web Browser에서는 HTML5를 비교적 많이 지원하고 있음
  8. 8. 단점 : Mobile WebApp은 카메라, 마이크, 파일 등 Device 접근에 제약이 있음 </li></ul>HybridApp(Hybrid Mobile WebApp) <br />= NativeApp+ 모바일Web <br /><ul><li>아직 표준화된 Device API 부재로 인해서 모바일Web의 Device 접근성 제약 극복
  9. 9. HTML5 + CSS3 + JavaScript을 이용하여 쉽고, 플랫폼 독립적으로 개발
  10. 10. 단점 : WebKit및 HybridApp Framework의 구조적 문제로 속도가 매우 느림 </li></li></ul><li>WebKit<br />
  11. 11. Porting 관점<br />WebKit Project :<br />웹 컨텐트를렌더링하고, 자바스크립트 오류를 검증 툴을 포함<br /><ul><li>Not Brower, Just Engine
  12. 12. BSD-style and LGPL licenses. 
  13. 13. 포팅된 플랫폼 : iOS, 심비안, Google chrome, Safari , Adobe AIR , Android , Amazon Kindle , QT …
  14. 14. MAC OS X system framework version of the engine
  15. 15. Cross Platform C++, 1.8 Million line
  16. 16. Component
  17. 17. WebCore: HTML와 SVG에 대해서 Layout, 렌더링,DOM 파싱
  18. 18. JavaScriptCore : 자바스크립트 프레임웍
  19. 19. Drosera : 자바스크립트 오류 확인 툴
  20. 20. Sunspider : 자바스크립트 성능 측정 툴
  21. 21. WebKit포팅시에는WebCore와 JavaScriptCore만 사용</li></li></ul><li>History<br />Safari<br />Browser<br />KDE<br />Konqueror<br />Browser<br />(Linux)<br />오픈 소스화<br />WebCore<br />KHTML library<br />JavascriptCore<br />KJS library<br /> Mac OS 로포팅<br />
  22. 22. Architecture<br />QT<br />MAC<br />Windows<br />WebKit Project<br />WebKit API <br />WebCore (HTML 파싱, 렌더링)<br />/platforms<br />JavascriptCore<br />(프레임웍)<br />Porting Glue<br />graphics, network<br />OS<br />
  23. 23. Hybrid App 개발<br />- HybridApp Framework 이용<br /> - NativeApp에 WebKit적재<br />
  24. 24. Hybrid App Framework<br /><ul><li>MobileWeb을 NativeApp처럼 만들어 주는 Framework
  25. 25. Mobile Web을 위한 WebKit제공
  26. 26. Device에 접근 가능한 JavaScript 기반 Device API 제공
  27. 27. NativeApp과 같이 배포 가능하도록 Packaging 제공
  28. 28. HTML5 + CSS3 + JavaScript를 사용하여 App 개발
  29. 29. One Source, Multi Platform 적용 가능 </li></ul>- JavaScript를 통하여 MobileWeb이 접근하지 못하던 Device에 접근 가능 <br /><ul><li>카메라, 마이크, 파일 등
  30. 30. NativeApp만큼 Deivce연동이 매끄럽지 못함
  31. 31. Device 연동 UI에도 제약이 많음
  32. 32. PhoneGap, Titanium, Appspresso등이 유명함</li></li></ul><li>Hybrid App Framework<br />PhoneGap (http://www.phonegap.com/)<br /><ul><li>많이 유명
  33. 33. WebKit과 자체 Device API 제공
  34. 34. iPhone, Android, Blackberry, Palm, Microsoft, Symbian) 지원</li></ul>Titanium Mobile (http://www.appcelerator.com/) <br /><ul><li>JavaScript를 Cross-Compiler를 통해 Native Code(Objective-C나 Java)로 변환해 주는 Framework
  35. 35. Javascript가 Native Code로 Invoke
  36. 36. iPhone, Android, BlackBerry 지원 </li></li></ul><li>Hybrid App Framework<br />Appspresso (http://www.appspresso.com/) <br /><ul><li>국내사인 KTH에서 개발
  37. 37. KTH의 푸딩얼굴인식이 Appspresso로 개발됨
  38. 38. WebKit과 Device API 지원
  39. 39. Device API는 WAC의 Waikiki 2.0 beta 지원
  40. 40. 2개 플랫폼(iPhone, Android) 지원</li></li></ul><li>NativeApp에 WebKit적재<br />HTML5 + JavaScript + CSS<br />WebKit<br />WebKit<br />Native Code<br />Native Code<br />Platform B<br />Platform A<br />
  41. 41. WAC<br />
  42. 42. WAC<br />WAC (Wholesale Applications Community)<br /><ul><li>세계적인 이동통신사와 제조사들이 통합 AppStore구축을 위해 만든 커뮤니티
  43. 43. WAC Spec을 통해 Device API 표준화를 진행중에 있음(WAC 2.0 나옴 2011년 6월)
  44. 44. Waikiki : WAC에서 개발중인 OS 독립적인 WebApp플랫폼 개발 프로젝트 http://public.wholesaleappcommunity.com/redmine/</li></li></ul><li>Thank You<br />End of Document<br />

×