업데이트: Gmail, 반응형 디자인, 향상된 글꼴 스타일 및 접근성을 위한 CSS 지원 출시

게시 됨: 2016-09-30

9월 30일 이른 아침에 Gmail은 이메일 세계가 오랫동안 요구해 온 것, 즉 임베디드 스타일과 반응형 디자인을 지원하기 위해 변경 사항을 출시하기 시작했습니다.

우리는 무엇에 대해 이야기하고 있습니까?

Gmail은 이메일의 <head>에 있는 클래스 또는 ID를 지원하지 않아 이메일 디자이너가 인라인 CSS를 사용하여 이메일 스타일을 지정해야 했습니다. 이제 Gmail은 클래스 및 ID가 포함된 CSS를 지원하므로 Gmail에서 인라인 CSS가 필요하지 않습니다. 이것은 또한 Gmail이 마침내 미디어 쿼리와 반응형 이메일을 지원할 것임을 의미합니다.

뉴스만 보고 가시나요? 출시를 모니터링할 때 Live Ticker의 업데이트를 따르거나 아래에서 예상되는 모든 변경 사항과 이것이 이메일 마케팅 담당자에게 의미하는 바에 대한 요약을 읽으십시오.

Gmail 업데이트 실시간 시세

다음은 업데이트된 Gmail 이메일 클라이언트의 현재 보기입니다.

지메일 클라이언트

업데이트 롤아웃

데스크톱 웹메일

체크 그린

모바일 웹메일

체크-X

Gmail Android 앱(Gmail 계정)

체크 그린

Gmail Android 앱(Gmailified 계정)

체크 그린

Gmail Android 앱(POP/IMAP 계정)

체크-X

지메일 iOS 앱

체크 그린

Inbox by Gmail(웹메일)

체크 그린

Inbox by Gmail(iOS)

체크 그린

Inbox by Gmail(Android)

체크 그린

G Suite Basic(이전의 Google Apps for Work)

체크 그린

Google Apps 무료 버전(기존)

체크-X

  • 11월 7일 오전 11시 30분(동부 표준시)

Gmail iOS 앱의 주요 업데이트에는 <style> 및 미디어 쿼리를 지원하는 렌더링 업데이트가 포함됩니다! 이제 모든 Gmail 모바일 앱에서 반응형 이메일을 지원합니다. 또한 렌더링 업데이트가 적용된 모든 G Suite 계정도 표시됩니다.

  • 10월 12일 오전 9시(동부 표준시)

미국 외 G Suite 계정(Litmus Preview 포함)이 렌더링 업데이트를 받는 것을 보기 시작했습니다. 모든 계정에 업데이트가 있는 것으로 확인되면 롤아웃 차트를 업데이트합니다.

  • 10월 4일 오전 9시 30분(동부 표준시)

위의 전체 롤아웃 차트를 발표했습니다. Gmail은 계정 계획 이름을 변경했습니다.

G Suite Basic(이전의 Google Apps for Work) 계정의 경우 업데이트가 미국 계정에만 배포되었을 가능성이 있는 것으로 보입니다. Litmus 사용자의 경우 G Suite Basic 이메일 미리보기(현재 제목은 Google Apps)는 현재 업데이트되지 않은 영국 기반 계정을 사용합니다.

  • 10월 4일 오전 4시(동부 표준시)

미디어 쿼리를 지원하기 위한 롤아웃은 이제 Android의 Gmail 및 Inbox by Gmail 앱에서 모두 완료된 것으로 보입니다. 일부 사람들은 iOS 앱에서 미디어 쿼리 지원이 변경되었음을 알아차렸지만 지원은 아직 모든 계정에서 일관되지 않습니다.

  • 9월 30일 오전 8시(동부 표준시)

Android의 Gmail 앱에도 변경 사항이 적용되었습니다. 클래스와 ID는 이메일 헤드에서 선택됩니다. 일부 Android Gmail 앱 계정에 대한 미디어 쿼리 지원도 확인되지만 테스트한 모든 계정에서 지원이 일관되지는 않습니다. 지원은 지역에 걸쳐 점진적으로 출시될 수 있습니다.

업데이트는 이제 Inbox by Gmail에도 적용되며 이메일 헤드에서 ID 및 클래스를 지원합니다.

  • 9월 30일, 오전 5시 30분(동부 표준시)

Gmail은 렌더링 엔진에 대한 업데이트를 점진적으로 출시하는 것으로 보입니다. Gmail 웹 클라이언트는 모든 브라우저(Chrome, Safari 및 Firefox)에서 <head>의 클래스와 ID를 지원하며 둘 다 HTML에서 올바르게 참조됩니다.

또한 Gmail의 웹 클라이언트에서 미디어 쿼리 지원이 표시됩니다.

반응형 이메일 디자인을 지원하는 Gmail

그러나 지금까지 이메일 헤드의 스타일 태그나 미디어 쿼리는 Inbox by Gmail 또는 Gmail 앱에서 지원되지 않습니다.

  • 9월 29일 오후 11시 55분(동부 표준시)

그것은 일어나고있다! Gmail은 렌더링 시스템에 대한 변경 사항을 배포하기 시작했습니다. 롤아웃을 모니터링하는 동안 업데이트를 계속 지켜봐 주십시오.

소식 공유 →

이메일 괴짜에게 이러한 변경 사항이 의미하는 것

2016년 8월 31일 Gmail은 CSS 속성 display: none을 지원하기 시작할 것이라고 발표했습니다. <style> 및 미디어 쿼리 지원.

이는 Gmail에서 CSS 지원을 확장하고 이메일 디자이너가 메시지가 렌더링되는 방식을 더 잘 제어할 수 있도록 하기 위한 전반적인 노력의 일부일 뿐입니다.

– Google 제품 관리자 Pierce Vollucci

이것은 이메일 커뮤니티에 엄청난 소식이며 이메일 디자인 및 개발에 중요한 영향을 미칠 것입니다.

응답 이메일 및 <스타일>을 지원하는 GMAIL

Gmail은 지금까지 이메일 <head>에 있는 클래스 또는 ID를 지원하지 않아 이메일 디자이너가 인라인 CSS를 사용하여 이메일 스타일을 지정해야 했습니다. 이제 Gmail은 클래스 및 ID가 포함된 CSS를 지원하므로 Gmail에서 인라인 CSS가 필요하지 않습니다. 이것은 또한 Gmail이 마침내 미디어 쿼리와 반응형 이메일을 지원할 것임을 의미합니다.

즉, 이제 다음 코드가 Gmail에서 제대로 렌더링됩니다.

 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>

지원되는 CSS의 전체 목록은 이 게시물의 하단이나 Gmail의 공식 문서에서 볼 수 있습니다. 다음은 예정된 미디어 쿼리 지원의 전체 목록입니다.

지원되는 유형

  • 모두
  • 화면

지원되는 쿼리

  • 최소 너비
  • 최대 너비
  • 최소 장치 너비
  • 최대 장치 너비
  • 정위
  • 최소 해상도
  • 최대 해상도

지원되는 키워드

  • 그리고
  • 오직

이메일의 의미

이러한 업데이트는 이메일 개발 및 워크플로의 주요 전환점을 의미하므로 디자이너와 마케팅 담당자는 CSS 인라이닝 없이도 이메일 캠페인에 더 쉽게 액세스할 수 있습니다.

시장 영향: 미디어 쿼리가 곧 표준이 될 것입니다.

많은 이메일은 다양한 화면 크기에서 보다 유용한 경험을 만들기 위해 콘텐츠와 디자인을 미세 조정하기 위해 미디어 쿼리에 의존합니다. 그러나 미디어 쿼리는 모든 곳에서 작동하지 않습니다. 가장 주목할 만하고 실망스러운 지원 부족은 역사적으로 Gmail에서 발생했습니다. Gmail은 그 안에 포함된 모든 스타일 및 미디어 쿼리와 함께 <head>에서 코드를 제거하는 것으로 유명합니다.

Gmail의 미디어 쿼리 지원 으로 이메일 클라이언트의 75% 이상이 반응형 디자인을 지원할 것 입니다. Windows Phone과 같은 다른 이메일 클라이언트에서 이것이 표준이 되기를 바랍니다.

Fab Four와 같은 해킹 레이아웃 구조의 필요성 감소

Gmail의 미디어 쿼리 지원 부족을 해결하기 위해 이메일 괴짜들은 해결 방법에 대해 많은 관심을 보였습니다. 이러한 해결 방법 중 하나는 CSS calc() 함수와 세 가지 너비, 최소 너비 및 최대 너비 속성을 포함하는 Fab Four 기술입니다.

이메일 디자이너 여러분, 이제 이러한 복잡한 레이아웃 구조와 작별할 때입니다. 그러나 Outlook용 표는 여전히 필요합니다. (우리는 이메일 표준을 만들지 않았습니다….아직).

그러나 하이브리드/스폰지 개발은 Outlook과 같은 문제가 있는 클라이언트의 기본 구조로 이메일 개발에서 여전히 자리를 차지하고 있습니다.

CSS 인라이닝에 작별 인사

"인라이닝" 스타일은 CSS 및 관련 서식 지침을 이메일의 <head> 스타일 블록에서 HTML의 <body>로 이동합니다. 이전에는 스타일이 인라인으로 이동되지 않으면 이메일 본문의 스타일이 Gmail에 표시되지 않습니다.

인라인 편집 없음-03

이러한 업데이트로 CSS 인라인이 더 이상 필요하지 않습니다. 이메일 디자이너는 이제 HTML 문서의 <head>에 포함된 스타일을 사용할 수 있습니다. 임베디드 CSS는 모든 주요 이메일 클라이언트에서 지원됩니다.

이메일에 더 쉽게 액세스할 수 있습니다.

이메일의 접근성은 캠페인의 성공에 필수적입니다. 구독자가 귀하의 이메일을 읽고 상호 작용할 수 없는 경우 조치를 취할 방법이 없습니다.

임베디드 CSS 지원을 통해 이메일 디자이너는 콘텐츠에서 스타일을 분리하고 이메일에 의미 체계적이고 접근 가능한 마크업을 사용할 수 있습니다.

큰 텍스트와 터치하기 쉬운 버튼은 접근성을 개선하는 데 도움이 되지만 스크린 리더와 함께 사용할 HTML을 준비하는 것도 도움이 됩니다. 이를 염두에 두고 디자인에서 텍스트와 이미지의 균형을 유지하고 이메일의 서면 내용을 조정하여 주요 메시지를 전달하십시오.

피치, 피치 범위, 말하기 구두점 및 음성 속도와 같은 CSS 기반 스크린 리더 설정에 대한 추가 지원을 통해 Gmail은 마케팅 담당자가 이메일에 더 쉽게 액세스할 수 있도록 했습니다.

타이포그래피 지원 증가

이러한 업데이트와 함께 제공되는 또 다른 주요 변경 사항은 CSS 글꼴 속성에 대한 추가 지원입니다. 예를 들어 Gmail은 테이블 없이 텍스트 열을 생성할 수 있는 column-count 및 column-gap과 같은 속성을 지원하기 시작할 것입니다. 또한 font-kerning 및 font-variant-caps는 추가 글꼴 스타일을 활성화합니다. 그러나 웹 글꼴은 다음 릴리스에서 지원되지 않을 것으로 보입니다.

배경에 대한 추가 지원 예정

Gmail은 background-clip, background-position, 그리고 가장 중요한 background-size와 같은 CSS 배경 속성에 대한 추가 지원을 도입합니다. 배경 크기 지원으로 이메일은 확장 가능하고 반응이 빠른 배경 이미지를 가질 수 있습니다.

Gmail에서 이메일 테스트

이러한 변경 사항이 이메일에 어떤 영향을 미칩니까? Litmus를 사용하여 Gmail 및 70개 이상의 다른 이메일 클라이언트에서 즉시 이메일을 미리 볼 수 있습니다. 이러한 변경 사항은 아직 적용되지 않았지만 Gmail이 적용되는 즉시 Litmus Instant Preview에 반영됩니다.

리트머스 무료 체험 →

공식 문서

주요 이메일 클라이언트가 처음으로 공식 CSS 및 HTML 지원 문서를 게시했습니다. 이것은 첫 번째 주요 산업입니다. 고마워, 지메일!

다음 CSS 속성은 Gmail 및 Inbox by Gmail에서 지원됩니다.

  • 방위각
  • 배경
  • 배경 혼합 모드
  • 배경 클립
  • 배경색
  • 배경 이미지
  • 배경 출처
  • 배경 위치
  • 배경 반복
  • 배경 크기
  • 국경
  • 경계 바닥
  • 테두리 바닥 색상
  • 테두리-하단-왼쪽-반경
  • 테두리-하단-오른쪽-반경
  • 보더 바텀 스타일
  • 테두리 하단 너비
  • 경계 붕괴
  • 테두리 색상
  • 경계 왼쪽
  • 테두리 왼쪽 색상
  • 테두리 왼쪽 스타일
  • 테두리 왼쪽 너비
  • 경계 반경
  • 경계 오른쪽
  • 테두리 오른쪽 색상
  • 테두리 오른쪽 스타일
  • 테두리 오른쪽 너비
  • 경계 간격
  • 테두리 스타일
  • 보더 탑
  • 테두리 상단 색상
  • 테두리-왼쪽 위-반경
  • 테두리-오른쪽-위-반경
  • 보더 탑 스타일
  • 테두리 상단 너비
  • 테두리 너비
  • 상자 크기
  • 휴식 후
  • 휴식 전
  • 침입
  • 캡션 쪽
  • 분명한
  • 색상
  • 열 수
  • 열 채우기
  • 열 간격
  • 열 규칙
  • 열 규칙 색상
  • 열 규칙 스타일
  • 열 규칙 너비
  • 열 범위
  • 열 너비
  • 기둥
  • 방향
  • 표시하다
  • 높이
  • 빈 셀
  • 뜨다
  • 폰트
  • 글꼴 패밀리
  • 글꼴 기능 설정
  • 글꼴 커닝
  • 글꼴 크기
  • 글꼴 크기 조정
  • 글꼴 늘이기
  • 글꼴 스타일
  • 글꼴 합성
  • 글꼴 변형
  • 글꼴 변형 대체
  • 글꼴 변형 대문자
  • font-variant-east-asia
  • 글꼴 변형 합자
  • 글꼴 변형 숫자
  • 글꼴 두께
  • 키
  • 이미지 방향
  • 이미지 해상도
  • 격리
  • 문자 간격
  • 줄 높이
  • 목록 스타일
  • 목록 스타일 위치
  • 목록 스타일 유형
  • 여유
  • 여백-하단
  • 여백-왼쪽
  • 여백 오른쪽
  • 마진 탑
  • 최대 높이
  • 최대 너비
  • 최소 높이
  • 최소 너비
  • 혼합 혼합 모드
  • 개체 맞춤
  • 객체 위치
  • 불투명
  • 개요
  • 윤곽선 색상
  • 개요 스타일
  • 윤곽 너비
  • 과다
  • 심
  • 패딩 바닥
  • 패딩 왼쪽
  • 패딩 오른쪽
  • 패딩 탑
  • 정지시키다
  • 일시 중지 후
  • 일시 중지
  • 정점
  • 피치 범위
  • 인용 부호
  • 풍요
  • 말하다
  • 발언 헤더
  • 숫자로 말하는
  • 구두점
  • 말하기 속도
  • 스트레스
  • 테이블 레이아웃
  • 텍스트 정렬
  • 텍스트 결합-업라이트
  • 텍스트 장식
  • 텍스트 장식 색상
  • 텍스트 장식 라인
  • 텍스트 장식 건너뛰기
  • 텍스트 장식 스타일
  • 텍스트 강조
  • 텍스트 강조 색상
  • 텍스트 강조 스타일
  • 텍스트 들여쓰기
  • 텍스트 방향
  • 텍스트 오버플로
  • 텍스트 변환
  • 텍스트 밑줄 위치
  • 유니코드-비디
  • 수직 정렬
  • 음성 가족
  • 너비
  • 단어 간격
  • 쓰기 모드

받은편지함으로 바로 최신 소식 받기

Gmail 출시의 추가 변경사항과 이것이 귀하에게 미치는 영향에 대해 계속 알려드리겠습니다. 주간 뉴스레터를 구독하고 이메일 디자인 전문가를 위한 최신 콘텐츠를 받은 편지함으로 바로 받아보세요. 매주.