diff --git a/skills/edm-email-html/SKILL.md b/skills/edm-email-html/SKILL.md new file mode 100644 index 0000000..893cb73 --- /dev/null +++ b/skills/edm-email-html/SKILL.md @@ -0,0 +1,310 @@ +--- +name: edm-email-html +description: | + EDM(이메일 다이렉트 마케팅) HTML을 구현하는 전체 워크플로우 스킬. + Figma 디자인 → HTML table 마크업 → 아웃룩 호환 → 검수까지 단계별 가이드를 제공합니다. + + 다음 상황에서 반드시 사용하세요: + - "EDM 만들어줘", "이메일 템플릿 구현", "뉴스레터 HTML" + - "아웃룩에서 깨지는 이메일 수정", "이메일 HTML 마크업" + - Figma 디자인을 받고 이메일 HTML로 변환할 때 + - "메일 발송용 HTML", "eDM 퍼블리싱", "HTML 이메일" + - 이메일 클라이언트 호환성 문제가 있을 때 +--- + +# EDM HTML 구현 가이드 + +이메일 HTML은 일반 웹과 다른 세계입니다. 2000년대 테이블 코딩이 아직도 정답이며, Flexbox와 Grid는 쓸 수 없습니다. 이 스킬은 Figma 디자인에서 시작해 모든 이메일 클라이언트에서 깨지지 않는 HTML을 만드는 과정을 안내합니다. + +## 워크플로우 + +``` +1. Figma 디자인 파악 → 2. HTML 마크업 → 3. 아웃룩 호환 → 4. 검수 +``` + +--- + +## Phase 1: Figma 디자인 파악 + +### Figma MCP 사용 가능 시 +Claude Code에 Figma MCP가 설정되어 있다면 Figma URL로 직접 디자인 데이터를 읽을 수 있습니다. MCP가 연결되어 있는지 먼저 확인하고, 가능하다면 자동 추출을 시도하세요. + +추출 가능한 속성: +- 컬러 HEX값 (RGBA → HEX 자동 변환) +- 폰트 패밀리, 사이즈(px), 굵기, 줄간격 +- 레이아웃 치수: 너비, 높이, padding, 섹션 간격 +- 이미지 에셋 URL (CDN 업로드 필요) +- CTA 링크 (레이어 설명 필드에서 추출) + +### Figma MCP 없이 진행 시 +사용자에게 다음 정보를 요청하거나 스크린샷으로 파악하세요. + +**필수 확인 항목:** +- 전체 이메일 너비 (권장: **600px**) +- 각 섹션 배경색, 텍스트 색상 (HEX) +- 폰트: 패밀리, 사이즈(px), 굵기, 줄간격 +- 이미지: 가로×세로(px) +- 여백: 섹션 간 간격, 좌우 패딩 +- CTA 버튼: 크기, 색상, 텍스트, 링크 URL +- 푸터: 회사 정보, 수신거부 링크 + +--- + +## Phase 2: HTML table 마크업 + +### 절대 원칙 + +이메일 HTML에서 반드시 지켜야 하는 규칙들입니다. 이 규칙을 어기면 특정 클라이언트에서 레이아웃이 무너집니다: + +| 규칙 | 이유 | +|------|------| +| `table`, `tr`, `td`만 레이아웃에 사용 | div는 Outlook 등에서 무시됨 | +| inline CSS 우선 | Gmail이 `` style 태그를 제거함 | +| `width`/`height` 속성 필수 | CSS만으론 Outlook이 무시함 | +| `margin` 사용 금지 | 빈 ``행이나 `padding`으로 대체 | +| `padding` 개별 속성 사용 | 단축 속성(`padding: 10px 20px`)은 일부 클라이언트 미지원 | +| 모든 ``에 `cellpadding="0" cellspacing="0" border="0"` | 브라우저 기본 스타일 초기화 | + +### 기본 템플릿 + +```html + + + + + + + + 이메일 제목 + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +

+ 회사명 | 주소
+ + 수신거부 + +

+
+
+ + + +``` + +### 안전한 폰트 + +웹폰트(`@font-face`, Google Fonts)는 대부분의 이메일 클라이언트에서 지원하지 않습니다. Pretendard, Noto Sans KR 같은 폰트를 Figma에서 사용했어도 이메일에서는 안전 폰트로 대체해야 합니다. + +```css +/* 권장 스택 (한국어 이메일) */ +font-family: -apple-system, Arial, 'Helvetica Neue', Helvetica, sans-serif; + +/* Outlook 전용 (MSO 조건부 주석 내) */ +font-family: Arial, sans-serif; +``` + +--- + +## Phase 3: 아웃룩 호환성 + +아웃룩 2007~2019는 Word 엔진으로 이메일을 렌더링해서 현대 CSS를 거의 무시합니다. MSO 조건부 주석으로 아웃룩과 그 외 클라이언트를 분리해서 처리하세요. + +### MSO 조건부 주석 + +```html + + + + + + +``` + +### 아웃룩이 무시하는 주요 속성 + +| CSS 속성 | 아웃룩 동작 | 대체 방법 | +|----------|-----------|---------| +| `background-image` | 미지원 | `` 태그 직접 사용 | +| `border-radius` | 무시 | VML 사용 또는 이미지 버튼 | +| `margin` | 무시 | `padding` 또는 빈 `` 행 | +| `box-shadow` | 무시 | 포기 또는 이미지로 대체 | +| `@media query` | 2007/2010 미지원 | 테이블 고정폭으로 데스크톱 설계 | + +### VML 버튼 (반드시 사용) + +아웃룩에서 CSS 버튼은 배경색 없는 텍스트 링크로 표시됩니다. CTA 버튼은 항상 VML을 포함하세요: + +```html +
+ + + + + + 지금 확인하기 + + + +
+``` + +### 이미지 처리 + +이미지 차단 시에도 레이아웃이 깨지지 않도록 `alt` 텍스트와 배경색을 함께 지정하세요: + +```html + + 7월 여름 세일 최대 50% 할인 + +``` + +이미지는 반드시 `https://` CDN 절대 경로를 사용하세요. 로컬 경로나 상대 경로는 이메일에서 작동하지 않습니다. + +--- + +## Phase 4: 검수 체크리스트 + +### 코드 구조 (필수) +- [ ] 모든 ``에 `cellpadding="0" cellspacing="0" border="0"` +- [ ] 모든 ``에 `width`, `height`, `alt` 속성 +- [ ] `margin` 미사용 (padding 또는 빈 `` 행으로 대체) +- [ ] `padding` 단축 속성 제거 (개별 속성 사용) +- [ ] CTA 버튼에 VML 코드 포함 +- [ ] 이미지 `src`가 HTTPS 절대 URL + +### 콘텐츠 (필수) +- [ ] 푸터에 수신거부 링크 포함 +- [ ] 모든 링크 href 유효성 확인 +- [ ] 이미지 alt 텍스트 의미있게 작성 (장식용이면 `alt=""`) + +### Figma 디자인 대비 검수 +- [ ] 전체 너비 600px +- [ ] 색상 HEX값 일치 +- [ ] 폰트 사이즈, 굵기 일치 +- [ ] 버튼 크기, 색상 일치 +- [ ] 섹션 간 여백 일치 + +### 테스트 도구 + +| 도구 | 용도 | 비용 | +|------|------|------| +| [Litmus](https://www.litmus.com) | 100+ 클라이언트 렌더링 미리보기 | 유료 | +| [Email on Acid](https://www.emailonacid.com) | 크로스 클라이언트 + 접근성 감사 | 유료 | +| [Mailtrap](https://mailtrap.io) | 개발 환경 샌드박스, 스팸 점수 | 무료 플랜 | +| [SpamTest.io](https://spamtest.io/) | 스팸 점수, SPF/DKIM/DMARC 확인 | 무료 | + +**최소 테스트 클라이언트:** Gmail 웹, Outlook (Windows), Apple Mail, 모바일 Gmail + +--- + +## 2컬럼 레이아웃 예시 + +```html + +
+ + + + +
+ + + +
+``` + +--- + +## 참고 자료 + +상세 내용은 references 폴더를 참조하세요: +- `references/html-patterns.md` — 헤더/푸터/버튼/이미지 완성 코드 패턴 +- `references/verification-checklist.md` — 전체 검수 체크리스트 (시각적/기능/스팸) diff --git a/skills/edm-email-html/assets/example_asset.txt b/skills/edm-email-html/assets/example_asset.txt new file mode 100644 index 0000000..d0ac204 --- /dev/null +++ b/skills/edm-email-html/assets/example_asset.txt @@ -0,0 +1,24 @@ +# Example Asset File + +This placeholder represents where asset files would be stored. +Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed. + +Asset files are NOT intended to be loaded into context, but rather used within +the output Claude produces. + +Example asset files from other skills: +- Brand guidelines: logo.png, slides_template.pptx +- Frontend builder: hello-world/ directory with HTML/React boilerplate +- Typography: custom-font.ttf, font-family.woff2 +- Data: sample_data.csv, test_dataset.json + +## Common Asset Types + +- Templates: .pptx, .docx, boilerplate directories +- Images: .png, .jpg, .svg, .gif +- Fonts: .ttf, .otf, .woff, .woff2 +- Boilerplate code: Project directories, starter files +- Icons: .ico, .svg +- Data files: .csv, .json, .xml, .yaml + +Note: This is a text placeholder. Actual assets can be any file type. diff --git a/skills/edm-email-html/references/api_reference.md b/skills/edm-email-html/references/api_reference.md new file mode 100644 index 0000000..a85b6f2 --- /dev/null +++ b/skills/edm-email-html/references/api_reference.md @@ -0,0 +1,34 @@ +# Reference Documentation for Edm Email Html + +This is a placeholder for detailed reference documentation. +Replace with actual reference content or delete if not needed. + +Example real reference docs from other skills: +- product-management/references/communication.md - Comprehensive guide for status updates +- product-management/references/context_building.md - Deep-dive on gathering context +- bigquery/references/ - API references and query examples + +## When Reference Docs Are Useful + +Reference docs are ideal for: +- Comprehensive API documentation +- Detailed workflow guides +- Complex multi-step processes +- Information too lengthy for main SKILL.md +- Content that's only needed for specific use cases + +## Structure Suggestions + +### API Reference Example +- Overview +- Authentication +- Endpoints with examples +- Error codes +- Rate limits + +### Workflow Guide Example +- Prerequisites +- Step-by-step instructions +- Common patterns +- Troubleshooting +- Best practices diff --git a/skills/edm-email-html/references/html-patterns.md b/skills/edm-email-html/references/html-patterns.md new file mode 100644 index 0000000..fad7973 --- /dev/null +++ b/skills/edm-email-html/references/html-patterns.md @@ -0,0 +1,327 @@ +# EDM HTML 코드 패턴 모음 + +--- + +## 1컬럼 레이아웃 (전체 템플릿) + +```html + + + + + + + + 이메일 제목 + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ 회사 로고 +
+ 이벤트 배너 +
+

+ 이메일 제목이 여기 들어갑니다 +

+

+ 본문 내용이 여기 들어갑니다. 가독성을 위해 line-height를 + 1.5 이상으로 설정하는 것이 좋습니다. +

+ + + +
+

+ 회사명 | 서울시 강남구 테헤란로 123 +

+

+ + 수신거부 + +  |  + + 개인정보처리방침 + +

+
+
+ + + +``` + +--- + +## 2컬럼 이미지 + 텍스트 + +```html + + + + + + + + + + + +
+ 상품명 +   +

+ 상품명 +

+

+ 상품 설명이 들어갑니다. 간결하게 핵심만 작성하세요. +

+

+ ₩29,900 +

+ + 구매하기 + +
+``` + +--- + +## 헤더 배너 (이미지 기반) + +이미지가 차단됐을 때도 배경색이 보이도록 `bgcolor` 속성을 함께 지정합니다: + +```html + + + + +
+ 여름 세일 최대 70% 할인 +
+``` + +--- + +## 섹션 구분선 + +```html + + +   + + + + + + + + + +
+
+ + +``` + +--- + +## 아웃라인(외곽선) 버튼 + +```html + + + + 더 알아보기 + + +``` + +--- + +## 소셜 아이콘 행 + +```html + + + + + + +
+ + Instagram + + + + Facebook + + + + YouTube + +
+``` diff --git a/skills/edm-email-html/scripts/example.py b/skills/edm-email-html/scripts/example.py new file mode 100755 index 0000000..c68af58 --- /dev/null +++ b/skills/edm-email-html/scripts/example.py @@ -0,0 +1,19 @@ +#!/usr/bin/env python3 +""" +Example helper script for edm-email-html + +This is a placeholder script that can be executed directly. +Replace with actual implementation or delete if not needed. + +Example real scripts from other skills: +- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields +- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images +""" + +def main(): + print("This is an example script for edm-email-html") + # TODO: Add actual script logic here + # This could be data processing, file conversion, API calls, etc. + +if __name__ == "__main__": + main()