HTML 이메일 템플릿 구축하기

많은 기업에서는 마케팅과 뉴스레터, 안내 및 알림 등을 위한 다양한 메일링 서비스(eDM)를 제공합니다. 그 가운데 저도 세 건의 메일 템플릿을 작업해 볼 수 있었는데요. 일반 코드로 작성하던 첫 작업 당시 불안정했던 경험이 있어 여러 가지 자료들을 참고해 보니 궁금한 점이 생겼습니다.

"왜 메일 템플릿의 마크업은 다른 방식을 가질까?"

우리가 흔히 알고 있는 웹메일 제공 서비스인 구글, 네이버, 다음, 네이트 등의 이메일 클라이언트는 종류가 아주 다양할뿐더러 각기 다른 이메일 랜딩 버전을 가집니다. 또, 보안 상의 이유로 지극히 낮은 웹/앱 호환성을 갖고 있어 제한되는 코드가 많아 렌더링 되는 화면 또한 상이합니다. 따라서, 일반적인 표준 HTML과 CSS의 작성 방식으로는 메일 템플릿을 소화하기 어려워지죠.

오늘은 이러한 특징을 가진 메일 템플릿을 구현하기 위해 알아야 할 규칙과 유의사항 등을 공유하고자 합니다.

---

구축 전 유의사항

1. 마크업(Markup)

• 몇몇의 이메일 클라이언트는 <div> 태그를 미지원합니다.
  때문에, 정상적인 이메일 구조를 제공하기 위해 <table> 구조로 마크업 하는 것이 좋습니다.

• <table> 태그 사용 시, 기본 스타일을 초기화 한 후 사용합니다.

  <table border="0" cellpadding="0" cellspacing="0"></table>

• 가장 가볍고 안전한 구조를 위해 <table> <tr> <td> 외의 다른 코드의 사용은 최소화합니다.

• <p> <h1> 과 같은 단락, 제목 태그의 사용을 지양합니다.

• colspan rowspan 속성 또한 사용하지 않는 것이 좋습니다. 셀 병합이 필요할 땐, 테이블을 중첩하여 작성합니다.

    <table border="" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>
          <table border="" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

2. 스타일(Style)

• 공통

  • 스타일은 각 태그 내 인라인 스타일로 정의합니다.

  • 테이블 구조는 중첩되어 사용되는 경우가 많아 수정이 까다롭기 때문에 레이아웃이 확정된 이후에 스타일을 정의하는 것이 좋습니다.

  • width height align vertical-align background-color 등의 속성은 스타일 보다 HTML 테이블 속성으로 사용하는 것이 안전합니다.

    <td width="100" height="100" align="center" valign="middle" bgColor="red"></td>

  • 모든 스타일은 단축 속성이 아닌 개별 속성을 사용합니다.

    /* 단축 속성 사용 시 */
    <td style="padding: 0 5px; border: 1px solid red;">
      
    /* 개별 속성 사용 시 */
    <td style="padding-top: 0; padding-bottom: 0; padding-left: 5px; padding-right: 5px;
    border-width: 1px; border-style: solid; border-color: red;">

• 사이즈

  • 가운데 정렬된 메일 컨텐츠의 영역의 width는 600px~800px 사이가 안전합니다.

• 여백

  • margin 값 또한 미지원되는 경우가 있습니다. 때문에 여백 값을 줘야 할 땐 <td>에 padding 을 추가하거나, height 값으로 빈 셀을 넣어 공간을 생성하는 것이 좋습니다.

  • 빈 셀의 경우, 영역 내에 공백 코드 &nbsp 를 넣어주는 것이 좋습니다.

     <td height="100"> &nbsp </td>
      <td style="padding-top: 10px;"></td>

• 색상

  • RGB, RGBA, HSV 와 같은 색상 표현 방식은 일부 클라이언트에서 지원되지 않습니다. 따라서 #ffffff처럼 작성하는 Hexadecimal Colors 를 사용합니다.

  • #fff 와 같이 축약 형태의 사용은 지양합니다.

• 폰트

  • 클라이언트마다 기본으로 선언되는 폰트는 모두 다르기 때문에 font-family와 line-height 속성은 필수 선언해 주는 것이 좋으며, 부모 속성을 상속받지 못할 땐 각 태그마다 선언합니다.

  • 스타일이 들어가는 텍스트는 <font> <b> <i> 등과 같은 스타일을 내포하는 태그와 함께 사용할 때 더 안전합니다.

  <td>
      <a href="https://velog.io" style="color: #ff0000;">
            <font color="#ff0000">VELOG</font>
      </a>
  </td>

3. 이미지(Image)

• 이미지 렌더링 시 생기는 여백을 제거하기 위해선 display:block 을 추가합니다.
• 이미지의 경로는 절대 경로로 작성합니다.
• width height alt 값을 필수 입력합니다.
• GIF 의 용량은 250kb 미만으로 유지하는 것이 좋습니다.
• 정확한 정보는 못 찾았지만 svg 파일은 불안정할 수 있어 사용하지 않는 것이 좋을 듯합니다.

---

구축하기

위에 정리된 규칙들을 참고하여 직접 구축해 봅시다.
아래의 링크를 참고하면 작업에 많은 도움이 될 거예요.

https://webdesign.tutsplus.com/ko/articles/build-an-html-email-template-from-scratch--webdesign-12770

https://heropy.blog/2018/12/30/html-email-template/

---

반응형 이메일

이메일 템플릿은 미디어 쿼리를 사용할 수 없는 경우가 있습니다. 때문에 반응형 이메일 마크업 파일을 다운로드해 구축하거나, 아래의 링크를 참고하여 대응합니다.

https://d0gf00t.tistory.com/17

---

테스트하기

작업한 문서를 W3C Validator 에서 검사합니다.
또, 다양한 이메일 클라이언트에서 내 소스를 HTML로 전송해 보고, 렌더링 된 화면에 이상이 없는지 필수적으로 확인합니다.