접근 가능한 미디어 Accessible multimedia

미디어 콘텐츠에 설명이 필요한 경우에 사용하는 컴포넌트이다. 정지된 이미지에 설명을 제공할 때에는 숨김 콘텐츠를, 오디오/비디오/멀티미디어 콘텐츠에 설명을 제공할 때는 접근 가능한 미디어 컴포넌트를 사용한다.

동영상

src·title(필수)을 주면 브라우저 기본 재생기(<video controls>)로 재생합니다. captions에 WebVTT 자막 주소를 주면 한국어 자막이 기본으로 켜지고, #transcript 슬롯에 원고를 넣으면 재생기 아래 원고 보기로 펼칠 수 있습니다. poster·width 등 나머지 속성은 <video>에 그대로 전달되고, 다른 언어 자막은 기본 슬롯에 <track>으로 넣습니다.

단계 진행 표시 예시 영상

연한 회색 화면 가운데에 회색 테두리의 네모 칸 세 개가 가로로 놓여 있습니다.

[알림음] 왼쪽 칸이 파란색으로 채워집니다.

[알림음] 가운데 칸이 파란색으로 채워집니다.

[알림음] 오른쪽 칸이 파란색으로 채워집니다.

[완료 알림음 두 번] 세 칸 아래에 초록색 막대가 나타납니다.

vue

<script setup lang="ts">
  import { KrdsMedia } from '@krds.ui/vue'
</script>

<template>
  <KrdsMedia
    src="/demo/steps.mp4"
    title="단계 진행 표시 예시 영상"
    captions="/demo/steps.ko.vtt"
    poster="/demo/steps-poster.jpg"
    width="640"
    height="360"
  >
    <template #transcript>
      <p>연한 회색 화면 가운데에 회색 테두리의 네모 칸 세 개가 가로로 놓여 있습니다.</p>
      <p>[알림음] 왼쪽 칸이 파란색으로 채워집니다.</p>
      <p>[알림음] 가운데 칸이 파란색으로 채워집니다.</p>
      <p>[알림음] 오른쪽 칸이 파란색으로 채워집니다.</p>
      <p>[완료 알림음 두 번] 세 칸 아래에 초록색 막대가 나타납니다.</p>
    </template>
  </KrdsMedia>
</template>

오디오

audio를 주면 <audio controls>로 재생합니다. 오디오는 자막이 화면에 보이지 않으므로 원고를 제공합니다.

알림음 예시 음성

[알림음] 세 번이 약 3초 간격으로 울린 뒤, [더 높은 완료 알림음] 두 번이 짧게 이어집니다.

vue

<script setup lang="ts">
  import { KrdsMedia } from '@krds.ui/vue'
</script>

<template>
  <KrdsMedia src="/demo/steps.m4a" title="알림음 예시 음성" audio>
    <template #transcript>
      <p>[알림음] 세 번이 약 3초 간격으로 울린 뒤, [더 높은 완료 알림음] 두 번이 짧게 이어집니다.</p>
    </template>
  </KrdsMedia>
</template>

외부 재생기

유튜브처럼 외부 재생기를 쓸 때는 src 없이 기본 슬롯에 <iframe>을 넣습니다. 제목과 원고 영역이 붙고, <iframe>은 폭에 맞춰 16:9로 표시됩니다. 자막은 외부 재생기에서 관리하고, <iframe>에는 title을 꼭 답니다.

vue

<KrdsMedia title="민원 신청 안내 영상">
  <iframe src="https://www.youtube-nocookie.com/embed/영상ID" title="민원 신청 안내 영상" allowfullscreen></iframe>
  <template #transcript>
    <p>민원 신청은 세 단계로 진행됩니다. …</p>
  </template>
</KrdsMedia>

사용 지침

미디어를 만들 때 대체 정보(자막·원고·화면 해설·수어)를 함께 계획합니다. 녹화용 대본을 활용하면 원고를 만들기 쉽습니다.
여러 대체 정보를 제공하기 어렵다면 가장 많은 사용자가 쓸 수 있는 원고(설명적 원고)를 제공합니다.
대체 정보에는 미디어의 모든 정보를 담습니다. 화면에 보이는 배열·움직임과, 화면에 없는 박수 소리 같은 효과음도 적습니다.
자막은 오디오와 시간을 맞추고(WebVTT), 영상 속 중요한 시각 요소와 겹치지 않게 합니다.
영상 속 정보를 전하는 글자·도형은 배경과 4.5:1 이상의 명도 대비를 갖게 합니다.
화면 해설 버전이나 수어 영상이 있으면 원고 안에 링크로 안내합니다.
미디어를 바꾸면 대체 정보도 함께 고칩니다.

접근성

브라우저 기본 재생기라 재생·탐색·음량·전체 화면·자막 켜기를 키보드와 화면낭독기로 조작하고, 자막은 운영체제의 자막 크기·색 설정을 따릅니다. 자막 기본 모양은 KRDS 가이드대로 반투명 검은 배경에 흰 글자입니다.
제목은 미디어 영역(figure)의 이름이 됩니다. 화면에서 숨겨야 하면 hide-title을 지정합니다.
앱이 개발 모드일 때 자막과 원고가 모두 없거나(오디오는 원고가 없으면), 자동 재생(autoplay)을 켜면 콘솔에 경고합니다(Vue 경고, 배포 빌드에서는 출력하지 않음).

KrdsMedia

Props

이름	타입	기본값	설명
`audio`	`boolean`	`false`	오디오 콘텐츠 (audio 요소로 재생)
`src`	`string`	-	미디어 파일 주소 (없으면 기본 슬롯의 재생기를 씀, 예: 유튜브 iframe)
`hideTitle`	`boolean`	`false`	제목을 화면에서 숨김 (화면낭독기는 읽음)
`captions`	`string`	-	한국어 자막(WebVTT) 주소
`title` (필수)	`string`	-	미디어 제목 (재생기 위에 표시, 화면낭독기가 미디어 영역 이름으로 읽음)

Slots

이름	설명
`default`	src가 있으면 video·audio 안에 넣을 source·track(다른 언어 자막 등), 없으면 재생기 자체(유튜브 iframe 등)
`transcript`	원고(설명적 원고): 화면과 소리의 정보를 글로 옮긴 내용, '원고 보기'로 펼침

접근 가능한 미디어 Accessible multimedia ​

동영상 ​

오디오 ​

외부 재생기 ​

사용 지침 ​

접근성 ​

KrdsMedia ​