자막은 또렷이, 가리지 말고

KRDS CP-438 — 자막은 주변 요소에 가려지거나 흐리게 표시되게 구현하고 있지 않다.

0. 들어가며 — 자막이 컨트롤 바에 가리면

이번 558편은 자막은 주변 요소에 가려지거나 흐리게 표시되지 않게 하라는 규칙입니다.

자막이 — 영상 플레이어의 컨트롤 바(재생 버튼·진행 바)나 다른 요소에 가려지거나, 흐릿하게 표시되면 못 읽죠. CP-438은 자막을 가리지 말고 또렷이 표시하라고 규정합니다. 자막이 있어도 안 보이면 무용지물이니까요. 이번 편을 풀어냅니다.

1. 원문 — 자막 가림·흐림 금지

CP-438 (컴포넌트 > 접근 가능한 미디어) “자막은 주변 요소에 가려지거나 흐리게 표시되게 구현하고 있지 않다.”

자막이 다른 요소에 가려지거나 흐리게 표시되지 않고 또렷이 보이게 구현하라는 뜻입니다.

정리: 자막을 가리거나 흐리게 하지 마라. 이게 CP-438입니다.

2. 왜 자막 가림·흐림을 막나

자막(캡션)은 — 못 듣는 사용자가 영상 내용을 얻는 통로입니다(CP-432·435). 그런데 — 자막을 제공해도, 그 자막이 안 보이면 소용이 없죠. CP-438은 자막이 또렷이 보이게 가림·흐림을 막으라고 합니다.

자막이 가려질 때의 문제:

컨트롤 바 가림 영상 플레이어의 하단 컨트롤 바(재생/일시정지 버튼, 진행 바, 음량, 전체화면 버튼)는 보통 화면 하단에 뜹니다. 그런데 자막도 보통 화면 하단에 표시되죠. 둘이 겹치면 컨트롤 바가 자막을 가립니다. 사용자가 마우스를 올려 컨트롤 바가 나타나면 그 순간 자막이 안 보이죠.

다른 요소 가림 — 영상 위에 뜨는 다른 UI(광고, 알림, 워터마크, 로고)가 — 자막을 가릴 수 있습니다.

잘림 — 자막이 — 화면 밖으로 잘리거나, 너무 길어 영상 영역을 벗어나면 일부가 안 보이죠.

자막이 흐릴 때의 문제:

대비 부족 — 자막 글자가 — 영상 배경과 대비가 낮으면(CP-437) 흐릿해 안 읽힙니다.

반투명·작게 — 자막을 — 너무 반투명하게(흐리게) 하거나, 너무 작게 하면 못 읽죠.

그래서 CP-438은 — 자막을 또렷이, 안 가리게 표시하라고 합니다:

컨트롤 바 회피 컨트롤 바가 나타날 때 자막을 그 위로 올리거나(컨트롤 바보다 위에 표시), 컨트롤 바가 자막을 가리지 않게 위치를 조정합니다. 자막과 컨트롤이 겹치지 않게요.

다른 요소 비가림 광고·알림 등 다른 요소가 자막을 가리지 않게 합니다. 자막은 항상 최상위로 보이게요.

또렷한 표시 — 자막을 — 충분한 크기, 충분한 대비(배경 띠·외곽선, CP-437), 불투명하게 표시해 흐리지 않게요.

영역 내 표시 — 자막이 — 영상 영역 안에 다 들어오게(잘림 없이).

자막 설정 제공. 더 나아가 — 사용자가 자막 크기·색·위치·배경을 조정할 수 있게 하면, 각자에게 맞게 또렷이 보죠(접근성 향상). 다만 — 기본 상태에서도 가림·흐림 없이 또렷해야 합니다.

왜 중요한가. 자막은 못 듣는 사용자의 유일한 내용 통로입니다. 가려지거나 흐려서 한 줄이라도 못 읽으면 그 부분 정보를 영영 놓치죠. 자막을 제공하는 것만큼 그게 실제로 보이게 하는 게 중요합니다.

이 규칙은 접근 가능한 미디어의 ’자막 가시성’을 담당합니다 — 자막을 가림·흐림 없이 또렷이 표시해(438), 못 듣는 사용자가 자막을 빠짐없이 읽게 하죠. 자막 제공(CP-432)의 실효성을 보장하는 핵심입니다.

정리하면 — 자막이 컨트롤 바·다른 요소에 가려지거나 흐리게 표시되면 못 듣는 사용자가 내용을 놓치므로, 자막을 가림 없이 충분한 크기·대비로 또렷이 표시해야 합니다.

3. 점검 / 개선

무엇을 점검하나

컨트롤 바 비가림 — 컨트롤 바가 나타나도 자막이 가려지지 않는가.

다른 요소 비가림 — 광고·알림 등이 자막을 가리지 않는가.

또렷함 — 자막이 충분한 크기·대비·불투명도로 또렷하고 잘리지 않는가.

개선 방향

컨트롤 바 표시 시 자막을 위로 올림(겹침 방지). 자막 최상위 표시.

충분한 크기·대비(배경 띠)·불투명도. 영역 내 표시. 자막 설정 제공 권장.

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

역할	책임
퍼블리셔/개발	자막 위치·가림 방지 구현
QA/접근성	자막 가림·흐림 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 컨트롤 바가 나타나도 자막이 가려지지 않나요?

□ 광고·알림 등이 자막을 가리지 않나요?

□ 자막이 충분한 크기·대비·불투명도로 또렷하고 잘리지 않나요?

❓ FAQ

Q1. 자막이 컨트롤 바에 가려지는데요? 컨트롤 바가 나타날 때 자막을 그 위로 올리거나 위치를 조정해 겹치지 않게 합니다. Q2. 자막을 반투명하게 하면 안 되나요? 너무 반투명하면 흐려서 못 읽습니다. 불투명하고 충분한 대비(배경 띠)로 또렷이 하죠. Q3. 자막 설정을 제공하면 좋나요? 네. 사용자가 크기·색·위치를 조정하면 각자에게 맞게 또렷이 봅니다. 단, 기본 상태도 또렷해야 하죠.

6. 마무리

CP-438의 메시지:

자막은 또렷이, 가리지 말고 — 자막이 가려지거나 흐리게 표시되지 않게 하라.

자막을 제공해도 가려지거나 흐려서 못 읽으면 무용지물입니다. 가림 없이 충분한 크기·대비로 또렷이 표시해 못 듣는 사용자가 빠짐없이 읽게 하는 게 핵심이죠. 다음 편은 자막 동기화입니다.

다음 편 예고 ▶ 「559. (CP-439) 자막은 오디오와 동기화하여 제공하고 있다.」

ViewCheck는 자막이 가려지거나 흐리게 표시되지 않는지를 진단합니다.

📚 참고 출처

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

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

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