2011.01 2011 will be the year of web applications.

1. 2011
The

2. Year

3. of

4.
Web

5. Apps
권정혁 ( @xguru )
Sunday, January 2, 2011 1

6. 소개
• 권정혁
➡ K 기술연구소
- SW Architect
- Developer Evangelist
➡ 블로그 - http://xguru.net
➡ 트위터 - @xguru
➡ 이메일 - guru @ xguru.net
Sunday, January 2, 2011 2

7. 2010 was
year of
HTML5
ReadWriteWeb - “Top Trends of 2010 : HTML5”
Sunday, January 2, 2011 3

8. 2010 was
year of
HTML5
ReadWriteWeb - “Top Trends of 2010 : HTML5”
Sunday, January 2, 2011 3

9. HTML5 ?
HTML5 ~= HTML + CSS + JS API
Web 에서 Desktop 수준의
App 을 구현
Sunday, January 2, 2011 4

10. Thoughts on Flash
No Flash on iOS , Go for HTML5
개방성

11. ,

12. Full

13. Web

14. ,

15. 신뢰성/보안/성능

16. ,

17. 배터리

18. ,
터치기반

19. 인터페이스

20. ,

21. 크로스

22. 플랫폼

23. 비표준

24. 레이어
http://www.apple.com/hotnews/thoughts-on-flash/
Sunday, January 2, 2011 5

25. HTML5 웹사이트의 증가
http://www.apple.com/ipad/ready-for-ipad/
Sunday, January 2, 2011 6

26. We Love HTML5 !
http://www.apple.com/html5/ http://html5rocks.com
http://beautyoftheweb.com
Sunday, January 2, 2011 7

27. 왜

28. HTML5가

29. 모바일에

30. 중요한가

31. ?
회사들이

32. 각

33. 모바일

34. 플랫폼용

35.
네이티브

36. 앱을

37. 모두

38. 만들기는

39. 어렵다.
iOS, Android, WP7, BlackBerry, Symbian, Bada ..
Sunday, January 2, 2011 8

40. 정부 , 지자체 모바일 앱 현황
기관 App 제작비용 다운로드
방송통신위 방송통신위 3500만원 4670건
법무부 법아

41. 놀자 8140만원 160000건
행안부 민원

42. 24시 2억원 미집계
문화부 touch

43. korea 1900만원 68건
고용노동부 잡영 2억1600만원 4784건
보건복지부 숙녀다이어리 3000만원 112905건
조달청 나라장터알림 9200만원 7181건
특허청 특허정보검색 2억6600만원 833건
통계청 수명계산기 2310만원 331129건
서울시 I-tour 3억1400만원 184094건
서울시 서울종합방재센터 2500만원 10건
경기도 경기산책로 4천만원 5100건
전라남도 U남도

44. 여행길잡이 3억원 6600건
연합뉴스 : 정부의 앱 개발비 현황 http://j.mp/korgovapp
Sunday, January 2, 2011 9

45. HTML5 와 웹 브라우저
Sunday, January 2, 2011 10

46. Devices 2011
iOS Android BB PlayBook HP WebOS
Sunday, January 2, 2011 11

47. 2011
Web Apps
Sunday, January 2, 2011 12

48. Web

49. App

50. Stores
Device

51. API
Hybrid

53. Cross

54. Platform
Sunday, January 2, 2011 13

55. Chrome

56. Web

57. Store
Sunday, January 2, 2011 14

58. Mozilla

59. Web

60. App

61. Store
Sunday, January 2, 2011 15

62. Mozilla

63. Web

64. App

65. Store
Sunday, January 2, 2011 15

66. GetJar
Sunday, January 2, 2011 16

67. iPadification

68. of

69. the

70. Web
Sunday, January 2, 2011 17

71. Device APIs
Camera
Filesystem Acclerometer
Web
Browser Contacts
Device
Messaging
Orientation
Device
Web App API Calendar
Developer Tasks Geolocation
Javascript
Hybrid Gallery
Device Device
Status Interaction
• WAC (Wholesale Application Community)
• 40개 이상의 통신사/제조사 협의체 : BONDI + JIL ~= Waikiki Beta
• W3C DAP ( Device API )
Sunday, January 2, 2011 18

72. WAC Schedule 2011
2010 2011
07 11 02 05
WAC 법인 WAC API Beta WAC Demo WAC
@MWC Enabled Device
12 05
K-WAC K-WAC
재단설립 Enabled Device
• WAC Enabled Device 의 증가
• Device 기능을 활용한 Web App 들 증가
Sunday, January 2, 2011 19

73. Web , Native , Hybrid
Web App Native App
• 모바일 디바이스에 최적화된 웹사이트 • 모바일 디바이스 전용 앱
• HTML , CSS , Javascript • Objective-C ( iPhone ) , Java ( Android )
• 기존에 사용하던 웹 개발환경 • XCode ( iPhone ) , Eclipse ( Android )
• 웹 표준 컨트롤 , iUI , JQTouch .. • Cocoa Touch ( iPhone ) , UI Framework (Android)
• App 개발자 등록 필요없음 • App 등록을 위해 년 $99 or $35
• 제한적인 디바이스 사용 - 카메라/마이크.. • 디바이스의 모든 기능을 활용. 빠른속도
• 자체 결제시스템 구축필요 또는 광고 • App Store/Market를 통한 판매/수익 광고
• 서버에서 바로바로 업데이트가능 • 업그레이드 할때마다 검수 ( iPhone )
• 다양한 플랫폼 동시 지원 • 플랫폼 별로 따로 개발
Hybrid App
• Native App 안에 Web App 을 담는 중간 형태 : 개발은 Web , 결과물은 Native
• Web App 에서 지원 못하던 디바이스 기능을 사용가능 : 카메라,연락처,센서,진동...
WAC API , DAP API 등이 제대로 지원되기 전까지 과도기적인 형태
• 한번 개발하여 다양한 플랫폼 동시지원 ( 각각 Packaging )
Sunday, January 2, 2011 20

74. UI Library for Touch Devices
Web UI는 Touch 와 친화적이지 않음
• jQTouch - http://jqtouch.com
• jQueryMobile - http://jquerymobile.com
• Sencha Touch - http://sencha.com
• jo - http://joapp.com
• wink - http://winktoolkit.org
• iui , xui , zepto.js
• Sproutcore , Cappuccino
• Cross Platform Web App 지원을 위한 UI Framework 들이
출현 및 성장
Sunday, January 2, 2011 21

75. Hybrid Web App
Device OS
• Native App + Web App Hybrid framework
Web Browser
하나의 웹소스로 모든 디바이스 동시지원
Web Application
Web 으로는 불가능한 Device 기능 지원 css/js/html
앱 스토어를 통한 앱 판매 가능
• Hybrid Frameworks
Phonegap
Appspresso
Titanium Mobile
Sunday, January 2, 2011 22

76. Appspresso
• Mobile App Builder by
Hybrid Web App 개발 플랫폼 : iOS , Android ..
Device API : WAC API ( Waikiki ) 지원
Powered By
원 클릭으로 iOS Android 앱 빌드
Native Plugin 추가 가능 : Plugin Development Kit
• HTML5 Web App
Touch UI : Sencha , jQueryMobile , JoApp 연동
내장 Javascript MVC Framework ( ROR 과 유사 )
Sunday, January 2, 2011 23

77. Write Once
Appspresso Sell Anywhere
Win/Mac 에서 개발가능
Touch UI Framework 지원
Android / iOS App 으로 Build
Sunday, January 2, 2011 24

78. Web App 2011
• 다양한 Web App Store 의 등장 및 성장
★ Chrome , Mozilla , GetJar ..
• Device 가 더욱 세분화 ➠ Web App 의 필요성 증가
★ iOS Android , Tablets..
• Device API 적용 디바이스의 출현
★ WAC Enabled Feature Phone
★ Android Other Smartphones
• Hybrid Web App 개발툴의 성장
★ PhoneGap , Appspresso , Titanium Mobile ..
Sunday, January 2, 2011 25

79. 고맙습니다!
email : guru @ xguru.net
twitter : @xguru
Sunday, January 2, 2011 26