멀티미디어
웹 비디오·오디오 접근성의 세 기둥: 자막(Captions), 음성해설(Audio Description), 원고(Transcript)
청각 및 시각 장애인이 웹 멀티미디어 콘텐츠를 온전히 소비할 수 있도록 돕는 동기화 자막과 대본 원고의 제작 표준과 WebVTT 실무 구현법을 설명합니다.
실무 검증 기록
실무 판단 기준 및 판정 조건
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 기반 재현 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 동영상 미디어 동기화 폐쇄자막 및 원고 제공 검증 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 자막 없는 영상으로 청각장애인 접근 불가 ➔ [수정 목표] 화자/효과음 포함 WebVTT 폐쇄자막 및 대본 원고 완비 |
검증에 사용된 실제 픽스처 / 재현 조건
video > track[kind='captions' default] + descriptive transcript section- 실시간 라이브 방송은 사전 녹화 영상과 달리 별도 동시 자막 시스템 필요
- 배경음악만 있는 순수 무음성 영상은 자막 의무 대상에서 면제
유튜브 영상 임베드, 인터랙티브 팟캐스트, 온라인 교육 동영상 등 멀티미디어(동영상 및 음성) 콘텐츠는 현대 웹에서 가장 강력한 정보 전달 수단입니다. 그러나 소리를 들을 수 없는 청각장애인에게 자막이 없는 동영상은 소리 없는 판토마임에 불과하며, 화면을 볼 수 없는 시각장애인에게 화면에 글씨로만 뜨는 그래프나 시각 효과는 존재조차 알 수 없는 암흑입니다. 또한 청각과 시각을 모두 상실한 시청각 중복 장애인에게는 점자 단말기로 읽을 수 있는 '텍스트 원고(Transcript)'가 유일한 정보 접근의 통로입니다. W3C WCAG 2.2는 가이드라인 1.2(Time-based Media)를 통해 멀티미디어 콘텐츠에 대한 철저한 대체 수단 제공을 의무화하고 있습니다. 이 글에서는 자막(Captions), 음성 해설(Audio Description), 텍스트 원고(Transcript)라는 멀티미디어 접근성의 3대 기둥과 HTML5 <video> 표준 구현법을 상세히 다룹니다.
자막(Captions)과 단순 번역 자막(Subtitles)의 중요한 기능적 차이
많은 영상 제작자와 퍼블리셔가 '서브타이틀(Subtitles)'과 '캡션(Captions)'이라는 용어를 혼용하지만, 접근성 표준에서 두 개념은 명확히 구분됩니다.
단순 자막(Subtitles)은 외국어 영화를 볼 때처럼 대화 음성을 다른 언어로 번역하여 보여주는 텍스트를 의미하며, 화자가 누구인지나 주변 배경 소음에 대한 정보는 포함하지 않습니다.
반면 청각장애인을 위한 폐쇄자막(Closed Captions, CC)은 인물의 대사뿐만 아니라 '누가 말하고 있는지(화자 식별: [진행자], [철수])', '어떤 배경음악과 음향 효과가 발생하고 있는지([긴장감 넘치는 음악], [문이 쾅 닫히는 소리], [한숨을 쉬며])'와 같은 비음성 음향 정보(Non-speech Information)를 완벽하게 문자로 전사하여 소리를 전혀 듣지 못하는 사람도 영상의 분위기와 맥락을 완벽히 동기화하여 이해할 수 있도록 돕습니다.
HTML5 <video> 요소와 WebVTT 포맷을 활용한 표준 자막 구현
모던 웹 브라우저에서 동영상 자막을 표준적으로 서빙하는 가장 안정적인 방법은 HTML5의 <track> 태그와 W3C 표준 WebVTT(.vtt) 자막 파일 형식을 결합하는 것입니다.
- 1. <track> 요소 마크업: <video controls><source src='lecture.mp4' type='video/mp4' /><track kind='captions' src='captions-ko.vtt' srclang='ko' label='한국어 폐쇄자막' default /></video> 형태로 선언합니다.
- 2. kind='captions' 지정: kind='subtitles' 대신 kind='captions'를 지정해야 브라우저가 보조공학 자막으로 올바르게 인식합니다.
- 3. WebVTT 타임스탬프 규격 준수: 자막 파일 내부에는 WEBVTT 헤더를 명시하고, 00:00:01.500 --> 00:00:04.200 형태로 밀리초 단위의 정확한 싱크를 맞추어 텍스트를 작성해야 합니다.
시각장애인을 위한 음성 해설(Audio Description)과 텍스트 원고(Transcript)
대사 없이 화면의 시각적인 동작이나 도표 설명만으로 진행되는 영상은 전맹 시각장애인에게 심각한 정보 장벽을 초래합니다.
성공 기준 1.2.3 및 1.2.5(Audio Description)는 영상 속 인물들의 대사 사이에 비어 있는 오디오 여백 시간을 활용하여, '철수가 화면 우측의 계약서에 서명한다', '그래프의 수치가 80%로 급상승한다'와 같은 중요한 시각적 상황을 전문 성우의 목소리로 묘사해 주는 별도의 오디오 트랙을 제공할 것을 요구합니다.
나아가 시청각 장애인을 위한 최상의 보조 수단은 '완전한 텍스트 원고(Descriptive Transcript)'입니다. 영상 내부의 모든 대사, 배경 음향, 그리고 화면의 시각적 해설을 하나의 긴 텍스트 문서로 정리하여 비디오 플레이어 바로 하단에 접힘/펼침이나 다운로드 링크로 배치합니다. 이 텍스트 원고는 점자 디스플레이를 사용하는 시청각 장애인뿐만 아니라, 지하철 등 소리를 켤 수 없는 환경의 일반 사용자에게도 최상의 정보 가치를 제공합니다.
유튜브 및 외부 동영상 플랫폼 임베드 시의 접근성 체크포인트
웹사이트에 유튜브(YouTube)나 비메오(Vimeo) 영상을 <iframe>으로 삽입할 때도 접근성 규칙은 동일하게 적용됩니다.
첫째, <iframe> 태그에 반드시 명확한 title 속성(<iframe title='2026 웹 접근성 세미나 1부 영상'>)을 부여하여 스크린리더가 프레임의 목적을 즉각 알 수 있게 해야 합니다.
둘째, 유튜브 자체의 자동 생성 자막(Auto-generated Captions)에만 의존하지 말고, 발음이나 전문 용어 오타를 사람이 직접 교정한 정밀한 커스텀 자막 트랙을 업로드하여 활성화해 두어야 합니다.
셋째, 사용자의 허락 없이 페이지가 열리자마자 소리가 크게 재생되는 자동 재생(autoplay)을 절대 걸지 말아야 하며, 키보드 Tab 키만으로 영상의 재생/일시정지 및 볼륨 조절 버튼에 온전히 도달할 수 있는지 키보드 조작성을 확인해야 합니다.
예외 조건 및 수동 검토 범위
- 실시간 라이브 스트리밍 방송의 경우 사전 녹화 자막과 달리 동시통역 자막 속도 지연(Latency)이 발생할 수 있습니다.
- 순수 배경음악만 있고 정보가 없는 영상 클립은 자막 의무 대상에서 면제됩니다.