마지막 업데이트 날짜: 2025년 11월 12일
이메일 편집기에서 편집하는 동안 마케팅 이메일이 다크 모드에서 어떻게 표시되는지 미리 보거나 특정 이메일 클라이언트에 대한 미리 보기를 생성할 수 있습니다. 이렇게 하면 어두운 모드에서 마케팅 이메일을 보는 수신자가 의도한 대로 이메일을 볼 수 있습니다.
이메일 편집기에서 다크 모드 미리보기
편집하는 동안 이메일의 다크 모드 미리 보기로 전환하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
- 초안 작성된 이메일의 이름을 클릭합니다.
- 이메일 편집기에서 페이지 상단의 표시 옵션을 클릭한 다음 어두운 모드 미리 보기 스위치를 켭니다.
특정 클라이언트에서 다크 모드 미리보기
특정 브라우저나 이메일 클라이언트에서 다크 모드가 켜진 상태에서 이메일이 어떻게 표시되는지 확인하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
- 초안 작성된 이메일의 이름을 클릭합니다.
- 이메일 편집기에서 오른쪽 상단의 미리 보기 및 테스트를 클릭한 다음 이메일 클라이언트에서 미리 보기를 선택합니다.
- 미리 보기 화면에서 왼쪽 상단의 미리 보기 유형 선택 드롭다운 메뉴를 클릭한 다음 각 미리 보기 유형 옆의 확인란을 선택합니다. 어두운 모드에서 사용 가능한 미리보기 유형을 보려면 검색창에 '어두운'을 입력합니다.
- 오른쪽 상단에서 미리 보기를 클릭합니다.
어두운 모드용 이메일 디자인 모범 사례 이해하기
이메일 클라이언트와 브라우저에 따라 어두운 모드가 다르게 렌더링될 수 있습니다. 어두운 모드에서 볼 수 있도록 이메일을 디자인할 때는 다음 제안 사항을 염두에 두세요:
- 밝은 배경과 어두운 배경 모두에서 선명하게 표시되는 이미지 사용: 배경색이 반전된 경우에도 이미지가 올바르게 표시되도록 이미지를 .png 형식으로 변환합니다.
- 텍스트의 색상 대비가 충분한지 확인: 웹 콘텐츠 접근성 가이드라인을 준수하고 텍스트와 배경색 간의 대비가 충분한지 확인합니다.
- 다크 모드용 미디어 쿼리 추가: 일부 이메일 클라이언트는 미디어 쿼리를 사용한 사용자 지정 스타일링을 제한적으로 지원합니다.
prefers-color-scheme미디어 기능을 사용하여 어두운 모드에서 이미지와 텍스트가 표시되는 방식을 설정할 수 있습니다. 이 옵션은 디자인 관리자에서 만든 이메일 템플릿에서만 사용할 수 있습니다.
