WebVTT란?

**WebVTT (Web Video Text Tracks Format)**은 비디오에 타임텍스트 트랙을 추가하기 위해 사용되는 텍스트 기반 자막 형식입니다. HTML5의 <track> 요소를 통해 지원되는 공식 형식으로, 다음을 추가할 수 있습니다:

• 자막 (번역된 음성)
• 캡션 (음성 및 효과음)
• 설명 (스크린 리더를 위한 시각 정보)
• 챕터 (비디오 내 탐색 가능한 지점)
• 메타데이터

WebVTT의 기본 구조

• WebVTT 파일은 다음으로 구성됩니다:
  • 선택적인 헤더 (WEBVTT).
  • 선택적인 메타데이터 (주석 또는 스타일/스크립트 블록).
  • 큐 (타이밍 및 페이로드가 포함된 텍스트 구간).

1. 큐 형식

큐는 다음과 같은 구조를 가집니다:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• 타이밍: HH:MM:SS.mmm 형식의 시작 및 종료 시간.
• 설정 (선택 사항):
  • vertical (수직 텍스트용 lr/rl)
  • line (위치 지정)
  • position (수평 정렬)
  • size (너비/백분율)
  • align (시작/중간/끝)

2. 큐 페이로드

• 일반 텍스트이거나 마크업을 포함할 수 있습니다:
  • 태그: <b>, <i>, <u>, <ruby>, <lang> 등.
  • 타임스탬프 (<00:00:05.000>)는 카라오케 스타일 텍스트에 사용됩니다.

3. 스타일링 및 CSS

• 스타일은 다음을 통해 적용할 수 있습니다:
  • 인라인 큐 (태그 사용).
  • HTML의 CSS 의사 요소 (::cue, ::cue-region).

4. 메타데이터 트랙

• WebVTT는 인터랙티브 애플리케이션을 위해 메타데이터(JSON 등)를 포함할 수 있습니다.

5. 파일 인코딩

• UTF-8 인코딩이어야 합니다.
• 줄은 \r\n, \n, 또는 \r 로 끝납니다.

6. 처리 규칙

• 파서는 손상된 파일을 정상적으로 처리해야 합니다.
• BOM(바이트 순서 표시)은 선택 사항입니다.

7. HTML5 통합

• <track> 요소와 함께 사용됩니다:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind는 subtitles, captions, descriptions, chapters 또는 metadata 중 하나가 될 수 있습니다.

8. 브라우저 지원

• 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 널리 지원됩니다.

9. 사용 사례

• 자막/캡션: 접근성을 위해.
• 카라오케 가사: 타임텍스트와 함께.
• 챕터 탐색: 비디오 내.
• 메타데이터: 인터랙티브 비디오 앱용.

WebVTT 파일 예시:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

검색 엔진은 비디오를 “볼” 수는 없지만 텍스트 기반 콘텐츠를 읽을 수 있습니다. WebVTT 파일을 사용하면 검색 가능한 텍스트를 추가하게 됩니다:

• 검색 가능성 향상: Google이 캡션 및 전사를 색인화하여 비디오가 더 많은 검색 결과에 나타납니다.
• 참여도 증가: 자막이 있는 비디오는 사용자를 더 오래 머무르게 하여 세션 지속 시간을 늘리고 이탈률을 낮춥니다.
• 접근성 강화: 청각 장애인이나 난청 사용자를 위해 캡션이 필수이며, SEO 순위 알고리즘에서도 선호됩니다.

WebVTT 파일이 웹페이지의 비디오와 연결될 때, Google은 해당 타임텍스트를 파싱하고 이해하여 특정 검색어에 대한 관련성을 높일 수 있습니다.

HTML5 비디오에 WebVTT 추가하기

WebVTT 파일을 비디오에 포함하려면 <track> 요소를 사용합니다:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: .vtt 파일 경로
• kind: 텍스트 트랙 유형 (subtitles, captions, chapters 등)
• srclang: 언어 코드 (예: en, es)
• label: 플레이어에 표시되는 트랙 라벨

WebVTT와 SRT: 차이점은?

WebVTT 파일을 만들고 편집하는 도구

.vtt 파일을 만들거나 편집하려면 다음을 사용할 수 있습니다:

• 텍스트 편집기: VS Code, Sublime Text
• 자막 편집기: Subtitle Edit, Amara, Aegisub
• 변환기: SRT를 VTT로, 그 반대로 변환하는 도구 사용

WebVTT 파일을 여는 방법

WebVTT (.vtt) 파일을 열려면 텍스트 편집기나 자막 편집기를 사용할 수 있습니다.

텍스트 편집기에서 열기

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

.vtt 파일은 일반 텍스트이므로 일반 텍스트 파일처럼 열고 편집할 수 있습니다.

자막 편집기에서 열기

더 나은 포맷팅, 미리보기 및 싱크를 위해:

• Subtitle Edit (Windows)
• Aegisub (크로스 플랫폼)
• Amara (웹 기반)

브라우저에서 열기

1. <video>와 <track> 태그가 포함된 간단한 HTML 파일을 만듭니다.
2. 브라우저에서 HTML 파일을 열어 자막이 포함된 비디오를 확인합니다.

ASS 파일의 주요 특성

FAQ

Q1: WebVTT와 SRT의 차이점은 무엇인가요?

A: WebVTT는 SRT를 기반으로 하지만 텍스트 위치 지정, 보이스 태그, CSS 스타일링, 메타데이터 지원 등 중요한 기능을 추가했으며 HTML5 비디오와의 네이티브 통합을 제공합니다.

Q2: YouTube에 WebVTT 자막을 어떻게 추가하나요?

A: 비디오에 자막을 추가할 때 .vtt 파일을 업로드하거나, YouTube의 자동 캡션을 사용한 후 생성된 WebVTT 파일을 다운로드하여 편집합니다.

Q3: WebVTT 파일에 이미지를 포함할 수 있나요?

A: WebVTT 사양은 직접적인 이미지 삽입을 지원하지 않지만, 메타데이터 큐에 URL을 넣고 JavaScript를 통해 맞춤형 이미지 렌더링을 구현할 수 있습니다.

Q4: 내 WebVTT 스타일이 적용되지 않는 이유는?

A: STYLE 블록이 첫 번째 큐 앞에 위치하고 빈 줄이 없으며 ::cue 의사 요소를 올바르게 사용했는지 확인하세요. 또한 브라우저 호환성을 점검하십시오.

Q5: WebVTT 파일이 HLS와 같은 스트리밍 프로토콜에서 작동하나요?

A: 예, HLS(HTTP Live Streaming)는 비디오와 함께 캡션을 효율적으로 스트리밍하기 위해 세분화된 WebVTT를 지원합니다.

참고 자료

• WebVTT: Web Video Text Tracks 포맷