본문 바로가기

Designer스토리

메일링 뉴스레터 코딩 어떻게 해야 할까? 유의할 점

반응형

웹 표준화를 외쳐도 할 수 없는 그것 뉴스레터!

 

웹 코드는 시간의 흐름에 따라 상당한 발전을 이뤄 왔습니다. 무선인터넷의 발달과 휴대용 스마트 기기의 발달은 디자이너와 퍼블리셔에게 새로운 영역의 도전을 계속 원하고 있습니다. CSS3와 HTML5등 표준화를 위한 노력이 한창이지만 메일 클라이언트의 규격통일은 되지 않으려나 봅니다.

 

메일 코딩의 문제점이 부각되기 시작한것도 꽤 오래전 일인데, 아직도 크게 변한게 없습니다. 사용자마다 사용하는 메일 클라이언트가 다르고 버전이나 사용자의 환경설정에 따라서 메일 랜더링이 달라집니다. 완벽하게 어디서든 작동하는 메일링이란것은 애초에 존재하지 않을지도 모르지만 알려진 몇가지만 잘 지킨다면 호환에 크게 문제되지 않는 메일링을 만들 수 있습니다.

 

 

기본중에 기본! table로 가이드를 잡을 것

사실 이것도 완벽하다고는 할 수 없지만, table을 이용한 레이아웃을 만들면 그나마 레이아웃을 잡을 수 있습니다. 하지만 이것도 표현되지 않는 부분이 있으니 최대한 간단한 레이아웃을 만드는게 좋습니다. 가능하면 픽셀단위가 아닌 %단위의 가로 사이즈를 주는게 좋은데, 반대로 %단위를 전혀 지원하지 않는 경우도 있긴 합니다.

 

 

인 라인 스타일을 사용하라, 스크립트 X

메일링은 정상적인 HTML 문서가 아니기 때문에 CSS가 정상적인 렌더링이 될 것이라는 기대를 가지면 안됩니다. 외부 CSS를 import 시키거나 하는 것도 적용이 안될 수 있습니다. 심지어 img 태그 마저도 제대로 표시 안되는 경우도 있습니다.

 

플래시를 로딩 하기 위한 embed속성이나 javascript 등은 절대로 사용해서는 안됩니다. DTD 속성 선언이 없기 때문에 스타일이 정확히 랜더링 될 것이라는 보장도 없습니다.

 

 

이미지 벌어짐 방지

이미지에 display:block 속성을 주면, 이미지 사이가 벌어지는 것을 방지해 줍니다.

 

 

모든 이미지에 이미지 타이틀 입력 

이미지 표시가 되지 않는 최악의 경우에도 고객이 메일을 받아 보았을 때 이미지 없이도 알아 볼 수 있도록 이미지의 타이틀을 작성해 주는게 좋습니다. 이벤트 메일의 경우 이미지가 보이지 않을 경우 이벤트 페이지로 넘어 갈 수 있는 링크를 만들어 두는것도 한 방법 입니다.

 

 

이미지에 표시 해 주면 도움이 되는 속성 들

  • align='absmiddle' : 이미지를 텍스트 중간에 위치 시키기

  • border='0' : 이미지에 테두리 생성 방지

  • vertical-align:top : 높이를 맞추기 위해 적용, TD에 PADDING 값으로 높이 조절

  • 이미지 width와 height  : 이미지 표시 오류 방지

 

백그라운드 사용은 컬러로

백그라운드는 이미지 보다 CSS태그를 이용해 컬러로 적용해 주는게 좋습니다. 이미지를 백그라운드로 적용 하려면 이미지가 표시 되지 않아도 내용이 정확히 전달 될 수 있는 이미지만 사용해야 합니다. 백그라운드는 정보가 없는 단순 이미지가 백그라운드 입니다. 고객에게 전달 되어야 할 메시지는 반드시 텍스트로 만들어 져야 합니다. 메일링에서 어떠한 경우에도 표시 될 수 있는 오브젝트는 퓨어 텍스트뿐입니다.

 

엄밀히 말하면 텍스트로 이루어진 메일이 아니라면 CSS를 가진 거의 모든 메일은 정상적인 랜더링이 된다는 보장을 하기가 어렵습니다. 이메일은 HTML코드를 기반으로 작성되지만 엄밀히 HTML 문서가 아니기 때문에 정상적인 반응을 한다고 할 수 없거든요.

하지만 몇가지 알려진 문제점만 잘 피한다면 내부 클라이언트에게 욕먹지 않을 수준의 메일링을 만들어 낼 수 있습니다. 요즘은 점점 메일도 단순해 지는 추세라 차라리 간단한 홍보 메일이라면 통 이미지에 맵을 쓰는게 가장 편하게 만들 수 있는 방법일지도 모르겠습니다.

 

- 페이지를 인라인 스타일로 변경 해주는 사이트 : https://inlinestyler.torchbox.com/styler/

 

반응형
Comments. 2