사용자에게 보내는 이메일 맞춤 설정 방법

작동 방식

사용자에게 전송한 다음 이메일의 외형과 내용을 사용자에 맞게 정의할 수 있습니다:

  • 계정 확인
  • 이메일 변경
  • 비밀번호 변경

이메일은 HTML 및 CSS를 사용하여 맞춤 설정됩니다.

Notice
이메일 맞춤 설정은 제품 라이선스 계약에 서명한 후에 사용할 수 있습니다. 서명하려면 게시자 계정계정으로 이동합니다.

사용자

이미 로그인을 통합하고 엑솔라 데이터베이스 혹은 사용자 정의 스토리지를 사용하는 파트너.

이메일 개발 권장 사항

이메일 애플리케이션은 이메일 개발용 통합 표준이 없습니다. 모든 애플리케이션은 자체적인 방식으로 이메일을 표시합니다. 다른 이메일 애플리케이션에서 이메일을 같게 보이게 하려면 간단하고 압축된 디자인을 생성하십시오.

일반 구조

JavaScript 및 CSS

JavaScript를 통해 이메일에 멀티미디어 콘텐츠를 추가할 수 없습니다. GIF 이미지를 사용하여 이메일에 애니메이션을 추가하십시오. 이메일에 동영상을 추가하려면 동영상 콘텐츠가 있는 URL로 연결되는 링크로 이미지를 사용하십시오.

모든 이메일 애플리케이션이 CSS3 기능 전체 목록을 지원하지는 않습니다. 이메일을 개발할 때 이를 유념해 주십시오.

인라인 스타일만 사용하십시오. 이메일 애플리케이션 대부분은 style 태그로 적힌 스타일을 배제합니다.

Copy
Full screen
Small screen
<div style="text-align: center;"></div>

독립 블록으로 개발

독립 블록을 통한 가장 안정한 이메일 개발 메소드를 사용하기를 권장합니다. 이 메소드가 제공하는 기능:

  • 장치에서 잘못 표시된 블록이 남은 블록에 영향을 주지 않습니다.
  • 기존 이메일의 블록을 조정할 수 있으며 결과를 빠르게 테스트할 수 있습니다.
  • 블록 컬렉션을 생성하고 다른 목적용 이메일을 빠르게 구성할 수 있습니다.

표 작업

이메일 애플리케이션은 블록 요소 및 position: absolute 속성과 올바르게 동작하지 않습니다. 블록이 있는 이메일을 빌드하려면 표 레이아웃을 사용하고 alignvalign 특성을 표 셀에 대해 지정합니다. 표가 다른 화면에 맞춰 효과적으로 조정됩니다.

colspanrowspan 특성을 통해 셀을 병합하지 않도록 합니다. 삽입된 표를 대신 사용합니다.

크기 및 사용된 단위

크고 작은 화면에서 스크롤 막대 없이 콘텐츠가 바르게 표시되게 하려면 콘텐츠가 있는 모든 컨테이너에 대해 다음을 설정합니다.

  • width: 100% 속성은 항상 지정해야 합니다.
  • 가장 큰 화면에 대한 너비 제한. 권장 너비는 800px를 넘어서는 안 됩니다. 이 값이 읽기에 가장 적합하기 때문입니다.

% 또는 emline-height 속성을 지정하지 마십시오. 모든 이메일 애플리케이션 및 다른 화면에서 이메일을 같게 보이게 하려면 픽셀만 사용하십시오.

글꼴 작업

표준 글꼴을 사용합니다. 이메일 애플리케이션 대부분은 외부 글꼴을 지원하지 않습니다.

표준 글꼴:

  • 셰리프 있음: Courier, Courier New, Georgia, Times, Times New Roman
  • 셰리프 없음: Arial, Black, Tahoma, Verdana, Trebuchet MS

프리헤더

이메일 애플리케이션 대부분은 이메일 미리 보기로 프리헤더를 표시합니다. 프리헤더는 항상 추가해야 합니다. 사용자가 받은 이메일을 열도록 동기를 부여하기 때문입니다. 이메일 애플리케이션은 이메일 제목 텍스트를 자를 수 있고 프리헤더는 사용자가 이메일 콘텐츠를 이해하는 데 도움이 됩니다.

코드 길이

이메일을 올바르게 표시되게 하려면 코드 길이를 줄입니다. 예를 들어 Gmail과 Yahoo는 100KB보다 큰 이메일을 표시하는 데 문제가 있습니다.

이미지 작업

이미지가 있는 이메일을 개발할 시 유의할 사항:

  • 사용자는 이메일 애플리케이션 설정에서 이미지를 비활성화할 수 있습니다.
  • 이미지를 로드하는 데 오래 걸릴 수 있습니다.
  • 이미지 품질은 화면에 따라 달라질 수 있습니다.

PNG 또는 JPEG 이미지 형식을 SVG 형식 대신에 사용하십시오. SVG 형식은 이메일 애플리케이션 대부분이 지원하지 않습니다.

4K 해상도 모니터용으로는 권장 크기보다 2배 큰 이미지를 사용합니다. 예를 들어 400px 이미지가 필요하다면, 이 이미지의 800px 너비 버전을 구하여 이메일에 추가합니다.

Copy
Full screen
Small screen
<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />

모든 링크는 구성표 및 호스트를 포함해야 합니다. 예: https://site.ru/path. 상대 링크(/path) 및 구성표가 없는 링크(://site.ru/path)는 사용하지 마십시오. 이 유형의 링크는 자동으로 file 구성표를 얻을 수 있으며 브라우저가 열기 대신에 다운로드를 시도하게 됩니다.

이메일이 스팸 폴더에 들어가지 않게 하려면 모든 링크에 대한 title 특성을 지정합니다. 이 특성은 추가 소프트웨어에 의존하여 웹 콘텐츠에 액세스하는 장애가 있는 사람들에게 도움이 됩니다.

링크용 글꼴 색상을 항상 지정해야 합니다. 이를 지정하지 않으면 이메일 애플리케이션이 자체 색상을 사용합니다.

링크로써 이메일 주소 및 전화번호를 추가합니다. 애플리케이션의 스타일이 전화번호가 바르게 표시되는 데에 영향을 줄 수 있습니다.

새 탭 또는 창의 이메일에서 링크를 열려면 target="_blank" 특성을 지정합니다.

기타 권장 사항

적응형 이메일 개발에 대한 추가 권장 사항.

획득 방법

사용자의 동작을 확인하기 위한 링크 및 설명 텍스트를 이메일은 반드시 포함하고 있어야 합니다. 사용할 플레이스홀더:

  • 이메일 헤더 배치에 {{subject}}.
  • 엑솔라 측에서 사용된 이메일 텍스트 배치에 {{text}}.
  • 링크 배치에 {{action_link}}. 링크는 엑솔라 측에서 생성됩니다.
  • 버튼 텍스트 배치에 {{button}}.

맞춤 설정된 이메일 생성 방법:

  1. 게시자 계정으로 이동하여 로그인 프로젝트 > 맞춤 설정 > 이메일 알림을 엽니다.
  2. 이메일용 HTML 레이아웃을 추가할 경우 이메일 개발 권장 사항을 따릅니다.
  3. 브라우저에서 이메일을 미리 보고 변경 내용 유효성 검사 도구를 사용하여 이메일 코드를 확인합니다.

이메일 예시:

Copy
Full screen
Small screen
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{subject}}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-color:#0a1e37;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:400px;" width="400">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:60px 0 0;text-align:center;vertical-align:top;">
                <table align="center"
                       background="https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background:url(https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg) top center / auto repeat;width:100%;">
                  <tbody>
                    <tr>
                      <td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                              <div style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:36px;line-height:42px;text-align:center;color:#fff;">
                                {{subject}}
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center"
                       background="rgba(44,72,98,0.7)"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background: rgba(44,72,98,0.7); width:100%;">    
                  <!-- Block with the email text -->            
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Note
사용자 지정 주소에서 이메일을 보내려면 계정 관리자에게 문의하세요.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!

계속 읽기

마지막 업데이트: 2020년 12월 24일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누릅니다.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!