이메일 디자인이 다크 모드에서 어떻게 표시되는지 미리 보고 최적화하기

많은 이메일 클라이언트에는 어두운 모드 설정이 있어 밝은 모드가 활성화된 클라이언트에서 마케팅 이메일이 표시되는 방식과 일치하지 않을 수 있습니다.

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

이메일을 디자인하는 동안 이메일의 다크 모드 미리 보기로 전환하려면 다음과 같이 하세요:

• HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 초안 작성된 이메일의 이름을 클릭합니다.
• 이메일 편집기 상단에서 표시 옵션을 클릭한 다음 어두운 모드 미리 보기 스위치를 켭니다.

특정 클라이언트 어두운 모드에서 이메일의 모양 미리 보기

연락처가 브라우저나 클라이언트에서 다크 모드를 활성화한 상태에서 이메일을 열었을 때 이메일이 어떻게 보이는지 확인하려면 다음과 같이 하세요:

• HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 기존에 작성된 이메일의 이름을 클릭합니다.
• 이메일 편집기의 오른쪽 상단에서 미리 보기를 클릭한 다음 받은 편지함 미리 보기를 클릭합니다.
• 미리 보기 화면 상단에서 클라이언트를 클릭합니다.
• 어두운 모드에서미리 보려는 클라이언트 옆의 확인란을 선택합니다.

• 오른쪽 상단에서 지금 내 이메일 테스트를 클릭합니다.

다크 모드용 이메일을 디자인할 때의 모범 사례

다른 다크 모드 클라이언트에서 이메일을 미리 볼 때는 각 클라이언트에 따라 이메일이 다르게 렌더링될 수 있다는 점에 유의하세요. 예를 들어, 연락처가 Apple Mail을 사용하여 이메일을 여는 경우 다크 모드를 사용 설정했는지 여부에 관계없이 이메일이 똑같이 표시됩니다. 반면, 연락처가 Gmail이나 Windows의 Outlook과 같은 앱에서 다크 모드를 사용 설정한 경우에는 배경색이 반전되는 등 이메일 스타일링에 더 큰 차이가 있을 수 있습니다.

이메일 스타일이 클라이언트 간에 일관되게 유지되는지 확인하려면 아래 팁을 검토하세요.

밝은 배경과 어두운 배경 모두에서 선명하게 표시되는 이미지 사용

이미지를 업로드하고 이메일에 이미지를 추가하기 전에 이미지를 PNG 파일로 변환하면 어두운 모드에서 이메일의 배경색을 자동으로 반전시키는 이메일 클라이언트에서 렌더링되는 데 도움이 됩니다. 이미지에 로고와 같은 텍스트가 포함된 경우 텍스트 주위에 반투명 윤곽선을 추가하여 텍스트가 눈에 띄도록 할 수도 있습니다.

웹 접근성 색상 선택

수신자가 사용하는 이메일 클라이언트에 관계없이 이메일 콘텐츠를 접근 가능하도록 디자인하는 것은 중요합니다. 텍스트의 색상 대비를 확인하는 등 접근성 표준을 준수하면 이메일이 어두운 모드에서 올바르게 렌더링되는 데 도움이 됩니다. 웹 접근성 색상에 대한 자세한 내용은 HubSpot 블로그에서 확인하세요.

iOS에서 다크 모드 스타일링을 위한 미디어 쿼리 지정하기

Apple Mail 및 Outlook.com을 비롯한 여러 이메일 클라이언트에서는 미디어 쿼리를 통해 사용자 지정 스타일을 감지하고 추가하는 기능이 제한적으로 지원됩니다. 업데이트된 클래식 이메일 편집기를 사용하고 있고 이메일에 CSS를 변경할 수 있는 개발자 리소스가 있는 경우 prefers-color-scheme 미디어 기능을 사용하여 미디어 쿼리를 추가하여 다크 모드와 라이트 모드에서 이미지와 텍스트가 표시되는 방식을 구성할 수 있습니다.