#NoFailMail: 가장 흔한 5가지 이메일 디자인 실패(및 이를 피하는 방법)

게시 됨: 2018-08-03

디자인은 이메일에서 가장 당혹스러운 부분일 수 있습니다. #NoFailMail 이니셔티브를 시작하는 주요 이유 중 하나는 이메일 디자이너, 개발자 및 마케팅 담당자가 이미지, 서식 또는 이메일 클라이언트와 상관없이 이메일을 손상시킬 수 있는 모든 것을 정복할 수 있도록 돕는 것입니다.

당연하지만 어쨌든 우리는 말할 것입니다. 다음 이메일을 보내기 전에 디자인 오류를 찾아 수정해야 합니다. 디자인 실패는 독자가 메시지를 열고 그에 따라 행동하는 것을 방해하고 브랜드 평판에 영향을 줄 수 있습니다.

이 게시물에서는 이메일을 괴롭히는 5가지 일반적인 이메일 디자인 실패와 각각을 수정하는 방법에 대해 알아봅니다.

실패를 향해!

이메일 실패 # 1. 여러 화면 크기에 맞게 디자인하지 않았습니다.

이메일 세계는 더 이상 데스크톱과 모바일로 나뉘지 않습니다. 구독자는 벽에 걸린 "스마트" TV 화면부터 손목에 찬 스마트워치에 이르기까지 모든 기기에서 이메일을 읽을 수 있습니다.

그들은 당신의 메시지를 읽지 않을 수도 있습니다. 대신 Alexa 또는 Google Home과 같은 홈 어시스턴트나 스크린 리더가 이메일을 큰 소리로 읽는 동안 들을 수 있습니다.

Litmus와 Fluid의 2016년 연구에 따르면 모든 구독자의 51%가 스마트폰에서 제대로 표시되지 않거나 제대로 작동하지 않는 이메일을 구독 취소하고 43%는 해당 이메일을 스팸으로 보고합니다. 이러한 통계는 여러 화면을 위한 디자인이 더 이상 좋은 일이 아님을 증명합니다.

이메일 클라이언트 시장 점유율을 간략히 살펴보면 모바일이 어떻게 시장을 지배하는지 알 수 있습니다. 상위 10개 이메일 클라이언트 중 4개는 모바일 전용이며 전체 이메일의 40% 이상이 열려 있다고 주장합니다.

애플 아이폰, 29%
애플 아이패드, 10%
삼성 메일 4%
구글 안드로이드, 3%

다양한 크기의 콘텐츠 흐름을 만들기 위해 유동적인 테이블과 이미지를 사용하는 반응형 및 하이브리드 디자인은 클라이언트와 플랫폼에서 적절하게 렌더링되는 이메일을 만드는 가장 좋은 옵션입니다.

무료 전자책인 이메일 최적화 및 문제 해결에 대한 궁극적인 가이드는 데스크톱 중심 형식에서 모바일 최적화 형식으로 전환하는 경우 어떤 접근 방식이 가장 효과적인지 이해하는 데 도움이 됩니다.

그동안 다음 5가지 해결 방법을 통해 이메일을 더 읽기 쉽게 만들고 구독자가 이메일을 데스크톱에서 보고 있는지 모바일 장치에서 보고 있는지에 따라 더 쉽게 조치를 취할 수 있습니다.

더 큰 글꼴 크기를 사용하십시오.
더 작은 화면에 더 큰 글꼴이 있는 것처럼 들릴지 모르지만 작동합니다. 사람들이 귀하의 콘텐츠를 보기 위해 메시지를 꼬집거나 확대/축소하거나 좌우로 스크롤하지 않고도 가독성을 높이는 것이 목표입니다. 본문은 14픽셀, 헤드라인은 22픽셀의 최소 글꼴 크기를 권장합니다.
터치 친화적인 CTA를 디자인합니다.
손가락은 컴퓨터 마우스만큼 정확하지 않습니다. 클릭 가능한 링크를 버튼으로 교체하십시오. 그런 다음 해당 버튼의 크기를 최소 44px X 44px로 조정합니다. 이는 대략 평균 손가락 끝 크기입니다.
한 열로 줄입니다.
2열 또는 3열 이메일 레이아웃은 작은 화면에서 잘 읽히지 않습니다. 귀하의 목표는 집기, 확대 또는 측면 스크롤 없이 이메일 내용을 읽기 쉽게 만드는 것임을 기억하십시오. 반응형 디자인으로 이동할 준비가 되지 않은 경우 단일 열 레이아웃을 선택하면 더 많은 화면 크기에서 이메일을 더 쉽게 읽을 수 있습니다.
콘텐츠를 간소화하세요.
클릭이나 전환을 얻기 위해 이메일의 모든 콘텐츠가 정말로 필요합니까? 링크 추적 및 기타 도구를 사용하여 독자가 무엇을 클릭하고 무엇을 무시하는지 파악하십시오. 하나 또는 최대 두 개의 기본 복사 블록으로 이동합니다. 작은 제품 사진 뭉치 대신 강렬한 영웅 이미지로 시선을 사로잡으세요.
또한 짧은 문장과 카피 블록을 목표로 하세요. 표준 데스크톱 형식의 5줄 카피는 모바일에서 10줄 또는 15줄로 쉽게 줄바꿈할 수 있습니다.
공백을 펌핑하십시오.
공백은 이미지 및 복사 블록 주변의 빈 영역입니다. 콘텐츠 영역에 주의를 집중하고 CTA 버튼에 더 많은 호흡 공간을 제공하고 복사 블록에서 단락을 나누기 위해 자유롭게 사용합니다.

이메일 실패 #2: 파란색 링크가 디자인을 깨뜨리게 하는 것

자동 연결은 iOS와 Gmail 모두에서 유용하지만 때로는 성가신 특성입니다. 날짜, 전화번호 및 주소가 자동으로 클릭/탭 가능한 파란색 링크가 되면 이를 볼 수 있습니다.

탭 한 번으로 지도나 클릭 투 콜을 실행하거나 일정을 캘린더에 저장할 수 있어 편리하기 때문에 일반 텍스트 또는 개인 이메일에 유용할 수 있습니다. 그러나 흰색이 아닌 배경에서는 읽기 어려울 수도 있습니다. 또한 해당 이메일의 브랜딩을 방해합니다.

고맙게도 이러한 파란색 링크를 비활성화하는 방법이 있습니다. iOS Mail에서 Apple Mail의 데이터 탐지기 선택기 스타일을 지정하여 파란색 링크를 덮어쓸 수 있습니다(방법 알아보기). Gmail의 파란색 링크는 주소 또는 전화번호를 태그로 래핑하고 해당 범위의 스타일을 정의하는 방법을 사용하여 수정할 수 있습니다. 또는 CSS에 Gmail 관련 스타일 선언을 추가하여 모든 기본 스타일을 덮어쓸 수 있습니다(방법은 다음과 같습니다. ).

이메일에 파란색 링크가 있습니까?

90개 이상의 인기 있는 이메일 클라이언트 및 장치에서 이메일을 미리 보고 보내기 전에 파란색 링크를 포함한 오류를 찾아보세요.

더 알아보기 →

이메일 실패 #3: 이미지가 잘못되었습니다.

아, 이미지. 여러 면에서 잘못될 수 있지만 올바르게 사용하면 이메일에 활기를 불어넣을 수 있습니다. 따라서 우리가 매일 보는 이미지 실패와 디자인 손상을 방지할 수 있는 방법을 확인하는 데 시간을 할애할 가치가 있습니다.

잘못된 이미지 형식 사용
여기서 해결책은 JPEG, GIF, PNG 또는 SVG이든 간에 "올바른" 이미지 형식을 사용하지 않는 것입니다. 왜냐하면 하나의 올바른 형식이 없기 때문입니다. 각 형식은 파일 크기, 압축, 품질 및 최상의 사용 사례에서 다른 형식과 다릅니다. 가장 일반적인 이미지 형식의 장단점을 자세히 비교하려면 "PNG, GIF 또는 JPEG? 이메일에 가장 적합한 이미지 형식은 무엇입니까?” 리트머스 블로그에서
Retina 디스플레이에 최적화되지 않음
"레티나 디스플레이"는 모바일 장치에서 볼 수 있는 높은 DPI 디스플레이를 나타내기 위해 Apple에서 만든 용어입니다. Retina 디스플레이에 최적화되지 않은 이미지는 종종 흐릿하거나 흐릿하게 표시되어 수준 이하의 시각적 경험을 제공합니다.

비-레티나 대 레티나 이미지
시각적 레티나를 준비하려면 이미지를 표시하려는 크기의 약 2배로 만든 다음 HTML에서 이미지 크기를 원하는 크기로 정의합니다. 300×200 픽셀의 이미지를 표시하려면 600×400으로 만들고 HTML 속성이나 CSS 속성을 사용하여 300×200으로 정의합니다.
그래도 파일 크기를 주시하십시오. 레티나 이미지를 사용하면 시각적인 모양이 개선되지만 파일 크기도 커지므로 받은 편지함에 이미지를 로드하는 데 시간이 더 오래 걸릴 수 있습니다. Retina에 최적화된 이미지를 여러 개 사용하는 경우 Gmail에서 메시지 클리핑을 트리거할 수 있습니다.

이미지 파일 크기 + 로드 시간 테스트

Litmus Checklist를 사용하면 파일 크기, 로드 시간 및 끊어진 링크에 대해 이미지를 테스트할 수 있습니다. 또한 인기 있는 이메일 클라이언트에서 캠페인이 어떻게 보이는지 즉시 확인할 수 있습니다.

체크리스트 시작 →

이메일 실패 #4: 이미지를 위해 디자인하지 않음

이미지의 다른 문제는 렌더링되지 않을 때 발생합니다. 일부 이메일 클라이언트는 사용자가 허용할 때까지 이미지 로드를 자동으로 차단합니다. 또는 사용자는 기본적으로 이미지를 차단하고 보고 싶은 이미지를 선택하는 것을 선호합니다.

어느 쪽이든, 이미지 차단은 메시지가 열리자마자 이메일의 통신 능력을 감소시킵니다. 사용자가 이미지 차단을 해제하도록 강제할 수는 없지만 이미지 차단 메시지를 보기 좋게 만들기 위한 조치를 취할 수 있습니다. ALT 텍스트 및 방탄 버튼은 구현하기 쉽고 이미지 없이 손실되었을 수 있는 변환을 복구하는 데 도움이 될 수 있습니다.

기본 또는 스타일이 지정된 ALT 텍스트를 사용합니다. ALT 텍스트는 이미지를 설명하기 위해 선택한 단어의 조합으로 이미지가 차단될 때 표시됩니다. 대부분의 이메일 편집기는 이미지 설명을 작성할 수 있는 공간을 제공하지만 받은 편지함을 빠르게 살펴보면 거의 모든 다른 이메일에 이미지가 있지만 ALT 텍스트는 없음을 알 수 있습니다. 이미지가 비활성화된 경우 ALT 텍스트가 없는 이미지가 많은 이메일은 다음과 같습니다.
다음은 이미지가 활성화된 동일한 이메일입니다. 고객이 무엇을 놓쳤는지 확인하시겠습니까?
좋은 ALT 텍스트 연습은 이미지 레이블뿐만 아니라 효과적인 설명을 작성하는 것입니다. 한 단계 더 나아가려면 스타일이 지정된 ALT 텍스트를 사용해 보세요. 여기에 약간의 인라인 CSS를 추가하여 ALT 텍스트의 글꼴, 색상, 크기, 스타일 및 두께를 변경합니다.
방탄 버튼 사용
이미지 안에 클릭 유도문안을 넣으면 이미지가 꺼지면 보이지 않습니다. 방탄 버튼은 JPG 및 GIF와 같은 이미지 형식 대신 HTML 및 CSS를 사용합니다. 이메일에 표시되는 이미지 렌더링에 의존하지 않습니다. 다음은 이미지가 활성화된 동일한 이메일입니다.

Litmus 커뮤니티이자 제품 전도사인 Jason Rodriguez는 그의 가이드인 "The Ultimate Guide to Bulletproof Buttons for Email Design"에서 버튼 디자인에 대한 네 가지 기본 접근 방식을 간략하게 설명합니다. 각 접근 방식의 코딩, 예제 및 장단점을 확인하려면 확인하십시오.

이메일 실패 #5. 일반 텍스트 이메일에 최적화되지 않음

아니오, 우리는 2000년대 초반의 위대한 텍스트 대 HTML 논쟁을 되살리지 않을 것입니다. 그러나 일반 텍스트 이메일은 이메일 전략에서 여전히 중요한 역할을 합니다. 특히 HTML을 렌더링하지 않는 스마트워치, 스크린 리더 및 홈 어시스턴트의 성장과 함께 더욱 그렇습니다.

다음 팁은 독립 실행형 메시지이든 여러 부분으로 구성된 MIME 메시지의 텍스트 버전이든 매력적인 일반 텍스트 이메일을 만드는 데 도움이 됩니다.

짧지만 명확한 헤드라인을 작성하십시오. 최소한 한 줄의 공백을 사용하여 각 헤드라인을 그 아래의 카피 블록과 구분하십시오. 대시 또는 등호와 같은 인쇄 장치로 설정하십시오.
긴 카피 블록을 쪼개십시오. 무섭고 읽을 수 없는 회색 복사의 강을 피하기 위해 더 짧지만 더 많은 복사 블록을 사용하십시오.
목록으로 정보 계층을 만듭니다. 일반 텍스트 이메일의 모든 유형은 동일한 글꼴과 포인트 크기입니다. 따라서 독자를 핵심 요점으로 안내하기 위해 더 열심히 노력해야 합니다. 목록을 사용하여 시리즈의 정보를 강조 표시합니다. 대시(-) 또는 별표(*)와 같은 텍스트 친화적인 지정으로 각 항목을 설정합니다. (글머리 기호는 일반 텍스트에서 작동하지 않습니다.)
공백을 자유롭게 사용하십시오. 여백은 쉽게 스캔할 수 있도록 관련 정보를 구성합니다. 복사 블록, 클릭 유도문안, 머리글 또는 관리 바닥글 사이에 넓은 여백과 추가 줄 바꿈을 사용합니다.
CTA를 정의합니다. CTA 버튼이 있기 전에 사람들은 무엇을 했습니까? 그들은 공백과 같은 주의를 끄는 요소를 사용하여 다른 사본과 구분하고 화살표(>> 및 <<)와 같은 인쇄 장치를 사용하여 눈에 띄게 했습니다. CTA의 긴 목록을 피하고 공백으로 둘러싸서 클릭 또는 손가락 친화적으로 만들 수 있습니다.

이 이메일은 일반 텍스트 이메일에 대한 모든 모범 사례를 보여줍니다.

이전 블로그 게시물에서 #NoFailMail을 보내는 더 많은 방법을 다루었습니다. #NoFailMail에 대한 추가 팁 및 리소스

#NoFailMail: 오류 방지가 이메일 성공의 열쇠인 이유
테스트가 5가지 가장 큰 이메일 실패를 피하는 데 도움이 되는 방법
피해야 할 카피라이팅 실패 5가지

이와 같은 리소스를 더 원하십니까? 뉴스레터에 가입하여 최신 이메일을 받아보세요.