HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
-
Upload
jun-ho-lee -
Category
Internet
-
view
370 -
download
7
Transcript of HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
![Page 1: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/1.jpg)
HTML5 관점에서본2015년웹개발트렌드및인사이트
2015.06
NHN Technology Services
이준호
![Page 2: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/2.jpg)
1. HTML5 기술현황
2. HTML5 적용사례분석
3. 사용자의입장에서기대되는 HTML5
4. 개발자의입장에서주목할 HTML5
목차
![Page 3: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/3.jpg)
HTML5 기술현황
HTML5의현황을 알아봅니다.
• HTML5주요스펙
• Desktop Browser HTML5 현황
• Mobile Browser HTML5 현황
• HTML5 지원현황비교
![Page 4: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/7.jpg)
HTML5 지원현황비교
Desktop과 Mobile 비교
69%
31%
지원 미지원
Desktop은 아직까지 30.58%의 브라우저가 HTML5를 제대로 지원하지 못하고 있음.
Mobile은 3.54%의 브라우저가 HTML5를 지원하지 못하고 있음.
96%
4%
지원 미지원
Desktop Mobile
![Page 8: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/8.jpg)
HTML5 적용사례분석
HTML5가적용된 사례들을분석하여 HTML5가무엇을할 수 있는지알아봅니다.
• 네이버 N드라이브 ( Desktop )
• 네이버웹툰 ( Mobile )
• 주니어네이버뽀로로놀이교실 ( Mobile )
![Page 9: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/9.jpg)
네이버 N드라이브 ( Desktop )• File
• 대용량파일업로드
• 멀티파일( 폴더 ) 업로드
• 이어올리기
• 기존에는 ActiveX,adobe AIR같은plugin 기술로가능하던기능들을 HTML5로완전히대체.
![Page 10: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/10.jpg)
네이버웹툰 ( Mobile )• CSS3, Device
• 댓글에서볼수있는사용자들의반응.
• 웹툰의새로운방향을제시했다는평가.
![Page 11: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/11.jpg)
주니어네이버뽀로로놀이교실 ( Mobile )
• Canvas, Audio
• 모바일환경에서Flash가아닌 HTML5로만미니게임을제공.
![Page 12: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/12.jpg)
기대되는 HTML5
사용자의입장에서기대되는 HTML5에대해서알아봅니다.
• MultiMedia
• Graphics
• Desktop MultiMedia & Graphics 지원현황
• Mobile MultiMedia & Graphics 지원현황
![Page 13: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/13.jpg)
Multimedia• Video
• 최근에WebGL을사용한360도뷰를제공
![Page 14: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/14.jpg)
Graphics• WebGL
• 브라우저에서 plugin 없이3D 게임을제공.
![Page 15: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/15.jpg)
Graphics on Mobile• WebGL
• 기존에는 Desktop에서만가능했던하이엔드그래픽을모바일에서도 plugin 없이제공가능.
![Page 16: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/16.jpg)
Desktop MultiMedia지원현황
국내 브라우저점유율로본
75%
25%
지원 미지원
Desktop은 아직까지 25.26%의 브라우저가 Video와 Audio를 지원하지 못하고 있음.
Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음.
75%
25%
지원 미지원
Video Audio
![Page 17: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/17.jpg)
Desktop Graphics 지원현황
국내 브라우저점유율로본
75%
25%
지원 미지원
Desktop은 아직까지 25.26%의 브라우저가 2D Canvas를 지원하지 못하고 있음.
또한 3D Canvas( WebGL )는 63.7%의 브라우저가 지원하지 못하고 있음.
Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음.
36%
64%
지원 미지원
2D Canvas 3D Canvas
![Page 18: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/18.jpg)
Mobile MultiMedia지원현황
국내 브라우저점유율로본
99%
1%
지원 미지원
Mobile은 이미 거의 모든 브라우저가 Video, Audio를 지원.
99%
1%
지원 미지원
Video Audio
![Page 19: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/19.jpg)
Mobile Graphics 지원현황
국내 점유율로본
100%
0%
지원 미지원
거의 모든 브라우저가 2D Canvas를 지원.
3D Canvas 또한 대다수의 브라우저가 지원.
단, 하드웨어에서 지원하지 못하는 일부 기기가 있을 수 있음.
87%
13%
지원 미지원
2D Canvas 3D Canvas
![Page 20: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/20.jpg)
주목할 HTML5
그렇다면개발자의입장에서주목해야 할 HTML5는어떤것이 있을까요?
주목해야할 HTML5와그로인해개발자가얻을수있는것들을알아봅니다.
• GPU & Mobile
• GPU를사용하는 HTML5
• Mobile
• Hybrid App
![Page 21: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/21.jpg)
GPU를활용한
Mobile Graphics
Mobile에서거의 모든브라우저가Graphics
지원
Mobile에서Graphics 에
대한사용자의기대
Graphics의핵심은GPU
사용자입장에서기대되는분야이면서
Mobile에서환경도이제막준비된분야.
Mobile에서 Graphics의핵심은 GPU.
GPU & Mobile
![Page 22: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/22.jpg)
CPU
![Page 23: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/23.jpg)
GPU
![Page 24: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/24.jpg)
GPU를사용하는 HTML5
요소들의특징
CSS3
특정속성을지정한
Element는GPU에서랜더링
표현력의한계
2D Canvas CPU 의존도가비교적높음
SVG
복잡도가높아질수록
성능저하
동적인제어가까다로움
3D Canvas( WebGL )
성능은가장탁월
지원되는브라우저점유율이
비교적적음
3D Canvas ( WebGL )이가장탁월한성능을보장하지만.
Desktop의 64%, Mobile의 13% 브라우저가지원하지못하고있음.
GPU를사용하는 HTML5
![Page 25: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/25.jpg)
GPU를사용하는HTML5 비교
DOM
Video
SVG
Video
CANVAS 2D
Video
WEBGL
![Page 26: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/26.jpg)
Mobile
Mobile에서
Graphics 점유율
이미 Desktop에서 Flash Player 점유율과거의맘먹는수준.
사용자들의기대 Mobile의성능의이유로기존까지제대로제공되지못하던기능.
때문에사용자들의기대가가장큰분야이기도함.
개발자로서기대 기존단순어플리케이션형태의Mobile Web에서
고성능하이엔드 Graphics Mobile Web으로
한수준높은컨텐츠를제공할수있을것.
GPU를활용한
성능 향상
사용자들의기대
고성능Mobile Web
![Page 27: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/27.jpg)
Hybrid App
WEB vs APP 이미Web이냐 App이냐의논쟁은의미가많이없어진상태.
거의모든 App들이WebView를전체, 또는부분적으로적용하고있기때문.
Hybrid App의단점 기존 Hybrid App의단점은 Native App에비해떨어지는성능.
Hybrid App의장점 멀티플랫폼지원가능.
항상최신의상태.
웹표준기술을사용하여개발속도가빠르고개발비용이비교적 저렴.
GPU를활용한
성능 향상
Hybrid App의장점
고성능Hybrid App
![Page 28: HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트](https://reader033.fdocument.pub/reader033/viewer/2022052210/55bea822bb61eb83498b483e/html5/thumbnails/28.jpg)
감사합니다