오디오 블록
동영상 블록과 정확히 같은 "클릭해서 재생으로 이동" 패턴을 오디오에 적용한 것입니다: 이메일에서는 미리보기 이미지, 호스팅된 라이브 뷰에서는 네이티브 <audio> 플레이어입니다. 팟캐스트 에피소드, 음성 메모, 짧은 오디오 클립 모두 이 형태에 잘 맞습니다 — 이메일 클라이언트가 인라인으로 재생할 수 있는 것은 없지만, 라이브 뷰는 재생할 수 있습니다.
작동 방식
이 분리는 동영상 블록과 정확히 동일한 방식을 따릅니다: 어떤 이메일 클라이언트도 동영상을 재생할 수 없는 것과 마찬가지로 오디오도 인라인으로 재생할 수 없으므로, 여기에도 키네틱 티어는 없습니다. 발송된 이메일은 항상 정적 미리보기를 렌더링합니다. 커버 이미지를 설정했다면, 오디오 파일로 바로 연결되는 링크로 감싸인 일반 전체 너비 <img>로 렌더링됩니다. 커버를 설정하지 않으면 대신 플레이스홀더 박스가 렌더링됩니다: ♪ 기호와 설명을 캡션으로 담은 단색 진회색 사각형입니다. 어느 쪽을 탭하든 src를 바로 열며, 동영상 블록과 마찬가지로 클릭은 블록 단위 클릭 히트맵에 기록됩니다.
호스팅된 라이브 뷰는 코드베이스의 모든 백엔드 분기 이미터가 확인하는 것과 같은 기본 URL 존재/부재 신호로 결정되어, 진짜 <audio controls> 요소로 바뀝니다. 오디오가 동영상과 진짜로 다른 유일한 지점은 이곳입니다: <audio>에는 <video>가 가진 것과 같은 poster 속성이 없으므로, 설정한 커버 이미지를 요소 자체에 붙일 수 없습니다. 대신 커버 이미지가 설정되어 있으면, 라이브 뷰는 이미지를 잃어버리는 대신 하나의 공유 래퍼 안에서 <audio> 플레이어 바로 위에 일반 <img>로 쌓아 올립니다. 컨트롤 위에 커버 아트가 있는 이 레이아웃은 음악이나 팟캐스트 플레이어가 사용할 법한 모습을 그대로 따라 합니다. 커버가 설정되지 않은 경우 플레이어는 블록의 스타일이 적용된 프레임 안에 단독으로 렌더링됩니다.
이 블록은 src에 일반 URL을 받습니다 — 직접 호스팅해야 하며, MailInApp은 오디오 파일을 저장하지 않습니다. 커버 이미지는 다릅니다: 미디어 라이브러리에서 가져오므로, 인스펙터에는 URL 입력란 대신 썸네일과 이미지 선택… 버튼이 표시됩니다. src가 비어 있으면 어느 티어에서든 블록이 전혀 렌더링되지 않습니다.
설정 가능한 필드:
- 오디오 URL — 발송된 이메일의 미리보기가 연결되는 파일이자, 라이브 뷰 플레이어의
src입니다. - 커버 이미지(선택 사항) — 발송된 이메일의 미리보기 이미지이자, 컨트롤 위에 쌓이는 라이브 뷰의 커버 아트입니다. 미디어 라이브러리에서 선택합니다.
- 설명 — 커버가 없을 때의 플레이스홀더 캡션과 라이브 뷰 플레이어의
aria-label로 사용됩니다. - 너비(%) — 10~100.
- 프레임의 배경색, 패딩, 테두리, 모서리 반경.
동영상과 마찬가지로 오디오도 순수한 콘텐츠입니다 — 재생은 추적되지 않으며, 클릭 이동 자체만 일반 링크를 가진 모든 블록이 채우는 것과 같은 클릭 히트맵을 통해 표시됩니다.
예시
Subject
New episode: behind the scenes with our team
주간 팟캐스트 다이제스트는 해당 주 에피소드를 커버 아트를 미리보기 이미지로 삼아 연결하므로, 받은편지함에서는 직접 재생되는 것이 없어도 앨범/에피소드 카드처럼 보입니다. 음성 메일 형식의 고객 업데이트(창업자나 지원팀 리더의 짧은 녹음 메시지)는 커버 이미지 없이 넣어 일반 플레이스홀더 박스와 "CEO의 90초 업데이트"와 같은 설명에 의존합니다. 언어 학습 이메일은 어휘 단어마다 발음 클립을 넣으며, 각각을 너비 필드로 줄인 작은 오디오 블록으로 만들어 하나의 이메일에 여러 개가 편안하게 들어가도록 합니다.
정적 폴백의 모습
<a href="https://cdn.example.com/episode-42.mp3"
style="display:block">
<div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
<img src="https://cdn.example.com/episode-42-cover.jpg" alt="Episode 42: Shipping fast"
style="display:block;width:100%;max-width:100%" />
</div>
</a>
이것이 메일 발송 티어입니다: 오디오 파일로 향하는 단순한 링크로 감싸인 커버 이미지입니다. 라이브 뷰는 대신 진짜 <audio controls> 요소를 렌더링하며, 설정되어 있다면 같은 커버 이미지가 그 위에 쌓입니다.