본문 바로가기

프론트엔드

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이 전송된다!