HTML5의 특징

HTML5의 특징에 대해 정리한 포스팅입니다.


마크업 세분화

일반적인 웹 페이지에는 많이 사용되는 요소들이 있다. 예를 들면, 사이트를 이동하는데 사용되는 네비게이션 메뉴라던지, 화면 제일 아래에 있는 copyright 정보(하단 영역) 등이 있다. 이러한 요소들을 표시하기 위해서 예전에는 각종 <div> 태그들을 이용해서 표시하였다. 때문에 결과물을 사람이 눈으로 보고 어떤 부분이 네비게이션 영역이고 어떤 영역이 하단 영역인지 알 수는 있어도, computer가 이를 구분할 수 있는 방법은 없었다.

Computer가 이 영역을 알고 있다는 점이 왜 중요할까? 시각장애인들을 위한 text-to-speech 솔루션을 웹에 적용한다고 했을 때, 네비게이션 영역이나 하단 영역이 아닌 "컨텐츠" 영역이 어디서부터 어디까지인지를 알아야 사용자가 정작 원하는 정보를 읽어줄 수 있을 것이다. 이 블로그의 경우를 예로 들자면 매번 블로그 제목과 각종 네비게이션 정보를 읽어줄 것이 아니라 이 글의 본문을 바로 감지해서 읽어주고 싶을 때 HTML5의 새로운 태그들은 유용하게 사용될 것이다.

멀티미디어 지원 강화

그동안 일반적으로 동영상 재생과 오디오 스트리밍을 위해서 사용된 기술은 Flash였다. Flash는 왜 사용되었을까? 일차적인 목표는 스트리밍해서 사용자들이 접근해야만 하는 정보를 저장하기 위해서였다. 초창기의 음악 사이트들은 HTML 페이지에 음악 파일들을 그대로 노출시켰고, HTML을 아는 유저라면 음악 파일들의 링크에 직접 접근해서 파일들을 다운받을 수 있었다.

또한 고해상도 동영상이 웹에서 보편적으로 사용되게 되자, 브라우저 자체 기능만으로는 이러한 고해상도 동영상을 재생하기는 무리가 따랐다. 따라서 Media Player나 Quicktime 등의 plug in을 설치하거나 Flash, Silverlight 등의 plug in을 설치하여 고해상도 동영상 실시간 스트리밍 및 decoding을 해왔던 것이다.

그런데 이러한 plug in 중심의 멀티미디어 재생 방식이 mobile 시대로 넘어오면서 종말을 맞이하게 되었다. 2011년 현재 단일 platform으로 가장 많은 web traffic을 발생시키고 있는 iOS의 경우 Flash와 Silverlight, 또는 어떠한 plug in 형태의 동영상 플레이어도 지원하지 않는다. Windows Phone 7 역시 Flash를 지원하지 않는다. 따라서 Web browser 자체적으로 멀티미디어를 재생해야 하는 필요가 발생하였고 HTML5는 이를 표준으로 정하여 plug in 없이도 멀티미디어 지원을 하도록 한 것이다.

Web Application 지원 강화

HTML5는 Web application을 만들기 위해 필요한 기능들이 많이 추가되었다. 대표적으로 client storage라고 해서, 예전에 cache와도 같은 application 만의 고유 정보를 offline으로 저장할 수 있게 되었다. 이를 응용한 것이 Amazon에서 발표한 Kindle Cloud Reader이다. Amazon에 접속해서 다운받은 책들은 인터넷이 연결되지 않아도 Reader app에서 읽을 수 있다.

또한 소켓 통신을 지원한다. 예전에는 서버의 상태가 변화하는 것을 감지하기 위해서는 반복적으로 서버에 계속 물어봐야만 했다. 이는 수 많은 클라이언트들이 주기적으로 서버에 접속해야 함을 의미했고, 느리고 비효율적이며 많은 서버 트래픽을 발생시켰다. 소켓을 이용하면 Web app에서는 서버와의 통신 채널을 하나 열어놓고 서버가 응답할 때 까지 가만히 기다리기만 하면 된다. 서버는 그 열려있는 채널을 통해 상태 변화가 있을 경우 답변을 줄 것이다.

Better Interface

HTML5는 사용자와의 web 경험의 질을 높이기 위한 기능들도 많이 포함하고 있다. 대표적으로 새로운 form 요소가 있다. 예전에는 달력에서 특정 날짜를 입력하려고 하면 각 사이트마다 각자 개발한 달력 페이지를 화면에 띄워야만 했다. 이제 그런 공통적인 컨트롤들을 표준화하여 넣겠다는 것이다. 또한 CSS3를 통해 더 자유로운 포맷의 글자 / 표 등을 넣는 것이 가능해졌다. 새로 추가된 태그들을 통해 장애인의 접근성도 향상시킬 수 있다.

comments powered by Disqus