HTML 이메일 테이블 코딩시 발생하는 대표적인 오류

2022.11.28 이메일 코딩은 웹페이지 코딩구현과 전혀 다르고, 웹표준성이 적어 코딩하기 정말 힘듭니다.
다음은 이메일 table 코딩을 하면서 겪었던 흔한 오류와 해결방법에 대한 포스팅입니다.

- 특정 이메일 플랫폼에선 이미지가 보이지 않는 현상
경우에 따라서, 이메일 내에 너무 많은 이미지가 삽입되어 있거나, 용량이 큰 사진이 포함되어 있을 때,이메일 클라이언트와 특정 플랫폼에서 그 이메일을 차단할 수 있습니다. 이메일과 텍스트를 적절히 섞어 HTML 이메일을 테이블 형식으로 재구성하는 것이 안전합니다.

- 디자인 웹폰트가 깨지는 현상
이쁘고 독특한 폰트로 디자인한 이메일은 이미지화 하여 발송할 때는 상관없습니다. 하지만 텍스트로 코딩될 경우 디자인 폰트보다는 다양한 이메일 플랫폼 및 디바이스에서 호환되는 기본 웹폰트를 사용하는 것이 낫습니다. 메일 리시버의 디바이스에 해당 디자인 폰트가 설치되어있지 않는다면, 아무리 특정 폭트로 코딩을 해놓아도 발송된 메일은 기존 폰트로 자동변경됩니다. 폰트는 웹 기본 폰트로 하되, 이메일 테이블 코딩시 인라인 스타일에 패밀리 폰트를 지정해 놓아야합니다.

- 이메일에 영상삽입 및 구현이 안되는 현상
한 때 이메일에 영상을 삽입하여 이메일 마케팅이 가능하던 시기가 있었습니다만, 스팸메일의 문제와, 과도한 용량으로 더이상 플랫폼에서 이를 지원하지 않습니다. 해결 방법은, 영상의 스크린샷을 이미지로 이메일에 연결하고, 클릭하면 유튜브와 같은 영상 플랫폼으로 넘어가게 하는 방법이 있습니다. 혹은 짧은 gif를 만드는 것도또 다른 방법이라고 할 수 있습니다.

- 특정 태그 요소가 생략되거나 누락되는 현상 또는 스타일이 적용되지 않는 현상
웹표준 호환성이 없고 코딩이 까다로운 HTML 이메일은 테이블 코드로만 구성하는 것이 가장 안정성 있습니다. table, tr, td 테이블 태그로 이메일 아웃라인을 짜는 것이 중요하며 너무 여러가지 태그를 사용할 시 그것을 지원하지 않는 플랫폼이 있을 경우를 조심해야합니다. 이는 스타일시트도 마찬가지입니다. 아웃룩에 가장 많은 렌딩문제가 있는데, 이를 최소화 하기 위해 바디와 테이블 태그의 리셋이 필요합니다.

- 네이버, 혹은 다음과 같은 포털사이트에서 이메일 보냈는데, 대량발송프로그램으로 보냈을 때 오류가 난 경우
네이버와 같은 포털사이트는 HTML이메일 작성을 지원하기 때문에 테스트발송하기 더욱 간편합니다. 하지만 최종적으로 이메일은 대량메일발송을 지원하는 기술적인 프로그램으로 발송되어야 하고, 그렇기 때문에 이메일 테스트 발송은 대량메일발송 프로그램에서 진행되어야 사전에 오류를 최소화합니다. 올리브프랑스 디자인에서는 고객의 유형과 이메일의 용도 등을 고려하여 차별화된 이메일 / 뉴스레터를 디자인제작하고 있습니다.
간단한 문의는 하단의 카카오톡 1:1 채팅을 이용해주세요^^ 감사합니다. 뉴스레터 카카오톡 채팅문의목록으로