스마트 공공서비스 성과발표회 발표자료

1. HTML5 기반
다매체 융합 서비스 발젂 방향
2011. 12. 7
TVSTORM 정운교 소장
1

2. 목차
Ⅰ HTML5 소개
Ⅱ HTML5 기반 서비스 사례
Ⅲ HTML5 기반 다매체 융합 서비스 플랫폼
2

3. Ⅰ HTML5 소개
3

4. HTML5 표준의 역사
HTML, XML, Web App 기술이 결합하여 탄생한 차세대 웹 기술 표준
윤석찬, ㈜다음커뮤니케이션
4

5. HTML5 범위
HTML5는 W3C HTML5 규격을 포함한 차세대 웹 기술을 통칭
Koerner, 2010
5

6. HTML5 주요 특징
구조적 마크업
문서 구조에 따른 적젃한 태그 사용 가능
: <header>, <footer>, <section>,
<article>, <nav>, ..
의미 기반 태그 지원
: <time>, <progress>, <mark>, ..
Web Form
입력 양식 태그(Form)에 제공되는 UI
풍부하고 유용한 양식 추가
: datetime, range, url, email, color, …
입력 값 검증 지원
6

7. HTML5 주요 특징
풍부한 그래픽 기능
Canvas 2D Conxt : 2D Graphics API
Web GL : 3D API
SVG : Vector Graphic, Animation, 등
Rich Graphic
http://slides.html5rocks.com
Video & Audio
웹 표준 태그와 API로 멀티미디어 콘텐츠
제공 가능
 브라우저 Plug-In 불필요 (flash player,
windows media player, …)
웹 표준 태그와 API로 멀티미디어 콘텐츠
제공 가능
Quake3 : webgl demo 7

8. HTML5 주요 특징
강력해진 통신 기능 데이터 저장/조회
Web Sockets Web Storage
: JavaScript API로 양방향 통싞 : 브라우저 내 영속적 데이터 저장/조회
Web Messaging Web Database
: Cross-document 메시징, Channel 메시징 : DB내에 데이터 저장 및 SQL 쿼리
기기 접근 / 제어 기타
Geolocation API : 위치정보 (wifi, gps, …) Web Worker
FileSystem API : 기기내 파일 접근 : 백그라운드 작업 수행 (Thread)
카메라/마이크 사용 API Microdata
주소록 및 일정 조회 API : 문서요소에 데이터 설정 및 추출 지원
8

9. HTML5 도입 이젂과 이후의 모바일 앱 홖경 변화
심영섭, 박진철, 차세대 웹표준 HTML5의 진화
9

10. HTML5 App과 Native App의 특성 비교
크로스플랫폼 지원이 최대 강점이나, 상대적으로 느린 속도가 단점
기능적으로는 Native App에 근접해지고 있음
Native App Web App
크로스 플랫폼 플랫폼에 따라 포팅 필요 본질적으로 지원
(CSS3 활용하면 UI 적응성 제공 가
능)
실행속도 빠름 느림
제작 용이성 상대적으로 어려움 쉬움
보안성 취약 강함
하드웨어 기능 접근성 자유로움 다소 제한적이나 기능 확장 중
UI/UX 표현력 강력 강력
멀티미디어 처리 강력 강력
사용자 인터랙션 처리 풍부하고 다양한 인터랙션 방법 (멀 다소 제한적.
티터치, 등) 다양한 기능 추가 진행 중
오프라인 실행 설치 이후는 오프라인 실행 기본적으로 온라인 실행.
오프라인 실행 제한적 가능하며,
확대 지원 중
업데이트 시간 소요 즉시 반영
10

11. Ⅱ HTML5 기반 서비스 사례
11

12. 웹 앱 스토어
 구글 크롬 웹 앱 스토어
( 2010.12 오픈 후 2만여 Web App이 등록되고 빠르게 성장 중 )
12

13. HTML5 서비스 - 게임
Angry Bird
http://chrome.angrybirds.com/
Dragon of Atlantis
https://www.kabam.com/dragons-of-atlantis/play/
13

14. HTML5 서비스 – OTT / 방송
YouTube - HTML5
http://chrome.redbull.tv
RedBull TV
http://chrome.redbull.tv
14

15. HTML5 서비스 - 교육
Bio Digital Human
http://www.biodigitalhuman.com/
Rubbish Books
http://rubbishbooks.com/rb/
15

16. Ⅲ HTML5 기반 다매체 융합 서비스 플랫폼
16

17. 앱/서비스 플랫폼으로서의 HTML5 기능 점검
 일반적 앱/서비스 플랫폼으로서의 기능 요구사항을 거의 충족
기능 분류 기능 항목 지원여부 HTML5 (또는 관렦 표준)에서의 해당 기능 제공
2D Graphics O Canvas 2D : Native App의 2D Graphics API 기능
Web Forms : Button, Calendar, 등 미리 갖추어짂 component 사용
UI components O
Presentation 가능
3D Graphics O WebGL : OpenGL 2.0을 Web API로 지원
Animated/Rich UI O SVG : Adobe Flash 대체하여 Animation / UI 지원
media/audio/video element를 이용하여 Audio/Video/Caption 재
Media play O
생/제어. Adobe Flash 대체
Media
의무적 지원 프로토콜 명시 안되어, 브라우저마다 지원하는 프로토콜
Media 젂송 프로토콜 n/a
다를 수 있음.
앱 플랫폼 일 네트워크 송수싞 O WebSocket : JavaScript API로 양방향 소켓 통싞 지원
반 기능 Networking
메시징 O Web Messaging : Cross-document 메시징과 Channel 메시징 지원
Web Storage : ‘Key-value’의 쌍으로 브라우저내 데이터 영속 저장/
Persistent Storage Δ
Data Access 조회
Database O Web Database : DB내에서 데이터를 저장하고 SQL 쿼리 가능
Web Workers : web page의 background에서 여러 작업을 수행 가
Task/Thread Multi Threading Δ
능
App 관리 App 설치/실행 Δ Offline Web App : web app이 offline 상태에서도 동작 가능하게 함
기본적으로 시스템 기능 접근 불가함.
Security Security Δ
향후, 기능 접근 권한 괸리 등 체계적 권한 관리 필요
젂화 젂화 걸기/받기 X WAC 참조 가능
기기별 특화 카메라 카메라 촬영 Δ W3C Device API에 카메라 관렦 기능 포함
기능 채널 재생/젂홖 X API 추가 또는 기졲 API 고도화 필요
TV
SI / EPG X API 추가 필요
17

18. 모바일 기기용 앱/서비스 플랫폼
 HTML5가 모바일 기기의 공통 서비스 기술로 부상
모바일 기기용 앱/서비스 기술 및 시장 현황
- 현재는 각 OS별 Native App이 가장 홗성화되어 있으나, 기기별로 개발해야 하는
어려움이 졲재  향후 Web App 홗성화 예상
- 모든 모바일 기기에서 웹 브라우저 지원, 대다수가 HTML5 지원 확대 중
- 구글, 애플, MS가 HTML5 지원
- 다수 주요 웹 사이트들이 모바일 기기용 웹 서비스 페이지를 운영 중
모바일 플랫폼 현황
개발 주체 형태 HTML5 지원 스마트기기 탑재율 (2011, 글로벌)
iOS 애플 OS O (지원율[1] 73%) 폰18%, 태블릿70%
Android 구글 OS O (지원율[1] 64%) 폰36%, 태블릿20%
Windows MS OS O 폰2.7%
WAC 이통사 연합 미들웨어 O 2011 중반부터 출시
바다(Bada) 삼성젂자 OS O (바다2.0부터 지원) 2010년말 500만대 수준
티젠(Tizen) 삼성젂자-인텔 OS O (HTML5 기반의 OS) 2012년 상반기 출시
[1] iOS Safari 5.0 기준 지원율, Android 3.0에 탑재된 브라우저 기준의 지원율.
(http://www.caniuse.com/#agents=mobile&eras=past,now,near&cats=HTML5&statuses=rec,pr,cr,wd )
18

19. TV/STB용 앱/서비스 플랫폼
 Web 기반의 미들웨어가 이미 대세이며, HTML5로 확장/짂화 중
TV/STB용 앱/서비스 기술 및 시장 변화의 특징
- 기졲 Java 기반 데이터방송 미들웨어 시장 쇠퇴  웹 기반으로 젂홖/확장 중
- Opera, Ant 등이 HTML5 기반 솔루션으로 TV/STB용 플랫폼 시장 짂입 중
- 구글TV, 애플TV는 자체 생태계를 중심으로 시장 짂입 시도
- 삼성, LG 등의 스마트TV는 웹 기반 플랫폼으로 시장 확대 중
TV/STB용 플랫폼 현황
설명 App 제작 기술 형태 HTML5 현황 및 젂망
MHP DVB 데이터방송 미들웨어 표준 Java (일부 MW X 이태리 등, 일부 지역에서 사용되고 있으나,
Web 포함) 점차 시장 축소 예상
OCAP/ACAP 미주/한국 케이블/지상파 데이터방 Java MW X 미주 케이블, 한국 지상파/케이블에서 아직
송 미들웨어 표준 사용 중이나, 젂망 어두움
ICSP 한국 IPTV 미들웨어 표준 Java (일부 MW Δ 국내 IPTV에서 사용. Java Profile은 정체됨.
Web 포함) Web Profile은 최근 HTML5 도입하여 확장
HbbTV 유럽 하이브리드 방송 표준 Web MW Δ 최근 부상한 표준으로, 시장 확대 기대
GoogleTV 안드로이드+크롬+Flash 기반 플랫 Android(Java), OS O HTML5 최대 지원. GoogleTV의 1차 사업화
폼 Web 는 실패이나, 2차 준비 중.
AppleTV iOS 사용한 OTT STB 플랫폼 n/a OS n/a 향후 TV용 app store 도입 예상.
삼성 Linux + 브라우저 + TV기능 JS API Web MW Δ 바다OS와의 통합 및 HTML5 지원 확대 예정
SmartTV
LG SmartTV Linux + 브라우저 + TV기능 JS API Web MW Δ LG 자사용 플랫폼, HTML5 지원 확대 예정
19

20. PC용 앱/서비스 플랫폼
 웹 브라우저가 앱 플랫폼 역할 담당하여 웹/클라우드 서비스 제공
PC용 앱/서비스 기술 및 시장 변화의 특징
- OS 직접 설치형 App 시대는 쇠퇴  웹과 클라우드에 의졲한 ‘서비스’ 형태로 짂화
- 클라우드 컴퓨팅 기술이 확산되면서, 웹 기반 서비스로의 변화 속도가 가속화
- HTML5 등의 기술을 기반으로 Native App 수준의 ‘Web App’이 빠른 속도로 확산
- 주요 브라우저들은 모두 HTML5 주요 기능을 지원하며 지원 범위 확대 중
- 구글이 Chrome 브라우저를 통해 ‘Chrome Web Store’ 생태계 조성, 성공적 운영 중
(2010.12 오픈 후, 2011.10 현재 17,000 이상의 Web App이 등록됨. AngryBird 포함)
PC용 브라우저의 HTML5 지원 현황
IE Firefox Chrome Safari Opera
개발 주체 Microsoft Mozilla Google Apple Opera
최싞 버젂[1] 9.0 7.0 14.0 5.1 11.5
HTML5 지원율[2] 54% 85% 89% 78% 70%
[1] 2011.10.20 현재 정식 릴리즈된 최싞 버젂
[2] HTML5 Working Draft에 포함된 내용을 대상으로 평가.
( http://www.caniuse.com/#agents=desktop&eras=past,now,near&cats=HTML5&statuses=rec,pr,cr,wd )
20

21. HTML5 기반 다매체 융합 서비스 플랫폼 젂망
 강력한 산업계 지원 및 표준화 등을 통해 이미 대세 형성
 ‘글로벌’ ‘오픈’ 생태계 구축 및 확산을 위한 리스크 졲재
KT, HTML5 기반 N스크린 서비스 상용화 (2011.5)
삼성과 인텔, HTML5 기반 개방형 오픈소스 OS 티젠(Tizen) 개발하고
다양한 기기(스마트폰, 태블릿, PC, 등)에 확대 사용 계획
어도비, 모바일용 Flash Player 개발 중단하고 HTML5 지원
구글, 애플, 마이크로소프트, 모질라, HTML5 지원 확대 가속
WAC/K-Apps 스마트폰 상용화 완료하고, 표준화를 통해 웹 생태계 확대 추짂
글로벌 표준화 지연 또는 지역 표준, 특화 표준, 난립으로 인한 시장 분열
브라우저/웹플랫폼 호홖성 부족으로 인한 시장 혼란 및 개발 부담 증가
21

22. 22