말과 자막이 맞물려야

KRDS CP-439 — 자막은 오디오와 동기화하여 제공하고 있다.

0. 들어가며 — 자막이 소리보다 늦거나 빠르면

이번 559편은 자막은 오디오와 동기화하여 제공하라는 규칙입니다. 이로써 접근 가능한 미디어 8개 규칙이 마무리 됩니다.

자막이 — 실제 말소리와 시간이 안 맞으면(자막이 늦거나 빨라), 못 듣는 사용자는 어느 장면의 말인지 헷갈리죠. CP-439는 자막을 오디오와 시간에 맞춰 제공하라고 규정합니다. 자막의 기본 요건이죠. 이번 편을 풀어냅니다.

1. 원문 — 자막 오디오 동기화

CP-439 (컴포넌트 > 접근 가능한 미디어) “자막은 오디오와 동기화하여 제공하고 있다.”

자막이 실제 오디오(말소리·소리)와 시간에 맞춰(동기화) 표시되게 제공하라는 뜻입니다.

정리: 자막을 오디오와 시간에 맞춰 동기화하라. 이게 CP-439입니다.

2. 왜 자막 동기화인가

자막(캡션)은 영상의 소리를 텍스트로 옮긴 것입니다. 이 자막이 실제 소리와 같은 시점에 표시돼야(동기화), 못 듣는 사용자가 ’지금 이 장면에서 이 말을 한다’를 정확히 압니다. 시간이 안 맞으면 혼란스럽죠. CP-439는 이 동기화를 요구합니다.

자막이 동기화 안 될 때의 문제:

자막이 늦음 자막이 실제 말보다 늦게 뜨면, 이미 다음 장면으로 넘어갔는데 앞 장면의 말이 뒤늦게 자막으로 나옵니다. 사용자는 ‘이 자막이 어느 장면의 말이지?’ 헷갈리죠. 화면과 자막이 어긋나, 누가 무엇을 언제 말했는지 못 따라갑니다.

자막이 빠름 — 반대로 — 자막이 말보다 빨리 뜨면, 아직 말 안 한 내용이 미리 나와 어색하고, 화면과 안 맞죠.

장면-자막 불일치 동기화가 안 되면 화면 상황(누가 말하는지, 무슨 표정인지)과 자막 내용이 어긋나, 못 듣는 사용자가 맥락을 잃습니다. 특히 화자 식별(CP-435)이나 효과음 타이밍도 안 맞으면 혼란스럽죠.

그래서 CP-439는 — 자막을 오디오와 동기화하라고 합니다:

시간 맞춤 각 자막이 실제 말이 나오는 그 시점에 표시되고, 말이 끝나면(또는 다음 말 시작 시) 사라지게 합니다. 말과 자막이 같은 타이밍으로 맞물리죠.

타임코드 기반 자막 파일(VTT, SRT 등)에 각 자막의 시작·종료 시간(타임코드)을 정확히 지정합니다. 플레이어가 그 시간에 맞춰 자막을 띄우죠. ’00:01:23.000 → 00:01:25.500: 안녕하세요’처럼요.

적절한 표시 시간 — 자막이 — 너무 빨리 사라지지 않게(읽을 시간 확보), 너무 오래 남지 않게(다음 말과 겹침 방지) 적절한 시간 동안 표시합니다.

실시간 자막(라이브). 생방송·실시간 콘텐츠의 자막은 — 약간의 지연이 불가피하지만, 가능한 한 빠르게 동기화 합니다(WCAG 1.2.4 Live Captions). 사전 녹화 콘텐츠는 — 완벽히 동기화할 수 있죠(WCAG 1.2.2).

WCAG 1.2.2 / 1.2.4. 자막은 WCAG의 캡션 기준입니다. 사전 녹화(1.2.2)·실시간(1.2.4) 모두 동기화된 자막을 요구하죠. ’동기화(synchronized)’가 캡션의 정의에 포함됩니다 단순 텍스트가 아니라 시간에 맞춰 흐르는 텍스트 라는 거죠.

자막의 완성 요건 종합. 접근 가능한 미디어 8개 규칙을 보면 — 자막은 ①내용 완전(화자·효과음 CP-435, 모든 정보 CP-436), ②또렷이 보임(대비 CP-437, 가림 없음 CP-438), ③시간 맞음(동기화 CP-439)이라는 — 내용·가시성·타이밍 세 차원을 다 갖춰야 합니다. CP-439는 그중 타이밍을 완성하죠.

이 규칙은 접근 가능한 미디어의 ’자막 타이밍’을 담당합니다 — 자막을 오디오와 동기화해(439), 못 듣는 사용자가 화면· 소리·자막을 일치된 시점으로 따라가게 하죠. 접근 가능한 미디어 8개 규칙이 이로써 마무리됩니다.

정리하면 — 자막이 실제 말과 시간이 안 맞으면 어느 장면의 말인지 헷갈리므로, 타임코드로 정확히 동기화해 말과 자막이 같은 시점에 맞물리게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

동기화 — 자막이 실제 말과 같은 시점에 표시되는가(늦거나 빠르지 않음).

타임코드 — 자막 파일에 시작·종료 시간이 정확히 지정됐는가.

표시 시간 — 자막이 읽을 만큼 충분히, 겹치지 않게 표시되는가.

개선 방향

자막 파일(VTT/SRT)에 정확한 타임코드. 말과 같은 시점에 표시.

적절한 표시 시간(읽을 시간 + 겹침 방지). 라이브는 최대한 빠르게(WCAG 1.2.2/1.2.4).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
콘텐츠/영상	자막 타임코드 동기화 제작
퍼블리셔/개발	자막 표시 동기화 구현
QA/접근성	자막 동기화 검증

기관 유형	CP-439 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (자막 있는 비디오 사용 시)

자막이 있는 비디오를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 자막이 실제 말과 같은 시점에 표시되나요(늦거나 빠르지 않음)?

□ 자막 파일에 시작·종료 시간이 정확히 지정됐나요?

□ 자막이 읽을 만큼 충분히, 겹치지 않게 표시되나요?

❓ FAQ

Q1. 자막이 조금 늦으면 안 되나요? 늦으면 이미 다음 장면인데 앞 말이 나와 헷갈립니다. 화면·소리·자막이 같은 시점으로 맞물려야 하죠. Q2. 동기화는 어떻게 하나요? 자막 파일(VTT/SRT)에 각 자막의 시작·종료 타임코드를 정확히 지정합니다. 플레이어가 그 시간에 띄우죠. Q3. 생방송 자막은요? 약간의 지연은 불가피하지만 최대한 빠르게 동기화합니다(WCAG 1.2.4). 사전 녹화는 완벽히 동기화할 수 있죠.

6. 마무리

CP-439의 메시지:

말과 자막이 맞물려야 — 자막을 오디오와 동기화하여 제공하라.

자막이 실제 말과 시간이 안 맞으면 어느 장면의 말인지 헷갈립니다. 타임코드로 정확히 동기화해 말과 자막이 같은 시점에 맞물리게 하는 게 핵심이죠. 이로써 접근 가능한 미디어 8개 규칙이 마무리됩니다. 다음 편부터는 숨긴 콘텐츠 (Hidden content) — CP의 마지막 그룹입니다.

다음 편 예고 ▶ 「560. (CP-440) 숨긴 콘텐츠 — 시각적으로 숨긴 콘텐츠를 스크린 리더에 적절히 제공하고 있다.」

ViewCheck는 자막이 오디오와 동기화되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 접근 가능한 미디어(Accessible multimedia) 가이드 — https://www.krds.go.kr/html/site/component/component_44.html

WCAG 2.1 SC 1.2.2 Captions (Prerecorded) — https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준