지난 글 "반응형 HTML 이메일 템플릿 만드는 방법"에서는 다양한 기기와 이메일 클라이언트에서 자연스럽게 표시되는 간단한 HTML 이메일 템플릿을 디자인하고 코딩하는 기본기를 살펴봤습니다.
그리고 그 후 미디어 추가와 관련해 여러 가지 질문을 받았습니다.
이번 글에서는 그 기본기를 바탕으로 HTML 이메일 템플릿에 미디어를 추가하는 다양한 방법을 안내합니다. 이미지, 동영상, 오디오 같은 미디어를 잘 활용하면 이메일의 참여도와 전달 효과를 크게 높일 수 있습니다.
준비물
- 간단한 HTML 이메일 템플릿 1개 — 이전 가이드를 따라 직접 만들 수 있습니다.
이미지 추가하기
이미지는 이메일에 가장 많이 사용되는 미디어입니다. HTML 이메일 템플릿에 이미지를 넣는 방법은 다음과 같습니다.
- 이미지를 추가하기 전에 웹용으로 적절한 크기로 최적화되어 있는지 확인하세요. 일반적으로 이미지 너비를 600픽셀 이하로 유지하면 대부분의 이메일 클라이언트에서 축소 없이 표시됩니다. 이 예제에서는 스톡 이미지를 600 x 750픽셀로 조정해 사용했습니다.
업로드할 이미지
- 이미지를 안정적인 웹 서버나 CDN(콘텐츠 전송 네트워크)에 업로드하세요. 이메일에서 참조할 수 있는 안정적인 URL이 필요합니다.
이 예제에서는 무료 이미지 호스팅 사이트인 imgbb를 이용해 이미지를 업로드합니다. "Start Uploading" 버튼을 클릭하고 이미지를 선택하세요.
imgbb는 무료 이미지 호스팅 플랫폼 중 하나입니다
이미지를 선택한 뒤 드롭다운에서 "Don't Autodelete"를 선택하고 Upload를 클릭합니다.
드롭다운에서 Don't Autodelete 선택
업로드가 완료되면 URL이 생성됩니다. 드롭다운을 열고 "HTML full linked"를 선택하세요.
생성된 임베드 코드
- 생성된 HTML 코드를 복사해 이메일 템플릿의 원하는 위치에 삽입합니다.
<a href="https://ibb.co/XpRp2N8">
<img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>
다른 임베드 코드 옵션도 시도해 보면서 이미지가 이메일 템플릿에서 어떻게 보이는지 비교해 보세요.
아래는 이미지를 삽입한 결과입니다.
이메일 템플릿에 성공적으로 삽입된 이미지
참고: 이미지가 표시되지 않는 상황에 대비해 항상 alt 속성으로 대체 텍스트를 제공하세요.
동영상 임베드하기
대부분의 이메일 클라이언트는 동영상 직접 재생을 지원하지 않습니다. 대신 온라인에 호스팅된 동영상으로 연결되는 클릭 가능한 썸네일을 삽입할 수 있습니다.
- 썸네일 만들기: 동영상에서 한 장면을 캡처하거나 동영상 내용을 나타내는 그래픽을 직접 만들어 플레이스홀더로 사용합니다. 이 예제에서는 앞서 사용한 것과 같은 이미지를 썸네일로 활용합니다.
- 드롭다운에서 "HTML thumbnail linked"를 선택하고 코드를 복사해 이메일 템플릿에 붙여넣습니다.
<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>
- 동영상 링크 연결: 위 코드를 수정해 썸네일이 동영상 URL로 연결되는 클릭 가능한 이미지가 되도록 합니다.
<a href="">안의 URL을 아래와 같이 동영상 링크로 변경합니다.
<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
<img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>
이 HTML 스니펫은 테두리 없는 링크 이미지를 만듭니다. 이메일 템플릿에서는 아래와 같이 표시됩니다.
링크된 썸네일이 표시되는 모습
유튜브 동영상 임베드하기
또는 유튜브 동영상을 이메일 템플릿에 직접 임베드할 수도 있습니다. 방법은 다음과 같습니다.
- 유튜브에 접속해 임베드할 동영상을 선택합니다.
- 공유 → 퍼가기(Embed)를 클릭하면
iframe코드가 생성됩니다. 예시는 아래와 같습니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
iframe을 복사해 HTML 이메일 템플릿 코드의<td>섹션에 붙여넣으면 아래와 같은 결과를 얻을 수 있습니다.
이메일 템플릿에 삽입된 유튜브 동영상 예시
오디오 추가하기
오디오 파일을 이메일에 직접 첨부하는 것 역시 대부분의 이메일 클라이언트에서 지원하지 않습니다. 동영상과 마찬가지로 오디오 파일로 연결되는 링크를 포함하는 방식을 사용합니다.
- 오디오 파일 호스팅: 오디오 파일을 적절한 플랫폼이나 서버에 업로드합니다. Google Drive, 자신의 웹사이트, 유튜브, SoundCloud 등 활용할 수 있는 플랫폼이 다양합니다.
- 이 예제에서는 audio.com이라는 플랫폼을 사용합니다. "join now for free"를 클릭해 계정을 만들거나, 기존 계정이 있다면 로그인하세요.
Upload를 클릭해 .mp3 파일을 선택하면 계정에 저장됩니다. 업로드가 끝나면 공유 아이콘을 클릭합니다.
- 여러 가지 공유 옵션이 나타나며, 여기서 링크를 복사하거나 바로 임베드할 수 있습니다.
Embed를 클릭하면 오디오가 표시될 모습을 미리 볼 수 있습니다. 코드를 복사해 이메일 템플릿의 해당 섹션에 붙여넣으세요.
audio.com에서 생성된, 이메일 템플릿에 삽입 가능한 코드
div를 제거하고 iframe만 사용해도 됩니다. 또한 이메일 템플릿에 표시하고 싶지 않은 부분은 자유롭게 삭제하고 취향에 맞게 커스터마이징할 수 있습니다.
코드는 다음과 같습니다.
<div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>
위 코드의 최종 결과물은 다음과 같습니다.
이메일 템플릿에서 오디오가 표시되는 모습
<audio> 태그 사용하기
임베드 외에도 audio 태그를 사용해 오디오 소스 URL만 추가하는 방법이 있습니다.
<p>Audio added via audio tag</p> <br><br>
<audio controls="controls">
<source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
<p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
</audio>
URL 부분을 자신의 audio url로 바꾸기만 하면 됩니다. 수정을 마친 이메일 템플릿 전체 모습은 아래와 같습니다.
수정된 HTML 이메일 템플릿
참고: Hotmail 등 HTML5를 지원하지 않는 클라이언트에서는 이 방법이 작동하지 않습니다!
호환성과 사용자 경험을 위한 팁
HTML 이메일에 미디어를 통합할 때는 다음 팁을 참고해 호환성과 사용자 경험을 최적화하세요.
- 절대 URL 사용: 이미지, 동영상, 오디오에는 항상 전체 절대 URL을 사용해 모든 이메일 클라이언트에서 올바르게 로드되도록 합니다.
- 이메일 테스트: 이메일 클라이언트마다 HTML 콘텐츠를 표시하는 방식이 다릅니다. Litmus나 Email on Acid 같은 도구를 활용해 여러 플랫폼에서 렌더링 결과를 확인하세요.
- 로딩 속도 고려: 미디어 파일 크기를 최적화해 이메일이 빠르게 로드되도록 하세요. 수신자의 관심을 유지하고 참여도를 높이는 데 매우 중요합니다.
- 접근성 고려: 이미지에는 설명이 담긴 alt 텍스트를, 오디오와 동영상에는 자막이나 대본을 제공하세요.
이메일 클라이언트가 지원할 수 있는 범위에는 한계가 있지만, 동영상과 오디오에는 링크된 이미지를 활용하는 방식이 대부분의 플랫폼에서 작동하는 사용자 친화적인 해결책입니다.
항상 이메일을 철저히 테스트하고 모범 사례를 지켜 원활하고 매력적인 사용자 경험을 제공하세요.
즐거운 코딩 되세요!