이메일의 HTML 테이블: 무엇이 잘못될 수 있습니까?

이메일 업계에 오랫동안 종사해 왔다면 이메일 캠페인과 관련하여 여러 가지 문제를 경험했을 것입니다. 누락된 이미지에서 전달 가능성 문제에 이르기까지 이메일 마케팅은 많은 어려움을 겪고 있습니다. 하지만 이메일의 기초가 되는 테이블(실제 코드)에서 문제가 발생할 수 있다는 점을 고려하지 않았을 수 있습니다.

불행히도 HTML 테이블에는 잘못될 수 있는 많은 것들이 있습니다. 오늘 우리는 HTML 테이블에서 볼 수 있는 가장 일반적인 문제 중 일부를 분석하고 귀하의 이메일에서 동일한 문제가 발생하지 않도록 하기 위한 몇 가지 팁을 제공하고자 합니다.

우리가 테이블을 사용하는 이유

먼저, 이메일 코딩에 HTML 테이블을 사용하는 이유를 간단히 살펴보겠습니다. 과거에 논의한 바와 같이 이메일 마케팅 캠페인에는 고유한 코딩 고려 사항이 필요합니다. 웹과 이메일은 동일한 기술(HTML 및 CSS)을 기반으로 구축되지만 이메일 애플리케이션은 웹 브라우저와 동일한 표준을 준수하지 않습니다. 각 이메일 애플리케이션에는 지원되는 코드와 이메일이 표시되는 방식을 결정하는 자체 렌더링 엔진이 있습니다. 우리에게 나쁜 소식은 모든 렌더링 엔진이 서로 다른 HTML 태그와 CSS 속성을 지원한다는 것입니다.

이 때문에 웹 디자인에서 사용되는 것과 동일한 코딩 원칙을 사용할 수 없습니다. 대부분의 이메일 클라이언트에서 이메일이 제대로 표시되도록 하려면 HTML 테이블을 사용하여 이메일 캠페인의 구조를 만들어야 합니다.

특히 작년 Gmail의 주요 업데이트로 인해 최근에 변경되었지만 일부 이메일 클라이언트는 여전히 많은 HTML 및 CSS를 지원하지 않습니다. 가장 주목할만한 것은 Microsoft Word를 렌더링 엔진으로 사용하는 Microsoft Outlook 이메일 클라이언트 제품군입니다. Outlook은 여전히 ​​인기가 높기 때문에(현재 이메일 클라이언트 시장 점유율 추적기에서 5위), 이메일 디자이너는 캠페인이 구독자에게 제대로 표시되도록 하려면 여전히 어느 정도 표를 사용해야 합니다.

그리고 HTML 테이블에 의존해야 할 때 잘못될 수 있는 많은 것들이 있습니다...

일을 복잡하게 만드는

우리가 테이블을 사용할 때 볼 수 있는 가장 일반적인 문제 중 하나는 지나치게 복잡한 레이아웃입니다. 이것은 특히 몇 년 동안 업데이트되지 않은 기존 이메일 템플릿에 해당됩니다.

얼마 전까지만 해도 대부분의 이메일은 많은 테이블을 사용하여 구축되었습니다. 테이블 내의 테이블 내의 테이블 — 중첩이라고 하는 방식입니다.

다른 테이블에 여러 테이블을 중첩하면 코드에 문제가 발생할 수 있습니다. 물건을 이동할 때 실수로 표를 잘못된 위치에 놓거나 필수 HTML 태그 위에 붙여넣기 하는 것은 매우 쉽습니다. 그리고 일부 클라이언트(Lotus Notes를 보고 있음)의 경우 테이블을 너무 깊게 중첩하면 이메일이 제대로 렌더링되지 않는 것을 볼 수 있습니다. 이러한 이유로 우리는 친구 Brian Graves가 쓴 것처럼 모듈식 접근 방식으로 이메일을 작성하는 것이 좋습니다. 그리고 중첩 테이블을 최소한으로 유지하십시오. 테이블 중첩은 거의 피할 수 없지만 중첩 깊이를 최대 4-6개 테이블로 유지하면 문제를 방지하는 데 도움이 됩니다.

복잡한 중첩과 마찬가지로 지나치게 복잡한 디자인도 문제가 될 수 있습니다. 여러 개의 열 이메일을 보는 것은 드문 일이 아니지만 이메일에 너무 많은 열을 추가하기 시작하면 잠재적인 실패에 대비하는 것입니다.

일부 이메일 클라이언트는 기본적인 수학에도 문제가 있습니다. 특정 버전의 Microsoft Outlook은 표 열에 공백을 추가하여 전자 메일 레이아웃을 손상시키는 것으로 알려져 있습니다. 25% 너비로 설정된 4개의 표 셀을 사용하는 것이 합리적이라고 생각할 수 있지만 Outlook은 해당 셀에 추가 공간을 추가하여 레이아웃을 100%보다 넓게 만듭니다. 결과 이메일은 해당 셀 중 일부를 자체 행에 삭제하여 잘 디자인되고 완벽하게 계획된 이메일 캠페인을 망칠 것입니다.

이메일 레이아웃을 단순하게 유지하면 캠페인에서 발생할 수 있는 문제를 방지하고 구독자를 행복하게 유지하는 데 도움이 됩니다.

태그 누락

이메일에는 일반적으로 많은 코드가 있습니다. 그리고 대부분의 이메일 팀은 매우 빠르고 빡빡한 일정으로 작업합니다. 이 조합은 이메일 캠페인을 망칠 수 있는 실수로 이어질 수 있습니다.

빠른 복습으로 HTML이 어떻게 작성되는지 살펴보겠습니다. HTML은 콘텐츠를 둘러싸는 태그로 구성됩니다. 대부분의 경우 적절한 마크업에는 여는 태그와 닫는 태그가 모두 필요합니다. 다음 HTML 테이블을 예로 들어 보겠습니다.

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

테이블, 테이블 행 및 테이블 셀의 세 가지 태그가 있음을 알 수 있습니다. 이러한 태그는 열린 다음 닫힙니다(/ 기호로 표시됨).

HTML은 관대한 마크업 언어이지만 HTML 태그가 누락되면 이메일 클라이언트와 해당 렌더링 엔진이 질식하는 경우가 많습니다. 불행히도 닫는 태그가 없는 것은 이메일에서 너무나 흔한 문제입니다. 이러한 빠른 처리 시간으로 인해 이메일 디자이너는 너무 빨리 코딩하여 테이블, 행 또는 셀을 닫는 것을 잊어버릴 수 있습니다. 일부 클라이언트에서는 이것이 괜찮을 수 있지만 다른 클라이언트에서는 캠페인이 중단될 수 있습니다.

W3C Markup Validation Service와 같은 도구는 누락된 태그를 식별하는 데 도움이 될 수 있습니다. 누락된 태그와 부적절하게 형성된 마크업 또한 이메일 작성에 도움이 되도록 이메일 템플릿이나 Builder's Partials 및 Snippets와 같은 도구를 사용하는 것이 좋습니다. 코드가 잘 작성되고 적절하게 테스트되었는지 확인하는 데 도움이 될 뿐만 아니라 워크플로 속도를 높이는 추가 이점이 있어 촉박한 기한을 준수하고 팀을 행복하게 유지할 수 있습니다.

누락된 속성

누락된 태그가 문제를 일으킬 수 있는 것처럼 테이블의 누락된 HTML 속성은 펑키하게 보이는 디자인으로 이어질 수 있습니다.

HTML 속성은 HTML 태그에 설정할 수 있는 추가 속성입니다. 이러한 속성은 요소 너비 및 높이, 정렬 및 간격과 같은 항목을 제어합니다. 테이블 셀 주변의 예기치 않은 간격은 HTML 테이블에서 볼 수 있는 가장 일반적인 문제 중 하나입니다.

거의 모든 이메일 애플리케이션(및 웹 브라우저)은 HTML 테이블에 고유한 스타일을 추가합니다. HTML 테이블은 전통적으로 테이블 형식의 데이터를 표시하는 데 사용되며 원래 콘텐츠를 배치하고 디자인하기 위한 것이 아닙니다. 이 때문에 테이블이 제대로 표시되도록 브라우저와 이메일 애플리케이션의 기본 동작을 재정의해야 합니다.

테이블에 cellspacing 및 cellpadding 속성을 추가하고 둘 다 0으로 설정하면 이메일 클라이언트가 테이블 셀 주위에 추가 공간을 추가하지 않을 것임을 확신할 수 있습니다.

 <table cellpadding="0" cellspacing="0"> </table>

마찬가지로, 표 너비 또는 표 내용 정렬에 문제가 있는 경우 표 또는 표 셀의 너비 또는 정렬 속성을 잊지 않았는지 확인해야 합니다.

문제 해결 방법 알아보기

자신의 이메일 캠페인 문제를 해결하고 구독자에게 당혹스러운 문제를 피하는 방법을 배우고 싶으십니까? Litmus Live에서 전문가처럼 이메일 문제 해결에 대한 전체 워크숍에 참여하세요. 가장 일반적인 이메일 함정, 해결 방법 및 캠페인 문제 해결을 위한 최상의 방법을 살펴보겠습니다.

리트머스 라이브 티켓을 받으세요! 지금 등록하여 이메일을 축하하세요! 지금 등록 →