Mobile App, Mobile Web : Introduction

모바일 앱, 모바일 웹 소개

Jonghong JeonETRI, SRC

Email: [email protected] Blog: http://mobile2.tistory.com

http://twitter.com/hollobit

http://www.etri.re.kr

4

스마트폰이 가져온 생활 속 변화들

5

앱 생태계의 성장

6

앱 생태계 성장의 배경 - 스마트 모바일 시대

Source: ARG, 2012

7

앱 생태계 성장의 배경 - 스마트 모바일 시대

Source: http://slidesha.re/yMfSyy

8

앱 생태계 성장의 배경 - 스마트 모바일 시대

1. World Wide Web의 역사

2011.8.6

11

Growth of Web Sites

Total Sites Across All DomainsAugust 1995 - November 2011

http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091

525,998,433 sites

12

20 Presents the WWW has given us

q Vast amounts of digital information

q Organized access.q Communication.q Multimedia sharingq Entertainment.q E-commerce.q Real-time news.

13

Online Activities, 2000 ~ 2009

http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx

14

World Wide Web (1989~1991)

15

WAP 1.0 WAP 1.1 WAP 2.0WAP 1.2

XML

XML-RPC

HTTP 1.0(IETF RFC1945)

SOAP 1.2

Semantic WebConcept

RDFOWL

MobileRFID

MWI

UWS

2005

URI

HTTP 1.1(RFC2616)

Before W3C Wirelss Internet WS, SW

World Wide Web (1991 ~ 2005)

16

History of WWW-KR WorkshopWWW-Forum은 1994년 7월초에 만들어진 WWW 관련 메일링 리스트입니다. 현재 가입 인원은 약 250여명으로 지난 10여개월 동안 국내 WWW의발전 및 보급에 많은 노력을 기울인 메일링 리스트입니다. WWW-Forum 에서 주로 다루는 내용은 Web server의 설치, Client의 설치 및 사용, 각종Web site 의 소개등 WWW에 관련된 전반적인 것을 다루고 있습니다. (제1회 워크샵 안내문)

등록비 : 학생 : 5,000원 , 일반 : 10,000 원

17

History of WWW-KR Workshop

18

Evolution of World Wide Web

19

Evolution of World Wide Web

http://evolutionofweb.appspot.com/

20

Evolution of World Wide Web

q 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP§ HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다

나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계

q 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹§ XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아

니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는단계

q 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장§ 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이

끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련

q 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대§ 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web

API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계

2. 웹 기술의 확산 – 왜 웹인가 ?

22

Changes (스마트 디바이스 급성장)

Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/

23

Changes (무선네트워크 진화)

아날로그폰

아날로그음성통화

디지털폰

디지털음성통화

피처폰/스마트폰

IP 기반데이터서비스 시작

고성능 스마트폰

All IP 기반데이터서비스 확산

가상 스마트 기기

All IP 기반초고속 데이터서비스

아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ??

음성 통신 서비스의 시대 데이터 통신 서비스의 시대

24

Emerging N-Screen environment

q N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를통해 이용할 수 있도록 하는 서비스q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세

가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경

q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수(Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되는 여러 대의 단말기 장치를 의미

25

Media

26

Media & Screen

27

Media Convergence

28

Screen Convergence

29

Fragmentation is a big problem

q Network Fragmentationq Service Fragmentationq Device Fragmentationq Platform Fragmentationq Screen Fragmentationq Application Fragmentationq Content Fragmentation

http://is.gd/yXvTj7

30

Fragmentation is a big problem

Fragmentations

Device

Screen

Platform

Service

Application

Content

31

Solution ?

Fragmentations

Device

Screen

Platform

Service

Application

Content

3. 웹 플랫폼 기술로의 진화

33

Open Internet, Open WebSource: http://bit.ly/4OgbGV

인터넷은 수백만의 사심 없는 친절, 호기심과 신뢰로 구성Jonathan Zittrain

http://www.isoc.org/graphics/photos/newsweek.jpg

34

TED: 임의적 친절 행위로서의 웹

인터넷의 기반은 개방, 참여, 신뢰, 협력

35

Evolution of Web Ecosystem

q Web of Documentsq Web of Servicesq Web of Devicesq Web of Dataq Web of Thingsq Web of Human

36

Evolution of Web Platform

Search

Cloud

OfficeImageSharing

VideoSharing

ShoppingCommerce Book

Map News Payment

Mail

Ads SNS

OpenAPI

OpenAPI

37

Online Activities, 2000 ~ 2009

http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx

38

Growth of Open API

39

API Billionaires Club, 2011 edition

5 billion API calls / day (April 2010)

1.6 billion API-delivered stories / month (October 2010)

5 billion API calls / day (October 2009)

8 billion API calls / month (Q3 2009)

3 billion API calls / month (March 2009)

13 billion API calls / day (May 2011)

Over 260 billion objects stored in S3 (January 2011)

10 billion API calls / month (January 2011)

40

Putting everything together

q Your Mashup = API calls + Data Manipulation + UI

User Request

User

Mashup website

Website 1 Website 2

API Call Data

Data presentation

API Call Data

Data Manipulation

41

Open API의 힘

42

Web Platform Layer

User Interaction

Presentation

Transport

Resources

JavaScript + Web APIs

HTML 5 & CSS 3

HTTP

Web Resource URIs(Service, Content, Site)

App Vs. WebNative Application m.xxx.com

4. 모바일 응용 기술: 앱과 웹의 경쟁

44

Web의 역사는 도전의 역사

1990년대: Web vs. C/S 2010년대: Web vs. App

45

과거로 돌아가보자 !!

q1996년§ 대부분 Web 기반의 Application으로 변할 것이다.

q2006년§ Web 기반이 아닌 로컬 전용 기업용 Application을 만들자 !!

46

1990년대 : 유선 웹과 C/S

47

2010년대 : 모바일에서의 앱과 웹

48

Why App ?

49

Why Web ?

50

App vs. WebNative App

특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드및 설치가 되어야 함

HTML5 Web Application브라우저를 통해 접속하며, 설치와 업데이트 불필요

Portability각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Palm and the list goes on…)

표준 웹만 개발하면 어디서나 볼 수 있음

Hyper Links외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크는 불가능하고, 앱 간 호출은 보안 제약이 있음

어떤 부분이건 링크로 연결 가능

Discoverability 앱스토어 홍보와 마케팅을 위한 비용이 필요검색 사이트, 이메일 홍보, 트위터 링크 등으로홍보 가능

Distribution & Market Size

플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는것과 하위 내용과 차별화 됨

누구든 접속 가능

Usage of Device Capabilities

단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, address book, calendar, etc.)

현재는 불가능 (HTML와 Device API 표준화를통해 2011년부터 가능할 것으로 전망)

Supportability & Upgradeability

앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가있는 부분에 대해서는 다시 등록하고 모두에게 재다운로드 받으라고 해야 함

사이트를 수정하면 언제든 바로 업데이트

Entry Costs앱스토어 개발자 등록 비용이 필요 (Apple charges developers $99 and enterprises $299, RIM charges $200 )

없음

Revenue Share앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RIM takes 20%)

모두 내꺼

User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨

Performance 바이너리 코드로 실행되므로 속도가 빠름네트웍을 거치며, 서버에서 제공되고, 브라우저를 통해 처리되기에 성능 변동폭이 큼

Offline Browsing 로컬 저장소를 이용해 가능HTML5의 App Cache 기능을 이용해 구현해야지만 가능

51

Why Mobile Web [1] – Accessibility

q 다양한 모바일 단말에서 사용할 수 있는가 ?

52

Why Mobile Web [2] – Easy use

53

Why Mobile Web [3] – Easy develop

q 만약 @@@ 앱을 만든다면 ?

§아이폰용으로 개발 (Object-C)§안드로이드용으로 개발 (Java)§ 윈도우 모바일용으로 개발 (C#)§ 삼성 바다용으로 개발 (C)§ 블랙베리용으로 개발 (Java)§ 팜용으로 개발 (HTML, CSS, JavaScript) § ….

54

Why Mobile Web [4] – no installation

q No installation & Always update

55

Why Mobile Web [5] – Open API & Mashup

56

Why Mobile Web [6] – Platform Independent

57

Why Mobile Web [7] – no screening

58

Why Mobile Web [8] – Always Evolving

5. HTML5와 미래 응용 기술

60

HTML5

61

HTML5 ?

q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케이션을 위한 JavaScript API 확장을 포함한 것

통칭되는 “HTML5”

HTML5콘텐츠 내용과 형식을 표현

CSS3콘텐츠 표현 방법을 정의

JavaScript각종 API를 통해

기능을 표현

문서 구조의 의미를 명확히 하여디자인과 프로그램의 독립성을 확보

서로 다른 다양한 브라우저 상에서일관된 표현 기능 제공, 효과적이고 편

리한 표현 방식의 변경

풍부한 기능과 자원을 제어할 수있는 로컬 어플리케이션

§ 문서구조의 상세화§ 멀티미디어§ 폼과 이벤트 등

§ 문서구조의 상세화§ 멀티미디어§ 폼과 이벤트 등

§ 표현 기능 모듈화§ 웹 폰트§ 표현 기능 모듈화§ 웹 폰트

§ Web Storage§ Web Worker§ Web Socket§ Geolocation API

§ Web Storage§ Web Worker§ Web Socket§ Geolocation API

62

HTML5 ?

63

HTML5의 주요 특징

64

HTML5: Web Development to the next level

http://slides.html5rocks.com/

65

HTML5 표준화

66

W3C HTML5 Roadmap

67

HTML5 규격표준화경과

CSS1CSS1JavascriptJavascript

CSS2CSS2 CSS3CSS3

DOM1DOM1 DOM2DOM2 DOM3DOM3 DOM4DOM4

2010 2011

AJAXAJAXHTTPHTTP

CanavsCanavs Web WorkersWeb Workers AppCacheAppCache

W3C

Web App.

표준들

W3C

Web App.

표준들

XHR2XHR2

WebGLWebGLGeolocationGeolocation FileAPIFileAPI

WebFontWebFontAudio/VideoAudio/Video

Web formWeb form

q HTML5는 2007년 웹 어플리케이션 활성화와 함께 본격화

68

HTML과Web API 기술표준화현황총괄

q HTML5와 Web API 기술은 최근 표준화가 활발하게 진행 중

69

HTML5 표준화세부현황(W3C HTML WG)

q HTML5 표준화는 2014년 최종 표준 제정을 목표로 작업 중§ HTML WG에서는 2012년도 중반(늦어도 후반)까지는 후보 표준안

(Candidate Recommendation) 단계를 목표

Specification FPWD WD LCWD CR PR REC1 HTML5 2007 2010 2011.05 2012 Q2 2014 Q1 2014 Q22 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q23 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q24 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2

5Polyglot Markup: HTML-CompatibleXHTML Documents

2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2

6HTML5: Techniques for providinguseful text alternatives

2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2

7HTML to Platform Accessibility APIsImplementation Guide

2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2

8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q29 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q210 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2

FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: RecommendationFPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation

70

W3C Web Application API 표준화세부현황

Name of Specification Last Publication ED FPWD WD LCWD CR PR REC

Clipboard APIs and Events 2012-02-23Cross-Origin Resource Sharing (CORS) 2010-07-27DOM Level 3 Events 2011-05-31DOM4 2012-01-05Element Traversal 2008-12-22File API 2011-10-20File API: Directories and System 2011-04-19File API: Writer 2011-04-19From-Origin Header 2011-07-21HTML5 Web Messaging 2012-03-03Indexed Database API 2011-12-06Java bindings for Web IDL 2012-02-07Progress Events 2011-09-22Selectors API 2009-12-22Selectors API Level 2 2010-01-19Server-Sent Events 2011-10-20Shadow DOM

Uniform Messaging Policy (UMP) 2010-01-26Web IDL 2012-02-07Web Sockets API 2011-12-08Web Storage 2011-12-08Web Workers 2012-03-13XBL2 Primer 2007-07-18XBL2 Spec 2007-03-16XmlHttpRequest (Level 2) 2012-01-17

FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: RecommendationFPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation

q 최근에는 다양한 Web Application API 표준화가 활발히 시작 중

6. Why HTML5 is important ?(HTML5 Demo)

72

Case : Video

q http://www.justafriend.ie/

73

Case : Canvas, SVG, Game

q Twinkle Pop

http://game.wren.kr/each/tp/

74

Case : MMOPRG- Canvas, Websocket,

q http://browserquest.mozilla.org/

75

Case : Canvas, Audio, Websocket

q http://www.multiplayerpiano.com/

76

Case : Audio

q http://daftpunk.themaninblue.com/

77

Case: SVG

q http://slaveryfootprint.org/

78

Case : Canvas + WebGLhttp://www.myrobotnation.com/

79

Case : WebGL + LocalStorage

q http://chrome.angrybirds.com/

80

Case : SVG + WebGL

q http://www.cuttherope.ie/

81

Case : Offline & N-Screen

https://read.amazon.com

82

Case : Hybrid Web

q http://www.wunderlist.com/

83

Case : Web OS & UI

84

모바일 HTML5의 가능성

1. 새로운 웹 환경 : 새로운 모바일 웹, 유무선 통합2. Multi-Screen, Multi-Device, Multi-Platform의 해결사3. HTML5 Apps : HTML5 앱의 성장4. 애플/구글 지배로부터의 탈출구5. UI/UX 부분의 보완6. Rich Web : 보다 다양한 기능 제공, 주요 웹서비스 활용7. 광고 : 마이크로사이트, 상호작용형 HTML5 광고 시장8. 위치기반서비스 : 위치 기반 서비스9. 성능 향상 : 빠르고 뛰어난 웹 서비스 제공10.UI 개선 : 보다 편리한 UI 제공11.Hybrid App : 앱과 통합되는 환경12.기타 새로운 기회들

85

N-Screen의 종결자, HTML5과 차세대 웹문제 해결책

다중 플랫폼을 지원하는 응용 개발 Web Application

단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application

다중 단말의 식별과 지원 HTTP UAProf, CSS MQ

다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5

그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3D

Video 및 Audio 콘텐츠 처리 HTML5 video/Audio

Interactive한 처리 JavaScript, CSS, HTML5 webforms

멀티 터치 등의 지원 HTML5 & Web event

오프라인 기능의 지원 HTML5 (localstorage)

디바이스 제어 Device APIs

콘텐츠 표준 호환성 검사 HTML/CSS Validation, mobileOK

비동기적 처리, 쓰레드 관리, 전송 속도 개선 XHR, WebWorker, WebSocket

보다 고속처리 가능하며 판매용 앱이 필요하다면 ? Hybrid Web App

융합 서비스 지원 RESTful Web Services, LOD

86

2012년은 HTML5 활성화의 원년!!

2010 2011 2012 2013

MobileWeb

GoldenAge

MobileWeb

GoldenAge

LTE

Smart devices

HTML5Apps

표준화 완료

전국 서비스

다양화

[email protected]

87

2012, 모바일 웹과 HTML5 전망

1. Mobile First2. Responsive Web & Responsive Ads3. Social + Local + Cloud + Mobile + Web 4. Web UI Framework5. Cross Platform & Hybrid Web Application 6. JavaScript Library & Web Application API Standards7. HTML5 Game & Mobile HTML5 Game 8. Web Store & Native Web App 9. HTML5 ebook & HTML5 services 10.Web Operating System & RESTful WoT(Web of Things)

7. 모바일 응용의 미래

89

스마트 기기의 미래 ?

q

90

스마트 기기의 미래 ?

91

스마트 기기의 새로운 가능성들

92

스마트 기기의 새로운 가능성들

93

중장기 - 모바일의 미래?

8. 대응 전략

95

HTML5 어떻게 공부하나요 ?

qHTML5 스펙 너무 어려워요! 게다가 모두 영어!§ 한글 HTML5 번역본 è http://j.mp/html5ko (clearboth.org)

q그래도 내용이 너무 많아요§ 웹 개발자를 위한 최소 스펙 è http://j.mp/html5devel

q디자이너/기획자도 알아야 하나요 ? § 많은 문서/책자들 è HTML5: Edition for Web Authors, …

q알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?§ Google의 선물 è http://www.html5rocks.com

q그 외에 꼭 추천해주실만한 것은 ?§ 실전 HTML5 가이드 (한글 PDF) è http://j.mp/html5guide_ko§ 기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들

참고: http://xguru.net/635

96

JavaScript 전성 시대

q JavaScript Libraries è http://bit.ly/tVFW6Y§ Application Frameworks, Server Side Library, Testing Frameworks§ Game Engines, Animation Library, Image manipulation

• Akihabara, IMPACT, enchant.js, Unity3D

q Server-side JavaScript § Node.js : Evented Server-Side Javascript è http://nodejs.org

• Google Chrome의 Javascript Engine V8을 단독으로 사용• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous • Thread 방식에 비해 뛰어난 성능• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈

q Javascript로 컴파일 되는 언어들 è http://j.mp/hp2pnR§ CoffeeScript & Kaffeine : Javascript를 더 간결하게§ J2js è Java ByteCode to JS, Script# è C# to JS

97

서적들 - 모바일 HTML5 Web App 관련

98

서적들 - 디자이너/기획자를 위한 HTML5

99

서적 - 웹 UI/UX 디자인 관련

100

학생들을 위한 조언

q 학습 : 기본에 충실하고 공부하라§ 웹 표준의 숙지와 연습 : HTML5, CSS, Javascript§ CSS 표준 기반의 웹 (응용) 디자인§ Mobile UI Framework 및 자바 스크립트 스킬 향상

q 도전과 노력 : 직접 개발해보고 시도하라§ Hybrid Web App 고려§ Mobile Cloud 고려§ 크로스플랫폼 및 멀티 스크린 지원 방법

q 함께 활동하라§ 오픈 소스 커뮤니티 활동§ HTML5 응용 모범 사례들의 도출과 공유§ 국내외 시장분석과 글로벌 도전

q 지금 당장 시작하라~

101

Thank youFor more discussion :

JongHong Jeon ([email protected])+82-42-860-5333

Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit

OR