eDM 마케팅 메일 퍼블리싱할 경우 생각할 점들

이메일 html을 사용하여 웹메일을 코딩(email html)할 경우 원하는 스타일 및 속성이 적용되지 않아 애를 먹은 경우가 많습니다. 웹메일에 사용되는 html 코드는 매우 제약적이며 제한사항이 많기 때문이죠... 아래는 이메일 html 코딩방법에 대하여 알아보고 주의할 사항이나 이슈사항들에 대하여 상세하게 다뤄보도록 하겠습니다. 가장 먼저 아래는 Doctype 방법입니다.

! Doctype 및 meta 인코딩 선언하기

문서타입은 html 5를 사용한 간단한 방법도 있지만 가장 선호하는 방법이 html4 strict입니다. 테스트 결과는 html4 strict와 html5의 차이는 거의 없습니다. 하지만 html4의 strict를 더 많이 사용합니다.

- html5

- html4 Strict

그리고 아래는 인코딩 meta태그입니다.

! table 코드를 사용할 것. 사용해야하는 이유

email html에서 태그 사용은 굉장히 제약적입니다. 그 이유는 제약되는 태그 및 태그 속성들.. 그리고 CSS 속성들이 매우 많기 때문입니다. 하지만 테이블 코드는 대부분 적용되므로 이를 사용하는 방법이 가장 많이 쓰이죠. 테이블 코드는 아래처럼 사용합니다.

cellpadding 그리고 cellspacing="0"을 추가해주는 이유는 이렇게 해야 테이블에 있는 row 들의 여백들이 제거되기 때문입니다. 물론 반대로 여백을 주기 위해서 이 속성을 사용할 수 있습니다. 다만 특히 이미지들을 사용하는 경우... 이 경우 이미지 사이에 여백이 예상치 못하게 발견한다면? 이 속성을 적용하시기 바랍니다.

! 높이값 height 설정하는 방법

높이값 역시 table 코드를 사용합니다. 아래처럼 td 태그에 height 속성을 이용합니다.

! padding 그리고 margin 값 설정 방법;

가장 해결하기 어려운 부분이 바로 어떻게 마진과 패딩
값을 주는 것입니다. 이 두 속성은 outlook에서 정상적으로 적용되지 않는 부분이 있어 주의를 요합니다.- td 태그에 padding값을 사용할것; td 태그는 margin 적용은 되지 않으나 padding 값을 적용할수 있음
- div태그에는 margin 사용가능함
; 사용은 가능하나 outlook 2013에서 정확히 margin값이 적용되지 않음을 확인하였습니다. 그러니 가급적 margin보다는 td의 padding을 사용하는 것이 효과적입니다.

! table 태그에 세로 정렬이 필요한 경우

테이블 태그 안에 세로 정렬하는 경우에는 valign 속성을 td태그에 적용해 값을 middle로 주어서 정렬하도록 합니다.

! 텍스트 정렬방법

텍스트를 정렬할 경우 테이블 코드를 사용시에는 아래처럼 td 태그에 align="left" 처럼 속성을 사용하는 방법이 있습니다.

! 테이블 태그에 백그라운드 색 적용하는 방법

아래와 같이 bgcolor 속성을 태그에 적용하고 함께 style 속성을 추가 background-color값을 함께 적용합니다.

! Divider 구분선 만드는 법

메일에서 문단끼리 구분하기 위해서 중간에 구분선을 추가하는 경우가 많습니다. 이때 가장 좋은 방법은 역시 테이블 코드를 이용하는 것입니다. 이미 테이블이 있다면 ... 또 만약 하얀 선이라면? 아래와 같이 적용하는 것이 좋습니다.

참고로 table에 cellpadding ="0" 속성값이 반드시 필요하니 꼭 지켜주세요. 그리고 테이블 코드가 없다면 전체적으로 코드를 추가해야하겠죠.

# 주의할 점 및 알아둘 사항

아래는 email html에 적용 가능한 알아두면 좋은 팁 및 정보입니다.

@ table 태그에 float 속성은 사용이 불가능함
Outlook 적용 안됨


@ table 태그안에 table 태그를 사용하는 것이 패딩과 마진을 가장 효과적으로 정렬할 수 있는 방법임
테이블 안에 테이블 태그를 사용하여 정렬하는 것이 모든 웹메일에 적용되는 가장 효과적인 방법입니다. 그러나, 코드가 길어지는 단점은 이 생기게되죠.


@ 테이블 태그에서 텍스트 중앙 정렬 방법
만약 테이블에서 중앙 정렬이 안될 경우 해당하는 태그에 css를 넣는 것 말고 태그 자체에 align 속성을 주는 방법이 좋습니다.
(네이버 웹메일에서 중앙정렬 적용을 안되는 경우 해결 가능)


@ Block 요소에서는 패딩, 마진 모두 사용하지 말것
Outlook(아웃룩)과 hotmail(핫메일)에서 블록요소에서 padding, margin을 주는 것은 지원되지 않습니다. 가장 효과적이고 유일해 보이는 해결방법은 td태그에 padding을 사용하는 방법입니다. 단, margin은 지원되지 않으니 margin을 padding으로 바꾸어 사용하도록 합니다.

# email html 테스트 검증 과정

테스트는 반드시 수행...이메일 html에서 테스트 메일을 보내 확인하는 과정은 빼놓을 수 없는 매우 중요한 부분 중 하나입니다. 일반적으로 아래의 웹서비스 업체에 테스트는 꼭 수행합니다.

i. 아웃룩(outlook)
아웃룩은 버젼별로 다르므로 2013, 2010 그리고 웹메일을 기준으로 테스트를 수행합니다.

ii. 네이버 메일 웹서비스
네이버메일은 한국 사용자의 경우 가장 많이 사용하죠. 매우 중요합니다. 다행히 퍼블리싱의 난이도가 매우 높지는 않습니다.

iii. daum 메일 웹서비스
국내에는 daum(다음) 사용자도 꽤 많이 존재하기 때문에 가급적 다음 메일 테스트도 수행하는 것이 좋습니다.

! 이메일 HTML 테스트 팁

email HTML을 작성한 후 테스트 하는 방법 중 하나로 좋은 방법이 있습니다. 바로 IE 8의 문서모드를 사용하는 것입니다. 이 방법을 사용하면 매우 쉽게 테스트 할 수 있으면서 실제 email 발송시 보여지는 부분과 대부분 동일하므로 추천하는 방법입니다. 다만 100% 완벽하지는 않으므로 추가적으로 실제 email에서 발송 후 테스트를 별도 수행해야합니다.


아래 링크는 이슈들을 수정하는 방법에 대하여 관련된 링크입니다!

바로가기 > http://webisfree.com/2016-03-09/email-html-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%98%90%EB%8A%94-%EC%9A%94%EC%86%8C%EC%9D%98-%EA%B0%84%EA%B2%A9-%EC%97%AC%EB%B0%B1-%ED%9D%B0%EC%A4%84-%EC%A0%9C%EA%B1%B0%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95