HTML으로 메일 발송 시 CSS 깨짐현상

프로그램을 개발하다보면 담당자에게 알림 차원에서 메일을 발송하거나

주기적인 배치프로그램 결과 전송 또는 글 등록 내역에 대한 회신을 요청하는 등 

다양한 내용을 담아서 메일 발송 기능을 만들 일이 생긴다.

 

HTML으로 원하는 내용을 담을 형태를 만드는 거야 큰 문제가 아니다.

심지어 별도의 Mailing Form 파일을 만들어서 해당 페이지를 미리 보기해서 봤을 때는 완벽하게 딱 떨어지는 형태와 디자인이 나와서 업무 끝났다! 하고 기분 좋았는데 실제로 메일을 발송해서 수신결과를 봤을 때 좌절하는 경우가 생긴다.

바로 CSS가 깨지는 현상 때문이다.

 

 

 

 

알다시피 HTML로는 실제적인 데이터 형태만 구성해놓고 클라이언트에게 예쁘게 보여지도록 CSS를 적용하는데

CSS가 없으면 이건 뭐 왠 개발자가 내용만 덩그러니 보냈나 생각이 들게 투박해진다.

 

내용만 잘 보이면 되는거지! 싶지만 역시 그래도 CSS는 있어야 한다.

 

 

 

 

HTML으로 메일 발송 시 CSS 깨짐현상

 

 

 

HTML으로 메일 발송하는 기능을 만들 때 제일 짜증나는 건

메일로 발송될 HTML, CSS 태그를 담은 페이지를 웹 페이지에서 별도로 띄웠을 때는 잘 나오다가 메일로 발송했을 때 언제 잘 나왔었냐는 듯 깨져버려서 검수를 위해서는 반드시 메일을 여러통 보내봐야 한다는 점이다.

 

그래서 메일 발송되는 유형이 다양한 경우는 검수를 여러번 해야하므로 정말 짜증난다 ㅎ_ㅎ

 

 

 

메일 발송 기능을 만들어야 하는 사람들의 시행착오를 줄이고 칼퇴근을 돕고자 중요 포인트를 정리한다.

 

 

 

1. CSS는 반드시 인라인 (inline) 형태로 구성

 

★이번 포스팅의 제일 제일 제일 핵심적인 내용★

CSS를 통해 style을 적용해야 한다면 반드시 inline으로 써야하고 다른 방식은 써봐야 의미가 없을 가능성이 매우 농후하다.

궁금한 사람들이 있을 수도 있으니... HTML에 CSS를 적용하는 방식은 3가지가 있다.

 

제일 많이 사용하는 방법으로, 확장자 .css로 구성되는 별도의 style sheet 파일을 만들어 해당 파일을 참조하는 방식

각 jsp 파일 혹은 aspx, php 등 화면 구성 파일 내부에 <style> 태그를 사용하여 css를 정의하는 임베디드 방식

 

그리고 각각의 HTML 태그 내부에 style이라는 attribute를 추가하여 css 구성내용을 작성하는 인라인 (inline) 방식

메일을 발송하는 경우에는 이 인라인 (inline) 방식을 사용해야 한다.

 

<div style="margin: 10px 20px 0 10px; border: solid 1px #ff0000;" />

 

 

이런식으로 말이다.

인라인 (inline) 방식은 잘 권하지 않는 방식이라 기존에 적용된 스타일과 별개로 적용되어야 하는 내용이 있는 예외적인 경우에만 가끔 사용하는 방식인데 왜 이 방식을 사용해야 할까?

 

 

 

메일 수신 시, 임베디드 또는 링크된 스타일이 적용되지 않기 때문이다.

gmail, naver 등 이메일 서비스 제공자 측에서 보안을 위해서 메일 내용을 일부 변조하게 되는데

script, style 등 기본적으로 head 태그 내부에 정의되는 내용들은 메일 보낼 때 배제된다.

 

그렇기 때문에 HTML을 포함한 메일 내용을 작성하는 경우, CSS를 적용하기 위해서는 각각의 태그마다 style을 지정해줘야 그 내용을 적용시킬 수 있다.

 

 

 

CSS 지원 기준은 각 서비스별로 다르고 국외 메일 서비스의 CSS 지원여부는 별도로 정리된 내역이 있어서 한 번 가져와봤다.

 

• Outlook, Gmail, Apple Mail 등의 CSS 지원여부
  https://www.campaignmonitor.com/css/

 

 

국내 사이트도 위의 정리된 사이트처럼 정리된 내역이 있으면 좋으련만 따로 정리된 문서가 없는 관계로, 국내에서 가장 많이 쓰고 있을 것으로 생각되는 네이버 메일의 경우는 head 태그 내 link, style과 body 태그 내 style도 적용되지 않는다고 생각하고 코딩하는게 편하다.

 

 

 

 

 

 

 

 

2. HTML 태그는 반드시 잘 닫아줘야 한다.

 

이 내용이야 기본적인 코딩 방식이라고 생각되니 다들 잘 지키겠지만

메일로 보내는 HTML 태그의 경우는 메일 서비스 시, 한 번 더 가공되므로 더더욱 민감한 듯 하다.

 

 

대부분의 메일 내용이 데이터 확인용도, 입력내용 전달 용도이므로 Table 태그를 많이 사용할 듯 한데 Table 내 또 다른 Table을 지정하는 방식으로 형태를 구성한 경우, 중첩된 각각의 태그가 짝 맞춰서 잘 닫혀있는지 확인해야한다.

 

또한 colgroup과 col 태그를 선언하여 각 필드의 너비를 지정한 경우는 col 태그가 닫혀있는지 확인하자.

이 포스팅을 작성하게 된 주요한 이유가 바로 col 태그를 제대로 안 닫아서 Table 필드가 뒤죽박죽 되었던 나의 경험때문임을 본다면 태그를 닫아주는 것은 매우 중요하다.

 

<colgroup>

<col width="15px" />

<col width="80px" />

<col width="80px" />

<col />

<col width="65px" />

</colgroup>

 

 

붉은 색으로 굵게 처리한 태그 닫는 부분이 반드시 있어야 한다.

이게 없어도 사실 별도의 파일에서는 잘 보여진다. 근데 메일 보낼 때마다 결과값이 다르게 보여지는 기이한 현상을 겪게 되어 검수가 끝나지 않는 최악의 상황을 맞이할 수 있다 ^0^

 

 

 

 

 

 

 

 

3. 이미지 (img) 사용

 

이도저도 안되겠고 귀찮다 싶을 땐, 잘 꾸며둔 이미지 하나만 있어도 열 CSS 부럽지 않은 효과를 낼 수 있다.

그러나 background-image는 지원되지 않을 수도 있다. (뭐지)

여기서 말하는 이미지란 일반적인 img 태그를 의미하고 그 마저도 안뜰수도 있으나... 일단 네이버는 img를 썼을 때 잘 떴다.

또한 background-image를 꼭 써야한다면 width, height를 꼭 지정해줘야 하고 그래야만 해당 영역이 잡히므로 레이아웃이 완전히 깨지는 걸 방지할 수 있다.

background-image가 안 뜰 때 쓸 수 있는 background-color나 alt 태그 등도 작성해주면 안전하다.

 

 

 

 

 

핵심은 CSS를 쓰려면 inline style을 줘라! 인데 다른 사항도 참고하시면 좋습니다.