LabHub

블로그

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

2026-05-16 · 36 분 읽기 · #email#html-email#maizzle#mjml#react-email#postmark#foundation-for-emails#cerberus#litmus#email-on-acid#heml#mosaico#stripo#bee#stensul#unlayer#tabular#amp-for-email#deep-dive

한국어English日本語

프롤로그 — 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 그대로
컴포넌트 DSLMJML, react-email, HEML, Foundation for Emails풀스택 엔지니어컴포넌트 추상화
서버사이드 템플릿Postmark, HubSpot, Sendgrid Dynamic Templates백엔드 + 마케팅변수 치환 / 다국어
드래그앤드롭 SaaSStripo, BEE, Stensul, Unlayer, mosaico, Email-Builder.js, Tabular마케팅 / 디자이너비개발자 가능

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

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

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

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

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

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

그래서 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은 빌드 시 다음을 한다.

  1. Tailwind 클래스를 인라인 스타일로 변환(style="...").
  2. <style> 블록에 못 들어가는 클래스는 인라인으로 넣는다.
  3. 미디어 쿼리는 <style> 블록에 남긴다(Outlook이 무시해도 OK).
  4. HTML을 minify한다.
  5. 옵션으로 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 강점

3.4 약점

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 무엇이 좋은가

import mjml2html from 'mjml'

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

4.3 약점

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 강점

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 약점

5.4 react-email vs MJML

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

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 강점

6.3 약점

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

6.4 비교 — SendGrid Dynamic Templates / HubSpot

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이 거의 모든 면에서 더 낫다. 하지만:

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

8장 · Cerberus 템플릿 (Ted Goas)

8.1 이게 뭔가

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

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

  1. cerberus-fluid.html — 한 컬럼, 모바일 우선.
  2. cerberus-responsive.html — 미디어 쿼리 기반 반응형.
  3. 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 왜 아직도 쓰나

이메일 시작하는 사람에게는 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가 만든 오픈소스 드래그앤드롭 에디터. 셀프호스트해서 마케팅 팀에 제공할 수 있다.

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

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

10.1 네 도구의 위치

도구모회사가격대 (2026)주 고객
StripoStripo (독립)무료 ~ $95/월중소 마케팅 팀
BEEBEE Content Design무료 ~ $150/월대기업, 임베드 SDK 강점
StensulStensul엔터프라이즈만대기업, 브랜드 거버넌스
UnlayerUnlayer무료 ~ $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 — 트레이드오프

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" />
}

11.2 Tabular

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

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

12.1 두 도구의 역사

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

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

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

12.2 어떻게 쓰나

전형적인 워크플로:

  1. Maizzle / MJML / react-email로 HTML 생성.
  2. Litmus / EoA에 업로드(직접 또는 ESP 통합).
  3. 클라이언트별 프리뷰 확인.
  4. 깨진 곳 수정 → 다시 업로드.
  5. 통과하면 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년부터 모든 메이저 클라이언트가 다크 모드를 지원한다. 그런데 처리 방식이 셋으로 갈린다.

  1. Apple Mail (iOS / macOS) — prefers-color-scheme: dark 미디어 쿼리를 진짜 따른다. 가장 깔끔.
  2. Outlook 데스크톱 / 모바일 — 자기 마음대로 색 반전. 흰 배경을 검게 바꾸는데, 일부 색만 바꿔 회사 로고가 깨진다.
  3. 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가 적용된다. 핵심 체크리스트.

<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로 보내야 한다. 두 가지 이유.

  1. plain-text가 없으면 스팸 점수가 올라간다 — SpamAssassin 등이 HTML-only를 의심.
  2. 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년 현재 사실상 사망. 이유:

도입했던 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의 이메일 마크업 이해도가 충분히 좋다.

핵심 프롬프트 팁:

14.3 Tabular의 AI 통합

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

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

15.1 한국

15.2 일본

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

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

상황별 추천.

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

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

참고 · References

원문 보기: https://www.youngju.dev/blog/culture/2026-05-16-html-email-development-2026-maizzle-mjml-react-email-postmark-foundation-emails-cerberus-deep-dive

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다