Outlook 이메일 렌더링: 걱정을 멈추고 Outlook을 사랑하는 법을 배운 방법

게시 됨: 2021-07-02

우리는 모두 거기에 있었다. 흥미로운 GIF, 접근 가능한 버튼, 시선을 사로잡는 이미지로 멋진 이메일을 만들 수 있습니다. 그런 다음 테스트하면 멋지게 보입니다. Outlook에서는 완전히 망가진 것뿐입니다. 사람들은 깨진 이메일로 원하는 방식으로 참여할 수 없습니다.

Outlook은 오랫동안 이메일 마케팅 담당자의 골칫거리였습니다. 하지만 꼭 그래야 합니까? 어떻게 작업할 수 있습니까? 많은 결점에도 불구하고 Outlook을 어떻게 사랑하게 되었는지 알아보세요. 나는 다음을 다룰 것이다:

Outlook 버전
Outlook 단점에 대한 팁
수정을 위한 코드

다양한 버전의 Microsoft Outlook

"Outlook"이라는 이름은 몇 가지 다른 렌더링 엔진과 적어도 두 가지 보기 설정이 있는 여러 이메일 클라이언트를 포함합니다. 방치하면 이 모든 것이 큰 골칫거리가 될 수 있습니다. 잠수해서 우리가 그것을 조금 바로잡을 수 있는지 봅시다.

전망 2007-2019

Outlook의 Windows 데스크톱 버전입니다. 이들은 Word를 렌더링 엔진으로 사용합니다. 이는 이메일이 편지를 쓰는 것과 같았을 때 의미가 있었습니다. 아, 더 단순한 시대. 그러나 이메일 마케팅 담당자의 경우 HTML 이메일을 렌더링하는 데 적합하지 않습니다.

120DPI (인치당 도트 수)는 복잡성을 가중시킵니다. Windows 사용자는 120 DPI를 선택하여 화면 해상도를 높일 수 있습니다. 그렇다면 데스크톱 이메일 클라이언트는 이를 존중하고 이미지와 텍스트를 더 크게 업데이트합니다. 이메일에 큰 피해를 줄 수 있습니다.

Mac용 Outlook

이것은 Outlook의 Mac 데스크톱 버전입니다. Webkit을 렌더링 엔진으로 사용합니다. 이는 이메일 렌더링에 관한 한 일반적으로 Apple Mail 및 iOS와 동등하다는 것을 의미합니다. 브라우저에서 잘 보인다면 여기에서도 잘 보일 가능성이 있습니다.

Outlook.com 및 Outlook 모바일 앱

이러한 클라이언트는 Webkit 또는 Webkit 기반 렌더링 엔진을 사용하므로 우수한 HTML 렌더링을 제공하고 일반적으로 이메일을 손상시키지 않습니다.

아웃룩 오피스 365

Outlook Office 365에는 데스크톱 전자 메일 클라이언트와 웹 기반 전자 메일 클라이언트의 두 가지 버전이 있습니다. 데스크톱 버전은 Outlook 2007-2019와 유사하며 Word를 렌더링 엔진으로 사용합니다(이메일에는 어려움). 웹 기반 이메일 클라이언트는 Webkit 또는 Blink를 사용하고 Outlook.com과 유사하게 이메일을 렌더링합니다(훨씬 더 쉽습니다).

더 이상 깨진 이메일이 없습니다.

모든 버전의 Outlook을 포함하여 90개 이상의 이메일 클라이언트, 앱 및 장치에서 이메일을 미리 보고 브랜드에 오류 없는 구독자 경험을 보장합니다.

방법 알아보기 →

모두를 지배하는 하나의 Outlook

1월에 Microsoft는 2022년 언젠가부터 데스크톱 클라이언트를 어디에서나 작동하는 하나의 클라이언트로 대체한다는 "One Outlook" 비전을 발표했습니다.

새 이메일 클라이언트는 현재 Outlook 웹 앱을 기반으로 합니다. 따라서 Webkit 기반 렌더링 엔진이 있고 HTML 이메일을 잘 렌더링할 것이라는 희망이 높습니다. 불행히도 모든 오래된 데스크톱 클라이언트는 그런 일이 발생했을 때 그냥 사라지지 않을 것이므로 어느 정도는 여전히 지원되어야 합니다.

하든 하지 않든 시도는 없다

아직 머리가 돌아가고 있습니까?

그렇다면, 이를 요약해 보겠습니다. 핵심 내용은 Word와 Webkit이라는 두 가지 다른 렌더링 엔진으로 작업하고 있다는 것입니다. Webkit은 코딩하기 쉽고 Word는 더 어렵습니다. 어느 쪽도 정말 좋지도 나쁘지도 않습니다. 그들은 단지 다른 접근 방식이 필요하고 고려해야 할 다른 단점이 있습니다.

Outlook 데스크톱 클라이언트의 몇 가지 일반적인 렌더링 문제와 해결 방법을 살펴보겠습니다.

이미지에 너비 및 높이 속성을 포함하세요.

Outlook은 너비 및 높이에 대한 CSS 스타일을 지원하지 않으며 너비 및 높이 속성을 포함하지 않으면 Outlook에서 이미지를 실제 크기로 표시합니다. 레티나 이미지를 사용하고 있다면(그렇게 해야 함) 이메일을 깨뜨릴 수 있는 거대한 이미지를 얻게 될 것입니다.

Outlook에서 너비 속성이 없는 망막 이미지를 사용하여 이메일을 더 넓게 만듭니다.

ALT 텍스트 포함

Outlook의 보안 메시지가 이미지에 대해 말하도록 하지 마십시오. ALT 텍스트를 포함해야 합니다. 특히 Outlook은 사람들이 기능을 설정하지 않는 한 기본적으로 이미지를 표시하지 않습니다.

테이블을 사용하십시오

이메일은 먼 길을 왔고 많은 이메일 클라이언트에서 <div> 블록을 사용할 수 있지만 Outlook은 그 중 하나가 아닙니다. Outlook은 너비 및 패딩을 포함하여 <div> 태그에 적용하는 대부분의 스타일을 무시합니다. 따라서 콘텐츠에 <table> 태그를 대신 사용하는 것이 중요합니다.

Outlook 전용 코드를 사용하여 렌더링 문제 해결

이렇게 하면 모든 문제가 해결되지 않을 수 있지만 일부 Outlook 관련 CSS를 포함하면 Outlook에서만 나타나는 렌더링 문제를 해결하는 데 도움이 되는 경우가 많습니다. 또는 Outlook에서 작동하지 않는 작은 블록을 숨기고 조건부 코드를 사용하여 특정 버전의 Outlook에서 작동하는 버전을 표시 할 수 있습니다. (조건부 코드에 대해서는 나중에 자세히 설명합니다.)

작은 이미지나 표 셀에 줄 높이를 추가하십시오.

Outlook은 표 셀과 이미지의 최소 높이를 설정합니다. 따라서 표 셀을 스페이서로 사용하거나 작은 이미지가 있는 경우 표시하려는 높이와 동일한 요소에 줄 높이 속성을 추가해야 합니다. 예를 들어:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

DPI 스케일링 문제 수정

Windows 컴퓨터에는 텍스트와 그래픽 요소를 확장하여 더 크고 읽기 쉽게 만드는 전역 설정이 있습니다. 이것은 접근성에는 좋지만 일부 요소만 확장되고 다른 요소는 확장되지 않기 때문에 Outlook에는 그다지 좋지 않습니다.

다행히 수정 사항이 있습니다. 먼저 HTML 태그에 XML 네임스페이스를 추가해야 합니다.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

그런 다음 </head> 태그 바로 앞에 이미지 크기 조정을 위해 수정할 몇 가지 코드를 추가합니다.

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

마지막으로, 설정된 너비를 테이블의 속성이 아니라 픽셀이 있는 CSS 속성으로 포함해야 합니다.

✗ 너비 = "600" 이 아닌 경우 :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

예, style="width:600px;" :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

그러면 120 DPI 클라이언트에 대한 대부분의 문제가 해결됩니다. 이 수정 전후를 나란히 비교한 내용을 살펴보세요.

120 DPI의 Outlook 2013 (수정 없음)	120 DPI에서 Outlook 2013 (수정 포함)

무슨 차이가 있니?

호버 효과가 작동할 것으로 기대하지 마십시오.

Outlook은 호버 의사 클래스를 지원하지 않습니다. 다른 이메일 클라이언트에서 이메일의 접근성을 높이기 위해 상호 작용을 생성하려면 여전히 포함해야 하지만 Outlook에서 작동하지 않는다고 놀라지 마십시오.

요점을 전달하기 위해 애니메이션 GIF에 의존하지 마십시오.

Outlook 데스크톱 클라이언트는 애니메이션 GIF를 지원하지 않습니다. 초기 프레임에 Outlook에 표시하려는 이미지가 표시되도록 하거나 Outlook에서 애니메이션 GIF를 숨기고 조건부 코딩을 사용하여 원하는 정지 이미지를 표시할 수 있습니다. (다시 조건부 코딩에 대해 자세히 설명합니다.)

대체 없이 대화형 콘텐츠를 사용하지 마십시오.

대화형 전자 메일은 Outlook에 큰 도움이 되지 않습니다. Outlook에서 지원되지 않는 AMP 코딩 또는 체크박스 해킹에 의존합니다.

이메일용 AMP의 경우 AMP 파일 대신 HTML 파일이 표시되므로 추가 코딩이 필요하지 않습니다. 확인란 핵 상호 작용의 경우 대화형 콘텐츠를 숨기고 Outlook 대체를 표시해야 합니다. 다시 말하지만, 조건부 코딩은 여기에서 당신의 친구입니다.

이미지에 패딩이나 여백을 추가하지 마십시오.

Outlook은 이미지의 여백과 여백을 제거합니다. 대신 이미지 주변의 표 셀에 패딩을 추가해야 합니다. 또는 복사본과 동일한 셀에 이미지가 있는 경우 복사본 주변의 태그에 여백을 추가합니다(<h1>, <h2>, <p> 등).

두려움은 이메일 킬러입니다: Outlook 두려움에 맞서는 데 필요한 코드

Outlook의 데스크톱 이메일 클라이언트를 위한 훌륭한 이메일을 코딩하려면 "일반" HTML 및 CSS에서 벗어나야 합니다. 이러한 클라이언트에서 이메일을 빛나게 하는 데 도움이 되는 세 가지 유형의 코드(조건부 코딩, MSO 속성 및 VML)가 있습니다.

새로운 일을 하는 것은 두려울 수 있지만 그만한 가치가 있다고 약속합니다. 그리고 제대로 작동하게 되는 순간은? 12파섹 미만으로 Kessel Run을 만든 것처럼 느껴질 것입니다.

조건부 코딩

조건부 코딩은 구독자가 사용 중인 이메일 클라이언트 또는 브라우저를 살펴보고 다음과 같이 주석 내부의 조건부를 충족하는 경우에만 코드를 표시하는 코딩입니다.

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

버전 번호를 추가하여 Outlook 데스크톱 클라이언트의 특정 버전을 대상으로 지정할 수도 있습니다.

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

그러나 Outlook은 간단하지 않으므로 버전 번호가 이메일 클라이언트의 이름과 일치하지 않습니다.

아웃룩 2000 = mso 9
아웃룩 2002 = mso 10
아웃룩 2003 = mso 11
아웃룩 2007 = mso 12
아웃룩 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019 및 Office 365 데스크톱 = mso 16

그런 다음 보다 작거나(lt), 보다 크거나(gt), 작거나 같음(lte) 또는 크거나 같은 클라이언트 범위를 대상으로 지정하여 더 복잡해질 수 있습니다(gte). 예를 들어:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

따라서 특정 클라이언트에서 이상한 일이 발생하는 경우에만 해당 클라이언트를 대상으로 지정하고 더 나은 콘텐츠를 숨기고 표시할 수 있습니다.

조건부 주석을 사용하여 "mso가 아닌 경우"를 의미하는 "if !mso"라고 말하여 Outlook에서 콘텐츠를 숨길 수도 있습니다.

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

명심해야 할 사항: 조건부 코드는 Outlook 데스크톱 클라이언트에서만 작동합니다. 이것은 많은 문제가 발생하는 곳이므로 웹 메일 클라이언트에 대한 수정 사항보다 이러한 문제가 더 필요할 것입니다.

그러나 웹 클라이언트를 대상으로 하는 방법도 있지만 Outlook 웹 클라이언트를 다른 대상보다 대상으로 지정할 수 있는 방법은 없습니다. 따라서 Outlook.com을 대상으로 하는 경우 Office 365 웹 클라이언트(데스크톱 클라이언트 제외)도 대상으로 합니다.

Outlook이 모든 클래스 이름에 "x_"를 추가한다는 사실을 이용하여 Outlook 웹 클라이언트를 대상으로 지정할 수 있지만 특성 선택기에는 이 작업을 수행하지 않습니다. 따라서 "foo" 클래스가 있고 Outlook 웹 클라이언트에 대해 다르게 처리하려는 경우 다음 코드로 대상을 지정할 수 있습니다.

[class~="x_foo"] { }

(이 수정 사항에 대해 Mark Robbins에게 감사하고 howtotarget.email에 대해 Dylan Smith에게 감사합니다.)

MSO 속성

위에서 언급했듯이 Outlook 데스크톱 전자 메일 클라이언트에만 영향을 주는 추가할 수 있는 Outlook 관련 CSS가 있습니다. 다음은 매우 일반적이며 이미 들어본 적이 있을 수 있는 몇 가지입니다.

mso-hide: 모두;

이 속성은 Outlook 데스크톱 클라이언트에서 모든 것을 숨깁니다. 이메일이 전달될 때 제거되므로 구독자가 자주 이용하는 기능인 경우 단독으로 사용하지 않도록 주의하십시오. "만약에 대비한" 코더인 경우 "mso가 아닌 경우" 조건부 코드와 함께 사용할 수 있습니다.

mso-line-height-rule: 정확히;

이 속성은 Outlook에서 사용자가 line-height 속성에 지정한 대로 줄 높이를 표시하도록 합니다. 그것 없이는 Outlook이 반드시 줄 높이를 존중하지 않습니다. 정밀도가 핵심인 산업에서 일하고 있다면 이 속성에 매우 익숙할 것입니다.

mso 패딩 대체

이것은 조금 덜 일반적이지만 때때로 사용해야했습니다. Outlook과 관련된 패딩을 선언할 수 있습니다. 따라서 셀에 있는 일반 패딩이 Outlook에서 제대로 렌더링되지 않는 경우 mso-padding-alt 를 사용하여 Outlook 디자인에 맞는 값을 설정할 수 있습니다.

mso-ansi-글꼴 크기

이것은 내가 가끔 사용하는 또 다른 하나입니다. Outlook에 특정한 글꼴 크기를 설정할 수 있습니다. 따라서 Outlook에서 글꼴을 다른 전자 메일 클라이언트보다 약간 크게 렌더링하고 원하지 않는 짧은 사본 줄이 끝나는 경우 mso-ansi-font-size를 추가 하고 사본에 맞게 글꼴 크기를 설정하십시오.

사용할 수 있는 MSO 속성이 훨씬 더 많으므로 렌더링 문제를 해결할 수 있는 항목이 있는지 확인하십시오.

VML

VML은 Vector Markup Language의 약자입니다. 그것은 마이크로소프트의 SVG 버전이지만 언어는 가치가 떨어지며 거의 사용되지 않습니다(예, 이메일!). Microsoft에는 온라인으로 보관된 VML 설명서가 있으므로 여전히 지원되는 Outlook에서 이를 사용하여 벡터를 만드는 방법을 찾을 수 있습니다. 이론적으로 Microsoft가 "One Outlook" 모델로 전환할 때 VML은 그대로 둘 수 있습니다.

VML 네임스페이스 선언을 포함해야 합니다. 일반적으로 다음과 같은 작업이 필요할 때마다 VML을 사용할 수 있도록 상용구 템플릿의 <html> 요소에 추가합니다.

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

일단 가지고 있으면 MSO 조건문 내에서 코드에 VML을 추가할 수 있습니다.

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

이 코드는 200x50px 크기의 파란색 직사각형을 만듭니다. 이메일에서 실제로 사용할 수 있는 것은 아니지만 VML을 사용하여 코드, 배경 이미지 및 배경 그라디언트에 둥근 모서리가 있는 버튼을 추가할 수 있습니다. Campaign Monitor에는 둥근 모서리가 있는 배경 이미지 또는 버튼을 만드는 데 도움이 되도록 Stig에서 만든 두 가지 도구가 있습니다. 여러분이 이제 막 배울 때 VML을 추가하는 좋은 방법을 찾았습니다.

또한 VML을 사용하여 가짜 절대 위치 지정, 그림자 효과 또는 Outlook에서 CSS 아트를 지원하는 폴백을 만들 수 있습니다. 일단 뛰어들면 VML로 할 수 있는 일이 많이 있습니다.

오래 살고 이메일

Outlook은 오랫동안 전자 메일 마케팅 담당자의 골칫거리였습니다. 그러나 반드시 그럴 필요는 없습니다.

올바른 도구를 사용하면 Outlook에서 올바르게 렌더링되는 멋진 이메일을 만들 수 있습니다. 이 게시물 전체에서 리소스를 확인하여 Outlook 코딩 촙을 구축하고 Litmus Builder 및 이메일 미리보기를 사용하여 이메일에서 테스트하십시오. Outlook용 코딩을 해결되기를 기다리는 퍼즐로 생각하면 Outlook과 Outlook의 모든 단점을 좋아하게 될 것입니다.

Litmus를 사용하여 Outlook에서 이메일 테스트

이메일이 Outlook에서 어떻게 보이는지 확인하고 보내기를 누르기 전에 문제를 해결하세요. Litmus를 사용하면 구독자가 참여할 수 있는 픽셀 완벽한 이메일을 만들고 있다는 확신을 가질 수 있습니다.

무료 평가판 시작 →