도입 스토리
"이번엔 제품 소개 영상이에요." 박멘토가 회사 웹사이트의 비디오 섹션을 열었습니다.
<video src="/videos/product-intro.mp4" controls></video>"멘토님, 영상은 괜찮은 거 아닌가요? 자막 설정도 있는데..."
"유튜브 자동 자막이요? 그건 오류가 많아요. 법적으로는 정확한 자막을 제공해야 해요. 그리고 청각장애인뿐 아니라, 소리 없이 영상을 보는 상황도 생각해봐요."
지하철에서, 도서관에서, 회의실에서. 소리를 켤 수 없는 상황은 생각보다 많습니다.
핵심 개념 설명
track 요소로 자막 제공하기
HTML5의 <track> 요소로 자막 파일을 연결합니다.
<video controls> <source src="/videos/product-intro.mp4" type="video/mp4"> <track kind="subtitles" src="/videos/product-intro-ko.vtt" srclang="ko" label="한국어" default > <track kind="subtitles" src="/videos/product-intro-en.vtt" srclang="en" label="English" ></video>kind 속성 값:
subtitles: 자막 (대사 번역, 외국어)captions: 폐쇄 자막 (대사 + 효과음 등 청각장애인용)descriptions: 화면 해설 (시각장애인용 영상 설명)chapters: 챕터 내비게이션
청각장애인을 위해서는 kind="captions"가 더 적합합니다. 대사뿐 아니라 "[박수 소리]", "[전화 벨소리]" 같은 소리 정보도 포함합니다.
WebVTT 자막 파일 형식
자막 파일은 .vtt 형식(WebVTT)을 사용합니다.
WEBVTT
00:00:01.000 --> 00:00:04.000
안녕하세요, 저희 회사의 새로운 서비스를 소개합니다.
00:00:05.000 --> 00:00:09.000
이 서비스는 모든 사람이 쉽게 사용할 수 있도록 설계되었습니다.
00:00:10.000 --> 00:00:12.000
[경쾌한 배경음악]
오디오 콘텐츠와 텍스트 대본
오디오만 있는 콘텐츠(팟캐스트, 오디오 가이드)는 텍스트 대본을 함께 제공해야 합니다.
<audio controls> <source src="/audio/guide.mp3" type="audio/mpeg"></audio><details> <summary>오디오 대본 보기</summary> <p>안녕하세요. 이 오디오 가이드는 제품 사용법을 설명합니다...</p></details>자동 재생 금지
배경 음악이나 자동 재생 영상은 스크린리더 사용자에게 큰 방해가 됩니다. 스크린리더의 음성과 충돌하기 때문입니다.
<!-- 잘못된 예: 자동 재생 --><video src="background.mp4" autoplay loop></video><!-- 올바른 예: 소리 없는 배경 영상만 허용 --><video src="background.mp4" autoplay loop muted aria-hidden="true"></video>소리가 있는 콘텐츠는 사용자가 직접 재생 버튼을 눌러야만 시작되어야 합니다.
단계별 실습
따라하기: VTT 자막 파일 만들기
다음 내용으로 subtitle.vtt 파일을 만들어봅니다.
WEBVTT
00:00:00.000 --> 00:00:03.000
안녕하세요, 웹접근성 강의에 오신 것을 환영합니다.
00:00:04.000 --> 00:00:07.000
오늘은 자막 제공 방법을 배워보겠습니다.
00:00:08.000 --> 00:00:10.000
[키보드 타이핑 소리]
그런 다음 HTML에 연결합니다.
<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <title>자막 실습</title></head><body> <video controls width="640"> <source src="sample.mp4" type="video/mp4"> <track kind="captions" src="subtitle.vtt" srclang="ko" label="한국어" default> 이 브라우저는 video 태그를 지원하지 않습니다. </video></body></html>변형하기: YouTube 자막 설정 확인하기
YouTube에서 영상을 열고 자막 설정을 확인합니다.
- 자동 생성 자막과 수동 자막의 정확도 차이를 비교합니다.
- WCAG는 자동 생성 자막만으로는 요건을 충족하지 못한다는 점을 기억합니다.
정리와 확인
핵심 내용 요약
<track>요소: 비디오/오디오에 자막 파일 연결kind="captions": 청각장애인용 폐쇄 자막 (소리 정보 포함)- WebVTT (
.vtt): 브라우저 표준 자막 파일 형식 - 오디오 전용 콘텐츠: 텍스트 대본 함께 제공
- 자동 재생 금지: 소리 있는 콘텐츠는 사용자 제어 필수
확인 문제
문제 1. 청각장애인을 위한 자막에서 kind 속성 값으로 적합한 것은?
kind="captions"
(subtitles는 언어 번역 자막, captions는 소리 정보까지 포함하는 폐쇄 자막)
다음 챕터에서는 색상 대비와 색각이상 접근성을 다룹니다. "빨간색 = 오류"처럼 색에만 의존하는 정보 전달의 문제점과 해결 방법을 알아봅니다.