HTML 이메일 개발 2026 — Maizzle / MJML / react-email / Postmark Templates / Foundation for Emails / Cerberus 심층 가이드

프롤로그 — 1998년의 `table`이 아직도 살아있다

2026년에 HTML을 짜본 사람이라면, 처음 이메일 템플릿을 열었을 때의 충격을 잊지 못한다. CSS Grid도, Flexbox도, 심지어 div 기반 레이아웃도 안전하지 않다. Outlook(특히 Microsoft 365의 Word 렌더링 엔진)을 한 번이라도 만나본 사람은 안다 — 1998년에 정착된 table 기반 레이아웃이 지금도 사실상 유일한 호환 방법이다.

그런데 그 위에서 2024 ~ 2026년 사이 일어난 일은 흥미롭다. Resend가 만든 react-email이 인디 스타트업의 사실상 표준이 되었고, Maizzle은 Tailwind CSS 워크플로를 이메일로 끌어왔다. MJML은 여전히 컴포넌트 기반 표준의 자리를 지키고, Postmark의 서버사이드 템플릿은 Mustache 변수 한 줄로 마케팅 팀과 개발팀의 경계를 흐릿하게 만들었다. 동시에 Stripo, BEE, Stensul, Unlayer 같은 드래그앤드롭 SaaS는 마케팅 부서의 손에서 점점 더 많은 비중을 차지하고 있다.

이 글은 그 네 가지 분류 — 코드(Maizzle, Cerberus), 컴포넌트(MJML, react-email, Foundation for Emails, HEML), 서버사이드 템플릿(Postmark, HubSpot), 드래그앤드롭(Stripo, BEE, Stensul, Unlayer, mosaico, Email-Builder.js, Tabular) — 를 한 번에 정리한다. 그리고 다크 모드, 접근성, MIME multipart, AMP for Email, 한국 / 일본의 실제 사례까지 함께 다룬다.

1장 · 2026년 HTML 이메일 지도 — 코드 / 컴포넌트 / 드래그앤드롭 / SaaS

이메일 템플릿 도구는 크게 네 분류로 정리할 수 있다.

분류	대표 도구	주 사용자	강점
코드 우선	Maizzle, Cerberus, ZURB Foundation 클래식	프론트엔드 엔지니어	Tailwind / HTML 그대로
컴포넌트 DSL	MJML, react-email, HEML, Foundation for Emails	풀스택 엔지니어	컴포넌트 추상화
서버사이드 템플릿	Postmark, HubSpot, Sendgrid Dynamic Templates	백엔드 + 마케팅	변수 치환 / 다국어
드래그앤드롭 SaaS	Stripo, BEE, Stensul, Unlayer, mosaico, Email-Builder.js, Tabular	마케팅 / 디자이너	비개발자 가능

이 네 분류는 서로 겹친다. Maizzle을 코드 우선이라고 했지만 Tailwind 컴포넌트로도 쓸 수 있고, react-email은 컴포넌트지만 결국은 코드 우선이다. Stripo는 드래그앤드롭이지만 HTML 직접 편집도 된다. 분류는 출발점일 뿐이다.

2026년 5월 기준으로 의미 있는 트렌드는 다음 다섯 가지다.

react-email(Resend) 천하의 시작 — 인디 스타트업의 80% 이상이 이걸 쓴다는 비공식 추정.
Maizzle의 조용한 점유율 확대 — Tailwind 기반 프론트엔드 팀이 자연스럽게 선택.
MJML의 안정기 — 새로운 기능보다는 안정성 / 통합 / AI 보조에 집중.
드래그앤드롭 SaaS의 마케팅 부서 흡수 — Stripo·BEE·Stensul이 각자 점유율 확보.
AMP for Email의 사실상 사망 — Google이 발표 후 6년, 도입한 거의 모든 서비스가 철회.

2장 · 왜 이메일은 여전히 어려운가 — 클라이언트 분열

2026년의 이메일 클라이언트 시장은 대략 이렇다.

Apple Mail (iOS / macOS) — 약 55%. CSS 지원이 가장 좋다. 다크모드 자동 반전.
Gmail (웹 / 앱) — 약 28%. <style> 태그를 허용(2016년 이후). 그러나 clip-path, mix-blend-mode 등은 불안정.
Outlook (Microsoft 365 데스크톱, Outlook.com, Outlook 모바일) — 약 10%. 이게 모든 문제의 근원. 데스크톱 버전은 Word 렌더링 엔진(MSO)을 쓰고, 웹 / 모바일 / Mac은 별개 엔진이라 같은 메일이 세 모습으로 보인다.
기타 (Yahoo, AOL, Samsung Mail, 일본 K-9, 한국 다음 메일 등) — 합쳐서 7%.

문제는 Outlook 데스크톱이다. 2024년에 Microsoft가 "New Outlook"을 밀었지만 2026년에도 기업 환경의 60%는 여전히 Word 엔진을 쓴다. Word 엔진은:

CSS Grid / Flexbox 미지원
background-image 미지원(VML로 회피 필요)
margin 일부 무시
border-radius 미지원
폰트 fallback이 Times New Roman으로 떨어짐

그래서 2026년에도 이메일 템플릿은 table + td + align="center" 의 1998년 패턴을 쓴다. Maizzle, MJML, react-email은 결국 그 패턴으로 컴파일된다.

<!-- 2026년에도 이게 표준 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="center">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
        <tr>
          <td style="padding: 20px;">
            여기에 내용
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

핵심은 role="presentation" — 스크린리더가 이 표를 데이터 표가 아니라 레이아웃용으로 인식하게 한다. 접근성 챕터에서 다시 다룬다.

3장 · Maizzle — TailwindCSS-driven 이메일

3.1 출발점

Maizzle은 루마니아 개발자 Cosmin Popovici가 2018년에 시작했다. 핵심 아이디어는 "이메일에 Tailwind를 쓰자". Tailwind는 본래 웹 페이지용 유틸리티 클래스 프레임워크이지만, 이메일에서도 같은 DX를 누릴 수 있게 만든 도구다. 2024년 Maizzle 5가 나오면서 Vite 기반으로 다시 짜였고, 2026년 현재 6.x 버전이다.

npx create-maizzle
# Maizzle Starter? Default
# Project name? my-emails
cd my-emails
npm install
npm run dev

기본 구조:

my-emails/
  src/
    components/    # 재사용 컴포넌트
    layouts/       # 레이아웃 (main.html 등)
    templates/     # 실제 이메일 (welcome.html 등)
  tailwind.config.js
  config.js
  package.json

3.2 어떻게 동작하나

Maizzle은 빌드 시 다음을 한다.

Tailwind 클래스를 인라인 스타일로 변환(style="...").
<style> 블록에 못 들어가는 클래스는 인라인으로 넣는다.
미디어 쿼리는 <style> 블록에 남긴다(Outlook이 무시해도 OK).
HTML을 minify한다.
옵션으로 plain-text 버전을 만든다.

결과적으로 작성자는 다음처럼 짜는데:

<table class="w-full max-w-[600px] mx-auto bg-white">
  <tr>
    <td class="p-6 text-base font-sans text-slate-800">
      <h1 class="text-2xl font-bold mb-4">환영합니다</h1>
      <p>가입을 환영합니다. 시작하려면 아래 버튼을 누르세요.</p>
    </td>
  </tr>
</table>

빌드 후에는 다음처럼 인라인 스타일이 박힌 1998년 호환 HTML이 나온다.

<table style="width: 100%; max-width: 600px; margin: 0 auto; background-color: #ffffff;">
  <tr>
    <td style="padding: 24px; font-size: 16px; font-family: ui-sans-serif, system-ui; color: #1e293b;">
      <h1 style="font-size: 24px; font-weight: 700; margin-bottom: 16px;">환영합니다</h1>
      <p>가입을 환영합니다. 시작하려면 아래 버튼을 누르세요.</p>
    </td>
  </tr>
</table>

3.3 강점

Tailwind를 그대로 쓴다. 웹 팀이 따로 배울 게 없다.
컴포넌트(x-component) 로 헤더 / 푸터 재사용.
환경별 빌드 — 개발 / 스테이징 / 프로덕션마다 다른 데이터를 주입.
MJML 변환 지원 — 필요하면 MJML을 거쳐 빌드 가능.
plain-text 자동 생성 — juice 기반 변환.

3.4 약점

Tailwind를 모르면 학습 곡선 이 있다.
드래그앤드롭이 필요한 마케팅 팀에는 부적합.
컴포넌트 시스템이 React에 비해 단순하다. JSX 같은 표현력은 없다.

Maizzle은 "프론트엔드 팀이 이메일을 직접 짤 때" 가장 빛난다.

4장 · MJML — Mailjet의 컴포넌트 DSL

4.1 역사

MJML은 Mailjet(현재 Sinch Email)이 2015년에 오픈소스로 공개했다. 발음은 "엠제이엠엘". 이메일 전용 마크업 언어를 만들고, 그 언어를 1998년 호환 HTML로 컴파일하는 컴파일러를 함께 제공한다.

<mjml>
  <mj-head>
    <mj-title>환영합니다</mj-title>
    <mj-preview>가입을 축하합니다. 시작해 보세요.</mj-preview>
    <mj-attributes>
      <mj-all font-family="Inter, Arial, sans-serif" />
      <mj-text color="#1e293b" line-height="1.5" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#f8fafc" width="600px">
    <mj-section background-color="#ffffff" padding="24px">
      <mj-column>
        <mj-text font-size="24px" font-weight="700">환영합니다</mj-text>
        <mj-text>가입을 환영합니다. 아래 버튼을 눌러 시작하세요.</mj-text>
        <mj-button background-color="#3b82f6" href="https://example.com">
          시작하기
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

4.2 무엇이 좋은가

mj-section, mj-column, mj-button, mj-image, mj-divider 같은 시맨틱한 컴포넌트.
반응형이 기본 — mj-column은 모바일에서 자동으로 한 줄에 쌓인다.
VS Code 확장으로 실시간 프리뷰.
CLI — mjml input.mjml -o output.html.
Node 라이브러리 — 서버에서 mjml2html()로 변환.

import mjml2html from 'mjml'

const { html, errors } = mjml2html(mjmlSource, {
  minify: true,
  keepComments: false,
})

4.3 약점

MJML 문법을 배워야 한다. 디자이너에게는 진입장벽.
변수 치환은 별도 — Handlebars / Mustache / Liquid를 따로 얹어야 한다.
다국어 처리는 도구가 안 줌 — 직접 i18n 레이어를 짜야 한다.
AI 보조는 약함 — MJML AI 도구가 2024년 출시되었지만 react-email 생태계에 비해 작다.

MJML은 "오픈소스 표준이 필요하고 React를 안 쓰는 팀"에 여전히 좋은 선택이다.

5장 · react-email (Resend) — React 기반의 정착자

5.1 어떻게 시작되었나

Resend의 창업자 Zeno Rocha가 2023년 react-email을 공개했다. 출발점은 단순했다 — "이메일도 컴포넌트로 짜고 싶다, JSX로." 2024년 Resend의 빠른 성장과 함께 사실상 인디 / 스타트업의 표준이 되었고, 2026년 1월 4.x가 나왔다.

npm install react-email @react-email/components -D
npx react-email dev    # 로컬 프리뷰 서버

// emails/welcome.jsx
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from '@react-email/components'

export default function Welcome({ name = '회원' }) {
  return (
    <Html lang="ko">
      <Head />
      <Preview>가입을 축하합니다. 시작해 보세요.</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>환영합니다, {name}님</Heading>
          <Section>
            <Text>가입을 환영합니다. 아래 버튼을 눌러 시작하세요.</Text>
            <Button href="https://example.com" style={btn}>
              시작하기
            </Button>
          </Section>
        </Container>
      </Body>
    </Html>
  )
}

const main = { backgroundColor: '#f8fafc', fontFamily: 'Inter, Arial, sans-serif' }
const container = { maxWidth: 600, margin: '0 auto', backgroundColor: '#fff', padding: 24 }
const h1 = { fontSize: 24, fontWeight: 700, color: '#1e293b' }
const btn = { backgroundColor: '#3b82f6', color: '#fff', padding: '12px 24px', borderRadius: 6 }

(주: 위 코드에서 JSX의 중괄호 표현식은 코드 블록 안에 있으므로 문제 없다. 코드 블록 바깥의 본문에 중괄호로 식별자를 노출하지 말 것.)

5.2 강점

React를 이미 쓰는 팀에게 학습 곡선 제로.
컴포넌트 라이브러리 @react-email/components — Button, Container, Section, Heading, Img, Hr, Link 등.
로컬 프리뷰 서버 (npx react-email dev) 가 가장 잘 만들어진 DX.
HTML / plain-text 동시 생성 — render(<Welcome />), render(<Welcome />, { plainText: true }).
Resend와의 통합 — Resend SDK에 react 옵션을 넘기면 자동 렌더.

import { Resend } from 'resend'
import Welcome from '../emails/welcome'

const resend = new Resend(process.env.RESEND_API_KEY)
await resend.emails.send({
  from: 'Acme <hello@mail.acme.com>',
  to: ['user@example.com'],
  subject: '환영합니다',
  react: <Welcome name="영주" />,
})

5.3 약점

React 의존. PHP / Ruby / Go 팀에는 적합도 떨어진다(SSR 서비스로 우회 가능하지만 복잡).
Outlook Word 엔진 호환은 여전히 본인 책임 — 컴포넌트가 깨끗하게 짜였어도, 복잡한 레이아웃은 직접 테스트해야 한다.
다크모드 / 색 토큰은 직접 관리 — Tailwind만큼 정돈된 토큰 시스템이 없다.

5.4 react-email vs MJML

같은 컴포넌트 모델이지만 결정적 차이가 있다.

MJML: 자체 DSL → HTML. React 생태계와 무관.
react-email: JSX → HTML. React 컴포넌트로서 재사용 / 테스트 / Storybook 가능.

React 팀이라면 react-email, 그렇지 않다면 MJML.

6장 · Postmark Templates — 서버사이드 변수 치환

6.1 포지셔닝

Postmark는 트랜잭셔널 이메일 전문 ESP. 자체 템플릿 시스템(MJML 기반 + Mustachio 변수 치환)을 제공한다. 2024년에 ActiveCampaign에 인수되었지만 2026년 현재도 독립 제품으로 운영된다.

<!-- Postmark 템플릿 본문 -->
<table>
  <tr>
    <td>
      <h1>안녕하세요, {{name}}님</h1>
      <p>주문 #{{order_id}} 가 접수되었습니다.</p>
      {{#each items}}
        <p>{{name}} × {{quantity}} = {{total_krw}}원</p>
      {{/each}}
      <a href="{{tracking_url}}">배송 추적</a>
    </td>
  </tr>
</table>

위처럼 Mustachio(Mustache 변형) 문법으로 변수를 박고, 발송 시 API에서 데이터를 주입한다.

import { ServerClient } from 'postmark'

const client = new ServerClient(process.env.POSTMARK_TOKEN)

await client.sendEmailWithTemplate({
  From: 'orders@example.com',
  To: 'user@example.com',
  TemplateAlias: 'order-confirmation',
  TemplateModel: {
    name: '영주',
    order_id: 'A-1234',
    items: [
      { name: '책', quantity: 1, total_krw: '20000' },
      { name: '커피', quantity: 2, total_krw: '12000' },
    ],
    tracking_url: 'https://example.com/track/A-1234',
  },
})

6.2 강점

마케팅 팀이 직접 편집 — 개발자가 발송 코드를 안 건드려도 본문 수정 가능.
다국어 처리가 깔끔 — 같은 템플릿의 KO / EN / JA 변형을 alias로 관리.
MJML 기반 에디터 — 시각 편집 + 코드 편집 동시.
A/B 테스트, 버전 관리 가 제품에 내장.

6.3 약점

Postmark 종속 — 다른 ESP로 옮기면 템플릿을 다 옮겨야 함.
개발 워크플로(Git, 코드 리뷰)와 분리 — 템플릿 변경이 PR에 안 잡힌다.
복잡한 로직(조건문, 반복문)이 약함 — Liquid보다 표현력이 떨어진다.

서버사이드 템플릿은 "마케팅 팀이 텍스트는 자주 바꾸지만, 구조는 잘 안 바꾼다" 는 가정 아래 가장 잘 작동한다.

6.4 비교 — SendGrid Dynamic Templates / HubSpot

SendGrid Dynamic Templates — Handlebars 기반. Postmark와 유사하지만 에디터 UX가 떨어진다.
HubSpot 템플릿 — HubL이라는 자체 언어 사용. 마케팅 자동화와 깊게 통합되지만 트랜잭셔널 용도로는 무겁다.

7장 · Foundation for Emails (ZURB) — 클래식 프레임워크

7.1 ZURB의 유산

ZURB는 2010년대에 Foundation이라는 CSS 프레임워크로 유명했다(Bootstrap의 라이벌). 2015년에 이메일 전용 분파인 Foundation for Emails(코드명 Ink)를 공개했다. 2017년에 v2가 나왔고, 그 후로는 큰 업데이트가 없지만 여전히 살아있다.

<!-- Foundation for Emails - Inky 마크업 -->
<container>
  <row>
    <columns small="12" large="6">
      <h1>환영합니다</h1>
      <p>가입을 축하합니다.</p>
      <button href="https://example.com">시작하기</button>
    </columns>
    <columns small="12" large="6">
      <img src="https://example.com/welcome.png" alt="Welcome" />
    </columns>
  </row>
</container>

Inky라는 마크업을 쓰면 위처럼 container, row, columns, button 같은 시맨틱 태그가 1998년 호환 table HTML로 컴파일된다. MJML의 정신적 조상이다.

7.2 2026년에도 쓸 가치가 있나?

대체로 새 프로젝트엔 비추천. MJML과 react-email이 거의 모든 면에서 더 낫다. 하지만:

기존 ZURB / Foundation 자산 이 있는 팀.
Ruby / Rails 통합 — foundation_emails-sass 젬이 잘 정리됨.
단순한 마크업 을 선호하고 MJML의 mj- prefix가 싫은 사람.

이런 경우엔 여전히 합리적이다.

8장 · Cerberus 템플릿 (Ted Goas)

8.1 이게 뭔가

Cerberus는 디자이너 / 개발자 Ted Goas가 2013년경 공개한 순수 HTML 이메일 템플릿 모음. 빌드 도구 없이 그냥 HTML 파일을 복사해서 쓰는 방식이다. 2026년에도 GitHub 저장소가 유지되고 있고, 8.5k 스타.

세 개의 핵심 템플릿이 있다.

cerberus-fluid.html — 한 컬럼, 모바일 우선.
cerberus-responsive.html — 미디어 쿼리 기반 반응형.
cerberus-hybrid.html — Outlook용 조건부 주석 + 모바일 미디어 쿼리.

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0"
       style="max-width: 600px; margin: auto;" class="email-container">
  <tr>
    <td>본문</td>
  </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

위가 그 유명한 Outlook 조건부 주석(MSO conditional comments) 패턴. Outlook은 <!--[if (gte mso 9)|(IE)]> 사이의 마크업만 본다. Outlook은 max-width를 무시하므로, 고정 폭 600px table을 따로 줘야 한다.

8.2 왜 아직도 쓰나

빌드 도구 없음 — 파일 하나 복사하면 끝.
검증된 패턴 — 10년 이상의 실전.
학습용으로 최고 — 왜 그런 table 구조가 필요한지 가장 잘 보여준다.

이메일 시작하는 사람에게는 Cerberus를 한 번 읽고, 그 다음에 Maizzle / MJML / react-email로 가는 게 가장 빠른 경로다.

9장 · HEML / mosaico — 그 외 OSS

9.1 HEML

SparkPost(현 MessageBird)가 2018년에 공개한 또 다른 시맨틱 마크업.

<heml>
  <head>
    <subject>안녕하세요</subject>
  </head>
  <body>
    <container>
      <h1>환영합니다</h1>
      <p>가입을 축하합니다.</p>
      <button href="https://example.com">시작</button>
    </container>
  </body>
</heml>

MJML과 거의 같은 콘셉트지만 2020년 이후 업데이트가 거의 없다. 2026년에는 사실상 유지 모드.

9.2 mosaico

VOX media가 만든 오픈소스 드래그앤드롭 에디터. 셀프호스트해서 마케팅 팀에 제공할 수 있다.

장점: 무료, 셀프호스트.
단점: UI가 2010년대 느낌, 템플릿 라이브러리가 작다.

내부 마케팅 팀용 도구가 필요한데 SaaS 비용이 부담스러운 곳에서 가끔 채택한다.

10장 · Stripo / BEE / Stensul / Unlayer — 드래그앤드롭 SaaS

10.1 네 도구의 위치

도구	모회사	가격대 (2026)	주 고객
Stripo	Stripo (독립)	무료 ~ `$95/월`	중소 마케팅 팀
BEE	BEE Content Design	무료 ~ `$150/월`	대기업, 임베드 SDK 강점
Stensul	Stensul	엔터프라이즈만	대기업, 브랜드 거버넌스
Unlayer	Unlayer	무료 ~ `$200/월`	SaaS 임베드 우선

10.2 Stripo

가장 친숙한 일반 사용자용 에디터. 자체 호스팅 / 다운로드 / 직접 ESP로 발송 모두 지원. 모듈 라이브러리(셔터스톡 이미지 통합 등)가 풍부.

10.3 BEE

원래는 MailUp이 만든 BEE Free 에디터에서 출발. 가장 큰 차별점은 임베디드 SDK — 자기 SaaS 안에 BEE 에디터를 통합할 수 있다. HubSpot, ClickFunnels 등 수많은 도구가 이걸 OEM으로 쓴다.

10.4 Stensul

엔터프라이즈 전용. 단순 에디터가 아니라 이메일 협업 워크플로(브랜드 가이드라인 강제, 승인 라우팅, 다국어 번역 워크플로)가 강점. 대형 금융 / 제약 / 통신사가 주 고객.

10.5 Unlayer

SaaS 임베드에 특화. react-email-editor 라는 React 컴포넌트로 자기 제품 안에 5분 만에 이메일 에디터를 박을 수 있다.

import EmailEditor from 'react-email-editor'

export default function Editor() {
  return (
    <EmailEditor
      projectId={12345}
      onLoad={(unlayer) => {
        // ready
      }}
      onReady={(unlayer) => {
        unlayer.exportHtml((data) => {
          console.log(data.html)
        })
      }}
    />
  )
}

(역시 위 JSX의 중괄호는 코드 블록 안.)

10.6 mosaico vs SaaS — 트레이드오프

SaaS — 즉시 사용, 좋은 템플릿 라이브러리, 그러나 월 비용 + 데이터 외부.
mosaico 셀프호스트 — 무료, 데이터 내부, 그러나 운영 비용 + UI 구식.

11장 · Email-Builder.js (Microsoft) / Tabular — 신예

11.1 Email-Builder.js

Microsoft가 2024년에 오픈소스로 공개한 React 기반 이메일 빌더 라이브러리. Outlook을 만드는 회사가 직접 만든 도구 라는 점에서 의미가 크다.

import { Reader } from '@usewaypoint/email-builder'

const document = {
  root: {
    type: 'EmailLayout',
    data: {
      backdropColor: '#F5F5F5',
      canvasColor: '#FFFFFF',
      children: ['block-1', 'block-2'],
    },
  },
  'block-1': {
    type: 'Heading',
    data: { props: { text: '환영합니다', level: 'h1' } },
  },
  'block-2': {
    type: 'Text',
    data: { props: { text: '가입을 축하합니다.' } },
  },
}

export default function Preview() {
  return <Reader document={document} rootBlockId="root" />
}

장점: Microsoft 측의 Outlook 호환성 보장 노력.
단점: 아직 생태계 작음. react-email만큼 커뮤니티 컴포넌트가 없다.

11.2 Tabular

2024년 출시된 신생 드래그앤드롭 SaaS. 차별점은 AI 우선 — GPT 같은 LLM으로 카피 / 이미지 / 레이아웃을 함께 생성한다. 인디 마케팅 팀에서 화제.

12장 · Litmus / Email on Acid — 테스트

12.1 두 도구의 역사

이메일 클라이언트는 100가지가 넘는데, 모두 실제로 띄워보지 않으면 어디서 깨지는지 모른다. Litmus와 Email on Acid는 그래서 등장했다.

Litmus — 2005년 영국에서 시작. 2022년 Cision에 인수.
Email on Acid — 2010년 콜로라도에서 시작. 2022년 AWeber 모회사 Volaris Group에 인수.

두 도구 모두 핵심 기능은 동일하다.

클라이언트 프리뷰 — 90 ~ 100여 개 클라이언트에서 어떻게 보이는지 스크린샷.
스팸 분석 — SpamAssassin, Microsoft 등의 필터에서 어떻게 평가받는지.
링크 / 이미지 체크 — 깨진 링크, 누락된 이미지.
접근성 검사 — alt 텍스트, 색 대비, 폰트 크기.
분석 / 트래킹 — 열림 / 클릭 분석.

12.2 어떻게 쓰나

전형적인 워크플로:

Maizzle / MJML / react-email로 HTML 생성.
Litmus / EoA에 업로드(직접 또는 ESP 통합).
클라이언트별 프리뷰 확인.
깨진 곳 수정 → 다시 업로드.
통과하면 ESP로 발송.

// Litmus API로 프리뷰 요청 (가상 예시)
import fetch from 'node-fetch'

const res = await fetch('https://api.litmus.com/v1/emails', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer ' + process.env.LITMUS_TOKEN,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    html: htmlSource,
    subject: '테스트',
    clients: ['outlook2021', 'gmail-web', 'ios-mail-17', 'samsung-mail'],
  }),
})

12.3 가격

2026년 기준 둘 다 비싸다. 시작 가격이 월 $99 정도이고, 본격 사용은 $199 ~ $400/월. 인디 개발자에게는 부담스러워서 대안으로 Mailtrap, HTML Email Check, PutsMail(Litmus의 무료 도구) 같은 것을 쓴다.

13장 · 다크 모드 + 접근성 + MIME multipart + AMP for Email

13.1 다크 모드 — Outlook의 새로운 지옥

2024년부터 모든 메이저 클라이언트가 다크 모드를 지원한다. 그런데 처리 방식이 셋으로 갈린다.

Apple Mail (iOS / macOS) — prefers-color-scheme: dark 미디어 쿼리를 진짜 따른다. 가장 깔끔.
Outlook 데스크톱 / 모바일 — 자기 마음대로 색 반전. 흰 배경을 검게 바꾸는데, 일부 색만 바꿔 회사 로고가 깨진다.
Gmail — 부분적으로 색 반전. 클라이언트와 OS 설정 조합에 따라 다름.

대응 패턴:

<head>
<style>
  /* 색상 스킴 메타 */
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .body-bg { background-color: #0f172a !important; }
    .text { color: #e2e8f0 !important; }
  }

  /* Outlook 강제 반전 막기 (작동은 클라이언트마다 다름) */
  [data-ogsc] .body-bg { background-color: #0f172a !important; }
  [data-ogsc] .text { color: #e2e8f0 !important; }
</style>
</head>

핵심은 로고 / 아이콘은 PNG가 아니라 SVG 또는 다크 / 라이트 두 버전을 준비 — 색이 반전돼도 깨지지 않게.

13.2 접근성 — WCAG의 이메일판

이메일에도 WCAG 2.2 AA가 적용된다. 핵심 체크리스트.

role="presentation" 을 모든 레이아웃용 table에 추가.
이미지의 alt 속성 필수. 장식용이면 alt="".
본문 색 대비 4.5:1 이상 — #666 on #fff는 안 된다.
본문 폰트 최소 14px, 가능하면 16px.
링크는 색만이 아니라 밑줄 로도 구분.
lang 속성 을 <html lang="ko"> 또는 <html lang="ja">로.
prefers-reduced-motion — GIF는 일시정지 옵션 없으면 자제.

<table role="presentation" aria-hidden="false">
  <tr>
    <td>
      <img src="logo.png" alt="Acme 로고" width="120" height="40" />
    </td>
  </tr>
</table>

13.3 MIME multipart — plain-text 의무

모든 마케팅 이메일은 사실상 multipart/alternative로 보내야 한다. 두 가지 이유.

plain-text가 없으면 스팸 점수가 올라간다 — SpamAssassin 등이 HTML-only를 의심.
Apple Watch, 텍스트 기반 클라이언트, 스크린리더 는 plain-text를 쓴다.

MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="boundary42"

--boundary42
Content-Type: text/plain; charset=utf-8

환영합니다.

가입을 축하합니다. 시작하려면 다음 링크를 열어주세요:
https://example.com/start

--boundary42
Content-Type: text/html; charset=utf-8

<html>...</html>
--boundary42--

react-email은 render(<Welcome />, { plainText: true }) 로, Maizzle은 juice 기반 변환으로 자동 생성한다.

13.4 AMP for Email — 거의 죽었지만 아직

Google이 2019년에 발표한 이메일 내 동적 콘텐츠 표준. 받은편지함 안에서 폼 제출 / 캐러셀 / 실시간 데이터 갱신을 한다는 꿈이었다.

<!-- AMP for Email -->
<!DOCTYPE html>
<html amp4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    .container { padding: 16px; }
  </style>
</head>
<body>
  <amp-form method="post" action-xhr="https://example.com/subscribe">
    <input type="email" name="email" required />
    <input type="submit" value="구독하기" />
  </amp-form>
</body>
</html>

2026년 현재 사실상 사망. 이유:

Gmail, Yahoo, Mail.ru만 지원 — Outlook, Apple Mail 미지원.
발신자 등록 절차가 까다로움 — Google에 별도 등록.
유지보수 비용이 보상보다 큼 — HTML 버전을 fallback으로 어차피 만들어야 한다.

도입했던 Booking.com, Pinterest 등도 2024년 즈음 대부분 철회했다. 새로 시작한다면 AMP는 무시하라.

14장 · AI in 이메일 — MJML AI, Maizzle AI?, ChatGPT 디자인

14.1 MJML AI

2024년 Mailjet이 발표한 도구. 자연어로 "환영 이메일, 파란 톤, CTA 버튼 하나" 같이 입력하면 MJML 코드를 만들어 준다.

[입력]
가입 환영 이메일을 만들어줘. 파란 톤, 상단에 회사 로고, 인사말, CTA "시작하기" 버튼, 하단에 SNS 링크.

[출력]
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="logo.png" width="120px" />
      </mj-column>
    </mj-section>
    ...
  </mj-body>
</mjml>

품질은 평균 이상. 다만 디자인이 약간 평범해서, 최종 다듬기는 사람 몫.

14.2 Maizzle / react-email + ChatGPT

별도 도구 없이도 ChatGPT / Claude에 "Maizzle 컴포넌트로 ~을 짜줘" 라고 던지면 결과가 잘 나온다. 2026년 LLM의 이메일 마크업 이해도가 충분히 좋다.

핵심 프롬프트 팁:

Outlook 호환 명시 — "Outlook 데스크톱(Word 엔진) 호환되게"
table 기반 명시 — "Flexbox 쓰지 말고 table 기반으로"
반응형 명시 — "모바일 폭 480px 미만에서 한 컬럼"
다크 모드 명시 — "다크 모드 미디어 쿼리 포함"

14.3 Tabular의 AI 통합

Tabular는 "이메일 본문을 LLM이 자동 생성"을 1급 기능으로 둔다. 마케팅 팀이 브랜드 톤만 정해 두면, 매주의 뉴스레터 본문을 자동 작성하는 흐름. 2026년 인디 마케팅 팀에서 빠르게 채택 중.

15장 · 한국 · 일본 — 토스, 카카오, 메르카리, クックパッド

15.1 한국

토스 이메일 — 토스의 트랜잭셔널 / 마케팅 이메일은 자체 인프라(SES 기반으로 추정)로 발송. 디자인은 토스 디자인 시스템과 일관성을 유지하며, react-email 스타일의 컴포넌트 기반으로 보임. plain-text 버전이 항상 동봉되어 있다.
카카오 이메일 마케팅 — 카카오는 비즈메시지(카카오톡 알림톡) 비중이 압도적이라 이메일 비중은 작다. 그러나 카카오엔터프라이즈, 카카오웍스 같은 B2B는 여전히 이메일 중심. 자체 템플릿 시스템 운영.
네이버 메일 수신 측면 — 네이버는 한국에서 압도적 점유율. SPF / DKIM / DMARC가 안 맞으면 가차없이 스팸으로 보낸다. 또한 HTML-only 메일에 페널티가 크다. plain-text 필수.

15.2 일본

메르카리(Mercari) 이메일 — 메르카리는 1억 회원 규모로 이메일 발송량이 거대. SendGrid를 주력으로 쓰는 것으로 알려져 있다(과거 사례 발표). 템플릿은 자체 디자인 시스템 위에 MJML 또는 유사 컴포넌트로 보임.
クックパッド(쿡패드) — 레시피 서비스. 매일의 추천 레시피 메일이 핵심 채널. 다국어(JA / EN / ES / AR) 지원이 잘 정리되어 있다.
일본의 휴대전화 캐리어 메일 — docomo.ne.jp, softbank.ne.jp, ezweb.ne.jp 같은 캐리어 메일은 여전히 일부 사용자가 쓴다. iモード 잔재 로 HTML 처리가 까다롭고, 이미지 크기 / 본문 길이 제한이 있다. 일본 시장만의 특수성.

15.3 한국 / 일본 공통 — 검수 / 발송 시간

검수가 보수적 — 마케팅 본문은 법무 / 컴플라이언스 검수를 거치는 비율이 미국보다 높다. 이 때문에 Postmark / Stensul처럼 협업 워크플로가 잘 된 도구가 환영받는다.
발송 시간 — 한국 / 일본은 평일 오전 9시 ~ 10시 발송이 열람률이 가장 높다(2025년 SendGrid 리포트).

16장 · 도구 선택 가이드 — 2026년 5월 기준

상황별 추천.

인디 스타트업 / Next.js / Resend — react-email + Resend. 의심 여지 없음.
Tailwind 팀 / Vue·Vanilla — Maizzle.
PHP / Ruby / Go 백엔드 — MJML CLI + 자체 변수 치환.
마케팅 팀이 직접 편집 — Postmark Templates 또는 Stripo / BEE.
대기업 / 거버넌스 필요 — Stensul 또는 Salesforce Marketing Cloud Email Studio.
OEM / SaaS 임베드 — Unlayer(react-email-editor) 또는 BEE SDK.
AI 기반 자동화 실험 — Tabular.
Outlook 호환성 보장이 최우선 — Email-Builder.js (Microsoft).

테스트는 어느 경우든 Litmus 또는 Email on Acid. 인디면 무료 PutsMail로 일단 시작.

다크 모드 / 접근성 / MIME multipart는 모든 경우에 공통 필수. 그리고 AMP for Email은 무시해도 안전한 시점.

참고 · References

Maizzle 공식 — https://maizzle.com
MJML 공식 — https://mjml.io
react-email — https://react.email
Resend — https://resend.com
Postmark Templates — https://postmarkapp.com/email-templates
Foundation for Emails — https://get.foundation/emails.html
Cerberus (Ted Goas) — https://tedgoas.github.io/Cerberus/
HEML — https://heml.io
mosaico — https://mosaico.io
Stripo — https://stripo.email
BEE — https://beefree.io
Stensul — https://stensul.com
Unlayer — https://unlayer.com
Email-Builder.js (Microsoft) — https://github.com/usewaypoint/email-builder-js
Tabular — https://tabular.email
Litmus — https://litmus.com
Email on Acid — https://www.emailonacid.com
AMP for Email — https://amp.dev/about/email
Email Geeks Slack — https://email.geeks.chat
Really Good Emails (영감) — https://reallygoodemails.com

프롤로그 — 1998년의 table이 아직도 살아있다