HTML Academy · 강의

track과 WebVTT로 자막 추가하기

track과 .vtt 파일로 비디오에 캡션과 자막 추가하기

레슨 4/414개 단계

track과 WebVTT로 자막 추가하기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

자막과 대사 자막

video 접근성에는 오디오 콘텐츠를 위한 텍스트 대안이 필요합니다:

대사 자막 — 대화를 옮긴 내용이며, 시청자가 소리를 들을 수 있다고 가정합니다
자막 — 대화와 소리 설명을 함께 제공하며, 청각 장애 사용자를 위한 것입니다
오디오 설명 — 시각 장애 사용자를 위해 시각적 콘텐츠를 설명합니다

track 요소

<track> 요소는 자막 또는 대사 자막 파일을 video에 연결합니다:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

트랙 속성

트랙 요소의 속성:

src — VTT 파일의 경로
kind — 트랙 유형(대사 자막, 자막, 설명, 챕터, 메타데이터)
srclang — BCP 47 언어 코드(en, es, fr...)
label — CC 메뉴에 표시되는 사람이 읽을 수 있는 이름
default — 부울 값; 이 트랙이 기본으로 표시됩니다

WebVTT 형식

WebVTT(웹 video 텍스트 트랙)는 자막 파일 형식입니다:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

VTT cue 식별자

VTT cue에는 선택적 식별자를 지정할 수 있습니다:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

VTT cue 설정

VTT cue는 위치 지정 설정을 지원합니다:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

CSS로 WebVTT cue 스타일 지정

::cue 의사 요소로 cue 상자의 스타일을 지정합니다:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

트랙 종류 값

kind 속성은 텍스트 트랙의 용도를 지정합니다:

subtitles — 대화의 번역 또는 받아쓰기
captions — 청각 장애 사용자를 위한 대화 및 소리 설명
descriptions — 시각 장애 사용자를 위한 시각적 콘텐츠의 오디오 설명
chapters — 탐색을 위한 챕터 제목
metadata — JavaScript에서 사용하는 기계 판독 가능 데이터

챕터 트랙

video 챕터 탐색에는 kind=chapters를 사용합니다:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

JavaScript TextTrack API

TextTrack API로 트랙 데이터에 접근합니다:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

인터랙티브 video를 위한 메타데이터 트랙

특정 시점에 JavaScript 이벤트를 발생시키려면 메타데이터 트랙을 사용합니다:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

접근성 요구 사항

WCAG는 미리 녹화된 video에 자막을 요구합니다:

A 수준 — 오디오가 포함된 모든 미리 녹화된 video에 자막 제공
AA 수준 — 모든 미리 녹화된 video에 오디오 설명 제공
자동 생성 자막(YouTube)은 검토 없이는 충분하지 않습니다
자막은 정확하고 동기화되며 빠짐이 없어야 합니다

빠른 확인

대사 자막과 자막 트랙 종류의 차이는 무엇입니까?

인터랙티브 레슨에서 답해보세요

복습: track과 WebVTT

자막과 대사 자막의 핵심:

video 내부의 <track src kind srclang label default>
kind: 대사 자막, 자막, 설명, 챕터, 메타데이터
WebVTT 파일 형식: WEBVTT + 시간 표시 --> 시간 표시 + 텍스트
::cue CSS 의사 요소로 cue 스타일 지정
WCAG는 미리 녹화된 video에 자막을 요구합니다

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 40
레슨: 159

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“track과 WebVTT로 자막 추가하기” 강의는 무료인가요?

네 — “track과 WebVTT로 자막 추가하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“track과 WebVTT로 자막 추가하기”에서 뭘 배우나요?

track과 .vtt 파일로 비디오에 캡션과 자막 추가하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“track과 WebVTT로 자막 추가하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기