Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

C1 하이브리드 앱 어떻게 개발해야 하나

5,830 views

Published on

  • Be the first to comment

C1 하이브리드 앱 어떻게 개발해야 하나

  1. 1. 하이브리드 앱어떻게 개발해야 하나? KTH 앱스프레소팀장 한기태
  2. 2. 하이브리드앱? 2
  3. 3. 하이브리드앱? 연비 3
  4. 4. 하이브리드 앱? 4
  5. 5. 하이브리드 앱? 5
  6. 6. 하이브리드 앱? • Layout HTML • Design CSS • Event Handler JavaScript 6
  7. 7. 하이브리드 앱? Web Resource WebView (Boilerplate) Native App: iOS, Android 크로스 플랫폼 앱 스토어 7
  8. 8. 왜 하이브리드 앱인가? 8
  9. 9. 왜 하이브리드 앱인가? Objective C Java Cocoa, iPhone SDK Android SDK Xcode Eclipse + ADT 9
  10. 10. 왜 하이브리드 앱인가? Vic Gundotra. Vice-President of Engineering for Google 10
  11. 11. 웹 기술의 비약적 발전: HTML5, CSS3 11
  12. 12. 웹 기술의 비약적 발전: HTML5, CSS3 Vic Gundotra. Vice-President of Engineering for Google 12
  13. 13. 웹 기술의 비약적 발전: JavaScript UI Framework 13
  14. 14. 웹 기술의 비약적 발전: JavaScript UI Framework 14
  15. 15. 웹 기술의 비약적 발전: 웹 OS, 웹 플랫폼 B2G(Boot to Gecko) 15
  16. 16. 하이브리드 앱 개발 방법론 16
  17. 17. 하이브리드 앱 개발방법론 17
  18. 18. Device API 보안상의 이유로 웹에서는 로컬 자원에 대한 접근 금지 Device API  카메라, 센서, 주소록, 파일 시스템 등 로컬 자원의 활용 가능 표준화 동향  W3C DAP(Device APIs and Policy) OMTP BONDI API + Nokia WRT API 18
  19. 19. Device API PhoneGap의 방식 alert(ScriptingObject.add(3, 4)); 19
  20. 20. Device API PhoneGap의 방식 document.location = "myapp:" + "ScriptingObject:" + "add:" + "3:" + "4"; 20
  21. 21. 하이브리드 앱 프레임워크 Rhodes 21
  22. 22. Rhomobile Rhodes  Ruby  특정 벤더의 비표준 기술  축적된 지식, 자산의 재활용 불가 22
  23. 23. Appcelerator Titanium  AWT와 유사한 자체 Window Toolkit  특정 벤더의 비표준 기술  축적된 지식, 자산의 재활용 불가 23
  24. 24. PhoneGap 하이브리드 앱 개발 방법론을 프레임워크화  오픈 소스  개발 환경, 개발 도구 없음: 샘플 소스  웹 표준 기반  Device API는 자체적으로 제정한 스펙  유일하게 6가지 모바일 플랫폼 지원  iOS, Android, RIM BlackBerry, HP webOS, Nokia Symbian, Samsung Bada 24
  25. 25. Appspresso ‘11.03.14 국내 최초의 범용 하이브리드 앱 프레임워크 세계 최초로 표준 Device API와 통합개발환경을 지원하는 하이브리드 앱 프레임워크 25
  26. 26. Appspresso WAC Waikiki API Sensor Camera Contact Device Status SMS File System Native API 26
  27. 27. Appspresso 27
  28. 28. Appspresso 크로스 플랫폼 웹 표준 기반 표준 Device API (WAC Waikiki API): WAC Compatibility 통합개발환경 제공 One Click Build PDK(Plug-in Development Kit)  Open Source Appspresso Plug-in Project 개설 예정 On the fly building – Demo 28
  29. 29. 바람직한 하이브리드 앱 구조 Hybrid App ≠ Web Site 29
  30. 30. 바람직한 하이브리드 앱 구조 Web Site 서버에서 모든 것을 다 처리한다 브라우저는 거들 뿐 30
  31. 31. 바람직한 하이브리드 앱 구조 Web Site 사용자 액션  페이지 이동 JavaScript 다시 로드 / parsing 상태 잃어 버림  Cookie / Session 31
  32. 32. 바람직한 하이브리드 앱 구조 Hybrid App 브라우저에서 모든 것을 다 처리한다 서버는 거들 뿐 32
  33. 33. 바람직한 하이브리드 앱 구조 Local Resource: HTML, CSS, JS, Image, … SDA(Single DOM Architecture) Partial Update 33
  34. 34. 바람직한 하이브리드 앱 구조 Partial Update Local Resource 34
  35. 35. 바람직한 하이브리드 앱 구조 http://microjs.com 35
  36. 36. 바람직한 하이브리드 앱 구조iScroll (http://cubiq.org./iscroll)iScroll for jQuery Mobile (https://github.com/yappo/javascript-jquery.mobile.iscroll) 36
  37. 37. Q&A 37

×