HTML email은 이메일 클라이언트에서 살아남는 이메일을 빌드합니다. 고대 렌더러가 필요로 하는 테이블 구조와 인라인 스타일 마크업을, 이메일 클라이언트 너비로 검사하고 발송 준비 상태로 내보냅니다. 모던 CSS가 죽으러 가는 형식을 위한 템플릿입니다.
이메일 실행이 만드는 것
캠페인처럼 브리프하세요. "새 등급 런칭 이메일: 헤드라인, 기능 세 개, 버튼 하나, 푸터" 같이요. 그러면 에이전트가 이메일을 빌드합니다. 헤더, 본문 블록, 콜 투 액션, 푸터를 전부 클라이언트 안전 마크업으로요. 결과는 이메일 뷰어에서 열립니다. 이메일 클라이언트 너비의 메시지, 렌더될 그대로입니다.
이메일 클라이언트는 브라우저가 아닙니다. Outlook은 여전히 Word HTML을 렌더하고, Gmail은 긴 이메일을 자르고, 다크 모드는 설정하지 않은 색을 반전시킵니다. 템플릿은 그 현실을 위해 빌드합니다. flexbox보다 테이블, 스타일시트보다 인라인 스타일, 기능보다 폴백요.
HTML email · Devin · e2e · gate PASS
The Launch Email — The announcement email for this very product — one clear CTA, inlined tables, dark-mode safe.
▸ the prompt that made it▾ the prompt that made it
“Design an HTML email: a launch announcement for a desktop design tool — one clear CTA.”
클라이언트 너비 검사
뷰어는 실제 클라이언트가 쓰는 너비로 메시지를 보여줍니다. 좁은 받은 편지함 창, 모바일 메일 앱처럼요. 디자인이 실제로 읽히는 크기로 읽힙니다. 게이트는 이메일 규칙을 검사합니다. 이미지 폴백, 테이블 구조, 안전한 폰트요.
이메일 스티어링
다른 결과와 같은 스티어링입니다.
- 블록을 ⌥-click해 정확한 부분에 댓글("버튼이 더 무겁게 느껴져야 해")
- 구조에는 후속 지시("푸터 아래에 PS를 추가해줘")
- 파라미터 — 강조 색, 밀도, 이미지 크기 — 에는 Tweaks
- 버전 — 한 시도는 히어로 이미지, 한 시도는 텍스트 중심
강점
- 런칭과 캠페인 이메일 — 제대로 보여야 하는 공지
- 뉴스레터 — 모든 클라이언트에서 읽히는 반복 레이아웃
- 트랜잭션 디자인 — 브랜드를 전달하는 영수증과 환영 메일
- 이메일 템플릿 — 캠페인 시리즈의 베이스
내보내기
이메일은 HTML로 내보냅니다. 발송 도구에 바로 붙여넣을 클라이언트 안전 마크업과, 비주얼 확인이나 디자인 문서용 PNG입니다. 파일은 다음 캠페인이나 다음 시도를 위해 프로젝트에 남습니다.
Tip: 템플릿이 강제하더라도 브리프에 "client-safe"라고 쓰세요. 후속 지시가 어차피 Outlook 렌더러가 제거할 모던 CSS로 되돌아가는 것을 막아줍니다.