다크 모드에 맞춰 마케팅 이메일을 최적화하세요

이메일 편집기에서는 편집하는 동안 마케팅 이메일이 다크 모드에서 어떻게 표시될지 미리 볼 수 있으며, 특정 이메일 클라이언트에 대한 미리 보기를 생성할 수도 있습니다. 이를 통해 다크 모드에서 마케팅 이메일을 확인하는 수신자가 의도한 대로 이메일을 볼 수 있도록 할 수 있습니다.

이메일 편집기에서 다크 모드 미리 보기

편집 중에 이메일의 다크 모드 미리보기로 전환하려면:

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 이메일로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 이메일로 이동하세요.
2. 초안 상태인 이메일 의 이름을 클릭합니다.
3. 이메일 편집기 오른쪽 하단에서 [ 표시]를 클릭한 다음, [ 다크 모드 미리보기] 스위치를 켜세요.

특정 클라이언트에서 다크 모드 미리 보기

다크 모드가 활성화된 특정 브라우저나 이메일 클라이언트에서 이메일이 어떻게 표시되는지 확인하려면:

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 이메일로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 이메일로 이동하세요.
2. 작성 중인 이메일의 이름을 클릭하세요.
3. 이메일 편집기에서 오른쪽 상단의 ‘미리 보기 및 테스트’를 클릭한 다음, ‘이메일 클라이언트에서 미리 보기’를 선택하세요.
4. 미리보기 화면에서 왼쪽 상단의 ‘미리보기 유형 선택’ 드롭다운 메뉴를 클릭한 다음, 각 미리보기 유형 옆에 있는 확인란을 선택합니다. 다크 모드에 사용할 수 있는 미리보기 유형을 확인하려면 검색 창에 “dark”를 입력하세요.

5. 오른쪽 상단에서 ‘미리 보기’를 클릭하세요.

다크 모드용 이메일 디자인 모범 사례 이해하기

이메일 클라이언트와 브라우저에 따라 다크 모드 렌더링 방식이 다를 수 있습니다. 다크 모드에서 표시될 이메일을 디자인할 때는 다음 제안 사항을 참고하세요:

• 밝은 배경과 어두운 배경 모두에서 선명하게 표시되는 이미지를 사용하세요: 이미지를 .png 형식의 투명 이미지로 변환하면 다크 모드에서도 의도한 대로 표시됩니다.
• 모든 텍스트에 충분한 색상 대비가 있는지 확인하세요: 웹 콘텐츠 접근성 지침을준수하고 텍스트와 배경색 사이에 충분한 대비가 있도록 하세요.
• 다크 모드용 미디어 쿼리를 추가하세요: Apple Mail과 같은 일부 이메일 클라이언트는 미디어 쿼리를 사용한 사용자 지정 스타일에 대한 지원이 제한적입니다. ` prefers-color-scheme ` 미디어 기능을 사용하여 다크 모드에서 이미지와 텍스트가 어떻게 표시될지 설정할 수 있습니다. 이 옵션은 디자인 관리자에서 생성된 이메일 템플릿에서만 사용할 수 있습니다.