-
[Marketing] 이메일 캠페인 그리고 다크모드Front-end/Marketing 2020. 12. 15. 23:53반응형
포스팅 순서가 잘못된 것 같다.
원래는 이메일 캠페인이 프론트엔드 영역에서 어떻게 쓰이고 있는가를 다루고 싶었다.
하지만, 최근 다크모드와 관련하여, 이슈가 있었기에 먼저 다크모드를 대략적으로 다루어보려고 한다.
이 주제에 대해 풀 이야기가 많기에 summary의 느낌의 포스팅이고, 근거들은 차후에 추가적으로 포스팅 할 예정이다.
잘못된 정보 또는 더 좋은 정보가 있으면 공유해주시면 감사하겠습니다. 🙏
++ 광고 클릭은 블로그를 계속 운영할 수 있는 꿈과 희망 그리고 사랑이 됩니다...
이메일 캠페인
간략하게 설명하자면, 우리가 받는 이메일 (광고) 또는 기타 컨텐츠들은 주로 html 기반의 한 페이지라고 볼 수 있다.
프론트엔드 개발자라면, 구글 메일에 들어가서 수신함에서 개발자모드로 메일을 까보자.
HTML, css로 이루어진 코드 뭉치들이다!
다크모드와 이메일 캠페인을 엮어서 볼 때, 필요한 정보를 먼저 공유하고자 한다!
포인트 1
이메일 캠페인을 고려 중이라면, 유저가 주로 사용할 이메일 클라이언트 환경을 고려해야한다.
고려해본 이메일 클라이언트 환경
View
Web(PC) environment
- Windows email client...?
- Mac OS email
- Gmail
- Safari
- Naver
- KaKao
- nate
- daum(문제아)
- outlook(문제아)
Web(phone) environment
- ios email
- samsung
- Gmail
- Safari
- Naver
- KaKao
- nate
- daum
App(phone) environment
- Gmail app
- Naver app
- Daum app
- KaKao app
문제아 ["daum", "outlook"]은 다음 포스팅에서 언급할 예정 :)
포인트 2
포인트 1에서 리스팅 된 이메일 클라이언트를 다 커버해야한다면 포기해야할 것들...
- media query
- style -> class
- style -> id
....
결론: inline style이 정신건강에 좋다.
++ ios 구글 앱이 다크모드에선 호환성 문제아다.
다크모드
What is dark mode...?
"소프트웨어에서 밝은 테마 대신에 어두운 테마를 지원하는 것. 배경화면 뿐만 아니라 유저 인터페이스 전반의 분위기를 의미한다."
참고 링크: namu.wiki/w/다크%20모드
ios, Anroid 모두 시스템적으로 다크모드를 지원하면서 앱에서도 기능이 추가되는 추세인듯 하다.
사용자로서 다크모드는 눈의 피로도에 아주 좋은 기능이다.
하지만, 최적화되지 않은 이메일 캠페인은 아래 그림처럼 매력도가 반감된다. (회사의 이미지가 되는 것 같기도 하다)
대안 1
다크모드에 맞추어 ( 아이콘 || 컴포넌트 || css ) 개발
css로 라이트모드/다크모드 분기
pros: 가장 깔끔할 것으로 예상
cons:
- high resource
- media query(다크모드 분기)가 서포트 되지 않는 클라이언트에서는 Useless
대안 2
라이트/다크모드에서 사용할 수 있는 유니버셜한 아이콘 디자인
-> 다크모드에서는 라이트모드의 아이콘에 선을 추가?한다든지 유니버셜하게 디자인
pros: 최소 리소스
cons: 유니버셜한 아이콘/이미지가 어느 환경에서는 강조되지 않을 수 있음
대안 3
다크모드 다 필요없다. 라이트 모드 강제할거다. 응 그럴거야
pros:
- 편.안
- minimum resource input
cons:
- 사용자 경험은 고려하지 않음
<meta name="color-scheme" content="only">
결론
메인 프로젝트가 아니다보니, 결론을 내기위한 몇가지 조건이 있었다.
1. 이메일 클라이언트 - 다크모드(폰 환경 세팅)을 log로 긁어올 수 없기에, 중요성 즉 우선순위 알 수 없다.
2. 따라서 최소한의 인풋을 사용해야한다.
3. 다크모드 호환성 이슈는 gmail app에서만 보인다.
1~3를 고려해보면, 다크모드는 무시해야할 것 같다. (max input, min output으로 보이니까...)
하지만, 개발자로서의 자아실현을 위해 업무 후 개인시간에 계속 찾아볼 예정이다.
Ref:
https://www.campaignmonitor.com/resources/guides/dark-mode-in-email/
https://stackoverflow.com/questions/58177703/how-to-prevent-ios-13-dark-mode-from-breaking-emails
https://web.dev/color-scheme/
https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/반응형