mailjet으로 mail Template UI 구성하기

• 키워드: mailjet, transactional template, Template Language, HTML block
• 상황
  1. 사용자에게 서비스의 진행 상황(ex> 배송 상태)을 이메일로 알려주고자 한다.
  2. 서비스의 안정성과 편의성을 위해 mailjet이라는 이메일 마케팅 플랫폼을 사용한다.
  3. 뉴스레터처럼 bulk user에게 같은 내용의 메일을 전송하는 것이 아니라, 사용자의 이름/진행 상태 등에 따라 custom email을 전송해야한다. 따라서 transaction email template을 사용하기로 한다.
     https://documentation.mailjet.com/hc/en-us/articles/360043174853-What-is-a-transactional-email-
  4. 서비스의 진행 상태에 따라 조건문으로 분기하여 상황에 맞는 UI를 제공하기 위해 mailjet Template Language를 사용한다.
• 해결 방법
  1. mailjet에 로그인하고 transactional template 메뉴로 이동한다.

     

     mailjet menus

  2. "Create a new template"을 클릭하고 마음에 드는 스켈레톤 템플릿을 선택한다.
     

     

     템플릿 갤러리

      
  3. 좌측에 보이는 Content 패널에서 다양한 UI를 손쉽게 추가할 수 있다. 이번에 직접 사용한 UI에 대해 설명하고자 한다.(Button, Image, Text, HTML block, Template Language)

     

     좌측 Content panel

      
  4. Image UI로 원하는 이미지를 추가할 수 있다. 이때 이미지 파일을 import 할 수도 있고, external link url을 입력하면 mailjet이 적절하게 이미지 파일로 변환하여 저장한다.

     

     Image UI

      
  5. Button UI를 추가하고 버튼에 특정 링크(anchor)를 연결할 수 있다. 이 때 아래 예제처럼 'id'와 같은 변수명을 사용하여 원하는 url을 지정할 수 있다.
     

     

     Button UI

      
  6. 일반적인 Text Paragraph도 사용가능하며, 글자색/배경색/너비/글꼴 등 다양한 값을 지정할 수 있다.
     

     

     Text UI

  7. 특수한 UI가 필요할 경우, 'HTML block'을 이용해 직접 UI를 추가할 수 있다.
     

     

     HTML block UI

     HTML을 작성하면 오른쪽에 바로 preview를 보여준다.
     이 때 <style> tag를 사용하면 환경에 따라 UI가 깨지는 현상을 발견했다(email app에서는 괜찮지만 웹브라우저에서는 UI가 깨짐). 따라서 각 tag마다 직접 style attribute를 추가하였다.
     위 예제의 'id'와 'service_name'과 같이 변수명을 괄호('{{ }}')로 감싸주면 custom variable을 추가할 수 있다.
     변수 선언 형식은 '{{ var:variable_name:default_value }}'이고 ':default_value'는 생략가능하다.
     
     
  8. 변수의 값에 따라 조건문으로 분기해야할 경우 Template Language를 사용하면 된다.
     

     

     Template Language UI

     HTML block과 같이 오른쪽에서 preview를 확인할 수 있고, 괄호('{{ }}')로 변수를 넣을 수 있다.
     이 때, {% if %}, {% endif %} 같은 템플릿 문법을 사용해 조건문을 처리할 수 있다.
     https://dev.mailjet.com/email/template-language/
     
     
  9. 완성한 UI는 'Preview email'로 미리 확인할 수 있다.

     

     preview email을 누르면 템플릿에서 선언한 변수명들이 왼쪽에 나열되고, 값을 채울 수 있는 input이 있다.
     (이메일 제목도 변수명으로 커스텀 가능하다.)

     

     preview page

     그리고 우측 상단의 'Send a test email'을 통해 원하는 메일 주소로 테스트 메일을 발송해볼 수 있다.
     
     
  10. 완성한 템플릿을 실제 서비스에 사용하기 위해서는 'Preview email' 대신 'Use the Send API'를 눌러 백엔드용 code snippet을 얻으면 된다.(CURL, python, java 등 다양한 언어의 snippet을 지원한다.)
      

      

      Use the Send API

  11. 이제 마지막으로 우측 상단의 'Publish'를 누르고, 백엔드 서버에서 코드를 실행하면 transactional email이 전송된다!