[기고]HTML5 제대로 알고 써야

HTML5 열풍이 거세다. 각계각층에서 HTML5를 둘러싼 열띤 토론이 일어나고 있는 가운데 저마다 HTML5로 개발해 제품을 출시했다며 마케팅한다. HTML5를 도입했다고 발표하기도 한다. 하지만 자세히 들여다보면 대부분 HTML5가 아니라 액티브X를 다운로드하지 않는, 액티브X 대안으로 사용하는 HTML5를 얘기한다.

업계나 현장에서 많은 사람을 만나 얘기하다 보면 생각보다 HTML5를 제대로 알고 쓰는 일은 매우 드문 편이다. HTML5를 준비하는 기업이 기술적으로 활용했다기보다는 마케팅 관점에서 액티브X를 없앨 수 있는 대안으로 활용했기 때문이라고 판단된다.

액티브X만 없애면 HTML5일까. 물론 액티브X만 없애고 순수하게 HTML로만 개발해도 아무 문제없을 수 있다. 그렇다면 액티브X만 없애면 되지 HTML5가 뭐가 그리 중요한지 하고 생각할 수 있다. HTML이 어떤 용도로, 왜 생겼는지, 왜 HTML5가 나왔고 HTML5가 어떠한 것인지 이해하면 전혀 다르게 판단할 수 있다.

인터넷에서 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어인 HTML은 1991년 말 대중에게 공개됐다. 단순한 텍스트를 웹에 올리는 수준에 불과했던 HTML은 점차 많은 사람이 이용했고 웹이 성장함에 따라 HTML 국제 표준안이 필요해졌고 1994년 국제웹표준화 기구인 W3C가 출범하면서 지속적으로 발전했다. HTML4.0이 나올 때까지 수정보완을 거쳤지만 기본적으로 웹에서 문서를 표현하는 기술로 존재해왔다. 단순히 문서를 표현하는 기술이었던 HTML은 웹에서 다양하고 방대한 자료를 처리하기 위해 여러 가지 기술이 추가되며 발전했다. 하지만 순수하게 웹에서 프로그래밍하기에는 한계가 있었다.

이 문제를 해결하기 위해서 W3C는 2008년 초안을 발표하고 HTML5 스펙을 만들어 2014년 10월 28일 발표했다.

HTML5는 어떠한 점이 달라졌을까. 먼저 구조적인 요소가 추가됐다. HTML5 이전 웹 문서인 HTML 문서는 구조보다는 표현을 위한 수단에 가까웠다. 태그는 문서를 보여주기 위해 제각각 형태로 사용됐고 이러한 구조는 자동으로 문서 구조를 파악하고 분류·탐색하기 힘들었다. HTML5는 이런 부분을 해결하려고 논리적인 구분을 할 수 있도록 article·header·section·footer 같은 문서 구조를 위한 시멘틱 태그가 추가됐다.

멀티미디어 요소도 추가됐다. HTML5 이전 웹 브라우저에서 멀티미디어를 재생하려면 플래시나 액티브X를 설치해야 했기 때문에 불편함과 보안 위협에 노출돼 있었다. HTML5에서는 멀티미디어 기능 비디오와 오디오 콘텐츠 재생을 웹 브라우저에서 자체적으로 구현해 와 태그를 이용해 플러그인 설치 없이 자연스럽게 재생할 수 있다.

HTML5는 HTML4와 비교하기 어려울 정도로 엄청나게 확장된 표준이다. HTML5에는 새로운 엘리먼트가 대거 추가됐다. 부분적으로 기존 엘리먼트 기능과 목적이 변경됐다. HTML5는 2차원 그래픽 기능인 캔버스와 XML 기반 백터 그래픽 SVG를 지원해 별도 프로그램 없이 웹 브라우저상에서 화려한 그래픽 효과를 구현해 낼 수 있다. 또 기존 웹 콘텐츠에서 많이 활용되는 구조를 분석하고 확장 HTML5 폼을 추가해 스크립트 없이 표현할 수 있다. 이외에 브라우저에 데이터 저장을 위한 웹 스토리지, 양방향 통신을 위한 웹 소켓, 스레드 기능인 웹워커, 데이터베이스 기능인 인덱스드 DB 등도 개발자나 사용자에게 보다 편리한 환경을 제공해 준다.

HTML5를 이전 HTML과 비교해 한마디로 표현하면 이렇다. 이전 HTML이 문서를 표현하기 위한 기술이었다면 HTML5는 웹에서 프로그램을 효과적으로 개발할 수 있도록 해주는 표준이다.

HTML5로 웹에서 강력한 프로그램을 쉽게 만들 수 있는 시대가 열렸다. 액티브X 대안으로 쓰는 HTML5가 아니라 웹 개발 플랫폼 HTML5 장점을 충분히 활용해 시스템을 개발해야 할 때다. 우리 모두가 HTML5 장점을 제대로 누리기 바란다.

이상돈 토마토시스템 대표 sdlee@tomatosystem.co.kr