이메일 페이지와 CSS 스타일
dev | 2009-06-08
하지만 이메일의 경우는 얘기가 조금 다릅니다. 이메일은 메일 클라이언트도 다양하고 이메일을 웹에서 보여주는 서비스들도 다양해서 단일한 코드로 많은 환경을 호환시키는 것이 쉽지만은 않습니다. 메일 클라이언트마다 표준을 지원하는 정도가 다르고, 보통 웹메일이라고 얘기하는 메일 서비스들은 보안이나 기타 알 수 없는 다른 이유로 스타일을 없애버리기 때문입니다.
예를 들어 지메일의 경우 외부스타일 링크를 완전히 무시해서 스타일이 적용되지 않은 상태의 선형화된 메일을 보여줍니다. 아웃룩 익스프레스 2007과 같은 메일 클라이언트도 워낙 지원하는 스펙이 제한되어 있어서 열심히 만든 메일 페이지가 잘 나오지 않는 경우가 많습니다. 아웃룩 익스프레스 2007이 배경이미지를 지원하지 않는다는 말을 듣고 굉장히 충격을 받았던 생각이 납니다.
이러한 메일 클라이언트나 메일 서비스에서 안전하게 사용할 수 있는 스타일은 이메일 클라이언트 CSS 지원(Guide to CSS support in email clients (2008))에 잘 정리가 되어 있습니다. 우리나라 메일 서비스의 경우에는 김군우님께서 조사해 주신 국내 유명 웹메일 CSS 지원 테스트를 참고하시면 됩니다.
현재로서 가장 확실한 방법은 BODY 요소 안에서 모든 다지인을 구현하고 스타일을 인라인으로 넣는 것입니다. CSS로 잘 선언된 스타일을 인라인으로 풀어서 넣는 것은 상당히 곤혹스러운 일입니다. 특히나 깔끔한 표준 코드에 익숙해져있는 분들은 이 복잡한 스타일 속성의 난장에서 수정할 것을 찾는 것이 힘들 수도 있습니다. 예전에는 저도 이러한 작업을 손으로 직접 했었는데 최근에 굉장히 좋은 스크립트를 발견했습니다.
이모그리파이어(Emogrifier)는 분리된 HTML과 CSS를 인라인 스타일을 이용해서 하나로 합쳐주는 스크립트입니다. 라이센스는 MIT라이센스를 따르고 있어서 누구나 특별한 제한 없이 사용할 수 있습니다.
div.email-content {
font-size: 0.75em;
}
div.email-content h1 {
font-size: 1.5em
}
div.email-content p {
margin-left: 3em;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Emogrifier TEST</title>
</head>
<body>
<div class="email-content">
<h1>Emogrifier</h1>
<p>Thanks Emogrifier!</p>
</div>
</body>
</html>
위와 같은 코드를 이모그리파이어로 변환하면 아래와 같은 코드를 만들어 줍니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Emogrifier TEST</title>
</head>
<body><div class="email-content" style="font-size: 0.75em;">
<h1 style="font-size: 1.5em">Emogrifier</h1>
<p style="margin-left: 3em;">Thanks Emogrifier!</p>
</div></body>
</html>background-image는 잘 지원이 안되니 HTML 속성으로 구현하는 것이 더 좋습니다. 그리고 배포 사이트에서는 한글이 잘 안되는거 같은데 소스 코드를 다운 받을 수 있으니 유니코드 환경에서 작동시키면 작동 될 것 같습니다. PHP5가 필요합니다. 이 코드를 사용하면 더이상 CSS를 인라인으로 풀어 넣거나 인라인 난장 HTML 코드를 눈아프게 분석할 필요도 없습니다. 참 좋은 세상입니다. :)
Comments
이메일 작업은 늘 어려움이 많았는데 좋은 정보 감사합니다. :)
@_@ 우와...
꺄~ 너무 좋습니다. 좋은 정보 감사합니다 ^^
안녕하세요~ 언제부턴가 http://hyeonseok.com/rss/ 에 작성일 정보가 없어져서 리더로 볼때 언제 포스팅하신 글인지 확인이 불가능해 졌네요~~
작성일 때문에 새글을 제대로 판단하지 못하는 경우가 있어서 일부러 뺐습니다. 원래 RSS 스펙에 작성일 정보는 옵션으로 되어 있습니다. 어떤 리더를 쓰시나요? 사용하시는 리더 버그이기 때문에 그쪽으로 리포팅 하시는 것이 좋을 것 같습니다. RSS 2.0 Specification: http://cyber.law.harvard.edu/rss/rss.html#ltpubdategtSubelementOfLtitemgt
골치 아픈 이메일...ㅠㅠ 좋은 정보 감사합니다^ㅁ^)~
와우 좋은 정보 감사드립니다. 항상 행복하세용
좋은정보감사합니다!
와.. 좋은 정보 감사합니다. email 폼 만들기 참 어렵더라는..;;
좋은 정보 감사합니다. 혹시 php에 설치해서 사용하는 방법이나 예제를 알려 주실 수 있나요?^^ 제가 찾아봐도 어떻게 해야 하는지 잘 모르겠어요 ㅎ
제 기억에는 특별한 설치 과정은 없었던 것 같은데...파일 받아서 구동하는데 문제가 있으신가요?