Code

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

April 16, 2016

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

 


저작자 표시
비영리
동일 조건 변경 허락