Microsoft PowerPoint KWISA-r4

Size: px

Start display at page:

Download "Microsoft PowerPoint - 20111208-KWISA-r4"

준호 미
7 years ago
Views:

차세대 웹 플랫폼과 HTML5 동향 Jonghong Jeon ETRI, SRC Email: hollobit@etri.re.

1 차세대 웹 플랫폼과 HTML5 동향 Jonghong Jeon ETRI, SRC Blog:

Growth of Web Sites Total Sites Across All Domains August 1995 - November 2011 525,998,433

3 Growth of Web Sites Total Sites Across All Domains August November ,998,433 sites 3

4 20 Presents the WWW has given us q Vast amounts of digital information q Organized access. q Communication. q Multimedia sharing q Entertainment. q E-commerce. q Real-time news. 4

5 Online Activities, 2000 ~

6 World Wide Web (1989~1991) 6

7 World Wide Web (1991 ~ 2005) Before W3C Wirelss Internet WS, SW UWS MWI Mobile RFID WAP 1.0 WAP 1.1 WAP 1.2 WAP URI XML-RPC HTTP 1.0 (IETF RFC1945) HTTP 1.1 (RFC2616) RDF OWL XML SOAP 1.2 Semantic Web Concept 7

1 WAP 1.2 WAP 2.0 2005 URI XML-RPC HTTP 1.

8 Evolution of World Wide Web 8

9 Evolution of World Wide Web 9

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

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

12 Emerging N-Screen environment q N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를 통해 이용할 수 있도록 하는 서비스 q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세 가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경 q N스크린에서 N 은 어떤 수도 들어갈 수 있는 불특정 자연수 (Natural Number)를 가리키며 스크린 은 이를 네트워크로 연결되 는 여러 대의 단말기 장치를 의미 12

통합성(integration)이라는 세 가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경 q N스크린에서 N 은 어떤 수도

13 Fragmentation is a big problem q Network Fragmentation q Service Fragmentation q Device Fragmentation q Platform Fragmentation q Screen Fragmentation q Application Fragmentation q Content Fragmentation 13

Platform Fragmentation q Screen Fragmentation q

14 Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service 14

15 Solution? Device Content Screen Fragmentations Application Platform Service 15

16 Evolution of Web Platform Technology

17 Evolution of Web Ecosystem q Web of Documents q Web of Services q Web of Devices q Web of Data q Web of Things q Web of Human 17

18 Evolution of Web Platform Open API Search Mail Office Image Sharing Video Sharing Shopping Commerce Book Map News Payment Cloud Ads SNS 18

19 Online Activities, 2000 ~

20 Growth of Open API 20

21 API Billionaires Club, 2011 edition 13 billion API calls / day (May 2011) 10 billion API calls / month (January 2011) Over 260 billion objects stored in S3 (January 2011) 1.6 billion API-delivered stories / month (October 2010) 5 billion API calls / day (April 2010) 5 billion API calls / day (October 2009) 8 billion API calls / month (Q3 2009) 3 billion API calls / month (March 2009) 21

22 Web Oriented Architecture 22

23 Web Platform Layer User Interaction JavaScript + Web APIs Presentation HTML 5 & CSS 3 Transport HTTP Resources Web Resource URIs (Service, Content, Site) 23

24 Next Generation Web - HTML5

25 HTML5 25

26 Hype Cycle for Web and User Interaction Technologies,

27 주목해야 할 10가지 모바일 기술 (2012~) 27

28 HTML5? q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케 이션을 위한 JavaScript API 확장을 포함한 것 통칭되는 HTML5 HTML5 콘텐츠 내용과 형식을 표현 문서구조의 상세화 멀티미디어 폼과 이벤트 등 CSS3 콘텐츠 표현 방법을 정의 표현 기능 모듈화 웹 폰트 JavaScript 각종 API를 통해 기능을 표현 Web Storage Web Worker Web Socket Geolocation API 문서 구조의 의미를 명확히 하여 디자인과 프로그램의 독립성을 확보 서로 다른 다양한 브라우저 상에서 일관된 표현 기능 제공, 효과적이고 편 리한 표현 방식의 변경 풍부한 기능과 자원을 제어할 수 있는 로컬 어플리케이션 28

29 HTML5? 29

30 HTML5의 주요 특징 30

31 HTML5: Web Development to the next level 31

32 HTML5 표준화 32

33 W3C HTML5 Roadmap 33

34 HTML5 Roadmap q Progress: Last Call milestone reached 25 May Published Last Call Working Draft of the HTML5 spec. 03 August Ended Last Call (LC1) comment round for HTML5 spec. q Five other LCWDs published in May Polyglot Markup: HTML-Compatible XHTML Documents (Eliot Graff) Techniques for providing useful text alternatives (Steven Faulkner) HTML Canvas 2D Context (Ian Hickson) HTML+RDFa (Manu Sporny) HTML Microdata (Ian Hickson) 34

35 HTML WG Update q Non-LC deliverables published in May The HTML WG also maintains the following three non-normative documents, and published updates of them in May along with the LCWDs. HTML to Platform Accessibility APIs Implementation Guide(Steven Faulkner) HTML5 differences from HTML4 (Anne van Kesteren, Simon Pieters) HTML Markup Language Reference (Michael[tm] Smith) q HTML5: Edition for Web Authors FPWD In August, the HTML WG also published a First Public Working draft of the document HTML5: Edition for Web Authors. auto-generated subset of the full HTML5 specification not for user-agent implementors (omits UA implementation details) targeted toward Web authors and Web developers 35

36 HTML WG Update q Last Call numbers: Bugs/Comments Last Call comments. For this Last Call round (LC1), the group received* about 1550 comments on the HTML5 spec (spec bugs ) More that 80% of comments already resolved. Of those ~1550 HTML5 Last-Call spec bugs, more than 80% (almost 1300) have already received a resolution from the HTML5 spec editor (Ian Hickson). Less than 20% (about 280) of the Last Call spec bugs/comments for the HTML5 spec are still awaiting resolution by the editor q Post-LC1 numbers: Bugs/Comments So far since the close of the LC1 round, the group has received almost 300 bugs/comments on the HTML5 spec Of those ~300 HTML5 spec bugs, more than 80% (around 250) have already received a resolution from the HTML5 spec editor (Ian Hickson). Less than 20% (about 50) of the remaining post-lc1 bugs/comments for the HTML5 spec are still awaiting resolution by the editor. 36

37 HTML5 Roadmap q 13 open issues. WG now has 13 open issues awaiting resolution by chairs. q 11 closed issues flagged as awaiting new information. (10 against the HTML5 spec, one against the HTML+RDFa spec). q 9 open formal objections. (4 for the HTML5 spec, 5 for other specs; relate to text alternatives, RDFa, polyglot spec, ARIA, video poster, more). 37

38 Deadlines for moving beyond LC1 q The chairs announced a timeline for moving beyond LC1. 31 Dec Editors must have all LC1 bugs resolved. 14 Jan WG members last chance* to escalate any resolved bugs to issues. 11 Feb WG members last chance* submit change proposals for open issues. 10 Mar WG members last chance* to submit counter-proposals for issues. 07 Apr Chairs must have all issues resolved (must have all decisions made). 21 Apr Chairs announce resolution to go to the next step. q The HTML WG is scheduled to publish a Candidate Recommendation of the HTML5 spec in mid- to late

39 Why HTML5 is important?

40 [1] Multi Device support 40

41 [1] Multi Device & platform support 41

42 [1] Multi Screen & resolution support 42

43 [1] Multi Device & Screen Supprt 43

44 [2] Platform Fragmentation 44

45 [2] Platform Fragmentation 45

46 [2] Platform Fragmentation Portability Hyper Links Discoverability Distribution & Market Siz e Usage of Device Capabiliti es Supportability & Upgrade ability Entry Costs Revenue Share 46 Native App 특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 및 설치가 되어야 함 각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Pal m and the list goes on ) 외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크 는 불가능하고, 앱 간 호출은 보안 제약이 있음 앱스토어 홍보와 마케팅을 위한 비용이 필요 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는 것과 하위 내용과 차별화 됨 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, a ddress book, calendar, etc.) 앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가 있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 드 받으라고 해야 함 앱스토어 개발자 등록 비용이 필요 (Apple charges develo pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RI M takes 20%) HTML5 Web Application 브라우저를 통해 접속하며, 설치와 업데이트 불필요 표준 웹만 개발하면 어디서나 볼 수 있음 어떤 부분이건 링크로 연결 가능 검색 사이트, 이메일 홍보, 트위터 링크 등으로 홍보 가능 누구든 접속 가능 현재는 불가능 (HTML와 Device API 표준화를 통해 2011년부터 가능할 것으로 전망) 사이트를 수정하면 언제든 바로 업데이트 없음 모두 내꺼 User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨 Performance Offline Browsing 바이너리 코드로 실행되므로 속도가 빠름 로컬 저장소를 이용해 가능 네트웍을 거치며, 서버에서 제공되고, 브라우저 를 통해 처리되기에 성능 변동폭이 큼 HTML5의 App Cache 기능을 이용해 구현해야 지만 가능

47 47

48 [3] Rich Web Application q <video>, <audio> Flash 기반 사이트의 전환 YouTube, Vimeo, Scribd q 왜 HTML5인가? Search Friendly 호환성 (유무선 ) 접근성 성능

49 [3] Rich Web Application q ActiveX의 대체 Flash 기반 사이트의 전환 Video/Audio (multi) File Upload Graphics Canvas, 3D transition, SVG, WebGL, X3D 49

50 [4] Standards HTML5 CSS3 JS 50

51 [4] Standards - HTML5 지원 현황 q DeskTop q Mobile 51 Source:

52 [4] Standards - HTML5 지원 현황 52 Source:

53 [4] Standards - HTML5 지원 현황 53

54 [4] Evolution of Web Application Tech. HTML5 New Standards Web App. API Device API Widget Hybrid Web New Platform & Browser Real time Web & Social Web Web Application Store Web Cloud Mobile Device & Platform War 54

55 [4] Web Application Architecture HTML5 (Web forms, Video/Audio, Canvas..) Web Application APIs (Web IDL, Web Socket, Web Worker, Web Database.) XML XMLHTTPRequest Widgets API Device APIs CSS (Calendar, Camera GPS, File,..) ECMASCript DOM HTTP + URI/IRI+ Unicode 55

56 [5] The Web as an application platform q Standards for Web Applications on Mobile: February 2011 current state and roadmap 56

57 57

58 [6] Open APIs & Mashup 13 billion API calls / day (May 2011) 10 billion API calls / month (January 2011) Over 260 billion objects stored in S3 (January 2011) 1.6 billion API-delivered stories / month (October 2010) 5 billion API calls / day (April 2010) 5 billion API calls / day (October 2009) 8 billion API calls / month (Q3 2009) 3 billion API calls / month (March 2009) 58 58

59 [7] New Chances 59

60 [7] New Chances 위치기반서비스 q navigator.geolocation.getcurrentposition q 위치 기반 응용들 로컬 검색 지도 서비스 사용자 위치 트래킹 Geo Social 현재 위치 기반 서비스 60

61 [7] New Chances 성능 향상 웹 소켓과 XHR 비교 40배 61

62 [7] New Chances UI 개선 q HTML5 의 새로운 input type들 Search, tel, url, datetime, date, month, week, time, and datetime-local Number, range, Color q Mobile Safari (on the iphone)은 number, , url 지원을 추가 q Chrome 5 beta 에서 placeholder attribute를 지원 62 <label for=" "> address</label> <input id= type=" " placeholder="jonathan@example.com">

63 [7] New Chances Hybrid App Comparison: App Inventor, DroidDraw, Rhomobile, PhoneGap, Appcelerator, WebView, and AML 63

64 [7] New Chances Web App Store q 64

65 [7] New Chances Web App Store Client Device Devices Any Devices (PC, TV, Car, Tablet ) App Store Browser Browser Server Front Store Server Front Web Server Web App Store Web App Store Web App Store Native Appp Native App Native App Web App Cloud 65

66 [7] New Chances q Mobile Commerce q Mobile Search q Voice Browsing q Web on TV q Web 3D, Web GL q Augmented Reality q E-book q HTML5 Game q Web Store & Widget q Device APIs q Security & Privacy 66

67 Case - HTML5 & N-Screen 67

68 모바일 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.기타 새로운 기회들 68

69 N-Screen의 종결자, HTML5과 차세대 웹 문제 다중 플랫폼을 지원하는 응용 개발 단말간 데이터 이동 및 심리스 서비스 지원 다중 단말의 식별과 지원 다양한 화면 사이즈를 지원하는 응용 개발 그래픽 처리, 3D 콘텐츠 표현 Video 및 Audio 콘텐츠 처리 Interactive한 처리 멀티 터치 등의 지원 오프라인 기능의 지원 디바이스 제어 콘텐츠 표준 호환성 검사 비동기적 처리, 쓰레드 관리, 전송 속도 개선 보다 고속처리 가능하며 판매용 앱이 필요하다면? 융합 서비스 지원 69 해결책 Web Application Cloud & Web Application HTTP UAProf, CSS MQ SVG, CSS, HTML5 HTML5 canvas, CSS, WebGL, X3D HTML5 video/audio 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

70 너무 많은 기대를 하는 것은 아닌가?

71 우리가 바라는 HTML5 앱 모습 71

72 실제 구현 가능한 HTML5 앱 현실 72

73 그 결과를 받아본 고객의 표정 73

74 떼돈

75 좀 냉정해질 필요가 있다 좀 차분해질 필요가 있다 Source:

76 그냥 새로운 마크업 중 하나일 뿐.. 그리고 약간의 기회와 가능성일 뿐!!

77 Future Web Golden Age Smart devices 다양화 표준화 완료 Mobile Web Golden Age HTML5 Apps LTE 전국 서비스

78 2012, 모바일 웹과 HTML5 전망 1. Cloud based Mobile Web 2. Mobile Web UI Framework 3. Cross Platform & Hybrid Web Application 4. JavaScript Library & Web Application API Standards 5. HTML5 Game & Mobile HTML5 Game 6. Web Store & Native Web App 7. HTML5 ebook & HTML5 services 8. Responsive Web & Responsive Ads 9. Web Operating System & RESTful WoT(Web of Things) 10.Web Signage 78

79 Conclusions HTML5과 차세대 웹 기술은 멀티디바이스와 N-screen 지원을 위한 유일한 대안으로 유무선 통합의 관점과 웹 표준 기반 디바이스 호환성의 중요성을 일깨우고 새로운 웹과 앱의 개발 기회, 새로운 수익 모델의 가능성, 그리고 많은 새로운 웹 경험의 편리함를 제공하는 출발점 앞으로의 미래는 어떻게 준비하고 시작하느냐에 달려 79

80 Refences & Resources q HTML5 - q HTML5 differences from HTML4 - q 실전 HTML5 가이드 - q 놀랄만큼 유용하고 재미있는 HTML5 모바일 앱 30개 - q Detecting HTML5 Features - q 기타 참조 사이트

81 Thank you For more discussion : JongHong Jeon (hollobit@etri.re.kr) Blog : OR 81

Microsoft PowerPoint - 20100604-PMS-r2.pptx

Microsoft PowerPoint - 20100604-PMS-r2.pptx 웹 어플리케이션 기술의 진화 Jonghong Jeon ETRI, SRC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr 모바일 혁명 - 디바이스 2 Source: Morgan Stanley, Mobile Internet