HTML5 와 미래웹기술 part 1

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

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

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

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

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

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

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

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

인터넷 사용시간의 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

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

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

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

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

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

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

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

Web technology evolution
Page 18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

간략하게 살펴보는 HTML5

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

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

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

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

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

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

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

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

HTML5 코딩
HTML4
HTML5
Page 57

HTML5 코딩
HTML4
HTML5
figcaption
Page 58

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

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

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

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

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

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

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

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

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

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

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

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

HTML5 와 미래웹기술 part 1

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML5 와 미래웹기술 part 1 (20)

More from 미래웹기술연구소 (MIRAE WEB) (12)

HTML5 와 미래웹기술 part 1