Top Banner
WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1
20

WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Aug 29, 2019

Download

Documents

lamdang
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

WAC 2.0 &

Hybrid Web App

권정혁����������� ������������������  ����������� ������������������  ( @xguru )

1

Page 2: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

HTML5*Web����������� ������������������  Development����������� ������������������  to����������� ������������������  the����������� ������������������  next����������� ������������������  level

*����������� ������������������  웹기술만으로����������� ������������������  네이티브����������� ������������������  애플리케이션����������� ������������������  수준의����������� ������������������  웹����������� ������������������  애플리케이션을����������� ������������������  개발

*����������� ������������������  과거����������� ������������������  HTML����������� ������������������  호환성을����������� ������������������  유지하면서����������� ������������������  실제����������� ������������������  개발����������� ������������������  시����������� ������������������  어려웠던����������� ������������������  문제들을����������� ������������������  해결

HTML CSS JS APIHTML5 ~= + +

2

Page 3: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Mobile Web App needs Device APIs

• WAC (Wholesale Application Community)

• 70개 이상의 통신사/제조사 협의체 : BONDI + JIL ~= Waikiki Beta

• W3C DAP ( Device API )

Web AppDeveloper

WebBrowser

DeviceAPI

Javascript

Hybrid

Camera

Contacts

Calendar

Gallery

Filesystem

Messaging

Tasks

DeviceStatus

Acclerometer

DeviceOrientation

Geolocation

DeviceInteraction

3

Page 4: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

WAC : Wholesale Application Community

• 전세계 70개 이상의 이동통신사+제조사들의 협업

• 모바일 어플리케이션 도매시장

• Web 기술에 기반한 표준개발환경 제공

• 매우 빠른 행보 ( 2010년 2월 MWC 발표 , 2011년 2월 WAC 오픈 )

개발자소비자Application

Store

비용

애플리케이션

4

Page 5: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

WAC 출현 배경

Needs

이동����������� ������������������  통신사,����������� ������������������  개발자,����������� ������������������  소비자의����������� ������������������  필요����������� ������������������  및����������� ������������������  웹����������� ������������������  기술의����������� ������������������  발전이����������� ������������������  기반이����������� ������������������  되어����������� ������������������  WAC����������� ������������������  출범

Feasibility

•이동����������� ������������������  통신사의����������� ������������������  필요✓ ����������� ������������������  사업자����������� ������������������  주도의����������� ������������������  어플리케이션����������� ������������������  ,����������� ������������������  서비스����������� ������������������  플랫폼����������� ������������������  필요

•개발자의����������� ������������������  필요✓ 어플리케이션����������� ������������������  개발을����������� ������������������  통한����������� ������������������  수익을����������� ������������������  원함

✓ 다양한����������� ������������������  플랫폼에����������� ������������������  대응하기����������� ������������������  위한����������� ������������������  방안����������� ������������������  필요

•소비자의����������� ������������������  필요✓ 다양한����������� ������������������  어플리케이션을����������� ������������������  원함

✓ 구매한����������� ������������������  어플리케이션을����������� ������������������  다양한����������� ������������������  기기에서����������� ������������������  사용하고����������� ������������������  

싶음

•웹����������� ������������������  표준����������� ������������������  기술의����������� ������������������  발전✓ W3C����������� ������������������  HTML5,����������� ������������������  CSS3

✓ Javascript����������� ������������������  ,����������� ������������������  W3C����������� ������������������  DAP����������� ������������������  (����������� ������������������  Device����������� ������������������  API����������� ������������������  )

•브라우저����������� ������������������  기술의����������� ������������������  발전✓ Javascript����������� ������������������  Engine����������� ������������������  의����������� ������������������  성능����������� ������������������  향상

✓ Web����������� ������������������  Rendering����������� ������������������  Engine����������� ������������������  의����������� ������������������  표현력

•하드웨어의����������� ������������������  발전✓ 고성능����������� ������������������  CPU����������� ������������������  ,����������� ������������������  GPU

✓ 넉넉한����������� ������������������  메모리

Source : Current / Future of WAC / KWAC - http://www.slideshare.net/gubed/current-and-future-of-wackwac

5

Page 6: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

WAC ScheduleWAC 1.0 WAC 2.0 WAC 3.0

•Basis����������� ������������������  for����������� ������������������  Commecial����������� ������������������  Launch

•HTML4����������� ������������������  Web����������� ������������������  App

•모바일����������� ������������������  디바이스의����������� ������������������  기능����������� ������������������  접근����������� ������������������  

•카메라

•주소록

•Accelormeter����������� ������������������  등

•JIL����������� ������������������  +����������� ������������������  BONDI

•2011년����������� ������������������  2월����������� ������������������  Release

•HTML5����������� ������������������  +����������� ������������������  멀티미디어����������� ������������������  기능

•더욱����������� ������������������  확장된����������� ������������������  디바이스����������� ������������������  기능����������� ������������������  접근����������� ������������������  

•File����������� ������������������  System

•Calendar

•Device����������� ������������������  Orientation����������� ������������������  등

•보안기능����������� ������������������  향상

•2011년����������� ������������������  9월����������� ������������������  예정

•HTML5����������� ������������������  +����������� ������������������  Network����������� ������������������  APIs

•WAC����������� ������������������  2.0����������� ������������������  기반

•주요����������� ������������������  네트웍����������� ������������������  API����������� ������������������  제공����������� ������������������  

•In-App����������� ������������������  Billing

•Identity

•Authentication

6

Page 7: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

WAC 의 문제점•이동통신사����������� ������������������  주도의����������� ������������������  모바일����������� ������������������  앱����������� ������������������  스토어����������� ������������������  ?

•현재����������� ������������������  안드로이드/바다����������� ������������������  플랫폼����������� ������������������  에만����������� ������������������  적용.����������� ������������������  5월부터����������� ������������������  디바이스들����������� ������������������  생산예정����������� ������������������  (갤럭시S2����������� ������������������  등����������� ������������������  )

• iOS����������� ������������������  에서는����������� ������������������  WAC����������� ������������������  규격����������� ������������������  지원을����������� ������������������  할����������� ������������������  이유/예정이����������� ������������������  없음

•개발자들이����������� ������������������  WAC����������� ������������������  용으로����������� ������������������  앱����������� ������������������  을����������� ������������������  개발해야����������� ������������������  한다면����������� ������������������  ?����������� ������������������  iOS����������� ������������������  를����������� ������������������  포기해야함

➠����������� ������������������  현재����������� ������������������  나와있는����������� ������������������  Hybrid����������� ������������������  앱����������� ������������������  방식을����������� ������������������  통해����������� ������������������  이를����������� ������������������  보완����������� ������������������  가능����������� ������������������  (����������� ������������������  iOS����������� ������������������  ,����������� ������������������  Android����������� ������������������  동시지원����������� ������������������  )

Rank Store2009매출

2009점유율

2010매출

2010점유율 Growth

1 Apple App Store $789M 92.8% $1,782M 82.7% 131.9%

2 BlackBerry App World $36M 4.3% $165M 7.7% 380.3%

3 Nokia Ovi Store $13M 1.5% $105M 4.9% 719.4%

4 Google Android Market $11M 1.3% $102M 4.7% 861.5%

Source : IHS Screen Digest 2011.02

7

Page 8: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Native

Web

Hybrid

Vs.

Vs.

8

Page 9: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Native App

•뛰어난����������� ������������������  성능����������� ������������������  /����������� ������������������  게임

•훌륭한����������� ������������������  UX

•디바이스����������� ������������������  모든����������� ������������������  기능����������� ������������������  활용

•수익모델����������� ������������������  (����������� ������������������  판매����������� ������������������  )

•개발이����������� ������������������  어렵다����������� ������������������  /����������� ������������������  비싸다����������� ������������������  

•다양한����������� ������������������  기기����������� ������������������  대응����������� ������������������  어렵다

9

Page 10: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Web App

•웹기술����������� ������������������  :����������� ������������������  HTML5����������� ������������������  ,����������� ������������������  CSS����������� ������������������  ,����������� ������������������  JS����������� ������������������  •서버기반����������� ������������������  빠른����������� ������������������  업데이트•Multi����������� ������������������  Device����������� ������������������  지원

•속도가����������� ������������������  느리다?

•디바이스����������� ������������������  기능����������� ������������������  활용?

•판매����������� ������������������  수익?

10

Page 11: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Hybrid App

Device OSNative App /

Hybrid framework

Web Browser

Web Application css/js/html

Web Server

Web Application

•Native����������� ������������������  +����������� ������������������  Web����������� ������������������  approach•Multi����������� ������������������  Device����������� ������������������  /����������� ������������������  Multi����������� ������������������  Platform•Device����������� ������������������  APIs����������� ������������������  사용가능•Web����������� ������������������  App����������� ������������������  으로는����������� ������������������  불가능한����������� ������������������  기능����������� ������������������  지원•App����������� ������������������  Store����������� ������������������  /����������� ������������������  Market����������� ������������������  에����������� ������������������  판매가능

•성능����������� ������������������  ?

•어떻게����������� ������������������  만드는지����������� ������������������  ?

11

Page 12: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

1 12

DIY with WebView Using Hybrid Framework1

2Hybrid Types

Native App +

Web View

WebHybridNative

WebView connecting toWeb Server

Hybrid Frameworks

Appspresso / Phonegap / Titanium

12

Page 13: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Hybrid DIY• Native + WebView

✓ 주요����������� ������������������  기능은����������� ������������������  Native����������� ������������������  API����������� ������������������  를����������� ������������������  이용하여����������� ������������������  구현,����������� ������������������  서버����������� ������������������  접속����������� ������������������  및����������� ������������������  계속����������� ������������������  변경되어야����������� ������������������  하는����������� ������������������  화면에����������� ������������������  ����������� ������������������  Web����������� ������������������  기술을����������� ������������������  사용

✓ 유지보수가����������� ������������������  쉽고����������� ������������������  ,����������� ������������������  멀티����������� ������������������  플랫폼����������� ������������������  지원����������� ������������������  가능

✓ 웹앱은����������� ������������������  Native����������� ������������������  부분과����������� ������������������  Javascript����������� ������������������  를����������� ������������������  통해����������� ������������������  통신����������� ������������������  가능

Device OSMobile App

WebView

Major/MinorFeature

with

Native API

Web Server

Web App

주 채팅 기능은Native API 로 구현

선물하기 화면에는WebView 를 사용

카카오 톡 ( iPhone & Android )

13

Page 14: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Hybrid Frameworks• Appspresso / Phonegap

★ 웹 어플리케이션을 Native App 으로 Wrapping

★ WebView 와 Native API 간의 통신을 최대한 활용

★ Javascript 확장을 통해 디바이스 접근 기능을 부여 ( Camera, Contact, File System 등 WAC 이나 W3C DAP API )

• Titanium Mobile ★ Use web technologies to build Native app

★ Full Featured Javascript API , Cross Platform

★ Compile web app to real Native app

14

Page 15: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Appspresso• Mobile App Builder by

http://appspresso.com

Hybrid Web App 개발 플랫폼 : iOS , Android 동시 지원

Device API : WAC API ( Waikiki API 2.0 ) 지원

1 클릭으로 아이폰/안드로이드 앱 빌드

확장을 위한 PDK ( Plugin Development Kit ) 제공

• Device API 를 사용한 HTML5 Web App

Touch UI : Sencha , jQueryMobile

Extension APIs : Gallery browsing , Cross Domain Call, Screen capture ..

Powered By

15

Page 16: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Appspresso Write OnceSell Anywhere

Android / iOS App Build with 1-Click

jQueryMobile Jo����������� ������������������  App

Sencha

Sencha

Create����������� ������������������  template����������� ������������������  with����������� ������������������  Sencha����������� ������������������  Touch����������� ������������������  Framework����������� ������������������  

http://sencha.com

Win / Mac support Touch UI Frameworks

WAC 2.0 API

16

Page 17: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Source: AT&T Consumer Survey ( conducted by Burke, Dec 2010 )

Voice Music Movie Game

App

Computer TVTabletSmartphone Game Console

N����������� ������������������  -����������� ������������������  Screen

Book News

절반이상의����������� ������������������  미국인이����������� ������������������  3개����������� ������������������  이상의����������� ������������������  Device����������� ������������������  로����������� ������������������  같은����������� ������������������  컨텐츠를����������� ������������������  보고����������� ������������������  있다

17

Page 18: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Computer TVTabletSmartphone Game Console

Voice Music Movie Game

App Book News

HTML5 based ( Hybrid ) Web App

3 6 5 3 3

18

Page 19: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Future of Hybrid App•(현재로선)����������� ������������������  Web����������� ������������������  app����������� ������������������  은����������� ������������������  Native����������� ������������������  App����������� ������������������  을����������� ������������������  완전히����������� ������������������  대체하지는����������� ������������������  못함

•Hybrid����������� ������������������  app����������� ������������������  이����������� ������������������  Native����������� ������������������  와����������� ������������������  Web����������� ������������������  App����������� ������������������  의����������� ������������������  중간고리가����������� ������������������  될����������� ������������������  수����������� ������������������  있음

•Hybrid����������� ������������������  app����������� ������������������  이����������� ������������������  Web����������� ������������������  App����������� ������������������  의����������� ������������������  도입을����������� ������������������  빠르게����������� ������������������  하는����������� ������������������  효과

•Device����������� ������������������  API����������� ������������������  는����������� ������������������  제조사����������� ������������������  및����������� ������������������  Hybrid����������� ������������������  App����������� ������������������  Framework����������� ������������������  에����������� ������������������  의해����������� ������������������  계속����������� ������������������  발전중

•Hybrid����������� ������������������  App����������� ������������������  Framework����������� ������������������  들이����������� ������������������  점점����������� ������������������  사용하기����������� ������������������  쉬운����������� ������������������  형태로����������� ������������������  발전

•이제����������� ������������������  Native����������� ������������������  App����������� ������������������  개발자들도����������� ������������������  Hybrid����������� ������������������  방식에����������� ������������������  대해서����������� ������������������  알아야����������� ������������������  함����������� ������������������  

•Hybrid����������� ������������������  App은����������� ������������������  Mobile����������� ������������������  만을����������� ������������������  위한����������� ������������������  것이����������� ������������������  아니라����������� ������������������  N-Screen����������� ������������������  을����������� ������������������  위한����������� ������������������  기초작업

19

Page 20: WAC 2.0 & Hybrid Web App - krnet.or.krB1%C7%C1%A4%C7%F5.pdf · * 과거 HTML 호환성을 유지하면서 실제 개발 시 어려웠던 문제들을 해결 HTML5 ~= HTML + CSS +

Thank you !email : guru @ xguru.net twitter : @xguru

20