[HTML] 이메일 폼 퍼블리싱

Front-End(Web)/HTML, CSS 2022. 3. 30. 03:06

현재 회사에서 진행하는 통합멤버십 프로젝트 관련해서, 각종 안내 이메일 발송폼을 퍼블리싱하는 작업을 담당하였었다.

우선 처음 작업하는 부분이다보니 백엔드 Github에서 기존에 웹 퍼블리셔님이 제작해주신 이메일 폼 코드를 공유받았고... 충격에 빠지게 되었다!!

자주 사용해보지 않았던 <table> 태그의 등장.... 납득하기 힘든 Inline CSS....!! 매우... 매우 당혹스러웠다...🤪🤪

위 문법을 준수하여 작업하더라도, 이전에 왜 이렇게 작업되어야 하는지 그 취지를 이해해야겠다는 생각에 이메일 폼 퍼블리싱에 관한 글들을 참고하게 되었고,

나와 비슷한 피해자(?)들은 조금이라도 이 길을 쉽게 지나갈 수 있는 가이드같은 포스팅을 작성하고자 글을 시작하게 되었다.

📙 배경

주로, 서비스를 사용하는 회원에게 관련된 정보 혹은 공지하상을 고지하는 목적으로 이메일을 발송하게 된다.

나도 그랬듯이, 단순하게 HTML/CSS 로 퍼블리싱하면 되겠다고 생각했지만, 이메일은 전통적으로 사용되어온 서비스인만큼 이를 발신/수신하는 다양한 플랫폼들과 각각에 대한 예외 케이스들이 존재한다.

- 수많은 메일 플랫폼

국내만 기준으로 해도 아래와 같은 메일 회사들을 많이 사용하고 있다. 메일이 발신될 때도 유의해야 하지만, 더 큰 문제는 "수신" 에 있었다.

네이버 (naver.com)
구글 (gmail.com)
다음 (daum.net)
카카오 메일 (kakao.com)
네이트 (nate.com)
야후 (yahoo.com)

- 수많은 메일 뷰어

이메일을 확인하는 클라이언트들은 웹/앱을 가로지르며 다양한 선택지들이 있다.

웹은 개인의 이메일 플랫폼, 모바일은 gmail 앱, 네이버 앱, 혹은 내장된 mail 앱 등 다양한 엔드포인트들이 존재하기 때문에 이 모든 경우에 대해서 대응해야한다.

[모바일 앱]

지메일 (Gmail)
네이버 앱 (Naver)
다음 앱 (Daum)
아이폰 메일 (iMail)
삼성 내장 메일 (samsung mail)
LG 내장 메일 (LG mail)
그 외 어플리케이션 메일 프로그램

[모바일 웹]

Chrome
Safari
돌핀 브라우저
삼성 내장 브라우저
LG 내장 브라우저
Opera Mini
네이버 웨일 브라우저
Firefox

[PC 브라우저]

Chrome
Safari
IE (8,9,10,11 등..)
IE Edge
Opera
네이버 웨일 브라우저
Firefox

대표적인 이메일 리더기는 아래와 같은 문제점들을 각각 가지고 있다.

Gmail : 웹폰트(OS 내장폰트만 사용 가능), Flexbox, CSS Grid, transform, position 모두 제한됨
삼성 : font-size, line-height 제한
아이폰, 아이패드, 맥 : 거의 모든 CSS 지원
네이버 : media query 미지원. 태그에 inline으로 넣은 CSS만 반영됨

이외에도 해외에는 더많은 포탈이 존재하기 때문에, 예외 케이스를 최소화하기 위해 호환 안정성이 보장되는 구식의 퍼블리싱을 택하게되는 것이다.

📙 유의사항

이번 포스팅의 메인 내용이다. 이메일을 작업하면서, 반드시 준수하는게 좋은 내용들을 정리해보았다.

- DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

</html>

Doctype은 이메일 클라이언트에게 HTML 유형을 알려주며, W3C Validator 같은 도구로 품질검사도 할 수 있다.

XHTML 1.0 Transitional DTD 를 적용하여 이메일 렌더링 및 검사를 지정하며, 일부 클라이언트는 본인의 Doctype으로 대체하기도 한다.

- Head

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>HTML Email Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

텍스트 및 특수문자 인코딩을 위한 UTF-8, XHTML Content-Type, 디바이스 화면의 viewport 등을 설정했다.

- Body

이메일 폼 퍼블리싱의 가장 중요한 내용이다. <table> 태그로 제작, 인라인 스타일링 등이 모두 이 부분에 포함되기 때문이다.

1) 반응형으로 제작하지 않는다.

모바일 시장이 커진만큼, 웹 개발에 반응형을 적용하는 경우가 많다. 하지만, 이메일 레이아웃은 PC버전을 모바일에서도 보여주고 있다.

또한, 미디어쿼리를 지원하지 않는 이메일 로더들이 존재하므로 통상 이메일 폼은 반응형이 아닌 원사이즈로 제작한다.

폼의 컨텐츠 영역의 가로너비는 600px이 가장 안전하며, 다양한 해상도의 이메일 클라이언트에 최적화되어있다. (최대 800px 미만 권장)

<body>
  <!-- 바깥 영역(배경) -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f4f4f4;">
    <tr>
      <td>

        <!-- 컨텐츠 영역(600px - 800px) -->
        <table border="0" cellpadding="0" cellspacing="0" width="600">
          <tr>
            <td>

            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
</body>

위처럼, 바깥 배경영역과 안쪽 컨텐츠 영역 두 부분으로 나뉘며 컨텐츠 영역의 너비를 600px로 잡는 것이다.

2) <table> 태그로 작성한다.

위 예시에서 볼 수 있듯 이메일 폼엔 <table> 태그를 사용한다. 현재는 많이 나아졌고, 일부 이메일 폼은 <div>로 작성된 케이스도 있다.

하지만, 대부분의 이메일 솔루션은 <div>를 지원하지 않아 과거에 많이 사용된 <table> 코딩 방식을 채택하는 것이다.

* <thead>, <tbody>, <colgroup> 과 같은 <table> 관련 태그들은 기피하고, 간단하게 <table>, <tr>, <td> 로 작업하는게 좋다.

* <table>

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

<table> 태그를 적용할 경우, 위처럼 초기화를 하고 사용하는 것이 좋다.

border : 선의 유무. 1은 있음, 0은 없음.
cellpadding : 셀 내부 여백
cellspacing : 셀 사이의 너비
width : 테이블의 가로 너비

* <tr>

'table row' 로, 테이블의 한 행(줄) 단위의 통일된 속성을 정할 수 있다. align, width, height, bgcolor, background 등의 속성이 있다.

이메일 폼에선 <td>를 랩핑하는 용도이기에 스타일링을 거의 안한다.

* <td>

<td>는 행 안에서의 한 칸을 의미한다. 특히, <td>는 아래와 같은 스타일링 등으로 제어한다.

align : 셀 내용의 수평정렬 방법. left, center, right, justify(텍스트를 한 줄에 균일하게 퍼지게) 등의 설정값이 있다.
valign : 셀 내용의 수직정렬 방법. top, middle, bottom, baseline(글자들이 최대한 아래쪽으로 정렬, 기본값) 등의 설정값이 있다.
width, height : 너비, 높이
bgcolor : 배경 속성. 색상코드를 값으로 넣어준다
background : 셀의 배경 이미지. url 혹은 파일명 등을 넣어준다
rowspan, colspan : 행, 열 합치기. 숫자값을 전달하며, 해당 값만큼 칸을 차지한다. (이메일 폼에선 지원이 잘 되지 않아 지양한다.)

3) Inline-Styling

<html>에 id, class를 부여하고, <style> 태그 혹은 CSS 파일로 스타일을 연동하는 방법을 지원하지 않을 수 있다. (네이버, 다음 등)

그렇기에, 각 태그에 style 프로퍼티를 직접적으로 부여하여 인라인 스타일링을 적용해야한다.

<td style="padding: 10px; margin: 5px; fontSize: 12px; color: #c4c4c4;">내용</td>

4) 엘리먼트 배치 방법 - padding, margin

Flex, Grid를 비롯한 최신 CSS 문법을 지원하지 않을 확률이 높다. 뿐만 아니라, position, float 역시 마찬가지이다.

최대한, 배치는 <tr>, <td> 구조로 배치하며, 요소 내 & 요소 간 여백은 padding, margin 으로 조절한다.

5) 기타

마지막으로, 내 경험에서 비롯된 몇 가지 팁들이다.

display 활용 : <table> 태그들은 기본적으로 display: table; 이 적용되어있다. width 설정 등을 위해 block, inline-block 등을 주면 좋다.
transform 사용 불가 : 이미지나 로고를 중앙 정렬하거나 미세조정하기 위해 translate를 적용해봤으나 반영되지 않았다.
base64 이미지 사용 불가 : 이미지를 AWS 업로드하는게 번거로워 base64 이미지로 적용해봤으나, 일부 이메일이 불러오지 못했다.
:before, :after 사용 불가 : 로고 구분선 등으로 많이 쓰이나, 보이지 않는 경우가 있었다. border 등으로 대체해야 한다.

📙 예시

<!-- 회색 배경 -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgColor="#F4F5F7" style="padding: 20px 16px 82px; color: #191919; font-family: 'Noto Sans KR', sans-serif;" class="wrapper">
  <tbody style="display: block; max-width: 600px; margin: 0 auto;">
    <tr width="100%" style="display: block;">
      <td width="100%" style="display: block;">
        <!-- 본문 -->
        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgColor="#FFFFFF" style="display: inline-block; padding: 32px; text-align: left; border-top: 3px solid #22B4E6; border-collapse: collapse;" class="container">
          <tbody style="display: block;">
            <!-- BIGPICTURE 로고 -->
            <tr>
              <td style="padding-bottom: 32px; font-size: 20px; font-weight: bold;">
                <img width="92" src='https://d3hqehqh94ickx.cloudfront.net/images/mail-asset/bigpicture_logo.png' />
              </td>
            </tr>
            <!-- 본문 제목 -->
            <tr>
              {{{verify_code_content1}}}
            </tr>
            <!-- 본문 내용 -->
            <tr>
              {{{verify_code_leave_content}}}
            </tr>
            <!-- 본문 컨텐츠 영역 -->
            <tr width="100%" style="display: block; margin-bottom: 32px;">
              <td width="100%" style="display: block;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%" bgColor="#F8F9FA" style="padding: 40px 20px; border-radius: 4px; text-align: center;" class="content">
                  <tbody style="display: block;">
                    <tr style="display: block;">
                      <td style="display: block; padding-bottom: 16px; font-size: 32px; font-weight: bold;">
                        {{leave_code}}</td>
                    </tr>
                    <tr style="display: block;">
                      {{{verify_code_content3}}}
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <!-- 발신전용 & 저작권 -->
            <tr>
              {{{only_send_mail}}}
            </tr>
            <tr>
              <td style="padding-bottom: 24px; color: #A7A7A7; font-size: 12px; line-height: 20px;">© 2022 Bigpicture Interactive Co., Ltd. All Rights Reserved.</td>
            </tr>
            <!-- 푸터(통합 서비스) -->
            <tr width="100%" style="display:block; padding-top: 24px; border-top: 1px solid #e9e9e9;">
              <td style="position: relative;">
                <img height="16" style="vertical-align: middle; display: inline-block; padding: 0 5px 0 0;" src='https://d3hqehqh94ickx.cloudfront.net/images/mail-asset/lvup_gray.png' />
                <img height="10" style="display: inline-block; border-left: 1px solid #E9E9E9; padding: 0 8px;" src='https://d3hqehqh94ickx.cloudfront.net/images/mail-asset/gco_gray.png' />
                {{{footer1}}}
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

포스팅 내용 자체가 엄청 많거나 복잡하진 않았다.

다만, 내가 이메일 폼 퍼블리싱을 하면서 단순히 의구심을 가졌던 <table> 태그나 인라인 스타일링의 이유에 대해 납득할 수 있는 회고가 이 포스팅의 최우선적인 목적이었다.

현재는, 나처럼 많은 프론트앤드 개발자들이 이메일 폼 퍼블리싱을 지원해야 할텐데, 그 분들에게 이 글이 조금이나마 가이드가 됬으면 하는 바람이다!!

- [배경 & 제약사항] beagle 님의 블로그 : https://beagle-dev.tistory.com/243

- [작성방법] heropy 님의 블로그 : https://heropy.blog/2018/12/30/html-email-template/

- [이메일 리더기 별 특징] 독개 님의 블로그 : https://codingmoondoll.tistory.com/99

- [이메일 폼 작성 가이드] : https://webdesign.tutsplus.com/ko/articles/build-an-html-email-template-from-scratch--webdesign-12770

'Front-End(Web) > HTML, CSS' 카테고리의 다른 글

[CSS/Side Lib.] Emotion.js (0)	2022.07.21
[HTML+JS] window.postMessage() - <iframe> 과의 통신 (0)	2022.02.24
[CSS/Side Lib.] Tailwind CSS (0)	2022.01.23
[CSS/Lang] LESS (0)	2021.08.12
[CSS/Side Lib.] Styled Components (0)	2021.01.24

ABOUT ME

ttaeng_99 's 개발의 흔적들 ttaeng_99 's 개발의 흔적들

📙 배경

- 수많은 메일 플랫폼

- 수많은 메일 뷰어

📙 유의사항

- DOCTYPE

- Head

- Body

📙 예시

'Front-End(Web) > HTML, CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

📙 배경

- 수많은 메일 플랫폼

- 수많은 메일 뷰어

📙 유의사항

- DOCTYPE

- Head

- Body

📙 예시

'Front-End(Web) > HTML, CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바