WebVTT 자막 생성 — 웹 비디오의 W3C 표준
점 타임스탬프 구분자, WEBVTT 헤더, HTML5 <track> 요소, HLS 스트림, 모든 최신 브라우저에서 작동하는 큐 구조를 갖춘 올바르게 포맷된 VTT 파일.
여기에 파일을 놓거나 클릭하여 선택하세요
.mp3, .wav, .m4a, .aac, .ogg, .flac, .mp4, .mov, .avi, .mkv, .webm·최대 500MB
WebVTT: 웹이 실제로 사용하는 자막 형식
WebVTT(Web Video Text Tracks)는 HTML5 비디오 자막의 W3C 표준입니다. SRT와 달리 VTT는 ::cue 의사 요소를 통한 CSS 스타일링, 큐 위치 지정 및 정렬 설정, NOTE 코멘트 블록, 챕터 마커를 지원합니다. HLS(HTTP Live Streaming)의 필수 자막 형식입니다 — 비디오를 스트리밍한다면 SRT가 아닌 VTT가 필요합니다. Vocova는 모든 오디오 또는 비디오 소스에서 사양 준수 WebVTT 파일을 생성합니다.
사용 방법
오디오 또는 비디오 파일 업로드
모든 미디어 파일을 드래그 앤 드롭하세요. 모든 주요 형식을 지원하며 자막 생성을 위한 음성을 추출합니다.
- 모든 오디오: MP3, WAV, M4A, AAC, OGG, FLAC, WMA
- 모든 비디오: MP4, MOV, AVI, MKV, WebM, WMV
- 최대 500 MB 파일 지원
AI가 변환하고 VTT로 포맷
음성이 변환되고 적절한 타이밍, 필수 WEBVTT 헤더, W3C 사양에 따른 점 구분 타임스탬프를 갖춘 WebVTT 큐로 분할됩니다.
- 선택적 메타데이터 영역이 있는 WEBVTT 헤더
- 점 구분 밀리초(HH:MM:SS.mmm)
- 자연스러운 읽기 흐름으로 분할된 큐
VTT 파일 검토 및 다운로드
각 큐를 미리 보고, 필요하면 텍스트를 편집한 후, HTML5 비디오 플레이어, HLS 스트림 또는 웹 플랫폼에 사용할 수 있는 VTT 파일을 다운로드하세요.
- 내보내기 전 큐 텍스트 편집
- 전체적으로 W3C 준수 구조
- 모든 언어를 위한 UTF-8 인코딩
기능
CSS ::cue 스타일링 지원
WebVTT 자막은 ::cue 의사 요소를 사용하여 CSS로 스타일링할 수 있습니다. 글꼴, 색상, 크기, 배경, 투명도를 변경하세요. ::cue(b), ::cue(i) 및 음성 선택자를 사용한 요소별 스타일링도 가능합니다. 이것이 표준 스타일링 메커니즘이 없는 SRT 대비 핵심 장점입니다.
큐 위치 지정 및 정렬
VTT 큐는 위치, 정렬, 크기, 줄 배치 설정을 지원합니다. 화자 식별 자막을 화면 상단에 놓거나, 설명을 왼쪽에 배치하거나, 표준 대사를 가운데 정렬하세요. 이러한 위치 지정 컨트롤은 해킹이 아닌 VTT 사양의 일부입니다.
메타데이터용 NOTE 블록
WebVTT는 NOTE 코멘트 블록을 지원합니다 — 파일에는 보이지만 화면에 표시되지 않는 메타데이터. 번역자 메모, 편집자용 컨텍스트, 언어 정보, 버전 추적에 사용하세요. SRT에는 동등한 기능이 없습니다.
HLS 스트리밍 필수 형식
Apple의 HLS 사양은 자막에 WebVTT를 요구합니다 — SRT는 HLS 매니페스트에서 지원되지 않습니다. HLS를 통해 비디오를 전달하는 경우(대부분의 iOS 비디오, Apple TV, 많은 CDN 포함), VTT를 사용해야 합니다. 우리 파일은 HLS 통합에 즉시 사용 가능합니다.
올바른 MIME 유형 처리
VTT 파일은 MIME 유형 text/vtt로 제공되어야 합니다. 많은 웹 서버는 .vtt 파일에 기본적으로 text/plain을 사용하여, 브라우저가 자막 트랙으로 거부하게 만듭니다. 서버를 올바르게 구성하도록 출력에 이를 명시합니다 — 자막을 조용히 깨뜨리는 흔한 함정입니다.
Vocova를 선택하는 이유
HTML5 비디오에 캡션 추가
<video> 태그 내에서 <track> 요소를 사용하여 네이티브로 캡션을 추가하세요. WebVTT는 HTML5 <track> 요소가 지원하는 유일한 자막 형식입니다 — SRT는 여기서 작동하지 않습니다. HTML 한 줄이면 비디오에 캡션이 추가됩니다.
HLS 비디오 스트림 자막
HLS는 자막에 WebVTT를 의무화합니다. AWS MediaConvert, Cloudflare Stream, Mux 또는 모든 HLS 파이프라인을 사용하는 경우 VTT 파일이 필요합니다. 소스 미디어에서 생성하고 HLS 매니페스트에 포함하세요.
브랜드 CSS로 자막 스타일링
::cue 의사 요소를 사용하여 브랜드의 글꼴, 색상, 배경 처리로 WebVTT 자막을 스타일링하세요. 기본 검정 배경 상자를 제거하고, 텍스트 색상을 변경하고, 글꼴 크기를 조정하세요 — 모두 표준 CSS를 통해.
웹 접근성 표준 충족
WCAG 2.1은 웹 비디오 캡션에 WebVTT를 권장합니다. 비디오 콘텐츠에서 VTT 파일을 생성하여 WCAG Level A(사전 녹화 미디어 캡션) 및 Level AA 요구사항을 충족하세요.
누가 활용할 수 있나요
웹 개발자
사이트의 HTML5 비디오 플레이어에 WebVTT 트랙을 추가하세요. kind='captions' 또는 kind='subtitles'로 <track> 요소를 사용하세요. 네이티브 캡션 경험을 위해 CSS ::cue로 스타일링하세요.
스트리밍 인프라 엔지니어
HLS 및 DASH 자막 트랙용 VTT 파일을 생성하세요. 적응형 비트레이트 매니페스트용 VTT 파일을 세그먼트화하세요. WebVTT는 HLS가 네이티브로 지원하는 유일한 자막 형식입니다.
e-러닝 플랫폼 개발자
LMS 플랫폼의 강의 비디오에 캡션을 추가하세요. 대부분의 최신 LMS 시스템(Canvas, Moodle, Blackboard)은 HTML5 비디오를 사용하며 캡션 트랙에 WebVTT를 기대합니다.
웹에 게시하는 콘텐츠 크리에이터
블로그, 포트폴리오 또는 미디어 사이트에 포함된 비디오용 VTT 자막 파일을 생성하세요. WebVTT는 플러그인이나 JavaScript 라이브러리 없이 모든 최신 브라우저에서 작동합니다.
