HTML 이메일을 작성할 때 주의해야 할 CSS 관련 요소들

HTML 형식으로 제작된 이메일은 마케팅에 흔히 사용되는 요소입니다.

 

그런데, 이메일 HTML을 작성할 때에는 CSS 사용에 주의해야 합니다. 모던 브라우저에서 흔하게 사용되는 css 속성들이 이메일 클라이언트에서는 지원되지 않는 경우가 많기 때문입니다. 예를 들어 Gmail은 flex 속성을 제대로 지원하지 않습니다.

 

이렇듯 이메일 클라이언트와 서비스 제공 업체에 따라 다양한 제한 사항이 있으므로 이메일 HTML에 CSS를 사용할 때에는 다음과 같은 요소를 고려하는 것이 좋습니다.

 

1. 인라인 스타일 사용

이메일 클라이언트 대부분은 외부 CSS 파일을 지원하지 않습니다. 따라서 스타일을 HTML 인라인 요소로 작성해 주어야 합니다. inline-css 같은 패키지를 사용하면 간단하게 css파일을 인라인 스타일로 변환할 수 있습니다. inline-css 코드 예시는 다음과 같습니다.

const inlineCss = require('inline-css');
const fs = require('fs');

const htmlFilePath = 'path/to/your/input.html'; // 입력 HTML 파일 경로
const options = {
  url: 'file://' + __dirname + '/',
  preserveMediaQueries: true,
};

fs.readFile(htmlFilePath, 'utf8', (err, html) => {
  if (err) {
    console.error(err);
    return;
  }

  inlineCss(html, options)
    .then((inlinedHtml) => {
      fs.writeFile('path/to/your/output.html', inlinedHtml, (err) => {
        if (err) {
          console.error(err);
        } else {
          console.log('HTML 파일이 성공적으로 변환되었습니다.');
        }
      });
    })
    .catch((error) => {
      console.error(error);
    });
});

2. 기본 스타일 사용

일부 이메일 클라이언트는 특정 CSS 스타일 속성을 지원하지 않거나 일부 속성을 제한합니다. 따라서 기본적인 스타일 속성만 사용하는 것이 안전합니다. 예를 들어, 레이아웃을 구성할 때는 flex, grid 보다는 table, float을 사용하는 것이 좋습니다. 또한 svg 사용에도 주의해야 합니다. iOS Mail을 제외한 대부분 메일 클라이언트가 svg를 지원하지 않거나, 일부만 지원하기 때문입니다.

 

caniemail 사이트를 사용하면 어떤 이메일 클라이언트에서 어떤 CSS 속성이 지원되는지 확인할 수 있습니다. 

 

한 가지 더 주의할 점은 같은 이름의 이메일 클라이언트라도 기기에 따라 지원하는 CSS 속성이 다르다는 점 입니다. 예를 들어 Gmail 앱에서 지원하는 속성이 Gmail 웹에서는 지원되지 않을 수 있습니다. 또한 이와 별개로 웹 이메일 클라이언트라면 크로스브라우징 요소 또한 고려해야 합니다.

 

3. mail safe font 사용

메일 클라이언트와 관계 없이 사용할 수 있는 폰트를 사용하는 것이 좋습니다. 만약 어렵다면 적절한 fallback font를 마련해 두어야 합니다. 특히 웹폰트를 사용할 때는 주의해야 합니다. 웹폰트를 지원하지 않는 경우가 많기 때문입니다. 아래는 메일 클라이언트별 웹폰트 지원 여부입니다.