한국 웹20주년 국제 콘퍼런스에서 발표한 자료로 네이트브 플랫폼과 격차를 줄이기 위해 Web Platform이 어떻게 발전해 가고 있는지에 대해 설명한다. 또한 향후 HTML5/Web Platform에 대한 전망도 소개한다.

1. 네이티브 웹앱 기술 동향 및 전망
이 원 석 / 삼성전자
W3C System Applications WG 의장
W3C HTML5 Korean Interest Group 의장
- Native와의 격차를 어떻게 줄일 것인가? -

2. HTML5/Web의 현안들 …

3. HTML5/Web의 주요 이슈들 (1/2)
<Source: Vision Mobile>
성능과 제한된 HW API 제공이 가장 시급히 해결해야할 이슈

4. HTML5/Web의 주요 이슈들 (2/2)
<Source: Vision Mobile>
W3C Device APIs에 대한 브라우저 적용현황
주요 브라우저 간 파편화 이슈에 대한 개선 필요

5. HTML5 핵심 표준 개발 현황 …

6. HTML5 Spec
< source: http://htmlwg.org/heartbeat/PR-html5-20140916/ >
2014년 10월까지 표준완료 예상
HTML5.1 대신 아이템 별 Spec 개발 여부 검토

7. HTML5 - Service Workers
오프라인 지원: 개발자가 Web app caching 관리
백그라운드 실행 지원
Persistent 시스템 이벤트 처리 (Push, Alarm 등) 지원
네이티브 앱 수준의 UX 제공 가능
Chromium, Mozilla에서 Top Priority Feature
< source: http://www.w3.org/TR/service-workers/ >

8. HTML5 – Manifest format
Web App의 인스톨 정보 제공
Name, Icon, Start URL, Orientation 등
홈스크린 설치, 태스크 관리자 통합 가능
ServiceWorker 오프라인 기능과 함께 Native와 같은 사용자 경험 제공
< source: http://www.w3.org/TR/pointerevents/ >

9. HTML5 – Push API
CP가 단말에 메시지를 Web Push를 이용하여 전송
사용자는 Web 페이지에서 Push 서비스 구독 신청
Browser가 실행되지 않은 상황에서도 message 수신
소규모 CP도 네이티브 App 개발 없이 Web에서 Push 사용 가능
< source: http://www.w3.org/TR/push-api/ >

10. HTML5 - <picture> and srcset attribute
< source: http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/?utm_source=html5weekly&utm_medium=email >
M-dot Site로 모바일 대응  Responsive Web
Responsive Web Design의 이미지 처리 문제
큰 이미지를 CSS를 통해서 작게 처리
모바일 단말에서 로딩 속도 이슈
Chrome 38, Firefox 33, Opera 25 지원 예정
<picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> <!-- As the fallback --> </picture>

11. HTML5 - WebRTC
•Web Real-Time Communication
–Video/Audio/Data 및 P2P 통신 기능에 대한 Web 표준
–Video: 화상통화, 얼굴 또는 객체 인식, 다자간 컨퍼런싱
–Audio: 전화, 음성인식, 음성메일, 음성공유
–Data: 리치 메시징, 게임, 파일/스크린 공유
•표준 현황 (2014년 4Q까지 Last Call Working Draft 예상)
–Media Capture and Streams (getUserMedia)
–WebRTC 1.0: Real-time Communication Between Browsers
•모든 단말 간 화상통화 및 데이터 교환 가능
•향후 IMS와 WebRTC 통합 예상

12. HTML5 – Web Components
•개발자가 자체적으로 HTML 엘리먼트를 만드는 기술
–Templates, Decorators, Custom Element, Shadow DOM, HTML imports 로 구성
•HTML 컴포넌트를 캡슐화 하여 쉽게 적용
•제작한 컴포넌트 재활용하여 개발 효율화 가능
•Material Design with Polymer

13. Privileged APIs (1/2)
< System Applications WG – Phase 1 >

14. Privileged APIs (2/2)
< System Applications WG – Phase 2 >

15. ES6 - Promise
•ECMAScript 6 버전에 표준화 진행 중
•비동기 코드 실행을 추상화한 오브젝트로 기존 Callback의 다중 중첩 복잡도 문제를 해결
•비동기 API 프로그래밍을 동기 API 프로그래밍 스타일로 작성할 수 있도록 하여 코드 Readability를 극대화
•W3C 웹 표준 API Spec에 활용

16. 정리 및 향후 전망 …

17. HTML5/Web에 대한 전망 (1/2)
•네이티브와 격차 최소화 노력 지속
–성능개선: ServiceWorker, <picture> and srcset attribute
–신규 기능 확대 지원: WebRTC, Push, Manifest, Privileged APIs
–Web App 개발 최적화 (코드 관리 개선, 파편화 대응 등)
•신규기능: ES6 Promise, Web Components 등
•개발도구: 모바일 지원, 성능/로딩타임 Profiler 등
•라이브러리: Polyfill, JS framework 등
•HTML5/Web 기술 장점 극대화하는 방향으로 발전
–설치/업데이트 필요 없는 App 실행 환경
•URL 기반 App 실행, 항상 최신의 App 실행, Device 간 Sync 지원

18. HTML5/Web에 대한 전망 (2/2)
•IDC의 HTML5 향후 전망
–가까운 미래(2017년)까지는 모바일 단말에서 Native App 대체 불가
–그러나, 아래 분야에서는 HTML5 App 큰 성장 예상
•Content publishing app 분야(전자책/매거진), 기업용 App 분야, Hybrid App 분야
•가트너 2014년 모바일 예측
–2017년까지 모바일 단말의 브라우저는 정교한 App 전달 플랫폼으로 발전
•새롭게 개발되는 web app의 50% 이상이 복잡한 자바스크립트로 구성
•이러한 web app은 질 높은 사용자 경험 제공
–HTML5는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망
–그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재

19. < source: http://www.w3.org/20/ >