This slides is about tech trend of HTML5 mostly focused on industry and W3C. It was presented in W3C HTML5 Conference 2017 in Seoul.

1. W3C HTML5 표준 기술 동향
이원석 (ETRI 표준연구본부) /
W3C HTML5 KIG/KCG 의장
@wonsuk73

2. HTML5 주요 업계 동향 정리 …

3. <Source: https://www.khronos.org/blog/webgl-2.0-arrives >
Feb. 2017

4. <Source: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf >
March 2017
 PWA 확대 및 Android Platform 통합 지속 추진
 적극적인 신규 기능 추가
 Chrome의 점유율 확대로 더 적극적
 성능개선을 위한 기능 추가

5. <Source: https://blogs.windows.com/msedgedev/2017/01/31/introducing-webrtc-microsoft-edge/ >
Jan. 2017

6. May 2017
<Source: https://www.thurrott.com/windows/windows-10/116101/microsoft-said-progressive-web-apps-build >

7. <Source: https://blogs.windows.com/msedgedev/2017/10/10/bringing-webvr-everyone-windows-10-fall-creators-update/ >
Oct. 2017

8. <Source: https://blogs.windows.com/msedgedev/2017/10/05/microsoft-edge-ios-android-developer/#gUJs21HBhmPKXl62.97 >
Oct. 2017

9. <Source: https://www.thurrott.com/windows/windows-10/142649/microsofts-bold-plan-bring-pwas-windows-10 >
Oct. 2017
 내년 상반기 윈도우 10의 핵심 플랫폼 기능으로 PWA
지원 예정
 브라우저 기능을 확대하고 이를 윈도우 10과 통합하여
모든 디바이스 플랫폼으로 활용

10. <Source: https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html >
March 2017
 사파리 브라우저에 새로운 표준 기술 적용 확대
 Fetch API, IndexedDB 2.0, the Gamepad API, Input
Events, Custom Elements, CSS Grid, HTML5 form
validation, and more

11. <Source: https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html >
June 2017
 사파리 브라우저에 새로운 표준 기술 적용 확대
 WebRTC, Web Assembly 등

12. Aug. 2017
<Source: https://twitter.com/webmaxru/status/893027996659060738 >
 ServiceWorker 개발중?

13. <Source: https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/ >
June 2017

14. <Source: https://hacks.mozilla.org/2017/08/firefox-55-supports-webvr/ >
Aug. 2017

15. <Source: https://blog.mozilla.org/blog/2017/11/14/introducing-firefox-quantum/ >
Nov. 2017
<Source: https://hacks.mozilla.org/2017/11/entering-the-quantum-era-how-firefox-got-fast-again-and-where-its-going-to-get-faster/ >
 파이어폭스 퀀텀 출시
 빠른 성능과 새로운 UX 디자인 적용
 최신 웹 표준 기술에 대한 빠른 대응

16. <Source: http://www.asiae.co.kr/news/view.htm?idxno=2017102716190033499 >
 HTML5 기반 카카오 스낵 게임 확대 중

17. <Source: http://www.adweek.com/digital/coolgames-tetris-facebook-instant-games/ >
 HTML5 기반 페이스북 인스턴트 게임

18. W3C HTML5 주요 표준화 동향 …

19. HTML5 Spec
< source: http://www.w3.org/TR/2014/REC-html5-20141028/ >
 W3C HTML5 최종 표준 (2014년 10월)
 W3C HTML5.1 표준 (2016년 10월)
 W3C HTML5.2 표준 - PR (2017년 12월?)

20. Web Payments WG
< source: http://www.w3.org/TR/2014/REC-html5-20141028/ >
 표준 개발과 브라우저 지원이 가장 빠른 기능
 구글, 애플, 삼성전자, 알리바바, 비자, 마스터
등 모든 플레이어 참여

21. <Source: https://www.w3.org/blog/wpwg/2017/09/14/payment-request-api-now-being-implemented-in-all-major-browsers-advances-on-the-
recommendation-track/ >
Sept. 2017

22. Web Assembly WG
< source: https://www.w3.org/2017/08/wasm-charter >
 초기 목표
 C/C++ 프로그램을 웹에서 안전하게, 네이티브 속
도로 실행할 수 있도록 하는 것

23. <Source: https://pspdfkit.com/blog/2017/webassembly-a-new-hope/ >
Web Assembly WG

24. Use cases for Web Assembly
• High performance games (Epic Unreal, Unity)
• Audio and Video codecs / 3D model compression
• Google Earth
• Speech synthesis / recognition
• Media applications (Photoshop, After Effects, Maya, Blender, etc.)
• Bring existing C/C++ apps to the Web (Linux Stack, Emacs, Vim)
• Libraries for cryptography, computer vision, barcode reading
• Applications requiring reliable performance, blocking APIs, precise
memory control

25. <Source: https://blog.mozilla.org/blog/2017/11/13/webassembly-in-browsers/ >
Nov. 2017
 크롬, 파이어폭스, 사파리, 엣지 브라우저 지원

26. WebRTC Spec
< source: https://www.w3.org/2017/08/wasm-charter >
 6년 동안 개발
 API 표준 – W3C
 코덱 표준(Opus 및 H.264) - IETF 및 ITU-T/MPEG
 프로토콜 표준: IETF (수백 페이지의 표준)

27. Service Worker WG
< source: https://www.w3.org/2017/08/sw-charter >
 Facebook 등 기업 요청으로 별도 WG 생성

28. Service Worker WG
< source: https://wicg.github.io/BackgroundSync/spec/ >
 클라이언트 데이터에 대한 백그라운드 데이터
싱크 기능 (onsync serviceworker event)

29. WebVR CG
< source: https://www.w3.org/community/webvr/ >
 WebVR API
 브라우저 구현 현황
 2018년 WG 설립 예정

30. WebVR CG
• Why WebVR?
– VR 사용자 확보의 어려움
– 다양한 디바이스 플랫폼을 지원하는 VR 컨텐츠 확보의 어려움
– VR 사용자와 VR 비사용자 간의 연결 및 경험 공유
– VR 컨텐츠 개발자 확보의 어려움
• WebVR 컨텐츠 활용 예 (Web 컨텐츠를 한단계 업그레이드?)
– 실감나는 컨텐츠 서비스(360도 view 등)
– 건축가, 인테리어 및 가구업체 들의 활용
– Tripadvisor API와 2D map을 이용한 3차원 호텔 예약 서비스

31. WebVR CG
• Why WebVR?
< source: https://www.w3.org/2017/Talks/ac-slides/ak-webvr/?full#8 >

32. WebVR CG
• Tech Stack for WebVR

33. CSS Houdini
< source: https://github.com/w3c/css-houdini-drafts/wiki >
 CSS Rendering Engine에 대한 Javascript API 표준

34. Browser Extension CG
< source: https://browserext.github.io/browserext/ >
 Chrome, Firefox and Edge

35. Automotive WG
< source: https://browserext.github.io/browserext/ >
 커넥티드 카와 차량 내외부의 응용 및 서비스 간 연동
에 필요한 표준 인터페이스 정의
 폭스바겐 AG, 재규어 랜드로버 참여

36. Automotive Web 해커톤
< source: https://rp.kddi-research.jp/hackathon >

37. < source: https://www.w3.org/community/wicg/ >
Web Platform Incubator CG
 WICG
 Web Platform의 새로운 Feature를 논의하고 제
안하는 Lightweight 장소

38. <Source: https://wicg.github.io/shape-detection-api/ >
Web Platform Incubator CG
 이미지나 이미지 소스에서 얼굴인식, QR 코드 인
식 등 인식 API
 크롬, 오페라 지원

39. <Source: https://wicg.github.io/web-share/ >
Web Platform Incubator CG
 HTTPS에서만 지원
 크롬 61 Android, 오페라 48

40. Web Platform Incubator CG
< source: https://browserext.github.io/browserext/ >
 디렉토리 선택시 디렉토리 내 모든 파일 처리
 Chrome, Firefox and Edge 지원

41. 정리 및 향후 전망 …

42. 정 리
• 네이티브와 격차 최소화 노력 지속
– 성능개선: WebAssembly, ServiceWorker, defer, async 등
– 신규 기능 확대 지원: Web Payments, WebRTC, Generic Sensor,
Bluetooth, NFC,
– Web App 개발 최적화 (코드 관리 개선, 파편화 대응 등)
• 신규기능: CSS, Houdini, Web Components 등
• 개발도구: 모바일 지원, 성능/로딩타임 Profiler 등
• 라이브러리: Polyfill, JS framework 등
– Extension 호환성: Browser Extensions
• 주목해야 할 기술들
– WebVR, WebRTC, Web Payments, HTTP  HTTPS
– Automotive Web, WebAssembly, Physical Web

43. 다시 한번 혁신적인 웹 이노베이션 진행 중!!
<Source: https://www.w3.org/2017/Talks/tpac-slides/tpac2017-jeff/#core-innovation >