개요
OneSignal의 HTML 에디터를 사용하면 데스크톱과 모바일 모두에서 레이아웃과 디자인을 완벽하게 제어하여 고도로 스타일이 지정된 브랜드 이메일을 만들 수 있습니다. HTML 이메일 디자인을 최대한 활용하려면 다음을 권장합니다:- 귀하 또는 팀원이 다양한 클라이언트 및 기기에서 잘 렌더링되는 반응형 HTML 이메일 작성 경험이 있는지 확인하세요.
- 모든 이미지를 웹사이트, AWS 또는 기타 신뢰할 수 있는 호스팅 플랫폼과 같이 공개적으로 액세스할 수 있는 위치에 호스팅하세요.
자체 템플릿 가져오기
이미 이메일 템플릿이 있나요? 다음 옵션을 사용하여 OneSignal 앱에 추가할 수 있습니다:- 이메일 템플릿 전달
- Create Template API
- HTML을 HTML 에디터에 복사하여 붙여넣기
HTML 에디터 사용하기
메시지를 설정할 때 HTML Editor 옵션을 선택하세요. 왼쪽 패널에 HTML 코드를 입력하세요. Send Test Email 기능을 사용하여 모바일 및 데스크톱 클라이언트에서 이메일이 어떻게 렌더링되는지 확인할 수 있습니다.
미리보기 옆에 HTML 에디터를 보여주는 이미지
링크
링크 추적은 기본적으로 활성화되어 있습니다. 다중 링크 추적을 사용할 수 있습니다. 자세한 내용은 링크 및 딥 링킹을 참조하세요.구독 취소 링크
모든 마케팅 이메일에는 구독 취소 링크가 포함되어야 합니다. 구독 취소 링크가 없으면 이메일이 스팸으로 표시될 가능성이 높아집니다. 자세한 내용은 구독 취소 링크를 참조하세요. OneSignal은 사용할 때 사용자의 이메일 구독을 취소하는 기본 구독 취소 링크를 제공합니다. 원하는 경우 자체 사용자 지정 구독 취소 URL을 포함할 수도 있습니다. 이메일 구독을 올바르게 관리하는지 확인하세요(사용자 지정 구독 취소 페이지 만들기의 세부 정보). 다음을 통해 OneSignal의 기본[unsubscribe_url]을 이메일에 추가하세요:
모범 사례
HTML 이메일에 권장되는 설정:인라인 CSS 사용
많은 이메일 클라이언트는 임베드되거나 외부 스타일을 제거합니다. 일관된 렌더링을 보장하려면 항상 CSS를 인라인으로 사용하세요. 이 도구를 사용해 보세요: Responsive Email CSS Inliner다크 모드 스타일링
많은 이메일 클라이언트는 사용자가 다크 모드를 활성화한 경우 자동 색상 반전을 적용합니다. 이 동작은 검은색 배경과 검은색 텍스트가 있는 버튼과 같이 예측할 수 없는 결과를 초래할 수 있습니다. 일관된 렌더링을 보장하려면 라이트 모드와 다크 모드 모두에서 이메일이 어떻게 보여야 하는지 명시적으로 정의하는 것이 좋습니다. 모범 사례:- 인라인으로 기본 스타일을 정의하세요. 기본값이나 투명도에 의존하는 대신 항상 요소에 직접 배경 및 텍스트 색상을 설정하세요.
- 다크 모드에 미디어 쿼리를 사용하세요. Apple Mail 및 iOS의 Outlook과 같은 클라이언트는 다크 모드에 대한 스타일을 재정의할 수 있는
@media (prefers-color-scheme: dark)를 지원합니다. !important를 신중하게 적용하세요. 다크 모드 재정의에!important를 추가하면 받은 편지함이 사용자 지정 스타일 위에 반전 규칙을 쌓는 것을 방지하는 데 도움이 됩니다.- 테마 지원을 신호하세요. 자동 반전을 줄이기 위해 HTML head에 다음 메타 태그를 포함하세요:
클라이언트 전체에서 테스트하세요. Gmail(iOS, Android, 웹), Outlook 및 Apple Mail은 모두 다르게 동작합니다. 테스트는 문제를 조기에 발견하는 데 도움이 됩니다.
이미지에 alt 태그 추가
Alt 텍스트는 접근성을 향상시키고 이미지가 차단되거나 로드에 실패하더라도 정보가 전달되도록 합니다.| 이메일 클라이언트 | 이미지 차단? | Alt 텍스트 표시 | Alt 텍스트 스타일 적용 |
|---|---|---|---|
| AOL | 예 | 예 | 예 |
| Gmail | 예 | 예 | 예 |
| Yahoo | 예 | 예 | 예 |
| Outlook | 때때로 | 예 | 예 |
HTML 이름 지정 및 형식 지정
접근성을 위해 의미론적 HTML과 의미 있는 태그 이름을 사용하세요. 이는 스크린 리더가 콘텐츠를 더 정확하게 해석하는 데 도움이 됩니다. 또한 유지 관리를 위해 표준 색상 형식과 적절한 들여쓰기를 사용하세요.끊어진 링크 확인
끊어진 링크는 전달 가능성을 감소시키고 이메일을 스팸으로 표시할 수 있습니다. 전송하기 전에 모든 링크를 철저히 테스트하세요.지원되지 않는 HTML 방지
대부분의 이메일 클라이언트는 다음을 지원하지 않습니다:- JavaScript 또는 Flash
- 임베디드 오디오 또는 비디오
- HTML 폼
- Iframes
- 텍스트 레이어링