SubRip(.srt)을 WebVTT로 변환하기

HTML5 <track kind="captions" src="captions.srt"> 태그에 .srt 파일을 그대로 넣어본 적이 있다면, 브라우저가 이를 그냥 무시한다는 사실을 이미 경험했을 것입니다. <track> 요소(그리고 최신 브라우저가 그 주위에 구축하는 네이티브 캡션 메뉴)는 오직 WebVTT만 이해합니다. SubRip은 데스크톱 플레이어와 편집 도구에서 가장 널리 지원되는 형식임에도, HTML5 사양에는 전혀 포함되어 있지 않습니다.

해결 방법은 기계적이지만 정확해야 합니다. WebVTT는 파일 맨 위에 WEBVTT라는 글자 그대로의 줄을 요구하며, 모든 타임코드의 밀리초 구분자는 SRT의 쉼표가 아니라 마침표여야 합니다(00:00:09,400 → 00:00:09.400). 이 두 세부 사항 중 하나라도 틀리면 브라우저는 오류 메시지 없이 조용히 캡션 렌더링에 실패합니다. SubToolDesk의 변환기는 SRT를 로컬에서 분석하고, 유효한 헤더와 수정된 타임코드로 다시 구성하며, 큐 번호를 깔끔하게 다시 매기는 과정을 모두 브라우저 탭 안에서 처리합니다.

단계별 안내

• 위 변환기에 .srt 파일을 끌어다 놓거나, 왼쪽 패널에 내용을 붙여넣으세요.
• 형식 배지가 SRT로 감지되는지 확인하세요.
• 다운로드를 눌러 원본 파일 이름에 맞춰진 유효한 .vtt 파일을 저장하세요.
• <track> 요소에서 참조하세요: <track kind="captions" src="/captions.vtt" srclang="en" label="English">.

SRT를 WebVTT로 변환하는 이유

.srt 파일은 데스크톱 편집 도구에서는 잘 동기화되지만, 브라우저에서는 아무 역할도 하지 못합니다. WebVTT로 변환하는 이유는 거의 항상 다음 중 하나입니다.

• 이유: 자체 호스팅하는 <video> 요소에 캡션을 추가하는데, HTML5 <track> 태그가 실제로 이해하는 형식이 필요합니다.
• 이유: 접근성 요구 사항(WCAG 2.1의 캡션 기준 등)을 충족해야 하며, 브라우저가 조용히 무시하는 형식이 아니라 표준을 준수하는 캡션이 필요합니다.
• 이유: 사용 중인 비디오 플랫폼, CMS, 또는 문서 사이트의 스크린캐스트 임베드가 .vtt 업로드만 허용합니다.
• 이유: 편집자, 프리랜서, 또는 캡션 제공업체로부터 .srt 파일을 받았고, 개발자에게 바로 적용할 수 있는 파일을 전달해야 합니다.
• 이유: SRT를 내보내던 플랫폼에서 네이티브 브라우저 캡션을 중심으로 만들어진 커스텀 플레이어로 비디오 라이브러리를 마이그레이션하고 있습니다.
• 이유: ffmpeg를 설치하거나 파일 하나를 위한 임시 변환 스크립트를 작성하지 않고 간단히 해결하고 싶습니다.

변환 전후 비교: 실제 예시

쉼표 타임코드와 순차적인 번호가 포함된 짧은 세 개짜리 큐 SRT 파일을 화자 레이블 제거와 서식 태그 제거를 모두 끈 상태(이 페이지의 기본 설정이며, 유효한 WebVTT를 만드는 데 제거할 것이 없기 때문입니다)로 변환한 예시입니다.

1
00:00:01,200 --> 00:00:04,000
다시 돌아왔습니다. 오늘은 3분기 실적을 다뤄보겠습니다.

2
00:00:04,300 --> 00:00:07,900
초대해 주셔서 감사합니다. 바로 시작해 볼까요.

3
00:00:08,100 --> 00:00:11,500
매출이 전년 대비 8퍼센트 증가했습니다.

WEBVTT

1
00:00:01.200 --> 00:00:04.000
다시 돌아왔습니다. 오늘은 3분기 실적을 다뤄보겠습니다.

2
00:00:04.300 --> 00:00:07.900
초대해 주셔서 감사합니다. 바로 시작해 볼까요.

3
00:00:08.100 --> 00:00:11.500
매출이 전년 대비 8퍼센트 증가했습니다.

큐 텍스트, 타이밍, 심지어 큐 번호까지 변경 없이 그대로 유지됩니다. WEBVTT 헤더만 추가되고 밀리초 앞의 모든 쉼표가 마침표로 바뀌는데, 이는 브라우저가 파일을 받아들이기 위해 필요한 정확히 두 가지 변경 사항입니다.

변환 전후 비교

SRT 입력:
1
00:00:09,400 --> 00:00:12,900
매출이 8퍼센트 증가했습니다.

VTT 출력:
WEBVTT

1
00:00:09.400 --> 00:00:12.900
매출이 8퍼센트 증가했습니다.

웹 개발자에게 이 변환이 중요한 이유

접근 가능하고 캡션이 있는 비디오는 대부분의 공개 사이트에서 사용성과 컴플라이언스 요구 사항을 동시에 충족해야 하는 요소입니다(WCAG 2.1 성공 기준 1.2.2는 사전 녹화된 미디어에 캡션을 요구합니다). <track> 요소는 타사 비디오 플랫폼 없이 이를 표준 방식으로 제공하는 방법입니다. 편집 파이프라인(또는 프리랜서)이 .srt 파일만 전달한다면, 여기서 변환하면 ffmpeg를 설치하거나 변환 스크립트를 작성하지 않고도 몇 초 안에 바로 적용 가능한 WebVTT 자산을 얻을 수 있습니다.

서버가 아니라 사용자의 위치에서 처리됩니다

이는 순수한 텍스트 재구성이므로 미디어 파일은 전혀 손대거나 업로드되지 않으며, 오직 캡션 텍스트만, 그것도 사용자 자신의 브라우저 탭 안에서만 처리됩니다. 이는 내부 제품 데모 영상에서도 공개 마케팅 페이지에서만큼 중요합니다.

<track> 요소에서 결과물 사용하기

변환된 파일을 다운로드했다면, <track> 자식 요소와 함께 <video> 마크업에 추가하세요.

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

default 속성은 브라우저에 이 트랙을 자동으로 활성화하라고 지시합니다. 여러 언어 트랙을 제공하면서 시청자가 직접 선택하게 하려면 이를 생략하세요. 브라우저는 WEBVTT 헤더를 엄격하게 검증합니다. 파일의 나머지 부분이 올바른 형식이더라도, 헤더가 없거나 잘못 표기된 것이 캡션이 조용히 나타나지 않는 가장 흔한 원인입니다.

이 변환기는 누구를 위한 것인가

자체 호스팅 비디오 플레이어에 캡션을 추가하는 프런트엔드 및 풀스택 개발자가 주요 대상이지만, 개발자에게 결과물을 전달하는 영상 제작 팀도 포맷 변환을 다른 사람의 할 일로 남겨두는 대신 확실히 동작하는 파일을 넘기기 위해 이 도구를 사용합니다. 스크린캐스트를 임베드하는 오픈소스 문서 사이트, 접근성 컴플라이언스를 위해 교육 영상에 캡션을 다는 내부 도구 팀, 그리고 SRT를 내보내던 플랫폼에서 네이티브 브라우저 캡션을 기대하는 커스텀 플레이어로 비디오 라이브러리를 마이그레이션하는 사람 모두에게 동일하게 유용합니다.

이 변환기가 유지하는 것과 변경하는 것

유지되는 것:

• 원본 파일의 오타를 포함해, 작성된 그대로의 모든 대화 텍스트.
• 모든 큐의 밀리초 단위 정밀한 타이밍, 변경 없이 그대로.
• 원래 순서대로 큐당 한 블록, 큐 번호는 1부터 순차적으로 다시 매겨짐.
• 화자 레이블 제거나 서식 태그 제거를 켜지 않는 한, 큐 텍스트 안의 화자 접두사나 인라인 태그.

변경되거나 제거되는 것:

• WebVTT가 00:00:04,000이 아니라 00:00:04.000을 요구하므로, 모든 타임코드에서 밀리초 앞의 쉼표가 마침표로 바뀝니다.
• WebVTT가 이를 요구하고 SRT에는 없으므로, 파일 맨 위에 WEBVTT 헤더 줄이 추가됩니다.
• SPEAKER 1:과 같은 일반 텍스트 화자 접두사. 다만 화자 레이블 제거가 켜져 있을 때만 제거되며, 기본값으로는 그대로 남습니다.
• <i>나 <b> 같은 서식 태그. 다만 서식 태그 제거가 켜져 있을 때만 제거되며, 기본값으로는 그대로 남습니다.

자주 발생하는 문제와 해결 방법

• 변환 후에도 브라우저가 캡션을 표시하지 않습니다: 변환 전에 변환기 위의 형식 배지가 실제로 SRT로 표시되었는지 확인하세요. 심하게 잘린 채로 붙여넣으면 큐 감지가 깨져 비어 있거나 잘못된 출력이 나올 수 있습니다.
• 캡션에서 <i>나 <b> 태그가 여전히 문자 그대로 표시됩니다: 예상된 동작입니다. WebVTT는 이러한 태그를 네이티브로 지원하므로 이 페이지에서는 서식 태그 제거가 기본적으로 꺼져 있습니다. 일반 텍스트를 원할 때만 켜세요.
• SPEAKER 1:과 같은 화자 이름이 VTT 출력에 그대로 전달됩니다: 원하지 않는다면 화자 레이블 제거를 켜세요. 이 변환기는 콘텐츠 편집이 아니라 충실한 구조적 재구성을 원한다고 가정하므로 기본값으로는 유지됩니다.
• 출력에서 밀리초 앞에 마침표 대신 여전히 쉼표가 보입니다: 실제 .vtt 출력을 다운로드했는지, 원본 .srt 파일의 복사본이 아닌지 다시 확인하세요. 변환기 위의 형식 배지와 출력 레이블이 어느 쪽을 보고 있는지 확인해 줍니다.
• 파일이 올바르게 보이는데도 캡션이 나타나지 않습니다: .vtt 파일을 텍스트 편집기에서 열어 첫 줄이 정확히 WEBVTT인지, 그 앞에 바이트 순서 표시(BOM)나 빈 줄조차 없는지 확인하세요. 이 줄이 맨 처음에 오지 않으면 브라우저는 조용히 파일을 거부합니다.
• 발음 기호가 있는 문자나 비영어 텍스트가 변환된 파일에서 é처럼 깨진 문자로 표시됩니다: 원본 .srt가 UTF-8로 저장되지 않았습니다. WebVTT도 SRT처럼 UTF-8 텍스트를 가정하므로, 변환 전에 UTF-8로 다시 내보내거나 저장하세요.

변환 과정에서 바뀌지 않는 것

대화 텍스트와 밀리초 단위의 정밀한 타이밍은 작성된 그대로 정확히 유지됩니다. 이는 구조적 재구성이며 재전사가 아닙니다. 원본 SRT에 오타가 있다면 그 오타는 VTT 출력에도 그대로 남습니다. 이 도구는 형식 준수를 고치는 것이지 콘텐츠의 정확성을 고치는 것이 아닙니다. 변환하는 동안 화자 레이블이나 인라인 스타일 태그도 함께 정리하고 싶다면, 위의 화자 레이블 제거와 서식 태그 제거 토글이 WebVTT 구문으로 다시 작성되기 전의 큐 텍스트에 적용되므로, 두 개의 별도 도구를 실행하는 대신 한 번에 형식 변환과 콘텐츠 정리를 결합할 수 있습니다.