1. 하이브리드 앱
어떻게 개발해야 하나?
KTH 앱스프레소팀장 한기태

2. 하이브리드앱?
2

3. 하이브리드앱?
연비
3

4. 하이브리드 앱?
4

5. 하이브리드 앱?
5

6. 하이브리드 앱?
• Layout HTML
• Design CSS
• Event Handler JavaScript
6

7. 하이브리드 앱?
Web Resource
WebView
(Boilerplate) Native App: iOS, Android
크로스 플랫폼
앱 스토어
7

8. 왜 하이브리드 앱인가?
8

9. 왜 하이브리드 앱인가?
Objective C Java
Cocoa, iPhone SDK Android SDK
Xcode Eclipse + ADT
9

10. 왜 하이브리드 앱인가?
Vic Gundotra. Vice-President of Engineering for Google
10

11. 웹 기술의 비약적 발전: HTML5, CSS3
11

12. 웹 기술의 비약적 발전: HTML5, CSS3
Vic Gundotra. Vice-President of Engineering for Google
12

13. 웹 기술의 비약적 발전: JavaScript UI Framework
13

14. 웹 기술의 비약적 발전: JavaScript UI Framework
14

15. 웹 기술의 비약적 발전: 웹 OS, 웹 플랫폼
B2G(Boot to Gecko)
15

16. 하이브리드 앱 개발 방법론
16

17. 하이브리드 앱 개발방법론
17

18. Device API
 보안상의 이유로 웹에서는 로컬 자원에 대한 접근 금지
 Device API
 카메라, 센서, 주소록, 파일 시스템 등 로컬 자원의 활용 가능
 표준화 동향
 W3C DAP(Device APIs and Policy) OMTP BONDI API + Nokia WRT API
18

19. Device API
 PhoneGap의 방식
alert(ScriptingObject.add(3, 4));
19

20. Device API
 PhoneGap의 방식
document.location = "myapp:" + "ScriptingObject:" + "add:" + "3:" + "4";
20

21. 하이브리드 앱 프레임워크
Rhodes
21

22. Rhomobile Rhodes
 Ruby
 특정 벤더의 비표준 기술
 축적된 지식, 자산의 재활용 불가
22

23. Appcelerator Titanium
 AWT와 유사한 자체 Window Toolkit
 특정 벤더의 비표준 기술
 축적된 지식, 자산의 재활용 불가
23

24. PhoneGap
 하이브리드 앱 개발 방법론을 프레임워크화
 오픈 소스
 개발 환경, 개발 도구 없음: 샘플 소스
 웹 표준 기반
 Device API는 자체적으로 제정한 스펙
 유일하게 6가지 모바일 플랫폼 지원
 iOS, Android, RIM BlackBerry, HP webOS, Nokia Symbian, Samsung Bada
24

25. Appspresso
‘11.03.14
국내 최초의 범용
하이브리드 앱 프레임워크
세계 최초로 표준 Device API와
통합개발환경을 지원하는
하이브리드 앱 프레임워크
25

26. Appspresso
WAC Waikiki API
Sensor Camera Contact
Device
Status SMS
File System
Native API
26

27. Appspresso
27

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. 바람직한 하이브리드 앱 구조
Hybrid App ≠ Web Site
29

30. 바람직한 하이브리드 앱 구조
Web Site
서버에서 모든 것을 다 처리한다
브라우저는 거들 뿐
30

31. 바람직한 하이브리드 앱 구조
Web Site
사용자 액션  페이지 이동
JavaScript 다시 로드 / parsing
상태 잃어 버림  Cookie / Session
31

32. 바람직한 하이브리드 앱 구조
Hybrid App
브라우저에서 모든 것을 다 처리한다
서버는 거들 뿐
32

33. 바람직한 하이브리드 앱 구조
 Local Resource: HTML, CSS, JS, Image, …
 SDA(Single DOM Architecture)
 Partial Update
33

34. 바람직한 하이브리드 앱 구조
Partial
Update
Local Resource
34

35. 바람직한 하이브리드 앱 구조
http://microjs.com
35

36. 바람직한 하이브리드 앱 구조
iScroll (http://cubiq.org./iscroll)
iScroll for jQuery Mobile (https://github.com/yappo/javascript-jquery.mobile.iscroll)
36

37. Q&A
37