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

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

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

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

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

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

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

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

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

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

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

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