동영상 블록
받은편지함에서는 탭하면 파일을 여는 정적 미리보기 이미지로, 호스팅된 라이브 뷰에서는 실제로 동작하는 <video> 플레이어로 표시됩니다. 어떤 이메일 클라이언트도 미디어 재생을 실행할 수 없으므로, 이 블록은 메일 발송 티어와 라이브 뷰 티어가 같은 마크업의 키네틱/폴백 분리가 아니라 진짜로 서로 다른 렌더링인 유일한 블록입니다.
작동 방식
Gmail이든 Outlook이든, 그 어떤 이메일 클라이언트도 동영상을 인라인으로 재생할 수 없습니다. 그래서 투표나 아코디언이 가지고 있는 것과 같은 키네틱 티어가 여기에는 아예 존재하지 않습니다.
발송된 이메일은 항상 정적 미리보기를 렌더링합니다. 포스터 이미지를 설정했다면, 동영상 파일(또는 지정한 페이지)로 바로 연결되는 링크로 감싸인 일반 전체 너비 <img>로 표시됩니다. 포스터를 비워 두었다면 대신 플레이스홀더 박스가 렌더링됩니다: ▶ 기호와 캡션이 있는 단색 진회색 사각형으로, 캡션에는 설명 텍스트와 설정했다면 M:SS 형식의 재생 시간이 함께 표시됩니다. 이렇게 하면 이미지를 넣지 않아도 블록이 무엇인지 여전히 전달됩니다. 어느 쪽을 탭하든 src를 바로 열며, 링크가 있는 이미지 블록이 이미 사용하는 것과 같은 클릭-이동 패턴이고, 클릭은 블록 단위 클릭 히트맵에 기록됩니다.
호스팅된 라이브 뷰는 이메일 클라이언트가 렌더링할 수 있는 것으로 제한되는 받은편지함이 아니라, 사람이 실제로 보고 있는 진짜 페이지입니다. 그래서 그곳에서는 같은 블록이 진짜 <video controls> 요소로 렌더링되며, 포스터 이미지를 설정했다면 poster 속성으로, 설명은 aria-label로 사용됩니다. 이 분리는 코드베이스의 모든 백엔드 분기 이미터가 사용하는 것과 같은 신호로 결정됩니다: 렌더링 시점에 기본 URL이 존재하는지(메일) 존재하지 않는지(라이브 뷰) 여부입니다. 별도로 설정해야 하는 "라이브 뷰용 동영상" 블록은 없습니다 — 두 티어가 할 수 있는 일이 실제로 서로 다른 하나의 블록이 있을 뿐입니다.
이 블록은 src에 일반 URL을 받습니다 — 동영상 파일은 직접 호스팅해야 하며, MailInApp은 동영상 파일을 저장하지 않습니다. 포스터 이미지는 다릅니다: 미디어 라이브러리에서 가져오므로, 인스펙터에는 URL 입력란 대신 썸네일과 이미지 선택… 버튼이 표시됩니다 — 이미 업로드된 이미지를 고르거나 바로 그 자리에서 새 이미지를 업로드하세요. src가 비어 있으면 어느 티어에서든 블록이 전혀 렌더링되지 않습니다.
설정 가능한 필드:
- 동영상 URL — 발송된 이메일의 미리보기가 연결되는 파일(또는 페이지)이자, 라이브 뷰 플레이어의
src입니다. - 포스터 이미지 — 발송된 이메일의 미리보기 이미지로 표시되며, 라이브 뷰
<video>의 포스터로도 설정됩니다. 미디어 라이브러리에서 선택합니다. - 설명 — 포스터가 없을 때의 플레이스홀더 캡션과 라이브 뷰 플레이어의
aria-label로 사용됩니다. - 재생 시간(초) — 플레이스홀더 캡션에
M:SS형식으로 표시됩니다. 0이면 생략됩니다. - 너비(%) — 10~100.
- 프레임의 배경색, 패딩, 테두리, 모서리 반경.
동영상은 순수한 콘텐츠입니다: 응답할 것이 없으므로 시청 완료나 시청 시간은 추적되지 않으며 — 클릭 이동 자체만 다른 모든 링크 블록과 마찬가지로 클릭 히트맵에 표시됩니다.
예시
Subject
Watch: our product launch recap
제품 출시 이메일에 30초짜리 티저를 삽입합니다. 수신자는 받은편지함에서 포스터 이미지를 탭해 사이트나 CDN에서 전체 동영상을 열 수 있고, 대신 캠페인의 호스팅된 라이브 뷰를 여는 사람은 페이지를 벗어나지 않고 인라인으로 시청할 수 있습니다. 강좌 요약 다이제스트도 같은 방식으로 각 강의의 녹화본을 연결하며, 재생 시간 필드 덕분에 수신자는 탭하기 전에 소요 시간을 가늠할 수 있습니다. 고객 후기 동영상은 사례 연구 이메일 안에 동영상의 정지 화면을 포스터로 사용해 배치되므로, 미리보기가 일반적인 플레이스홀더 박스가 아니라 실제 사진처럼 보입니다.
정적 폴백의 모습
<a href="https://cdn.example.com/launch-teaser.mp4"
style="display:block">
<div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
<img src="https://cdn.example.com/launch-teaser-poster.jpg" alt="Launch teaser"
style="display:block;width:100%;max-width:100%" />
</div>
</a>
이것이 메일 발송 티어입니다: 동영상 파일로 향하는 단순한 링크로 감싸인 포스터 이미지이며 — 라이브 뷰의 진짜 <video controls> 요소는 호스팅된 페이지에서만 렌더링되고 메일에서는 절대 렌더링되지 않습니다.