�ݺ�ߣ

HTML5 트렌드와 미래 웹기술
Part 3
조만영 대표이사
미래웹기술연구소(주)

발표자 소개
§  (현) 미래웹기술연구소㈜ 대표이사
§  (현) W3C 대한민국 사무국 Business and Technology Specialist
§  (전) 오페라소프트웨어 Presales Engineer 부장
§  (전) 유니퀘스트 경영기획실
§  (전) 나모인터랙티브 웹개발팀
§  고려대학교 컴퓨터공학 석사
§  2014년 미래창조과학부장관 표창수여 인터넷진흥공로
Page 2

미래웹기술연구소 소개
§  HTML5 및 웹표준 기술 전문 연구 강
의, 교육
§  HTML5 모바일 개발 및 앱개발
§  Sencha 한국 총판
§  웹기술과 가전제품의 융합 선행연구
Page 3

멀티스크린시대의
HTML5와 웹기술

N-Screen & N-Devices
iOS Android WM7 Blackberry Bada WebOs
Mobile
Phone
Tablet PC
TV
Page 5

N-Screen !
§  이때는?
Page 6

Connected Life & N-Screen
§  멀티 디바이스의 시대 사람들이 원하는 것
§  끊김없는 인터넷 경험을 지속시키고 싶은 것
(Seamless internet experience)
§  이것이 N-Screen 대응이 대두된 본질
§  사용자 경험에서 부터 출발해야 한다
M
e
n
u
Close Tab
Page 7

N-Screen 환경에서 대응되야 하는 요소들
•  Text, Image, Information
Data
•  Video, Music
Multimedia Contents
•  Resolution, Screen Size independent
GUI
Page 8

N-Screen 대응 : Data
§  Web은 처음부터 원격지간의 정보 교환을 위해 탄생된 것
§  물리적 저장매체를 통한 데이터 이동의 불편
§  Cloud 서비스로의 급격한 전환
http://blog.softheme.com/cloud-services-convenient-for-small-business/
Page 9

N-Screen 대응 : Multimedia Contents
§  Video, Music
Page 10

§  HTML5 Video
§  Video rendering playback by browser
§  Browser has software codec
<video src=/slideshow/html5-part-3/44293544/"movie.ogg" width="320" height="240"
controls="controls">
</video>
Page 11

§  HTML5 Video N-Screen Demo
Page 12

Web UI technology for N-Screen
§  HTML5 Canvas
§  CSS
§  CSS3 Media Query
§  Responsive Web Design
§  SVG
§  JavaScript UI Library
§  Javascript Mobile UI Framework
Page 13

HTML5 Canvas
§  HTML5 Canvas : 2D Bitmap 이미지 브라우저가 동적으로 그려냄
§  User Agent 분석을 통해 디바이스별로 다른 크기의 이미지를 그려낼수 있음
§  Canvas 를 통해 그려낼 수 있는 것들
Line, Rectangle, Circle, Arc, Curve, Image, Text
<canvas id="myCanvas"
width="200"height="100">
</canvas>
Page 14

N-Screen 대응 : GUI
§  HTML5 Canvas Demo
http://js-fireworks.appspot.com/
§ 
Page 15

§  CSS
http://youtube.com/xl
§ 
Page 16

§  CSS3 Media Query
<link rel="stylesheet" href=“tablet.css" media="only screen and (min-device-
width : 768px) and (max-device-width : 1024px)">
§ 
Page 17

§  Responsive Web Design
§  Fluid Layout, Adjustable screen resolution, resizable images
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/
§ 
Page 18

§  Responsive Web Design Example
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
§  http://teegallery.com/
http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-
queries/
§ 
Page 19

쾌적한 멀티스크린 사용자 경험
Page 20

TV와 가전으로 확장하는 웹기술

Web based VOD
§  BBC iPlayer
http://www.bbc.co.uk/iplayer/bigscreen/
§ 
Page 22

Hybrid Web Broadcasting Solution
§  Goome M-Cube
§  http://www.youtube.com/watch?v=TPOkuS4Mydg
Page 23

HBBTV
DVB
Internet
VOD GAMES
VOTING
WEATHER SHOP
ETC.
TV channels
Broadcast (aka « red button »)
(aka « Web TV »)
OEM model: broadband only
Broadcaster model: broadcast & broadband
Broadband
Page 25

Browser as middleware for HbbTV
Page 26

TV widgets
§  http://www.youtube.com/watch?v=_u28b13BiOY
Page 29

Game console
§  http://www.youtube.com/watch?v=EWOc3Sm3IMo&feature=related
Page 31

네버엔딩 스토리
Page 33

정리
§  스마트폰 시대와 더불에 멀티스크린 멀티 디바이스 시대로의 전환
§  다야한 스크린 사이즈에 대응한 서비스 구현 문제 대두
§  대안기술로서 웹기술이 각광을 받음
§  UI 기술로서 웹기술은 모바일을 넘어 TV와 자동차와 같은 가전 영역으로 확대
Page 34

�ݺ�ߣ

HTML5 와 미래웹기술 part 3

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML5 와 미래웹기술 part 3 (20)

More from 미래웹기술연구소 (MIRAE WEB) (12)

HTML5 와 미래웹기술 part 3