천안 북일고 학생들을 대상으로 2시간 정도 동안 HTML5과 웹을 중심으로 모바일 웹과 모바일 앱에 대한 개요를 수업 형식으로 소개했던 자료입니다. It's an introduction to the Mobile Web and Mobile App.

1. 모바일 앱, 모바일 웹 소개
Jonghong Jeon
ETRI, SRC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr

4. 스마트폰이 가져온 생활 속 변화들
4

5. 앱 생태계의 성장
5

6. 앱 생태계 성장의 배경 - 스마트 모바일 시대
6 Source: ARG, 2012

7. 앱 생태계 성장의 배경 - 스마트 모바일 시대
7 Source: http://slidesha.re/yMfSyy

8. 앱 생태계 성장의 배경 - 스마트 모바일 시대
8

9. 1. World Wide Web의 역사

10. 2011.8.6

11. Growth of Web Sites
Total Sites Across All Domains
August 1995 - November 2011
525,998,433 sites
11 http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091

12. 20 Presents the WWW has given us
q Vast amounts of digital
information
q Organized access.
q Communication.
q Multimedia sharing
q Entertainment.
q E-commerce.
q Real-time news.
12

13. Online Activities, 2000 ~ 2009
http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx
13

14. World Wide Web (1989~1991)
14

15. World Wide Web (1991 ~ 2005)
Before W3C Wirelss Internet WS, SW
UWS
MWI
Mobile
RFID
WAP 1.0 WAP 1.1 WAP 1.2 WAP 2.0
2005
URI XML-RPC
RDF
OWL
HTTP 1.0 HTTP 1.1
(IETF RFC1945) (RFC2616)
XML SOAP 1.2
Semantic Web
Concept
15

16. History of WWW-KR Workshop
WWW-Forum은 1994년 7월초에 만들어진 WWW 관련 메일링 리스트입니
다. 현재 가입 인원은 약 250여명으로 지난 10여개월 동안 국내 WWW의
발전 및 보급에 많은 노력을 기울인 메일링 리스트입니다. WWW-Forum
에서 주로 다루는 내용은 Web server의 설치, Client의 설치 및 사용, 각종
Web site 의 소개등 WWW에 관련된 전반적인 것을 다루고 있습니다. (제1
회 워크샵 안내문)
등록비 : 학생 : 5,000원 , 일반 : 10,000 원
16

17. History of WWW-KR Workshop
17

18. Evolution of World Wide Web
18

19. Evolution of World Wide Web
http://evolutionofweb.appspot.com/
19

20. Evolution of World Wide Web
q 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP
§ HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다
나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계
q 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹
§ XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아
니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는
단계
q 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장
§ 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이
끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련
q 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대
§ 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web
API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정
보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
20

21. 2. 웹 기술의 확산 – 왜 웹인가 ?

22. Changes (스마트 디바이스 급성장)
Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/
22

23. Changes (무선네트워크 진화)
아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ??
아날로그폰 디지털폰 피처폰/스마트폰 고성능 스마트폰 가상 스마트 기기
아날로그 디지털 IP 기반 All IP 기반 All IP 기반
음성통화 음성통화 데이터서비스 시작 데이터서비스 확산 초고속 데이터
서비스
음성 통신 서비스의 시대 데이터 통신 서비스의 시대
23

24. Emerging N-Screen environment
q N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를
통해 이용할 수 있도록 하는 서비스
q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세
가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경
q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수
(Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되
는 여러 대의 단말기 장치를 의미
24

25. Media
25

26. Media & Screen
26

27. Media Convergence
27

28. Screen Convergence
28

29. Fragmentation is a big problem
q Network Fragmentation
q Service Fragmentation
q Device Fragmentation
q Platform Fragmentation
q Screen Fragmentation
q Application Fragmentation
q Content Fragmentation
29 http://is.gd/yXvTj7

30. Fragmentation is a big problem
Device
Content Screen
Fragmentations
Application Platform
Service
30

31. Solution ?
Device
Content Screen
Fragmentations
Application Platform
Service
31

32. 3. 웹 플랫폼 기술로의 진화

33. Open Internet, Open Web
Jonathan Zittrain Source: http://bit.ly/4OgbGV
인터넷은 수백만의 사심 없는 친절, 호기심과 신뢰로 구성
http://www.isoc.org/graphics/photos/newsweek.jpg
33

34. TED: 임의적 친절 행위로서의 웹
인터넷의 기반은 개방, 참여, 신뢰, 협력
34

35. Evolution of Web Ecosystem
q Web of Documents
q Web of Services
q Web of Devices
q Web of Data
q Web of Things
q Web of Human
35

36. Evolution of Web Platform
Open
API
Search Image
Mail Office
Sharing
Video Shopping
Book
Sharing Commerce
Map News Payment Cloud
Ads SNS
36

37. Online Activities, 2000 ~ 2009
http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx
37

38. Growth of Open API
38

39. API Billionaires Club, 2011 edition
13 billion API calls / day (May 2011)
10 billion API calls / month (January 2011)
Over 260 billion objects stored in S3 (January 2011)
1.6 billion API-delivered stories / month (October 2010)
5 billion API calls / day (April 2010)
5 billion API calls / day (October 2009)
8 billion API calls / month (Q3 2009)
3 billion API calls / month (March 2009)
39

40. Putting everything together
q Your Mashup = API calls + Data Manipulation + UI
User
User Request Data presentation
Mashup website Data Manipulation
API Call Data
API Call Data
Website 1 Website 2
40

41. Open API의 힘
41

42. Web Platform Layer
User Interaction JavaScript + Web APIs
Presentation HTML 5 & CSS 3
Transport HTTP
Web Resource URIs
Resources (Service, Content, Site)
42

43. 4. 모바일 응용 기술: 앱과 웹의 경쟁
Native Application m.xxx.com
App Vs. Web

44. Web의 역사는 도전의 역사
1990년대: Web vs. C/S 2010년대: Web vs. App
44

45. 과거로 돌아가보자 !!
q1996년
§ 대부분 Web 기반의 Application으로 변할 것이다.
q2006년
§ Web 기반이 아닌 로컬 전용 기업용 Application을 만들자 !!
45

46. 1990년대 : 유선 웹과 C/S
46

47. 2010년대 : 모바일에서의 앱과 웹
47

48. Why App ?
48

49. Why Web ?
49

50. App vs. Web
Native App HTML5 Web Application
특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 브라우저를 통해 접속하며,
및 설치가 되어야 함 설치와 업데이트 불필요
각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Pal
Portability 표준 웹만 개발하면 어디서나 볼 수 있음
m and the list goes on…)
외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크
Hyper Links 어떤 부분이건 링크로 연결 가능
는 불가능하고, 앱 간 호출은 보안 제약이 있음
검색 사이트, 이메일 홍보, 트위터 링크 등으로
Discoverability 앱스토어 홍보와 마케팅을 위한 비용이 필요
홍보 가능
Distribution & Market Siz 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는
누구든 접속 가능
e 것과 하위 내용과 차별화 됨
Usage of Device Capabiliti 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, a 현재는 불가능 (HTML와 Device API 표준화를
es ddress book, calendar, etc.) 통해 2011년부터 가능할 것으로 전망)
앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가
Supportability & Upgrade
있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 사이트를 수정하면 언제든 바로 업데이트
ability
드 받으라고 해야 함
앱스토어 개발자 등록 비용이 필요 (Apple charges develo
Entry Costs 없음
pers $99 and enterprises $299, RIM charges $200 )
앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RI
Revenue Share 모두 내꺼
M takes 20%)
User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨
네트웍을 거치며, 서버에서 제공되고, 브라우저
Performance 바이너리 코드로 실행되므로 속도가 빠름
를 통해 처리되기에 성능 변동폭이 큼
HTML5의 App Cache 기능을 이용해 구현해야
Offline Browsing 로컬 저장소를 이용해 가능
지만 가능
50

51. Why Mobile Web [1] – Accessibility
q 다양한 모바일 단말에서 사용할 수 있는가 ?
51

52. Why Mobile Web [2] – Easy use
52

53. Why Mobile Web [3] – Easy develop
q 만약 @@@ 앱을 만든다면 ?
§ 아이폰용으로 개발 (Object-C)
§ 안드로이드용으로 개발 (Java)
§ 윈도우 모바일용으로 개발 (C#)
§ 삼성 바다용으로 개발 (C)
§ 블랙베리용으로 개발 (Java)
§ 팜용으로 개발 (HTML, CSS, JavaScript)
§ ….
53

54. Why Mobile Web [4] – no installation
q No installation & Always update
54

55. Why Mobile Web [5] – Open API & Mashup
55

56. Why Mobile Web [6] – Platform Independent
56

57. Why Mobile Web [7] – no screening
57

58. Why Mobile Web [8] – Always Evolving
58

59. 5. HTML5와 미래 응용 기술

60. HTML5
60

61. HTML5 ?
q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것
통칭되는 “HTML5”
HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
§ Web Storage
§ 문서구조의 상세화
§ 표현 기능 모듈화 § Web Worker
§ 멀티미디어
§ 웹 폰트 § Web Socket
§ 폼과 이벤트 등
§ Geolocation API
서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고 편
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
리한 표현 방식의 변경
61

62. HTML5 ?
62

63. HTML5의 주요 특징
63

64. HTML5: Web Development to the next level
http://slides.html5rocks.com/
64

65. HTML5 표준화
65

66. W3C HTML5 Roadmap
66

67. HTML5 규격 표준화 경과
q HTML5는 2007년 웹 어플리케이션 활성화와 함께 본격화
2010 2011
Canavs Web Workers AppCache
W3C Web form Geolocation FileAPI
WebGL
Audio/Video WebFont
Web
App.
DOM1 DOM2 DOM3 DOM4
표준들
CSS1 CSS2 CSS3
HTTP Javascript AJAX XHR2
67

68. HTML과 Web API 기술 표준화 현황 총괄
q HTML5와 Web API 기술은 최근 표준화가 활발하게 진행 중
68

69. HTML5 표준화 세부 현황 (W3C HTML WG)
q HTML5 표준화는 2014년 최종 표준 제정을 목표로 작업 중
§ HTML WG에서는 2012년도 중반(늦어도 후반)까지는 후보 표준안
(Candidate Recommendation) 단계를 목표
Specification FPWD WD LCWD CR PR REC
1 HTML5 2007 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
2 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
3 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
4 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
Polyglot Markup: HTML-Compatible
5 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
XHTML Documents
HTML5: Techniques for providing
6 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
useful text alternatives
HTML to Platform Accessibility APIs
7 2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
Implementation Guide
8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q2
9 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q2
10 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation
WD: Working Draft CR : Candidate Recommendation REC: Recommendation
69

70. W3C Web Application API 표준화 세부 현황
q 최근에는 다양한 Web Application API 표준화가 활발히 시작 중
Name of Specification Last Publication ED FPWD WD LCWD CR PR REC
Clipboard APIs and Events 2012-02-23
Cross-Origin Resource Sharing (CORS) 2010-07-27
DOM Level 3 Events 2011-05-31
DOM4 2012-01-05
Element Traversal 2008-12-22
File API 2011-10-20
File API: Directories and System 2011-04-19
File API: Writer 2011-04-19
From-Origin Header 2011-07-21
HTML5 Web Messaging 2012-03-03
Indexed Database API 2011-12-06
Java bindings for Web IDL 2012-02-07
Progress Events 2011-09-22
Selectors API 2009-12-22
Selectors API Level 2 2010-01-19
Server-Sent Events 2011-10-20
Shadow DOM
Uniform Messaging Policy (UMP) 2010-01-26
Web IDL 2012-02-07
Web Sockets API 2011-12-08
Web Storage 2011-12-08
Web Workers 2012-03-13
XBL2 Primer 2007-07-18
XBL2 Spec 2007-03-16
XmlHttpRequest (Level 2) 2012-01-17
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation
WD: Working Draft CR : Candidate Recommendation REC: Recommendation
70

71. 6. Why HTML5 is important ?
(HTML5 Demo)

72. Case : Video
q http://www.justafriend.ie/
72

73. Case : Canvas, SVG, Game
q Twinkle Pop
73 http://game.wren.kr/each/tp/

74. Case : MMOPRG- Canvas, Websocket,
q http://browserquest.mozilla.org/
74

75. Case : Canvas, Audio, Websocket
q http://www.multiplayerpiano.com/
75

76. Case : Audio
q http://daftpunk.themaninblue.com/
76

77. Case: SVG
q http://slaveryfootprint.org/
77

78. Case : Canvas + WebGL
http://www.myrobotnation.com/
78

79. Case : WebGL + LocalStorage
q http://chrome.angrybirds.com/
79

80. Case : SVG + WebGL
q http://www.cuttherope.ie/
80

81. Case : Offline & N-Screen
https://read.amazon.com
81

82. Case : Hybrid Web
q http://www.wunderlist.com/
82

83. Case : Web OS & UI
83

84. 모바일 HTML5의 가능성
1. 새로운 웹 환경 : 새로운 모바일 웹, 유무선 통합
2. Multi-Screen, Multi-Device, Multi-Platform의 해결사
3. HTML5 Apps : HTML5 앱의 성장
4. 애플/구글 지배로부터의 탈출구
5. UI/UX 부분의 보완
6. Rich Web : 보다 다양한 기능 제공, 주요 웹서비스 활용
7. 광고 : 마이크로사이트, 상호작용형 HTML5 광고 시장
8. 위치기반서비스 : 위치 기반 서비스
9. 성능 향상 : 빠르고 뛰어난 웹 서비스 제공
10. UI 개선 : 보다 편리한 UI 제공
11. Hybrid App : 앱과 통합되는 환경
12. 기타 새로운 기회들
84

85. N-Screen의 종결자, HTML5과 차세대 웹
문제 해결책
다중 플랫폼을 지원하는 응용 개발 Web Application
단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application
다중 단말의 식별과 지원 HTTP UAProf, CSS MQ
다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5
그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3D
Video 및 Audio 콘텐츠 처리 HTML5 video/Audio
Interactive한 처리 JavaScript, CSS, HTML5 webforms
멀티 터치 등의 지원 HTML5 & Web event
오프라인 기능의 지원 HTML5 (localstorage)
디바이스 제어 Device APIs
콘텐츠 표준 호환성 검사 HTML/CSS Validation, mobileOK
비동기적 처리, 쓰레드 관리, 전송 속도 개선 XHR, WebWorker, WebSocket
보다 고속처리 가능하며 판매용 앱이 필요하다면 ? Hybrid Web App
융합 서비스 지원 RESTful Web Services, LOD
85

86. 2012년은 HTML5 활성화의 원년!!
Mobile
Web
다양화 Golden
Age
Smart devices 표준화 완료
전국 서비스
HTML5
Apps
LTE
2010 2011 2012 2013
hollobit@etri.re.kr
86

87. 2012, 모바일 웹과 HTML5 전망
1. Mobile First
2. Responsive Web & Responsive Ads
3. Social + Local + Cloud + Mobile + Web
4. Web UI Framework
5. Cross Platform & Hybrid Web Application
6. JavaScript Library & Web Application API Standards
7. HTML5 Game & Mobile HTML5 Game
8. Web Store & Native Web App
9. HTML5 ebook & HTML5 services
10.Web Operating System & RESTful WoT(Web of Things)
87

88. 7. 모바일 응용의 미래

89. 스마트 기기의 미래 ?
q
89

90. 스마트 기기의 미래 ?
90

91. 스마트 기기의 새로운 가능성들
91

92. 스마트 기기의 새로운 가능성들
92

93. 중장기 - 모바일의 미래?
93

94. 8. 대응 전략

95. HTML5 어떻게 공부하나요 ?
qHTML5 스펙 너무 어려워요! 게다가 모두 영어!
§ 한글 HTML5 번역본 è http://j.mp/html5ko (clearboth.org)
q그래도 내용이 너무 많아요
§ 웹 개발자를 위한 최소 스펙 è http://j.mp/html5devel
q디자이너/기획자도 알아야 하나요 ?
§ 많은 문서/책자들 è HTML5: Edition for Web Authors, …
q알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?
§ Google의 선물 è http://www.html5rocks.com
q그 외에 꼭 추천해주실만한 것은 ?
§ 실전 HTML5 가이드 (한글 PDF) è http://j.mp/html5guide_ko
§ 기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들
95 참고: http://xguru.net/635

96. JavaScript 전성 시대
q JavaScript Libraries è http://bit.ly/tVFW6Y
§ Application Frameworks, Server Side Library, Testing Frameworks
§ Game Engines, Animation Library, Image manipulation
• Akihabara, IMPACT, enchant.js, Unity3D
q Server-side JavaScript
§ Node.js : Evented Server-Side Javascript è http://nodejs.org
• Google Chrome의 Javascript Engine V8을 단독으로 사용
• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous
• Thread 방식에 비해 뛰어난 성능
• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈
q Javascript로 컴파일 되는 언어들 è http://j.mp/hp2pnR
§ CoffeeScript & Kaffeine : Javascript를 더 간결하게
§ J2js è Java ByteCode to JS, Script# è C# to JS
96

97. 서적들 - 모바일 HTML5 Web App 관련
97

98. 서적들 - 디자이너/기획자를 위한 HTML5
98

99. 서적 - 웹 UI/UX 디자인 관련
99

100. 학생들을 위한 조언
q 학습 : 기본에 충실하고 공부하라
§ 웹 표준의 숙지와 연습 : HTML5, CSS, Javascript
§ CSS 표준 기반의 웹 (응용) 디자인
§ Mobile UI Framework 및 자바 스크립트 스킬 향상
q 도전과 노력 : 직접 개발해보고 시도하라
§ Hybrid Web App 고려
§ Mobile Cloud 고려
§ 크로스플랫폼 및 멀티 스크린 지원 방법
q 함께 활동하라
§ 오픈 소스 커뮤니티 활동
§ HTML5 응용 모범 사례들의 도출과 공유
§ 국내외 시장분석과 글로벌 도전
q 지금 당장 시작하라~
100

101. Thank you
For more discussion :
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333
Blog : http://mobile2.tistory.com/m
http://twitter.com/hollobit
OR
101