[HTML&CSS] 안전한 이메일 템플릿 만들기

Web Dev/CSS :: 씨에스에스

[HTML&CSS] 안전한 이메일 템플릿 만들기

HJPlumtree 2022. 8. 4. 22:23

안전한 이메일 템플릿 만들며 배운 점

이메일 UI를 바꾸기 위해 자주 사용하는 태그와 CSS 스타일을 사용해서 변경 했는데,

스타일이 전부 깨져서 나오는 것을 확인했습니다.

이 글은 수 많은 이메일 클라이언트에서

깨지지 않는 ‘안전한 이메일 템플릿’을 만들기 위해 작성했습니다.

시작 전 인상 깊었던 말

여러 러페런스를 찾아보다가 인상 깊은 문단이 있었습니다.

"웹 개발에 익숙하다면, 알고 있는 것을 전부 잊어라. 가장 큰 장애물은 '보통' 웹 개발처럼 작동한다고 예상하는 것이다."

If you are already familiar with web development, forget everything you know about it. The single biggest obstacle to you is expecting things to work like ‘normal’ web development. This will frustrate you and hold you back. The worst thing you can do is get angry that you can’t use DIVs or that
margin
isn’t fully supported. So forget everything you know about semantic HTML and the latest CSS spec. Trust me, it will help.

다양한 이메일 클라이언트

이메일의 구조와 스타일을 결정하는 다양한 클라이언트가 존재합니다.

이들을 조건부 스타일링 하는 것은 생성도 수정도 상상하기도 싫습니다

모바일

Android
iPhone
iPad
BlackBerry
Window Phone
... 등 그리고 이들의 다른 모델들

데스크탑

Apple Mail
Thunderbird
Windows Live Mail
Outlook
Outlook for Mac
... 등 그리고 이들의 다른 버전들

웹

Gmail
AOL
Outlook.com
Yahoo
... 등

만들기 전 팁

1. 구조 먼저 만들기

이메일 템플릿을 만드는 것은 공간을 만드는 거라고 생각됩니다.
밑에서 알아볼 예시에서 확인할 수 있습니다.

2. 자주 테스트 하기

테스트 해서 잘 보이는지 확인하는게 중요합니다.
테스트는 사용하는 IDE의 프리뷰만이 아닌 실제 이메일 템플릿에서 확인이 필요합니다.
이메일 템플릿 확인할 수 있는 사이트
- Email2Go
- HTML EMAIL

3. 이메일 보내보기

직접 이메일을 보내서 여러 클라이언트에서 확인을 꼭 해야한다고 생각합니다.
위에 있는 Email2Go에서 보낼 수 있습니다.

초기 설정

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title></title>
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    <style>
        table, td, div, h1, p {font-family: Arial, sans-serif;}
        table, td {border:2px solid #000000 !important;}
    </style>
</head>
</html>

Doctype

브라우저에게 html이라고 말해주기

html의 xmlns 부분

여러 xml 문서들끼리 충돌을 방지하는 부분

x-apple-disable-message-reformatting

애플 메일에서 사이즈를 바꾸는 것을 막아주는 부분

부분

윈도우의 ms outlook에 적용되는 코드입니다.

Outlook에서 PNG 이미지가 알맞은 사이즈로 보여주도록 해줍니다

<style> 태그 부분

table, td, div 등에 font를 지정하는 이유는

Gmail 웹 메일에서 font를 덮어쓴다고 합니다.

border 지정

이 부분은 디버깅이라고 생각하면 됩니다.

만들면서 공간을 확인을 위한 부분이고 나중에 지워버릴거에요

Body와 메인 Table 만들기

이제 구조를 만들고 본격적으로 컨텐츠를 구성하는 일을 시작합니다.

<body style="margin: 0; padding: 0">
    <table
      role="presentation"
      style="
        width: 100%;
        border-collapse: collapse;
        border: 0;
        border-spacing: 0;
        background: #f8f9fa;
      "
    >
      <tr>
        <td align="center" style="padding: 0">
          <table
            role="presentation"
            style="
              width: 602px;
              border-collapse: collapse;
              border: 1px solid #cccccc;
              border-spacing: 0;
              text-align: left;
            "
          >
            <tr>
              <td style="padding: 0">Row 1</td>
            </tr>
            <tr>
              <td style="padding: 0">Row 2</td>
            </tr>
            <tr>
              <td style="padding: 0">Row 3</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>

body 부분

margin과 padding을 0으로 해줍니다

table 부분

role을 presentation으로 만들면 화면 낭독 프로그램(Screen readers)에게,

데이터 테이블이 아니라 비주얼 테이블로 취급하도록 해줍니다

border-collapse을 collapse 그리고 border, border-spacing을 0으로 조정해서,

예상치 않게 등장할 공간을 없애줍니다

td 부분

align은 HTML에서 사라졌는데(deprecated) 되었지만 이메일 템플릿에서는 사용을 추천합니다.

저 위에서 봤듯이 이메일 클라이언트가 워낙 다양해서 CSS 지원 정도도 다릅니다.

Outlook 같은 것은 중앙 정렬을 위한 margin:0 auto; 가 적용 안됩니다

그리고 주의할 점은 padding을 항상 0으로 해주지 않으면,

이메일 클라이언트가 padding을 추가합니다.

이미지(로고) 넣기

상단에 로고를 넣어보겠습니다

<tr>
  <td
    style="padding: 0; background-color: #ffffff;"
  >
    <img
      src="https://www.strunkmedia.com/wp-content/uploads/2018/05/bigstock-222496366.jpg"
      alt="Logo"
      width="150"
      style="height: auto; display: block"
    />
  </td>
</tr>

img 태그

width에 직접 값을 넣어줍니다

style="width: 300px"은 역시 Outlook에서 다르게 보인다고 합니다(물리적인 사이즈)

height를 auto로 해줘서 찌그러지지 않게 해주고

display block은 몇 이메일 클라이언트에서 갭을 만드는 것을 방지해줍니다

컨텐츠 공간 추가

Row 2가 있던 공간을 <table> 태그로 교체를 해줍니다.

그럼 컨텐츠를 담을 공간이 준비가 됐습니다

<tr>
  <td style="padding: 0 32px">
    <table
      role="presentation"
      style="
        width: 100%;
        border-collapse: collapse;
        border: 0;
        border-spacing: 0;
      "
    >
      <tr>
        <td style="padding: 0">Content 1</td>
      </tr>
      <tr>
        <td style="padding: 0">Content 2</td>
      </tr>
    </table>
  </td>
</tr>

이메일 헤더 추가

Content 1 위치에 헤더를 추가해줍니다.

<h1>과 <p>를 사용해서 추가했는데,

간격을 강력하게 제어하려면 <td>의 padding 속성을 이용하면 될 것 같습니다.

<tr>
    <td style="padding: 0">
      <h1>이메일 템플릿 예시</h1>
      <p>
        어머님, 이런 위에 이름을 별빛이 아무 거외다. 별 어머님,
        새워 까닭입니다. 언덕 동경과 무엇인지 거외다. 파란
        지나가는 이름자를 애기 멀듯이, 하나에 걱정도 거외다. 별
        새워 하나의 이 버리었습니다. 나의 헤는 위에도 그리고
        다하지 무덤 그리워 하나 봅니다. 어머니, 것은 별
        까닭입니다.
      </p>
      <p><a href="https://example.com">홈페이지 이동</a></p>
    </td>
</tr>

2개 이상의 컬럼 생성

한 줄에 두개 이상의 컨텐츠를 넣고 싶을 때 을 추가하면 됩니다

  <tr>
    <td style="padding: 0">
      <table
        role="presentation"
        style="
          width: 100%;
          border-collapse: collapse;
          border: 0;
          border-spacing: 0;
        "
      >
        <tr>
          <td style="padding: 0; vertical-align: top">
            Column 1
          </td>
          <td style="padding: 0; vertical-align: top">
            Column 2
          </td>
        </tr>
      </table>
    </td>
  </tr>

vertical-align: top 의미

기본값이 middle로 되어 있어 한쪽 글이 길어지면 높이가 다른 것을,

top 상단에 고정해서 같은 줄에 있기 위한 용도입니다.

컬럼 꾸미기

<p> 태그에 대한 margin이 모든 이메일 클라이언트에서 잘 지원되고 있어서,

컨텐츠를 <p> 태그로 감싸고 margin으로 원하는 만큼 조정해줍니다.

  <tr>
    <td style="padding: 0">
      <table
        role="presentation"
        style="
          width: 100%;
          border-collapse: collapse;
          border: 0;
          border-spacing: 0;
        "
      >
        <tr>
          <td
            style="
              width: 300px;
              padding: 0;
              vertical-align: top;
            "
          >
            <p>
              <img
                src="https://images.unsplash.com/photo-1443926818681-717d074a57af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
                alt="mountain photo"
                width="300"
                style="height: auto; display: block"
              />
            </p>
            <p>
              잠, 쓸쓸함과 소학교 나는 피어나듯이 아이들의
              시인의 있습니다. 많은 나의 우는 써 있습니다.
            </p>
            <p><a href="#">어바웃 페이지 이동</a></p>
          </td>
          <td
            style="
              width: 300px;
              padding: 0;
              vertical-align: top;
            "
          >
            <p>
              <img
                src="https://images.unsplash.com/photo-1478359844494-1092259d93e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
                alt="ocean photo"
                width="300"
                style="height: auto; display: block"
              />
            </p>
            <p>
              아침이 별 소학교 헤는 아직 거외다. 쉬이 파란 이웃
              오는 흙으로 봅니다. 어머니 위에 이런 슬퍼하는
              듯합니다.
            </p>
            <p><a href="#">어바웃 페이지 이동</a></p>
          </td>
        </tr>
      </table>
    </td>
  </tr>

컬럼 사이 간격 띄우기

방법은 조금 무식해 보일 수 있지만 사이에 <td>를 넣어서 간격을 만들어 줍니다.

그리고 세 개의 컬럼의 width를 전체 width에 맞게 조정해줍니다.

(어떤 이메일 프리뷰에서 적용이 안되는 곳도 있어서 다른 방법이 필요해보이기도 합니다)

<tr>
  <td
    style="
      width: 280px;
      padding: 0;
      vertical-align: top;
    "
  >
    <p>
      <img
        src="https://images.unsplash.com/photo-1443926818681-717d074a57af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
        alt="mountain photo"
        width="300"
        style="height: auto; display: block"
      />
    </p>
    <p>
      잠, 쓸쓸함과 소학교 나는 피어나듯이 아이들의
      시인의 있습니다. 많은 나의 우는 써 있습니다.
    </p>
    <p><a href="#">어바웃 페이지 이동</a></p>
  </td>
  <td style="width:20px;padding:0;font-size:0;line-height:0;">&nbsp;</td>
  <td
    style="
      width: 280px;
      padding: 0;
      vertical-align: top;
    "
  >
    <p>
      <img
        src="https://images.unsplash.com/photo-1478359844494-1092259d93e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
        alt="ocean photo"
        width="300"
        style="height: auto; display: block"
      />
    </p>
    <p>
      아침이 별 소학교 헤는 아직 거외다. 쉬이 파란 이웃
      오는 흙으로 봅니다. 어머니 위에 이런 슬퍼하는
      듯합니다.
    </p>
    <p><a href="#">어바웃 페이지 이동</a></p>
  </td>
</tr>

Footer 스타일링

Footer 역시 두 컬럼을 만들거라 <table>로 감싸줍니다.

<tr>
  <td style="padding: 0">
    <table
      role="presentation"
      style="
        width: 100%;
        border-collapse: collapse;
        border: 0;
        border-spacing: 0;
        background-color: #cccccc;
      "
    >
      <tr>
        <td style="padding: 0; width: 50%" align="left">
          &reg; Someone, Somewhere 2022<br /><a
            href="http://www.example.com"
            style="color: #ffffff; text-decoration: underline"
            >Unsubscribe</a
          >
        </td>
        <td style="padding: 0; width: 50%" align="right">
          <a href="http://www.twitter.com/" style="color: #ffffff"
            >Twitter</a
          >
          <a href="http://www.facebook.com/" style="color: #ffffff"
            >Facebook</a
          >
          <a href="http://www.instagram.com/" style="color: #ffffff"
            >Instagram</a
          >
        </td>
      </tr>
    </table>
  </td>
</tr>

스타일링

이제 필요에 따라 이쁘게 스타일링 하시면 됩니다.

위에서 언급하지 않은 태그를 사용하고 싶으면 지원을 하는지 확인을 해보는 것을 추천드립니다.

만들며 주로 사용했던 사이트는 Can I email 라는 사이트 입니다.

필요한 속성을 검색해서 대부분이 지원되는 속성만 사용했습니다.

테스트

이제는 만든 템플릿이 예상한대로 보이는지 테스트를 해봐야합니다.

직접 보내도 좋고, 유료 서비스인 Litmus, Email on Acid 등 통해서 확인할 수 있습니다.

(Free trial 기간을 이용해서 테스트 할 수 있습니다!)

디버깅용 border를 유지해서,

각 이메일 클라이언트에서 어떻게 보이는지 확인하는데 도움을 받을 수도 있습니다.

다음 그림은 Email on Acid의 프리뷰 입니다.

완료!!! 🥳

마지막으로 table과 td에 주었던 border를 제거합니다.

그럼 이렇게 안전한 이메일 템플릿이 만들어 집니다!

[부록] 악명 높은 MS Outlook

위와 같이 만들면 거의 대부분의 이메일에서 동일하게 나왔지만, windows 10의 Outlook 365 데스크톱 앱에서만 버튼의 padding을 무시하는 것을 볼 수 있었습니다.

찾아보니 Outlook에 대한 불만들을 쉽게 볼 수 있었습니다.

이 버튼의 부분을 처리하기 위해 백그라운드로 이미지를 넣는 경우도 있고, 가짜 <td>를 넣어서 공간을 확보하는 경우도 있지만 버튼의 클릭 가능한 부분을 확장해주는 방법을 찾지 못했습니다.

그래서 우선은 MS의 Outlook일 때 a의 border를 확장해서 버튼처럼 보이게 하는 걸로 해놓았습니다.

버튼에 클래스를 이렇게 주고 <a class="button"> ‘초기 설정’에서 알아본 mso를 위한 처리에 스타일을 넣어줬습니다.

<!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <style>
    .button {
      border-top: 16px solid #4776ae;
      border-bottom: 16px solid #4776ae;
      border-right: 65px solid #4776ae;
      border-left: 65px solid #4776ae;
    }
  </style>
<![endif]-->

긴 글 읽느라 고생하셨습니다!

하지만 우리에겐 볼만한 이메일 템플릿이 생겼습니다 :)

참고 링크

CSS Inliner Tool

=> https://templates.mailchimp.com/resources/inline-css/

이메일 보내기 테스트

=> https://email2go.io/

Inline CSS로 변경

=> https://templates.mailchimp.com/resources/inline-css/

이메일 쳌

=> https://htmlemail.io/inline/

HTML 이메일 템플릿 처음부터 제작하기

=> https://kihyeoksong.tistory.com/113

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

=> https://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908

Creating a Simple Responsive HTML Email

=> https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

저작자표시

'Web Dev > CSS :: 씨에스에스' 카테고리의 다른 글

[CSS] 백그라운드 이미지 투명도 조절하는 간단한 방법 (2)	2020.09.26
[CSS] 웹 세이프 폰트 (0)	2020.07.30
[CSS] 플렉스 Flexbox, 반응형 웹을 위해 (0)	2020.07.19
유용한 CSS 툴 - SVG 분할선 생성기 (0)	2020.06.10
영어 사이트 제작시 폰트 추천 (0)	2020.06.07

현재글[HTML&CSS] 안전한 이메일 템플릿 만들기

뭘 배웠지?