TTML을 VTT로 변환
또는 자막 텍스트를 붙여넣으세요
이 변환에서 달라지는 것
3가지가 버려지거나 결정이 필요합니다
- 스타일
굵게와 기울임을 뺀 모든 스타일(색, 외곽선, 그림자, 여백)
- 위치
화면 위치 지정(모든 자막 블록이 기본 위치로 돌아갑니다)
- 형식 고유 내용
원본 형식이 자막 블록 밖에 두는 내용(자막 블록이 아닌 구획, 머리말 텍스트, 자막 블록별 설정, 주석 처리된 이벤트) — 대상 형식에는 들어갈 자리가 없습니다
이 목록은 불러온 특정 파일이 아니라 두 형식의 기능 행렬에서 나옵니다. 어떤 파일은 형식이 허용하지만 행렬이 모델링하지 않는 기능을 쓰고 있다면 더 많이 잃을 수 있습니다.
TTML을 VTT로 옮기면 웹 브라우저가 바로 읽는 자막이 됩니다. 시간은 밀리초까지 유지되고, 문단 안 강조는 VTT 태그로 남습니다. 다만 TTML의 스타일 표·화면 위치·문서 머리 정보는 VTT에 자리가 없어 사라집니다.
TTML과 VTT 모두 00:00:04.126 표기를 씁니다. TTML의 dur, 1.5s, 프레임 표기는 읽는 단계에서 시계로 바뀌고, VTT로 나갈 때는 시간값이 한 글자도 달라지지 않습니다.
잃는 것은 스타일, 위치, 형식 고유 정보입니다. <styling>·<layout> 표, XML 선언, 네임스페이스, metadata, region·style 참조가 빠집니다. <span>의 기울임·색은 <i>, <font color=…>로 남고, 두 줄은 두 줄로 유지됩니다. VTT의 cue 식별자 줄은 선택 사항이며 재생기 화면에는 나타나지 않습니다.
여러 파일을 한 번에 넣으면 대기열이 차례로 변환하고 결과를 ZIP 하나로 묶습니다. VTT는 텍스트 파일이므로 서버 없이 재생되고, 변환도 브라우저 안에서만 이루어집니다.
예시
일반적인 TTML 파일을 VTT로 변환
입력
<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling" xml:lang="en">
<head>
<styling>
<style xml:id="s1" tts:color="#FFFF00" tts:fontWeight="bold"/>
</styling>
<layout>
<region xml:id="bottom" tts:origin="10% 80%" tts:extent="80% 20%"/>
</layout>
</head>
<body>
<div>
<p begin="00:00:01.000" end="00:00:03.500" region="bottom" style="s1">Hello <span tts:fontStyle="italic">there</span>.</p>
<p begin="00:00:03.500" end="00:00:06.000" region="bottom">How are you?<br/>Fine, thanks.</p>
</div>
</body>
</tt>
결과물
WEBVTT
00:00:01.000 --> 00:00:03.500
Hello <i>there</i>.
00:00:03.500 --> 00:00:06.000
How are you?
Fine, thanks.
이 결과에서 사라지는 것: 스타일, 위치, 형식 고유 정보. 나머지는 줄 단위로 같습니다.
까다로운 입력에 같은 변환 적용
입력
<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling"
xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
ttp:frameRate="25" xml:lang="en">
<body>
<div>
<p begin="1.5s" dur="2s">Loaded from an offset and a duration.</p>
<p begin="4s" end="00:00:06.50">A coarser clock spelling.</p>
<p begin="00:00:07:00" end="00:00:08:12">Frames, at 25fps.</p>
<p begin="9s"><span tts:color="#FF0000">Half-open</span> and Tom & Jerry.</p>
</div>
</body>
</tt>
결과물
WEBVTT
00:00:01.500 --> 00:00:03.500
Loaded from an offset and a duration.
00:00:04.000 --> 00:00:06.500
A coarser clock spelling.
00:00:07.000 --> 00:00:08.480
Frames, at 25fps.
00:00:09.000 --> 00:00:11.000
<font color="#FF0000">Half-open</font> and Tom & Jerry.
실제 파일에서 흔한 손상입니다. 줄 바꿈이 섞이고, 공백이 남고, 빈 필드가 있습니다. 위의 깔끔한 예시와 비교해 파서가 무엇을 넘겨주는지 보세요.
자주 묻는 질문
TTML에서 VTT로 어떤 스타일이 살아남나요?
글자에 붙은 강조는 살아남습니다. 굵기, 기울임, 밑줄, 색이 <b>, <i>, <u>, <font color=…> 태그로 본문에 적히고 브라우저가 이를 해석합니다. 반면 TTML의 스타일 표가 정한 글꼴, 크기, 외곽선, 그림자, 여백은 VTT에 실리지 않고, 자막을 넣은 페이지의 CSS가 대신 정합니다.
TTML의 화면 위치는 VTT로 넘어가나요?
넘어가지 않습니다. VTT에는 자막을 어디에 그릴지 적는 자리가 없어 region과 style 참조가 버려지고, 모든 자막이 재생기의 기본 위치로 돌아갑니다. 대부분 화면 아래쪽 가운데입니다.
TTML의 <styling>·<layout> 표는 VTT에서 어떻게 되나요?
사라집니다. XML 선언, 네임스페이스, 이름 있는 스타일과 영역, <metadata>, <p>의 style·region 참조가 VTT에 대응하는 자리를 갖지 못합니다. 문단 안쪽 span의 강조만 태그로 남습니다.
TTML을 VTT로 바꾸면 결과가 어떻게 생겼나요?
cue 위에 선택적인 식별자 줄이 붙고, 그 아래 시작·끝 시간과 본문이 옵니다. 식별자 줄은 재생기 화면에 나타나지 않습니다. TTML의 cue 하나가 VTT의 cue 하나가 되며 순서와 글자는 같습니다.
TTML 시간값은 VTT에서 정확한가요?
밀리초까지 정확합니다. TTML과 VTT가 모두 00:00:04.126 표기를 쓰므로 시간값이 들어온 그대로 나갑니다. 반올림이나 이동이 없어 2.9초짜리 자막은 그대로 2.9초입니다.
두 줄짜리 TTML 자막은 VTT에서 어떻게 되나요?
두 줄이 위아래로 그대로 나옵니다. 두 줄이 한 자막이라는 사실이 유지되어 재생기가 함께 보여 주며, 다시 TTML로 읽어도 한 cue입니다.
TTML cue 순서는 VTT에서도 유지되나요?
유지되고, 변환 과정에서 시작 시간이 이른 순서로 정렬됩니다. TTML이 cue를 뒤섞어 두었다면 VTT 결과에서 순서가 바로잡히며, 이는 내용이 아니라 구조를 바꾸는 일입니다.