• Like
  • Save
HTML5 기반 Mobile Web App 개발 동향과 사례 및 발전 방향
Upcoming SlideShare
Loading in...5
×
 

HTML5 기반 Mobile Web App 개발 동향과 사례 및 발전 방향

on

  • 888 views

 

Statistics

Views

Total Views
888
Views on SlideShare
794
Embed Views
94

Actions

Likes
8
Downloads
32
Comments
0

5 Embeds 94

http://www.slideee.com 49
http://mangastorytelling.tistory.com 41
https://www.linkedin.com 2
http://www.hanrss.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 기반 Mobile Web App 개발 동향과 사례 및 발전 방향 HTML5 기반 Mobile Web App 개발 동향과 사례 및 발전 방향 Presentation Transcript

    • HTML5 기반 Mobile Web App 개발 동향과 사례 및 발전 방향 임상석 팀장 Web 기술 개발팀 Chief Technology Officer, SK 플래닛
    • Agenda ● 시장 및 기술 현황 분석 ● 개발 사례 분석 ○ HTML5 App UI ○ HTML5 Game ○ Hybrid App ● 발전 방향 예측
    • HTML5 개발/예측 배경 이해 ● L4/L7 Switch /Apache Server (2001-2006) ○ Linux, C, C++ ● Mobile Firefox Browser (2007-2008) ○ Linux, C++ ● WebKit Engine (2008-2011) ○ Linux/Tizen, C++, C ● HTML5 기반 Web App Platform (2011-) ○ Android/iOS, JavaScript, CSS3 ○ 서비스 업체
    • HTML5 기반 상품화 개발 로그 ● ActiveX 제거 ○ OK 캐쉬백 barcode 쿠폰북 ○ canvas, offline 프린터 지원 ● CSS 2D/3D 기반 Web UI ○ Pickat 모바일 Web: 무한 scrolling ○ OK Cashbag 모바일 Web: cubic, flip 효과 ● Canvas 기반 게임 ○ OK 캐쉬백 App용 게임: 겔러그, 캐쉬팡
    • ● 11번가 ● 쇼킹딜 ● OK 캐쉬백 Web Web-centric vs App-centric ● T store ● Hoppin ● T map ● OK 캐쉬백 App Web-centric - PC Web 기반 Legacy를 App으로 확장 - 속도/UX 개선을 위해 Native로 기능 확 장 App-centric - Native App으로 기획/개발 - 효율적인 운영을 위해 Web 추가 Web-Native Hybrid Application - 속도, UX, 운영 효율 3가지를 모두 추구
    • HTML5: 시장 및 기술 현황 분석 ● Hype? Hope? Hopless?
    • HTML5 Hype Cycle 2년 동안 이동
    • Thoughts on Flash (Steve Jobs) ● 6번째 가장 중요한 거부 이유
    • Linkedin 철수 2011년 Linkedin 자료 사용자 체류 시간이 긴 App의 경우 엔진 의 메모리 누수로 불안정하고 이를 profiling할 개발 환경 또한 부재합니다.
    • Native SW Platform의 대체재 ● 개발 언어가 바뀐 “또 다른 플랫폼" ○ Cross platform 하지 않음: Android, iOS, + HTML5 ○ 제대로 된 HTML5/JavaScript 개발자 공급 부족 ● Ecosystem 구축 책임/중심체 부재 ○ Multi-sided platform 활성화는 누군가 비용/책임지고 투자 필요 ● Web OS 상용화/활성화 지연 ○ Tizen, Firefox OS, WebOSTM
    • Fragmentation 심화 ● Google Blink의 WebKit에서 분리 ○ iOS, Android 2.x - 4.x간의 fragmentation 심화 예상 ● Kikat의 Chrome-powered WebView의 재앙 ○ Chrome-powered WebView의 HTML5 호환성이 Chorme Browser 대비 매우 낮음 ○ Canvas HW 가속 미지원으로 Canvas 게임 개발 업체 위기 봉착
    • Hybrid App - Type 1 ● PhoneGap (by Adobe) 방식 ○ 전체 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
    • 서비스 관점 HTML5 활용 장점 ● 서비스 관점에서 진정한 cross-platform ○ 모든 browser, Webview에서 동작 ○ fragmentation handling을 필수 ● 빠른 서비스 개발 및 Update ○ 기획 -> UX/디자인 -> publishing -> 개발 -> QA -> 배포 ○ App store는 통제 불가능
    • App update resistance
    • 교훈 ● 100% native, 100% HTML5는 기술자의 고집 ● 서비스 기획/개발/운영 관점에서 Hybrid App 개발이 현실적인 선택 ● 사람/기술을 통한 Risk-hedging 필수
    • HTML5 개발 현실 성능 및 기능 Fragmentation
    • HTML5는 내 운명 ● 고성능 HTML5 Web UI 개발 ● Canvas 기반 게임 개발
    • famo.us ● CSS3D + 물리 엔진 통합된 Web UI FW 공개 ○ DOM layout 비용 최소화, GPU 사용 극대화 ○ Android는 젤리빈 이상 지원 ○ 3D 및 물리 엔진으로 심미적 차별화: http://codepen.io/befamous/pen/eAlwd ● 고품질 UI의 개발 속도/생산성 최대 장점 ● Facebook HTML5 개발 책임자 합류 ○ Dave Fetterman ● Samsung Ventures 투자중
    • 고성능 HTML5 Web UI 개발(1/2) ● 데모가 아닌 상용화 개발 ○ Android 2.3 이상 (Galaxy S, Galaxy Note 지원 필수) ○ Android 4.0.3 ,4.0.4 Webkit에 GPU Texture Upload 속도 문제 ● 오픈 소스 FW으로는 상용화 수준 개발은 어 려움 ○ jQuery Mobile, Sencha Touch ○ 성능 튜닝은 필수 ● Publishing 영역이 아닌 전통적인 개발 영역 ○ Browser 엔진 성능 특성을 이해한 HTML/CSS/JS 개발
    • 고성능 HTML5 Web UI 개발(2/2) ● Browser 엔진 성능 특성 이해한 개발 필수 ● 성능 관련 Practice 요약 ○ DOM 및 Render Tree의 복잡도 관리 ■ DOM, Render Tree의 생성 및 삭제 원리 이해 ○ CSS 2D/3D 기반 GPU 가속 Rendering 효율적 활용 ■ Animation 단위 === RenderLayer/Graphics Layer 단위 ○ 우선 순위가 높은 연산이 먼저 처리되도록 통제 ■ UI animation을 부드럽게 하기 위해 painting/network loading 미루기 ○ DOM inspector를 활용한 profiling ■ timeline, CPU, heap memory 분석
    • Browser Engine Overview(1/2) ● Browser 엔진 ○ WebKit by Apple ○ Blink by Google http://www.paulirish.com/2013/webkit-for- developers/
    • Browser Engine Overview(2/2) ● Platform porting layer ○ fragmentation 원인 http://www.paulirish.com/2013/webkit-for- developers/
    • 엔진 내부 ● Parsing 하면서 내부 Tree 생성 ○ DOM, Render, RenderLayer, GraphicsLayer(GPU)
    • GPU 가속: No Layout while animating ● HTML, CSS → CPU/GPU 수행 여부 결정
    • Profiling: DOM Inspector async image loading layout 변경 style 변경
    • 핵심 메세지 ● CPU에서 동작하는지 GPU에서 동작하는지 이해할 수 있는 팀/개발자 역량이 필수 ● Reference ○ http://skpla.net/ScCT ○ http://skpla.net/eTYB ○ http://skpla.net/f58t
    • App-embedded Branded Game 사업 Needs - iOS/Android 동시 지원 - No Native App Update - 30만명 ranking Native App Web-HTML5 Canvas
    • Canvas 기반 게임 개발 ● Browser는 게임 Platform이 아님 ○ Rendering → Canvas ■ painting 속도 극복 필수 ○ Audio → WebAudio/<audio> ■ <audio> sound mixing 불가 ■ WebAudio 대부분 미지원 ○ Resource Loader → <img>/XHR ○ Animation → sprite image 관리 ○ Input → Touch ○ 물리 엔진 ○ DPI 별 resource 관리 Cavas 기반 게임 엔진 필 요
    • Mobile용 게임 엔진 자체 개발 ● 기존 오픈소스 게임 엔진의 한계 ○ PC 향 게임에 적합한 기능 및 크기 ○ mobile 특화 기능 미진으로 Android 2.3을 포함한 상용화 수준 달성 힘 듬 ● Mobile 특화 기능 ○ rendering 성능 최적화: 최소 15 fps (android 2.3 이상, iOS 6.0) ○ garbage collection 최소화
    • Canvas 게임 핵심 로직 ● 책장 넘기기 효과 function drawObject(){ ctx.drawImage(obj, 0, 0); } function loop() { clearCanvas(); moveObject(); drawObject() requestAnimationFrame(loop); }
    • Rendering 성능 최적화: 게임 엔진단 ● painting 성능 최적화 ○ DOM/Canvas hybrid ■ 특정 단말에서 배경을 DOM으로 분리하여 GPU 영역으로 mapping ■ 배경과 전경을 GPU로 합성 (Android 2.3, 4.0.3, 4.0.4) ○ canvas clear logic 단말별 적용 ■ fillRect, clearRect, canvas reset ○ dirty area가 있는 경우만 frame rendering ○ draw operation batch 처리 ○ Game UI 용 DOM 복잡도가 canvas rendering 성능 저하 시킴 ■ DOM removal, display:none, visibility:hidden Game UI: 406 element, 1104 DOM node
    • Rendering 성능 최적화: 게임 엔진단 ● Static object pool ○ 모든 객체는 object pool을 통하여 할당하고 재활용 ○ GC 발생 억제 ● 공평한 게임 Play 보장 ○ 30만명 ranking ○ Android 2.3에서 iOS7.0 player에게 공평한 게임성 보장 ○ 시간 기준 frame skip 방식 게임 animation ■ 15 fps 단말과 30 fps 단말에서 동일한 시간 흐름
    • Rendering 성능 최적화: WebKit단 ● Canvas rendering native 방식 가속 ○ DOM과 Canvas를 native 단에서 분리 ■ FastCanvas(phonegap) ■ planet.webview (SK 플래닛 자체 개발) CanvasDOM UI + Canvas DOM Game UI WebKit WebKit Android Canvas 합 성
    • Kikat WebView의 재앙 극복 ● Kikat의 Chrome 기반 WebView Canvas HW 가속 미지원 ○ 30 fps → 10 fps로 성능 저하 ● Kikat Market Share ○ 전세계 OS 점유율: 5% ○ 국내 OK 캐쉬백 App 사용자 기준: 14.7% ● 재앙 극복을 위한 Kikat Webview 특성 분석 ○ painting 영역의 크기에 비례하여 성능이 저하됨
    • Kikat Webview용 성능 개선 ● frame 당 painting 면적 최소화 ○ frame 별 invalidate 영역 추적 ○ invalidate 영역만 painting 이전 frame 결 과 재활용 dirty 영역 추적 및 repaint
    • Kikat Webview용 성능 개선 ● 실험 결과 ○ Nexus 5에서 최대 300% 까지 개선 ○ Chrome 4 Android Browser에서는 모든 경우에 60 fps 근접
    • 교훈 ● Mobile에서 상품화 수준으로 성능 문제를 해 결해주는 공짜 오픈 소스는 아직까지는 없다 ● Canvas 기반 게임 개발 상세 자료 ○ http://skpla.net/kTL1
    • Hybrid App 개발 Practice(1/2) ● WebView내 Page와 Native의 결합도 ○ 1단계 ■ Webview를 통한 외부 URL 단순 loading ■ native와 Web간에 통신이 전무 ○ 2단계 ■ native와 communication channel(scheme callback)을 통한 data communication ■ native 단과 WebView내 페이지 이중 login 등의 문제가 있음 ○ 3단계 ■ native 부분과 WebView내 session 공유를 서버단에서 memcached등을 통해서 수행
    • Hybrid App 개발 Practice(2/2) ● 3단계 결합 예 ○ 서버 기반 session 공유 Native Web App용 API 서버 Web용 API 서버 memcashed memcashed
    • Hybrid App 보안 이슈 ● 2/3단계 밀겹합시 각종 해킹에 대한 보안 이 슈 발생 대비 필요 ○ code 노출이 natvie 대비 쉽고, 변조 용이 ○ app과의 communication channel 및 data validation 필수 ○ proxy등을 통한 변조된 Web page가 native 앱 내에서 동작시키는 경우 에 대한 대비 필요 Native App Proxy 변조된 Web Page (native app call) 원래 Web Page
    • 발전 방향 경쟁 상호 보완
    • HTML5 기반 Business Model 구축 Business Model Generation Canvas 개발자 Service Provider 사용자 통신사업자 제조사 중립적인 SW Platform cross platform 개발 Commericial 오픈 소스 SW SDK 배포 Ecosystem 개발자 커뮤니 티 License Fee 개발비 절감 Consulting Fee 통신사업자 제조사 표준화 단체 HTML5 개발자 SW 개발 및 유지보수 비용 호환성 확보 제품 탑재 No Update / App store free 배포
    • 발전 방향 예측 ● Fragmentation 심화 ○ WebKit/Blink가 각자의 길 ■ Blink는 SW Platform 형태로 진화 ■ WebKit은 Web의 심미적 완성도를 높이는 방향으로 진화 ○ Chrome-powered WebView 재앙 ■ Canvas HW 가속 미 지원및 Accelerated Compositing 오류 ■ OEM버전 안드로이드 적용에 6개월 - 12개월 정도 소요 예상 ○ Fragmentation handling이 HTML5 서비스 적용시 필수 ■ 상품화 수준 fragmentation handling을 지원하는 HTML5 App Framework이라면 solution으로 판매 가능한 시장 창출 될 것
    • 발전 방향 예측 ● 자체 Web RunTime 도입 서비스 증가 ○ Fragmentation의 Risk hedging ○ Chromium, Firefox 오픈 소스를 활용하여 저렴하게 RunTime 확보 가능 ■ 예전 Web RunTime은 Android에서 미지원하던 HW GPU 가속 기능 및 HTML5 기능 구현으로 개발 비용 및 유지보수 비용이 발생 ○ 오픈소스 빌드 후 binary 레벨에서 사이즈 최적화/배포 방식에 한하여 투자 ○ HTML5 eBook, 만화, Media 서비스등을 사업화 하고자 할 경우 Web RunTime 도입을 선택 가능
    • 발전 방향 예측 ● Web UI Framework의 기술 진화 ○ 3D 가미를 통한 심미적 개선 ■ CSS 2D/3D 지원 수준 및 성능 상향 평준화 ■ CSS perspective property 지원 보편화 ○ WebWorker를 통한 multi-core 활용도 증가 ■ Box2D와 같은 computation-heavy library와의 결합을 통한 차별화 시도 가속
    • 발전 방향 예측 ● Hybrid App 형태 개발 보편화 ○ SW Platform 보다는 서비스를 구현하는 특정 기능으로서 사용 확대 ○ 서비스 핵심 가치를 보고 개발, 유지보수, 운영 관점에서 natvie/Web 영 역을 정할 것임 ○ Web 관련 부분 보안 강화 Solution 개발 및 적용 ● 단일 App 내에서 Native/Web 경쟁 ○ Web 엔진의 근본적인 구조 변화가 수반 되지 않는 이상 PC에서와 같이 Web기반으로의 급격한 변화는 없을 듯 ○ WebGL이 보편화되어 기존 DOM기반 architecture를 bypass 가능시
    • 발전 방향 예측 ● TV, Wearable, Camera, 자동차를 통한 신규 디바이스를 통한 SW Platform으로서 진입 ○ 스마트폰으로의 진입은 Android/iOS 대항 가능한 수준의 ecosystem의 부재와 ecosystem 구축 비용을 투자할 만한 회사가 없는 상태 ○ 서로 다른 디바이스간 cross-platform 적용은 쉽지 않을 것 ○ Firefox는 저가폰/개발 도상국 위주로 진입/확산 ○ 전문 HTML5/JavaScript 개발자 수요 증가
    • 발전 방향 예측 ● JavaScript 언어의 시장 영향력 점진적 확대 ○ HTML5 서비스별 적용 확대 ○ node.js 도입을 통한 서버 영역 진출 확대 ○ node-webkit을 통한 desktop App 진출 가속 ○ Asm.js등 상용수준 발전에 따른 Browser 기반 게임 확대 JavaScript PC App/ Node-webkit Mobile Web Hybrid App 서버 Web App/ Node.js
    • 제언 ● 서비스의 핵심 가치 및 개발 조직 구성/역량을 먼저 이해하고 HTML5 활용/개발 전략을 수립