<audio> — 미디어 태그 도감

올바른 사용

controls 속성 거의 필수

transcript 또는 track으로 텍스트 대체

autoplay는 거의 사용 금지 (사용자 짜증·a11y)

preload=metadata 권장

팟캐스트 오디오

<article>
  <h2>에피소드 12</h2>
  <audio controls preload="metadata">
    <source src="/podcast/ep12.opus" type="audio/ogg; codecs=opus" />
    <source src="/podcast/ep12.mp3" type="audio/mpeg" />
    <p>오디오 재생 불가. <a href="/podcast/ep12.mp3">다운로드</a></p>
  </audio>
  <details>
    <summary>대본 보기</summary>
    <p>...전체 대본...</p>
  </details>
</article>

오디오 + details로 대본. 청각장애 사용자에게 대체.

SchemaOrg PodcastEpisode와 결합

<script type="application/ld+json">
{
  "@type": "PodcastEpisode",
  "name": "에피소드 12",
  "datePublished": "2026-05-26",
  "duration": "PT45M",
  "associatedMedia": { "@type": "AudioObject", "contentUrl": "/podcast/ep12.mp3" }
}
</script>

PodcastEpisode Schema로 검색 노출.

자주 보는 안티패턴

autoplay만 박기 (사용자 짜증·접근성 위반)

transcript 누락

controls 없는 background audio

한 codec만 (호환성 손해)

autoplay

<audio autoplay src="/bg-music.mp3" />

자동 재생 차단 + 차단 안 됐을 때 사용자 짜증. WCAG 1.4.2 위반.

transcript 없음

<audio controls>
  <source src="/talk.mp3" />
</audio>

청각장애 사용자가 콘텐츠 접근 불가.

해설

오디오 콘텐츠의 표준. 팟캐스트, 음성 인터뷰, 배경 음악 등에 사용. video와 구조가 유사하지만 시각 화면이 없어 자막 대신 transcript가 a11y 표준.

SEO 관점에서 audio는 PodcastEpisode Schema와 짝을 이뤄 팟캐스트 검색에 노출. Apple Podcasts·Spotify뿐 아니라 구글 검색의 팟캐스트 카드에도 노출. 자체 호스팅 오디오라도 Schema 마크업이 정확하면.

GEO 관점에서 AI가 오디오 내용에 접근하는 유일한 경로가 transcript. transcript 없는 오디오는 AI에 콘텐츠 0. 팟캐스트의 각 에피소드에 대본을 제공하는 게 GEO 표준.

A11y 관점에서 가장 critical. 청각장애 사용자가 오디오 콘텐츠에 접근하는 유일한 경로가 transcript. WCAG 1.2.1 "녹음된 오디오에 대본 제공"이 명시. video의 자막 의무와 동등.

자주 보는 안티패턴: autoplay(자동 재생 차단 + 사용자 짜증 + WCAG 1.4.2 위반 — audio autoplay는 거의 모든 환경에서 안티패턴), transcript 누락(청각장애 사용자 접근 불가), 한 codec만(mp3만 박고 ogg/opus fallback 없음 — 일부 환경 호환성), controls 없는 background audio(사용자가 끌 수 없는 BGM은 a11y 재앙).

controls 속성 — 거의 필수. 사용자가 재생·일시정지·볼륨을 통제할 수 있어야 한다. WCAG 1.4.2 "3초 이상 자동 재생되는 오디오에 일시정지 컨트롤"이 명시.

preload 속성 — metadata가 권장. auto는 첫 로드 시 전체 다운로드. none은 사용자가 클릭해야만 다운로드.

transcript 표현 패턴 — <audio> 다음에 <details><summary>대본 보기</summary>...</details>. 시리즈 #4의 details 패턴 활용. 기본 접힘 + 사용자가 펼침이 시각·청각 둘 다에 좋다.

track 자식 — video와 마찬가지로 자막 가능. 다만 오디오의 시각 화면이 없어 자막이 잘 안 보임. transcript를 별도 텍스트로 제공이 표준.

Schema.org PodcastEpisode·AudioObject — 팟캐스트 SEO의 정답. name, datePublished, duration, transcript, associatedMedia.contentUrl을 마크업. 검색·AI 모두 인식.

배경 음악의 케이스 — 사이트 BGM이 거의 항상 안티패턴. 사용자 짜증, a11y 위반, 모바일 데이터 낭비. 반드시 필요하면 controls와 muted 기본값, 사용자 명시적 시작 후 재생.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설