2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.

1. HTML5 관점에서 본
2015 웹 개발 동향 및 2016 전망:
Mobile 중심으로
임상석 PL
Syrup Store 개발그룹
SK 플래닛

2. Agenda
● 2015년 개발 동향
○ HTML5 시장 환경 회고
○ 신규 Web Framework 분석
○ 상용 개발 사례 소개
● 2016 전망
○ Web UI, Runtime, Platform 관점

3. HTML5 시장 회고

4. 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의 고급 기술 지원

5. HTML5 Hype Cycle: Hype, Hope, Hopeless?
Hybrid Web App

6. Thoughts on Flash (Steve Jobs)
● 6번째 가장 중요한 거부 이유

7. Facebook/Linkedin 철수 (2013)
2011년 Linkedin 자료
사용자 체류 시간이 긴 App의 경우 엔진
의 메모리 누수로 불안정하고 이를
profiling할 개발 환경 또한 부재합니다.
크롬 Inspector로 메모리, Rendering,
JavaScript등 성능 profiling이 가능합니
다.

8. Native SW 플랫폼 경쟁적 대체 전략 실패
● 개발 언어가 바뀐 “또 다른 플랫폼"
○ Cross platform 하지 않음: Android, iOS, + HTML5
○ 제대로 된 HTML5/JavaScript 개발자 공급 부족
● Ecosystem 구축 책임/중심체 부재
○ Multi-sided platform 활성화는 누군가 비용/책임지고 투자/Subsidy 필수
● Native SW 개발 비용 지속 감소
○ 동시 개발, 안드로이드 선출시 후 iOS 개발
● Web OS 상용화/활성화 실패
○ Tizen, Firefox OS, WebOSTM

9. 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 게임 개발 업체 위기 봉착

10. 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간 동작 특성이 다름

11. 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 개발 계속
○ 속도나 호환성 개선을 통한 즉시 적용보다는 먼 미래를 보고 움직이는
듯

12. Android의 Chrome OS 흡수 통합(?)

13. 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로서 앱 확보 어려움 인정

14. HTML5 Framework

15. 쓸만한 Web Framework의 등장 및 확산
● 기존 Web 앱의 문제점 인정하고 극복하는 것을 주 목적
으로 설계한 Framework의 등장 및 확산
● 속도 개선
○ React/React Native
○ Angularjs 기반 Framework
■ Ionic
■ Famo.us
● 재활용성 개선
○ Polymer (Web Components)

16. 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)

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

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

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

20. AngularJS by Google
Superheroic JavaScript MVW Framework

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

22. Ionic UI Component
헤더
버튼
리스트
그리드
폼
탭
...
$ionicActionSheet
$ionicBackDrop
slideBox
$ionicPopUp
...
CSS Icon
SVG icon

23. famo.us
● CSS3D + 물리 엔진 통합된 Web UI FW 공개
○ DOM layout 비용 최소화, GPU 사용 극대화
○ Android는 젤리빈 이상 지원
○ 3D 및 물리 엔진으로 심미적 차별화
● Facebook HTML5 개발 책임자 합류
○ Dave Fetterman
● 3D/Physics 기반 UI 개발시 독보적임
● HTML5의 환상을 계속 추구하였음
○ 성능 한계로 mixed mode까지 옴 (DOM, WebGL)
○ ScrollView 한계에 봉착

24. ScrollView 성능 문제

25. famo.us/Angular
● Native UI framework에 상응하는 JS UI framework
○ 진입 장벽 높음
● Angular기반 앱개발을 지원
○ Directive, Services, Provider 제공
○ http://famo.us/integrations/angular/docs/api/index.html
● Ionic/Angular에 비해 커뮤니티 활성화도가 낮음

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

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

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

29. Polymer 예제
https://www.polymer-project.org/1.0/

30. Polymer: 호환성 한계
https://www.polymer-project.org/1.0/resources/compatibility.html

31. HTML5 RunTime

32. 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 엔진 설치

33. HTML5 Runtime: Intel CrossWalk
https://crosswalk-project.org/

34. HTML5 Runtime: iOS/Android
● Android Chrome Webview
○ Android 4.4 부터 지원
○ Multi-process architecture
● iOS WKView
○ Multi-process 구조로 기존 엔진의 치명적인 약점인 UI rendering 분리
됨
○ Asynchronous API로 기존 UIWebview와 호환성 없음
● Single threaded 엔진 한계 극복 시작

35. HTML5 상용화 사례

36. HTML5 활용 전략 (SK planet 사례)
● HTML5를 SW Platform의 대체제로의 접근 전략
○ 정부 주도로 RunTime의 확보 시도했으나 상업적으로 현재까지는 실패
함
● 같은 전략을 고집하거나 되풀이 하는 것은 미련함
○ 서비스회사 관점에서 필요 및 현실에 근거한 활용 전략 수립
● Hybrid App을 통한 상리 공생 전략으로 선회
○ 서비스 회사 관점에서 순수 native app의 단점을 보완할수
극대화
■ no app update
■ cross-platform (Android 및 iOS 동시 지원)
● 국내 현실에서 iOS 개발자 확보 및 개발 비용 증가
■ designer-friendly
■ 기획/디자인/개발 속도

37. 서비스 관점 HTML5 활용 장점
● 서비스 관점에서 진정한 cross-platform
○ 모든 browser, Webview에서 동작
○ fragmentation handling을 필수
● 빠른 서비스 개발 및 Update
○ 기획 -> UX/디자인 -> publishing -> 개발 -> QA -> 배포
○ App store는 통제 불가능

38. App update 강한 사용자 저항

39. Hybrid App - Type 1
● PhoneGap/Cordova 방식
○ 전체 UI를 Webview 한장에 Single Page Web 형태 개발
○ Device API를 통한 Device 기능 접근
● Native 대비 낮은 성능 및 심미적 완성도
○ 고품질 상용 consumer 용 App 개발시 널리 사용되지 않음
○ 기업 고객용
WebView
Device API WebKit
HTML/CSS/JS

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

41. Type 2 방식
● OK 캐쉬백 모바일 앱
● 시럽 월렛 앱
● 11번가 앱
● 기프티콘 앱
● 시럽 오더 앱

42. Type 1 방식: Syrup Store 앱
● Ionic, Angular, cordova 기반
● 안드로이드/iOS (swift) 지원
○ 플랫폼간 앱 코드 재활용률 80% 수준
○ iOS는 1명이 개발
● Intel Crosswalk 를 통한 4.1이하 지원

43. 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 동작 설정

44. 네이버 효과툰
● 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

45. Pure Mobile Web + Webview
● SPA 기반 최적화 기술 적용 없이 전통적인 Mobile Web
방식으로 UI 구현후 Android/iOS 동시 출시
● 사용성 심각한 문제로 지양해야 하는 방식이나 상당수
앱에서 사용중

46. 발전 방향 예측
경쟁 상호 보완

47. 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으로 판매 가능한 시장 창출 될 것

48. 자체 Web RunTime 도입 증가
● 도입시 Fragmentation의 Risk hedging 가능
○ node-webkit: HTML5기반 데스크 탑 앱 개발
○ crollwalk: HTML5 기반 모바일 앱 개발
● Intel crosswalk 사용시 저비용으로 RunTime 확보 가능
○ Intel crosswalk 사용시 개발 비용/유지보수 비용 제거 가능
○ HTML5 eBook, 만화, Media 서비스등을 사업화 하고자 할 경우 Web
RunTime 도입을 선택 가능

49. 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/

50. Web UI Framework 적용 확대
● Mobile Browser의 호환성 급속한 개선
○ 롤리팝부터 WebView 개별 upgrade 지원
○ Android 버전 업그레이드 및 ICS의 시장 fade out
● Ionic, famous/Angularjs 확산
○ Angular 결합을 통한 구조화
○ Android, iOS를 수용
○ Fragmentation handling을 진정으로 framework 단에서 해결 해줌
■ jQuery Mobile의 시장 퇴출

51. HTML5 기반 컨텐츠 확산
● Flash 광고의 급속한 대체
○ 크롬 브라우져에서 Flash 광고 Block
○ http://www.engadget.com/2015/08/28/chrome-will-block-obnoxious-
flash-ads-starting-september-1st/
● 애니메이션, eBook등에 HTML5 기반 컨텐츠 도입 확대
○ 네이버 효과툰을 레퍼런스로 적용 확대

52. Hybrid 앱 보편화 및 앱내 경쟁 촉발
● Hybrid App 형태 개발 보편화
○ SW Platform 보다는 서비스를 구현하는 특정 기능으로서 사용 확대
○ 서비스 핵심 가치를 보고 개발, 유지보수, 운영 관점에서 natvie/Web 영
역을 정할 것임
○ Web 관련 부분 보안 강화 Solution 개발 및 적용
● 단일 App 내에서 Native/Web 경쟁
○ Web 엔진의 근본적인 구조 변화가 수반 되지 않는 이상 PC에서와 같이
Web기반으로의 급격한 변화는 없을 듯
○ WebGL이 보편화되어 기존 DOM기반 architecture를 bypass 가능시
native 수준 달성 가능

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

54. 질문