이전 기사 "반응형 HTML 이메일 템플릿을 만드는 방법"에서 우리는 다양한 장치와 이메일 클라이언트에 아름답게 적응하는 간단한 HTML 이메일 템플릿을 디자인하고 코딩하는 기본 사항을 탐구했습니다.
HTML 이메일 템플릿에 미디어를 추가하는 방법에 대해 몇 가지 질문이 있습니다.
이러한 기초를 바탕으로 HTML 이메일 템플릿에 미디어를 추가하는 다양한 방법을 안내하겠습니다. 이미지, 비디오, 오디오 등의 미디어를 추가하면 커뮤니케이션 참여도와 효율성이 크게 높아질 수 있습니다.
요구사항
- 간단한 HTML 이메일 템플릿입니다. 이 가이드에 따라 만들 수 있습니다.
이미지는 이메일에 추가되는 가장 일반적인 유형의 미디어입니다. HTML 이메일 템플릿에 이를 포함시키는 방법은 다음과 같습니다.
- 이미지를 추가하기 전에 크기가 적절하고 웹 사용에 최적화되어 있는지 확인하세요. 일반적인 방법은 크기 조정 없이 대부분의 이메일 클라이언트에 맞도록 이미지 너비를 600픽셀 미만으로 유지하는 것입니다. 이 특별한 예에서는 스톡 이미지가 있고 아래와 같이 크기를 600 x 750픽셀로 조정했습니다.
이것이 우리가 업로드할 이미지입니다
- 신뢰할 수 있는 웹 서버나 CDN(콘텐츠 전송 네트워크)에 이미지를 업로드하세요. 이메일에서 참조하려면 안정적인 URL이 필요합니다.
이 예에서는 imgbb 웹사이트를 사용하고 이미지를 업로드하겠습니다. "업로드 시작"을 클릭하세요. 그리고 이미지를 선택하세요.
imgbb는 무료 이미지 호스팅 플랫폼 중 하나입니다
사용할 이미지를 선택한 후 "자동 삭제 안 함"을 선택하고 업로드를 클릭하세요.
드롭다운에서 자동 삭제 안 함 선택
업로드 후 URL이 생성됩니다. 드롭다운을 클릭하고 "HTML 전체 링크"를 선택하세요.
생성된 삽입 코드
- 생성된 HTML 코드를 복사하여 표시된 대로 이메일 템플릿의 원하는 섹션에 삽입하세요.
<a href="https://ibb.co/XpRp2N8">
<img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>
이미지가 이메일 템플릿에 어떻게 표시되는지 테스트하려면 다른 포함 코드 옵션을 자유롭게 사용해 보세요.
아래는 삽입된 이미지의 결과입니다:
이미지가 이메일 템플릿에 성공적으로 삽입되었습니다
참고 :항상 alt를 포함하세요. 이미지를 표시할 수 없는 경우 대체 텍스트를 제공하는 속성입니다.
이메일 템플릿에 동영상을 삽입하는 방법
대부분의 이메일 클라이언트에서는 직접 비디오 재생이 지원되지 않습니다. 대신 온라인에 호스팅된 동영상으로 연결되는 클릭 가능한 썸네일을 삽입할 수 있습니다.
- 썸네일 만들기 :비디오에서 프레임을 캡처하거나 비디오 콘텐츠를 나타내는 사용자 정의 그래픽을 만듭니다. 이는 자리 표시자 역할을 합니다. 이 예에서는 미리보기 이미지와 동일한 이미지를 사용합니다.
- 드롭다운에서 연결된 HTML 미리보기 이미지를 선택합니다. 코드를 복사하여 이메일 템플릿에 붙여넣으세요.
<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 조각은 테두리 없이 연결된 이미지를 만듭니다. 이것이 이메일 템플릿에 표시되는 방식입니다:
링크된 썸네일은 다음과 같이 표시됩니다.
이메일 템플릿에 YouTube 동영상을 삽입하는 방법
또는 YouTube 비디오를 이메일 템플릿에 직접 포함할 수 있습니다. 방법은 다음과 같습니다:
- YouTube로 이동하여 삽입하려는 동영상을 선택하세요.
- 공유 -> 삽입을 클릭하세요. 그리고
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복사<td>에 붙여넣으세요. HTML 이메일 템플릿 코드 섹션. 그러면 다음과 같은 내용이 표시됩니다:
이메일 템플릿에 포함된 YouTube 동영상의 예
이메일 템플릿에 오디오를 추가하는 방법
이메일에 오디오 파일을 직접 추가하는 것도 대부분의 이메일 클라이언트에서 지원되지 않습니다. 비디오와 마찬가지로 오디오 파일에 대한 링크를 포함할 수 있습니다:
- 오디오 파일 호스팅 :오디오 파일을 적합한 플랫폼이나 서버에 업로드하세요. Google 드라이브, 자체 웹사이트, YouTube, 사운드 클라우드 등과 같은 다양한 오디오 플랫폼이 있습니다.
- 이 예에서는 audio.com이라는 플랫폼을 사용하겠습니다. "지금 무료로 가입"을 클릭하여 계정을 만들거나 이미 계정이 있는 경우 로그인하세요.
업로드를 클릭하고 계정에 저장될 .mp3 파일을 선택하세요. 오디오가 완료되면 공유 아이콘을 클릭하세요.
- 링크를 복사하거나 간단히 링크를 삽입할 수 있는 몇 가지 옵션이 표시됩니다.
삽입을 클릭하면 오디오가 어떻게 나타날지 미리 볼 수 있습니다. 코드를 복사하여 이메일 템플릿 섹션에 붙여넣으세요.
이메일 템플릿에 포함될 수 있는 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 사용 태그
삽입 외에도 오디오 태그를 사용하여 아래와 같이 오디오 소스에 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을 사용하세요.
- 이메일 테스트:다양한 이메일 클라이언트가 HTML 콘텐츠를 다양한 방식으로 표시합니다. Litmus 또는 Email on Acid와 같은 도구를 사용하여 이메일이 다양한 플랫폼에서 어떻게 렌더링되는지 테스트하세요.
- 로드 시간을 염두에 두세요:이메일이 빠르게 로드되도록 미디어 파일 크기를 최적화하세요. 이는 수신자의 관심을 유지하고 참여도를 높이는 데 중요합니다.
- 접근성 고려:오디오 및 동영상 콘텐츠의 이미지와 캡션 또는 스크립트에 대한 설명이 포함된 대체 텍스트를 제공하세요.
이메일 클라이언트가 지원할 수 있는 것에는 제한이 있지만 비디오 및 오디오 파일에 연결된 이미지를 사용하면 대부분의 플랫폼에서 작동하는 사용자 친화적인 솔루션을 제공합니다.
원활하고 매력적인 사용자 경험을 보장하려면 항상 이메일을 철저하게 테스트하고 모범 사례를 따르십시오.
즐거운 코딩 되세요!
무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요