이 가이드는 Discourse 사이트에서 보내는 모든 이메일의 외부 HTML 템플릿을 사용자 정의하고 스타일을 설정하는 방법을 설명합니다.
필요한 사용자 권한: 관리자
사이트에서 보내는 모든 이메일은 사용자 정의가 가능한 HTML 템플릿으로 감싸져 있습니다.
이 가이드에서는 다음 내용을 다룹니다:
- 이메일 스타일 사용자 정의 섹션에 액세스하는 방법
- HTML 템플릿 수정
- 사용자 정의 CSS 추가
- 이메일 템플릿 테스트
- 변경 사항 되돌리기
- 사용자 정의 템플릿 예시
- 다이제스트 이메일과의 상호작용
- 이메일 폰트 변경
이메일 스타일 사용자 정의에 액세스하기
- 관리자 사이드바의 이메일 섹션 아래 모양 페이지로 이동하거나,
/admin/customize/email_style경로로 직접 이동합니다. - HTML 및 CSS 두 개의 탭이 있는 편집기를 볼 수 있으며, 여기서 이메일 템플릿과 스타일을 수정할 수 있습니다.
HTML 템플릿 수정
HTML 탭의 기본 마크업에는 여러 개의 플레이스홀더가 포함되어 있습니다:
%{email_content}— 필수. 각 이메일의 콘텐츠가 삽입되는 위치입니다. 이 플레이스홀더를 제거해서는 안 됩니다.%{email_preview}— 스니펫을 표시하는 이메일 클라이언트를 위해 숨겨진 미리보기 텍스트를 삽입합니다.%{html_lang}— 사이트의 언어 코드를<html>태그에 삽입합니다.%{dark_mode_meta_tags}— 다크 모드 지원을 위한 메타 태그를 삽입합니다.%{dark_mode_styles}— 다크 모드 렌더링을 위한 CSS 스타일을 삽입합니다.
사용자 정의 템플릿을 만들 때 전체 호환성을 보장하려면 이러한 모든 플레이스홀더를 포함해야 합니다. 시작점으로 편집기를 처음 열 때 보이는 기본 템플릿을 참고할 수 있습니다.
%{email_content} 플레이스홀더를 대체하는 콘텐츠의 사용자 정의에 대한 정보는 특정 이메일 템플릿 사용자 정의 방법을 참고하세요.
사용자 정의 CSS 추가
이메일 스타일 편집기의 CSS 탭을 사용하여 템플릿에 인라인 스타일을 주입할 수 있습니다. 다음은 예시입니다:
-
템플릿의 HTML 요소에 CSS 클래스를 추가합니다:
<td class="my-outer-td"> </td> -
CSS 탭에서 해당 클래스에 대한 규칙을 생성합니다:
.my-outer-td { padding: 30px 0 30px 0; }
Discourse는 이메일을 보내기 전에 CSS 클래스를 실제 CSS 규칙으로 대체합니다. 원하는 모든 CSS 규칙을 여기에 추가할 수 있습니다.
이메일 템플릿 테스트
이메일 클라이언트마다 HTML을 다르게 해석할 수 있으므로 다양한 이메일 클라이언트에서 이메일 템플릿 변경 사항을 테스트하는 것이 중요합니다. 특히 중요한 변경 사항인 경우, 이메일 테스트 서비스를 사용하여 다른 클라이언트에서 이메일이 어떻게 보이는지 미리 확인해 보세요.
변경 사항 되돌리기
템플릿 사용자 정의를 되돌리려면:
- 재설정하려는 탭(HTML 또는 CSS)을 선택합니다.
- 편집기 아래에 있는 “기본값으로 재설정” 버튼을 클릭합니다.
이렇게 하면 해당 특정 섹션(HTML 또는 CSS)이 기본 Discourse 이메일 템플릿으로 재설정됩니다. 각 탭은 독립적으로 재설정됩니다.
사용자 정의 템플릿 예시
이메일 너비를 최대 600px로 제한하고 상단에 로고를 추가하는 기본 이메일 템플릿입니다:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 { font-family: Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url" alt="Your site name" width="150" height="40" style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;">
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
이미지의 src, alt, href 속성을 사이트의 특정 정보로 교체하는 것을 잊지 마세요.
다양한 화면 크기에서 보이는 모습
iPad Pro (10.5인치) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
다이제스트 이메일과의 상호작용
사용자 정의 템플릿으로 모든 이메일에 로고를 추가하는 경우, 다이제스트 이메일에 대해 두 가지 옵션이 있습니다:
-
기본 다이제스트 이메일 스타일을 사용하려면:
다이제스트에 사용자 정의 스타일 적용사이트 설정을 비활성화합니다.
-
모든 알림 이메일에서 일관된 스타일을 유지하려면:
다이제스트 로고사이트 설정으로 설정된 이미지를 제거합니다..../admin/customize/site_texts/user_notifications.digest.custom.html.header의 텍스트 사용자 정의에<span></span>을 추가합니다.
이메일 폰트 변경
이메일에서 폰트를 변경하려면:
-
최대 호환성을 위해 웹 안전 폰트를 사용하세요. Windows와 Mac에서 사용할 수 있는 폰트 목록은 CSS Font Stack을 참고하세요.
-
Discourse 이메일 템플릿에 폰트에 대한 CSS 규칙을 추가합니다.
-
HTML 요소에서 폰트를 직접 설정할 수 있습니다. 예를 들어:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
외부 서비스의 웹 폰트는 많은 이메일 클라이언트에서 지원되지 않는다는 점에 유의하세요.
추가 자료
HTML 이메일 생성에 대한 자세한 내용은 HTML 이메일 템플릿을 처음부터 구축하는 방법에 대한 이 포괄적인 가이드를 참고할 수 있습니다.
