자막, 대본, 음성 해설

멀티미디어의 대체 수단

동영상과 오디오는 소리와 화면 두 갈래로 정보를 전한다. 한쪽을 받지 못하는 사람에게는 그 갈래를 다른 형태로 바꿔 준다.

어떤 수단이 필요한지는 미디어 종류(오디오 전용·비디오 전용·둘 다), 녹화인지 실시간인지, 목표로 하는 WCAG 버전과 수준으로 정해진다.

자막(captions)과 번역 자막(subtitles)

둘은 다르다. HTML <track>의 kind도 둘을 나눈다.

열린 자막과 닫힌 자막

웹에서는 닫힌 자막이 기본이다. 사용자가 자기 눈에 맞게 자막 모양을 바꿀 수 있어야 하기 때문이다.

WCAG 성공 기준

시간 기반 미디어 기준은 WCAG 1.2에 모여 있다. 녹화된(prerecorded) 콘텐츠와 실시간(live) 콘텐츠를 나눈다.

AA를 목표로 하면 녹화 동영상에는 자막과 음성 해설, 오디오 전용에는 대본, 실시간 동영상에는 실시간 자막이 필요하다. 기준상 화면 정보까지 담은 대본(서술형 대본, descriptive transcript)은 AAA지만, 농맹 사용자에게는 대본이 미디어에 닿는 유일한 길이므로 AA를 목표로 할 때도 함께 두는 것을 권한다. 시각장애 사용자가 쓸 수 있는 콘텐츠는 대개 농맹 사용자도 점자로 쓸 수 있고, 미디어만 예외이기 때문이다. 자동 재생되는 소리를 끄는 기준(1.4.2)과 움직임 기준은 색과 움직임의 접근성에 있다.

자막의 품질: 동기화·동등·접근 가능

• 화자가 둘 이상이면 누가 말하는지 표시한다.
• 의미 있는 소리만 넣는다. 「[긴장감 도는 음악]」은 넣고, 의미 없는 배경 소음은 뺀다.
• 녹화 콘텐츠의 자막은 대본을 먼저 쓰고 시간을 맞추거나(type, then sync), 자동 음성 인식 결과를 사람이 고쳐 만든다. 실시간 방식은 아래 「실시간 자막」에 있다.
• 자동 생성 자막은 초안이다. 사람이 검수해 고친 뒤에야 동등한 자막이 된다. 고유명사, 전문용어, 문장 부호에서 특히 틀린다. 오인식이 많은 자동 자막은 농인 시청자에게 자막이 없는 것보다 나쁠 수 있다. 틀린 내용을 믿게 되기 때문이다.

대본

대본은 말한 내용에 더해 중요한 소리(「청중이 웃는다」)와 중요한 화면 정보(「한 사람이 방에 들어온다」)를 글로 담는다.

대본은 검색 엔진과 사용자가 내용을 검색하게 해 주고, 스크린 리더를 말소리보다 훨씬 빠르게 설정해 듣는 사람에게도 영상보다 빠르다. 검색 엔진은 플레이어 안의 자막보다 페이지의 대본 텍스트를 더 잘 읽는다. 다 만든 자막 파일을 내보내 대본의 뼈대로 쓰면 품이 준다.

플레이어마다 대본 기능이 다르고, 플레이어의 대본 버튼에 닿지 못하는 사용자도 있다. 그래서 대본은 플레이어 밖에도 둔다.

음성 해설

화면에만 있는 정보(자막처럼 뜬 글자, 표정, 장면 전환, 시연 동작)를 해설자가 말로 전한다. 방송에서는 화면 해설이라고도 한다.

전달 방법은 세 가지다.

해설 제작은 비싸고 오래 걸린다. 그래서 처음부터 해설이 필요 없게 만드는 것이 가장 좋다.

• 「보시는 것처럼」 대신 화면의 목록을 소리 내어 읽는다.
• 「여기를 누르고 여기를 누르세요」 대신 「오른쪽 위 설정 버튼을 누른다」처럼 무엇을 누르는지 말한다.
• 화면에 새 글이나 그림이 나오면 발표자가 그 내용을 말한다.
• 화면 공유로 조작을 보여 줄 때는 동작 + 이름 + 모양 + 위치를 함께 말한다. 「홈 탭의 글꼴 영역에 있는, 지우개 달린 A 모양의 '모든 서식 지우기'를 누른다」처럼 말하면 화면을 못 보는 사람도, 아이콘만 보는 사람도 따라온다.

<track kind="descriptions">로 시간 맞춤 해설 텍스트(보통 WebVTT)를 붙일 수 있다. HTML은 이 트랙을 화면이 안 보일 때 음성으로 합성해 읽히도록 정해 두었지만, W3C WAI는 텍스트 해설이 그것을 소리 내어 읽는 미디어 플레이어에서만 통한다고 안내한다. 쓰려면 플레이어가 지원하는지 먼저 확인하고, 해설이 대사 사이에 다 들어가지 않으면 해설 동안 영상을 멈추는 플레이어 설정이 필요하다.

실시간 자막

화상 회의, 라이브 스트리밍, 실시간 방송은 미리 자막을 만들 수 없다. 말을 글로 바꾸는 일과 소리에 맞춰 띄우는 일을 동시에 해야 한다.

• 자동 자막은 조용한 환경에서 한 사람이 또렷하게 말할 때만 그나마 쓸 만하다. 중요한 행사는 속기나 섀도 스피킹을 쓴다.
• 녹화본으로 남길 때는 실시간 자막을 사람이 교정해 녹화 자막으로 다시 쓴다.
• 플랫폼이 자막을 지원하지 않으면 별도 자막 앱이나 브라우저 창을 미디어 옆에 띄워 함께 보여 준다.
• 실시간 행사에서는 수어 통역사를 화면에 함께 띄우기도 한다. 수어는 자막보다 표현이 풍부해 수어가 제1언어인 농인에게 더 나은 경험을 주지만, 세계에 300개가 넘는 수어가 있어 통역 하나로 모든 시청자를 돕지는 못하고 비용도 크다.
• 실시간 콘텐츠의 음성 해설은 따로 트랙을 넣기 어렵다. 발표자가 화면에 나온 내용을 말로 설명하는 것이 현실적인 해법이다.

웹에서 자막 붙이기: <track>과 WebVTT

<track>

<video>나 <audio>의 자식으로 시간 맞춤 텍스트 트랙을 붙이는 빈 요소다.

<video controls src="lecture.mp4">
  <track kind="captions" src="lecture.ko.vtt" srclang="ko" label="한국어 자막" default>
  <track kind="subtitles" src="lecture.en.vtt" srclang="en" label="English">
  <track kind="chapters" src="lecture.chapters.vtt" srclang="ko">
  <a href="lecture.mp4">동영상 내려받기</a>
</video>
<p><a href="lecture-transcript.html">강의 대본 보기</a></p>

같은 kind·srclang·label 조합의 트랙을 둘 이상 둘 수 없다. 자막 모양은 video::cue { font-size: 1.25rem; }처럼 ::cue로 꾸미지만, 사용자의 OS·브라우저 자막 설정이 우선할 수 있다.

WebVTT 파일

WebVTT(Web Video Text Tracks)는 text/vtt MIME 타입, .vtt 확장자, UTF-8 인코딩을 쓰는 텍스트 형식이다. 서버가 text/vtt로 보내야 브라우저가 읽는다.

WEBVTT
 
NOTE 화자는 <v> 태그로, 의미 있는 소리는 대괄호로 적는다
 
00:00:01.000 --> 00:00:04.000
<v 진행자>접근성 강의에 오신 걸 환영합니다.
 
00:00:04.500 --> 00:00:07.000 line:0 align:start
[박수 소리]
 
00:00:07.200 --> 00:00:11.000
<v 강사>오늘은 자막을 다는 방법을 봅니다.

미디어 플레이어를 직접 만들 때는 자막 켜기 버튼을 키보드로 조작할 수 있게 하고 버튼 상태를 알린다(키보드 접근성과 포커스 관리, 접근 가능한 위젯). 유튜브 같은 외부 플레이어를 iframe으로 넣으면 그 플레이어의 자막 기능을 쓰고, iframe에는 title을 준다(접근 가능한 페이지 구조).

정리

• 동영상에는 자막 + 대본, 오디오 전용에는 대본, 화면에만 있는 정보에는 음성 해설을 준다. 실시간 동영상에는 실시간 자막이 AA 요구다.
• 청각장애인용 자막은 대사뿐 아니라 소리와 화자까지 담는 captions다. <track>의 기본값 subtitles와 다르다.
• 자막은 동기화·동등·접근 가능해야 한다. 자동 자막은 사람이 검수하기 전까지 초안이다.
• 음성 해설은 비싸므로 발표자가 화면을 말로 설명하게 해 필요를 줄인다.
• 웹에서는 닫힌 자막을 <track kind="captions">와 WebVTT 파일로 붙여 사용자가 켜고 끄고 모양을 바꾸게 한다.

관련 노트: 웹 접근성, 장애 유형별 웹 사용, 색과 움직임의 접근성, 대체 텍스트, 링크, 쉬운 글, WCAG와 POUR 원칙, 이미지·오디오·비디오 임베드