Html5의 현재 그리고 미래 배포자료 최종

HTML 5 의 현재 그리고
미래
미래의 커뮤니케이션 툴을 창조하는 기업 – 주식회사 포
비커

2012. 5.

포비커 박종일 이사

목 차
1 HTML 5 개요

2 HTML 5 표준과 지원 현황

3 HTML 5 적용 사례

4 국내에서 HTML 5 의미

글로벌 사업자의 HTML 5 전
5
략

6 S umma ry

H TML 5 개요
미래의 커뮤니케이션 툴을 창조하는 기업

A fu lly o p e n , u n c o n tro lle d Platfo rm
F o rg e d b y wid e ly re s p e c te d s tan d ard s b o d ie s

We b D e ve lo p me nt

to the ne xt le ve l

HTML + C S S + J S ( A P I)

h ttp ://e n .wikip e d ia.o rg /wiki/H TML5

H TML 5 개요

S in c e 2005 We b 2.0?
H TML5 = Ric h We b + We b as Platfo rm

h ttp ://m ap .we b 2s u m m it.c o m /#t

H TML 5 개요

클라이언트 중심 (API) 아키텍처
멀티 스크린과 클라우드 환경 대응

h ttp ://m s ittre n d .c o m /h tm l5.h tm l

H TML 5 개요

P la tfo rm F ra g me nta tio n VS B ro ws e r C o mp a tib ility

확장성
적용 플랫폼 적용 브라우저
( 인프라 , 접근
Platfo rm Ve rs io n ) 브라우저 Ve rs io n

해상도 해상도

단말 제조사 자제 규격
> 플러그인 정책

스토어 ( 검수 , 배포 , 설치 ) 생산성 도메인 , 웹스토어
( 비용 , 시간 )

高 퀄리티 , 특화 기능 中 퀄리티 , 일반 기능

H TML 5 개요

HTML 5 는 웹이 가진 기술적 한계에 대한 모든 해답은 아니지만
현실적인 대안으로 써 의미 있는 기술적 진화를 보여주고 있음
• H TML5 는 Ac tive X , F las h 기반 플러그인 기술 대체
• H TML5 는 멀티 터치등 인터랙티브 U I/U X 지원
• H TML5 는 보다 빠른 데이터 , 대용량 전송 보장 (We b S o c ke t)
• H TML5 는 lo c al file s to rag e 를 통해 저장 기능 지원
• H TML5 는 위치기반 서비스 지원
• H TML5 는 RIA 없이 We b Vid e o /Au d io 지원
• H TML5 는 JS 없이 다양한 위젯 (U I 콤포넌트 ) 저작 가능 (C S S 3)
• H TML5 는 Private Po lic y 와 보안 기능 강화
• H TML5 는 간단한 웹 개발 지원 (JS Lib )
• H TML5 는 클라이언트 중심의 서비스 환경 지원
• H TML5 는 개인화를 위한 기능 지원
• H TML5 는 컨셉의 변화 : 내용과 데이터의 분리
• H TML5 는 새로운 웹 개발 방법론 ( 설치형 웹앱 , 클라이언트 중심 분산
처리 )
• HTML 5 는 지속적으로 이해관계자의 상호 공동 목표를 수
렴 중

H TML 5 개요

D e ve lo p e r in te re s t in H TML5
H TML5 is p layin g a c e n tral ro le with th e wid e s p re ad

G itHub A rc hive - A p ril 20120 Mo b ile D e ve lo p e r inte re s t in HTML 5

H TML 5 표준과 지원 현황

Ne xt G e ne ra tio n F e a ture s fo r Mo d e rn We b D e ve lo p me nt
A ls o c a n inc lud e A J A X + J S O N+ XML + XHTML

• 브라우저 기반 동일한 실행 환경
• N - S c re e n 대응
• 웹 기술 표준화 h ttp ://e n .wikip e d ia.o rg /wiki/H TML5


HTML 5 는 We b A p p lic a tio n 개발을 위한 표준 명세
단말 H/W 접근 , 내부 자원 접근에 대한 표준 명세 추가
H TML5 Ap p lic atio n C ac h e ,
We b Me s s ag in g API, Wid g e t Pac kag in g ,
H TML WG We b Ap p lic atio n S e c u rity WG
We b S o c ke t API,
S e rve r- S e n t E ve n ts API,
XMLH ttp Re q u e s t Le ve l 2

We b S to rag e , F ile API,
In d e xe d D atab as e API MO B ILE
C an vas , C S S 3, 3D Tran s fo rm s ,
S VG , We b G L
Me d iaS tre am Pro c e s s in g API, D e vic e API WG
We b Au d io , Me d ia C ap tu re G e o lo c atio n WG

We b E ve n ts Wo rkin g G ro u p ,
To u c h E ve n ts API

H TML WG

1


2012 년 05 월 현재 L C WD ( L a s t C a ll Wo rking D ra ft) 상태

1991 HTML 2002 XH TML 2 WG

1994 HTML 2 WHA TWG 2004
오페라 , 모질라 , 애
1996 CSS + J a va S c rip t 플
구글 (lan H ic ks o n )
1997 HTML 4
2007 HTML 5 WG
1998 CSS2
2000 XHTML HTML 5(WD )
2010

2005 AJ AX 2013 HTML 5(PR)

XH TML 표준화 중단 HTML 5(RE C )
2014
W3C 에 의해 진행 작업으로 표현이 되기 시작하는 단계이나 , 아직 그룹 또는 W3C 에 의해 의견이
Wo rkin g D rafts (WD ) 단계
합의되지 않은 상태
(1 ) 작성된 그룹내에서 합의가 이루어졌고 ,
Pro p o s e d Re c o m m e n d atio n s (PR)
(2 ) 검토를 위하여 Ad vis o ry C o m m itte e 에 제안된 단계
Re c o m m e n d atio n s (RE C ) W3C 내에서 합의가 이루어졌고 D ire c to r 의 승인을 받은 단계

1


구조화된 문서 형태 ( S e ma ntic s & Ma rkup )
다양한 기능 ( A p p lic a tio n P ro g ra m Inte rfa c e )

h ttp ://p latfo rm .h tm l5.o rg/

1


Ne w( Re mo ve d ) E le me nts in HTML 5

N e w S e m an tic /S tru c tu ral Ele m e n ts N e w Me d ia Ele m e n ts

Th e n e w < c an vas > E le m e n ts

N e w Fo rm E le m e n ts

Re m o ve d E le m e n ts
< ac ro n ym > < ap p le t> < b as e fo n t> < b ig > < c e n te r> < d ir> < fo n t> < fram e >
< fram e s e t> < n o fram e s > < s trike > < tt>

h ttp ://d e v.w3.o rg /h tm l5/m arku p /e le m e n ts .h tm l

1


Ne w We b D e s ig n a nd A p p lic a tio ns
We b o f S e rvic e & We b o f D e vic e s

S e ma ntic s O ffline & S to ra g e D e vic e A c c e s s C o nne c tivity

Multime d ia G ra p hic s & 3D P e rfo rma nc e CSS3

1


주요기능 설명 관련 W3C 표준명
웹폼 사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의
 H TML5
(We b F ro m ) 에 사용되는 마크업 , 애트리뷰트와 이벤트
웹에서 즉시모드 (im m e d iate m o d e ) 로 2 차원 그래픽을 그리기
캔버스  C an vas 2D API
위한 API 와 < c an vas > 내 각종 객체를 회전 , 변환하고 그레디
(C AN VAS )  H TML C an vas 2D C o n te xt
언트 , 이미지 생성 등 각종 효과를 주는 기능에 대한 API
S VG
XML 기반의 2 차원 백터 그래픽을 표현하기 위한 언어  H TML5
(S c alab le Ve c to r G rap h ic )
< vid e o > 는 비디오 또는 영화를 보여주기 위해 사용되는 미디어
Vid e o /Au d io 엘리먼트이며 , < au d io > 는 사운드나 오디오 스트림을 표현하기  H TML5
위한 미디어 엘리먼트
G e o lo c atio n 디바이스의 위치 정보 및 방위를 제공하는 API 표준  G e o lo c atio n API
O fflin e We b Ap p lic atio n s 다양한 표준 S Q L 을 사용해 질의할 수 있는 데이터베이스 기능에
 We b S Q L D atab as e
(S Q L D atab as e ) 대한 API
기존의 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로
로컬저장소
웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으  We b S to rag e
(Lo c al S to rag e )
로 저장하는 기능
웹 소캣 웹 애플리케이션이 서버측의 프로세스와 직접적인 양방향 통신을
 We b S o c ke t API
(We b S o c ke t) 위한 API
웹 워커
웹 애플리케이션을 위한 쓰레드 (Th re ad ) 기능에 대한 API  We b Wo rke rs
(We b Wo rke r)
We b G L 은 웹 기반의 그래픽 라이브러리로 자바스크립트 프로그
그래픽 라이브러리
래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저  We b G L
(We b G L)
에서 인터랙티브한 3D 그래픽을 사용할 수 있는 API

1


C o mp a tib ility ta b le s fo r s up p o rt o f HTML 5 in b ro ws e rs

C o m p atib ility tab le s fo r s u p p o rt o f H TML5 C o m p atib ility tab le s fo r s u p p o rt o f C S S 3

C o m p atib ility tab le s fo r s u p p o rt o f JS API

h ttp ://c an iu s e .c o m

1


C o mp a tib ility ta b le s fo r s up p o rt o f HTML 5 in b ro ws e rs

DMo kto p bbro ws eers
e s b ile ro ws rs H TML5 S u p p o rt tim e lin e

Tiz e n1. 0 S ams ung , Inte l, L inux fud
408 15

h ttp ://h tm l5te s t.c o m

1


P lug - in re fe rs to a us e r- a g e nt d e fine d s e t o f
c o nte nt ha nd le rs ( e x P D F Vie we r)

PD F . J S
⚠Warn in g !
B u ild in g faith fu l & e ffic ie n t PD F re n d e re r
B ro ws e rs s h o u ld take e xtre m e c are wh e n in te rac tin g
H TML5 te c h n o lo g y(XH R2, We b Wo rke r) e xp e rim e n t
with e xte rn al c o n te n t in te n d e d fo r p lu g in s .
N o n ative c o d e
Wh e n th ird - p arty s o ftware is ru n with th e s am e p rivile g e s as
th e u s e r ag e n t its e lf,re (wee rab ilitie s x) th e th ird - p arty
S e c u vu ln b s an d b o in

s o ftware b e Mom e as d an Pro j u st asOth e n eS o u th e u s e r ag e n t.
c o zilla Lab s g e ro c – p o s in rc
e

h ttp ://www.w3.o rg /TR/201 1 /WD - h tm l5- 201 1 0525/in fras tru c tu re .h tm l#p lu g in s
h ttp s ://g ith u b .c o m /b e b raw/j wiki/wiki/File - Fo rm ats
s
h ttp ://h tm l5vid e o .o rg

1

HTML 5 적용 사례

HTML 5 C a nva s D e mo

h ttp ://d e m o .riam o re .n e t/d e m o /d e m o .h tm l

1


HTML 5 D ra g &D ro p D e mo

h ttp ://www.d h tm lg o o d ie s .c o m /s c rip ts /d rag - d ro p - c u s to m /d e m o - d rag - d ro p - 3.h tm l

2


HTML 5 S VG Ma p D e mo

h ttp ://d avid lyn c h .o rg /p ro j c ts /m ap h ilig h t/d o c s /d e m o _u s a.h t
e
ml
2


HTML 5 We b RTC ( Re a l Time C o mmunic a tio n)
D e mo

h ttp ://yo u tu .b e /aK1 D C 2zp 6ZE

2


HTML 5 We b G L Wa te r D e mo

h ttp ://m in im al.b e /lab /S p rite 3D /
h ttp ://m ad e b ye van .c o m /we b g l- wate r/
2


HTML 5 D e vic e A PI D e mo

h ttp ://www.yo u tu b e .c o m /v/x2T4BJwPRn
Q
2


D ra g a nd D ro p HTML 5 B a s e G a me Ma ke r

h ttp ://www.s c irra.c o m

2


D a Vinc i HTML 5 WYS IWYG 저작도구

h ttp ://www.d avin c is d k.c o m /e c o /kr/in d e x.h tm l

2


D a Vinc i HTML 5 WYS IWYG 저작도구
1 E xp o rt 된 소스는 수정이 불가능
함
Imp o rt

C us to m F o rmat
E xp o rt
( me ta fo rma t)

S o lu tio n 에서 제공되는 기능 외에는 사용할 수 없으며 , 고객의 니즈에
2 따른 확장과 커스터마이징이 불가능함 (S o lu tio n 종속적 )
저작단계에서 m e ta fo rm at 을 이용하기 때문에 , 3rd Party JavaS c rip t
lib rary 나 C S S lib rary 를 적용할 수 없음

D avin c i 솔루션은 저작단계에서부터
H TML5 를 기반으로 저작함
고객의 N e e d s 에 따라 C u s to m Wid g e t
을 자유롭게 추가할 수 있으며 , 3rd Party
S o lu tio n 과의 혼용 지원

h ttp ://www.d avin c is d k.c o m /e c o /kr/in d e x.h tm l

2


HP We b O S C L O UD 저작도구
We b ( S a fa ri, C hro me o r F ire fo x) 기반 지
원 도구

• 구성

 D rag - an d - d ro p in te rfac e b u ild e r

 C o d e E d ito r & We b 기반 API D o c & H e lp

 Vis u al d e b u g g e r

 S o u rc e c o n tro l in te g ratio n

• 특징

 C lo u d 기반 Wo rkflo w 및 저장 기능 제공

 로그인 (H P 개발자 Ac c o u n t 동기화 )

 프로젝트 별 디렉토리 관리 기능 제공

 Wid g e t 별 기본 S tyle 및 속성

 G PS 및 Map 연동을 위한 설정 기능 지원
h ttp ://are s .p alm .c o m

2


HTML 5 는 Na tive A P I 를 대체하는 방향으로 적용 범위 확
대
Na tive
3D G rap hic s 3D 게임
문서
Pho to g ra p hy
HTML5 Utility 교육
C o mmunic a tio n

F ile up lo a d 금융
p
Me d ia P laye r Ap
F u n c tio n RIA eb 의료
D o c vie we r W
e
as
B 보안 Ric h Me d ia
지도
L5
TM
H 차트 , G rid
포털
위치

검색 기업
We b HTML4
블로그 소셜

뉴스 C a s ua l 게임

H W 접근
We b Pe rfo rm an c e Na tive

2

국내에서 H TML 5 의미

국내 인터넷 환경은 다양성과 개방성이 실종
유선 인터넷 트래픽의 지속적 감소 및 모바일 트래픽 증
가

카테고리 별 모바일 앱과 모바일 웹 이용 방법
국내 포털의 유선 인터넷 트래픽
정보통신정책연구원 201 1 .1 2, H MC 투자증권

3


현재 공공 , 은행 , 커머스 분야에서 비표준 A c tive X 사
용
HTML 5 기반 A c tive X 대체 기술 보급 활동
행정기관
민간 100 대
구분 100 대 사이
사이트
트

Ac tive X 사용 사이트 수 (% ) 86% 82%

총 Ac tive X 사용 프로그램 338 개 305 개

결재 및 인증 41. 1%
WIPI 13. 0% tive X
= Ac
보안 PC5% 모바일 ( 태블릿 )
22. → 40. 0%

글로벌 서비스에 의한 3.3%
파일 처리 6.8% 가입자 ( 체류시간 ) 잠식
사용 기능
웹 확장 문서 0.8% 0.7%

멀티미디어 및 U I 22.4% 31 .0%

기타 5.0% 1 1 .8%

Ac tive X 사용 사례 ( 평균 3.7 ~ 3.9 개 사용 ) 인터넷 이용환경 개선
h ttp ://we b .kis a.o r.kr

3


표준 기반의 서비스 환경 조성을 위한 촉매제
HTML 5 보급 확산을 통한 인터넷 이용 환경 개선

현재 미래

3

글로벌 사업자의 H TML 5 전략

D e s kto p 에서 Mo b ile 로 인터넷 이용 환경 변화
개인의 다양한 인터넷 디바이스 소유 환경 대응

Mo rg an S tan le y In te rn e t Tre n d s Ju n e 7, 201 0
Mc Kin s e y iC o n s u m e r re s e arc h , Ap ril 201 2
3


G o o g le

C hro me + D A RT +S wiffy +
HTML 5s hiv

h ttp ://h tm l5ro c ks .c o m
s lid e s .h tm l5ro c ks .c o m /
www.c h ro m e e xp e rim e n ts .c o m

3


Adobe

D re a mwe a ve r C S 6 + E d g e +
Mus e C re a te J S + S ha d o w

h ttp ://b e ta.th e e xp re s s ive we b .c o m /

3


Mic ro s o ft

Wind o ws 8( Me tro We b A p p ) + IE 10

+ A p p S to re

h ttp ://h tm l5lab s .c o m /

3


F ac ebook

O p e n G ra p h + A p p C e nte r

+ Ring ma rk

h ttp s ://d e ve lo p e rs .fac e b o o k.c o m /h tm l5/

3


A p p le

S a fa ri + We b A p p s + A utho r( E PUB 3)

+ ( - 30%)

h ttp s ://d e ve lo p e rs .fac e b o o k.c o m /h tm l5/

3


리눅스 재단 + 삼성전자 + 인텔

S D K(W3C + U I + D e vic e + Lag ac y)
+ We b S to re

E tc : H P we b O S , E U We n in o s , G o o g le C h o m e O S , Mo zila B o o t- to - G e c ko (B 2G )
h ttp ://tize n .o rg

3


모바일에 이어 데스크탑 , TV, 자동차 , 가전 영역까지
HTML 5 기반 S W 직접 유통 ( 설치형 We b A p p )

플랫폼 사업자 , 제조사 스토
플랫폼 사업자 , 제조사 스토
어
어
지상파 TV, 케이블사업자
3rd Party 미디어 스토어
3rd Party 미디어 스토어
플랫폼 사업자 , 출판사 ( 교과
서)
오픈마켓 사업자

플랫폼 사업자 , 통신사 스토어 , 제조사 스토어 , 3rd Party 스토어 O S 플랫폼 사업자 , S W 도소매유통 (ES D ), 브라우저 개발사

4

 HTML5 스펙 한글 번역본
- h ttp ://j p /h tm l5ko (c le arb o th .o rg )
.m 참고자료
 웹 개발자를 위한 최소 스펙
- h ttp ://j p /h tm l5d e ve l
.m
 알기 쉬운 튜토리얼 및 프리젠테이션
- h ttp ://www.h tm l5ro c ks .c o m
 실전 HTML5 가이드 ( 한글 P D F )
- h ttp ://j p /h tm l5g u id e _ko
.m
 D ive Into HTML5
- h ttp ://d ive in to h tm l5.o rg
 HTML5 개발자 커뮤니티 및 D e v , D e mo 사이트
- h ttp ://www.wh atwg .o rg / , h ttp ://www.h tm l5d e m o s .c o m
 HTML5 리소스 모음
- h ttp ://www.we b d e s ig n e rd e p o t.c o m /201 1 /06/th e - u ltim ate - h tm l5- re s o u rc e - g u id e /
 Mo b ile We b & HTML5 Pe rfo rmanc e O p timiz a tio n
- h ttp ://www.s lid e s h are .n e t/firt/m o b ile - we b - h tm l5- p e rfo rm an c e - o p tim izatio n
 B e s t P rac tic e s fo r a F a s te r We b A p p with HTML 5
- h ttp ://www.h tm l5ro c ks .c o m /tu to rials /s p e e d /q u ic k/
- h ttp ://www.h tm l5ro c ks .c o m /we b ap p fie ld g u id e /to c /in d e x/
 HTML5 F ra me wo rks a nd Us e ful A p p s fo r Mo b ile We b D e ve lo p me nt
- h ttp ://s kyte c h g e e k.c o m /201 1 /1 1 /h tm l5- fram e wo rks - an d - u s e fu l- ap p s - fo r- m o b ile - we b - d e ve lo p m e n t/
 20 Us e ful HTML5 a nd C S S 3 To o ls fo r We b D e s ig ne rs

- h ttp ://t.c o /g 5n H H g iX
 The D e finitive G uid e To HTML5: 14 Pre d ic tio ns F o r 2012
- h ttp ://ln kd .in /U c y44i
 J a va S c rip t & HTML5 F ra me wo rks a nd Re la te d To o ls
- h ttp ://www.re m o te s yn th e s is .c o m /p o s t.c fm /50- javas c rip t- h tm l5- fram e wo rks - an d - re late d - to o ls
4

Html5의 현재 그리고 미래 배포자료 최종

More Related Content

Viewers also liked

Similar to Html5의 현재 그리고 미래 배포자료 최종

Html5의 현재 그리고 미래 배포자료 최종