Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 관점에서 본
2015 웹 개발 동향 및 2016 전망:
Mobile 중심으로
임상석 PL
Syrup 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 시대로 전환
○...
HTML5 Hype Cycle: Hype, Hope, Hopeless?
Hybrid Web App
Thoughts on Flash (Steve Jobs)
● 6번째 가장 중요한 거부 이유
Facebook/Linkedin 철수 (2013)
2011년 Linkedin 자료
사용자 체류 시간이 긴 App의 경우 엔진
의 메모리 누수로 불안정하고 이를
profiling할 개발 환경 또한 부재합니다.
크롬 Ins...
Native SW 플랫폼 경쟁적 대체 전략 실패
● 개발 언어가 바뀐 “또 다른 플랫폼"
○ Cross platform 하지 않음: Android, iOS, + HTML5
○ 제대로 된 HTML5/JavaScript 개...
Fragmentation 심화: 2014
● OS버전/OS종류에 따른 fragementation 발생
○ iOS, Android 2.x - 4.x간의 fragmentation 처리 비용 높음
○ Google Blink의...
Fragmentation 심화 계속: 2015
● Android L 단말 Gradient 과도한 CPU 사용
○ CSS Gradient기반 border 생성시 애니메이션 속도 저하
● iOS 9 UI Webview 오류...
Big 3 업체 HTML5 전략 요약
● Apple
○ iOS앱 대체는 지양하고 Mobile Web 중심 기술 혁신 지속
○ UIWebview를 WebKit2 기반 WKView 이전중
● Facebook
○ 2013년 ...
Android의 Chrome OS 흡수 통합(?)
Android의 Chrome OS 흡수 통합(?)
● Android 중심 앱 개발 생태계 통합기반 마련
○ http://www.cnet.com/news/first-android-apps-head-to-chromebook...
HTML5 Framework
쓸만한 Web Framework의 등장 및 확산
● 기존 Web 앱의 문제점 인정하고 극복하는 것을 주 목적
으로 설계한 Framework의 등장 및 확산
● 속도 개선
○ React/React Native
○ Angu...
React by Facebook
● UI 구현용 JavaScript 라이브러리
○ MVC -> View Only
○ BSD 오픈 소스 공개
● 속도 최우선 가치로 염두한 설계 및 개발
○ Virtual DOM의 도입으로...
React 핵심 기술: Virtual DOM
● 가벼운 JavaScript object로 Render tree 구성
○ 무겁고 느린 DOM은 최종 화면 출력에만 쓰임
● 속도 개선 기술
○ Diff algorithm
■...
React를 통한 개발 문화 변화 (Facebook내)
● Web UI programming paradigm shift 추구
○ 이해하기 쉽고, 대규모, 큰 조직에서의 개발시 효율성 극대화
○ Facebook 신규 개발...
React Native
● Web 앱 한계에 대한 명확한 인식: 환상이 아닌 현실
○ Facebook Paper 수준의 UI를 Web으로 구현 불가하다는 인식에서 출
발
● JavaScript로 native app 개발...
AngularJS by Google
Superheroic JavaScript MVW Framework
Ionic HTML5 Framework
● Hybrid 모바일 앱 개발용 Framework
○ AngularJS 기반 UI
○ Cordova 기반 네이티브 통합
● 특징
○ Android/iOS 네이티브와 흡사한 앱 개...
Ionic UI Component
헤더
버튼
리스트
그리드
폼
탭
...
$ionicActionSheet
$ionicBackDrop
slideBox
$ionicPopUp
...
CSS Icon
SVG icon
famo.us
● CSS3D + 물리 엔진 통합된 Web UI FW 공개
○ DOM layout 비용 최소화, GPU 사용 극대화
○ Android는 젤리빈 이상 지원
○ 3D 및 물리 엔진으로 심미적 차별화
● Fac...
ScrollView 성능 문제
famo.us/Angular
● Native UI framework에 상응하는 JS UI framework
○ 진입 장벽 높음
● Angular기반 앱개발을 지원
○ Directive, Services, Provider...
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+지원
○ 크롬 엔진을 사용하지 않는 Androi...
HTML5 Runtime: Intel CrossWalk
https://crosswalk-project.org/
HTML5 Runtime: iOS/Android
● Android Chrome Webview
○ Android 4.4 부터 지원
○ Multi-process architecture
● iOS WKView
○ Multi-...
HTML5 상용화 사례
HTML5 활용 전략 (SK planet 사례)
● HTML5를 SW Platform의 대체제로의 접근 전략
○ 정부 주도로 RunTime의 확보 시도했으나 상업적으로 현재까지는 실패
함
● 같은 전략을 고집하거나 되풀...
서비스 관점 HTML5 활용 장점
● 서비스 관점에서 진정한 cross-platform
○ 모든 browser, Webview에서 동작
○ fragmentation handling을 필수
● 빠른 서비스 개발 및 Upd...
App update 강한 사용자 저항
Hybrid App - Type 1
● PhoneGap/Cordova 방식
○ 전체 UI를 Webview 한장에 Single Page Web 형태 개발
○ Device API를 통한 Device 기능 접근
● Nativ...
Hybrid App - Type 2
● Native App plugged Webview
○ App의 기본 UI 및 기능은 Native로 구현
○ 일부 View를 Webview를 통해서 URL loading
○ Nativ...
Type 2 방식
● OK 캐쉬백 모바일 앱
● 시럽 월렛 앱
● 11번가 앱
● 기프티콘 앱
● 시럽 오더 앱
Type 1 방식: Syrup Store 앱
● Ionic, Angular, cordova 기반
● 안드로이드/iOS (swift) 지원
○ 플랫폼간 앱 코드 재활용률 80% 수준
○ iOS는 1명이 개발
● Intel...
Ionic/Angular 기반 사례 공유
● 성능 profiling 및 최적화 필수
○ SVG icon CPU 과도 사용으로 CSS로 변경
○ Android L에서 gradient 성능 저하 이슈로 이미지로 대체
○ -...
네이버 효과툰
● HTML5기반 뷰어
○ 시각적 효과로 기존 웹툰의 차별화 사례
○ HTML5 CSS animation 기반 Viewer
● WebToon Editor
○ 작가들과 협업을 통한 진정 필요한 도구의 개발
...
Pure Mobile Web + Webview
● SPA 기반 최적화 기술 적용 없이 전통적인 Mobile Web
방식으로 UI 구현후 Android/iOS 동시 출시
● 사용성 심각한 문제로 지양해야 하는 방식이나 상...
발전 방향 예측
경쟁 상호 보완
Fragmentation 심화
● WebKit/Blink가 각자의 길
○ Blink는 SW Platform 형태로 진화
○ WebKit은 Web의 심미적 완성도를 높이는 방향으로 진화
● Chrome/Android L/...
자체 Web RunTime 도입 증가
● 도입시 Fragmentation의 Risk hedging 가능
○ node-webkit: HTML5기반 데스크 탑 앱 개발
○ crollwalk: HTML5 기반 모바일 앱 개발...
Web UI Framework 기술 혁신
● 3D 가미를 통한 심미적 개선
○ WebGL 단말에서 지원 → 상용화 적용은 2-3년 소요 예상
○ CSS 2D/3D 지원 수준 및 성능 상향 평준화
○ CSS perspec...
Web UI Framework 적용 확대
● Mobile Browser의 호환성 급속한 개선
○ 롤리팝부터 WebView 개별 upgrade 지원
○ Android 버전 업그레이드 및 ICS의 시장 fade out
● ...
HTML5 기반 컨텐츠 확산
● Flash 광고의 급속한 대체
○ 크롬 브라우져에서 Flash 광고 Block
○ http://www.engadget.com/2015/08/28/chrome-will-block-obnox...
Hybrid 앱 보편화 및 앱내 경쟁 촉발
● Hybrid App 형태 개발 보편화
○ SW Platform 보다는 서비스를 구현하는 특정 기능으로서 사용 확대
○ 서비스 핵심 가치를 보고 개발, 유지보수, 운영 관점에...
JavaScript 언어 영향력 증대
● JavaScript 언어의 시장 영향력 점진적 확대
○ HTML5 서비스별 적용 확대, ES6
○ node.js 도입을 통한 서버 영역 진출 확대
○ node-webkit을 통한...
질문
Upcoming SlideShare
Loading in …5
×

HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 전망

7,736 views

Published on

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

Published in: Engineering

HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 전망

  1. 1. HTML5 관점에서 본 2015 웹 개발 동향 및 2016 전망: Mobile 중심으로 임상석 PL Syrup Store 개발그룹 SK 플래닛
  2. 2. Agenda ● 2015년 개발 동향 ○ HTML5 시장 환경 회고 ○ 신규 Web Framework 분석 ○ 상용 개발 사례 소개 ● 2016 전망 ○ Web UI, Runtime, Platform 관점
  3. 3. HTML5 시장 회고
  4. 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. 5. HTML5 Hype Cycle: Hype, Hope, Hopeless? Hybrid Web App
  6. 6. Thoughts on Flash (Steve Jobs) ● 6번째 가장 중요한 거부 이유
  7. 7. Facebook/Linkedin 철수 (2013) 2011년 Linkedin 자료 사용자 체류 시간이 긴 App의 경우 엔진 의 메모리 누수로 불안정하고 이를 profiling할 개발 환경 또한 부재합니다. 크롬 Inspector로 메모리, Rendering, JavaScript등 성능 profiling이 가능합니 다.
  8. 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. 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. 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. 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. 12. Android의 Chrome OS 흡수 통합(?)
  13. 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. 14. HTML5 Framework
  15. 15. 쓸만한 Web Framework의 등장 및 확산 ● 기존 Web 앱의 문제점 인정하고 극복하는 것을 주 목적 으로 설계한 Framework의 등장 및 확산 ● 속도 개선 ○ React/React Native ○ Angularjs 기반 Framework ■ Ionic ■ Famo.us ● 재활용성 개선 ○ Polymer (Web Components)
  16. 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. 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. 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. 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. 20. AngularJS by Google Superheroic JavaScript MVW Framework
  21. 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. 22. Ionic UI Component 헤더 버튼 리스트 그리드 폼 탭 ... $ionicActionSheet $ionicBackDrop slideBox $ionicPopUp ... CSS Icon SVG icon
  23. 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. 24. ScrollView 성능 문제
  25. 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. 26. famo.us 데모 ● http://codepen.io/befamous/eAlwd ● http://disrupt.famo.us/periodic402
  27. 27. famo.us BM 전략 선회: 광고 컨텐츠
  28. 28. Polymer ● Web component 기반 UI framework ● UI componentization을 통한 재활용 목적
  29. 29. Polymer 예제 https://www.polymer-project.org/1.0/
  30. 30. Polymer: 호환성 한계 https://www.polymer-project.org/1.0/resources/compatibility.html
  31. 31. HTML5 RunTime
  32. 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. 33. HTML5 Runtime: Intel CrossWalk https://crosswalk-project.org/
  34. 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. 35. HTML5 상용화 사례
  36. 36. HTML5 활용 전략 (SK planet 사례) ● HTML5를 SW Platform의 대체제로의 접근 전략 ○ 정부 주도로 RunTime의 확보 시도했으나 상업적으로 현재까지는 실패 함 ● 같은 전략을 고집하거나 되풀이 하는 것은 미련함 ○ 서비스회사 관점에서 필요 및 현실에 근거한 활용 전략 수립 ● Hybrid App을 통한 상리 공생 전략으로 선회 ○ 서비스 회사 관점에서 순수 native app의 단점을 보완할수 극대화 ■ no app update ■ cross-platform (Android 및 iOS 동시 지원) ● 국내 현실에서 iOS 개발자 확보 및 개발 비용 증가 ■ designer-friendly ■ 기획/디자인/개발 속도
  37. 37. 서비스 관점 HTML5 활용 장점 ● 서비스 관점에서 진정한 cross-platform ○ 모든 browser, Webview에서 동작 ○ fragmentation handling을 필수 ● 빠른 서비스 개발 및 Update ○ 기획 -> UX/디자인 -> publishing -> 개발 -> QA -> 배포 ○ App store는 통제 불가능
  38. 38. App update 강한 사용자 저항
  39. 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. 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. 41. Type 2 방식 ● OK 캐쉬백 모바일 앱 ● 시럽 월렛 앱 ● 11번가 앱 ● 기프티콘 앱 ● 시럽 오더 앱
  42. 42. Type 1 방식: Syrup Store 앱 ● Ionic, Angular, cordova 기반 ● 안드로이드/iOS (swift) 지원 ○ 플랫폼간 앱 코드 재활용률 80% 수준 ○ iOS는 1명이 개발 ● Intel Crosswalk 를 통한 4.1이하 지원
  43. 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. 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. 45. Pure Mobile Web + Webview ● SPA 기반 최적화 기술 적용 없이 전통적인 Mobile Web 방식으로 UI 구현후 Android/iOS 동시 출시 ● 사용성 심각한 문제로 지양해야 하는 방식이나 상당수 앱에서 사용중
  46. 46. 발전 방향 예측 경쟁 상호 보완
  47. 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. 48. 자체 Web RunTime 도입 증가 ● 도입시 Fragmentation의 Risk hedging 가능 ○ node-webkit: HTML5기반 데스크 탑 앱 개발 ○ crollwalk: HTML5 기반 모바일 앱 개발 ● Intel crosswalk 사용시 저비용으로 RunTime 확보 가능 ○ Intel crosswalk 사용시 개발 비용/유지보수 비용 제거 가능 ○ HTML5 eBook, 만화, Media 서비스등을 사업화 하고자 할 경우 Web RunTime 도입을 선택 가능
  49. 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. 50. Web UI Framework 적용 확대 ● Mobile Browser의 호환성 급속한 개선 ○ 롤리팝부터 WebView 개별 upgrade 지원 ○ Android 버전 업그레이드 및 ICS의 시장 fade out ● Ionic, famous/Angularjs 확산 ○ Angular 결합을 통한 구조화 ○ Android, iOS를 수용 ○ Fragmentation handling을 진정으로 framework 단에서 해결 해줌 ■ jQuery Mobile의 시장 퇴출
  51. 51. HTML5 기반 컨텐츠 확산 ● Flash 광고의 급속한 대체 ○ 크롬 브라우져에서 Flash 광고 Block ○ http://www.engadget.com/2015/08/28/chrome-will-block-obnoxious- flash-ads-starting-september-1st/ ● 애니메이션, eBook등에 HTML5 기반 컨텐츠 도입 확대 ○ 네이버 효과툰을 레퍼런스로 적용 확대
  52. 52. Hybrid 앱 보편화 및 앱내 경쟁 촉발 ● Hybrid App 형태 개발 보편화 ○ SW Platform 보다는 서비스를 구현하는 특정 기능으로서 사용 확대 ○ 서비스 핵심 가치를 보고 개발, 유지보수, 운영 관점에서 natvie/Web 영 역을 정할 것임 ○ Web 관련 부분 보안 강화 Solution 개발 및 적용 ● 단일 App 내에서 Native/Web 경쟁 ○ Web 엔진의 근본적인 구조 변화가 수반 되지 않는 이상 PC에서와 같이 Web기반으로의 급격한 변화는 없을 듯 ○ WebGL이 보편화되어 기존 DOM기반 architecture를 bypass 가능시 native 수준 달성 가능
  53. 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. 54. 질문

×