HTML5

왜 배우는가: HTML5는 웹 페이지를 문서에서 실행 가능한 애플리케이션 플랫폼으로 바꾼 표준이며, 현재 웹 서비스의 기반 기술이다. 기존 플러그인 의존 문제와 웹 호환성 문제를 푸는 방법으로 반복해서 출제된다.

출제 이력: 제101회 2교시 1번, 제98회 4교시 3번

1. 한 줄 정의와 핵심 키워드

HTML5는 마크업, 스크립팅 API, 장치 접근 기능을 함께 규정해 웹을 문서에서 애플리케이션 플랫폼으로 바꾼 웹 표준 마크업 언어다.

핵심 키워드

• 시맨틱 태그: 콘텐츠의 의미와 역할을 태그 이름으로 드러내는 요소다.
• 캔버스(Canvas): 자바스크립트로 2D 그래픽을 그리는 요소다.
• 오디오·비디오 요소: 플러그인 없이 미디어를 재생하는 요소다.
• 웹 스토리지: 키-값 쌍으로 클라이언트에 데이터를 저장하는 API다.
• DOM 인터페이스: 문서 구조를 스크립트로 조작하는 표준 인터페이스다.
• WHATWG 사양: HTML5 명세를 함께 관리하는 표준화 단체의 사양이다.
• 리치 웹 애플리케이션: 설치 없이 브라우저에서 복잡한 기능을 제공하는 웹 앱이다.

2. 개념 풀이

쉬운 말로 하면 HTML5는 웹 페이지를 만드는 언어에 더해, 페이지가 그래픽·미디어·저장 장치를 직접 다루게 한 규격 묶음이다.

정식 정의는 다음과 같다. HTML5는 HTML4의 마크업을 개선하고 DOM 인터페이스를 확장하며, 자바스크립트 API를 함께 규정한 차세대 HTML 표준이다. 사양은 W3C HTML5와 WHATWG HTML 사양으로 나뉘어 발행된다. 두 사양에 모두 들어간 기술과 W3C가 별도로 발행하는 기술을 구분해야 한다.

핵심 용어는 다음과 같다.

• 시맨틱 웹: 문서에 의미를 부여해 기계와 사람이 구조를 이해하도록 하는 웹이다. header·nav·article 같은 시맨틱 태그로 구현함
• 캔버스: 비트맵 방식으로 점(point) 단위 조작을 한다. 이미지 조작에 적합하다.
• SVG: XML 기반 벡터 방식이다. 개별 요소를 DOM으로 관리해 상호작용하는 그래프를 만들 수 있다.
• WebGL2: 브라우저에서 3D 그래픽을 렌더링하는 자바스크립트 API다.
• 파일 API·웹 오디오·WebRTC: W3C가 HTML5 사양과 별도로 발행하는 관련 기술이다.

주의할 점이 있다. HTML5 자체는 페이지 내 애니메이션을 제공하지 않는다. 요소의 애니메이션은 CSS3 또는 자바스크립트 필요 방식으로 구현한다. 이 구분은 한계점 문항에서 자주 확인된다.

3. 등장 배경과 필요성

HTML4는 문서의 구조와 텍스트, 하이퍼링크를 표현하는 데 초점을 두었다. 구조를 나타내려면 와 id 속성을 조합해야 했다. 이 방식은 의미를 기계가 알기 어려워 시맨틱 웹 구현에 불리했다.

웹 애플리케이션의 요구가 커지면서 플러그인 의존 문제가 드러났다. 액티브X(ActiveX)나 별도 플러그인에 기대는 구조는 보안 취약점과 브라우저 종속을 낳았다. 국내에서는 공공 및 금융 시스템이 액티브X 기반으로 운영되며 호환성 문제가 두드러졌다.

국내에서는 2012-07-12 방통위 확산 추진계획 발표 이후 HTML5 전환이 본격화되었다. 방송통신위원회는 웹 환경 개선과 인터넷 경쟁력 강화를 목표로 이 계획을 발표했다. 이후 전자정부와 금융 분야에서 HTML5 기반 보안 기술이 활용되기 시작했다.

미디어 포맷의 진영 분열도 배경이다. W3C는 2007년 주요 브라우저 공급자 모두가 수용하는 포맷이 없다는 이유로 Vorbis 권고를 철회했다. 이후 AAC·MP3 계열과 Ogg·WebM 계열이 대립했고, 오푸스(Opus) 포맷은 IETF에 의해 표준화되었다. 플러그인 없이 미디어를 재생하려면 공통 포맷 합의가 필요하다.

모바일 기기의 확산도 필요성을 키웠다. 오프라인 동작, 드래그 앤드 드롭, 지리 위치 정보처럼 네이티브 앱의 기능을 웹에서 쓰려는 요구가 HTML5의 API 확장으로 이어졌다.

4. 구성요소·원리·절차

HTML5는 여러 기술이 묶인 플랫폼이므로 구성요소를 마크업, 스크립팅 API, 그래픽·미디어, 저장·통신으로 나누어 이해해야 답안을 체계적으로 쓸 수 있다. 이 절에서는 구성요소 표, 동작 원리, 웹 애플리케이션이 실행되는 절차를 정리한다.