차세대 웹비즈니스를 위한 "HTML5"

1,914 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,914
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

차세대 웹비즈니스를 위한 "HTML5"

  1. 1. 차세대 웹비즈니스를 위한 “HTML5” 2012.10.31 동국대학교 이창환 (yich@dongguk.edu)
  2. 2. 목차 HTML5  HTML5란?  HTML5의 새로운 요소와 기능 응용 분야  하이브리드 앱  게임  웹 OS  Node.js + Arduino Slide: http://www.slideshare.net/yich/html5-14951856 2
  3. 3. HTML5?
  4. 4. IT 기술 동향 클라우드·소셜·모바일·빅 데이터  모바일 기기 전쟁  모바일 애플리케이션과 HTML5  퍼스널 클라우드(Personal Cloud)  기업용 앱 스토어  IoT(Internet of Things)  하이브리드 IT 및 클라우드 컴퓨팅  전략적 빅데이터  실행 가능한 분석  인메모리컴퓨팅(IMC)  통합 에코시스템 4
  5. 5. WEB TRENDHybrid Web : Native 애플리케이션 및 OS와 이들을 포함하면서 정보 플랫 폼으로 진화해가는 Web이 공존하는 현상[현상]HTML5와 같은 차세대 웹 표준의 등장으로 기존의 RIA 플랫폼 기능들이 표준웹으로 통합되며,Web기반 OS, Web App Store등장 등으로 Web이 점차 App과 유사해 지고 있다.[발전방향]HTML5는 궁극적으로 오디오, 동영상, 쌍방향 플러그인 등을 필요 없게 만들 것이며, App과Web은 서로 간의 장단점을 보완하며 궁극적으로 하나의 시스템으로 통합되어 갈 것이다. 참조: 삼성SDS 선정 ‘2011년 8개 IT 메가 트렌드’ 5
  6. 6. HTML의 역사• 1990년 Tim Berners Lee 에 의해 개발 발표• 1993년 HTML1.0이 IETF(Internet Engineering Task Force) 에 의해 공개• 1993년 HTML3.2가 W3C(World Wide Web Consortium) 에 의해 권고• 1999년 HTML4.01이 W3C에 의해 권고, 이후 XHTML추진• 2004년 W3C는 HTML 표준화를 바라는 브라우저 제작사들의 제안을 거절• 2004년 Apple, Mozilla, Opera는 WHATWG(Web HypertextApplication Technology Working Group)를 발족 HTML을 진화시킴• 2007년 W3C는 HTML5의 제정에 협력할 것을 표명• 2008년 HTML5가 W3C의 초안으로 공개• 2009년 WHATWG의 의해 최종제안 상태• 현재 W3C는 표준화 작업 계속 진행 6
  7. 7. HTML5의 탄생 배경• Web Application의 고기능화• 브라우저의 서비스 플랫폼화• Flash같은 플러그인에 대한 의존성 탈피 필요성• 다양한 모바일 Device 등장으로 Cross Platform으로서의 대안• 표준화 지향• HTML이 이를 따라가지 못함 7
  8. 8. HTML5란? 좁은 의미  HTML4 표준의 다음 버전  W3C의 HTML4 표준에 정의된 마크업 언어 넓은 의미  웹 플랫폼을 지칭  HTML5 + CSS3 + Javascript (APIs) 8
  9. 9. HTML5의 범위9
  10. 10. HTML5의 구성요소 (from HTML5 완전정복, 한국경제신문사)10
  11. 11. HTML5에 따른 변화 응용 프로그램을 위한 웹 플랫폼  문서 -> 응용 프로그램 브라우저(웹 런타임)를 통한 다양한 기기 지원  PC  다양한 스마트 기기: 폰, 패드, TV 등  셋탑 박스, 사이니지 등과 같은 기기  카 네비게이션과 같은 융합 기기 11
  12. 12. HTML5의 새로운 요소와 기능
  13. 13. HTML5의 주요 특징 Semantics & Markup  Offline / Storage  Better semantic tags  Web SQL Database  Markup for applications  Local Storage  Descriptive link relations  Indexed DB  Microdata  Application Cache  ARIA attributes  Realtime / Communication Web Form  Web Workers Graphics / Multimedia  Web Socket  <video> / <audio>  Web Notifications  Canvas 2D  File / Hardware Access  Canvas 3D (WebGL)  Native Drag & Drop  Inline SVG  Desktop Drag-in (File API) CSS3  Desktop Drag-Out  CSS Selectors  File System APIs  Web Fonts  Geolocation  Device Orientation  Speech Input 13
  14. 14. 시멘틱한 마크업• 문서구조, 데이터의 의미를 정확히 하기 위한 요소 표현중심 데이터 중심 14
  15. 15. 다양한 입력폼15
  16. 16. canvas• Bitmap 방식• 2D 그래픽을 자유롭게 표현• 이미지를 편집할 수 있는 기능• 애니메이션 구현 가능 http://mugtug.com/sketchpad/ 16
  17. 17. SVG• Vector 방식• 각각의 도형을 마크업으로 표현하므로 DOM으로 접근 가능 <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> </svg>• 객체의 컨트롤이 용이하다. 17
  18. 18. WebGL• OpenGL 기반 라이브러리• 3D 그래픽 구현 기능• 하드웨어 가속 가능• AMD, NDVIA W/G 참여 http://bodybrowser.googlelabs.com Quake2 18
  19. 19. Video & Audio• Flash등 플러그인 없이 재생 및 컨트롤 가능• 브라우저마다 지원하는 파일형식이나 코덱이 다름• H.264(MS, 애플) vs WebM(구글, 모질라, 오페라)<video controls> <source src="video.ogv" type=video/ogg; codecs="theora, vorbis"> <source src="video.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> video not supported</video> 19
  20. 20. Drag & Drop• 웹 어플리케이션 내부에서 Drag & Drop• 웹 어플리케이션 외부에서 Drag & Drop• Window 탐색기 등으로부터 파일 Drag & Drop 20
  21. 21. Web Storage• Local Storage(도메인별), Session Storage(세션별)• 소량의 데이터를 Client-side 에 저장 (5MB)• 쿠키와 달리 정보를 서버로 보내지 않음• 유효기간의 제한이 없음 (Local Storage)• JavaScript 객체를 저장할 수 있음 21
  22. 22. Web SQL Database• Client-Side 관계형 데이터베이스• SQL을 이용한 액세스 가능• 동기, 비동기 방식• 도메인별 데이터베이스• Indexed Database 로 대체 22
  23. 23. Application Cache• HTML, CSS, JavaScript, Image 파일들을 Client-Side에 캐시• .manifest 파일을 이용한 설정• Web Storage, Web SQL Database• 오프라인 웹 어플리케이션 가능 23
  24. 24. Web Workers• JavaScript를 백그라운드에서 실행시키는 기능• 백그라운드에서 실행되는 코드를 worker라 부름• 웹에서도 멀티 쓰레드 가능 24
  25. 25. Server-Sent Events• HTTP 환경에서 서버로 부터의 데이터 푸시 기능• Comet을 표준화한 기술 25
  26. 26. Web Socket• TCP를 이용한 실시간 통신 가능• 기존 HTTP의 Polling 방식 극복• 플러그 인 의존성 탈피• Server로 부터 데이터 푸시 가능• 빠른 실행 속도 http://warmcat.com 26
  27. 27. Cross Document Messaging• 서로 다른 도메인간 메시지 통신 가능• 비동기 방식으로 통신 http://www.example1.com http://www.example2.com 27
  28. 28. Cross Origin Request• 다른 도메인에 HTTP 요청• XMLHttpRequest Level2• 문자열, 파일, 바이너리, Form Data, Dom Data 송신 가능 28
  29. 29. Notification• 알림창 기능• Server-Sent Events, Web Socket 와 접목 http://html5.firejune.com/demo/notification.html 29
  30. 30. Geolocation• 디바이스의 위도, 경도 등 위치 정보 확인 기능• 강력한 모바일 웹 어플리케이션 가능 30
  31. 31. File• 웹 어플리케이션이 파일 읽기 가능• 브라우저에서 파일 처리 가능• 보안상 사용자가 선택한 파일만 허용(Drag & Drop, 파일폼) 31
  32. 32. History• Ajax 사용시 Broken URL 현상 해결 32
  33. 33. 응용 분야33
  34. 34. 응용 분야 하이브리드 앱 게임 웹 OS Node.js + Arduino 34
  35. 35. 하이브리드 앱 하이브리드 앱  웹 앱 + 네이티브 앱  웹앱  웹 기술로 작성된 앱  브라우저에서 실행  네이티브 앱  기기에서 제공하는 개발 언어와 API로 작성된 앱  기기에서 직접 실행 35
  36. 36. 하이브리드 앱 하이브리드 앱  UI Framework  jQuery Mobile(http://jquerymobile.com/)  Sencha Touch 2(http://www.sencha.com/products/touch)  패키징/Device APIs  PhoneGap(http://phonegap.com)  앱스프레소(http://appspresso.com)  Sencha Touch 2 36
  37. 37. 웹앱과 네이티브 앱의 비교 기능 웹앱 네이티브 앱 기존에 사용하던 웹 개발환경, 아이폰(매킨토시 필요) 개발환경 모든 운영체제 가능 안드로이드폰(멀티 플랫폼) 아이폰(Object-C) 사용 언어 HTML,CSS,자바스크립트 안드로이드폰(자바) 년 $99(아이폰), $35(안드로 앱 개발자 비용 무료 이드) 배포 브라우저가 설치된 환경 앱 스토어/안드로이드 마켓 결제 시스템 독자 결제 구축 또는 광고수익 앱 장터 판매 수익 하드웨어 지원 제한적 모든 기능 활용 업데이트 즉시 반영 검수 받아야 함 UI 제한적 풍부한 UI 가능37
  38. 38. 웹앱 웹 애플리케이션(Web Application)을 의미  브라우저의 주소를 통해 접속하는 형식은 웹앱  애플이 iOS 1.0 시절 아직 앱스토어를 오픈하지 못하여 앱 이 사용되지 못했을 때 웹앱을 지원하던 것이 현재까지도 사용된 것이 계기 애플 사이트에서 지원하는 웹앱의 내용입니다. www.apple.com/webapps 38
  39. 39. 하이브리드 앱 ‘웹앱’ 이면서 ‘네이티브 앱’의 장점을 결합한 것은 ‘하 이브리드 앱’  웹앱을 개발한 후에 오픈소스 크로스 프레임워크를 이용 하여 네이티브 앱으로 변환시켜 배포되는 앱 형식을 의미 오픈소스 크로스 프레임워크  폰갭(PhoneGap) 오픈소스(http://www.phonegap.com)를 이 용하면 웹앱을 네이티브 앱으로 변환할 수 있음 39
  40. 40. 주요 기술 웹 표준 플랫폼  브라우저 기반 웹 뷰, 웹 플랫폼 런타임  HTML5, CSS3, Javascript와 관련 APIs  DOM, Event 모델 등 UI 프레임워크  앱과 유사한 형태로 만들기 위한 프레임워크  웹은 문서를 위한 기술임  앱과 같은 화면 구성과 사용자 상호작용을 작성하기에는 적합하지 않음 디바이스 APIs  문서 형태가 아닌 네이티브 플랫폼에서 제공하는 기능을 접근하기 위한 용도  최신 웹 표준에서 정의되어 있으나, 네이티브 플랫폼에서 제공하는 모든 기능에 대해 정의되어 있지는 않음  하이브리드 앱을 작성하는 개발자가 직접 만들거나, 추가된 기능을 제공하는 PhoneGap과 같은 하이브리 드 앱 프레임워크를 이용 패키징  네이티브 앱처럼 보이기 위한 기술  W3C에서 유사한 기술인 위젯 패키징 기술은 있으나, 하이브리드 앱을 위해서는 사용하지 못함  각 네이티브 플랫폼별로 다른 기술을 사용 40
  41. 41. 하이브리드 앱의 개발방법 필요한 화면에서만 웹 뷰를 사용  NHN, Daum 앱의 경우  자체 웹 프레임워크를 사용하는 경우가 많음  개발자가 하이브리드 앱을 만드는데 필요한 기술을 이해해야 함 PhoneGap, Appsresso와 같은 하이브리드 앱 프레임워크 사용  웹 앱 프레임워크에서 제공하는 디바이스 API와 패키징 기술을 사용  개발자는 웹 기술과 디바이스 API, 패키징 기술만으로 하이브리드 앱을 만들 수 있음  일반적인 하이브리드 앱 제작 방법 웹 런타임/웹 뷰를 개발 후 사용  Chrome이나 FireFox의 웹 브라우저 소스를 활용  자체 웹 런타임 개발  자바스크립트 API를 직접 개발 Titanium과 같은 앱 제작 도구 사용  웹 기술로 앱 작성.  네이티브 환경의 기계어 코드 형태의 결과물을 생성  네이티브 앱과 비슷한 실행 성능을 가짐.  제작도구에서 제공하지 않는 기능을 사용하기 힘듬  웹 기술의 일부만 제공. 41
  42. 42. 하이브리드 앱의 장/단점 장점  웹 표준을 지원하는 플랫폼에서 큰 수정없이 실행 가능함  패키징을 통해 다양한 기기를 위한 앱을 작성할 수 있음  네이티브 앱과 유사한 UX/UI를 제공할 수 있음 단점  플랫폼이 가진 모든 기능을 사용하지 못함  네이티브 앱에 비해 낮은 실행 성능을 가짐  모든 기기에서 동일한 수준의 앱 표준을 지원하지 않음 42
  43. 43. 하이브리드 앱의 주요 응용분야 알맞은 분야  정보 제공 목적의 앱  인터렉티브 이북 앱  상대적으로 단순한 UI를 가지고 다양한 기기를 지원해야 하는 앱 알맞지 않은 분야  높은 실행 성능을 요구하는 앱: 게임, 멀티미디어 응용  웹 표준에서 지원하지 않는 기능을 사용하는 앱  복잡한 UI를 가지고 있으면, 특정 기기만을 지원하는 앱 43
  44. 44. 하이브리드 앱 - 유사 기술 WAC 위젯 데스크탑 OS를 위한 하이브리드 앱  Windows 8: HTML5, CSS, Javascript를 이용하여 모던 UI 앱을 만들 수 있음  Mac OS X 44
  45. 45. 웹 기술 HTML5 CSS3 Javascript와 API  HTML5  Device API  3rd Party API 45
  46. 46. UI 프레임워크 UI 프레임워크  jQuery/jQuery Mobile  ExtJS, Sencha Touch  Etc. 필요한 이유  HTML/CSS는 페이지 단위의 문서 표현을 위한 기술  앱과 같은 사용자 상호작용을 위한 화면 표현에는 부적합 한 점이 있음  또한 개발하기 힘든 부분이 있음 46
  47. 47. 47
  48. 48. jQuery/jQuery Mobile jQuery  홈페이지: www.jquery.com  버전: 1.7.2 jQuey Mobile  홈페이지: querymobile.com  버전: 1.1.1 48
  49. 49. jQuery 주요 기능  엘리먼트 선택자  태그  클래스  아이디  pseudo-클래스(css 선택자와 유사 개념)  엘리먼트 변경, 속성 변경  Text, html  Attribute  Css 변경  이벤트  다양한 애니메이션 효과 지원  Ajax 지원  Plug-in 개념 지원  다양한 UI 요소 지원 49
  50. 50. jQuery Mobile Touch-Optimized Web UI Framework for Smartphones & Tablets HTML 마크업 기반 (기존 HTML 마크업 전문 툴 일부 이용 가능) Javascript를 몰라도 간단한 화면 구성 가능 기존 사이트를 쉽게 모바일로 변경 가능 멀티 디바이스 지원  다양한 디바이스 지원 50
  51. 51. jQuery Mobile-예제<!DOCTYPE html><html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page --></body>51</html>
  52. 52. Sencha Touch/Ext js 홈페이지: http://www.sencha.com/products/touch 버전: 2.0 주요 기능  Built on HTML5 Technology  Smoother Scrolling and Animations  Adaptive Layouts  Native Packaging  AJAX  DOM manipulation  Feature Detection  Geolocation  Icons  Touch events 52
  53. 53. 53
  54. 54. jQuery Mobile vs. Sencha Touch HTML5 기반의 모바일 프레임워크 jQuery Mobile  HTML 작성처럼 Line by Line 으로 마크업하며 작성  기존 Web 개발과 차이 적어서 익숙한 개발방법  많은 브라우저(기기)를 지원  기존 Web의 손쉬운 Mobile 전환  손쉬운 사용법 Sencha Touch  Java의 AWT나 Swing 처럼 Panel 기반으로 화면을 구성  JavaScript와 Ext.JS 을 배우는 비용이 추가로 필요  네이티브 앱과 매우 유사한 UI를 제공 54
  55. 55. 디바이스 API 디바이스 api  네이티브 플랫폼의 기능를 사용할 수 있는 자바스크립트 API 디바이스 api의 종류  W3C API  3rd-Party API: PhoneGap API, Appsresso  User-defined API (Custom API): PhoneGap Plugin 55
  56. 56. W3C’s Device Apis Web Application  System Application WG  Offline / Storage  Execution & Security Models  Web SQL Database  Alarm, Contacts, Messaging,  Local Storage Telephony, Raw Sockets  Indexed DB  Bluetooth, Browser, Calendar,  Application Cache Device Capabilites, Idle, Media  Realtime / Communication Storage, Network Interface, Secure Elements, System Settings  Web Workers  Web Socket  Web Notifications  File / Hardware Access  Native Drag & Drop  Desktop Drag-in (File API)  Desktop Drag-Out  File System APIs  Geolocation  Device Orientation  Speech Input 56
  57. 57. PhoneGAP apis APIs  Plugin APIs  Accelerometer  Camera  Capture  Compass  Connection  Contacts  Device  Events  File  Geolocation  Media  Notification  Storage 57
  58. 58. 패키징 웹: 위젯 패키징 3rd-party: PhoenGap, etc. 58
  59. 59. PhoneGap A standards-based, open-source development framework for building cross-platform mobile apps with HTML, CSS and JavaScript for iPhone/iPad, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more. 버전: 2.0 홈페이지: www.phonegap.com 오픈 소스: Apache 재단의 Cordova 프로젝트 Adobe사 제공  Nitobi 인수 59
  60. 60. PhoneGap 지원 플랫폼60
  61. 61. PhoneGap의 주요 기능 Device API 패키징 빌드  서비스 형태로 제공 61
  62. 62. 게임 2D 게임  Angry Birds  Cut The Rope  BrowserQuest (http://browserquest.mozill a.org/) 3D 게임  Quake II 62
  63. 63. HTML5:게임63
  64. 64. Web OS HP의 webOS Mozilla의 FirefoxOS (http://www.mozilla.org/firefoxos/) Google의 ChromeOS 64
  65. 65. Node.js + Arduino Node.js  Event-driven I/O server-side JavaScript environment based on V8  Homepage: http://nodejs.org Arduino  open-source electronics prototyping platform based on flexible, easy-to-use hardware and software http://www.twilio.com/blog/2012/06/ build-a-phone-controlled-robot-using-node-js-arduino -rn-xv-wifly-arduinoand-twilio.html 65
  66. 66. 질의 응답
  67. 67. 질의응답67
  68. 68. 참고문헌
  69. 69. 참고문헌 Top 10 Questions about HTML5, http://www.slideshare.net/hollobit/top-10-questions-about- html5 HTML5 를 이용한 하이브리드앱 제작, http://www.slideshare.net/zanylove/html5-6608906 HTML5 웹 표준과 모바일 개발, http://www.slideshare.net/zanylove/html5-6860663 쉽게 배우는 웹앱 & 하이브리드 앱, 김응석, 이지스 퍼블리 싱 HTML5 Asia Day CSS3의 특징과 사용 방법, http://html5.firejune.com/css3.html#slide1 69

×