차세대 웹 플랫폼과 HTML5 기술 동향

차세대 웹 플랫폼과 HTML5 동향

Jonghong Jeon
ETRI, SRC

Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit

http://www.etri.re.kr

Growth of Web Sites
Total Sites Across All Domains
August 1995 - November 2011

525,998,433 sites

3 http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091

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.

4

Online Activities, 2000 ~ 2009

http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx
5

World Wide Web (1989~1991)

6

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

7

Evolution of World Wide Web

8


http://evolutionofweb.appspot.com/

9

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를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정
보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계

10

Changes (스마트 디바이스 급성장)

Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/

11

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

12

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

13 http://is.gd/yXvTj7

Fragmentation is a big problem

Device

Content Screen

Fragmentations

Application Platform

Service

14

Solution ?

Device

Content Screen

Fragmentations

Application Platform

Service

15

Evolution of
Web Platform Technology

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

17

Evolution of Web Platform

Open
API

Search Image
Mail Office
Sharing

Video Shopping
Book
Sharing Commerce

Map News Payment Cloud

Ads SNS

18

Online Activities, 2000 ~ 2009

http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx
19

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)

21

Web Oriented Architecture

22

Web Platform Layer

User Interaction JavaScript + Web APIs

Presentation HTML 5 & CSS 3

Transport HTTP

Web Resource URIs
Resources (Service, Content, Site)
23

Hype Cycle for Web and User Interaction
Technologies, 2011

26

주목해야 할 10가지 모바일 기술 (2012~)

27

HTML5 ?
q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것

통칭되는 “HTML5”

HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
§ Web Storage
§ 문서구조의 상세화
§ 표현 기능 모듈화 § Web Worker
§ 멀티미디어
§ 웹 폰트 § Web Socket
§ 폼과 이벤트 등
§ Geolocation API

서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고 편
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
리한 표현 방식의 변경

28

HTML5: Web Development to the next level

http://slides.html5rocks.com/

31

HTML5 Roadmap
q Progress: Last Call milestone reached
§ 25 May 2011. Published Last Call Working Draft of the HTML5 spec.
§ 03 August 2011. Ended Last Call (LC1) comment round for HTML5 spec.
q Five other LCWDs published in May
§ Polyglot Markup: HTML-Compatible XHTML Documents (Eliot Graff)
§ Techniques for providing useful text alternatives (Steven Faulkner)
§ HTML Canvas 2D Context (Ian Hickson)
§ HTML+RDFa (Manu Sporny)
§ HTML Microdata (Ian Hickson)

34

HTML WG Update
q Non-LC deliverables published in May
§ The HTML WG also maintains the following three non-normative
documents, and published updates of them in May along with the LCWDs.
§ HTML to Platform Accessibility APIs Implementation Guide(Steven Faulkner)
§ HTML5 differences from HTML4 (Anne van Kesteren, Simon Pieters)
§ HTML Markup Language Reference (Michael[tm] Smith)
q “HTML5: Edition for Web Authors” FPWD
§ In August, the HTML WG also published a First Public Working draft of the
document HTML5: Edition for Web Authors.
§ auto-generated subset of the full HTML5 specification
§ not for user-agent implementors (omits UA implementation details)
§ targeted toward Web authors and Web developers

35

HTML WG Update
q Last Call numbers: Bugs/Comments
§ 1550+ Last Call comments. For this Last Call round (LC1), the group
received* about 1550 comments on the HTML5 spec (spec “bugs”)
§ More that 80% of comments already resolved. Of those ~1550
HTML5 Last-Call spec bugs, more than 80% (almost 1300) have already
received a resolution from the HTML5 spec editor (Ian Hickson).
§ Less than 20% (about 280) of the Last Call spec bugs/comments for the
HTML5 spec are still awaiting resolution by the editor
q Post-LC1 numbers: Bugs/Comments
§ So far since the close of the LC1 round, the group has received almost 300
bugs/comments on the HTML5 spec
§ Of those ~300 HTML5 spec bugs, more than 80% (around 250) have
already received a resolution from the HTML5 spec editor (Ian Hickson).
§ Less than 20% (about 50) of the remaining post-LC1 bugs/comments for
the HTML5 spec are still awaiting resolution by the editor.
36

HTML5 Roadmap
q 13 open issues. WG now has 13 open issues awaiting
resolution by chairs.
q 11 closed issues flagged as “awaiting new information”.
(10 against the HTML5 spec, one against the HTML+RDFa spec).
q 9 open formal objections. (4 for the HTML5 spec, 5 for other
specs; relate to text alternatives, RDFa, polyglot spec, ARIA,
video poster, more).

37

Deadlines for moving beyond LC1
q The chairs announced a timeline for moving beyond LC1.
§ 31 Dec 2011. Editors must have all LC1 bugs resolved.
§ 14 Jan 2012. WG members last chance* to escalate any resolved bugs to
issues.
§ 11 Feb 2012. WG members last chance* submit change proposals for
open issues.
§ 10 Mar 2012. WG members last chance* to submit counter-proposals for
issues.
§ 07 Apr 2012. Chairs must have all issues resolved (must have all
decisions made).
§ 21 Apr 2012. Chairs announce resolution to go to the next step.

q The HTML WG is scheduled to publish a Candidate
Recommendation of the HTML5 spec in mid- to late-2012.

38

[1] Multi Device support

40

[1] Multi Device & platform support

41

[1] Multi Screen & resolution support

42

[1] Multi Device & Screen Supprt

http://colly.com

43

[2] Platform Fragmentation

44


45

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 로컬 저장소를 이용해 가능
지만 가능
46

[3] – Rich Web Application
q <video>, <audio>
§ Flash 기반 사이트의 전환
• YouTube, Vimeo, Scribd
q 왜 HTML5인가 ?
§ Search Friendly
§ 호환성 (유무선…)
§ 접근성
§ 성능

http://www.scribd.com/doc/30964170/Scribd-in-HTML5
http://estima.wordpress.com/2010/05/07/scribd/

48

[3] – Rich Web Application
q ActiveX의 대체
§ Flash 기반 사이트의 전환 – Video/Audio
§ (multi) File Upload
§ Graphics – Canvas, 3D transition, SVG, WebGL, X3D

49

[4] – Standards

HTML5
CSS3
JS

50

[4] – Standards - HTML5 지원 현황

q DeskTop q Mobile

51 Source: http://html5test.com/results.html


52 Source: http://www.browserscope.org/


53 http://mobilehtml5.org/

[4] – Evolution of Web Application Tech.

HTML5
Real time
New
Web
Web App. API Platform
New Hybrid
&
Standards Device Web &
API Social
Browser
Web
Widget

Web Application Store Web Cloud

Mobile Device & Platform War

54

[4] – Web Application Architecture

HTML5
(Web forms, Video/Audio, Canvas..)

Web Application APIs
(Web IDL, Web Socket, Web Worker, Web Database….)

XMLHTTPRequest Widgets API Device APIs
CSS (Calendar,
XML ECMASCript Camera GPS, File,..)

DOM

HTTP + URI/IRI+ Unicode

55

[5] – The Web as an application platform
q Standards for Web Applications on Mobile: February 2011 current
state and roadmap
§ http://www.w3.org/2011/02/mobile-web-app-state.html

56

[6] – Open APIs & Mashup
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)

58 58

[7] – New Chances – 위치기반서비스
q navigator.geolocation.getCurrentPosition
q 위치 기반 응용들
§ 로컬 검색
§ 지도 서비스
§ 사용자 위치 트래킹
§ Geo Social
§ 현재 위치 기반 서비스

60

[7] – New Chances – 성능 향상
•웹 소켓과 XHR 비교

40배

http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html
61

[7] – New Chances – UI 개선
q HTML5 의 새로운 input type들
§ Search, tel, url, email
§ datetime, date, month, week, time, and datetime-local
§ Number, range, Color
q Mobile Safari (on the iPhone)은 number, email, url 지원을 추가

q Chrome 5 beta 에서 placeholder attribute를 지원

<label for="email">Email address</label>
<input id=“email” type="email" placeholder="jonathan@example.com">
62

[7] – New Chances– Hybrid App
Comparison: App Inventor, DroidDraw, Rhomobile, PhoneGap, Appcelerator,
WebView, and AML

http://www.amlcode.com/2010/07/16/comparison-appinventor-rhomobile-phonegap-appcelerator-webview-and-aml/

63

[7] – New Chances– Web App Store
q https://chrome.google.com/webstore

64

[7] – New Chances– Web App Store

Any Devices
Device Devices (PC, TV, Car, Tablet…)
Client
App Store Browser Browser

Front Front Web Web Web
Server
Store Web App App App
Server Server Store Store Store

Native Native Web Cloud
Native
Appp App App App

65

[7] – New Chances
q Mobile Commerce
q Mobile Search
q Voice Browsing
q Web on TV
q Web 3D, Web GL
q Augmented Reality
q E-book
q HTML5 Game
q Web Store & Widget
q Device APIs
q Security & Privacy

66

Case - HTML5 & N-Screen

67

모바일 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. 기타 새로운 기회들
68

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
69

너무 많은 기대를 하는 것은 아닌가 ?

우리가 바라는 HTML5 앱 모습

71

실제 구현 가능한 HTML5 앱 현실

72

그 결과를 받아본 고객의 표정

73

좀 냉정해질 필요가 있다
좀 차분해질 필요가 있다

Source: http://try.powermapper.com/demo/statsversions.aspx

그냥 새로운 마크업 중 하나일 뿐…..

그리고 약간의 기회와 가능성일 뿐 !!

Future Web Golden Age

Mobile
Web
다양화 Golden
Age
Smart devices 표준화 완료

전국 서비스
HTML5
Apps
LTE

2010 2011 2012 2013
hollobit@etri.re.kr

77

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

Conclusions

HTML5과 차세대 웹 기술은
멀티디바이스와 N-screen 지원을 위한 유일한 대안으로
유무선 통합의 관점과
웹 표준 기반 디바이스 호환성의 중요성을 일깨우고
새로운 웹과 앱의 개발 기회,
새로운 수익 모델의 가능성,
그리고 많은 새로운 웹 경험의 편리함를
제공하는 출발점 …

앞으로의 미래는 어떻게 준비하고 시작하느냐에 달려…

79

Refences & Resources
q HTML5 - http://www.w3.org/TR/html5/
q HTML5 differences from HTML4 - http://www.w3.org/TR/html5-diff/
q 실전 HTML5 가이드 - http://webstandards.or.kr/html5
q 놀랄만큼 유용하고 재미있는 HTML5 모바일 앱 30개 - http://is.gd/e87hy
q Detecting HTML5 Features - http://diveintohtml5.org/detect.html
q 기타 참조 사이트
§ http://kr.html5doctor.com
§ http://html5gallery.com
§ http://html5demos.com
§ http://html5rocks.com
§ http://html5games.com
§ http://www.html5video.org/
§ http://www.chromeexperiments.com/
§ http://html5test.com
§ http://html5readiness.com/

80

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
81

차세대 웹 플랫폼과 HTML5 기술 동향

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 차세대 웹 플랫폼과 HTML5 기술 동향

Similar to 차세대 웹 플랫폼과 HTML5 기술 동향 (20)

More from Jonathan Jeon

More from Jonathan Jeon (20)

차세대 웹 플랫폼과 HTML5 기술 동향