이메일의 스타일이 지정된 ALT 텍스트에 대한 궁극적인 가이드
게시 됨: 2016-10-31이메일 세계에서 일반적으로 인정되는 모범 사례는 이미지에 ALT 속성을 포함하는 것입니다. 대체 텍스트의 줄임말인 이메일의 ALT 텍스트는 이제 이메일 애호가를 위한 표준 관행입니다.
다음과 같은 몇 가지 이유가 있습니다.
- 대부분의 이메일 클라이언트는 기본적으로 이미지를 차단합니다. 경우에 따라 이메일 클라이언트는 이미지를 표시하는 대신 ALT 텍스트를 표시합니다. 이것은 특히 이메일 디자인이 주로 이미지로 구성된 경우에 확실히 편리합니다. ALT 텍스트는 이미지가 메시지를 전달할 수 없는 경우에도 메시지를 전달하는 데 도움이 될 수 있습니다.
- 잘못된 연결, 끊어진 링크 등으로 인해 이미지가 로드되지 않거나 로드되지 않는 상황에서는 이미지 대신 ALT 텍스트가 나타납니다.
- 시각 장애인 독자의 요구 사항에 민감한 마케팅 담당자와 디자이너는 ALT 텍스트가 스크린 리더에서 사용된다는 것을 이해합니다. 이러한 사용자는 텍스트나 이미지를 볼 수 없기 때문에 ALT 텍스트는 스크린 리더를 통해 이미지를 설명하는 역할을 합니다.
 | 이미지에 ALT 텍스트가 있는지 확인Litmus Checklist를 사용하면 이미지가 꺼진 상태로 이메일을 미리 볼 수 있으며 이미지에 ALT 텍스트가 누락된 경우 알림을 받습니다. 항상 자신있게 보내십시오. 리트머스 무료 체험 → |
표준 ALT 텍스트 설정
HTML 이메일의 이미지에 대한 ALT 텍스트를 설정하는 것은 간단합니다. 속성 으로 알려진 이는 HTML 구문의 표준 부분이며 이미지 태그에 포함됩니다.
<img src="logo.jpg" width="400" height="149" alt="Litmus" >높이 및 너비 값을 포함하는 것이 중요합니다. 이렇게 하면 이미지가 비활성화될 때 ALT 텍스트가 상주할 자리 표시자 상자가 생성되기 때문입니다.
표준 ALT 텍스트 표시
Gmail로 전송되는 ALT 텍스트가 없는 이메일에서 비활성화된 이미지는 다음과 같습니다.
ALT 텍스트 가 포함된 이메일의 비활성화된 이미지와 비교:
어느 쪽을 받는 것이 좋을까요?
ALT 텍스트에 스타일 추가
또한 약간의 인라인 CSS를 추가하여 ALT 텍스트의 글꼴, 색상, 크기, 스타일 및 두께를 변경하여 ALT 텍스트를 멋지게 만들 수 있습니다.
<img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>다음은 위의 동일한 예이지만 ALT 텍스트 스타일이 적용되었습니다.
이메일 클라이언트에서 스타일이 지정된 ALT 텍스트 지원
멋진 기술이지만 이것은 여전히 우리가 말하는 이메일이기 때문에 자연스럽게 지원이 여러 이메일 프로그램에 분산되어 있습니다. 다음 예제에서 스타일이 지정된 ALT 텍스트를 테스트하기 위해 Salesforce의 인상적인 Dreamforce 이메일에서 일부 요소를 차용했습니다.
웹메일 스타일의 ALT 텍스트 지원
| 웹메일 클라이언트의 ALT 텍스트 | |||
|---|---|---|---|
| 웹메일 클라이언트 | 기본적으로 차단된 이미지 | ALT 텍스트를 표시합니다 | 스타일이 지정된 ALT 텍스트를 표시합니다. |
| AOL 메일(인터넷 익스플로러) | ✘ | ||
| AOL 메일(파이어폭스) | |||
| AOL 메일(크롬) | |||
| Comcast(모든 브라우저) | ✘ | ✘ | |
| G-Suite 및 Gmail(Internet Explorer) | ✘ | ||
| G-Suite 및 Gmail(Firefox) | ✘ | ||
| G-Suite 및 Gmail(크롬) | ✘ | ||
| GMX.de(인터넷 익스플로러) | ✘ | ||
| GMX.de(파이어폭스) | ✘ | ||
| GMX.de(크롬) | ✘ | ✘ | ✘ |
| Mail.ru(모든 브라우저) | ✘ | ✘ | ✘ |
| 오피스 365(인터넷 익스플로러) | |||
| 오피스 365(파이어폭스) | ✘ | ||
| 오피스 365(크롬) | |||
| Outlook.com(인터넷 익스플로러) | 때때로* | ||
| Outlook.com(파이어폭스) | 때때로* | ||
| Outlook.com(크롬) | 때때로* | ||
| Web.de(인터넷 익스플로러) | ✘ | ||
| Web.de(파이어폭스) | ✘ | ||
| Web.de(크롬) | ✘ | ✘ | ✘ |
| 야후! 메일(인터넷 익스플로러) | |||
| 야후! 메일(파이어폭스) | |||
| 야후! 메일(크롬) | |||
Gmail과 같은 웹메일 클라이언트는 이러한 메일 프로그램이 다른 브라우저에서 액세스할 수 있기 때문에 가장 다양합니다. 모든 웹메일 클라이언트에서 스타일이 지정된 ALT 텍스트에 대한 지원은 사용 중인 브라우저에 따라 다릅니다. 스타일이 지정된 ALT 텍스트는 현재 버전의 Firefox, Chrome 및 Safari에서 지원됩니다.
예를 들어 스타일이 지정된 ALT 텍스트는 Firefox에서 Gmail을 보는 구독자에게 표시되지만 Internet Explorer에서는 일종의 작동만 가능합니다. 이 경우 색상은 지원되지만 글꼴 또는 기타 속성은 지원되지 않습니다. Internet Explorer는 일반적으로 스타일이 지정된 ALT 텍스트에 대해 비우호적인 브라우저인 것 같습니다. 색상은 지원되지만 글꼴은 지원되지 않는 경우가 많습니다.
- Internet Explorer의 Gmail 및 G-Suite
- Internet Explorer의 GMX.de
- Internet Explorer의 Office 365
- Internet Explorer의 Outlook.com
- Internet Explorer의 Web.de
- 야후! Internet Explorer의 메일
Gmail/Firefox의 스타일이 지정된 ALT 텍스트:
Gmail/IE의 스타일이 지정된 ALT 텍스트:
연결된 이미지의 ALT 텍스트
링크된 이미지의 ALT 텍스트는 일부 웹메일 클라이언트에서 밑줄이 그거나 파란색으로 표시될 수 있습니다. 야후! 연결된 이미지에서 ALT 텍스트에 밑줄을 긋는 반면 Gmail은 지정된 색상에 밑줄을 긋고 무시하며 기본적으로 생생한 파란색으로 설정합니다.
아웃룩닷컴
Outlook.com은 모든 이미지를 차단하는 대신 "의심스러운 발신자의 콘텐츠를 차단"한다고 주장하지만 누가 의심스러워 보이는지 어떻게 결정하는지 모르겠습니다! 무작위로 일부 발신자는 "신뢰"되어 자동으로 이미지를 표시하고 다른 발신자는 차단된 콘텐츠 경고를 표시합니다.
사용자는 Outlook.com 설정에서 수신 허용 - 보낸 사람 목록에 없는 사람의 이미지를 차단할 수 있습니다. Outlook.com은 "의심스러워 보이는" 발신자에 대해 Gmail과 유사한 이미지 차단 동작을 사용하여 이러한 두 가지 유형의 콘텐츠 필터링을 다르게 처리하고 Hotmail의 회색 상자를 사용하여 더 엄격한 콘텐츠 차단 설정이 있는 사용자에 대한 이미지를 차단합니다.
데스크탑 스타일의 ALT 텍스트 지원
데스크톱 클라이언트는 관련된 변수가 많지 않기 때문에 조금 더 안정적입니다.
| 데스크톱 클라이언트의 ALT 텍스트 | |||
|---|---|---|---|
| 데스크톱 클라이언트 | 기본적으로 차단된 이미지 | ALT 텍스트를 표시합니다 | 스타일이 지정된 ALT 텍스트를 표시합니다. |
| 애플 메일 | ✘ | ||
| 로터스 노트 8.5 | ✘ | ||
| 아웃룩 2000-2003 | 일종의* | ✘ | |
| 아웃룩 2007 | 일종의* | ✘ | |
| 아웃룩 2010 | 일종의* | ✘ | |
| Outlook 2011(Mac용 Outlook) | 일종의* | ||
| 아웃룩 2013 | 일종의* | ✘ | |
| 아웃룩 2016 | 일종의* | ✘ | |
| 천둥새 | ✘ | ||
| 윈도우 10 메일 | ✘ | ✘ | ✘ |
*Outlook은 ALT 텍스트에 보안 메시지를 추가합니다. 자세한 내용은 아래에 있습니다.
Apple Mail 및 Thunderbird는 기본적으로 이미지를 차단하지 않지만 각 응용 프로그램의 환경설정에서 차단하도록 선택할 수 있습니다. 스타일이 지정된 ALT 텍스트를 지원하는지 확인하기 위해 이러한 클라이언트에서 이미지 차단을 수동으로 활성화했습니다.
특히 웹 글꼴과 관련된 다른 변수를 지원하는 데 약간의 변형이 있었습니다.
- Apple Mail은 스타일이 지정된 글꼴을 지원하지 않았지만 색상 및 기타 속성은 계속 포함되었습니다.
- Outlook 2000-2003에서는 색상을 변경할 수 있지만 스타일이 지정된 ALT 텍스트로 다른 어떤 것도 조정할 수 없습니다.
Outlook의 보안 메시지
Outlook 2003, 2007, 2010, 2013 및 2016은 "사진을 다운로드하려면 여기를 마우스 오른쪽 버튼으로 클릭하십시오. 개인 정보를 보호하기 위해 Outlook은 인터넷에서 이 사진을 자동으로 다운로드하지 못하도록 했습니다." 불행히도 이 이메일 클라이언트의 ALT 텍스트는 Outlook 보안 경고의 맨 끝에만 나타나므로 거의 쓸모가 없습니다.
이 메시지는 Windows 10에도 나타나며 모든 ALT 텍스트를 완전히 차단합니다.
모바일 스타일의 ALT 텍스트 지원
모바일 클라이언트는 스타일이 지정된 ALT 텍스트를 강력하게 지원합니다. 이는 특히 Android 잠재고객이 많은 마케터에게 희소식입니다.
| 모바일 클라이언트의 ALT 텍스트 | |||
|---|---|---|---|
| 모바일 클라이언트 | 기본적으로 차단된 이미지 | ALT 텍스트를 표시합니다 | 스타일이 지정된 ALT 텍스트를 표시합니다. |
| 안드로이드 이메일(4.4) | |||
| 안드로이드 지메일(4.4) | |||
| AOL 메일(안드로이드 브라우저) | |||
| AOL 메일(iPhone 브라우저) | |||
| AOL 알토 메일 앱 | |||
| 블랙베리 OS 6 | |||
| 블랙베리 OS 7 | |||
| 블랙베리 Z10 | |||
| iOS 6.x(기본 이메일 클라이언트) | ✘ | ||
| 아이폰 5s(iOS 7) | ✘ | ||
| 아이폰 5s(iOS 8) | ✘ | ||
| 아이폰 6 | ✘ | ||
| 아이폰 6s | ✘ | ||
| 아이폰 6s + | ✘ | ||
| 아이패드(iOS 9) | |||
| 아이패드 미니(iOS 9) | ✘ | ||
| Gmail 앱(iOS) | ✘ | ||
| Gmail 앱(iPhone 브라우저) | ✘ | ||
| 사서함(iOS) | ✘ | ✘ | ✘ |
| Outlook.com(안드로이드 브라우저) | 때때로 | ||
| Outlook.com(아이폰 브라우저) | 때때로 | ||
| 윈도우 모바일 7.5 | ✘ | ✘ | |
| 윈도우 폰 8 | ✘ | ✘ | |
| 야후! 앱(안드로이드) | ✘ | ✘ | |
| 야후! 앱(iOS) | |||
| 야후! 메일(안드로이드 브라우저) | 일종의 | 일종의 | |
| 야후! 메일(iPhone 브라우저) | ✘ | ✘ | ✘ |
Apple Mail 및 Thunderbird와 마찬가지로 이 모바일 OS가 ALT 텍스트를 처리하는 방법을 관찰하기 위해 이미지를 차단하도록 iOS 설정을 수동으로 업데이트했습니다.
Android의 스타일이 지정된 ALT 텍스트(Samsung Galaxy Nexus):
스타일이 지정된 ALT 텍스트는 Android의 이메일 및 Gmail 앱에서 동일하게 나타납니다.
BlackBerry OS 6(Torch 9810)의 스타일이 지정된 ALT 텍스트:
iOS(iPhone 5)의 스타일이 지정된 ALT 텍스트:
Windows Phone 7.5(Nokia Lumia 900)의 이미지 차단:
CSS 글꼴 속성, 링크 및 길이는 변수입니다.
세부적으로 살펴보면 다음 글꼴 속성의 대부분이 스타일이 지정된 ALT 텍스트를 표시하는 클라이언트에서 지원됩니다.
- 글꼴 패밀리
- 글꼴 크기
- 글꼴 두께
- 색상
- 글꼴 스타일
지원되는 특정 속성과 관련하여 테스트에 약간의 변형이 있었습니다. 거의 모든 클라이언트가 색상 속성을 지원했지만 글꼴은 지원하지 않았습니다. 이것은 브라우저마다 다양했습니다. 예를 들어 Chrome의 Gmail/G-Suite는 색상이 다른 두 가지 스타일 글꼴을 테스트한 결과 다음과 같습니다.
Internet Explorer의 Gmail/G-Suite는 색상은 존중하지만 글꼴은 존중하지 않습니다.
일부 클라이언트는 스타일이 지정된 ALT 텍스트의 모든 글꼴이나 크기를 지원하지 않을 수 있지만 그렇다고 해서 브랜드나 감각을 추가할 수 없다는 의미는 아닙니다. 이메일 마케팅 전문가 Jaina Mistry가 웹 글꼴 지원을 다시 확인하기 위해 Campaign Monitor에 작성한 이 편리한 리소스를 확인하십시오.
또한 Windows 및 Mac에 일반적으로 설치되는 이 글꼴 목록을 권장합니다.
기타 주목할만한 이미지 차단 동작
많은 이메일 클라이언트에서 텍스트의 크기나 길이가 이미지 컨테이너의 너비 및/또는 높이를 초과하면 ALT 텍스트가 사라집니다. 이 동작으로 인해 ALT 텍스트가 완전히 제거되지 않도록 더 짧은 설명과 더 작은 글꼴 크기를 유지하는 것이 가장 좋습니다.
거의 모든 이메일 클라이언트를 사용하면 이미지를 자동으로 표시하거나 숨기도록 설정을 변경할 수 있으며(대부분의 경우 숨기기/차단이 기본 설정임) 개별 메시지에 대해 이미지를 켜라는 메시지가 사용자에게 표시됩니다. 일부는 사용자가 특정 발신자를 허용 목록이나 주소록에 추가하거나 "항상 다음에서 이미지 표시..."를 선택할 수 있도록 허용합니다.
이미지를 끄고 켜고 이메일을 미리 봅니다.
이미지가 비활성화된 상태에서 이메일이 어떻게 보이나요? ALT 텍스트가 제대로 렌더링됩니까? Litmus를 사용하여 이미지 오프 보기를 포함하여 50개 이상의 데스크톱, 모바일 및 웹메일 클라이언트에서 이메일을 미리 봅니다.
테스트 시작 →