개요
HTML 에디터를 사용하면 자체 HTML을 사용하여 완전히 사용자 지정된 브랜드 이메일을 보낼 수 있습니다. 다음과 같은 경우에 HTML 에디터를 사용해야 합니다:- 레이아웃, 간격, 스타일링을 완전히 제어해야 하는 경우
- 이미 프로덕션 준비가 완료된 HTML 이메일 템플릿이 있는 경우
- 이메일 클라이언트 제한 사항 내에서 작업하는 것에 익숙한 경우
HTML 이메일은 웹 페이지와 다릅니다. 많은 HTML 및 CSS 기능이 이메일 클라이언트 간에 지원되지 않거나 일관되지 않게 렌더링됩니다.
전제 조건
HTML 에디터를 사용하기 전에 다음을 확인하세요:- 반응형 HTML 이메일 구축 경험이 있는지 확인
- 모든 이미지를 공개적으로 액세스 가능한 URL(사이트, CDN, S3 등)에서 호스팅
예상 결과
설정 후 이메일은:- 주요 클라이언트(Gmail, Outlook, Apple Mail)에서 일관되게 렌더링됨
- 링크 클릭을 올바르게 추적함
- 작동하는 구독 취소 메커니즘이 포함됨
- 스팸 및 전달 가능성 검사를 통과함
자체 템플릿 가져오기
이미 HTML 이메일 템플릿이 있는 경우 다음 방법 중 하나로 OneSignal에 추가할 수 있습니다:- 이메일 템플릿 전달 사용
- Create Template API를 사용하여 프로그래밍 방식으로 템플릿 생성
- HTML을 HTML 에디터에 복사 및 붙여넣기
처음부터 HTML을 작성하는 것보다 검증된 템플릿으로 시작하는 것을 권장합니다.
HTML 에디터 사용
이메일 메시지를 만들 때 편집기 유형으로 HTML 에디터를 선택합니다.- 에디터에 HTML을 붙여넣거나 작성합니다.
- 테스트 이메일 보내기를 사용하여 클라이언트와 기기 간 렌더링을 미리 봅니다.
- 예약하거나 보내기 전에 레이아웃 문제를 수정합니다.
링크 및 추적
HTML 이메일에서는 링크 추적이 기본적으로 활성화됩니다.- 다중 링크 추적이 지원됩니다
- 클릭이 메시지 보고서에 표시됩니다
구독 취소 링크
모든 마케팅 이메일에는 구독 취소 링크가 포함되어야 합니다. 유효한 구독 취소 옵션이 없는 이메일은 다음 가능성이 높습니다:- 스팸으로 표시됨
- 발신자 평판 손상
- 받은 편지함 제공자에 의해 차단됨
- OneSignal의 기본 구독 취소 링크
- 사용자 지정 구독 취소 페이지 사용(선택 사항)
HTML 이메일 모범 사례
항상 인라인 CSS 사용
대부분의 이메일 클라이언트는<style> 블록과 외부 스타일시트를 제거합니다.
이 도구를 사용해 보세요: Responsive Email CSS Inliner
다크 모드 스타일링
많은 이메일 클라이언트는 사용자가 다크 모드를 활성화한 경우 자동 색상 반전을 적용합니다. 이 동작은 검은색 배경과 검은색 텍스트가 있는 버튼과 같이 예측할 수 없는 결과를 초래할 수 있습니다. 일관된 렌더링을 보장하려면 라이트 모드와 다크 모드 모두에서 이메일이 어떻게 보여야 하는지 명시적으로 정의하는 것이 좋습니다. 모범 사례:- 인라인으로 기본 스타일을 정의하세요. 기본값이나 투명도에 의존하는 대신 항상 요소에 직접 배경 및 텍스트 색상을 설정하세요.
- 다크 모드에 미디어 쿼리를 사용하세요. Apple Mail 및 iOS의 Outlook과 같은 클라이언트는 다크 모드에 대한 스타일을 재정의할 수 있는
@media (prefers-color-scheme: dark)를 지원합니다. !important를 신중하게 적용하세요. 다크 모드 재정의에!important를 추가하면 받은 편지함이 사용자 지정 스타일 위에 반전 규칙을 쌓는 것을 방지하는 데 도움이 됩니다.- 테마 지원을 신호하세요. 자동 반전을 줄이기 위해 HTML head에 다음 메타 태그를 포함하세요:
클라이언트 전체에서 테스트하세요. Gmail(iOS, Android, 웹), Outlook 및 Apple Mail은 모두 다르게 동작합니다. 테스트는 문제를 조기에 발견하는 데 도움이 됩니다.
이메일용 권장 이미지 크기
종횡비:- 헤더/배너 이미지:
3:1또는4:1(예:600×200또는600×150) - 히어로 이미지:
16:9또는2:1(예:600×338또는600×300) - 정사각형 이미지:
1:1(예:300×300) — 제품 그리드에 적합 - 썸네일:
1:1또는4:3 - 최대 너비:
600–700px가 표준 (대부분의 이메일 클라이언트) - 레티나 디스플레이를 위해
2x로 디자인 (예:1200px너비,600px로 표시)
- 개별 이미지를
100–200KB미만으로 유지 - 총 이메일 크기(이미지 포함)를
1MB미만으로 유지 - 더 작은 크기 = 더 빠른 로드 시간 및 더 나은 전달 가능성
- JPG: 사진에 가장 적합
- PNG: 그래픽, 로고, 투명도에 가장 적합
- GIF: 간단한 애니메이션용 (파일 크기를 작게 유지)
- WebP: 이메일에서 아직 널리 지원되지 않음 — 피하세요
- 접근성을 위해, 이미지가 로드되지 않을 때를 위해 항상 alt 텍스트를 포함
- 스타일링에 인라인 CSS 사용 (많은 클라이언트가
<style>태그를 제거) - 배경 이미지 피하기 (일관되지 않은 지원)
- 클라이언트 간 테스트 (Gmail, Outlook, Apple Mail 모두 다르게 렌더링)
- Outlook은 종종 이미지 치수를 무시하므로 HTML에서 width와 height 속성을 모두 설정
이미지에 alt 태그 추가
Alt 텍스트는 접근성을 향상시키고 이미지가 차단되거나 로드에 실패하더라도 정보가 전달되도록 합니다.| 이메일 클라이언트 | 이미지 차단? | Alt 텍스트 표시 | Alt 텍스트 스타일 적용 |
|---|---|---|---|
| AOL | 예 | 예 | 예 |
| Gmail | 예 | 예 | 예 |
| Yahoo | 예 | 예 | 예 |
| Outlook | 때때로 | 예 | 예 |
HTML 이름 지정 및 형식 지정
접근성을 위해 의미론적 HTML과 의미 있는 태그 이름을 사용하세요. 이는 스크린 리더가 콘텐츠를 더 정확하게 해석하는 데 도움이 됩니다. 또한 유지 관리를 위해 표준 색상 형식과 적절한 들여쓰기를 사용하세요.끊어진 링크 확인
끊어진 링크는 전달 가능성을 감소시키고 이메일을 스팸으로 표시할 수 있습니다. 전송하기 전에 모든 링크를 철저히 테스트하세요.지원되는 HTML만 사용
이메일 클라이언트는 다음을 지원하지 않습니다:- JavaScript
<iframe>- HTML 폼
- 임베디드 오디오 또는 비디오
- Flash
- CSS 위치 지정 또는 레이어링 트릭
전송 전 검증
전송하기 전에 이메일을 다음으로 검증하세요:- 모든 링크 테스트
- 구독 취소 동작 확인
- Gmail, Outlook, Apple Mail로 테스트 이메일 발송
- 다크 모드 렌더링 확인
이메일이 주요 클라이언트에서 올바르게 렌더링되고 구독 취소가 작동하면 전송할 준비가 된 것입니다.