eDM 템플릿 가이드

ByeolGyu·2025년 4월 4일

eDM

전자 Direct Mail(eDM)은 이메일을 통해 고객에게 마케팅 메시지나 정보를 전달하는 방식
주로 신규 제품 안내, 프로모션, 이벤트 소식 등을 알리기 위해 활용하며, 디지털 방식의 빠른 전달과 효과 분석 등의 장점이 있음

eDM 템플릿

업체마다 요구하는 형식이 조금씩 달라 eDM 템플릿 제작 시 유연성을 고려해야 함
기본적으로는 <div> 태그를 사용해 콘텐츠를 구성할 수 있으나, 세로 길이가 긴 이미지를 사용할 경우 이미지를 분할해 <table> 태그 내에 배치해야 하는 경우도 있음

템플릿 제작 절차

1. 이미지 분할

사진이 길다면 업체의 요구사항에 맞추어 이미지 분할

2. HTML 태그에 이미지 삽입

분할된 이미지를 <table>(또는 기본 <div>) 태그에 넣어 배치함

3. 이미지맵 사용

특정 이미지 영역에 링크를 추가하기 위해 이미지맵을 정의함

이미지맵 사용법

1) 해당 링크 접속
이미지맵 링크

2) 이미지 불러오고 링크등록 및 영역 설정

3) Show Me The Code 클릭 후 코드 복사

4) 아래의 html 양식에 맞추어 코드 작성

4. HTML 예시 코드

코드 내 스타일은 인라인으로 처리해 이메일 클라이언트 호환성을 고려해야함

아래 예시는 이미지를 세로로 3등분한 경우를 가정한 코드

각 이미지에 대해 usemap 속성을 설정하고, <map> 태그와 연결하여 클릭 가능한 영역(버튼 등)을 지정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>타이틀명</title>
    <link href="파비콘 경로" rel="icon" />
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #030d1b;
        }
        table {
            border-collapse: collapse;
            margin: 0 auto;
        }
        img {
            display: block;
            border: 0;
        }
    </style>
</head>
<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img
                    alt="img 1"
                    src="이미지 경로1"
                    usemap="#image-map-1"
                />
            </td>
        </tr>
        <tr>
            <td>
                <img
                    alt="img 2"
                    src="이미지경로2"
                />
            </td>
        </tr>
        <tr>
            <td>
                <img
                    alt="img 3"
                    src="이미지경로3"
                    usemap="#image-map-3"
                />
            </td>
        </tr>
    </table>

    <!-- 이미지맵 정의, 이미지 맵에서 복사한 코드 붙여넣고, map name 설정 -->
    <map name="image-map-1">
        <area target="_blank" alt="Link 1" href="moveToLink1" coords="53,381,201,426" shape="rect">
    </map>

    <map name="image-map-3">
        <area target="_blank" alt="Link 2" href="https://naver.me/F74coSlh" coords="52,345,189,388" shape="rect">
    </map>
</body>
</html>