네이티브 웹앱 기술 동향 및 전망

이 원 석 / 삼성전자

W3C System Applications WG 의장

W3C HTML5 Korean Interest Group 의장

- Native와의 격차를 어떻게 줄일 것인가? -

HTML5/Web의 현안들 …

HTML5/Web의 주요 이슈들 (1/2)

<Source: Vision Mobile>

성능과 제한된 HW API 제공이 가장 시급히 해결해야할 이슈

HTML5/Web의 주요 이슈들 (2/2)

<Source: Vision Mobile> W3C Device APIs에 대한 브라우저 적용현황

주요 브라우저 간 파편화 이슈에 대한 개선 필요

HTML5 핵심 표준 개발 현황 …

HTML5 Spec

< source: http://htmlwg.org/heartbeat/PR-html5-20140916/ >

2014년 10월까지 표준완료 예상

HTML5.1 대신 아이템 별 Spec 개발 여부 검토

HTML5 - Service Workers

오프라인 지원: 개발자가 Web app caching 관리

백그라운드 실행 지원

Persistent 시스템 이벤트 처리 (Push, Alarm 등) 지원

네이티브 앱 수준의 UX 제공 가능

Chromium, Mozilla에서 Top Priority Feature

< source: http://www.w3.org/TR/service-workers/ >

HTML5 – Manifest format

Web App의 인스톨 정보 제공

Name, Icon, Start URL, Orientation 등

홈스크린 설치, 태스크 관리자 통합 가능

ServiceWorker 오프라인 기능과 함께

Native와 같은 사용자 경험 제공

< source: http://www.w3.org/TR/pointerevents/ >

HTML5 – Push API

CP가 단말에 메시지를 Web Push를 이용하여 전송

사용자는 Web 페이지에서 Push 서비스 구독 신청

Browser가 실행되지 않은 상황에서도 message 수신

소규모 CP도 네이티브 App 개발 없이 Web에서 Push

사용 가능

< source: http://www.w3.org/TR/push-api/ >

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>

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 통합 예상

HTML5 – Web Components

• 개발자가 자체적으로 HTML 엘리먼트를 만드는 기술 – Templates, Decorators, Custom Element, Shadow DOM, HTML

imports 로 구성

• HTML 컴포넌트를 캡슐화 하여 쉽게 적용

• 제작한 컴포넌트 재활용하여 개발 효율화 가능

• Material Design with Polymer

Privileged APIs (1/2)

< System Applications WG – Phase 1 >

Privileged APIs (2/2)

< System Applications WG – Phase 2 >

ES6 - Promise

• ECMAScript 6 버전에 표준화 진행 중

• 비동기 코드 실행을 추상화한 오브젝트로 기존 Callback의

다중 중첩 복잡도 문제를 해결

• 비동기 API 프로그래밍을 동기 API 프로그래밍 스타일로 작

성할 수 있도록 하여 코드 Readability를 극대화

• W3C 웹 표준 API Spec에 활용

정리 및 향후 전망 …

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 지원

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는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망

– 그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재

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