웹 비디오를 위한 SRT to VTT 변환 방법 — 무료 가이드 | AllSubConverter
웹사이트에 비디오를 삽입했는데 자막이 로드되지 않는 경우, 거의 항상 포맷이 원인입니다. 인터넷에 떠도는 대부분의 자막 파일은 SRT이지만, 브라우저는 VTT를 기대합니다. 이 가이드는 그 이유를 정확히 설명하고 몇 초 만에 SRT를 VTT로 변환하는 방법을 보여줍니다.
웹 플레이어에 VTT가 필요한 이유
HTML5 <video> 요소는 접근성을 염두에 두고 설계되었으며, 자막과 부제를 위한 <track> 자식 요소를 노출합니다. 문제는 <track> 요소가 공식적으로 하나의 텍스트 트랙 포맷만 지원한다는 것입니다: WebVTT(Web Video Text Tracks).
<track>에 원시 .srt 파일을 가리키게 하면 대부분의 브라우저가 조용히 무시합니다. 자막 버튼이 나타나고 파일이 다운로드되지만 아무것도 렌더링되지 않습니다. 그렇기에 웹에서 비디오를 제공하는 모든 사람에게 변환 단계가 불가피합니다.
요약: HTML5는 VTT만 사용합니다. SRT를 제공하면 자막이 보이지 않습니다.
SRT vs VTT — 실제로 변경되는 것
두 포맷은 비슷해 보이며, 텍스트 콘텐츠는 큐별로 보통 동일합니다. 차이점은 작지만 엄격하게 적용됩니다:
| 측면 | SRT | VTT |
|---|---|---|
| 헤더 | 없음 | WEBVTT로 시작해야 함 |
| 시간 구분자 | ms 앞 쉼표 (00:01:02,500) |
ms 앞 마침표 (00:01:02.500) |
| 큐 인덱스 번호 | 필수 (1, 2, 3...) | 선택 |
| 큐 설정 | 지원 안 함 | 지원 (align:center line:90%) |
| 인라인 스타일링 | 지원 안 함 | <b>, <i>, <u>로 지원 |
두 타임스탬프 규칙이 재생을 중단시키는 규칙입니다. VTT를 파싱하는 브라우저는 밀리초 구분자로 마침표를 기대합니다. SRT가 사용하는 쉼표는 잘못된 큐로 간주되어 전체 블록이 건너뛰어집니다.
WEBVTT 헤더 요구 사항
모든 유효한 VTT 파일은 첫 줄에 WEBVTT 리터럴 문자열로 시작해야 하며, 그 다음 빈 줄이 와야 합니다. 이 헤더가 없으면 브라우저가 파일을 즉시 거부합니다. 최소 VTT 파일은 다음과 같습니다:
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome back to the series.
00:00:04.500 --> 00:00:07.000
Today we convert subtitles for the web.SRT 동등물과 비교해 보세요. SRT는 번호가 매겨진 큐와 쉼표로 구분된 타임스탬프를 사용합니다:
1
00:00:01,000 --> 00:00:04,000
Welcome back to the series.
2
00:00:04,500 --> 00:00:07,000
Today we convert subtitles for the web.단계별: SRT를 VTT로 변환
- 변환기를 엽니다. SRT to VTT 도구로 이동합니다. 설치나 가입이 필요 없습니다.
- SRT 파일을 업로드합니다. 파일을 드래그 앤 드롭하거나, 텍스트를 상자에 붙여넣거나, 기기에서 선택합니다. 일괄 작업을 위해 여러 파일이 지원됩니다.
- 변환기를 실행합니다. 도구가
WEBVTT헤더를 삽입하고, 모든 쉼표 타임스탬프 구분자를 마침표로 바꾸고, 큐 서식을 정규화합니다. - VTT 파일을 다운로드합니다. 결과를 복사하거나 브라우저가 자동으로 연결하도록 비디오 옆에 일치하는 파일 이름으로 저장합니다.
- 플레이어에 연결합니다.
<track>요소에서 파일을 참조하면 완료입니다.
일반적인 HTML5 설정은 다음과 같습니다:
<video controls>
<source src="intro.mp4" type="video/mp4">
<track label="English" kind="subtitles"
srclang="en" src="intro.vtt" default>
</video>브라우저 호환성 이점
VTT로 변환하는 것은 파서를 통과하는 것만이 아닙니다 — 실제 브라우저 기능을 잠금 해제합니다:
- ✓ JavaScript 없이 Chrome, Firefox, Safari, Edge에서 네이티브 자막 컨트롤
- ✓
kind="captions"속성을 통해 스크린 리더가 인식하는 접근 가능한 큐 - ✓ 필요한 언어를 위한 오른쪽에서 왼쪽 및 세로 쓰기 모드
- ✓
kind="chapters"를 통한 챕터 마커 - ✓ 큐 수준 위치 지정으로 화면 텍스트에서 자막을 밀어낼 수 있음
VTT는 또한 Video.js, Plyr, Shaka Player, YouTube IFrame API 같은 주요 웹 플레이어와 잘 작동하므로, 변환된 단일 파일이 커스텀 빌드와 기성 플레이어 모두에서 작동합니다.
피해야 할 일반적인 함정
- 이중 헤더. 소스에 이미
WEBVTT줄이 있는 경우, 단순한 복사-붙여넣기는 두 개를 생성할 수 있습니다. 변환기가 이를 중복 제거합니다. - BOM 및 인코딩 문제. VTT를 바이트 순서 표시 없이 UTF-8로 저장하세요. 그렇지 않으면 일부 플레이어가 헤더를 잘못 읽습니다.
- MIME 타입. 파일을
text/vtt로 제공하세요. 일반application/octet-stream은 엄격한 브라우저에 의해 차단됩니다. - CORS. VTT가 페이지와 다른 도메인에 있는 경우, 서버가 올바른 CORS 헤더를 보내야 합니다. 그렇지 않으면 자막이 조용히 실패합니다.
자주 묻는 질문
브라우저에서 SRT를 직접 읽을 수 있나요?
공식적으로는 아니요. HTML5 사양은 <track> 내에서 WebVTT만 지원하도록 브라우저에 요구합니다. 일부 브라우저는 관대하게 SRT 파싱을 시도하지만, 이는 신뢰할 수 없고 버전 간에 일관되지 않으며 프로덕션 비디오에 의존해서는 안 됩니다.
변환이 타이밍을 변경하나요?
전혀 아닙니다. 시, 분, 초, 밀리초가 동일합니다 — 초와 밀리초 사이의 문자만 쉼표에서 마침표로 변경됩니다. 큐 지속 시간과 동기화 지점이 정확히 동일하게 유지됩니다.
SRT 큐 번호를 유지해야 하나요?
VTT는 큐 번호를 선택 사항으로 만들며, 빈 줄 분리가 큐를 정의하므로 대부분의 변환기가 번호를 삭제합니다. 남겨두는 것은 무해하지만, 제거하면 수동으로 비교하고 편집하기 쉬운 더 가벼운 파일이 생성됩니다.
여러 언어로 자막을 추가하려면 어떻게 하나요?
언어당 하나의 <track> 요소를 추가하세요. 각각 고유한 srclang과 label을 갖습니다. 단일 트랙에 default를 표시하여 먼저 표시할 언어를 제어하고, 플레이어의 자막 메뉴에서 시청자가 전환할 수 있게 합니다.
반대 방향으로 가고 데스크톱 플레이어나 TV를 위한 일반 자막이 필요한 경우, VTT to SRT 가이드가 해당 워크플로를 안내합니다.