본문 바로가기

IT

ONE스토어 반응형 이메일 서명

왜 필요한가?

enter image description here
[이 사진은 주작 입니다. ]

원스토어로 회사가 바뀐지도 벌써 2달이 지났습니다. 그래서 그런지 사실 있을 것이 없고 없는 것은 없는; 그런 상황입니다.
그러던 ㅈㅇ 최근에 업체랑 이야기를 하다보니 위와 같은 말을 들었다.

이유를 확인해보니 이메일의 서명이 이미지 파일을 사용하다보니 거의 모든 이메일이 첨부파일이 있는 것으로 분류가 되고 있었습니다.

enter image description here

fadeit 의 이메일 템플릿 엔진 활용

이미지를 파일을 tag로만 처리하면 해결되는 것이지만 조금 더 욕심을 내보려고 깃헙에서 fadeit 의 템플릿을 뽑아와서 수정을 했습니다.
마침 찾아보니깐 html CSS 만들어 두면 이미일 템플릿으로 사용할 수 있도록 in-line CSS로 바꿔주는 gulp 기반 task 가 있는 것을 확인했습니다. 
딱 요걸 사용하면 될 것 같다.. 생각이 들어서 사용했습니다. 

제공하는 것

  • NODE JS (gulp) 기반의 이메일 템플릿 빌드 엔진
  • 빌드 시, inline CSS HTML 파일을 자동 생성
  • 이미지 파일을 그냥 html 코드로 넣어버림 (base64)
  • media queries 지원 (메일 클라이언트 지원시)

Overview
This diagram shows what happens to your templates.
Responsive HTML email template/signatures diagram

샘플 파일 확인

enter image description hereenter image description here

*Some mail clients don’t support them, so an external URL might be a good idea.

메일 클라이언트에 적용하는 법

아웃룩

Apple Mail / OS X

Solution 1

  • Open Mail.app and go to Mail -> Preferences -> Signatures
  • Create a new signature and write some placeholder text (doesn’t matter what it is, but you have to identify it later).
  • Close Mail.app.
  • Open terminal, then open the signature files using TextEdit (might be different for iCloud drive check the article below).
    $ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature
    
  • Keep the file with the placeholder open, close the other ones.
  • Replace the <body>...</body> and it’s contents with the template of your choice. Don’t remove the meta information at the top!
  • Open Mail.app and compose a new mail. Select the signature from the list to test it out.

NB: Images won’t appear in the signature preview, but will work fine when you compose a message.

Solution 2

You can also open the HTML files in /dist in a browser, CMD + A, CMD + C and then paste into the signature box. This won’t copy the <html> part or the <style> part that includes media queries. Follow the guide if you want it.

===================


The fadeit logo

Powered by fadeit

See more at fadeit.dk