#WEB WORLD INSIGHT CONFERENCE 2015

1. HTML5 관점에서 본
2015년 웹개발 트렌드 및
인사이트
2015.06
NHN Technology Services
이준호

2. 1. HTML5 기술 현황
2. HTML5 적용 사례 분석
3. 사용자의 입장에서 기대되는 HTML5
4. 개발자의 입장에서 주목할 HTML5
목차

3. HTML5 기술 현황
HTML5의 현황을 알아봅니다.
• HTML5 주요 스펙
• Desktop Browser HTML5 현황
• Mobile Browser HTML5 현황
• HTML5 지원 현황 비교

4. Multimedia
 Audio
 Video
Semantic
 Markup
 Forms
HTML5의 주요 목적은
과거 HTML의 호환성을 유지하면서
웹 개발자들이 실질적으로 부딪히는 문제를 해결 하고
HTML 문서가 좀더 의미 있으면서도
리치 웹 애플리케이션 기능( 멀티미디어를 포함한 )을 수행할 수 있는 범용 표준을 만드는 것.
HTML5 주요 스펙
CSS
 CSS3
 Media Queries
Graphics
 2D Canvas
 3D Canvas ( WebGL )
Real-Time  WebSocket Performance
 Web Workers
 RequestAnimationFrame
Offline
 Web Storage
 Web Database
Device
 Notification
 File

5. 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

6. 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

7. HTML5 지원 현황 비교
Desktop과 Mobile 비교
69%
31%
지원 미지원
Desktop은 아직까지 30.58%의 브라우저가 HTML5를 제대로 지원하지 못하고 있음.
Mobile은 3.54%의 브라우저가 HTML5를 지원하지 못하고 있음.
96%
4%
지원 미지원
Desktop Mobile

8. HTML5 적용 사례 분석
HTML5가 적용된 사례들을 분석하여 HTML5가 무엇을 할 수 있는지 알아봅니다.
• 네이버 N드라이브 ( Desktop )
• 네이버 웹툰 ( Mobile )
• 주니어 네이버 뽀로로 놀이교실 ( Mobile )

9. 네이버 N드라이브 ( Desktop )
• File
• 대용량 파일 업로드
• 멀티 파일( 폴더 ) 업로드
• 이어 올리기
• 기존에는 ActiveX,
adobe AIR같은
plugin 기술로 가능하던
기능들을 HTML5로
완전히 대체.

10. 네이버 웹툰 ( Mobile )
• CSS3, Device
• 댓글에서 볼 수 있는
사용자들의 반응.
• 웹툰의 새로운 방향을
제시했다는 평가.

11. 주니어 네이버 뽀로로 놀이교실 ( Mobile )
• Canvas, Audio
• 모바일 환경에서
Flash가 아닌 HTML5로만
미니 게임을 제공.

12. 기대되는 HTML5
사용자의 입장에서 기대되는 HTML5에 대해서 알아봅니다.
• MultiMedia
• Graphics
• Desktop MultiMedia & Graphics 지원 현황
• Mobile MultiMedia & Graphics 지원 현황

13. Multimedia
• Video
• 최근에 WebGL을 사용한
360도 뷰를 제공

14. Graphics
• WebGL
• 브라우저에서 plugin 없이
3D 게임을 제공.

15. Graphics on Mobile
• WebGL
• 기존에는 Desktop에서만
가능했던 하이엔드 그래픽을
모바일에서도 plugin 없이
제공 가능.

16. Desktop MultiMedia 지원 현황
국내 브라우저 점유율로 본
75%
25%
지원 미지원
Desktop은 아직까지 25.26%의 브라우저가 Video와 Audio를 지원하지 못하고 있음.
Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음.
75%
25%
지원 미지원
Video Audio

17. Desktop Graphics 지원 현황
국내 브라우저 점유율로 본
75%
25%
지원 미지원
Desktop은 아직까지 25.26%의 브라우저가 2D Canvas를 지원하지 못하고 있음.
또한 3D Canvas( WebGL )는 63.7%의 브라우저가 지원하지 못하고 있음.
Desktop은 아직까지 플러그인 기술이 많이 사용되고 있음.
36%
64%
지원 미지원
2D Canvas 3D Canvas

18. Mobile MultiMedia 지원 현황
국내 브라우저 점유율로 본
99%
1%
지원 미지원
Mobile은 이미 거의 모든 브라우저가 Video, Audio를 지원.
99%
1%
지원 미지원
Video Audio

19. Mobile Graphics 지원 현황
국내 점유율로 본
100%
0%
지원 미지원
거의 모든 브라우저가 2D Canvas를 지원.
3D Canvas 또한 대다수의 브라우저가 지원.
단, 하드웨어에서 지원하지 못하는 일부 기기가 있을 수 있음.
87%
13%
지원 미지원
2D Canvas 3D Canvas

20. 주목할 HTML5
그렇다면 개발자의 입장에서 주목해야 할 HTML5는 어떤 것이 있을까요?
주목해야 할 HTML5와 그로 인해 개발자가 얻을 수 있는 것들을 알아봅니다.
• GPU & Mobile
• GPU를 사용하는 HTML5
• Mobile
• Hybrid App

21. GPU를 활용한
Mobile Graphics
Mobile에서
거의 모든
브라우저가
Graphics
지원
Mobile에서
Graphics 에
대한
사용자의
기대
Graphics의
핵심은GPU
사용자 입장에서 기대되는 분야이면서
Mobile에서 환경도 이제 막 준비된 분야.
Mobile에서 Graphics의 핵심은 GPU.
GPU & Mobile

22. CPU

23. GPU

24. GPU를 사용하는 HTML5
요소들의 특징
CSS3
 특정 속성을 지정한
Element는 GPU에서 랜더링
 표현력의 한계
2D Canvas  CPU 의존도가 비교적 높음
SVG
 복잡도가 높아질 수록
성능 저하
 동적인 제어가 까다로움
3D Canvas
( WebGL )
 성능은 가장 탁월
 지원되는 브라우저 점유율이
비교적 적음
3D Canvas ( WebGL )이 가장 탁월한 성능을 보장하지만.
Desktop의 64%, Mobile의 13% 브라우저가 지원하지 못하고 있음.
GPU를 사용하는 HTML5

25. GPU를 사용하는 HTML5 비교
DOM
Video
SVG
Video
CANVAS 2D
Video
WEBGL

26. Mobile
Mobile에서
Graphics 점유율
이미 Desktop에서 Flash Player 점유율과 거의 맘먹는 수준.
사용자들의 기대 Mobile의 성능의 이유로 기존까지 제대로 제공되지 못하던 기능.
때문에 사용자들의 기대가 가장 큰 분야이기도 함.
개발자로서 기대 기존 단순 어플리케이션 형태의 Mobile Web에서
고성능 하이엔드 Graphics Mobile Web으로
한 수준 높은 컨텐츠를 제공할 수 있을 것.
GPU를
활용한
성능 향상
사용자들의
기대
고성능
MobileWeb

27. Hybrid App
WEB vs APP 이미 Web이냐 App이냐의 논쟁은 의미가 많이 없어진 상태.
거의 모든 App들이 WebView를 전체, 또는 부분적으로 적용하고 있기 때문.
Hybrid App의 단점 기존 Hybrid App의 단점은 Native App에 비해 떨어지는 성능.
Hybrid App의 장점 멀티 플랫폼 지원 가능.
항상 최신의 상태.
웹 표준 기술을 사용하여 개발 속도가 빠르고 개발 비용이 비교적 저렴.
GPU를
활용한
성능 향상
Hybrid App
의 장점
고성능
HybridApp

28. 감사합니다