HTML5 관점에서 본2015 웹 개발 동향 및 2016 전망:Mobile 중심으로

임상석 PLSyrup Store 개발그룹SK 플래닛

Agenda

● 2015년 개발 동향○ HTML5 시장 환경 회고○ 신규 Web Framework 분석○ 상용 개발 사례 소개

● 2016 전망○ Web UI, Runtime, Platform 관점

HTML5 시장 회고

Web 기술 시장 변화 회고

● Click의 Web시대에서 Touch의 App시대 변천○ PC Web의 경험의 Mobile Web으로 이관의 실패

● Mobile-First시대에서 Mobile-Only 시대로 전환○ PC가 배제되어가고 있고, Mobile에서도 Value Proposition, BM이 가능

● Deep Link에서 App Link의 시대로 전환중○ Web간의 연결성에서 App Page의 단위의 연결성을 급속히 모색

● Hybrid App의 확산 및 이해도 증가○ App update 피로도 및 app store 통제 회피, 디자인/기획 친화적 생산성

● Android M/iOS9의 HTML5 호환성/성능 개선○ WebRTC, WebGL의 고급 기술 지원

HTML5 Hype Cycle: Hype, Hope, Hopeless?

Hybrid Web App

Thoughts on Flash (Steve Jobs)

● 6번째 가장 중요한 거부 이유

Facebook/Linkedin 철수 (2013)

2011년 Linkedin 자료

사용자 체류 시간이 긴 App의 경우 엔진의 메모리 누수로 불안정하고 이를 profiling할 개발 환경 또한 부재합니다.

크롬 Inspector로 메모리, Rendering, JavaScript등 성능 profiling이 가능합니다.

Native SW 플랫폼 경쟁적 대체 전략 실패

● 개발 언어가 바뀐 “또 다른 플랫폼"○ Cross platform 하지 않음: Android, iOS, + HTML5○ 제대로 된 HTML5/JavaScript 개발자 공급 부족

● Ecosystem 구축 책임/중심체 부재○ Multi-sided platform 활성화는 누군가 비용/책임지고 투자/Subsidy 필수

● Native SW 개발 비용 지속 감소○ 동시 개발, 안드로이드 선출시 후 iOS 개발

● Web OS 상용화/활성화 실패○ Tizen, Firefox OS, WebOSTM

Fragmentation 심화: 2014

● OS버전/OS종류에 따른 fragementation 발생○ iOS, Android 2.x - 4.x간의 fragmentation 처리 비용 높음○ Google Blink의 WebKit에서 분리로 1-2년내 추가 심화

● Kikat의 Chrome-powered WebView의 재앙○ Chrome-powered WebView의 HTML5 호환성이 Chorme Browser 대비 매우 낮음 -> Anroid L에서 개선

○ Canvas HW 가속 미지원으로 Canvas 게임 개발 업체 위기 봉착

Fragmentation 심화 계속: 2015

● Android L 단말 Gradient 과도한 CPU 사용○ CSS Gradient기반 border 생성시 애니메이션 속도 저하

● iOS 9 UI Webview 오류○ window.location이 동기적으로 update 되지 않음○ http://blog.ionic.io/preparing-for-ios-9/○ 사파리 브라우져, WKView, UIWebview간 동작 특성이 다름

Big 3 업체 HTML5 전략 요약

● Apple○ iOS앱 대체는 지양하고 Mobile Web 중심 기술 혁신 지속○ UIWebview를 WebKit2 기반 WKView 이전중

● Facebook○ 2013년 HTML5 철수 후 React, React Native 개발 후 오픈 소스 공개○ React는 Virtual DOM등을 도입하여 속도 최적화 노력중○ React Native를 소개하며 근본적으로 Web으로는 Native 속도/수려함을 넘어설수 없는 것을 인정

● Google○ 표준을 주도하며 Polymer 1.0 개발 계속○ 속도나 호환성 개선을 통한 즉시 적용보다는 먼 미래를 보고 움직이는 듯

Android의 Chrome OS 흡수 통합(?)

Android의 Chrome OS 흡수 통합(?)

● Android 중심 앱 개발 생태계 통합기반 마련○ http://www.cnet.com/news/first-android-apps-head-to-chromebooks/

● Chrome OS 지속 Support 의지 천명○ http://chrome.blogspot.kr/2015/11/chrome-os-is-here-to-stay.html

● 어찌 되었던 WebOS로서 앱 확보 어려움 인정

HTML5 Framework

쓸만한 Web Framework의 등장 및 확산

● 기존 Web 앱의 문제점 인정하고 극복하는 것을 주 목적으로 설계한 Framework의 등장 및 확산

● 속도 개선○ React/React Native○ Angularjs 기반 Framework

■ Ionic■ Famo.us

● 재활용성 개선○ Polymer (Web Components)

React by Facebook

● UI 구현용 JavaScript 라이브러리○ MVC -> View Only○ BSD 오픈 소스 공개

● 속도 최우선 가치로 염두한 설계 및 개발○ Virtual DOM의 도입으로 DOM 분리

● 상용 적용 사례○ Facebook의 Group 앱에 적용하여 상용화

■ React Native (iOS): React 기반 Native 앱 UI 개발 framework○ Netflix (server-side rendering)

■ TV와 game console에 적용: http://techblog.netflix.com/2015/01/netflix-likes-react.html

○ Paypal (server-side rendering)■ https://www.paypal-engineering.com/2015/04/27/isomorphic-react-apps-with-react-

engine/

React 핵심 기술: Virtual DOM

● 가벼운 JavaScript object로 Render tree 구성○ 무겁고 느린 DOM은 최종 화면 출력에만 쓰임

● 속도 개선 기술○ Diff algorithm

■ 변경 내역만 diff하여 rendering○ Event delegation

■ hash 기반 event mapping/handling○ Rendering

■ batching, selective rendering

http://calendar.perfplanet.com/2013/diff/

JS Object Tree DOM Tree

React를 통한 개발 문화 변화 (Facebook내)

● Web UI programming paradigm shift 추구○ 이해하기 쉽고, 대규모, 큰 조직에서의 개발시 효율성 극대화○ Facebook 신규 개발자가 하루만에 commit 가능!

● Imperative -> Delatrive● Delactrive -> Predictable● Predictable -> Confidence● Confidence -> Realiability

https://www.youtube.com/watch?v=KVZ-P-ZI6W4

React Native

● Web 앱 한계에 대한 명확한 인식: 환상이 아닌 현실○ Facebook Paper 수준의 UI를 Web으로 구현 불가하다는 인식에서 출발

● JavaScript로 native app 개발○ Native로 개발된 Widget에 JS로 직접 binding○ No webview○ UI는 React 사용

● Write once, run anywhere → Learn once, write anywhere

AngularJS by Google

Superheroic JavaScript MVW Framework

Ionic HTML5 Framework

● Hybrid 모바일 앱 개발용 Framework○ AngularJS 기반 UI○ Cordova 기반 네이티브 통합

● 특징○ Android/iOS 네이티브와 흡사한 앱 개발을 목적으로 개발됨

■ UI style, 페이지 transition이 네이티브와 동일■ 기본 제공 theme/style/icon만으로 완성도 높은 앱 개발 가능

○ 모바일 성능 최적화■ SPA의 View의 동적 관리■ Grade 별 style 적용: box-shadow, gradient등■ ScrollView의 rendering 방식을 선택 가능: Browser, CSS■ ListView의 rendering 방식을 선택 가능: ng-repeat, collection-repeat

Ionic UI Component

헤더버튼리스트그리드폼탭...

$ionicActionSheet$ionicBackDropslideBox$ionicPopUp...

CSS IconSVG icon

famo.us

● CSS3D + 물리 엔진 통합된 Web UI FW 공개 ○ DOM layout 비용 최소화, GPU 사용 극대화○ Android는 젤리빈 이상 지원○ 3D 및 물리 엔진으로 심미적 차별화

● Facebook HTML5 개발 책임자 합류○ Dave Fetterman

● 3D/Physics 기반 UI 개발시 독보적임● HTML5의 환상을 계속 추구하였음

○ 성능 한계로 mixed mode까지 옴 (DOM, WebGL)○ ScrollView 한계에 봉착

ScrollView 성능 문제

famo.us/Angular

● Native UI framework에 상응하는 JS UI framework○ 진입 장벽 높음

● Angular기반 앱개발을 지원○ Directive, Services, Provider 제공○ http://famo.us/integrations/angular/docs/api/index.html

● Ionic/Angular에 비해 커뮤니티 활성화도가 낮음

famo.us 데모

● http://codepen.io/befamous/eAlwd● http://disrupt.famo.us/periodic402

famo.us BM 전략 선회: 광고 컨텐츠

Polymer

● Web component 기반 UI framework● UI componentization을 통한 재활용 목적

Polymer 예제

https://www.polymer-project.org/1.0/

Polymer: 호환성 한계

https://www.polymer-project.org/1.0/resources/compatibility.html

HTML5 RunTime

HTML5 Runtime: Intel Crosswalk

● 크롬 엔진 기반 Cordova Webview○ 크롬의 최신 HTML5 모든 기능 지원

● Android 4.0+지원○ 크롬 엔진을 사용하지 않는 Android 4.0 - Android 4.3 대응 용이

● 단점○ 앱과 함께 크롬 엔진의 설치로 18MB+ 증가○ Built-in 크롬 웹뷰에 비해서 성능 저하

● Cordova 4.0부터 pluggable Webview 지원○ 앱스토어에서 다운로드후에 별도로 Crosswalk 엔진 설치

HTML5 Runtime: Intel CrossWalk

https://crosswalk-project.org/

HTML5 Runtime: iOS/Android

● Android Chrome Webview○ Android 4.4 부터 지원○ Multi-process architecture

● iOS WKView○ Multi-process 구조로 기존 엔진의 치명적인 약점인 UI rendering 분리 됨

○ Asynchronous API로 기존 UIWebview와 호환성 없음● Single threaded 엔진 한계 극복 시작

HTML5 상용화 사례

HTML5 활용 전략 (SK planet 사례)

● HTML5를 SW Platform의 대체제로의 접근 전략○ 정부 주도로 RunTime의 확보 시도했으나 상업적으로 현재까지는 실패함

● 같은 전략을 고집하거나 되풀이 하는 것은 미련함○ 서비스회사 관점에서 필요 및 현실에 근거한 활용 전략 수립

● Hybrid App을 통한 상리 공생 전략으로 선회○ 서비스 회사 관점에서 순수 native app의 단점을 보완할수 있는 장점을 극대화

■ no app update■ cross-platform (Android 및 iOS 동시 지원)

● 국내 현실에서 iOS 개발자 확보 및 개발 비용 증가■ designer-friendly■ 기획/디자인/개발 속도

서비스 관점 HTML5 활용 장점

● 서비스 관점에서 진정한 cross-platform○ 모든 browser, Webview에서 동작○ fragmentation handling을 필수

● 빠른 서비스 개발 및 Update○ 기획 -> UX/디자인 -> publishing -> 개발 -> QA -> 배포○ App store는 통제 불가능

App update 강한 사용자 저항

Hybrid App - Type 1

● PhoneGap/Cordova 방식○ 전체 UI를 Webview 한장에 Single Page Web 형태 개발

○ Device API를 통한 Device 기능 접근

● Native 대비 낮은 성능 및 심미적 완성도○ 고품질 상용 consumer 용 App 개발시 널리 사용되지 않음○ 기업 고객용

WebView

Device API WebKit

HTML/CSS/JS

Hybrid App - Type 2

● Native App plugged Webview○ App의 기본 UI 및 기능은 Native로 구현○ 일부 View를 Webview를 통해서 URL loading○ Native-Webview binding: URL scheme

● 서비스 업체에서 널리 사용○ 기존 legacy Web 정보 연동 용이○ 운영상 view의 layout을 포함한 update가 잦은 GUI 구현○ App-store를 통하지 않은 배포로 빠른 서비스 update 가능○ QA 비용 절감

WebView(n개)

WebKit

HTML/CSS/JS

Native Widget

Type 2 방식

● OK 캐쉬백 모바일 앱● 시럽 월렛 앱● 11번가 앱● 기프티콘 앱● 시럽 오더 앱

Type 1 방식: Syrup Store 앱

● Ionic, Angular, cordova 기반● 안드로이드/iOS (swift) 지원

○ 플랫폼간 앱 코드 재활용률 80% 수준○ iOS는 1명이 개발

● Intel Crosswalk 를 통한 4.1이하 지원

Ionic/Angular 기반 사례 공유

● 성능 profiling 및 최적화 필수○ SVG icon CPU 과도 사용으로 CSS로 변경○ Android L에서 gradient 성능 저하 이슈로 이미지로 대체○ -webkit-filter: blur의 성능 저하로 <canva> 기반 이미지 동적 filtering 대체

○ ng-repeat의 성능 저하로 collection-repeat로 ListView 구현○ QHD 단말에서는 grade B로 downgrade하여 ionic 동작 설정

네이버 효과툰

● HTML5기반 뷰어○ 시각적 효과로 기존 웹툰의 차별화 사례○ HTML5 CSS animation 기반 Viewer

● WebToon Editor○ 작가들과 협업을 통한 진정 필요한 도구의 개발○ AngularJS + Node Webkit

● 플랫폼의 fragmentation 극복은 필수○ http://www.slideshare.net/deview/121-52734801○ http://www.slideshare.net/deview/111-52720751

● 데모○ http://m.comic.naver.com/webtoon/detail.nhn?

titleId=655277&no=25&week=wed&listPage=1

Pure Mobile Web + Webview

● SPA 기반 최적화 기술 적용 없이 전통적인 Mobile Web 방식으로 UI 구현후 Android/iOS 동시 출시

● 사용성 심각한 문제로 지양해야 하는 방식이나 상당수 앱에서 사용중

발전 방향 예측

경쟁 상호 보완

Fragmentation 심화

● WebKit/Blink가 각자의 길○ Blink는 SW Platform 형태로 진화○ WebKit은 Web의 심미적 완성도를 높이는 방향으로 진화

● Chrome/Android L/iOS9 UI Webview 재앙○ Canvas HW 가속 미 지원및 Accelerated Compositing 오류○ OEM버전 안드로이드 적용에 6개월 - 12개월 정도 소요 예상

● Fragmentation 처리가 HTML5 적용시 필수 역량○ 상품화 수준 fragmentation handling을 지원하는 HTML5 App

Framework이라면 solution으로 판매 가능한 시장 창출 될 것

자체 Web RunTime 도입 증가

● 도입시 Fragmentation의 Risk hedging 가능○ node-webkit: HTML5기반 데스크 탑 앱 개발○ crollwalk: HTML5 기반 모바일 앱 개발

● Intel crosswalk 사용시 저비용으로 RunTime 확보 가능○ Intel crosswalk 사용시 개발 비용/유지보수 비용 제거 가능

○ HTML5 eBook, 만화, Media 서비스등을 사업화 하고자 할 경우 Web RunTime 도입을 선택 가능

Web UI Framework 기술 혁신

● 3D 가미를 통한 심미적 개선○ WebGL 단말에서 지원 → 상용화 적용은 2-3년 소요 예상○ CSS 2D/3D 지원 수준 및 성능 상향 평준화○ CSS perspective property 지원 보편화

● WebWorker를 통한 multi-core 활용도 증가○ Box2D와 같은 computation-heavy library와의 결합을 통한 차별화 시도 가속

● Rendering Back-end 다변화○ React Native, React Canvas by Flipboard○ http://engineering.flipboard.com/2015/02/mobile-web/

Web UI Framework 적용 확대

● Mobile Browser의 호환성 급속한 개선○ 롤리팝부터 WebView 개별 upgrade 지원○ Android 버전 업그레이드 및 ICS의 시장 fade out

● Ionic, famous/Angularjs 확산○ Angular 결합을 통한 구조화○ Android, iOS를 수용○ Fragmentation handling을 진정으로 framework 단에서 해결 해줌

■ jQuery Mobile의 시장 퇴출

HTML5 기반 컨텐츠 확산

● Flash 광고의 급속한 대체○ 크롬 브라우져에서 Flash 광고 Block○ http://www.engadget.com/2015/08/28/chrome-will-block-obnoxious-

flash-ads-starting-september-1st/● 애니메이션, eBook등에 HTML5 기반 컨텐츠 도입 확대

○ 네이버 효과툰을 레퍼런스로 적용 확대

Hybrid 앱 보편화 및 앱내 경쟁 촉발

● Hybrid App 형태 개발 보편화○ SW Platform 보다는 서비스를 구현하는 특정 기능으로서 사용 확대

○ 서비스 핵심 가치를 보고 개발, 유지보수, 운영 관점에서 natvie/Web 영역을 정할 것임

○ Web 관련 부분 보안 강화 Solution 개발 및 적용

● 단일 App 내에서 Native/Web 경쟁○ Web 엔진의 근본적인 구조 변화가 수반 되지 않는 이상 PC에서와 같이

Web기반으로의 급격한 변화는 없을 듯

○ WebGL이 보편화되어 기존 DOM기반 architecture를 bypass 가능시 native 수준 달성 가능

JavaScript 언어 영향력 증대

● JavaScript 언어의 시장 영향력 점진적 확대○ HTML5 서비스별 적용 확대, ES6○ node.js 도입을 통한 서버 영역 진출 확대○ node-webkit을 통한 desktop App 진출 가속○ Asm.js등 상용수준 발전에 따른 Browser 기반 게임 확대

JavaScript

PC App/ Node-webkit Mobile Web

Hybrid App서버 Web App/ Node.js

질문