메일 HTML 코딩을 하면서 겪은 일들 (모바일, 다크모드)

들어가며..

일주일(워킹데이 기준으로 5일!!) 동안 메일 HTML 템플릿 코딩을 하고 있다. 15개의 메일 템플릿을 만들었고, 드디어 끝났다 !!! 야호~~
원래 하루를 예상했는데, 생각보다 오래 걸렸다..

처음 생각은 "로직 같은 거 생각할 필요도 없고, HTML과 CSS만 하면 된다니~ 간단하겠다 !"였다.
그런데 내가 처음에 생각하지 못했던 이슈들이 있어서 완성이 하루 이틀 늦어졌다.

기기, 메일 앱, 사이트 별로 결과물이 다르게 보이는 이슈 ..는 처음부터 들어서 알고 있었다. (그렇다고 해결하기 쉬웠다는 건 아님...)
그런데 처음에는 미처 생각하지 못했던 이슈들이 있었다.

디자이너님, 동료 프론트엔드 개발자님과 함께 문제를 해결했다.
이 경험을 나누려고 한다~

참고) 전에 쓴 글에서는 메일 코딩 개요에 대해 썼다.

모바일

첫번째는 바로 바로 모바일!!이다.

모바일일 때 다른 디자인(배치를 바꾼다든지..)을 하기에는 리소스가 없어서, 모바일일 때 컨텐츠가 잘 보이게만 하자고 했다..ㅎㅎ
이메일에서 반응형을 하기는 어려운데, 보통 web에서 반응형할 때 사용하는 미디어 쿼리를 지원하지 않는 이메일도 있기 때문이다....
(반응형이 궁금하셨다면 죄송합니다... 아직 반응형 메일 코딩은 안해봤는데, 이런 글이 있더라고요~ [번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉)

모바일 앱(지메일, 아웃룩, 애플 이메일, 네이버 메일로 봤다..ㅎ)으로 내가 만든 메일을 열어보니 문제가 있었다.

1. 어디는 글자가 너무 작게 보였다.
   width 를 몇 픽셀로 고정해둬서 그런 것이었다.
   width:100%
2. 양 옆에 배치한 헤더 이미지들이 잘 안보였다.
   헤더에 양 옆에 이미지를 배치해둔 상태였다.
   이미지 1을 두고, padding-right 를 고정적인 값으로 주고, 이미지 2를 둔 상태였다.

먼저 padding-right를 제거했다.
그 후 각 이미지를 감싼 td에 스타일을 줬다.
이미지 1에 text-align:left을,이미지 2에 text-align:right을 줬다. 그랬더니 양 옆에 배치됐다 !
아래 같은 식으로 했다 !

<table style="text-align:center; vertical-align: middle; width:800px;">
      <tbody>
        <tr>  
          <th style=" vertical-align:middle; text-align:left; >
            <a class="display:inline-block; vertical-align:middle;" target="_blank" href="~~~~">
              <img width="182" alt="left image" src="왼쪽에 둘 이미지">
            </a>
          </th>
          <td  style="text-align:right; padding-top:26px;">
            <img width="221" style="vertical-align: middle; text-align:right;" alt="right image" src="오른쪽에 둘 이미지"/>
          </td>
        </tr>
      </tbody>
    </table>

다크 모드

그리고 두번째는 다크모드..
다크 모드는 내가 "특별히 다크모드일 때 이런 이런 걸 해~ " 라고 지정하지 않았는데, 메일들에서 자체적으로 해주는 거였다..
나는 컴퓨터, 휴대폰을 주로 다크모드로 사용하는데 내가 만든 메일을 보니까, 글자/배경색 등이 반전되어보였다. 이건 뭐.. 괜찮았는데, 일부 이미지는 잘 보이지 않았다ㅠ

우리 로고는 회색 검정색 그런 계열의 색인데, 처음에는 로고 이미지의 배경을 투명으로 가져왔더니 다크모드일 때 진짜 거의 안보였다..ㅠㅠ
그래서 디자이너님께 말씀드렸다. 그러면서 내가 드린 제안은 "배경을 하얗게 하면 괜찮을 거 같아요~"였다. 그렇게도 테스트 해봤는데 결국은 디자이너님이 안되겠다고 하셨다.ㅠ (기능적인 이유는 아니고 심미적인 이유..)

우리는 다른 방식으로 대응하기는 했지만 이런 방식으로 대응하는 곳들도 많은 것 같다!! 

인터파크에서 받은 메일 일부 캡쳐

인터파크에서 받은 메일! 도 그랬고

NHN KCP에서 받은 메일 일부 캡쳐

뭐 결제하고 받은 메일도 그랬고~~

 

이때 동료 개발자 님께 sos 했다. '어떻게 하면 좋을까' 하면서 다른 곳에서 보낸 메일들은 다크 모드일 때 로고 이미지 처리를 어떻게 했는지을 보던 중에, 동료 개발자 분이 방법을 찾아주셨다! 그건 바로 ~ 로고 테두리를 입히는 것 !!! 로고가 회색, 검정 톤이라서 다크모드에서 안 보이는데, 로고 테두리를 하얗게 주면 다크 모드에서는 그 테두리 덕분에 로고를 알아볼 수 있게 되는 것이다 :) 라이트 모드에서는 어차피 흰색이니까 그 테두리는 상관없고! 

이 방식으로 하니까 html 코드 변경 없이, 서버에 올린 이미지만 바꾸면 됐다 ㅎㅎ

때로는 코드적으로 해결하는 것보다, 아이디어(?)적으로 해결하는 게 좋을 때도 있는 거 같다 ~

 

메일 html 코딩을 하시는 모든 분들.. 행복하시길 ..ㅎㅎ