웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹은 발전하고 있지만 웹메일 서비스를 제공하는 곳들은 글쎄... 라고 말하고 싶다... 이유야 많겠지만 아직도 eDM(이메일 마케팅) 보내기 위해 작성하는 html 코드가 너무 복잡하고 예전 방식만 가능하기 때문이다...
물론 각각의 웹메일 서비스 업체마다 이유야 많다. 예를들어 스크립트의 사용등을 제거하는 이유는 일부 악의를 띈 이메일에 피해를 받을 수도 있기 때문이다....
최근의 이메일 마케팅에 사용되는 html 코드는 텍스트도 많으나 이미지를 사용하는 경우가 많다. 예를들어 이미지 전체를 하나의 콘텐츠 내용으로 발송하며 이때 각각의 링크들을 추가하기 위해 이미지를 잘게 쪼개는 방식이 사용된다.
특히 outlook의 경우 다양한 이슈가 상대적으로 많아 보인다. 아웃룩 역시 다양한 버전 (2010, 2013 등등...)이 존재하고 각각의 버전에 맞는 html 방법이 필요하기 때문에 무척이나 어렵다... 오늘은 이를 해결하기 위한 방법 몇 가지를 알아보고자 한다.
태그는 각각의 특성이 모두 다르지만 email html을 작성할 때는 많은 태그를 사용하지 않는 것이 좋다. 예외적이지만 어떤 웹서비스에서 어떤 태그를 사용하느냐에 따라 모두 다른 스타일이 적용될 수 있기때문이다.
div, p, table, span을 예로 들자면 굳이 div, p 태그를 모두 사용할 필요는 없다 가급적 하나만 정해서 쓰자. block 또는 inline 타입 중 맞는 최소의 태그만 사용하자.
; table 태그는 기본적으로 행과 열에 대한 정렬을 맞추어 준다. 가능하면 table 태그를 사용하여 내부 콘텐츠에 대한 정렬을 맞출 수 있고 다른 웹서비스들과의 호환성에서도 상대적으로 비슷한 UI를 보여준다.
만약 내부 콘텐츠가 복잡한 경우 table 내부에 다시 table 태그를 사용해 영역을 구분하는 방법이 좋다. 태그도 통일할 수 있고 대부분의 웹서비스에서 호환성도 좋다.
사실 여러가지 테스트를 해보면 다양한 웹메일서비스를 만족하는 태그는 table이 아직까지는 최고라고 말할 수 있다. 시간이 많이 지났음에도 불구하고 대부분의 edm이 html5를 지원하기는 커녕 아직도 이미지에 링크를 추가하는 매우 간단한 방식의 이메일 퍼블리싱에 의존하고 있다. 아마도 당분간은 지속될 것 같다.
; 다수의 이미지를 연결하는 경우 공백, 라인이 생길 수 있으니 이때 아래 사항을 체크해 보자...
1) 이미지에 align 속성을 추가해보자
변경 후 ...
혹시 display와 border 속성이 없다면 아래와 같이 추가한다.
이 방법 역시 매우 자주 사용되는 방법이다. border를 적용하지 않는 경우 의도하지 않은 테두리가 발생하거나 엘리먼트 요소 사이에 여백이 생길 수 있으며 여백 이슈에 display: block을 추가하는 것도 좋은 해결방법이다.
물론 각각의 웹메일 서비스 업체마다 이유야 많다. 예를들어 스크립트의 사용등을 제거하는 이유는 일부 악의를 띈 이메일에 피해를 받을 수도 있기 때문이다....
최근의 이메일 마케팅에 사용되는 html 코드는 텍스트도 많으나 이미지를 사용하는 경우가 많다. 예를들어 이미지 전체를 하나의 콘텐츠 내용으로 발송하며 이때 각각의 링크들을 추가하기 위해 이미지를 잘게 쪼개는 방식이 사용된다.
# 이메일 html 퍼블리싱에서 의도하지 않은 여백이나 흰줄이 생기는 경우
특히 outlook의 경우 다양한 이슈가 상대적으로 많아 보인다. 아웃룩 역시 다양한 버전 (2010, 2013 등등...)이 존재하고 각각의 버전에 맞는 html 방법이 필요하기 때문에 무척이나 어렵다... 오늘은 이를 해결하기 위한 방법 몇 가지를 알아보고자 한다.
1. 가능한 사용 태그를 최소화하자
태그는 각각의 특성이 모두 다르지만 email html을 작성할 때는 많은 태그를 사용하지 않는 것이 좋다. 예외적이지만 어떤 웹서비스에서 어떤 태그를 사용하느냐에 따라 모두 다른 스타일이 적용될 수 있기때문이다.
div, p, table, span을 예로 들자면 굳이 div, p 태그를 모두 사용할 필요는 없다 가급적 하나만 정해서 쓰자. block 또는 inline 타입 중 맞는 최소의 태그만 사용하자.
2. table태그의 활용
; table 태그는 기본적으로 행과 열에 대한 정렬을 맞추어 준다. 가능하면 table 태그를 사용하여 내부 콘텐츠에 대한 정렬을 맞출 수 있고 다른 웹서비스들과의 호환성에서도 상대적으로 비슷한 UI를 보여준다.
만약 내부 콘텐츠가 복잡한 경우 table 내부에 다시 table 태그를 사용해 영역을 구분하는 방법이 좋다. 태그도 통일할 수 있고 대부분의 웹서비스에서 호환성도 좋다.
사실 여러가지 테스트를 해보면 다양한 웹메일서비스를 만족하는 태그는 table이 아직까지는 최고라고 말할 수 있다. 시간이 많이 지났음에도 불구하고 대부분의 edm이 html5를 지원하기는 커녕 아직도 이미지에 링크를 추가하는 매우 간단한 방식의 이메일 퍼블리싱에 의존하고 있다. 아마도 당분간은 지속될 것 같다.
3. 다수의 이미지를 사용하는 경우 여백 이슈
; 다수의 이미지를 연결하는 경우 공백, 라인이 생길 수 있으니 이때 아래 사항을 체크해 보자...
1) 이미지에 align 속성을 추가해보자
<img src="test1.jpg" />
<img src="test2.jpg" />변경 후 ...
<img align="left" src="test1.jpg" />
<img align="left" src="test2.jpg" />4. display와 border 속성을 인라인으로 추가
혹시 display와 border 속성이 없다면 아래와 같이 추가한다.
<img src="test.jpg" style="display: block; border: 0" />이 방법 역시 매우 자주 사용되는 방법이다. border를 적용하지 않는 경우 의도하지 않은 테두리가 발생하거나 엘리먼트 요소 사이에 여백이 생길 수 있으며 여백 이슈에 display: block을 추가하는 것도 좋은 해결방법이다.
아래의 글도 찾고 계시지 않나요?
