맨위로가기

WebVTT

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

WebVTT는 웹에서 자막 및 캡션을 표시하기 위한 파일 형식이다. SubRip 파일 형식과 비교하여 다양한 확장이 추가되었으며, UTF-8 인코딩을 사용하고, 타임코드는 마침표를 사용하여 구분한다. 큐 설정, CSS 스타일 지정, JSON 형식의 메타데이터 추가, 주석, 챕터 정보 지정 등 다양한 기능을 지원하며, W3C에서 사양을 제정했다. 주요 브라우저에서 지원되며, 유튜브 등에서 활용된다. 일본 정부와 대한민국에서도 활용 사례가 있으며, 자막 규격보다 자유도가 높다는 장점이 있지만, 루비 표기 방식의 제약과 편집 소프트웨어 부족이라는 단점도 존재한다.

2. SubRip과의 주요 차이점

SubRip 파일 형식과 비교했을 때, WebVTT는 다양한 확장 기능을 제공하지만, 이러한 기능을 사용하지 않으면 단순한 구조를 가진다. SubRip 파일과 마찬가지로, WebVTT 파일은 1행에 WEBVTT로 시작하고, 2행은 비워둔다. 3행부터는 자막 내용을 작성하는데, SubRip 파일 형식에서 불필요했던 일련번호는 제거되었고, 밀리초를 나타내는 기호가 쉼표(,)에서 마침표(.)로 변경되었다.

문자 인코딩은 UTF-8을 사용해야 하며, 바이트 순서 마크(BOM)는 있어도 되고 없어도 된다.

2. 1. 파일 구조


  • WebVTT 파일의 첫 번째 줄은 선택적 UTF-8 바이트 순서 표시(BOM) 다음에 'WEBVTT' 문자열로 시작한다.
  • 첫 번째 줄과 첫 번째 큐 사이에는 선택적 헤더 데이터를 위한 공간이 있다.
  • 타임코드의 소수점 값은 쉼표 대신 마침표를 사용하여 구분한다.
  • 타임코드의 시간 표시는 선택 사항이다.
  • 타임코드 앞의 프레임 번호나 식별자 역시 선택 사항이다.
  • 'NOTE'라는 단어로 시작하는 주석을 추가할 수 있다.
  • JSON 형식으로 메타데이터 정보를 추가할 수 있다.
  • 챕터 정보를 선택적으로 지정할 수 있다.
  • 문자 인코딩은 UTF-8만 지원한다.
  • C 태그의 경우, FONT 요소 대신 보조 HTML 문서에 정의된 별도의 CSS 파일을 사용한다.
  • 큐 설정을 통해 비디오에서 큐의 위치를 사용자 지정할 수 있다.[7]
  • WebVTT 사양은 W3C에서 제정했으며, 여기에서 확인할 수 있다.


SubRip 파일 형식과 비교하면 여러 확장 기능이 추가되었지만, 이러한 기능을 사용하지 않을 경우 단순한 구조를 가진다. 1행에 WEBVTT, 2행은 빈 행, 3행 이후는 SubRip 파일 형식과 거의 동일하다. 다만, 파일 형식으로서 불필요한 일련번호는 제거되었고, 밀리초를 나타내는 기호는 쉼표(,)에서 마침표(.)로 변경되었다.

문자 인코딩은 UTF-8이어야 한다. 바이트 순서 마크(BOM)는 있어도 되고 없어도 된다.

예시:



WEBVTT

00:20:41.150 --> 00:20:45.109

자막 1행

자막 2행

00:21:34.567 --> 00:21:45.678

다음 자막


2. 2. 문자 인코딩

문자 인코딩은 UTF-8이어야 한다. 바이트 순서 표시는 붙여도 되고 붙이지 않아도 된다.[7]

2. 3. 스타일 지정

WebVTT 파일에서 스타일은 외부 CSS 파일을 사용하거나 큐 설정을 통해 지정할 수 있다.

  • C 태그의 경우, HTML `FONT` 요소 대신 별도의 CSS 파일을 사용한다. CSS 파일은 HTML 문서에 정의되어 있어야 한다.[7]
  • 큐 설정을 통해 비디오에서 큐의 위치를 사용자가 직접 지정할 수 있다.[7]

3. 호환성

브라우저 지원[8][9]
브라우저큐 텍스트 태그큐 위치 조정CSS 스타일 지정
크롬colspan="3" |
안드로이드 기본 브라우저colspan="3" |
오페라colspan="3" |
사파리colspan="3" |
파이어폭스colspan="2" |
마이크로소프트 엣지colspan="2" |
인터넷 익스플로러colspan="2" |



파이어폭스는 야간 빌드(파이어폭스 24)에 WebVTT를 구현했지만, 처음에는 기본적으로 활성화되지 않았다. "about:config" 페이지로 이동하여 "media.webvtt.enabled" 값을 true로 설정하여 파이어폭스에서 해당 기능을 활성화해야 했다.[10] 유튜브는 2013년 4월부터 WebVTT를 지원하기 시작했다.[11] 2014년 7월 24일 현재, 모질라는 파이어폭스에서 WebVTT를 기본적으로 활성화했다.[12]

.vtt 파일의 자막은 온라인에서는 표시되지만 로컬 드라이브에 저장된 경우에는 표시되지 않는다.

4. WebVTT 포맷 예시

다음은 W3C의 자막 파일 예시로, 로저 빙햄이 닐 디그래스 타이슨을 인터뷰하는 내용이다([https://www.youtube.com/watch?v=P_Um2VdIKmA]).[13]



WEBVTT

00:11.000 --> 00:13.000

저희는 뉴욕 시에 있습니다.

00:13.000 --> 00:16.000

저희는 실제로 루선 호텔에 있는데, 바로 길 건너편에 있습니다.

00:16.000 --> 00:18.000

미국 자연사 박물관에서요.

00:18.000 --> 00:20.000

그리고 저와 함께 닐 디그래스 타이슨이 있습니다.

00:20.000 --> 00:22.000

천체 물리학자이자, 헤이든 천문관 관장입니다.

00:22.000 --> 00:24.000

미국 자연사 박물관에 있습니다.

00:24.000 --> 00:26.000

여기까지 와주셔서 감사합니다.

00:27.000 --> 00:30.000

그리고 지난번에 나눴던 대화에 대한 후속 조치를 하고 싶습니다.

00:30.000 --> 00:31.500 align:right size:50%

저희가 이메일을 주고받았을 때—

00:30.500 --> 00:32.500 align:left size:50%

그 대화에서 충분히 이야기하지 않았나요?

00:32.000 --> 00:35.500 align:right size:50%

아니요! 아니, 안 돼요. 왜냐하면, 분명히 왜냐하면

00:32.500 --> 00:33.500 align:left size:50%

웃음

00:35.500 --> 00:38.000

아시겠지만, 너무 흥분해서 안경이 떨어지려고 하네요.



WebVTT 사양은 W3C가 제정했으며, [https://www.w3.org/TR/webvtt1/ 에서 열람]할 수 있다.

SubRip 파일 형식과 비교하면 다양한 확장이 추가되었지만, 이를 사용하지 않으면 단순한 사양이 된다. 1행에 WEBVTT가 오고, 2행은 빈 행이며, 3행 이후는 SubRip 파일 형식과 거의 같지만, 파일 형식으로서는 불필요했던 일련 번호는 없어졌고, 밀리초를 나타내는 기호는 쉼표(,)에서 마침표(.)로 변경되었다.

문자 인코딩은 UTF-8이어야 한다. 바이트 순서 마크(BOM)는 붙여도 되고 붙이지 않아도 된다.

예:



WEBVTT

00:20:41.150 --> 00:20:45.109

자막 1행

자막 2행

00:21:34.567 --> 00:21:45.678

다음 자막

[20]

5. 기타 기능

2013년 6월, 명세에 새로운 "region(구역)" 설정을 포함하는 예시가 추가되었다.[14] 이 기능은 파이어폭스 59 및 사파리 14.1(iOS 14.5)부터 지원되지만, 다른 브라우저에서는 지원되지 않는다.[15]

6. 활용

WebVTT는 다양한 분야에서 활용된다. 일본 총무성은 차세대 영상 배포 기술 실증 실험의 일환으로, 2018년 FIFA 월드컵에서 WebVTT를 활용한 통계 데이터 피드 및 선수 텍스트 표시를 실시했다.[1]

6. 1. 일본 정부

일본 총무성은 차세대 영상 배포 기술에 관한 실증 실험(2018년)의 첫 번째 단계로, 2018년 FIFA 월드컵 (러시아)에서의 동시 배포 검증 실험에서 FIFA로부터의 통계 데이터 피드를 WebVTT화하여 선수에게 텍스트 표시를 실시했다[1].

7. 장점 및 단점

WebVTT는 전파산업회나 일본민간방송연맹이 제정한 자막 규격보다 자유도가 높아 인터넷 동영상 배포 등에서 문자 수 제한 같은 불필요한 제약이 적다는 장점이 있다.[1] 하지만 루비 표기는[1] 정해져 있으나 오픈 캡션만큼 자유롭지 못해 루비 활용이 중요한 일본어 자막 교재로서는 어려움이 있고,[2] 편집 소프트웨어가 거의 없어 제작자의 부담이 크다는 단점도 있다.[2]

7. 1. 장점

WebVTT는 전파산업회나 일본민간방송연맹이 제정한 자막 규격보다 자유도가 높으며, 인터넷상에서의 동영상 배포 등에서는 문자 수 제한 등 불필요한 제약에 얽매이지 않는다.[1]

7. 2. 단점

루비 표기는 일단 정해져 있지만[1] 오픈 캡션에 필적하는 자유도가 없기 때문에 루비 활용이 중요한 일본의 자막 교재로서는 어려움이 있다[2]。

제작자의 부담을 경감하는 편집 소프트웨어가 거의 존재하지 않아 도입을 망설이는 사업자도 있다[2]。

참조

[1] 웹사이트 WebSRT http://www.whatwg.or[...] 2015-02-12
[2] 웹사이트 WebVTT versus TTML: XML considered harmful for web captions? http://www.balisage.[...] 2015-02-16
[3] 웹사이트 WebSRT http://www.whatwg.or[...] 2010-10-14
[4] 서적 Pro CSS for High Traffic Websites https://books.google[...] Apress
[5] 웹사이트 Recent developments around WebVTT http://blog.gingerte[...] 2011-06-27
[6] 웹사이트 HTML5 http://www.w3.org/TR[...]
[7] 웹사이트 WebVTT cue settings http://dev.w3.org/ht[...] W3C 2015-02-11
[8] 웹사이트 WebVTT support in browser https://www.w3.org/c[...] W3C 2017-02-06
[9] 웹사이트 WebVTT Styling http://www.jwplayer.[...] JWPlayer 2017-02-06
[10] 웹사이트 Implement the track element https://bugzilla.moz[...]
[11] 웹사이트 Caption File - YouTube Help https://support.goog[...]
[12] 웹사이트 Firefox 31 Release Notes https://www.mozilla.[...]
[13] 웹사이트 WebVtt: The Web Video Text Tracks Format https://www.w3.org/T[...] The World Wide Web Consortium 2019-04-04
[14] 웹사이트 Added region example to Introduction section under "Other features" – GitHub commit details https://github.com/w[...]
[15] 웹사이트 VTTCue.region - Web APIs | MDN https://developer.mo[...]
[16] 웹인용 WebVTT versus TTML: XML considered harmful for web captions? http://www.balisage.[...] 2015-02-16
[17] 서적 Pro CSS for High Traffic Websites https://books.google[...] Apress
[18] 웹인용 Recent developments around WebVTT http://blog.gingerte[...] 2011-06-27
[19] 웹인용 HTML5 http://www.w3.org/TR[...]
[20] 웹인용 WebVtt: The Web Video Text Tracks Format https://www.w3.org/T[...] The World Wide Web Consortium 2019-04-04


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com