HTML5 와 미래웹기술 part 1 HTML5 and future web technology part 1 Overview and History

1. HTML5 트렌드와 미래 웹기술
Part 1
조만영 대표이사
미래웹기술연구소(주)

2. 발표자 소개
§ (현) 미래웹기술연구소㈜ 대표이사
§ (현) W3C 대한민국 사무국 Business and Technology Specialist
§ (전) 오페라소프트웨어 Presales Engineer 부장
§ (전) 유니퀘스트 경영기획실
§ (전) 나모인터랙티브 웹개발팀
§ 고려대학교 컴퓨터공학 석사
§ 2014년 미래창조과학부장관 표창수여 인터넷진흥공로
Page 2

3. 미래웹기술연구소 소개
§ HTML5 및 웹표준 기술 전문 연구 강
의, 교육
§ HTML5 모바일 개발 및 앱개발
§ Sencha 한국 총판
§ 웹기술과 가전제품의 융합 선행연구
Page 3

4. 인터넷 연결 라이프 스타일과
웹

5. 인터넷 연결된 라이프 스타일

6. 가정에서의 TV에 대한 사용자 경험을 생각해 봅시다.
Page 6

7. TV의 활용시간은 얼마나 되나?
하루 평균 지상파 시청시간 2시간 12분 (2006년 기준)
Page 7

8. 인터넷 이용시간은 얼마나 되나?
하루 평균 인터넷 이용시간 1시간 43분 (2006년 기준)
Page 8

9. 인터넷 사용시간의 TV사용 시간 추월
2.39 2.4
2.24
2.12
1.25
1.35 1.36
1.43
2003 2004 2005 2006
일일 평균 TV 시청시간
일일 평균 인터넷 사용시간
출처 : 한국방송광고공사(KOBACO)
Page 9

10. Connected Life
§ 회사에 출근해서 컴퓨터를 켠후 가장먼저 하는 일은 무엇입니까?
Page 10

11. Internet connected lifestyle
§ 지난 10년간 우리가 익숙하게 된 경험들
Page 11

12. 세계에서 인터넷이 가장 빠른 나라
Page 12

13. 80%
20%
20%
80%
1998 2006
인터넷 서비스
독립 프로그램
질문
§ 하루중 워드나 파워포인트 같은 독립 프로그램을 많이 쓰십니까? 아니면 한메일, 싸
이월드, 네이버 블로그 같은 인터넷 서비스를 많이쓰십니까?
Page 13

14. 인터넷? 웹?
Page 14

15. 웹 : 컨텐츠 유통의 거대한 플랫폼
Page 15

16. 웹 : 컨텐츠 유통의 거대한 플랫폼
Page 16

17. 웹페이지에서 웹애플리케이션으로
§ AJAX, Web 2.0, Open API, Mash UP
§ PC 응용프로그램 대체가능
Page 17

18. Web technology evolution
Page 18

19. 웹 환경에서 소비하는 시간 갈수록 증가
Page 19

20. 인터넷 대중화 이후 10년간의 성장
Page 20

21. 스마트폰에서의 모바일 웹시대

22. 모바일웹의 시작은 아이폰의 탄생과 함께
§ iPhone in 2007
§ Smartphone Wars
§ Smartphone = Mobile internet
machine
§ iPhone Safari
§ Mobile Browser wars
Page 22

23. 모바일 인터넷 연결 라이프 스타일 심화
Page 23

24. Mobile First 시대
§ 포털 접속, 모바일이 PC 추월
§ 다음 모바일 웹 트래픽이 PC 웹보다 45% 많아
Page 24

25. Mobile Only 시대
§ 구글 에릭 슈미트 회장
§ 모바일 하나로 모든 것을 해결하는
시대로 전환
Page 25

26. 사물인터넷시대로의 전이
Page 26

27. 정리
§ TV 보다 인터넷 연결이 더 익숙한 인터넷 연결 사회로의 깊숙한 진입
§ 인터넷의 구성요소인 웹과 웹기술은 우리 생활과 밀접한 관계를 맺음
§ 아이폰의 등장과 함께 시작된 모바일 인터넷은 인터넷 연결 라이프 스타일 심화
§ Mobile First, Mobile Only 의 시대로 진화
§ 이제는 스마트폰을 넘어 만물이 연결되는 사물인터넷 시대로의 진입
§ 초연결 사회로의 진입
§ 웹기술은 이 모든 것들을 가능하게 하는 인프라적 기술로서 중요성을 지님
Page 27

28. HTML5는 무엇이고 어떻게 주목
받고 있는가?

29. HTML5가 주목받는 이유 : 애플사례
§ 스티브 잡스가 시연한 아이패드 화면에 빈공간은 무엇일까요?
Page 29

30. HTML5가 주목받는 이유 : 애플사례
§ 애플의 선택
§ Flash를 버리고 HTML5를 선택
§ 플래시는 폐쇄된 비표준 기술
§ 웹기술은 공개된 표준기술
§ 웹표준 기술이 플래시 대체가능
§ “표준이 아닌것에 종속되면 그 말로가 어찌
되는지 우리는 잘 알고 있다.” – 스티브 잡스
출처 http://www.apple.com/hotnews/thoughts-on-flash/
Page 30

31. HTML5가 주목받는 이유 : 구글 사례
§ Google Gears 개발 중단, HTML5로 방향
전환
§ “구글은 HTML5에 사활을 걸었다.” -
2009 Google I/O 컨퍼런스
§ “모든 플랫폼에 앱을 만들어 지원하기에는
돈이 없다.”
출처 http://kr.engadget.com/2009/12/08/
google-gears-html5/
Page 31

32. 구글전략 : 2009년 7월 유튜브 IE6 브라우저 지원 종료
Page 32 http://techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-goodbye/

33. 구글전략 : 2010년 1월 유튜브에 HTML5 서비스 적용개시
Page 33 http://techcrunch.com/2010/01/20/youtube-html5/

34. 구글전략 : 2010년 7월 유투브 모바일에 HTML5 서비스 시작

35.
Page 34

36. 구글 전략
§ 유튜브는 인터넷 동영상 재생 서비스임
§ 아이폰과 모바일 기기에서 탑재된 웹브라우저에서는 비디오 재생하는 플래시가 지원
되지 않음
§ 아이폰과 모바일 기기에서 유튜브 서비스를 제공해야할 필요성 대두
§ 아이폰과 모바일 기기에서 탑재된 웹브라우저에서는 HTML5 로 비디오 재생가능
§ 유튜브 서비스를 HTML5 로 전환하여 모바일 시장에 대응
Page 35

37. Apple HTML5
Page 36

38. APPLE HTML5

39. 애플의 HTML5 전략
§ 애플은 컴퓨터와 휴대폰을 만드는 회사
§ 웹에서 비디오 재생을 위해서 플래시와 같은 기술에 종속되고 싶지 않음
§ 모바일웹에서 비디오 재생을 위해서 플래시를 제거하고 HTML5를 적극 옹호함
Page 38

40. 구글과 애플은 왜 길을 간것일까?
§ Apple
§ Google
Page 39
TV

41. 비표준 기술에 대한 종속 탈피
§ PC 시대에는 MS Window 종속적인 기술로도 문제가 없었음
§ 구글 애플이 나가려는 Post PC, 모바일 시대에는 특정 회사에 종속적인 기술을 써서는
안됨
§ 어도비 플래시, MS ActiveX
§ 대안기술이 필요하던차 구글롸 애플은 HTML5 를 그 대안으로 삼음
Page 40

42. HTML5 의 장점
§ W3C 제정 웹표준 기술
§ Canvas, Video, Audio 태그의 추가로 멀티미디어 기능 대폭 강화
§ 플래시의 역할 대체가능해 짐
§ Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작 가능
§ 웹브라우저 벤더들이 빠르게 제품에 반영
§ 데스크탑 브라우저 및 모바일 브라우저에서 모두 지원
§ 모바일 환경에서도 응용범위가 많다
Page 41

43. HTML5 대두의 원인 모바일 시장의 급성장
§ 2011년 전체 핸드폰 시장의 50% 돌파
§ 스마트폰 선택율 50% (10년 10월기준, 매월 3%씩 증가)
Page 42

44. App?
모바일 시장에서의 요구
WM
Andr
oid
iOS
Bada
Black
berry
• 독립적 앱으로 다양한 운영체제에 대응하는 것은 고비용
• 웹으로 제작하여 컨텐츠 호환성 담보해 낼수 있음
Page 43

45. 국내 현업에서의 실제 실태
www.abc.com
m.abc.com
t.abc.com
안드로이드 App.
아이폰 App.
아이패드 App.
Feature Phone (Wap)
인력과 시간의 중
복낭비 불가피Abc 서비스
Page 44

46. N-Screen N-Devices
iOS Android WM7 Blackberry Bada WebOs
Mobile
Phone
Tablet PC
TV
Page 45

47. HTML5 및 웹기술을 활용하게 되면?
§ 아이폰, 안드로이드 운영체제별로 App 으로 만들지 않아도 된다
§ 모바일 웹하나로 여러 운영체제에 대응가능한 서비스 개발이 가능하다
§ 데스크탑과 모바일환경 모두에 적용가능한 서비스가 가능하다
Page 46

48. HTML5의 가치
§ 기업내 인력 및 비용의 중복 투자 감소
§ 네이티브 앱개발과는 달라 다양한 운영체제에 대응이 가능
§ 플래시와 같은 플러그인 기술이 탑재되지 않은 기기들에서 대체효과 가능
§ HTML4 대비 멀티미디어 요소 및 애플리케이션 제작 지원 기능이 강화
Page 47

49. 간략하게 살펴보는 HTML5

50. HTML의 역사
§ HTML 1.0 1993.03
§ HTML 2.0 1995.11
§ HTML 3.0 1996.04
§ HTML 3.2 1997.01
§ HTML 4.0 1997.12
§ HTML 4.01 1999.12 HTML
§ XHTML 1.0 2000.01 HTML + XML
§ XHTML 1.1 2001.05
§ XHTML 2.0 2006.07 하위 호환 안됨
§ HTML 5 2014.10.28
Page 49

51. HTML5 의 탄생
§ 1999년 : W3C 는 HTML 4.01 을 끝으로 XHTML 1.0 시작
§ 2000년 : XHTML 1.0 을 완료하고 XHTML 2.0 작업 착수.
§ 2004년 : W3C 의 XML 기반 기술 지향과 노선이 달랐던 Opera 와 Mozilla 는 W3C
와 별도로 WHATWG[1]을 발족
§ 여기에 Apple이 가세하여 WHATWG 은 차세대 XML 기반이 아닌 차세대 HTML 표
준 제정을 독자적으로 진행하게 된다.
§ 2007년 : Apple, Mozilla, Opera 는 W3C 에 새로운 HTML 워킹그룹을 제안하게 되
며 HTML 의 5번째 버전의 의미로 HTML5로 명명되며 HTML 5번째 버전의 스펙 작업
이 진행
[1] WHATWG : (Web Hypertext Application Technology Working Group) http://whatwg.org
Page

52. HTML5가 나오기 까지
§ 2004년 WHATWG에서 시작
§ W3C에서도 2007년 HTML5 채택
§ HTML5 Last Call 2009
§ HTML5 Last Call Finish 2011.05
§ HTML5 Recommandation 2014년을 목표로 진행중
WHATWG
Page 51

53. HTML5 표준화와 웹브라우저 적용이슈
§ WHATWG 의 주체는 누구인가? 웹브라우저 회사들
§ 표준화의 핵심은 Browser 에서의 구현여부(Implementation)
§ HTML5 표준은 크롬, 오페라, 모질라, IE9 및 아이폰, 안드로이드 브라우저에서
빠른 속도로 지원되고 있다.
Mobile Browsers
Page 52

54. HTML5 의 새로운 요소들
Page A1-53

55. HTML5 달라진점
§ !doctype html 의 변화
§ script, style 태그에서 type 생략
HTML4
HTML5
Page 54

56. 새롭게 추가된 태그들
§ article
§ aside
§ footer
§ header
§ nav
§ progress
§ section
§ time 외 30개로 새로운 태그[1] 추가됨.
§ 시맨틱 웹과 나은 문서 구조를 지향함
[1] 출처 : http://w3schools.com/html5/html5_reference.asp
Page 55

57. 새롭게 추가된 태그들
div class=header/div
HTML4
header/header
HTML5
Page 56

58. HTML5 코딩
HTML4
HTML5
Page 57

59. HTML5 코딩
HTML4
HTML5
figcaption
Page 58

60. 새롭게 추가된 멀티미디어 요소
§ canvas
§ video
§ audio
§ source
Page 59

61. 새로운 폼요소들
§ keygen
§ datalist
§ output
§ 새로운 input type
• email
• datetime
• time
• datetime-local
• number
• range
• Color
• 단, 현재 브라우저별 지원 편차가 커서 일반화 되는데 시간이 필요
Page 60

62. New HTML5 Javascript API
§ canvas drawing API
§ video, audio control API
§ Local Storage API
§ Web SQL DB API / Indexed DB API
§ Geolocation API
§ Offline web apps API
§ Web Socket / Web Worker
§ Drag and Drop API
§ File API
Page 61

63. HTML5 달라진점 정리
§ doctype 정의 변화
!doctype html
§ 새로운 태그들
header, footer, nav 등
§ 웹브라우저에서 멀티미디어 요소 지원
video, audio, canvas
§ 새로운 폼 요소
new input type, range, calendar 등
§ 새로운 HTML5 JavaScript API 추가
Canvas API, Video API, Web Storage API, Geolocation API 등
Page 62

64. HTML5 의 향후 활용전망
Page A1-63

65. HTML의 미래? HTML 11
출처 http://html11.org
Page 64

66. 인터넷의 가전제품 시장으로의 진출
§ 퀄컴회장 : “2014년 가전제품의 70%가 인터넷에 연결된다.”
§ 미래웹기술연구소 전망 : “아이패드는 애플이 만드는 가정용 가전제품중 첫번째에 불
과”
§ 수많은 가전제품을 묶을 수 있는 유일한 언어는 HTML5 이다.
Page 65

67. Native 앱의 대안
• HTML은 더 이상 Static한 Markup Language가 아니다.
• 화려해지고(CSS3,Canvas) 똑똑해진(JavaScript) 언어이다.
• 웹기술을 이용한 앱개발이 가능
• 멀티플랫폼과 N-Screen의 유일한 대안이다
Page 66

68. App Store 등록
§ Converting WebApps to Native Apps
§ PhoneGap
§ Titanium
§ Appspresso
Page 67

69. App Store
§ RNAO App. (PhoneGap Used)
§ 애플 앱스토어 유료부분 Medical Category 1위 (2011. 4)
Page 68

70. WebOS / 크롬OS
§ 브라우저가 OS가 되는 세상
§ HP : WebOS 2.1 탑재 스마트폰 출시
§ 크롬 OS ( 넷북 , 타블렛 )
Page 69

71. Windows 8
§ MS : COMPUTEX 2011 에서 윈도우8 공개
§ HTML + CSS + JavaScript 개발 지원
Page 70

72. 정리
§ 스마트폰 시대와 함께 PC 시대보다 많은 다양한 운영체제가 등장하게 되었다
§ 사용자들은 PC와 모바일에서 모두 동일한 경험을 추구한다
§ 이기종의 모바일에서 호환이 되지 않는 문제에 대해서 소비자들의 고민을 해결하기
위한 기술을 업계는 주목하였다
§ 구글, 애플은 이를 간파하고 특정회사 종속적인 기술을 배제하고 공개 표준 기술은
웹표준 기술을 대안으로 삼는다
§ 최신 웹표준 기술인 HTML5 는 이런 업계의 주목과 더불이 새로운 대안적 기술로서
나날이 발전중이다.
§ HTML4 대비 추가된 멀티미디어 기능과 애플리케이션 개발 API들은 HTML5 의 가장
중요한 변화 요소라고 할 수 있다
Page 71