티스토리 툴바



1.    머리말


HTML5 W3C(World Wide Web Consortium)를 중심으로 개발되고 있는 차세대 HTML 표준으로 웹 응용 개발을 위한 표준 개발을 목표로 하고 있다. 따라서 HTML는 현재 사용중인 HTML4에 비해 상당히 많은 새로운 기능들을 포함하고 있으며 앞으로도 관련 표준들이 추가적으로 제안되어 보강될 것으로 예상된다. 이와 관련하여 세계적인 주요 IT 기업들은 발 빠른 대응을 하고 있다. 구글은 최근까지 공들여 개발한 구글 기어스(Google Gears)를 포기하고 HTML5에 집중하기로 하였으며, 자사의 핵심 서비스 중 하나인 유튜브(Youtube)에서 플래쉬 플러그인(Flash Plug-In)없이 표준 기반으로 동영상을 서비스하는 HTML5 기반의 동영상 서비스를 시작하였다. 또한 구글은 스마트폰 플랫폼인 안드로이드의 웹 플랫폼에도 이미 HTML5의 일부 기능을 제공하고 있으며, 최근 W3C HTML5 관련 WG에 적극적으로 참여하여 하는 등 HTML5 기술에 총력을 기울이고 있다. 이와 더블어 애플도 최근 아이패드를 발표하면서 앞으로 아이폰과 아이패드에서 플래쉬를 배제하고 HTML5를 적용할 것임을 분명히 하였으며, 이미 아이툰즈 등 주요 소프트웨어에 웹의 표준 기술을 적극적으로 도입하고 있다. 또한 애플도 W3C HTML WG의 공동의장으로 활동하는 등 HTML5 관련 표준화 활동에 적극적으로 대응하고 있다. 본 고에서는 이와 같이 최근 IT 업계에서 화두가 되고 있는 HTML5의 주요 특징들을 간단히 살펴보고 이들이 모바일 웹 환경에서 적용될 경우 예상되는 변화에 대해서 소개한다.

 


2.    HTML5 표준


HTML5 표준은 기존의 HTML 표준의 한계를 극복하기 위한 차세대 HTML 표준으로 추가적인 플러그인 없이 리치 웹 응용을 가능하게 하는 것을 목적으로 한다. HTML5 표준의 내용은 크게 문서구조와 마크업 표준 부분과 API 표준으로 구성되어 있는데, 이와 같은 마크업과 API 부분의 혼재와 많은 분량에서 발생되는 혼란스러움과 표준 개발의 효율성을 높이기 위해 2009 4월 이후에 표준안이 여러 개의 문서로 분리되어 개발되고 있다. 또한 이에 대한 표준 개발은 W3C HTML WG 이외에도 웹 응용(Web Application) WG, Geolocation WG 그리고 디바이스 API 및 정책(Device API and Policy) WG에서 관련된 표준을 개발하고 있다. 최근 웹 응용(Web Application) WG의 경우 활동계획서를 다시 정리하면서 HTML5와 관련된 5~6개 정도의 추가적인 표준 개발을 제안하는 등 적극적으로 HTML5에 대한 표준개발을 진행하고 있다.

 

2.1 HTML5의 역사


HTML(HyperText Markup Language) 1989년에 팀 버너스리(Tim Berners-Lee)에 의해서 처음으로 개발된 이후 HTML 2.0, HTML 3.2 그리고 1999년의 HTML 4.01까지 인터넷 산업을 폭발적으로 확장시키며 빠르게 발전해 왔다. 그러나 2002년에 제정된 XHTML 1.0 표준 이후 XHTML 2.0 표준 개발에 대한 시도가 시장으로부터 외면을 받았다. 이러한 시점에 W3C와 생각이 다른 주요한 브라우저 업체인 애플, 모질라 그리고 오페라 등이 2004년에 WHATWG(Web Hypertext Application Technology Working Group)을 결성해서 리치 웹 응용의 실용적 플랫폼에 목적을 둔 HTML, CSS, DOM 및 자바스크립트 개선 표준 개발을 시작하였다. 2007년부터 W3C WHATWG의 결과물을 인계를 받아 현재까지 표준 개발을 진행하고 있으며 현재 WD(Working Draft) 상태이다.

 

2.2 HTML5의 주요 특징


HTML5 표준은 시맨틱 마크업 부분과 API 부분으로 크게 나누어 볼 수 있다. 시맨틱 마크업 부분은 기존 HTML 버전4보다 훨씬 더 명확하게 의미 표현이 가능하도록 26개 정도의 새로운 마크업이 추가되었다. 이를 통해서 검색 엔진 등 웹의 콘텐츠를 기반으로 하는 다양한 서비스나 응용은 개선된 기능을 제공할 수 있을 것으로 기대된다. API의 경우는 웹 기반의 응용 개발을 지원하기 위해 HTML4까지는 존재하지 않았던 새로운 기능이 추가된 부분이다. HTML5가 상당히 많은 내용이 있으나 주요 특징들을 아래 표와 같이 정리해 볼 수 있다.

 

< 1> HTML5의 주요 특징과 관련 표준명

주요기능

설명

관련 W3C 표준명

웹폼

(Web From)

사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에 사용되는 마크업, 애트리뷰트와 이벤트

-   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

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

 

2.3 HTML5 표준 개발 일정


W3C HTML WG에서 현재까지 진행되고, 계획하고 있는 HTML5 표준에 대한 일정은 아래와 같다. HTML5 표준 초안 최종본은 20101월까지 완료될 계획이었으나 아직 마무리되지 않았다. 따라서 전체적인 일정도 다소 늦어질 것으로 예상된다.

2008 2 : HTML5 첫번째 표준 초안 (First Public Working Draft)

2010 1 : HTML5 표준 초안 최종본 (Working Draft Last Call)

201012: HTML5 후보 표준안 (Candidate Recommendation)

2012 1 : HTML5 제안 표준안 (Proposed Recommendation)

2012 3 : HTML5 최종 표준안 (Recommendation)

 

2.4 HTML5 브라우저 지원 현황


HTML5 W3C WD(Working Draft) 상태임에도 불구하고 현재 주요 브라우저 개발업체들 간의 경쟁이 치열하게 진행되고 있으며 주요한 기능들부터 빠르게 개발되어 적용되고 있다. 아래 테이블은 최근 공개된 MSIE9까지 포함해서 HTML5 주요기능에 대한 브라우저 지원 현황을 보여준다.

 

< 2> HTML5의 주요특징 별 브라우저 지원현황

주요기능

크롬

파이어폭스

사파리

오페라

IE

안드로이드

웹 플랫폼

캔버스(Canvas)

-

-

SVG

-

Video

Geolocation

(iPhone)

-

오프라인 웹 응용

(mobile)

-

SQL 데이터베이스

(mobile)

-

웹 워커

(mobile)

-

-

 


3.    모바일 웹 환경에서 HTML5의 의미


웹에서 어떠한 기능을 구현하는가에 따라 다르겠지만 새로운 시맨틱 마크업을 추가한 HTML5는 같은 기능을 구현할 때 HTML4에 비해서 훨씬 적은 자바스크립트 코드를 사용하게 된다. 따라서 기본적으로 HTML5가 네트워크 속도에 예민한 모바일 환경에 적용하기에 더 적합하다고 말할 수 있다. 본 절에서는 HTML5가 현재 사용하고 있는 HTML4에 비교해서 모바일 웹 콘텐츠나 응용 개발시 장점을 갖는 특징들에 대해서 설명한다.

 

3.1 오프라인 웹 응용(Offline Web Application)


HTML5의 큰 특징 중의 하나는 인터넷이 되지 않는 오프라인 환경에서도 웹 응용이 정상적으로 실행될 수 있도록 하는 오프라인 웹 응용 기능을 지원하는 것이다. 이러한 기능은 네이티브 응용(Native Application)은 기본적으로 제공하는 기능이지만 웹 응용의 경우 프로그램이 실행될 때 응용과 관련된 모든 파일이 브라우저로 로딩이 되는 것이 아니라 실행하면서 사용자가 선택하는 메뉴에 따라서 필요한 부분을 로딩하고, 더불어 웹 응용은 응용을 구성하는 파일들뿐 아니라 사용자의 데이터도 필요할 때 서버에서 로딩하기 때문에 인터넷이 되지 않는 환경에서는 정상적으로 동작할 수 없었다. 그러나 HTML5는 응용 캐슁(Application Caching) 기능과 웹 SQL 데이터베이스 기능을 새롭게 추가하여 오프라인에서 웹 응용이 정상적으로 동작할 수 있도록 지원한다. 이러한 기능은 모바일 웹에서는 반드시 필요한 필수적인 기능이다.

 

3.2 Geolocation


HTML5는 브라우저가 디바이스의 위치정보를 접근할 수 있는 Geolocation 기능을 제공하며 이러한 기능은 이동성이 있는 모바일 환경에는 꼭 필요한 기능이다. 모바일 웹 서비스나 응용은 이러한 기능과 다양한 오픈 API(Open API)을 이용하여 기본적인 네비게이션 기능뿐 아니라 사용자 위치 기반으로 근처의 주차장, 병원, 약국, 커피전문점 등 유용한 정보를 서비스 할 수 있다. 또한 향후 W3C의 디바이스 API 표준을 통해 웹 응용이 사진이나 동영상을 제어할 수 있게 되면 모바일 디바이스에서 캡쳐한 미디어 화일에 위치정보를 추가하고 인터넷의 지도 서비스 연동을 통해 자신의 미디어 파일을 관리하는 서비스 등 무궁무진한 새로운 모바일 웹 응용 개발이 가능할 것으로 기대된다. 아래의 (그림 1)은 모바일폰과 랩탑의 브라우저에서 Geolocation 기능을 사용한 예를 보여준다. 특히 첫 번째 그림은 플리커(flickr)에서 HTML5 Geolocation 기능을 이용하여 사용자 근처의 사진들을 보여주는 웹 응용을 보여준다.

 





(그림 1) 모바일 폰 및 랩탑 브라우저에서 HTML5 Geolocation 기능 사용 예

 

 

3.3 웹폼(Web Form)


사용자의 입력정보를 받기 위해 사용되는 입력형태를 정의하는 웹폼과 관련하여 HTML4는 정의 가능한 입력형태(Input Type) 7개 정도였으나 HTML5는 전자메일(email), URL, 숫자(number), 범위(range), 달력(month) 등 일반적으로 많이 사용되는 12개 정도의 추가적인 입력 형태를 지원한다. 이러한 추가적인 입력형태는 사용자가 모바일 웹 환경에서 값을 입력할 때 자동으로 적절한 키보드를 보여주는데 활용될 수 있다. 예를 들어 아래그림에서 첫 번째 입력화면은 입력형태가 “email”로 정의되어 있으므로 이메일을 입력하기 위해 필요한 영문키보드와 @가 포함된 키보드를 보여준다. 두 번째 입력화면에서는 입력형태가 “url”로 정의되어 있으므로 영문키보드와 “.”, “/”, “.com”가 포함된 키보드를 보여주고, 세번째 입력화면은 입력형태가 “number”로 정의되어 있으므로 숫자가 포함된 키보드를 보여준다. 이러한 기능은 사용자 인터페이스가 상대적으로 약한 모바일 웹 환경에서는 매우 편리한 기능이다. 또한 HTML5에서는 사용자가 입력 값이 적절한 값인지를 검사하는 기능도 제공한다. 즉 입력형태가 “email”이라면 사용자가 입력한 값이 전자메일의 문법에 맞는지를 검사하는 기능을 브라우저가 기본적으로 제공한다.


 

(그림 2) HTML5 웹폼(Web Form)의 입력형태(Input Type)별 입력키보드 제안 예

 

3.4 웹 소캣(Web Socket)


HTML5는 웹 응용이 서버측의 프로세스와 직접적으로 양방향 통신을 가능하게 하는 웹 소캣 기능을 제공한다. 지금까지 개발자는 이러한 기능을 위해 XHR(XMLHttpRequest)을 사용해 왔으나 이는 메시지의 크기와 상관없이 지속적으로 HTTP 헤더를 포함한 메시지를 교환해야 하는 문제점이 있었다. HTML5의 웹 소캣은 브라우저에서 양방향 통신 채널을 제공하는 것으로 일단 웹 소캣을 획득하면 웹 응용과 서버는 데이터만 교환한다. 따라서 이러한 기능은 속도에 민감한 모바일 웹 환경에 반드시 필요한 유용한 기능이다.

 


4.    맺음말


현재 HTML5 W3C의 표준 초안(Working Draft) 상태에 있음에도 불구하고 최근 구글이 자사의 주요 서비스 중 하나인 유튜브(Youtube)에서 HTML5 기반의 동영상 서비스를 시작한 것은 큰 의미를 갖는다. 또한 사파리, 파이어폭스, 오파라 그리고 IE9까지 주요 브라우저 업체들이 HTML5의 주요 기능들을 이미 브라우저에 추가하여 제공하고 있으며, HTML5의 추가적인 기능 구현과 브라우저 처리 속도에 대한 경쟁이 점점 더 치열해 지고 있는 상황이다. 그리고 HTML5에 대한 표준을 개발하고 있는 W3C에서도 주요 브라우저 업체들이 적극적으로 참여하여 표준 개발을 최대한 빨리 마무리하기 위한 노력이 이루어 지고 있는 상황이다.


또한 최근 IT 업계의 가장 큰 이슈는 스마트폰과 이에 대한 응용과 콘텐츠에 대한 에코시스템이다. 애플의 아이폰, 구글의 안드로이드 등 다양한 스마트폰 플랫폼이 출현하고 플랫폼 개발사, 단말제조사, 이동통신사 등이 경쟁적으로 자사의 스마트폰 마켓을 시작하면서 스마트폰 응용의 개발과 유통에 대한 엄청남 분열이 문제가 되고 있는 상황이다.


최근 이러한 문제를 해결하는 하나의 대안으로 웹 표준 기반의 모바일 응용이 제시되고 있는 상황이며, 이 중심에 있는 표준 중의 하나가 HTML5 이다. 앞에서 소개했듯이 HTML5 HTML4와는 비교하기 어려울 정도로 새로운 기능들이 많이 포함되어 있어 앞으로 모바일 웹 콘텐츠와 응용 개발에 효과적인 적용이 가능할 것으로 예상된다.


따라서 모바일 웹 콘텐츠나 응용 및 서비스와 관련된 국내 업체들은 현재 개발되고 있는 HTML5 표준 현황 및 브라우저 업체들의 기능 지원 현황 등을 예의주시할 필요가 있으며, 이러한 상황을 고려하여 향후 기업의 전략을 수립하는 것이 필요할 것으로 사료된다.

 

(PDF 버전): HTML5와 모바일 웹


[참고문헌]

[1]   이원석, HTML5 표준 개발 현황, IT Standard Weekly, 2010. 3.

[2]   W3C HTML WG, http://www.w3.org/html/wg/

[3]   W3C Web Application WG, http://www.w3.org/2008/webapps/

[4]   W3C Geolocation WG, http://www.w3.org/2008/geolocation/

 

저작자 표시 비영리 변경 금지
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. wisengood 2010/07/19 10:52  댓글주소  수정/삭제  댓글쓰기

    예제로 올려 주신 이미지 몇개가 안 보입니다.. 다시 올려 주실 수 있을까요??

  2. website 2012/03/27 20:46  댓글주소  수정/삭제  댓글쓰기

    네가불 준 노랫소리그 우리마음 대의노래였고