html5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
TRANSCRIPT
HTML5 관점에서본2015년웹개발트렌드및인사이트
2015.06
NHN Technology Services
이준호
1. HTML5 기술현황
2. HTML5 적용사례분석
3. 사용자의입장에서기대되는 HTML5
4. 개발자의입장에서주목할 HTML5
목차
HTML5 기술현황
HTML5의현황을 알아봅니다.
• HTML5주요스펙
• Desktop Browser HTML5 현황
• Mobile Browser HTML5 현황
• HTML5 지원현황비교
Multimedia Audio
VideoSemantic
Markup
Forms
HTML5의주요목적은
과거 HTML의호환성을유지하면서
웹개발자들이실질적으로부딪히는문제를해결하고
HTML 문서가좀더의미있으면서도
리치웹애플리케이션기능( 멀티미디어를포함한 )을 수행할수있는범용표준을만드는것.
HTML5주요스펙
CSS CSS3
Media QueriesGraphics
2D Canvas
3D Canvas ( WebGL )
Real-Time WebSocket Performance Web Workers
RequestAnimationFrame
Offline Web Storage
Web DatabaseDevice
Notification
File
Desktop Browser HTML5 현황
국내 브라우저점유율
IE10 24%
IE8 24%
IE11 19%
IE9 14%
Chrome 10%
IE7 4%FireFox 2%
IE6 1%
Safari 1%
IE10
IE8
IE11
IE9
Chrome
IE7
FireFox
IE6
Safari
Opera
Othres
국내환경은 IE10, IE8, IE11, IE9, Chrome 사용자가대부분.
HTML5를제대로지원하지못하는브라우저의점유율이 30.58%.
Browser Score( 555 )
IE10 297
IE8 33
IE11 336
IE9 113
Chrome 526
Mobile Browser HTML5 현황
국내 브라우저점유율
Android 4
82%
iOS 3 6%
iOS 7 5%
iOS 8 3% Android 2 2%
Android 1%
iOS 6 1%
Android 4
iOS 3
iOS 7
iOS 8
Android 2
Android
iOS 6
iOS 4
iOS 5
Android 3
국내환경은 Android 4.X 사용자가대부분.
HTML5를지원하지못하는브라우저의점유율은거의없음.
Browser Score( 555 )
Android 4 306
iOS 3 116
iOS 7 363
iOS 8 405
HTML5 지원현황비교
Desktop과 Mobile 비교
69%
31%
지원 미지원
Desktop은 아직까지 30.58%의 브라우저가 HTML5를 제대로 지원하지 못하고 있음.
Mobile은 3.54%의 브라우저가 HTML5를 지원하지 못하고 있음.
96%
4%
지원 미지원
Desktop Mobile
HTML5 적용사례분석
HTML5가적용된 사례들을분석하여 HTML5가무엇을할 수 있는지알아봅니다.
• 네이버 N드라이브 ( Desktop )
• 네이버웹툰 ( Mobile )
• 주니어네이버뽀로로놀이교실 ( Mobile )
네이버 N드라이브 ( Desktop )• File
• 대용량파일업로드
• 멀티파일( 폴더 ) 업로드
• 이어올리기
• 기존에는 ActiveX,adobe AIR같은plugin 기술로가능하던기능들을 HTML5로완전히대체.
네이버웹툰 ( Mobile )• CSS3, Device
• 댓글에서볼수있는사용자들의반응.
• 웹툰의새로운방향을제시했다는평가.
주니어네이버뽀로로놀이교실 ( Mobile )
• Canvas, Audio
• 모바일환경에서Flash가아닌 HTML5로만미니게임을제공.
기대되는 HTML5
사용자의입장에서기대되는 HTML5에대해서알아봅니다.
• MultiMedia
• Graphics
• Desktop MultiMedia & Graphics 지원현황
• Mobile MultiMedia & Graphics 지원현황
Multimedia• Video
• 최근에WebGL을사용한360도뷰를제공
Graphics• WebGL
• 브라우저에서 plugin 없이3D 게임을제공.
Graphics on Mobile• WebGL
• 기존에는 Desktop에서만가능했던하이엔드그래픽을모바일에서도 plugin 없이제공가능.
Desktop MultiMedia지원현황
국내 브라우저점유율로본
75%
25%
지원 미지원
Desktop은 아직까지 25.26%의 브라우저가 Video와 Audio를 지원하지 못하고 있음.
Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음.
75%
25%
지원 미지원
Video Audio
Desktop Graphics 지원현황
국내 브라우저점유율로본
75%
25%
지원 미지원
Desktop은 아직까지 25.26%의 브라우저가 2D Canvas를 지원하지 못하고 있음.
또한 3D Canvas( WebGL )는 63.7%의 브라우저가 지원하지 못하고 있음.
Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음.
36%
64%
지원 미지원
2D Canvas 3D Canvas
Mobile MultiMedia지원현황
국내 브라우저점유율로본
99%
1%
지원 미지원
Mobile은 이미 거의 모든 브라우저가 Video, Audio를 지원.
99%
1%
지원 미지원
Video Audio
Mobile Graphics 지원현황
국내 점유율로본
100%
0%
지원 미지원
거의 모든 브라우저가 2D Canvas를 지원.
3D Canvas 또한 대다수의 브라우저가 지원.
단, 하드웨어에서 지원하지 못하는 일부 기기가 있을 수 있음.
87%
13%
지원 미지원
2D Canvas 3D Canvas
주목할 HTML5
그렇다면개발자의입장에서주목해야 할 HTML5는어떤것이 있을까요?
주목해야할 HTML5와그로인해개발자가얻을수있는것들을알아봅니다.
• GPU & Mobile
• GPU를사용하는 HTML5
• Mobile
• Hybrid App
GPU를활용한
Mobile Graphics
Mobile에서거의 모든브라우저가Graphics
지원
Mobile에서Graphics 에
대한사용자의기대
Graphics의핵심은GPU
사용자입장에서기대되는분야이면서
Mobile에서환경도이제막준비된분야.
Mobile에서 Graphics의핵심은 GPU.
GPU & Mobile
CPU
GPU
GPU를사용하는 HTML5
요소들의특징
CSS3
특정속성을지정한
Element는GPU에서랜더링
표현력의한계
2D Canvas CPU 의존도가비교적높음
SVG
복잡도가높아질수록
성능저하
동적인제어가까다로움
3D Canvas( WebGL )
성능은가장탁월
지원되는브라우저점유율이
비교적적음
3D Canvas ( WebGL )이가장탁월한성능을보장하지만.
Desktop의 64%, Mobile의 13% 브라우저가지원하지못하고있음.
GPU를사용하는 HTML5
GPU를사용하는HTML5 비교
DOM
Video
SVG
Video
CANVAS 2D
Video
WEBGL
Mobile
Mobile에서
Graphics 점유율
이미 Desktop에서 Flash Player 점유율과거의맘먹는수준.
사용자들의기대 Mobile의성능의이유로기존까지제대로제공되지못하던기능.
때문에사용자들의기대가가장큰분야이기도함.
개발자로서기대 기존단순어플리케이션형태의Mobile Web에서
고성능하이엔드 Graphics Mobile Web으로
한수준높은컨텐츠를제공할수있을것.
GPU를활용한
성능 향상
사용자들의기대
고성능Mobile Web
Hybrid App
WEB vs APP 이미Web이냐 App이냐의논쟁은의미가많이없어진상태.
거의모든 App들이WebView를전체, 또는부분적으로적용하고있기때문.
Hybrid App의단점 기존 Hybrid App의단점은 Native App에비해떨어지는성능.
Hybrid App의장점 멀티플랫폼지원가능.
항상최신의상태.
웹표준기술을사용하여개발속도가빠르고개발비용이비교적 저렴.
GPU를활용한
성능 향상
Hybrid App의장점
고성능Hybrid App
감사합니다