이메일에 있는 블루링크에 좌절감을 느끼셨나요? 선을 위해 그들을 정복하십시오

게시 됨: 2021-07-24

이메일의 파란색 링크: 유용한 사용성 기능이지만 사려 깊은 브랜드 캠페인을 디자인하려는 이메일 마케팅 담당자에게 너무 자주 골칫거리가 됩니다.

수년에 걸쳐 우리는 단순한 것에서 복잡한 것까지 HTML 이메일에서 파란색 링크를 처리하는 여러 가지 방법을 보았습니다.

그러나 어떤 기술이 가장 효과적입니까? 마케팅 담당자는 이메일의 유용한 기능을 희생하지 않고 어떻게 아름다운 이메일 디자인을 보장할 수 있습니까? 이 가이드에서는 파란색 링크가 무엇인지, 그리고 이러한 링크가 귀하의 이메일을 망치는 것을 방지하는 가장 좋은 방법을 살펴보겠습니다. 배울 준비:

파란색 링크란 무엇입니까?
당신은 그들을 제거해야합니까?
각 이메일 클라이언트에 대해 변경하는 방법
대체(및 Outlook의 경우)로 엣지 케이스

주의: 깨진 이메일의 다른 원인이 있습니다.

이메일 오류로 인해 몸이 떨리십니까? 파란색 링크는 이메일이 깨진 것처럼 보일 수 있는 한 가지 방법일 뿐입니다. 이메일을 손상시킬 수 있는 요소와 진실을 유지하기 위한 팁 및 요령에 대해 자세히 알아보세요.

일반적인 문제 및 수정 사항 공개 →

파란색 링크란 무엇입니까?

파란색 링크는 정확히 다음과 같습니다. 하이퍼링크에 공통적인 기본 파란색 밑줄이 있는 스타일을 사용하는 이메일의 텍스트입니다. 이메일 마케팅, 특히 모바일 장치에서 이러한 파란색 링크는 이메일 클라이언트가 자동으로 생성하여 사람들에게 정보를 저장하거나 정보와 상호 작용할 수 있는 옵션을 제공합니다.

최근 몇 년 동안 Apple Mail은 이러한 링크 중 일부에 대한 처리를 업데이트했으며 더 이상 파란색으로 바꾸지 않습니다. 주소와 시간의 경우 iOS 기기는 원래 스타일을 유지하지만 클릭할 수 있음을 나타내기 위해 점선 밑줄을 추가합니다.

이것은 일부 블루 링크 문제에 대한 접근성을 위한 한 단계이지만 주소와 시간 이상이 영향을 받을 수 있기 때문에 모든 문제를 해결하지는 못합니다.

대부분의 iOS 버전의 Apple Mail은 전화번호, URL 및 이메일 주소를 파란색으로 변경하지만 실제 주소와 시간은 원래 스타일 색상(아래 예에서 빨간색)으로 유지합니다.

iOS Apple Mail의 파란색 링크

iOS 13에서 콘텐츠는 계속 연결되지만 원래 스타일이 지정된 색상은 유지됩니다.

Apple Mail iOS 13의 자동 링크

테스트에서 다음은 연결된 콘텐츠(파란색 또는 기타)가 되기 위한 주요 후보입니다.

구애
날짜
이메일 주소
웹사이트 URL
타임스
전화 번호

파란색 링크의 장점: 제거해야 할까요?

각각의 경우 연결된 정보는 가입자가 연락처 목록에 전화번호를 추가하거나 온라인에서 주소를 조회하려는 경우에 유용할 수 있습니다. 브랜딩 관점에서 보면 성가시지만 파란색 링크는 실제로 사용성과 접근성에 뛰어나 중요한 기능을 제공합니다.

이것은 논쟁을 불러일으킵니다: 우리는 처음에 이 행동을 재정의해야 합니까?

한편으로 우리는 이메일 디자인이 일관되고 브랜드를 유지하기를 원합니다. 이메일 클라이언트가 우리 고유의 스타일을 재정의하면 놀라움을 유발하고 이해 관계자를 화나게 하며 접근성 문제를 일으킬 수 있습니다. 반면에 사람들은 이 기능에 의존하고 이메일의 정보에 대해 조치를 취할 수 있기를 기대할 수 있습니다.

그렇다면 이메일 디자이너는 어떻게 해야 할까요?

이러한 링크 의 기능 이 아닌 스타일을 재정의하는 것이 가장 좋은 방법이라고 생각합니다. 파란색 링크에 대한 이상적인 솔루션은 자동으로 생성된 링크에 대해 조치를 취할 수 있는 기능을 유지해야 하지만 운영 체제나 이메일 클라이언트가 아닌 해당 링크의 스타일을 지정할 수 있어야 합니다.

어떤 사람들은 파란색 밑줄이 그어진 스타일을 무시하는 것이 너무 지나치다고 주장할 것입니다. 그러나 기본 동작에는 해결할 수 있는 심각한 접근성 문제가 있습니다. 예를 들어, 주소에 파란색 링크가 추가된 이 이메일 바닥글을 보십시오.

이메일 바닥글의 파란색 링크

일반적인 디자인입니다. 검정색 배경에 흰색 텍스트, 그 위에 있는 콘텐츠에 초점을 유지하기 위한 작은 텍스트. 정보를 연결하고 파란색 스타일을 적용하면 대비가 매우 낮습니다. 시각 장애가 있는 사람 또는 밝은 환경에서 흐린 화면이나 모바일 장치를 사용하는 뛰어난 시력을 가진 사람은 해당 정보를 소비하는 데 매우 어려움을 겪을 것입니다. 유용한 기능은 실망스러운 경험으로 바뀝니다.

모든 이메일 클라이언트가 자동 연결을 동일하게 취급하는 것도 아닙니다. 파란색 링크가 가장 일반적인 원인이지만 일부 클라이언트는 글꼴 색상을 유지하지만 미묘한 밑줄을 추가합니다. 일부 클라이언트는 전화번호는 연결하지만 주소는 연결하지 않습니다. 이러한 모든 불일치로 인해 관리하기가 어려울 수 있습니다.

그렇다면 이메일 디자이너는 파란색 링크를 어떻게 처리할 수 있을까요?

자동 링크 스타일을 재정의하는 가장 좋은 방법

범위 및 클래스로 일반적으로 연결된 텍스트를 대상으로 지정하거나 동작을 중단하기 위해 해당 텍스트에 보이지 않는 문자를 삽입하는 것과 같이 과거에 다양한 솔루션을 살펴보았지만 가장 좋은 솔루션은 임베디드 CSS에 의존하는 것입니다. 자동 링크 스타일을 재정의합니다. 그런 다음 밑줄 및 브랜드 색상과 같은 값을 추가하여 사람들이 콘텐츠를 계속 클릭할 수 있음을 알립니다. 사용성과 접근성에 이상적입니다.

이 방법에는 많은 것이 있습니다. 다음을 수행할 수 있습니다.

텍스트에 나만의 스타일을 설정하세요.
다른 링크에 다른 스타일을 사용하십시오. 이메일 전체에 하나의 스타일을 강요하지 않습니다.
이메일 클라이언트 및 운영 체제에서 도입한 기능을 유지합니다.
스타일링을 간편하게 유지하세요.

이는 귀하와 귀하의 구독자 모두에게 윈-윈입니다.

유일한 주의사항은? 다른 이메일 클라이언트는 텍스트를 자동 연결할 때 다른 작업을 수행하므로 스타일을 재정의하려면 여러 CSS 규칙이 필요합니다.

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

이메일 클라이언트가 Litmus Email Previews를 사용하여 이메일 렌더링을 업데이트할 때를 항상 알 수 있습니다. 모든 인기 있는 이메일 클라이언트 및 장치에서 이메일을 미리 보고 보내기 전에 오류를 찾아냅니다.

더 알아보기 →

Apple Mail에서 파란색 링크 무시

텍스트 주위에 링크를 생성할 때 Apple Mail은 해당 링크에 일반적인 href 이외의 추가 속성을 추가합니다. 간단한 예는 다음과 같습니다.

<a href="#" x-apple-data-detectors="true">

우리는 과거에 iOS 블루 링크를 처리하는 많은 방법을 다루었습니다. 다행스럽게도 지금 해야 할 일은 특정 속성이 있는 요소를 대상으로 지정하고 해당 요소의 스타일을 재정의하는 것입니다.

이메일의 스타일 블록에서 다음을 추가하여 Apple이 추가한 링크를 대상으로 지정하고 해당 텍스트가 상위 요소의 스타일을 상속하도록 합니다.

a[x-apple-data-detectors] {
color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

기능은 그대로 유지되지만 텍스트는 원래 의도한 대로 스타일이 지정됩니다.

사람들이 콘텐츠를 클릭할 수 있다는 것을 알 수 있도록 색상 값을 상속에서 브랜드 디자인과 일치하는 16진수 색상 코드로 변경하고(예: 밝은 파란색의 경우 #77d6fc) 텍스트 장식 값을 밑줄로 변경합니다.

Gmail에서 파란색 링크 무시

자동 링크된 텍스트에 속성을 추가하는 대신 Gmail은 완전히 다른 작업을 수행합니다. 이메일의 HTML을 처리할 때 Gmail은 문서 유형을 밑줄 요소(u)로 변환합니다. 이 사실을 알면 자신의 HTML에 후크를 추가하여 Gmail용 요소만 대상으로 지정할 수 있습니다. 이것은 일반적으로 body 요소에 ID를 추가하여 수행됩니다.

<body id="body"></body>

Gmail 파란색 링크를 수정하는 몇 가지 방법이 있지만 다음을 권장합니다. 스타일 태그에 다음을 사용하여 Gmail 본문에 포함된 모든 링크를 대상으로 지정하고 프로세스에서 추가된 스타일을 재정의합니다.

u + #body a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

Apple Mail 트릭과 정확히 동일한 CSS 속성을 사용하며 특별히 Gmail에 적용되었습니다.

구독자가 자동 링크를 클릭할 수 있음을 분명히 하기 위해 색상 및 텍스트 장식 값을 업데이트하는 것을 잊지 마십시오. 다시 말하지만 일부 사람들은 옵션을 선호하므로 숨기지 마십시오.

Samsung Mail에서 파란색 링크 무시

Samsung Mail은 Gmail과 유사한 기술을 사용합니다. 그러나 한 요소를 다른 요소로 변환하는 대신 Samsung Mail은 "MessageViewBody"라는 이메일에 특정 ID를 추가합니다. Gmail과 마찬가지로 스타일 블록에 포함된 해당 ID와 링크를 대상으로 지정합니다.

#MessageViewBody a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

다시 말하지만 똑같은 CSS 속성이 이전과 동일하게 사용됩니다. 그리고 브랜드의 색상 값으로 바꾸고 링크가 디자인 가이드의 일부인 경우 링크에 밑줄을 긋고 싶을 것입니다.

이제 모두 함께

위의 모든 CSS 선택기를 하나의 규칙으로 연결하는 것이 편리하지만 Gmail은 속성 선택기를 사용하여 CSS를 제거하므로 수정 사항이 Gmail에서 제거되어 파란색 링크가 자유롭게 로밍될 수 있습니다.

따라서 세 가지 규칙을 모두 별도로 유지해야 합니다. 좋은 소식은 이메일 템플릿에 추가된 후 대부분의 이메일 클라이언트에서 파란색 링크를 제거하기 위해 코드에서 추가 작업을 수행할 필요가 없다는 것입니다.

결합하면 HTML은 다음과 같이 보일 수 있습니다.

<html>
	<head>
	<style>
a[x-apple-data-detectors] {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

u + #body a {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

#MessageViewBody a {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}
</style>
</head>
<body id="body">

 <your email code goes here as normal>

</body>

다음은 아무 것도 하지 않고(수정 없이), 기본 스타일을 추가하지 않고(수정 포함) 제거하고, 기본 스타일을 사용자 고유의 스타일로 교체(스타일 수정 포함)한 경우의 예입니다.

수정 없이	수정으로	스타일 수정으로

Just-in-case 코더(및 Outlook)에 대한 엣지 케이스 처리

아시다시피 이메일 디자인에는 항상 극단적인 경우가 있습니다. 파란색 링크도 다르지 않습니다. 일부 이메일 클라이언트는 여전히 텍스트를 자동 링크합니다. 그리고 이메일 앱은 1-2일마다 변경되기 때문에 위의 세 클라이언트는 이러한 수정 사항을 깨는 업데이트를 매우 쉽게 도입할 수 있습니다.

이러한 극단적인 경우에는 다른 접근 방식을 취할 수 있습니다.

이 기술은 자동 링크 후보를 전자 메일 헤드의 CSS를 통해 대상으로 지정하는 요소로 래핑하는 것을 포함합니다. 컨테이너 요소에는 타겟팅에 적용된 클래스가 있습니다. 디자이너가 x-apple-data-detectors 핵을 사용할 수 있다는 것을 알아내기 전에 이 트릭은 Apple Mail 파란색 링크에 일반적으로 사용되었으므로 일반적으로 클래스에 사용되는 "appleLinks"와 같은 것을 볼 수 있지만 무엇이든 될 수 있습니다.

이 예에서는 "blueLinks" 클래스를 사용합니다.

<p class="blueLinks">+1 (800) 123-4567</p>

이메일 클라이언트는 해당 요소 내에 링크를 추가하므로 이메일 스타일 블록의 CSS에서 링크를 대상으로 지정하고 특정 CSS 속성을 재정의합니다.

.blueLinks a { 
            color:inherit !important; 
            text-decoration: none !important; 
}

이것은 매우 강력한 솔루션일 수 있지만 더 많은 유지 관리가 필요합니다. 이메일의 내용은 자주 변경될 수 있으므로 해당 클래스가 적용되는 위치를 추적하고 의심되는 모든 텍스트를 설명하는 것은 시간이 많이 걸리고 오류가 발생하기 쉽습니다.

그렇기 때문에 우리는 일반적으로 위의 세 가지 임베디드 CSS 솔루션을 사용하는 것이 좋습니다. 테스트에서 필요하다고 판단되는 경우에만 클래스 기반 솔루션으로 대체합니다.

Outlook 데스크톱 클라이언트에 대한 수정 사항

Outlook 모바일 앱은 위의 에지 케이스 솔루션으로 수정할 수 있지만 해당 수정 사항은 Outlook 데스크톱 클라이언트에서 작동하지 않습니다.

Outlook 데스크톱 클라이언트의 경우 URL과 이메일 주소는 <a> 태그로 묶지 않으면 항상 기본 색상으로 나타납니다. 대부분의 경우 이러한 링크가 제공된 웹페이지나 이메일 주소로 연결되기를 원할 것이므로 <a> 태그에 href 속성을 추가하고 링크로 스타일을 지정하면 좋은 구독자 경험을 얻을 수 있습니다.

링크처럼 보이지 않게 하려면 <a> 태그를 추가하고 나머지 사본처럼 보이도록 스타일을 지정할 수 있습니다.

극단적인 경우 URL이 일반 사본처럼 보이고 연결되지 않아야 하는 클라이언트가 있을 수 있습니다. 이 경우 이를 수행하는 유일한 방법은 링크 전체에 너비가 0인 조이너를 많이 추가하는 것입니다.

www.리트머스. com 은 w&zwj;ww&zwj;.&zwj;litm&zwj;us.&zwj;com이 됩니다.

이것은 가장 예쁜 것은 아니지만 작동합니다. 그러나 구독자가 URL을 복사하여 붙여넣으려고 하면 구독자와 마찰이 발생할 수 있습니다. 때때로 &zwj; 다른 프로그램에 붙여넣을 때 이상하게 보이거나 간섭합니다. 예를 들어, Firefox의 주소 표시줄에 위와 같이 코딩된 경우 URL을 복사하여 붙여넣으면 Litmus.com으로 바로 이동하지 않고 Google 검색이 됩니다.

너비가 0인 조이너가 있는 링크를 복사하여 브라우저에 붙여넣기

그래서 이것이 내가 최후의 수단-최하위-클라이언트-듣지 않는 이유 수정이라고 부르는 것입니다.

이 수정 사항은 이메일 주소에는 적용되지 않으며 제 경험상 모든 ESP(이메일 서비스 공급자)에서 작동하는 스타일이 지정되지 않고 클릭할 수 없는 이메일 주소를 만드는 솔루션을 찾지 못했습니다. 일부 ESP의 경우 href 속성 또는 <a href=”#”> 없이 <a> 태그를 사용할 수 있습니다. 그러나 일부 ESP에서는 이러한 해킹이 포함된 이메일을 보낼 수 없습니다.

기능이 아닌 스타일을 수정

완벽한 픽셀 디자인을 위해 파란색 자동 링크를 제거하고 싶을 수도 있지만 귀하의 이메일이 누구를 위한 것인지 기억하십시오: 귀하의 구독자. 이메일 클라이언트는 주소, 날짜, 전화번호 등을 클릭할 수 있도록 만드는 좋은 의도를 가지고 있으며 많은 사람들이 그런 방식을 좋아하고 기대합니다. 그들을 숨기지 마십시오. 대신 이메일 디자인과 일치하도록 변환하십시오. 이해 관계자와 구독자 모두를 행복하게 만들 것입니다.

Litmus를 사용하여 브랜드에 오류 없는 이메일 생성

100개 이상의 이메일 클라이언트, 앱 및 장치에서 이메일이 어떻게 보이는지 확인하십시오(더 이상 파란색 링크가 없습니까?). 깨진 이메일에 작별 인사를 하십시오. 아휴!

무료 평가판 시작 →

Jason Rodriguez가 2019년 7월 2일에 원래 게시했습니다. 2021년 7월 23일에 마지막으로 업데이트되었습니다.