HTML5의 새 기능
이번 섹션에서는 HTML5에 있는 매우 유용한 몇 가지 새로운 기능을 살펴본다. 먼저 머리글, 바닥글, 탐색줄, 사이드바와 같은 최신 웹 페이지 부분에 의미를 부여하는 새로운 시맨틱 요소를 살펴본다. 그런 다음 모양, 텍스트, 애니메이션, 전환 등을 작성하는 데 사용할 수 있는 2D 드로잉 Javascript API와 중요한 새 <canvas> 요소를 학습한다. 이후로는 멀티미디어 전송 플랫폼을 새로 추가된 <audio>와 <video> 요소로 인해 Flash에 대한 웹의 의존성이 어떻게 변모되고 있는지 살펴본다. 그런 다음 네트워크나 인터넷에 연결되지 않은 경우에도 기능 면에서 해당 데스크탑 애플리케이션과 비슷한 웹 애플리케이션을 작성할 수 있게 도움을 주는 오프라인 애플리케이션 지원과 로컬 스토리지 API를 소개한다. 이번 섹션은 현재의 HTML5 스펙에서 제안하는 API와 속성 및 기타 새로운 요소에 대한 개요를 간략히 살펴보는 것으로 마무리한다.
HTML5 스펙에는 머리글, 바닥글, 탐색줄과 같은 웹 페이지 부분이나 다양한 섹션에 의미를 부여하는 새로운 시맨틱 요소가 있다. HTML 이전 버전에서는 일반적으로 <div> 요소를 사용하여 웹 페이지 부분을 작성하고 ID나 클래스 속성을 사용하여 이 부분을 서로 구분한다. 이 버전에는 사용할 클래스 이름과 ID를 지정하는 엄격한 규칙이 정의되어 있지 않기 때문에 의미를 부여하는 시맨틱 요소가 없고 이로 인해 수행되고 있는 특정 영역을 소프트웨어에서 판별하기가 매우 어렵다는 문제점이 있다. HTML5에서는 이러한 문제점이 완화되었으며 웹 브라우저에서 문서의 시맨틱 구조를 구문 분석하기가 훨씬 수월해졌다.
HTML5에서도 계속 <div> 요소를 사용할 수 있지만 앞으로를 고려한다면 관련된 시맨틱 요소를 사용해야 한다. 이와는 반대로 원래의 목적이 아닌 다른 용도로는 이러한 새 요소를 사용하지 않으려는 경향도 있다. 예를 들면, 단지 링크로만 구성된 그룹에는 <nav> 요소를 사용하지 말아야 하는데 이는 이 요소의 용도가 웹 페이지의 기본 탐색 블록을 둘러싸는 데 있기 때문이다.
HTML5에 도입된 기본 시맨틱 요소는 다음과 같다.
- <header>
- 이 요소는 웹 페이지 일부분의 머리글을 정의하는 데 사용되며 전체 페이지에서는 <article> 요소나 <section> 요소를 사용한다.
- <footer>
- <header> 요소와 마찬가지로 이 새 요소는 페이지 일부분의 바닥글을 정의한다. 페이지나 기사, 섹션의 끝에는 바닥글이 있어서는 안 되지만 일반적으로는 그렇게 한다.
- <nav>
- 이 요소는 웹 페이지의 기본 탐색 링크를 위한 컨테이너이다. 링크로 구성된 모든 그룹에는 이 요소를 사용하지 말아야 하며 주요 탐색 블록에만 사용해야 한다. <footer> 요소에 탐색 링크가 있는 경우에는 <footer> 요소만으로도 충분하므로 <nav> 요소로 이 탐색 링크를 둘러쌀 필요가 없다.
- <article>
- <article> 요소는 뉴스 항목, 블로그 포스트 또는 설명과 같이 자체적으로 배포될 수 있는 페이지에 있는 개별 항목을 정의하는 데 사용된다. 이러한 항목은 일반적으로 RSS 피드를 사용하여 신디케이트된다.
- <section>
- 이 요소는 문서나 애플리케이션의 섹션, 즉 기사나 튜토리얼의 장 또는 섹션을 나타낸다. 예를 들면, HTML5에서는 독자가 현재 읽고 있는 섹션이 <section> 요소로 둘러싸인다. 반드시 그런 것은 아니지만 일반적으로 <section> 요소에는 머리글이 있다. 예를 들면, 현재 읽고 있는 섹션의 머리글에는 "시맨틱 요소"라는 텍스트가 포함되어 있다.
- <aside>
- 이 요소는 새로 추가된 것으로 사이드바 주변에 있는 컨텐츠와는 별도로 다루어야 하는 기타 컨텐츠와 사이드바를 마크업하는 데 사용한다. 이러한 예로는 광고 블록이 있다.
- <hgroup>
- 제목과 부제가 모두 있는 경우에는 페이지, 기사 또는 섹션에 둘 이상의 표제가 필요할 수도 있다. 예를 들면, 본 튜토리얼에는 제목과 부제가 있으며 각각 "HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기"와 "HTML5로 canvas와 video 요소 구현하기"이다. 주제와 부제에 각각 <h1> 요소와 <h2> 요소를 사용하여 <hgroup> 요소로 둘러쌀 수 있다.
본 튜토리얼 마지막 부분에 있는 샘플 웹 사이트에는 이러한 새 시맨틱 요소가 일부 포함되어 있으며 이 부분에서 해당 구문과 자세한 사용법을 설명한다.
<canvas> 요소는 본래 Mac OS X 대시보드 위젯과 Safari에 사용할 목적으로 Apple®에서 개발했지만 나중에 Mozilla®와 Opera® 웹 브라우저에 채택되었다. 이 요소는 표준화되어 모양, 텍스트, 전환 및 요소 내부 애니메이션을 작성하는 데 사용할 수 있는 일련의 2D 드로잉 API와 함께 HTML5 스펙에 포함되었다.
대부분의 사람들은 <canvas> 요소 덕택에 그래프와 대화식 게임, 페인트 애플리케이션, Adobe Flash와 같은 외부 플러그인이 없어도 작동하는 기타 그래픽을 편리하게 제작할 수 있기 때문에 이 요소가 HTML5의 가장 중요한 특징 중 하나라고 여긴다.
<canvas> 요소는 매우 기본적인 요소로 오브젝트의 넓이와 높이, 고유 ID를 정의한다. 일반적으로는 웹 페이지에서 렌더링이 완료되면 개발자가 일련의 Javascript API를 사용하여 캔버스에서 실제로 오브젝트를 그려야 한다. 개발자는 이러한 API를 이용하여 선과 형태를 그리고, 색상과 불투명도, 그라디언트를 적용하고, 텍스트를 작성하고, 캔버스 오브젝트를 변환하고 애니메이션을 수행할 수 있다. 또한, API를 이용하면 <canvas> 요소를 대화식으로 사용하여 마우스 이벤트, 키 이벤트와 같은 사용자 입력에 응답할 수 있으며 또한, 캔버스에서 게임과 웹 애플리케이션을 편리하게 제작할 수 있다. <canvas> 요소에 대한 예는 나중에 본 튜토리얼에 있는 샘플 HTML5/CSS3 웹 사이트를 통해 살펴본다.
최근에는 YouTube와 같은 비디오 공유 사이트와 Hulu와 같은 컨텐츠 제공 플랫폼이 대중화되면서 멀티미디어 스트리밍에 웹을 사용하는 사례가 폭발적으로 늘어났다. 불행히도 웹은 이러한 컨텐츠를 고려하여 구축된 것이 아니기 때문에 결과적으로 비디오와 오디오는 Flash Video(.flv) 파일 형식과 Adobe Flash 플랫폼으로 제공되었으며 또한 이러한 형식으로 인해 활성화되었다.
그러나 HTML5에서는 두 가지 새로운 요소, 즉 <audio>와 <video> 요소를 지원하며 웹 개발자는 이 요소를 사용하여 멀티미디어 컨텐츠를 삽입할 수 있으며 사용자가 추가로 브라우저 플러그인을 설치하지 않아도 된다. Mozilla Firefox, Apple Safari 및 Google Chrome과 같은 브라우저는 이러한 새 요소를 지원하면서 사용자가 선택해서 사용해야 하는 표준 브라우저 플레이백 제어를 제공하기 시작했다. 이외에도 개발자가 자체 플레이백 제어를 작성할 수 있도록 표준 Javascript API 세트를 제공했으며 개발자들은 그렇게 할 수 있기를 원했다. 기본 멀티미디어 플레이백의 중요한 장점은 이론적으로는 CPU 자원을 적게 사용하기 때문에 에너지를 절약할 수 있다는 점이다.
그러나 이러한 새로운 멀티미디어 요소에서는 각 브라우저에서 지원하는 파일 형식과 이러한 파일을 인코드할 수 있는 다양한 코덱에 대한 특허 라이센스 취득 문제가 주요 문제가 된다. Mozilla와 Opera는 특허 라이센스를 취득하지 않아도 브라우저에 코덱을 삽입할 수 있는 오픈 소스 Theora 비디오 컨테이너와 코덱을 사용하려고 한다. 이와는 반대로 Google은 Theora의 품질, 특히 YouTube에 있는 것과 같은 HD(High Definition) 컨텐츠를 제공하는 기능에 불만이 있다. Apple과 Google은 H.264 코덱을 선호하며 이 코덱은 일반적으로 MP4, MOV나 MKV 파일에 포함된다.
그러나 이러한 문제점이 비디오에만 있는 것은 아니며 오디오 코덱에도 같은 문제점이 있다. MP3와 AAC 형식은 특허로 제한되어 있지만 Vorbis 형식은 그렇지 않다. 휴대용 미디어 플레이어와 다수의 미디어 소프트웨어 애플리케이션에서는 Vorbis 오디오를 지원하지 않기 때문에 이 형식은 널리 사용되고 있지 않다는 문제가 있다.
가까운 장래에는 HTML5 <비디오>와 <오디오>에 관해 다양한 의사결정이 내려질 것이며 최종 권고안에서 어떤 코덱과 형식을 사용하게 될 것인지가 관심을 끌게 될 것이다. 다른 한편으로는 Flash 비디오를 폴백으로 제공하고 다양한 형식의 비디오를 사용할 수 있게 하여 모든 브라우저를 지원하게 할 수 있다. 브라우저 벤더에서 지원할 형식을 결정하는 데 그치지 않고 최종 결정이 내려지기를 바라자. 그래야 이러한 요소를 유용하게 사용할 수 있을 것이다.
또한, 작동 중인 <video> 요소를 본 튜토리얼에서 나중에 살펴본다.
전통적으로 웹 개발자는 나중에 웹 페이지에서 정보를 다시 읽을 수 있도록 쿠키를 사용하여 방문자의 로컬 시스템에 정보를 저장했다. 기본 데이터를 저장하는 데 있어 쿠키는 매우 유용하지만 웹 브라우저에서 유지할 수 있는 웹 서버당 쿠키 수나 쿠키당 데이터 용량(이름과 값 포함)은 각각 20개와 4KB로 제한된다. 이외에도 HTTP를 요청할 때마다 쿠키가 웹 서버로 전송되어 자원을 낭비한다.
HTML5에서는 로컬 스토리지 API의 이러한 문제점을 해결할 수 있는 방법을 제공하며 이러한 API는 기본 HTML5 문서로 분리된 별도의 스펙에서 다룬다. 개발자는 이러한 API 세트를 이용하여 방문자의 컴퓨터에 쿠키를 저장할 수 있으며 나중에도 이 정보가 해당 위치에 있을 것이라고 합리적으로 믿을 수 있다. 게다가 웹 페이지가 렌더링된 후에도 어느 시점에서나 쿠키를 액세스할 수 있으며 HTTP를 요청할 때마다 쿠키가 자동으로 로드되지 않는다. 이 스펙에는 근본 이유가 같은 제한사항이 포함되어 있으며 이 제한사항은 서로 다른 웹 사이트에서 저장한 데이터를 읽거나 변경하지 못하도록 한다.
대부분의 브라우저는 웹 페이지를 로컬 캐시에 저장하기 때문에 사용자는 오프라인 상태에 있는 경우에도 웹 페이지를 볼 수 있다. 정적 페이지에서는 이러한 기능이 잘 작동하지만 Gmail이나 Facebook, Twitter와 같은 데이터베이스 중심의 동적 컨텐츠에서는 이러한 기능을 사용할 수 없다. HTML5에서는 오프라인 애플리케이션을 지원하며 브라우저는 오프라인 상태에서 애플리케이션을 사용하는 데 필요한 모든 파일을 다운로드하여 사용자가 오프라인에서 해당 애플리케이션을 사용할 때 해당 프로세스에서 이루어진 모든 변경사항을 사용자가 인터넷에 다시 연결될 때 서버로 업로드할 수 있다.
이전에 웹 애플리케이션을 작성했던 경험이 있다면 HTML의 양식 제어 세트에 익숙할 것이며 이중 일부는 <input> 요소를 사용하여 구현된다는 점을 잘 알고 있을 것이다. HTML4에서는 다음과 같은 입력 유형을 지원한다.
- button
- checkbox
- file
- hidden
- image
- password
- reset
- radio
- submit
- text
이외에도 <선택> 및 <텍스트 영역>과 같은 양식에 사용하는 기타 몇 가지 요소가 있다. 이러한 양식 제어는 연락처 양식에 있는 이름, 전화번호, 주소와 같은 기본 양식 필드에 다양한 기능을 제공한다. 그러나 Web은 연락처 양식을 제출하는 데 사용하는 HTML 양식과 같은 수준을 훨씬 뛰어넘어 플랫폼으로 성장했으며 이제 HTML 양식은 서버측에서 처리할 애플리케이션 데이터를 제출하는 데 사용된다. 결과적으로 웹 애플리케이션 개발자들은 스피너, 슬라이더, 날짜/시간 선택도구, 색상 선택도구 등과 같은 더 복잡한 양식 제어가 일부 필요하다는 사실을 깨달았다.
이러한 제어 도구를 활용하기 위해서는 개발자가 UI 컴포넌트를 제공하는 외부 Javascript 라이브러리를 사용하거나 그렇지 않으면 Adobe Flex, Microsoft Silverlight 또는 JavaFX와 같은 다른 개발 프레임워크를 사용해야 했다. HTML5에서는 다음과 같이 다양한 새로운 양식 입력 유형을 제공함으로써 이전 스펙에서 해결되지 못한 몇 가지 문제점을 해결하려고 한다.
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
현재는 이러한 새 양식 필드에 대한 지원이 매우 제한적이다. iPhone의 모바일 Safari 브라우저에서는 이러한 새 유형을 일부 사용하여 사용자에게 표시되는 키보드 유형을 변경한다. 예를 들면, 이메일 유형과 함께 @ 기호와 .com 단축 아이콘이 표시된다. 또한, Opera에서는 숫자 유형을 선택할 수 있는 스피너와 날짜 관련 유형을 선택할 수 있는 날짜 선택도구와 같은 다양한 제어를 구현하는 데 필요한 새로운 위젯을 일부 제공한다. 이러한 새로운 오퍼링 중에서 매우 폭넓게 사용할 수 있는 유형은 범위 유형으로 이 유형은 Opera와 Safari, Google Chrome에서 슬라이더로 렌더링된다.
또한, 이러한 새로운 입력 유형 외에도 HTML5에서는 양식 필드를 위한 두 가지 새로운 기능을 지원한다. 이중 첫 번째는 자동 초점 기능으로 이 기능은 웹 페이지가 렌더링될 때 특정 양식 필드에 자동으로 초점을 맞추도록 브라우저에 명령하며 이 기능을 구현하기 위해 Javascript 코드를 작성할 필요가 없다. 두 번째 개선사항은 placeholder 속성으로 개발자는 이 속성을 이용하여 해당 컨텐츠가 비어 있을 때 텍스트 상자 기반의 제어에 표시할 텍스트를 정의할 수 있다. 이러한 예로는 개발자가 검색 상자 외부에 레이블을 사용하고 싶지 않은 경우를 들 수 있다. placeholder 속성을 이용하면 해당 제어의 값이 비어 있고 이 제어에 초점이 맞춰져 있지 않을 때 표시할 텍스트를 개발자가 지정할 수 있다. 이러한 예가 그림 1에 표시되어 있다.
그림 1. 작동 중인 placeholder 속성
그림 1에 표시된 바와 같이 이메일 주소와 전화번호의 플레이스홀더 텍스트는 회색으로 표시되어 있으며 비어 있고 초점이 맞춰져 있지 않다. 또한, 이 스크린샷에는 범위 입력 유형에 대한 예가 Safari 브라우저의 슬라이더로 표시되어 있다. 이 스크린샷은 나중에 본 튜토리얼에서 살펴볼 샘플 웹 페이지에서 가져온 것이다.
HTML5에는 매우 다양한 기능이 새롭게 추가되었지만 본 튜토리얼에서 이러한 기능을 모두 다룰 수는 없다. 이번 섹션에서는 HTML5 스펙의 기타 개선사항 중 일부를 간략하게 살펴보도록 한다.
- 웹 작업자
- 이 기능을 이용하면 Javascript 코드를 백그라운드 프로세스에서 실행하도록 설정할 수 있어서 멀티 스레드 애플리케이션을 편리하게 개발할 수 있다. 웹 작업자가 개발자에게 제공하는 주요 혜택으로는 사용자 인터페이스 속도를 떨어뜨리지 않으면서도 백그라운드에서 복잡한 계산을 처리할 수 있다는 점이다.
- 지리 정보
- HTML5에는 지리 정보 API가 포함되어 있으며 사용자가 지정한 장치에 지리 정보를 확인할 수 있는 기능(휴대전화의 GPS 기능)이 있다고 가정하면 이 API를 이용하여 웹 애플리케이션에서 사용자의 현재 위치를 판별할 수 있다. 이러한 기능을 지원하는 장치(iPhone이나 Android 2.0 기반의 스마트폰)가 없는 경우에는 수동으로 위치를 설정할 수 있는 플러그인을 Firefox를 사용하여 다운로드할 수 있다.
- 끌어서 놓기
- 또 다른 흥미로운 기능으로는 끌어서 놓기 API를 들 수 있다. 지금까지는 플러그인을 사용하지 않고 끌어서 놓기 기능을 구현하려면 매우 복잡한 Javascript에 의존하거나 script.aculo.us와 같은 Javascript 라이브러리를 사용해야 했다.
- 문서 간 메시지 전송
- 이 기능을 이용하면 서로 다른 창에 있는 문서 간에 메시지를 주고 받을 수 있으며 iframe에서도 마찬가지이다. 이 기능은 기본 웹 페이지의 서버 이외의 서버에서 호스트되는 위젯과 애플리케이션을 개발하는 데 매우 유용하며 이러한 애플리케이션은 Facebook 애플리케이션과 비슷하다.
- 기타
- HTML5에 도입된 기타 새로운 기능으로는 MIME 유형과 프로토콜 핸들러 등록 기능이 있어서 웹 애플리케이션을 특정 파일 유형이나 프로토콜의 기본 애플리케이션으로 등록할 수 있다. 현재까지 브라우저 히스토리 관리 기능은 수동으로 구현하거나 외부 Javascript 프레임워크를 사용해야 하지만 기타 새로운 요소와 속성을 호스트하게 되어 웹 개발이 더욱 수월해졌다.
