이메일 템플릿을 만들 때 CSS가 제한적이라 색상 적용이 까다롭습니다. 이메일에서 확실하게 작동하는 색상 적용 방법을 알아봅니다.
인라인 스타일 필수
이메일 클라이언트는 style 태그를 무시하는 경우가 많습니다. style="color: #333333;"처럼 인라인으로 작성해야 합니다.
6자리 HEX 사용
3자리 단축 HEX나 rgb() 함수는 일부 클라이언트에서 안 될 수 있습니다. 안전하게 #RRGGBB 형식만 사용하세요. 색상 변환기에서 정확한 6자리 값을 확인하세요.
Outlook 주의
Outlook은 Word 렌더링 엔진을 써서 예상과 다르게 보일 수 있습니다. 배경색이 안 먹는 경우 bgcolor 속성을 병행하세요.
테스트 필수
Litmus나 Email on Acid로 여러 클라이언트에서 미리보기하세요. Gmail, Outlook, Apple Mail에서 모두 확인해야 합니다.
Gmail 렌더링 특성
Gmail은 style 태그를 지원하지만 일부 CSS 속성은 무시합니다. 안전하게 인라인 스타일을 사용하고, 복잡한 레이아웃은 테이블로 구성하세요. background-color와 color는 잘 동작합니다. 색상 변환기로 정확한 6자리 HEX 값을 사용하세요.
다크모드 이메일
일부 이메일 클라이언트는 자동 다크모드를 적용합니다. 흰 배경에 검정 텍스트가 반전될 수 있습니다. meta 태그로 color-scheme을 지정하거나, 다크모드용 스타일을 별도로 제공할 수 있습니다. 하지만 지원이 제한적이므로 테스트가 필수입니다.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.