<track> — 미디어 태그 도감

올바른 사용

video 또는 audio의 자식

kind 속성으로 종류 (captions, subtitles, descriptions, chapters)

src로 WebVTT 파일 경로

default로 기본 활성 트랙

한국어 자막

<video controls>
  <source src="/intro.mp4" type="video/mp4" />
  <track
    src="/intro.ko.vtt"
    kind="captions"
    srclang="ko"
    label="한국어"
    default
  />
</video>

청각장애 사용자에게 captions(자막). default로 자동 활성.

다국어 자막

<video controls>
  <source src="/talk.mp4" />
  <track src="/talk.ko.vtt" kind="captions" srclang="ko" label="한국어" default />
  <track src="/talk.en.vtt" kind="subtitles" srclang="en" label="English" />
  <track src="/talk.ja.vtt" kind="subtitles" srclang="ja" label="日本語" />
</video>

한국어 captions + 영어/일본어 subtitles. 청각장애 vs 외국어 사용자 구분.

chapters 트랙

<video controls>
  <source src="/long-video.mp4" />
  <track src="/long-video.chapters.vtt" kind="chapters" srclang="ko" />
</video>

비디오 챕터 내비. 긴 영상의 점프 기능.

자주 보는 안티패턴

track 누락 — WCAG 1.2.2 위반

kind 속성 누락 또는 잘못

srclang 누락

WebVTT 형식 오류

track 누락

<video controls>
  <source src="/talk.mp4" />
</video>

WCAG 1.2.2 위반. 청각장애 사용자 접근 불가.

kind 누락

<video controls>
  <source src="/talk.mp4" />
  <track src="/talk.vtt" />
</video>

kind 기본값이 subtitles. captions가 의도였다면 시맨틱 잘못.

해설

video·audio의 텍스트 트랙. 자막·캡션·챕터·오디오 설명을 WebVTT 파일로 제공. 청각장애 사용자의 접근성과 AI의 비디오 콘텐츠 이해를 동시에 해결.

SEO 관점에서 자막 텍스트는 검색엔진이 인덱싱. 비디오의 말하는 내용이 검색 가능. 키워드 매칭의 직접 자원.

GEO 관점에서 AI가 비디오 콘텐츠에 접근하는 유일한 경로. AI는 비디오·오디오를 직접 듣지 못함. 자막 텍스트로 어떤 내용인지 인지. 자막 없는 비디오는 AI 답변에 인용 불가.

A11y 관점에서 가장 critical. WCAG 1.2.2 "녹화된 동영상에 자막"이 의무. 청각장애 사용자가 비디오의 대사·소리 설명에 접근하는 유일한 수단. captions와 subtitles의 차이도 명확 — captions는 청각장애를 위한 모든 음성 정보(음악, 효과음 포함), subtitles는 외국어 사용자를 위한 대사 번역.

자주 보는 안티패턴: track 누락(WCAG 1.2.2 위반 — 가장 흔하면서 가장 critical한 결함), kind 누락(기본값 subtitles로 처리되는데 captions가 의도였다면 시맨틱 잘못), srclang 누락(스크린리더 발음 엔진 언어 인식 실패), WebVTT 형식 오류(시간 표기, 줄바꿈 등 미세한 형식 오류로 자막이 표시 안 되는 경우).

kind 속성 종류:

captions — 청각장애를 위한 모든 음성(대사, 음악, 효과음 "[웃음소리]") — 원어와 같은 언어
subtitles — 외국어 번역 — 원어와 다른 언어
descriptions — 시각장애를 위한 시각 정보 음성 설명(별도 트랙) — 거의 사용 안 됨
chapters — 챕터 내비 (긴 영상의 점프)
metadata — 스크립트로 처리할 메타데이터 (사용자에게 안 보임)

default 속성 — 기본 활성 트랙. 사용자가 별도 설정 안 해도 자동 표시. 한국 사이트의 한국어 captions에 권장.

WebVTT 형식 — .vtt 확장자. 간단한 텍스트 포맷:

WEBVTT

00:00:00.000 --> 00:00:03.000
첫 번째 자막

00:00:03.500 --> 00:00:07.000
두 번째 자막

자막 자동 생성 — YouTube의 자동 자막, OpenAI Whisper 같은 도구로 자동 생성. 수동 검수가 권장 — 한국어 자동 자막은 영어보다 정확도 낮음. 다만 없는 것보다 자동 자막이라도 있는 게 압도적 a11y 개선.

비디오 플랫폼 활용 — YouTube·Vimeo 임베드 비디오는 플랫폼의 자막을 활용. 직접 자막 파일을 호스팅하지 않아도 됨. 다만 임베드 비디오는 embed iframe이라 일부 시맨틱 제어가 어렵다.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설