WebVTT 자막 (.vtt)
W3C 표준웹 비디오 텍스트 트랙(WebVTT)은 HTML5 비디오 요소(<track>) 및 최신 HTTP 라이브 스트리밍(HLS)에 기본적으로 통합된 캡션, 자막 및 챕터 설명용 공식 W3C 웹 표준입니다.
SRT을(를) VTT(으)로 변환
무료 브라우저 내 SRT-VTT 변환기. 기기에서 파일을 즉시 변환하세요.
검사 및 메타데이터
운영 체제와 파일 분석기는 파일 선두의 바이너리 바이트 시퀀스를 검사하여 WebVTT 파일을 식별합니다:
바이트 단위 헤더 시그니처 (매직 바이트)
운영 체제와 파일 분석기는 파일 선두의 바이너리 바이트 시퀀스를 검사하여 WebVTT 파일을 식별합니다:
16진수 시그니처 (오프셋 0):
57 45 42 56 54 54ASCII 표현: WEBVTT
표준화: W3C WebVTT Recommendation
기술 사양
| 컨테이너 아키텍처 | UTF-8 text file starting with 'WEBVTT' signature, followed by optional STYLE and NOTE blocks and sequential cue blocks |
| 압축 | Uncompressed plain text (typically compressed over HTTP via Gzip or Brotli) |
| 바이트 엔디안 | UTF-8 text stream |
| 색 공간 | Full CSS Color Module Level 4 support in cue styles |
| 채널 및 구조 | Timecoded cues, speech recognition confidence, CSS styling, and screen position settings |
| 최대 크기 | Unbounded sequential cues |
| 투명도 | Full CSS opacity and alpha transparency supported via '::cue' pseudo-element |
| 스트리밍 및 프로그레시브 | Native streaming in HTML5 <video> elements and HLS / DASH live video manifests |
기술 비교 매트릭스: WebVTT 대 경쟁사
| 기술적 속성 | WebVTT (현재) | SRT | ASS | SUB |
|---|---|---|---|---|
| HTML5 웹 통합 | 100% 네이티브 표준 (<track>) | JS 변환 필요 | WebAssembly 필요 | 변환 필요 |
| CSS 스타일링 | 완전한 네이티브 CSS 스타일링 (::cue) | 기본 HTML 태그만 지원 | 독점 오버라이드 태그 | 없음 |
| HLS / DASH 스트리밍 | 범용 스트리밍 방송 표준 | 믹싱을 통해 지원 | 제한된 스트리밍 지원 | 없음 |
| 헤더 요구 사항 | 엄격한 'WEBVTT' 매직 텍스트 1번째 줄 | 헤더 불필요 | [Script Info] 섹션 | 헤더 불필요 |
일반적인 손상 모드 및 헥스 복구 가이드
브라우저 콘솔 오류: 'Malformed WebVTT file: Missing WEBVTT signature'.
근본 원인: 1번째 줄에 'WEBVTT' 문자열이 누락되었거나 헤더 앞에 빈 줄이 있음.
복구: File2File 자막 변환기를 사용하여 파일 상단에 'WEBVTT\n\n'을 추가하세요.
보안 분석 및 파서 공격 벡터
웹 브라우저의 WebVTT 파서는 DOM에 살균(sanitize)되지 않은 상태로 렌더링될 경우 크로스 사이트 스크립팅(XSS)으로 이어질 수 있는 신뢰할 수 없는 큐를 처리합니다.
알려진 공격 벡터
- 웹 비디오 플레이어 DOM에 삽입된 살균되지 않은 HTML 큐 콘텐츠를 통한 XSS 주입.
- 자동화된 서버 측 자막 썸네일 생성 중 서버 측 요청 위조(SSRF).
- 잘못된 형식의 CSS 큐 셀렉터를 통한 서비스 거부.
방어적 모범 사례:
역사적 배경 및 주요 이력
주요 장점
- 네이티브 HTML5 웹 표준: 외부 라이브러리 없이 <track> 요소에서 모든 웹 브라우저가 직접 지원합니다.
- 풍부한 CSS 스타일링 지원: 네이티브 '::cue' CSS 유사 요소를 사용하여 색상, 글꼴, 배경 및 위치를 사용자 지정할 수 있습니다.
- 최우수 라이브 스트리밍 지원: 방송용 캡션을 위해 Apple HLS 및 MPEG-DASH 스트리밍 매니페스트에 통합되어 있습니다.
기술적 제한 사항 및 단점
- 엄격한 헤더 요구 사항: 파일의 첫 번째 줄에 정확히 'WEBVTT' 텍스트가 있어야 하며, 그렇지 않으면 브라우저가 거부합니다.
- 마침표 밀리초 구분 기호('00:01:20.500')는 레거시 쉼표 구분 SRT 파일에서 변환이 필요합니다.
- 구형 비브라우저 하드웨어 플레이어(예: 저렴한 USB 미디어 박스)에는 기본 WebVTT 지원이 부족한 경우가 많습니다.
흥미로운 기술적 상식
- 모든 유효한 WebVTT 파일은 첫 번째 줄에 정확히 'WEBVTT'라는 단어로 시작해야 합니다. 그렇지 않으면 브라우저가 파일을 무시합니다.
- WebVTT는 클래식 SRT 자막과 거의 동일하게 보이도록 의도적으로 설계되었기 때문에 원래 'WebSRT'라고 불렸습니다.
- WebVTT는 비디오 스크러버 바에 마우스를 올릴 때 비디오 챕터 및 대화형 썸네일 툴팁용으로도 사용할 수 있습니다.
자주 묻는 기술 질문
WebVTT는 무엇에 사용되나요?
WebVTT는 웹사이트의 HTML5 <video> 요소에 자막, 캡션, 챕터 및 설명을 추가하기 위한 공식 웹 표준 형식입니다.
SRT 자막을 WebVTT로 어떻게 변환할 수 있나요?
브라우저에서 바로 File2File.app을 사용하여 한 번의 클릭으로 SRT 파일을 깔끔한 WebVTT 파일로 변환할 수 있습니다.
브라우저에서 WebVTT 자막이 나타나지 않는 이유는 무엇인가요?
파일이 1행에 'WEBVTT'로 시작하고 그 뒤에 빈 줄이 있으며, 웹 서버가 'Content-Type: text/vtt' 헤더와 함께 해당 파일을 제공하는지 확인하세요.