상품 영상에 자막·대체 설명·재생 제어를 함께 넣는 법

영상이 설명하는 정보부터 적습니다

상품 영상은 움직이는 장면을 보여줄 수 있지만 재생 버튼 하나로 상세페이지의 설명이 완성되지는 않습니다. 소리를 끄고 보는 사람, 영상을 보기 어려운 사람, 필요한 장면만 다시 찾는 사람은 서로 다른 경로로 정보를 확인합니다. 영상 안에만 구성품이나 사용 조건을 남기면 그 경로 중 일부에서 핵심 내용이 사라질 수 있습니다. 먼저 영상이 전달하는 정보를 말, 소리, 화면의 동작, 화면 속 글자로 나누어 적습니다.

가상의 수납 트레이 영상으로 구성 소개, 뚜껑 열기, 관리 안내의 세 장면을 가정합니다. 코드의 파일 이름과 시간도 설명용이며 실제 영상 파일을 제공하지는 않습니다.

자막·대본·화면 설명은 같은 역할이 아닙니다

자막은 영상의 시간 흐름과 맞춰 음성 및 이해에 필요한 소리 정보를 텍스트로 전달합니다. 대본은 음성 내용을 문서로 읽고 찾을 수 있게 제공하는 방법이고, 화면의 중요한 시각 정보는 별도의 설명이 필요할 수 있습니다. W3C WAI의 자료는 자막, 대본, 시각 정보 설명을 각각 안내합니다. 여기서는 상품 소개라는 좁은 문맥에 맞춰 세 자료가 무엇을 보완하는지 비교합니다.

음성에 “이렇게 여세요”라고만 나오고 손의 방향이 중요한 장면이라면 그 말의 자막만으로 방향을 알기 어려울 수 있습니다. 대본에 같은 문장을 옮겼다고 화면 정보가 자동으로 전달되는 것도 아닙니다. 필요한 동작을 음성에서 설명하거나, 읽을 수 있는 상세 설명을 함께 제공하는 방식 등을 검토합니다. 어떤 접근성 요구사항이 적용되는지는 콘텐츠 유형과 목표 수준에 따라 확인해야 합니다.

장면별 정보 장부를 먼저 만듭니다

장면 번호별로 음성·화면에만 있는 정보·필요한 자막·본문 설명을 나누어 적습니다. 제작 전 필요한 자료와 완성 영상에서 확인한 결과는 별도 칸으로 둡니다.

실제 상품의 관리법과 치수는 제조사 자료와 대조해야 합니다. 영상의 제품·옵션·구성도 그 자료와 같은지 확인하세요.

구성품을 보여주는 장면에는 기본 구성과 추가 선택 상품이 섞이지 않는지도 확인합니다. 영상에서 함께 나온 소품이 판매 구성에 포함된다고 오해할 수 있다면 본문에서 역할을 설명합니다. 작은 자막에만 조건을 넣고 실제 구성 목록은 생략하지 않습니다. 영상을 재생하지 않는 사람도 무엇이 제공되는지 판단할 수 있어야 합니다.

자동 자막은 검수의 출발점으로 사용합니다

자동으로 만든 자막에는 숫자, 단위, 제품명, 부정 표현이 잘못 들어갈 수 있습니다. 검수자는 음성과 자막을 같은 장면에서 비교하고 말의 의미가 달라지는 오류부터 수정합니다. W3C WAI의 자막 안내도 자동 결과를 정확성 확인 없이 충분한 자료로 취급하지 않도록 설명합니다. 파일을 생성했다는 사실과 내용이 정확하다는 사실을 구분하는 것이 중요합니다.

가상의 음성에 “관리 안내를 먼저 확인하세요”가 들어 있다고 가정하면 자막이 “관리 안내 없이 사용하세요”로 바뀌는 것은 의미가 반대가 된 오류입니다. 실제 상품 영상에서 이런 오류가 없는지 확인하고, 숫자와 단위가 함께 표시되는 문장은 제품 자료와도 대조합니다. 외국어로 옮긴 자막은 번역된 의미가 원문의 조건과 한계를 유지하는지도 별도로 검토해야 합니다.

발화가 끝났는데 자막이 늦게 나타나거나, 다음 동작과 앞 문장의 자막이 겹치면 어떤 장면을 설명하는지 혼동할 수 있습니다. 시작·끝 시간을 실제 영상과 맞춰 확인하고, 한 번에 표시되는 문장이 너무 길어 모바일에서 핵심 정보를 놓치지 않는지 봅니다. 특정 글자 수를 모든 언어와 화면에 적용하는 만능 기준으로 제시하지 않습니다.

자막 파일과 영상의 연결을 확인합니다

HTML의 track 요소는 영상 등에 텍스트 트랙을 연결하는 구조입니다. 다음은 파일 연결 관계를 설명하기 위한 코드이며 이 글에서 실제 영상이나 자막 파일을 배포하는 것은 아닙니다. captions와 언어 표기, 선택 메뉴의 이름을 구분하고 실제 제공할 파일의 주소와 응답을 확인해야 합니다. 상세 속성은 MDN track 문서를 참고할 수 있습니다.

<video controls poster="tray-poster.jpg">
  <source src="tray-demo.mp4" type="video/mp4">
  <track kind="captions" src="tray-ko.vtt"
    srclang="ko" label="한국어">
</video>

자막 메뉴에서 언어를 선택한 뒤 해당 구간에 문장이 표시되는지 확인합니다. 외부 도메인의 자막은 플레이어의 교차 출처 설정과 파일 응답도 함께 살펴야 합니다.

영상 파일을 새로 교체했다면 자막의 시간과 내용도 다시 확인합니다. 시작 장면을 늘리거나 일부 구간을 잘라낸 뒤 이전 자막 파일을 그대로 연결하면 시점이 어긋날 수 있습니다. 영상의 버전, 자막의 버전, 본문 대본의 버전을 같은 공개 기록에 연결해 어떤 자료를 함께 교체해야 하는지 남깁니다.

본문 설명에는 화면에만 있는 중요한 행동을 남깁니다

영상의 대본을 본문에 제공하면 독자가 설명을 읽고 필요한 부분을 찾기 쉬워집니다. 다만 음성만 옮겼다면 손의 방향, 표시된 조건, 구성품의 배치처럼 시각 정보가 빠질 수 있습니다. 시각 정보가 이해에 중요하다면 그 내용을 설명한 대본이나 다른 적절한 방식을 검토합니다. W3C WAI의 대본과 시각 정보 설명 안내에서 관련 방식을 비교할 수 있습니다.

뚜껑 열기 장면의 설명이라면 어느 부분을 잡고 어느 방향으로 움직이는지 적습니다. 화면에서 확인할 수 없는 내구성이나 안전성 평가는 동작 설명에 섞지 않습니다.

화면에만 표시한 치수는 본문의 표에도 같은 단위로 남깁니다. 영상에서는 cm, 본문에서는 mm를 사용한다면 환산 관계와 값이 맞는지 확인합니다. 실제 사양이 바뀌었다면 영상 속 글자, 자막, 표, 옵션 이름을 함께 갱신해야 합니다. 영상이 오래된 상태로 남아 있는데 본문만 수정한 경우에는 서로 다른 정보가 전달될 수 있습니다.

정지 이미지에도 같은 설명이 필요하다면 상품 이미지의 대체 설명을 정하는 방법을 참고하세요. 영상의 대본을 그대로 이미지 설명에 붙이기보다 각 자료가 전달하는 정보를 나누는 데 도움이 됩니다.

소리·재생·자막을 사용자가 제어할 수 있는지 봅니다

재생 제어 검수는 마우스로 재생 버튼을 눌러보는 데서 끝나지 않습니다. 키보드로 플레이어에 접근하고 재생·일시정지·자막 선택 등 제공하는 기능을 사용할 수 있는지 확인합니다. 초점이 어디에 있는지 보이는지, 플레이어를 떠나 다른 본문 요소로 이동할 수 있는지, 작은 화면에서 컨트롤이 가려지지 않는지도 봅니다.

본문을 읽는 동안 소리가 자동으로 시작되지 않도록 재생 방식을 정합니다. 자동재생을 쓴다면 소리·정지 방법과 실제 브라우저 동작을 확인해야 합니다.

영상 아래에 고정 구매 버튼이 겹쳐 있다면 자막이나 재생 제어가 가려지는지도 확인합니다. 페이지를 움직이지 않아도 필요한 구간에서 영상의 정보와 버튼의 정보가 동시에 읽힐 수 있는지 봅니다. 콘텐츠를 빠르게 구매 행동으로 이어가려는 배치가 사용자의 재생·읽기 선택을 방해하지 않아야 합니다.

자막 크기와 위치를 조정할 수 있다면 조정 뒤에도 손의 방향과 주요 표식이 보이는지 확인합니다. 자막이 장면의 핵심 정보를 덮는 경우를 기록하세요.

공개 승인에는 영상·자막·본문을 같이 묶습니다

영상에 특정 색상이나 세트 구성이 등장한다면 옵션과 상품 이미지를 연결하는 기준에 따라 선택한 상품과 영상 속 구성이 같은지도 대조하세요.

같은 트레이 영상에서 자막과 화면을 대조합니다

다음 시간과 장면은 트레이 소개 영상을 기획하기 위한 가상 기록입니다. 도입의 구성·뚜껑 열기·본문 안내라는 같은 소재를 끝까지 사용합니다.

숫자 오류를 고친 뒤에도 화면에만 있는 정보가 남을 수 있습니다. 자막의 정확성, 시각 정보 설명, 파일 연결을 각각 대조해야 어떤 자료를 고칠지 분명해집니다.

참고 자료와 적용 범위

• W3C WAI: 자막 — 필요한 소리 정보와 정확성·시간 연결.
• W3C WAI: 대본 — 텍스트로 읽는 정보 제공.
• W3C WAI: 시각 정보 설명 — 화면의 중요한 내용을 다른 경로로 전달.
• MDN: track 요소 — 텍스트 트랙 연결 구조.