[인터넷] HTML5의 개념, 구성, 주요기능, 전망

I. 차세대 웹 응용 개발을 위한 HTML 표준, HTML5의 개요

가. HTML5의 정의

• W3C에서 만들고 있는 차세대 웹 표준으로 특정 기업의 독점 기술에 의존하지 않는공개되고 표준화된 웹 환경을 만들기 위해 기술
• add-on 또는 plug-in 없이도 웹 사용이 가능하도록 광범위하면서도 자세하게 규약 제정
• 문서 구조(DOM)와 마크업(Markup) 표준, API 표준으로 구성되고, 추가적인 플러그인 없이 Rich Web응용을 가능하게 함

나. 웹표준의 발전과 HTML5
웹표준의 발전
 - 1991: HTML
 - 1994: HTML2
 - 1996: CSS+자바스크립트
 - 1997: HTML4
 - 1998: CSS2
 - 2000: XHTML
 - 2005: AJAX
 - 2009: HTML5

• 1989년 팀버너스리에 의해 처음 개발된 후 HTML2, HTML3.2, 1999년 HTML4.01로발전함
• 2004년 애플, 모질라, 오페라 등이 WHATWG(Web Hypertext Application Technology Working Group) 결성 이후 리치 웹 응용의 실용적 플랫폼에 목적을 둔 HTML, CSS,DOM 및 자바스크립트 개선 표준개발 시작
• 2007년 이후 W3C가 인계받아 HTML5 표준 개발WD(Working Draft) 수준으로 진행

---

II. HTML5 표준의 구성

가. 시맨틱 마크업 부분

• 기존 HTML4보다 명확한 의미표현이 가능하도록 26개 정도의 새로운 마크업 추가로검색엔진 등 웹 콘텐츠 기반의 다양한 서비스나 응용의 개선된 기능 제공 가능

HTML  <div id = "header">
<div id ="nav">
<div class="article">	<div id ="sidebar">
<dif class = "section">
<div id="footer">

HTML5  <header>
nav
<article>	<aside>
<section>
<footer>

• 기존 HTML4.X이하 버전과 HTML5와의 가장 큰 특징은 위의 예와 같이 <article>, <section>과 같은 다양한 목적으로 사용되던 사용자 정의 형식의 태그들이 모두 표준화로사용될 수 있다는 것

요소	내용
section	- 문서나 어플리케이션의 섹션
nav	- 네비게이션을 위해 구성된 섹션
article	- 문서 내의 독립적인 글 블로그 글이나 뉴스 본문 등
aside	- 문서의 주 내용이 아닌 관련성이 낮은 내용 본문과 관련없는 사이트 링크 광고, nav 요소의 그룹 등
header	- 소개나 네비게이션 기능들의 묶음
footer	- section의 footer를 나타냄. 저자나 저작권등

 

나. AP 부분

• 웹 기반의 응용 개발을 지원하기 위해 새로운 기능 추가

신규 API	설명
Timed media playback	- 내장 비디오 및 오디오 재생을 위한 video, audio 요소
Offline Web database	- 오프라인 웹 애플리케이션 기반 API
Document editing	- 새 전역 content editable 속성과 함께 지원 되는 편집 API 기능
Drag-and-drop	- draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능
Browser history management	- 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능(보안제한 모델이 있음)
MIME type and protocol handler registration	- 웹 애플리케이션이 독립적으로 특정 프로토콜 및 미디어 형식을 등록 할 수 있는 API
Microdata	- 사용자가 정의의 엘리먼트 지원
Canvas	- 웹상에서 2차원 그래픽 표현 (immediate mode )
Cross-document messaging	- 다중 메시징 처리 기능

---

III. HTML5의 표준범위와 주요기능

가. HTML5의 주요 표준 범위

설명	주요 표준
HTML5 : A vocabulary and associated APIs for HTML and XHTML	- 가장 기본적인 HTML5 표준인으로 표준 전체에 공통적인 부분에 대한 내용과 마크업 부분에 대한 표준
HTML Microdala	- HTML 문서에서 시맨틱 마크업을 간단히 내장시키기 위한 메커니즘에 대한 표준
Canvas 2D API	- 웹에서 즉시모드(Immediate mode)로 2차원 그래픽을 그리기 위한 2D Canvas Drawing API 표준
HTML Canvas 2D Context	- Canvas 태그 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능에 대한 표준
Server-Sent Events	- 서버가 데이터를 웹 페이지로 푸쉬하기 할 때 사용하기 위한EventSource 인터페이스에 대한 표준
Web Storage	- 웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하기 위한 API 표준
HTML5 Communications	- 소스 도메인과 상관없이 문서들 간에 커뮤니케이션을 가능하게 하는 메시징 메커니즘 표준 (크로스 도메인문서 접근을 가능)
Web Workers	- 웹 응용 개발자가 쓰레드와 같은 개념으로 백그라운드 워커를 생성할 수 있도록하는 API 표준
Web SQL Database	- 다양한 SQL을 사용해 질의할 수 있는 데이터베이스에 저장된데이터를 위한 API 표준
Web Sockets API	- 웹 응용이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API 표준
WebSimpleDB API	- 트랜젝션 데이터베이스에서 정열된 키와 값이 쌍으로 구성된 데이터를 저장하거나 검색하기 위한 API
Geolocation API	- 디바이스의 지리적 위치 정보를 제공하는 API 표준
File API	- 웹 응용이 파일 정보 파일 리스트에 대한 정보 접근 그리고 파일 자체의 데이터를 읽기 위한 API 표준

나. HTML5의 주요 기능과 WBC 표준과의 관계

주요 기능	설명	관련 W3C 표준명
웹폼 (Web Form)	- 사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에 사용되는 마크업, 애트리뷰트와 이벤트	HTML5
캔버스 (Canvas)	- 웹에서 즉시모드(immediate mode)로 2차원 그래픽을 그리기 위한 API와 canvas 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능에 대한 API	Canvas 2D API HTML Canvas 2D Context
SVG (Scalable Vector Graphic)	- XML 기반의 2차원 벡터 그래픽을 표현하기 위한 언어	HTML5
Video/Audio	- Video 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리먼트이며, audio는 사운드나 오디오 스트림 HTML5을 표현하기 위한 미디어 엘리먼트	HTML5
Geolocation	- 디바이스의 지리적 위치 정보를 제공하는 API 표준	Geolocation API
오프라인 웹 응용 (Offline Web Application)	- 인터넷 연결이 지원되지 않는 경우에도 웹 응용이 정상적으로 수행될 수 있도록 지원하는 기능으로 응용에 대한 캐싱과 데이터에 대한 캐싱으로 구성	HTML5 Web SQL Database
웹 SQL 데이터베이스 (Web SQL Database)	- 다양한 표준 SQL을 사용해 질의할 수 있는 데이터베이스 기능에 대한 API	Web SQL Database
로컬저장소 (Local Storage)	- 기존의 쿠키의 기능을 개선하기 위한 목적으로 개발된기능으로 웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능	Web Storage
웹 소캣 (Web Socket)	- 웹 응용이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API	The WebSocket API
웹 워커 (Web Worker)	- 웹 응용을 위한 쓰레드(Thread) 기능에 대한 API	Web Workers

---

IV. HTML5의 보안 취약성과 모바일 웹 생태계에 미치는 영향

가. HTML5의 주요 보안 취약성

주요 보안 취약성	설명
Cross-Document Messaging	- HTML4에서는 보안을 위해 다른 도메인의 페이지로 데이터를 전달하거나 다른 도메인 페이지의 데이터 접근이 불가능 하였음 - HTML5에서는 postMessage라는 API를 통해 다른 도메인에서 실행 중인 자바스크립트에 데이터를 전달하는 기능 추가되어 요청을 한 도메인에 대한 체크가 되지 않을 경우 악의적인 메시지에 노출될 위험성 존재함
Local Storage	- SQL을 통해 오프라인 시에도 데이터를 활용할 수 있는 클라이언트 사이트 오프라인 데이터베이스 - 민감한 정보(패스워드, 주민번호, 이메일 내용 등)가 저장되어 있을 경우, SSLunique database 생성하여 사용, SQL Injection 방지를 위한 prepared SQL 구문을 사용하여야 함
Attribute Abuse	- autofocus의 악의적 사용 : window에 포커스를 줄 수 있으며, window에 포커스가 있을 때 악의적 코드가 실행되도록 할 수 있음 - poster srcdoc과 같은 외부 리소스에 접근하기 위한 attribute 사용 시, 악의적인 리소스에 접근에 대한 제어 필요 - 이런 속성들은 어플리케이션의 풍부한 기능성을 위해 새로 추가되었으나(결함은 아님) 악의적인 사용자에 의해 악용될 수 있을만큼 개발에 주의가 필요함
inline Mulmedia and SVG	- (audio), (video>, <svg)와 같은 새로운 태그를 지원하기 위해 HTML5를 지원하는 브라우저들은 각자만의 구현을 해야 하므로, 안전성에 대한 버그들이 브라우저마다 각기 다르게 존재할 수 있음 (예: 초기 구글 크롬에서 크로스도메인 관련한 버그 존재)
Input Validation	- 클라이언트에서 입력값에 대해 검증하는 것은 변조가 가능하므로 반드시 서버사이드에서 입력값에 대한 검증이 필요함 (예: 정규식을 체크하는 코드가 DoS 공격(예: 무한루프로 메시지 전송)하는 코드로 변조가 가능함)

나. HTML5가 웹 생태계에 미치는 영향

1) 모바일웹 콘텐츠/응용 개발 시 지원 기능 향상
- HTML5 표준에 추가되는 개선 기능으로 모바일웹 응용 개발에 다양한 특장점을 갖게 됨

HTML5 지원 기능	기술 특징	모바일 웹 서비스 장점
오프라인 웹응용 기능	- 오프라인 환경에서도 웹 응용이 정상적으로 실행 - 용용 캐싱(Application Cashing) 기능 - 웹 SQL 데이터베이스 기능	모바일 웹 접속과 무관하게 정상 동작 가능
Geolocation	- 브라우저가 디바이스의 위치정보를 접근 가능 - 디바이스 API 표준, 네비게이션 기능 - 사진 동영상 등에 위치정보 추가 가능	인터넷 지도 서비스 연동, 파일관리 서비스 등 다양한 웹 응요 개발 가능
웹폼(Web Form)	- 사용자의 입력정보를 받기 위해 입력 양식 - 전자메일, URL, 숫자, 범위, 달력 등 12개 항목 추가	모바일 디바이스 인터페이스 기능 향상
웹 소켓(Web Socket)	- 웹응용과 서버 측 프로세스와 양방향 통신 지원기능 - XHR(XMLHttpRequest) 헤더메시지 교환기능 대체 - 브라우저의 양방향 통신 채널 제공	웹응용과 서버는 데이터 교환만 수행 (속도 개선)

 

---

V. HTML5의 현황과 전망

가. HTML5가 시장에 미치는 영향

시장	제약 사항
PC 시장	- 사용자 취임 및 사용자 PC 환경에 따라 HTML5를 지원하지 못하는 다양한 브라우저 설치되어 있음 - 웹접근성을 위해 HTML5를 지원하지 못하는 브라우저에서도 실행되는 어플리케이션 개발로 인한 비용 증가 예상됨
모바일 시장	- 단말기마다 다양한 디바이스에 접근하기위한 표준 미비 - 보안 취약성에 대한 개발자의대응 능력 미흡

나. 모바일서비스 기업의 기술 전략 현황

1) 구글

•  전략적으로 개발하던 구글 기어스(Google Gears)를 포기하고 HTML5에 집중
• 유튜브(Youtube)에서 플래시 플러그인(Flash Plug-In)없이 표준 기반으로 동영상을서비스하는 HTML5 기반의동영상 서비스 시작
• 안드로이드의 웹 플랫폼에도 이미 HTML5의 일부 기능을 제공, 최근 W3C의 HTML5 관련 WG에 적극적으로 참여

2) 애플

• 아이패드를 발표하면서 앞으로 아이폰과 아이패드에서 플래시를 배제하고 HTML5를적용할 것임을 시사했으며, 이미 아이튠즈 등 주요 소프트웨어에 웹의 표준 기술을 적극적으로 도입

 

다. 모바일 웹 서비스 활성화를 위한 방안

• 웹 기술만을사용하여 하드웨어 및 OS 기반의 디바이스를 제어가 가능한 위한 하이브리드 모바일 앱을 위한 HTML5 표준 필요
• HTML5와 대응되는 기술인 Flash, 실버라이트 등과 같은 플러그인 기술 사용에 대한적절한 적용 능력과 HTML5 적용으로 인해 발생 가능한 문제 (브라우저 호환성, 보안취약성 등)에 대한 대응 능력 향상

[참고] 웹 App과 네이티브 App 비교

항목	Web App	Native App
개발 효율성	- 플랫폼에 관계 없이 한번만 개발 (안드로이드 아이폰, 블랙베리………)	- 특정 플랫폼 전용이므로 각 플랫폼 별로 각각 개발해야 함
개발 플랫폼	- 꼭 Mac 이 필요하지는 않음	- Mac 이 필요 (iPhone ) - Android 는 멀티플랫폼 (Win, Mac, Linux)
개발 언어	- HTML, CSS Javascript	- Objective C (IPhone), Java (Android )
비용	- 개발 및 유지 비용 저렴 - 앱 개발자 등록 비용 없음	- 개발 및 유지 비용 증가 - 앱 등록 비용 매년 지불($99 (iPhone) or $35 (Android))
개발 방법	- 기존의 웹 개발 방법으로 개발 가능	- 플랫폼 별 전용 개발 환경과 언어를 사용하여 개발 - XCode(iPhone), Eclipse (Android )
배포 방법	- 자동 배포 - 서버에서 바로바로 업데이트가능	- 사용자가 직접 설치 및 업그레이드, 업그레이드 할 때 마다 검수(iPhone )
디바이스 연계	- 제한적디바이스 사용(카메라, 마이크등)	- 디바이스의 모든 기능을 활용
수익 모델	- 자체 결제 시스템 또는 광고수익	- App Store/Market를 통한 판매/수익 & 광고

- 네이티브 앱 : 컴퓨터나 스마트폰에 설치해 사용하는 애플리케이션
- 웹앱: 브라우저를 통해 사용하는 애플리케이션