WebVTT 자막 구문 상세 가이드: 타임스탬프부터 스타일링까지 개발 및 디버깅 가이드

표준 WebVTT 파일의 첫 번째 줄은 반드시 WEBVTT 선언이어야 합니다. 선언 뒤에 공백과 파일 설명 텍스트를 추가할 수 있으며, 서로 다른 구조 블록은 빈 줄로 구분됩니다. 대부분의 HTML5 플레이어는 WEBVTT 헤더가 포함되지 않은 파일을 올바르게 파싱할 수 없습니다.

NOTE 주석 블록은 개발 주석 또는 자막 설명을 추가하는 데 사용되며 단일 행 또는 여러 행 콘텐츠를 지원합니다. 이것은 플레이어에서 렌더링되거나 표시되지 않습니다. 개발 및 디버깅 과정에서 수정이 필요한 자막 문단을 표시하기 위해 NOTE 블록을 사용할 수 있으며 최종 재생 결과에 영향을 주지 않습니다.

각 자막 큐는 타임스탬프와 표시 텍스트로 구성됩니다. 타임스탬프 형식은 밀리초 구분자로 점과 쉼표 두 가지 스타일을 지원합니다. 대부분의 최신 브라우저는 점 표기법만 지원합니다.

타임스탬프에서 시 필드는 옵션입니다. 총 재생 시간이 1시간 미만인 자막은 시 필드를 생략할 수 있으며 그 결과 형식은 MM:SS.sss가 됩니다. 전체 형식은 HH:MM:SS.sss입니다. 시작 시간과 종료 시간은 --> 기호로 구분됩니다.

WebVTT는 부분 텍스트의 표시 스타일을 수정하기 위한 6가지 표준 인라인 태그를 지원합니다. 이 중 b, i, u는 각각 굵기, 기울임꼴, 밑줄에 해당하며 해당 HTML 태그와 동일한 규칙을 따릅니다. 개발자는 수동 작성 시 이를 직접 사용할 수 있습니다.

ruby 태그는 병음 주석에 사용되고 lang 태그는 다른 언어의 텍스트를 표시하는 데 사용되며 voice 태그는 화자를 표시하는 데 사용됩니다. 이러한 태그는 주로 메타데이터 분류에 사용되며 플레이어는 이를 기반으로 차별화된 렌더링을 구현할 수 있습니다.

::cue 가상 요소는 WebVTT 자막을 위해 제공되는 전용 CSS 가상 요소입니다. 개발자는 이 가상 요소를 사용하여 웹 페이지의 모든 자막의 기본 스타일을 수정할 수 있으며 color, font, background 등 일반적인 CSS 속성을 지원합니다.

STYLE 블록은 WebVTT 파일 내에서 전역 또는 큐별 스타일을 정의하는 데 사용됩니다. REGION 블록은 자막 렌더링 영역을 정의하는 데 사용되며 여러 영역에 동시에 다른 자막을 표시하는 것을 지원하므로 다국어 자막을 나란히 표시하는 경우에 흔히 사용됩니다.

HTML5 track 요소는 외부 WebVTT 자막 파일을 가져오는 데 사용됩니다. track 요소의 kind 속성은 자막 유형을 정의하며 가능한 값은 subtitles, captions, descriptions, chapters, metadata 다섯 가지입니다.

이 중 subtitles는 일반 번역 자막에 해당하고 captions는 환경음 주석을 포함하는 난청 사용자용 자막에 해당하며 chapters는 챕터 탐색에 해당하고 metadata는 페이지 메타데이터를 저장하며 표시되지 않습니다. 플레이어마다 kind 속성에 대한 처리가 다릅니다.