이메일 사용자 정의

작동 방식

로그인 제품은 귀하가 사용자에게 보내는 이메일 표준 템플릿을 제공합니다:

등록 확인
환영
확인 (링크 및 코드와 함께)
비밀번호 변경
이메일 주소 변경
멀티팩터 인증 (MFA) 코드
MFA 설정 변경
뉴스 정기 결제

템플릿은 HTML 및 CSS 형태로 작성되었습니다.

다음을 할 수 있습니다:

이메일의 외형과 내용을 사용자에 맞게 정의하기 위해 표준 템플릿을 변경할 수 있습니다;
귀하의 이메일 서비스를 사용해 엑솔라 측에서 보내는 이메일 또는 SendGrid 애플리케이션을 사용해 보내는 이메일을 설정할 수 있습니다.

위에 나열된 모든 경우에 (등록 확인, 환영 메시지 등) 엑솔라가 사용자에게 이메일을 보냅니다. 이 기능을 비활성화할 수 없습니다.

제품 라이선스 계약에 서명한 후에만 이메일 맞춤 설정이 가능합니다. 계약에 서명하려면 관리자 페이지의 계약 섹션으로 이동합니다.

사용자

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

이메일 개발 권장 사항

이메일 애플리케이션에는 이메일 개발용 통합 표준이 없습니다 – 모든 애플리케이션은 이메일을 각기 다른 방식으로 표시합니다. 다른 이메일 애플리케이션 및 장치에서 이메일을 같게 보이게 하려면 간단하고 압축된 디자인을 생성해야 합니다.

일반 구조

JavaScript 및 CSS

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

모든 이메일 애플리케이션이 CSS3 기능 전체 목록을 지원하지는 않습니다. 이메일 템플릿을 생성할 때 이를 유념해야 합니다.

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

Copy

Full screen

Small screen

<div style="text-align: center;"></div>

독립 블록으로 개발

독립 블록을 통한 가장 효율적인 이메일 개발 메소드를 사용하기를 권장합니다. 이 방식은 다음과 같은 이점이 있습니다:

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

표 작업

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

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

크기 및 사용된 단위

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

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

% 또는 em 의 line-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" 특성을 지정합니다.

기타 권장 사항

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

획득 방법

사용자에게 보내는 이메일에는 사용자의 작업을 확인하는 데 필요한 설명 텍스트 및 링크가 일부 포함되어야 합니다. 이메일 각 요소에 다음을 사용할 수 있습니다:

작성된 것과 동일한 언어로 표시될 텍스트;
20개 언어로 현지화된 엑솔라 표준 텍스트.

엑솔라 텍스트는 이메일 템플릿에 변수로 삽입되었습니다 (플레이스홀더), 예를 들어:

{{subject}} – 이메일 헤더 텍스트.
{{text}} – 이메일 본문 텍스트.
{{action_link}} – 링크 텍스트. 링크 주소는 엑솔라 측에서 생성됩니다.
{{button}} – 버튼 텍스트.

이메일을 생성할 때, 해당 언어의 텍스트가 플레이스홀더 대신 사용됩니다.

이메일 언어는 사용자의 로케일에 따라 선택됩니다. 다음의 메소드가 사용자의 로케일을 결정하기 위해 사용될 수 있습니다:

로그인 위젯을 통해 통합할 때, 사용자의 로케일을 애플리케이션 인터페이스에서 위젯이 열렸을 때 위젯으로 전달할 수 있습니다. 그런 다음 위젯이 로그인 API 메소드로 로케일을 전달합니다.
로그인 API를 통해 통합할 때, 사용자의 로케일을 귀하의 애플리케이션 인터페이스에서 로그인 API 메소드로 메소드가 호출될 때 전달할 수 있습니다.
사용자의 로케일을 전달하지 않는 경우, 언어는 IP 주소 또는 브라우저 언어에 의해 결정됩니다.

이메일 템플릿을 맞춤 설정하려면:

게시자 게정으로 이동해 프로젝트 > 로그인을 엽니다.
로그인 프로젝트의 패널에서 구성을 엽니다.
사용자 정의 블록으로 이동해 이메일 사용자 정의 섹션을 선택합니다.

드롭 다운 목록에서 이메일 템플릿을 선택합니다.
템플릿이 미리보기 모드에서 열릴 경우, 토글 버튼(오른쪽 위)을 클릭해 HTML 모드로 전환합니다.
이메일의 HTML 레이아웃에 추가하거나 이를 수정하고, 권장 사항을 고려합니다.
이메일이 표시되는 방법을 확인하려면, 미리보기 모드로 전환합니다.

이메일 코드의 타당성을 검증합니다.
필요한 경우 다음에서 이메일 발송 필드를 수정합니다: 보내는 사람의 이름을 지정합니다. 이는 이메일 헤더와 보낸 사람의 이메일 주소에 표시됩니다. 로그인 프로젝트 이름이 기본 보낸 사람으로 사용되며, 기본 이메일 주소는 noreply@login.xsolla.com입니다. 필드의 내용을 기입할 때, application.name 형식의 모든 일반적인 변수를 사용할 수 있습니다. 예: {{application.name}} <>.

사용자 정의되지 않은 이메일은 표준 엑솔라 템플릿을 사용합니다.

이메일 템플릿 예시:

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>

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

메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

계속 읽기

FAQ에서 답 찾기

내 SendGrid 애플리케이션을 사용해 이메일을 전송할 수 있나요?

마지막 업데이트: 2024년 10월 24일

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

Your browser is not supported. Please try a different browser

인기 게시글

또는 자주 묻는 질문에 대한 답변을 선택해 보세요:

다음 소스를 바탕으로 답해주세요:

피드백을 남겨주세요(선택 사항)

피드백을 남겨주세요(선택 사항)

로그인

이메일 사용자 정의

작동 방식

사용자

이메일 개발 권장 사항

일반 구조

JavaScript 및 CSS

독립 블록으로 개발

표 작업

크기 및 사용된 단위

글꼴 작업

프리헤더

코드 길이

이미지 작업

링크 작업

기타 권장 사항

획득 방법

계속 읽기

FAQ에서 답 찾기