이메일 마케팅 스킬
단일 HTML 이메일을 제작합니다 — 중앙 정렬, 단일 열, 이메일 본문 주변에 크롬(테두리) 없음. 마케팅 산출물처럼 취급합니다: 하나의 큰 아이디어, 하나의 CTA.
워크플로우
- 활성 DESIGN.md를 읽습니다 (위에 삽입됨). 이메일은 다른 어떤 표면보다 디스플레이 폰트에 더 의존합니다 — DS에서 헤드라인 잠금 장치에 가장 눈에 띄는 타입 토큰을 선택합니다.
- 브리핑에서 브랜드 + 제품을 선택합니다. 실제 워드마크, 실제 제품명, 실제 혜택 문장 하나를 생성합니다 — 자리 표시자 사용 금지.
- 레이아웃, 순서대로, 모두 600–680px 열 안에 중앙 정렬, 페이지 배경은 틴트(연한 색)를 적용합니다 (이메일 본문이 페이지가 아닌 이메일처럼 보이도록):
- 머리말 — 왼쪽에 워드마크 + 오른쪽에 짧은 내비게이션 링크 3개(SHOP, JOURNAL, MEMBERS). 얇은 밑줄.
- 히어로 블록 — 16:9 비율의 제품 이미지 자리 표시자. DS 틴트 그라데이션 또는 브리핑이 암시하는 제품(신발, 병, 헤드폰 등)의 스타일화된 SVG 실루엣을 사용합니다. 왼쪽 상단에 작은 브랜드 스탬프, 왼쪽 하단에 컬러웨이 태그를 추가합니다.
- 눈썹 — 작은 대문자, 강조 색상,
·문자로 구분 (예: "NEW · MAX-CUSHION TRAINER · EMBER FLARE"). - 헤드라인 잠금 장치 — 디스플레이 폰트를 사용한 2~3줄 헤드라인, 모두 대문자, 매우 좁은 자간. 한 강조 단어에 약간의 기울임(
transform: skew(-6deg))을 적용하여 스포티한 평행사변형 느낌을 줍니다. - 본문 — 2~3문장 단락, 왼쪽 정렬, 본문 폰트.
- 기본 CTA — 단색 알약 또는 블록 버튼. 하나만.
- 사양 그리드 — 2×2 그리드 (큰 숫자 + 단위 + 레이블) 표시, 숫자에는 디스플레이 폰트 사용.
- 푸터 — 워드마크, 주소 줄, 구독 해제 + 브라우저에서 보기 링크.
- 단일 HTML 문서를 작성합니다:
<!doctype html>부터</html>까지, CSS는 인라인으로 작성.margin: 0 auto로 열을 중앙 정렬합니다.body { background: <틴트> }를 설정하여 페이지 위의 이메일이라는 은유가 읽히도록 합니다.- 외부 이미지 없음 — 제품 사진에는 인라인 SVG 또는 DS 틴트 그라데이션 블록을 사용합니다.
- 머리말, 히어로, 헤드라인, CTA, 사양에
data-od-id를 추가합니다.
- 자체 점검:
- 이메일은 위에서 아래로 8~10초 안에 읽힙니다.
- CTA는 하나. 강조는 최대 두 번(눈썹 + CTA 또는 헤드라인 단어).
- 480px 창에서 읽을 수 있습니다(열 재배치, 글꼴 크기 한 단계 축소).
출력 계약
<artifact> 태그 사이에 출력합니다:
<artifact identifier="email-slug" type="text/html" title="이메일 — 제목 행">
<!doctype html>
<html>...</html>
</artifact>
아티팩트 앞에 한 문장, 그 뒤에는 아무것도 없습니다.