가장 흔한 이메일 코딩 실수와 이를 피하는 방법

이메일의 모든 종과 휘파람에도 불구하고 코딩 실수는 이메일을 완전히 망칠 수 있습니다. 하나의 잘못 단축된 링크 또는 잘못된 색상 형식 - 특히 사용자가 웹 이메일 클라이언트 대신 스마트폰을 통해 확인하기로 결정하거나 다른 화면 해상도의 가젯으로 전환하는 경우 이메일이 비참하게 보일 것입니다.

이 게시물에서는 일반적인 HTML 이메일 코딩 실수에 대해 이야기하고 이를 방지하기 위한 몇 가지 조언을 공유합니다.

이메일 표시 문제는 어디에서 발생합니까?

간단히 말해서 사용자가 계획한 방식과 다르게 이메일을 보는 두 가지 이유가 있습니다. 첫 번째는 사용자 장치의 기술적 특성과 관련이 있습니다. 두 번째는 더 정확하게는 이메일 클라이언트인 렌더링 엔진입니다.

사용자 장치의 기술적 특성

고려해야 할 장치에는 최소한 두 가지 기술적 특성이 있습니다.

1. 화면 해상도 — 화면 의 크기(픽셀 단위)입니다. 예를 들어 iPhone X의 화면 해상도는 1125×2436픽셀입니다. 이메일에 각 열이 600픽셀인 두 개의 텍스트 열이 포함되어 있으면 올바르게 표시되지 않습니다.
2. PPI 또는 인치당 픽셀 수 — 화면의 1인치에 있는 픽셀 수입니다. iPhone X의 PPI는 458입니다. 상상해보십시오. 이메일에 작업 버튼을 추가해야 합니다. 버튼이 44포인트(iPhone X의 경우 132×132 픽셀을 의미함) 미만인 경우 화면 공간의 1/3도 채 걸리지 않으며 사용자는 거의 탭할 수 없습니다.

한 가지 더 명심해야 할 점: 사용자는 종종 모바일 장치를 회전시키므로 이메일은 깔끔하게 보이고 세로 및 가로 보기 모두에서 모든 기능을 발휘해야 합니다.

사용자 장치의 기술적 특성과 관련된 문제를 방지하려면 반응형 이메일 디자인을 사용해야 합니다.

먼저 이메일 head 에 미디어 쿼리를 추가해야 합니다. 예를 들어 @media screen 및 (max-width: 600px) 쿼리는 화면 너비가 600픽셀 미만인 경우 이메일 디자인이 최적화됨을 의미합니다. 화면 너비가 600픽셀을 초과하면 사용자에게 이 이메일의 고정 너비 버전이 표시됩니다.

둘째, 셀이 포함된 표 형식으로 이메일을 생성해야 합니다.

 <표>
<tr>
    <td>...</td>
</tr>
</표>

그런 다음 각 셀에 스타일을 추가합니다. 예를 들면 다음과 같습니다.

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

그러나 이러한 조치를 취한 후에도 이메일을 표시하는 데 여전히 문제가 있을 수 있습니다. 문제의 원인은 이메일 클라이언트의 렌더링 엔진입니다.

이메일 클라이언트

가능한 표시 문제의 두 번째 원인은 수신자가 캠페인을 여는 데 사용하는 이메일 클라이언트입니다. 이메일 클라이언트의 핵심 부분은 렌더링 엔진입니다. 이메일을 긴 코드 스크립트로 수신하고 처리하고 우리가 이메일을 수신하는 데 익숙한 방식으로 출력합니다. 이미지, 링크 및 기타 미디어가 포함된 이해 가능하고 구조화된 형식의 텍스트입니다.

아래의 예를 살펴보십시오. Gmail의 렌더링 엔진에서 볼 수 있는 프로모션 이메일의 코드입니다. 이 이메일이 잠재 고객에게 그렇게 표시된다면 그들은 코드를 거의 자르지 않고 40% 할인을 위한 프로모션 코드가 있다는 것을 이해하지 못할 것입니다.

각 이메일 클라이언트에는 자체 렌더링 엔진이 있습니다. 즉, 다른 이메일 클라이언트를 통해 열린 동일한 이메일이 완전히 다른 모양을 가질 수 있습니다.

다음은 전 세계에서 가장 인기 있는 이메일 클라이언트 목록입니다. 분명히 받는 사람은 하나 또는 여러 사람을 사용하여 보내는 이메일을 엽니다.

이러한 모든 이메일 클라이언트에는 HTML 이메일 코딩 시 고려해야 하는 몇 가지 특성이 있습니다.

예를 들어 iOS용 Apple Mail은 다음을 지원하지 않습니다.

• inline-size CSS 속성;
• @media (orientation) 미디어 쿼리;
• 앵커 링크;
• HDR, PPM 및 SVG 이미지 형식 등.

Gmail은 다음을 제외하고 다양한 CSS 속성 및 미디어 쿼리를 지원합니다.

• box-shadow, text-shadow, 및 기타 CSS 속성;
• @media (prefers-color-scheme) 미디어 쿼리 등.

일반적인 이메일 코딩 실수와 이를 피하는 방법

이메일 코딩 실수를 피하기 위한 가장 일반적인 조언은 버전에 상관없이 대부분의 이메일 클라이언트에서 지원하는 코드로 인벤토리를 제한하는 것입니다. 간단히 말해서 뒤로 물러서서 마치 1999년인 것처럼 코딩하는 것입니다. 예를 들어 다음을 사용하는 것이 널리 권장됩니다.

• CSS3 대신 CSS2,
• HTML5 대신 HTML4,
• 배경 이미지 대신 색상,
• <div> 대신 table-layout ,
• 스타일 세트 또는 <style> 블록 대신 인라인 CSS.

이 접근 방식은 이메일 표시와 관련된 대부분의 문제를 방지하는 것으로 여겨집니다. 그러나 이메일을 망칠 수 있는 몇 가지 특정 코딩 실수를 자세히 살펴보고 해결 방법을 찾아보겠습니다.

일반 텍스트 버전 없음

잠재적인 문제. Outlook 및 Gmail과 같은 일부 이메일 클라이언트는 일반 텍스트 버전이 없는 경우 이메일을 스팸으로 정의할 수 있습니다. 또한 때때로 이메일 클라이언트는 HTML 코드를 렌더링하는 데 문제가 있습니다. 이 때문에 HTML 이메일은 잘못 표시될 수 있지만 일반 텍스트 이메일은 항상 동일하게 보입니다.

방지. 이메일에 일반 텍스트 버전을 추가하십시오. 다행히 대부분의 이메일 서비스 제공업체에서 자동으로 추가합니다.

이메일 마케팅 전략에 일반 텍스트 이메일을 구현할 수 있습니다. 우선, 그러한 이메일은 더 개인적으로 보이기 때문에 구독자와의 커뮤니케이션 수준을 높일 수 있습니다. 게다가, 어떤 사람들은 이메일의 요점으로 바로 가는 것을 선호하는데, 화려한 레이아웃은 그것을 지양합니다.

JavaScript, ActiveX, Flash 등을 사용하여

잠재적인 문제. 대부분의 이메일 클라이언트는 이러한 언어, 프레임워크 및 플러그인을 지원하지 않으므로 이메일의 일부가 렌더링되지 않고 구독자에게는 공백만 표시됩니다. 또한 전자 메일은 바이러스 백신 소프트웨어에 의해 금지될 수 있습니다.

방지. 이메일을 HTML 및 CSS로 코딩하는 데 사용하는 언어를 유지합니다. 비디오나 오디오를 추가해야 하는 경우 웹사이트에 업로드하고 링크를 제공합니다.

NiftyImages가 새로운 제품 기능을 제공하는 방법을 주목하십시오. 회사는 설명 비디오일 수 있지만 일련의 이미지를 선택했습니다.

리디렉션이 너무 많습니다.

잠재적인 문제. 리디렉션은 분석에 필요하지만 이메일에 득보다 실이 많을 수 있습니다. 예를 들어 웹 페이지의 로딩 시간을 훨씬 더 길게 만듭니다. 그런 다음 사용자의 브라우저가 리디렉션을 차단할 가능성이 있으므로 URL에 액세스할 수 없습니다.

방지. 리디렉션을 피하십시오. 그러나 여전히 사용해야 하는 경우 도착 URL을 로드하는 데 걸리는 시간을 확인하십시오. 전체 캠페인을 시작하기 전에 이메일을 테스트하십시오. 구독자의 경험을 고려하십시오. URL 로드를 기다릴 의향이 있는지 여부.

단축 링크

잠재적인 문제. 링크를 줄이면 이메일이 스팸 폴더에 들어갈 위험이 있습니다. 문제는 단축 링크에서 도착 URL이 불분명하다는 것입니다. 간단히 말해서 어디든지 이끌 수 있습니다. 당연히 해커와 스패머는 이를 악용합니다.

방지. 단축 링크를 사용하지 마십시오. 긴 URL 없이 이메일을 깔끔하게 보이게 하는 것이 목표라면 HTML 태그 <a href="URL">...</a> 사용하는 것이 좋습니다. 길이에 상관없이 여기에 모든 URL을 삽입할 수 있습니다.

여전히 단축된 링크가 필요하다면 타사 도구를 사용하는 대신 자신의 URL을 단축하십시오. 최소한 링크 단축기의 블랙리스트를 미리 스캔하십시오.

큰 이메일 본문 파일 크기

잠재적인 문제. 이메일 클라이언트와 이메일 서비스 제공업체 모두 상대적으로 적은 양의 정보를 전송하도록 설계되었기 때문에 이메일 본문 크기 제한이 있습니다. 이러한 제한에 맞지 않으면 이메일이 잘릴 수 있으며 끝부분이 숨겨집니다.

음반사에서 발행하는 뉴스레터를 살펴보세요. Gmail을 통해 열면 잘립니다.

정식 버전을 보려면 구독자가 링크를 탭해야 합니다.

이메일 본문 파일 크기가 크면 전달 가능성에 문제가 발생할 수도 있습니다. 또한 이메일은 크기 때문에 사용자의 안티바이러스 소프트웨어에 의해 보안 위협으로 간주될 수 있습니다.

방지. 이메일 서비스 제공업체 및 가입자가 사용하는 이메일 클라이언트의 이메일 본문 크기 제한을 확인하십시오. 예를 들어 Google은 이메일 본문 크기 제한이 200KB라고 주장합니다. 그러나 대부분의 이메일 클라이언트의 요구 사항을 충족하려면 이메일을 100KB로 제한하는 것이 좋습니다. 실제로 위의 예에서 나온 이메일의 크기는 136KB입니다.

너무 많은 글꼴과 색상

잠재적인 문제. 이메일 클라이언트 간의 차이로 인해 모든 글꼴과 색상이 올바르게 표시되지 않을 수 있습니다. 또한 모든 글꼴과 색상이 서로 잘 결합되는 것은 아니므로 약한 소스의 이메일 디자인을 만들 위험이 있습니다.

또한 구독자의 기기마다 밝기와 같은 화면 설정이 다르다는 점을 염두에 두어야 합니다. 이메일을 더 생생하게 만들려고 노력하는 동안 사용자는 이러한 색상의 혼란으로 고통받을 수 있습니다.

이것은 이메일 디자인의 의심스러운 예입니다. 각 블록에는 고유한 색상이 있습니다. 이것은 사용자가 가장 중요한 정보로부터 주의를 분산시킵니다.

예방 . Arial, Comic Sans MS, Courier New, Times New Roman 또는 Verdana와 같은 이메일 친화적인 글꼴을 선택하십시오. 대부분의 인기 이메일 클라이언트에서 지원됩니다. 텍스트 글꼴의 크기는 12-13픽셀 이상이어야 합니다. 그렇지 않으면 사용자가 이메일을 확대하거나 눈을 피로하게 해야 합니다.

색상의 경우 두 개 이상을 사용해서는 안 됩니다. 하나는 일반 텍스트 블록에 사용하고 다른 하나는 링크와 버튼뿐만 아니라 중요한 사항을 강조 표시하는 데 사용합니다. 선택한 색상이 배경과 일치하는지 확인하고 사용자가 어두운 모드로 전환하는 경우 잘 보이도록 합니다.

텍스트 편집기 또는 웹 사이트에서 이메일 템플릿 HTML 코드 복사

잠재적인 문제. Microsoft Word 또는 이와 유사한 것을 사용하여 전자 메일에 대한 텍스트를 만든 다음 복사하면 불필요한 서식이 걸려 전자 메일 레이아웃을 망칠 수 있습니다. 또한 웹사이트에서 이미지나 텍스트의 일부를 복사하면 JavaScript 또는 Flash 요소가 이메일에 추가될 수 있습니다.

방지. 이메일을 코딩하려면 Windows용 메모장 또는 Mac용 TextEdit와 같이 고유한 서식을 추가하지 않는 텍스트 편집기를 사용하십시오. TextCleanr와 같이 서식을 정리할 수 있는 온라인 도구도 있습니다. HTML 클리너 도구를 사용하면 사용자 친화적인 편집기에서 이메일을 작성하고 동시에 코드를 확인할 수 있습니다.

3자리 HEX 색상 코드 사용

잠재적인 문제. 3자리 및 6자리 색상 형식은 동일해야 하지만 이메일 클라이언트가 3자리 형식을 약간 다른 방식으로 렌더링하는 경우가 있습니다. 예를 들어 Gmail을 사용하면 계획한 검정색 대신 보라색이 될 위험이 있습니다. color: #000 은 color: #500050 .

예방 . 일반적으로 6자리 색상 형식을 고수하고 전체 이메일에서 사용하도록 합니다.

첨부 파일

잠재적인 문제. 일반적으로 스패머와 해커는 이메일에 일부 파일을 첨부합니다. 첨부 파일을 추가하면 보안 위협으로 간주될 수 있습니다.

방지. 이메일에 바로 파일을 추가하는 대신 파일 로딩 페이지에 대한 링크를 제공하십시오.

다음은 약속한 파일에 대한 액세스 권한을 사용자에게 부여하는 방법의 예입니다. 링크가 지정되는 방식에 주의하십시오. 사용자가 링크를 탭할 때 무슨 일이 일어날지 알 수 있도록 이해하기 쉬운 클릭 가능한 텍스트여야 합니다.

대체 텍스트 누락

잠재적인 문제 . 일부 사용자는 브라우저에서 이미지 다운로드를 비활성화합니다. 대체 텍스트가 없는 이미지를 포함하여 이메일을 받으면 이미지 대신 공백만 표시되고 이메일의 요지를 이해하지 못합니다.

누군가의 인터넷 연결이 너무 낮아 이미지를 충분히 빨리 다운로드할 수 있는 경우에도 동일하게 작동합니다. 대체 텍스트는 이 문제를 해결하는 데 도움이 됩니다. 이미지 다운로드가 잘못되면 사용자가 대신 텍스트를 볼 수 있습니다.

방지. 사용하는 모든 이미지에 alt 속성을 추가하십시오. img 태그 <img alt="text"> 에 추가하여 올바르게 수행했는지 확인하십시오. 대체 텍스트는 공백을 포함하여 125자로 제한합니다. 일반적으로 이미지를 정확하게 설명하는 단어 몇 개만 추가하면 충분합니다. 여유 공간이 있다면 이 설명에 컨텍스트를 추가할 수 있습니다.

Sephora에서 보낸 이메일의 일부를 살펴보세요.

이 이메일의 코드를 확인하면 이미지의 대체 텍스트로 CTA를 찾을 수 있습니다. 사용자가 이미지를 보지 못하더라도 브랜드가 제공하는 것을 이해할 수 있습니다.

이미지 전용 레이아웃

잠재적인 문제. 이메일이 이미지로만 구성되고 텍스트가 없는 경우 전달 가능성, 표시 등에 문제가 발생할 수 있습니다. 예를 들어 사용자가 이미지 다운로드를 차단하면 문자 그대로 이메일에 아무 것도 표시되지 않습니다. 둘째, 이미지가 많으면 이메일 본문 크기가 커지고 이메일 클라이언트가 잘릴 수 있습니다. 셋째, 사용자는 단어로 검색을 통해 폴더에서 귀하의 이메일을 찾을 수 없습니다.

방지. 이메일을 작성할 때 텍스트와 이미지를 결합하십시오. 이메일의 일반 텍스트 버전과 이미지의 대체 텍스트를 추가하는 것을 잊지 마십시오. 위에서 우리가 준 다른 조언을 고려하십시오.

Ecwid에서 보낸 이 이메일을 살펴보십시오. max-width: 570px 와 같은 테이블 레이아웃 및 미디어 쿼리를 포함하는 반응형 디자인이 있습니다. 이메일은 다채롭고 매혹적인 이미지와 텍스트 등 다양한 유형의 콘텐츠를 결합합니다. 6자리 색상 형식이 사용됩니다(예 color:#979797 또는 color:#4A4A4A . 이메일에 이미지가 많지 않아 본문 크기가 크지 않습니다. 또한 이메일에서 단축 링크나 리디렉션을 찾지 마십시오. 전반적으로 이 이메일은 위에 제공된 대부분의 권장 사항을 충족합니다.

그래서, 우리는 가장 일반적인 HTML 이메일 코딩 실수를 한 눈에 보았습니다. 조언을 적용하고 이메일을 보내기 전에 테스트하는 것을 잊지 마십시오. 이메일을 여는 데 인기 있는 이메일 클라이언트를 3개 이상 사용하십시오. 가능하면 다른 장치를 통해서도 확인하십시오. 에뮬레이터도 유용할 것입니다.

이메일 코딩 실수를 피하는 또 다른 방법

한 가지 진실이 있습니다. 코딩하지 않으면 HTML 코딩 실수를 하지 않습니다. 운 좋게도 코드 없는 이메일 디자인이 SendPulse와 함께 여러분을 기다리고 있습니다.

직관적인 드래그 앤 드롭 편집기를 사용하면 이메일 코딩 실수를 방지할 수 있습니다. 이메일에 이미지, 텍스트 또는 비디오를 추가하기만 하면 브랜드 스타일에 맞게 글꼴과 색상을 설정하고 소셜 미디어 페이지에 대한 링크를 추가할 수 있습니다.

모든 것을 더 간단하게 만들기 위해 무료 이메일 템플릿에서 선택할 수 있습니다. SendPulse로 생성된 모든 이메일은 반응이 좋기 때문에 사용자가 이메일을 여는 기기에 상관없이 잘 보입니다.

일반적인 HTML 이메일 코딩 실수를 피하기 위한 체크리스트

아래에서 일반적인 HTML 이메일 코딩 실수를 피하는 방법에 대한 주요 규칙을 찾을 수 있습니다. 이러한 규칙을 따르면 배달 가능성 및 이메일 표시 문제를 피할 수 있습니다.

• 이메일에 일반 텍스트 버전을 추가하십시오.
• JavaScript, ActiveX, Flash 등을 사용하지 마십시오. 비디오나 오디오를 추가해야 하는 경우 웹사이트에 업로드하고 링크를 제공합니다.
• 웹 페이지의 로딩 시간을 늘리지 않도록 리디렉션을 피하십시오.
• 단축 링크를 사용하지 마십시오. HTML을 사용하여 텍스트 또는 이미지를 링크로 변환합니다.
• 이메일 본문 크기를 100KB로 제한하거나 최소한 보내는 공급자와 구독자가 가장 많이 사용하는 이메일 클라이언트의 제한을 확인하십시오.
• Arial, Comic Sans MS, Courier New, Times New Roman 또는 Verdana와 같은 이메일 친화적인 글꼴을 선택하십시오.
• 하나의 이메일에 두 가지 이상의 색상을 결합하지 마십시오. 그렇지 않으면 산만해 보일 수 있습니다.
• MS Word 또는 웹 사이트와 같은 텍스트 편집기에서 이메일의 텍스트와 이미지를 복사하지 마십시오. 일부 불필요한 서식을 잡을 위험이 있습니다.
• 6자리 색상 형식을 사용합니다.
• 파일을 첨부하지 마십시오. 대신 파일 로딩 페이지에 대한 링크를 제공하십시오.
• 이미지에 대체 텍스트를 추가하는 것을 잊지 마십시오.
• 이미지로만 이메일을 보내지 말고 항상 텍스트를 추가하십시오.
• 캠페인을 시작하기 전에 이메일을 테스트하는 것을 잊지 마십시오. 최소 3개의 이메일 클라이언트와 다른 장치를 사용하십시오.

그리고 그 모든 것에 대해 생각할 필요가 없습니다. SendPulse를 무료로 사용하기 시작하십시오!