웹 비디오를 위한 SRT to VTT 변환 방법 — 무료 가이드
HTML5 웹 비디오에 VTT가 필요한 이유와 SRT를 VTT로 무료 온라인 변환하는 방법을 알아보세요. 타임스탬프 포맷, WEBVTT 헤더, 브라우저 지원을 다룹니다.
웹사이트에 비디오를 삽입했는데 자막이 로드되지 않는 경우, 거의 항상 포맷이 원인입니다. 인터넷에 떠도는 대부분의 자막 파일은 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 가이드가 해당 워크플로를 안내합니다.