track element - by. UXKM

2025-05-16

요약 설명
<track> 요소는 <video> 또는 <audio> 요소 안에서 자막, 캡션, 설명, 대화 텍스트 등 보조 텍스트 정보를 제공할 때 사용하는 시맨틱 태그입니다.
src, kind, srclang, label, default 등의 속성을 통해 자막의 종류와 언어, 기본 활성화 여부 등을 설정할 수 있으며, 청각장애 사용자나 다양한 언어 사용자에게 접근성을 높이는 역할을 합니다. <video>나 <audio> 안에 여러 개의 <track>을 포함하여 다양한 언어와 형식의 자막을 제공할 수 있습니다.

주요 역할 및 특징

비디오 및 오디오에 텍스트 트랙 추가
<video> 및 <audio> 요소와 함께 사용되며, 자막 또는 기타 설명 정보를 제공합니다.
다양한 트랙 유형 지원
subtitles(자막), captions(청각 장애인을 위한 자막), descriptions(화면 설명), chapters(장면 정보) 등의 트랙을 지원합니다.
다국어 지원 가능
여러 개의 <track> 요소를 사용하여 다양한 언어의 자막을 제공할 수 있습니다.
브라우저가 자동으로 지원하는 기능
자막을 직접 스타일링할 필요 없이, 브라우저에서 기본적으로 렌더링합니다.
VTT(WebVTT) 파일 형식 사용
src 속성을 사용하여 WebVTT(.vtt) 파일을 연결해야 합니다.
JavaScript로 동적 제어 가능
textTracks API를 사용하여 자막을 동적으로 추가하거나 제어할 수 있습니다.

CSS 기본 값

<track> 요소 자체는 화면에 표시되지 않으며, <video>, <audio> 요소 내에서만 동작합니다.

기본 문법

							<video controls>
								<source src="video.mp4" type="video/mp4">
								<track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="Korean">
							</video>

속성

`<track>` 속성 요약

속성명
설명

src [필수]

자막 파일의 경로를 지정합니다.
kind [필수]

트랙 유형을 지정합니다. (subtitles, captions 등)
srclang [필수]

자막 언어를 설정합니다. (en, ko 등)
label

사용자가 선택할 때 표시될 자막 이름을 지정합니다.
default

기본적으로 활성화할 트랙을 지정합니다.

[src] 필수 <track src="파일 경로">

자막 파일의 URL 또는 경로를 지정합니다. 보통 .vtt(WebVTT) 형식의 파일을 사용합니다.

								<track src="subtitles_ko.vtt" kind="subtitles" srclang="ko">

[kind] 필수 <track kind="값">

트랙의 유형(종류)을 설정합니다.

값 :: subtitles : 번역된 자막 (청각 장애인용 아님); captions : 청각 장애인을 위한 자막 (배경 소리 설명 포함); descriptions : 시각 장애인을 위한 설명 (화면 내용 설명); chapters : 비디오 챕터 정보 (네비게이션); metadata : 자막이 아닌 메타데이터 정보 (스크립트 사용 가능)

								<track src="captions_en.vtt" kind="captions" srclang="en">

[srclang] 필수 <track srclang="값">

자막의 언어를 설정합니다. ISO 639-1 언어 코드를 사용해야 합니다.
예: ko(한국어), en(영어), fr(프랑스어)

								<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr">

[label] 선택 사항 <track label="자막 이름">

사용자가 자막을 선택할 때 표시될 이름을 지정합니다.

								<track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="한국어">

[default] 선택 사항 <track default>

기본적으로 활성화할 트랙을 지정합니다. 여러 개의 <track> 요소가 있을 때 하나만 default가 될 수 있습니다.

								<track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" default>
								<track src="subtitles_en.vtt" kind="subtitles" srclang="en">
								<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr">

예제

여러 언어 자막 제공 및 기본 자막 지정

위 영상의 언어별 .vtt

friday_ko.vtt

										WEBVTT

										00:00:00.000 --> 00:00:00.999  line:80%
										힐디!

										00:00:01.000 --> 00:00:01.499 line:80%
										어떻게 지내?

										00:00:01.500 --> 00:00:02.999 line:80%
										말해봐, 우주의 지배자는 계신가?

										00:00:03.000 --> 00:00:04.299 line:80%
										응, 계시는데... 기분이 별로야.

										00:00:04.300 --> 00:00:06.000 line:80%
										누군가 왕관의 보석들을 훔쳐갔어.

friday_en.vtt

										WEBVTT

										00:00:00.000 --> 00:00:00.999  line:80%
										Hildy!

										00:00:01.000 --> 00:00:01.499 line:80%
										How are you?

										00:00:01.500 --> 00:00:02.999 line:80%
										Tell me, is the lord of the universe in?

										00:00:03.000 --> 00:00:04.299 line:80%
										Yes, he's in - in a bad humor

										00:00:04.300 --> 00:00:06.000 line:80%
										Somebody must've stolen the crown jewels

friday_fr.vtt

										WEBVTT

										00:00:00.000 --> 00:00:00.999  line:80%
										Hildy !

										00:00:01.000 --> 00:00:01.499 line:80%
										Comment ça va ?

										00:00:01.500 --> 00:00:02.999 line:80%
										Dis-moi, le seigneur de l'univers est-il là ?

										00:00:03.000 --> 00:00:04.299 line:80%
										Oui, il est là — mais de mauvaise humeur.

										00:00:04.300 --> 00:00:06.000 line:80%
										Quelqu'un a dû voler les joyaux de la couronne.

청각 장애인을 위한 캡션 추가

대화뿐만 아니라 배경 소리(예: "[박수 소리]")까지 표시합니다.

								<video controls>
									<source src="video.mp4" type="video/mp4">
									<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
								</video>

								WEBVTT

								00:00:00.000 --> 00:00:05.000
								안녕하세요! 이 비디오는 청각 장애인을 위한 캡션을 포함하고 있습니다.

								00:00:05.000 --> 00:00:10.000
								여기에는 대화 내용뿐만 아니라 중요한 소리도 설명됩니다.

								00:00:10.000 --> 00:00:15.000
								[음악 재생 중]

								00:00:15.000 --> 00:00:20.000
								문이 열리는 소리

								00:00:20.000 --> 00:00:25.000
								"어서 오세요!"라고 말하는 주인공

주의사항

<track> 요소는 WebVTT(.vtt) 파일 형식만 지원하며, SRT(.srt)는 직접 지원하지 않습니다.
여러 개의 자막이 있을 경우, 하나만 기본(default)으로 설정해야 합니다.
최신 브라우저는 <track> 요소를 지원하지만, 일부 구형 브라우저에서는 작동하지 않을 수 있습니다. 필요하다면 자바스크립트를 사용하여 자막을 추가하는 방식도 고려할 수 있습니다.