사내 프로젝트의 일환으로 이메일 HTML 템플릿을 구현해야 했던 테스크가 있었다.
이메일 HTML은 평소에 알던 HTML 구현 방식과 달리 제약사항이 아주 많았다.
고려해야 할 점
- 전체적으로 모두 table, tr, td 태그를 사용해야한다.
- span, div 태그와 같은 보편적인 태그 또한 사용해도 되지만 일부 메일 플랫폼에서는 적합하지 않다.
- 폰트 스타일 같은 경우는 클라이언트 플랫폼 마다 디폴트 스타일이 다르기 때문에 각 개별 태그에 일일히 인라인 스타일로 지정해야 안전하다.
- css는 개별 속성을 사용해야 하며(단축 속성x), color는 #ffffff 같은 Hexadecimal 를 사용해야 한다.
- flex 관련 속성들은 사용이 불가하다.
- 이미지 태그에는 alt, height, width, display:block속성이 필수이며 반응형으로 나타내기 위해서 max-width:100%; height:auto; vetical-align:top 으로 지정해준다.
- 컨테이너 태그의 width는 600px으로 지정하는 것이 가장 안전하다.
- 완성된 HTML 의 표준 품질을 검사하는 것이 안전하다 검사 링크
정리한 리스트 외에도 정말 다양한 제약사항이 존재한다.
테스트
테스트를 진행하기 위한 과정도 꽤나 복잡했다.
운영체제, 모바일, 웹, 플랫폼, 다크모드 등 경우의 수가 굉장히 많았다.
가능한 경우의 수를 파악한 후에 테스트 시나리오를 크게
- IOS/mobile/web
- IOS/mobile/app
- IOS/desktop
- Android/mobile/web
- Andriod/mobile/app
- Andriod/desktop
이렇게 나누었다.
각각의 시나리오는 브라우저or메일어플->메일 플랫폼->다크모드 로 뎁스를 형성했다.
이슈 - 크로스 브라우징 대응
1. line-height 적용 문제
- IOS/네이버 메일 앱에서 발견한 이슈로 의도한 line-height가 적용되지 않고 줄 별 간격이 좁아져 가독성이 떨어졌다.
- td 자체에 line-height을 지정했던 것이 원인이었으며 td태그 안에 span 태그를 추가로 삽입하여 span태그에 line-height를 지정함으로써 해결했다.
2. font-size(비율/width 600 -> max-width:600)
- IOS(아이폰) 기본 내장 메일 어플에서 발견한 이슈로 모든 폰트의 사이즈가 모바일 화면 크기 비율대로 줄어들어 나타났다.
- 폰트 사이즈 속성에 !important 도 붙여보고, font-size-adjust 속성을 이용하기도 하고, head 영역에
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
다음과 같이 설정해보기도 했는데 해결되지 않았다. - 결론적으론 컨테이너의 width를 600px로 지정한 것이 원인이었다. 가장 안전하다고 알려진 600px도 안전하지 않았던 것이였고, 나는 max-width을 600px으로 변경한 후 해결했다.
3. 가운데 정렬 (margin 0 auto, align-center)
- 테이블 태그 안에 들어가는 요소들을 align-center 속성을 지정하면 가운데 정렬이 보통 됐는데, 일부 브라우저에서는 적용되지 않는걸 확인했다.
- 이럴 경우 모두 margin:0 auto 로 해결했다.
4. width:100%
- 일부 브라우저에선 width:100% 로 따로 지정 안해도 의도대로 잘 나타났던 반면, 또 다른 브라우저에선 지정하지 않을 경우 fit으로 나타났던 경우가 있어 width를 모두 명시해주었다.
5. div 적용X -> radius 적용 불가
- 어떤 컴포넌트에는 반드시 radius를 꼭 지정해야 했고 지정하기위해선 테이블 태그로는 불가능했다.
- div 태그 사용을 최대한 지양하려고 했지만 이 경우 사용할 수 밖에 없었고 다행히 거의 모든 테스트 시나리오에서 잘 나타났다.
- 하지만 예외는 있었다.. 윈도우 내장 메일 어플에서 div 태그 자체가 아예 인식되지 않는 듯 하여 div에 준 속성들이 완전히 무시됐다.
6. 이미지 대체
- 평소에 flex로 정렬했던 버튼 컴포넌트같은 스타일을 이메일 HTML으로 구현하기 정말 까다로웠다. flex 속성의 소중함을 깨달았다
- 너무 까다로운 컴포넌트들은 어쩔 수 없이 이미지로 대체하여 통으로 넣었다
7. 다크모드를 위한 png 이미지
- 일부 테스트 시나리오에서는 실행 환경이 다크모드일 경우 자동으로 내가 만든 HTML 템플릿에 대해 색상을 반전시켜 나타났다.
- 컨테이너의 bg-color가 white이였기 때문에 아무 생각 없이 jpg이미지를 넣었으나 다크모드에서는 모든 색이 반전되었으나 이미지만 배경이 허~옇게 떠있었다.
- 바로 png로 바꿔서 해결했다.
개발일지📒