이메일 뉴스레터
주제나 콘텐츠 브리프를 기반으로 완전한 HTML 이메일 뉴스레터를 작성하고 디자인합니다. 출력물은 Loops, Mailchimp, Beehiiv, Resend 또는 모든 표준 이메일 플랫폼에 바로 붙여넣을 수 있습니다.
중요 규칙: 인라인 스타일만 사용하는 테이블 기반 HTML만 허용합니다. CSS 클래스, flexbox, grid, <style> 블록은 사용하지 마세요. 모든 요소에는 직접 style=""을 적용해야 합니다. 이는 선택 사항이 아닙니다. 이메일 클라이언트는 그 외 모든 것을 제거합니다.
1단계: 브리프 수집
시작하려면 세 가지가 필요합니다. 메시지에 세 가지가 모두 포함되어 있으면 2단계로 건너뜁니다.
누락된 항목이 있으면 다음과 같이 정확히 질문하세요.
"시작하려면 세 가지가 필요합니다:
- 주제 -- 이 뉴스레터는 무엇에 관한 것인가요?
- 대상 -- 누가 읽나요? (직무, 회사 규모, 독자와의 관계)
- 주요 CTA -- 독자가 취하길 원하는 한 가지 행동은 무엇인가요?"
계속 진행하기 전에 세 가지를 모두 기다리세요.
2단계: 전체 수집
모든 질문을 한 메시지에 카테고리별로 그룹화하여 질문하세요. 사용자는 건너뛸 수 있습니다. 건너뛰면 기본값이 적용됩니다.
"초안을 작성하기 전에 몇 가지 질문이 있습니다. 아는 부분만 답변하고 나머지는 건너뛰세요:
콘텐츠
- 길이 -- 짧게(300단어, 임팩트 있게) / 표준(500-700단어) / 심층(800단어 이상)?
- 형식 -- 에디토리얼 기사 / 번호 매기기 분석 / 개인 이야기 / 데이터 보고서?
- 발행 맥락 -- 일회성 발송 / 주간 시리즈의 일부 / 월간 다이제스트?
- CTA URL -- 실제 링크는 무엇인가요? (또는 플레이스홀더를 사용하겠습니다)
브랜드 5. 회사/브랜드 이름 -- 헤더와 푸터용 6. 태그라인 -- 한 줄 설명 (선택 사항, 푸터용) 7. 도시 및 국가 -- 푸터용 (예: "서울, 대한민국") 8. 기본 브랜드 색상 -- 헥스 코드는 무엇인가요? (예: #856FE6) 9. 보조 악센트 -- 기본 노랑-초록(#D8F90A) 유지 / 브랜드 색상 사용 / 다른 색상?
디자인 10. 배경 -- 어두움(에디토리얼/SaaS) / 밝음(깔끔/기업) / 사용자 지정 헥스? 11. 표시 폰트 -- 에디토리얼 세리프(Instrument Serif) / 깔끔한 모던 산세리프 / 시스템 폰트만? 12. 버튼 스타일 -- 알약형(매우 둥글게) / 부드럽게 둥글게 / 날카로운 모서리? 13. 비주얼 스타일 -- 에디토리얼 / 기술+데이터 / 따뜻함+창업자 / 대담+캠페인?
플랫폼 및 기술 14. 플랫폼 -- Loops / Mailchimp / Beehiiv / Resend / 기타? 15. 톤 -- 교육적 / 대화체 / 대담+직설적 / 격식체 / 장난기? 16. 개인화 -- 없음 / 이름 / 이름 + 회사? 17. 제목줄 -- 가지고 계신가요? / 3가지 옵션을 원하시나요? 18. 보조 섹션 -- 스폰서 블록 / 제품 콜아웃 / 이벤트 / 빠른 링크 / 없음? 19. 일반 텍스트 버전 -- 예(권장) / 아니요?"
건너뛰었을 때의 기본값:
| 질문 | 기본값 |
|---|---|
| 길이 | 표준(500-700단어) |
| 형식 | 에디토리얼 기사 |
| 발행 맥락 | 일회성 발송 |
| CTA URL | [CTA_URL] 플레이스홀더 |
| 회사 이름 | [YOUR BRAND] 플레이스홀더 |
| 태그라인 | 없음 |
| 도시 및 국가 | [CITY, COUNTRY] 플레이스홀더 |
| 브랜드 색상 | 없음 (모든 악센트에 #D8F90A 사용) |
| 보조 악센트 | #D8F90A (노랑-초록 기본값) |
| 배경 | 어두움 |
| 표시 폰트 | Instrument Serif (에디토리얼 세리프) |
| 버튼 스타일 | 알약형 |
| 비주얼 스타일 | 에디토리얼 |
| 플랫폼 | 일반 |
| 톤 | 대화체 |
| 개인화 | 없음 |
| 제목줄 | 3가지 옵션 생성 |
| 보조 섹션 | 없음 |
| 일반 텍스트 | 예 |
2.5단계: 디자인 방향 (내부용 -- 사용자에게 표시되지 않음)
2단계 답변에서 다음을 결정합니다:
- 비주얼 특성 (질문 13에서 결정하거나, 건너뛴 경우 톤과 형식에서 유추)
- 하나의 놓칠 수 없는 요소 -- 3단계 전에 식별
- 템플릿 경로 (5단계 참조)
질문 13을 건너뛴 경우의 특성 기본값:
- 교육적 / 격식체 톤: 에디토리얼
- 지표 중심 콘텐츠 (통계, 벤치마크, 보고서): 기술/데이터 중심
- 제품 출시, 이벤트, 캠페인: 대담/캠페인
디자인 방향에 대해 사용자에게 별도로 묻지 마세요. 답변에서 유추하세요.
3단계: 구조 설계
섹션을 선택하기 전에 레이아웃 규칙을 위해 references/html-email-guide.md를 읽으세요.
주제, 대상, CTA 및 요청된 보조 섹션을 기반으로 다음 라이브러리에서 섹션을 선택하세요:
| 섹션 | 포함 조건 |
|---|---|
| header | 항상 -- 로고 플레이스홀더 + 발행 번호 또는 날짜 |
| hero | 항상 -- 큰 헤드라인 + 1-2문장 훅 |
| intro | 대화체 또는 교육적 톤 -- 짧은 개인적인 메모 |
| main-content | 주요 기사 또는 인사이트 (텍스트 중심) |
| stat-callout | 설득력 있는 통계, 인용문 또는 데이터 포인트가 있는 경우 |
| secondary-section | 보조 CTA가 요청된 경우 |
| product-cta | 브랜드 맥락이 있고 소프트 제품 홍보가 적합한 경우 |
| sponsor-block | 스폰서 섹션이 요청된 경우 |
| quick-links | 선별된 링크 섹션이 요청된 경우 |
| footer | 항상 -- 구독 취소 링크 + 회사 이름 |
선택한 구조를 섹션당 한 줄 목적으로 번호가 매겨진 목록으로 출력하세요:
제안된 구조:
1. Header -- 로고 + Issue #1 / [날짜]
2. Hero -- 헤드라인 + 훅 단락
3. Intro -- 짧은 개인적인 프레이밍
4. Main Content -- [주제] 분석
5. Stat Callout -- 스토리의 핵심 데이터 포인트
6. CTA -- [CTA 텍스트]
7. Footer -- 구독 취소 + 회사
이 구조가 적합한가요, 아니면 섹션을 조정해야 할까요?
4단계로 진행하기 전에 확인을 기다리세요.
4단계: 콘텐츠 초안
각 섹션의 카피를 순서대로 작성하세요. 아직 HTML은 없습니다. 깔끔한 산문만 작성하세요.
섹션별 규칙:
- Header: 발행 번호 + 날짜. 카피 불필요.
- Hero 헤드라인: 최대 8단어, 결과 중심, "나/우리/저희"로 시작 금지
- Hero 훅: 1-2문장, 문제 또는 호기심 격차, 독자를 끌어들이기
- Intro: 2-3문장, 개인적이거나 맥락적, 회사원 표현 금지, 축약형 사용 가능
- Main content: 250-400단어, 스캔 가능 -- 핵심 포인트는 굵은 글씨 사용, 짧은 단락(1-3줄), 긴 텍스트 블록 금지, 글머리 기호 과다 사용 금지
- Stat callout: 하나의 통계 또는 인용문, 최대 20단어, 임팩트 있게
- Product CTA: 2-3문장, 가치 중심, "저희 제품을 확인해보세요"가 아니라 그들에게 무엇이 바뀌는지 알려주기
- CTA 버튼 텍스트: 3-5단어, 행동 동사 + 혜택 ("전체 분석 읽기", "자리 예약하기", "가이드 받기")
- Footer: 구독 취소 링크 플레이스홀더 + 회사 이름
references/subject-line-formulas.md를 읽은 다음 (사용자가 제목줄을 제공하지 않은 경우) 3가지 제목줄 옵션을 작성하세요:
- 옵션 A: 호기심 격차 공식
- 옵션 B: 직접 혜택 공식
- 옵션 C: 숫자/목록 공식
엠 대시를 사용하지 마세요. 다음 단어를 사용하지 마세요: "powerful", "seamless", "game-changing", "leverage", "innovative", "unlock", "transform", "elevate", "cutting-edge", "robust".
5단계: HTML 생성
HTML을 생성하기 전에 references/design-system.md 및 references/html-email-guide.md를 읽으세요.
템플릿 또는 사용자 지정 -- 2단계 답변에 따라 결정:
다음 조건을 모두 충족하면 templates/dark-newsletter.html을 기본으로 사용:
- 배경 = 어두움 (또는 지정되지 않음)
- 표시 폰트 = Instrument Serif (또는 지정되지 않음)
- 사용자 지정 배경 헥스 코드가 제공되지 않음
다음 조건을 모두 충족하면 templates/light-newsletter.html을 기본으로 사용:
- 배경 = 밝음 OR 톤 = 격식체
- 표시 폰트 = Instrument Serif (또는 지정되지 않음)
- 사용자 지정 배경 헥스 코드가 제공되지 않음
다음 중 하나라도 해당하면 처음부터 사용자 지정 HTML 생성:
- 사용자 지정 배경 헥스 코드가 제공됨 (어두움, 흰색이 아님)
- 표시 폰트 = 모던 산세리프 또는 시스템 폰트만
- 답변 조합으로 인해 두 템플릿이 모두 제공하지 않는 디자인이 생성됨
사용자 지정 생성을 위한 경우: references/design-system.md 사용자 지정 생성 가이드를 전체 토큰 사양으로 사용하세요. 사용자의 배경/폰트/버튼/악센트 선택을 전체에 적용하세요.
그런 다음 (템플릿 경로의 경우):
- 템플릿에서 필요한 섹션만 선택 (3단계 구조 기반)
- 모든
[PLACEHOLDER]값을 4단계의 콘텐츠로 채우기 - 브랜드 색상 대체 적용 (아래 참조)
- 모든
[UNSUBSCRIBE_URL]플레이스홀더가 여전히 있는지 확인 (플랫폼 조정은 6단계에서 수행)
브랜드 색상 대체 규칙:
brand_color가 제공된 경우:
- 브랜드 스트립
bgcolor(height:2px행의#D8F90A)를 brand_color로 대체 - 통계 콜아웃 왼쪽 테두리 색상을 brand_color로 대체
- 카테고리 레이블 색상을 brand_color로 대체
- brand_color의 휘도가 높은 경우 (노랑, 초록, 주황 -- 대부분의 네온): 단계 배지
#D8F90A도 brand_color로 대체 - brand_color의 휘도가 낮은 경우 (짙은 남색, 포레스트, 차콜): 단계 배지와 CTA 버튼은
#D8F90A로 유지, brand_color는 스트립 + 통계 테두리에만 사용
brand_color가 제공되지 않은 경우: 모든 #D8F90A 값을 그대로 유지.
콘텐츠 대체 규칙 (2단계 답변 기준):
company_name이 제공된 경우: 모든[YOUR BRAND]및[COMPANY NAME]플레이스홀더 대체city_country가 제공된 경우:[CITY, COUNTRY]플레이스홀더 대체tagline이 제공된 경우: 푸터의 회사 이름 뒤에 부제목 줄로 추가cta_url이 제공된 경우: 모든[CTA_URL]플레이스홀더를 실제 URL로 대체personalization = first_name인 경우: 히어로 인사말에 플랫폼에 적합한 이름 변수 추가 -- 예: Beehiiv의 경우Hey %%first_name%%,, Loops의 경우Hey {{first_name}},, Mailchimp의 경우Hey *|FNAME|*,personalization = first_name + company인 경우: 맥락에 적합한 위치에 두 변수 모두 추가
브랜드 색상 시각적 긴장도 확인 (어두운 이메일에서):
브랜드 색상이 #111111 배경에서 시각적으로 돋보이나요? 정신적으로 테스트: 2px 스트립으로 보일까요?
- 채도가 높은 색상 (보라, 파랑, 청록, 분홍, 노랑, 주황, 초록): 예 -- 스트립 + 통계 테두리 + 카테고리 레이블에 사용
- 채도 낮음 / 거의 중성 (따뜻한 회색, 베이지, 오프 화이트): 스트립에만 사용; 카테고리 레이블은
#555555로 되돌림 - 거의 검정 (약
#2A2A2A미만의 매우 어두운 남색, 포레스트, 차콜): 모든 악센트 사용에서 brand_color 건너뛰고 모든 요소에#D8F90A로 폴백
악센트 절제 규칙: brand_color는 최대 3곳에만 나타납니다: 브랜드 스트립, 통계 테두리, 카테고리 레이블. 본문 카피, 헤드라인, 버튼 배경 또는 섹션 배경에는 절대 사용하지 않습니다. 과도한 브랜딩은 프리미엄 느낌을 망칩니다.
CTA 버튼 텍스트 색상:
#D8F90A버튼 배경에서: 항상#0A0A0A텍스트 사용 (밝은 색상임)#111111버튼 배경 (노랑 콜아웃 카드 내부): 항상#F2F2F2텍스트 사용- brand_color 버튼에서: 브랜드가 밝으면
#0A0A0A사용, 브랜드가 어두우면#FFFFFF사용
배경색이 있는 모든 <td>에 필요한 사항:
HTML 속성 bgcolor= AND 인라인 background-color: 스타일 모두. 예:
<td bgcolor="#D8F90A" style="background-color:#D8F90A;">
속성은 Outlook을 처리합니다. 스타일은 그 외 모든 것을 처리합니다. 둘 중 하나만 사용하지 마세요.
디자인 우수성 (프론트엔드 디자인 원칙, 이메일에 맞게 조정):
이메일의 테이블 제약이 디자인 야망을 제한하지 않습니다. 그 안에서 밀어붙이세요:
-
타이포그래피를 극한으로: 4-5단어 헤드라인 = 60px,
-0.04em자간. 6-7단어 헤드라인 = 56px,-0.03em. 8단어 = 48px. 안전을 위해 절대 크기를 줄이지 마세요. 헤드라인은 포스터이지 레이블이 아닙니다. 통계 인용문의 Instrument Serif 이탤릭체는 다른 어떤 요소도 따라올 수 없는 문학적 무게를 더합니다. -
밀도 대비를 장인 정신의 신호로: Hero = 최대 열린 공간 (상단 64px). 본문 단락 = 촘촘하고 빽빽하게. CTA 콜아웃 카드 = 다시 최대 열린 공간 (64px). 열림 → 닫힘 → 열림은 의도적인 디자인으로 읽히는 리듬이며, 템플릿 출력이 아닙니다.
-
섹션 교대를 통한 배경 깊이 (모두 이메일 안전):
- Header:
#0A0A0A - Hero:
#111111 - 통계 콜아웃 외부:
#111111, 내부 상승 카드:#1A1A1A - 본문 단락:
#161616(미묘한 높이감이 색상 없이 깊이를 만듦) - 단계 카드:
#111111(본문과 대비) - CTA 콜아웃 카드:
#D8F90A(유일한 밝은 요소 -- 절대 희석하지 마세요) - Footer:
#080808
- Header:
-
악센트 희소성 = 고급스러움: 어두운 바다 속 하나의 노랑 콜아웃 카드는 프리미엄으로 읽힙니다. 여섯 군데에 노랑이 나타나면 싸보입니다. CTA 카드의 힘은 전적으로 어두운 이메일에서 유일한 밝은 요소라는 사실에서 비롯됩니다.
-
잊을 수 없는 테스트: 저장하기 전에, 독자가 3시간 후에 동료에게 설명할 내용을 한 문장으로 말해보세요. 모호하다면 ("어둡고 깔끔했어요") -- 시각적 앵커가 충분히 강하지 않은 것입니다. 구체적으로 만드세요 ("큰 세리프 헤드라인이 있는 노란색 카드").
-
통계 콜아웃을 에디토리얼 풀 인용문으로: 4px 왼쪽 테두리 (3px 아님). 인용문 텍스트에 26px 이탤릭 Instrument Serif. 32px 내부 패딩. 이것은 이메일이 잡지 풀 인용문에 가장 가까워지는 순간입니다. 그렇게 취급하세요.
6단계: 플랫폼 조정
references/platform-compat.md를 읽고 플랫폼별 조정을 적용하세요:
| 플랫폼 | 작업 |
|---|---|
| Loops | [UNSUBSCRIBE_URL]을 {{unsubscribe_url}}로 대체. [FIRST_NAME] 참조를 {{first_name}}으로 대체 |
| Mailchimp | [UNSUBSCRIBE_URL]을 `* |
| Beehiiv | [UNSUBSCRIBE_URL]을 %%unsubscribe_url%%로 대체. [FIRST_NAME]을 %%first_name%%으로 대체 |
| Resend | [UNSUBSCRIBE_URL]을 {unsubscribeUrl}로 대체. 참고: React Email .tsx 출력은 요청 시 제공 가능 |
| 일반/기타 | [UNSUBSCRIBE_URL]을 <!-- 구독 취소 링크로 대체하세요 --> 주석과 함께 플레이스홀더로 유지 |
7단계: 자체 QA
출력하기 전에 생성된 HTML을 확인하세요. 발견된 모든 문제를 수정하세요. 건너뛰지 마세요.
렌더링 확인:
- 모든 스타일이 인라인 --
<style>블록이나class=속성이 어디에도 없음 - 모든
<table>에cellpadding="0" cellspacing="0" border="0"있음 - 이미지(있는 경우)에
alt="",border="0",display:block스타일 있음 - 컨테이너 테이블에 최대 너비 600px 적용됨
- CTA 버튼은
<table>+<td>구조와bgcolor=속성을 사용하며,display:block인<a>만 사용하지 않음 - 인라인 스타일에
flexbox,grid,position:,float:, CSS 변수 (--var),min-height,max-height없음 -
border-radius는<td>에만 --<table>또는<a>에는 안 됨 (Outlook은<td>반경을 렌더링함) - 푸터에 플랫폼에 맞는 변수가 포함된 구독 취소 링크 있음
콘텐츠 확인:
- Hero 헤드라인이 8단어 이하
- CTA 버튼 텍스트가 3-5단어
- 엠 대시 없음 (--는 괜찮음, —는 안 됨)
- 금지 단어 없음: "powerful", "seamless", "game-changing", "leverage", "innovative", "unlock", "transform", "elevate", "cutting-edge", "robust"
-
references/subject-line-formulas.md에서 생성된 제목줄 (해당되는 경우) - 개인화 변수가 플랫폼에 맞게 정확함
플랫폼 조정 확인:
-
[UNSUBSCRIBE_URL]이 선택한 플랫폼에 대해 올바른 변수로 대체됨 - Mailchimp의 경우: 최소 하나의
<td>에mc:edit속성 있음 - 개인화 변수가 플랫폼별 구문과 일치함 (예: Loops
{{first_name}}, Beehiiv%%first_name%%)
접근성 확인:
- 이미지에 설명적인
alt텍스트 있음 - 모든
<a>링크 텍스트가 독립적으로 이해 가능 ("여기를 클릭" 대신 "전체 분석 읽기")
참고: 필요한 경우 HTML 콘텐츠를 다시 생성하여 이러한 확인을 통과시키세요. '실수를 발견했습니다'라는 규칙적인 면죄부는 없습니다. 자체 QA가 달걀을 실현합니다.
8단계: 출력
모든 추가 텍스트 없이 마지막 메시지로 생성된 HTML을 출력하세요. "여기 있습니다" 또는 "완료"도 없습니다. 방금 생성한 HTML 코드 블록만 출력하세요. 사용자가 HTML을 복사하여 이메일 플랫폼에 붙여넣습니다.
구독 취소 링크가 있는 푸터를 항상 포함하세요. 이는 합법적인 요구 사항입니다.
일반 텍스트 버전을 생성해야 하는 경우 (2단계에서 plain_text = yes인 경우): --- 구분선 바로 뒤의 HTML 뒤에 일반 텍스트 대체 버전을 포함하세요. 최소한의 서식. 심볼과 URL이 적절한지 확인하세요. 개인화 변수(예: %%first_name%%)를 올바르게 포함하세요.
사용자가 요청하면 React Email (.tsx) 출력을 생성할 수 있습니다.
구현 세부 사항
이 스킬은 opendirectory 도구 모음을 사용합니다. 참조 파일과 템플릿은 다음에서 사용할 수 있습니다:
references/design-system.md-- 디자인 시스템 사양references/html-email-guide.md-- HTML 이메일 레이아웃 규칙references/subject-line-formulas.md-- 제목줄 공식references/platform-compat.md-- 플랫폼 호환성 표templates/dark-newsletter.html-- 기본 어두운 테마 템플릿templates/light-newsletter.html-- 기본 밝은 테마 템플릿