1
오디오 또는 비디오 파일 업로드
모든 미디어 파일을 드래그 앤 드롭하세요. 모든 주요 형식을 지원하며 자막 생성을 위한 음성을 추출합니다.
- 모든 오디오: MP3, WAV, M4A, AAC, OGG, FLAC, WMA
- 모든 비디오: MP4, MOV, AVI, MKV, WebM, WMV
- 최대 500 MB 파일 지원
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 파일을 생성합니다.
사용 방법
2
AI가 변환하고 VTT로 포맷
음성이 변환되고 적절한 타이밍, 필수 WEBVTT 헤더, W3C 사양에 따른 점 구분 타임스탬프를 갖춘 WebVTT 큐로 분할됩니다.
- 선택적 메타데이터 영역이 있는 WEBVTT 헤더
- 점 구분 밀리초(HH:MM:SS.mmm)
- 자연스러운 읽기 흐름으로 분할된 큐
3
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 라이브러리 없이 모든 최신 브라우저에서 작동합니다.
자주 묻는 질문
어떤 브라우저가 WebVTT ::cue 스타일링을 지원하나요?
Chrome, Edge, Safari, Firefox 모두 기본 ::cue 스타일링(글꼴, 색상, 배경, 투명도)을 지원합니다. Chrome과 Edge가 ::cue(v[voice='Speaker']), 위치 지정, 요소별 스타일링과 같은 고급 기능에 대한 지원이 가장 넓습니다. Firefox와 Safari는 핵심 스타일링 속성을 지원하지만 음성 선택자와 위치 지정에 일부 제한이 있습니다. 대상 브라우저에서 특정 스타일링을 테스트하세요.
VTT의 NOTE와 챕터 마커는 무엇인가요?
NOTE 블록은 파일에 나타나지만 화면에 표시되지 않는 코멘트 섹션입니다. 번역자 지침, 버전 정보, 컨텍스트에 사용하세요. 챕터 마커는 kind='chapters'인 큐로 비디오의 명명된 섹션을 정의합니다 — 브라우저가 이를 챕터 내비게이션 UI로 표시할 수 있습니다. 둘 다 SRT가 복제할 수 없는 VTT 전용 기능입니다.
HLS가 SRT가 아닌 VTT를 요구하는 이유는?
Apple의 HLS 사양(RFC 8216)은 자막 트랙에 WebVTT를 의무화합니다. 기술적 이유는 VTT가 처음부터 웹 전달을 위해 설계되었기 때문입니다 — W3C 웹 표준이며, SRT는 DVD 리핑 시대의 데스크톱 형식입니다. HLS 매니페스트는 VTT 세그먼트 파일을 참조하며, iOS/Safari는 <track> 요소에 VTT만 파싱합니다. HLS 매니페스트에서 SRT를 사용하려고 하면 조용히 무시됩니다.
자막 뒤의 기본 검정 배경 상자를 어떻게 제거하나요?
검정 배경은 브라우저의 기본 자막 스타일링에 의해 추가됩니다. CSS로 재정의하세요: '::cue { background-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }'. 텍스트 그림자가 배경 상자를 대체하여 모든 비디오 콘텐츠 위에서 텍스트를 읽을 수 있게 유지하는 미묘한 그림자를 제공합니다. 참고: 이 스타일링 접근 방식은 Chrome과 Edge에서 작동하며, Safari는 다른 처리가 필요합니다.
VTT 파일이 로컬에서는 작동하지만 서버에서는 작동하지 않습니다. 왜인가요?
거의 확실히 MIME 유형 문제입니다. VTT 파일은 Content-Type 'text/vtt'로 제공되어야 합니다. 많은 웹 서버는 .vtt 파일을 기본적으로 'text/plain'으로 제공하며, 브라우저는 조용히 자막 트랙으로 거부합니다. 서버 설정에서 수정하세요: Nginx의 경우 'types { text/vtt vtt; }', Apache의 경우 'AddType text/vtt .vtt'를 추가하거나, CDN 구성에서 Content-Type 헤더를 설정하세요.
VTT와 SRT의 기술적 차이점은?
명백한 차이(VTT는 타임스탬프에 점 사용, SRT는 쉼표 사용) 외에: VTT는 필수 'WEBVTT' 헤더가 있고, ::cue를 통한 CSS 스타일링을 지원하며, 큐 위치 지정/정렬 설정을 허용하고, NOTE 코멘트 블록을 포함하며, 음성 태그(<v Speaker>)를 지원하고, 자막 배치를 위한 영역을 정의할 수 있습니다. SRT에는 이러한 기능이 없습니다. VTT는 웹 표준(W3C)이고, SRT는 공식 사양이 없는 비공식 형식입니다.
Premiere Pro와 같은 데스크톱 비디오 편집기에서 VTT 파일을 사용할 수 있나요?
대부분의 데스크톱 편집기는 VTT 파일을 가져오지만 지원은 다양합니다. Premiere Pro와 DaVinci Resolve는 VTT 가져오기를 잘 처리합니다. Final Cut Pro는 SRT를 선호하지만 VTT와도 작동할 수 있습니다. 워크플로가 주로 데스크톱 편집인 경우 SRT가 더 보편적으로 지원될 수 있습니다. 워크플로가 웹 전달, HLS 또는 HTML5 비디오를 포함하는 경우 VTT가 올바른 선택입니다.
전사할 준비가 되셨나요?
파일을 업로드하거나 YouTube, 팟캐스트, 클라우드 스토리지 및 1,000개 이상의 플랫폼 링크를 붙여넣으면 몇 분 안에 정확한 전사본을 받을 수 있습니다. 신용카드는 필요 없습니다.