다양한 이메일 플랫폼을 고려한 뉴스레터 제작 대응 노트

📅 Ver. 2024.09

1. a 태그

• 이슈 플랫폼 : 네이버

[문제]

• a 태그 style 속성에 height, line-height, width 속성이 적용되지 않는다.

[해결방법]

• a 태그 내에 span 으로 한 번 감싸서 span 에 style 을 적용해야한다.

2. Background

• 플랫폼 : Gmail, Outlook
  

[문제]

• Gmail 에서 background-size 속성이 적용되지 않는다.
• Outlook 에서 background 를 축약형으로 기입했을 때, 아웃룩 버전에 따라 적용되는 속성이 다르다.

[해결방법]

• Gmail 과 Outlook 모두를 고려할 경우, 아래와 같이 축약형과 모든 속성 모두 기입한다.

background: url('이미지') repeat position;
background-image: url('이미지');
background-repeat: repeat; 
background-position: position;

3. img 태그

• 이슈 플랫폼 : IOS Gmail 앱/Yahoo 앱, 안드로이드 앱, PC Yahoo 앱

[문제]

• height 속성만 사용하면 사이즈 조절이 되지 않는다.

[해결방법]

• 이미지 크기를 조절할 때 width 를 사용해야 한다.

4. 모바일에서 자동 텍스트 조절

모바일 클라이언트에서는 "가독성"이 떨어지는 경우 폰트 사이즈를 임의로 재정의하고 있다.
텍스트는 글자가 커져도 줄넘김이 되기 때문에 문제가 되지 않는다고 판단하는 것 같다.

모바일에 최적화되지 않은 뉴스레터는 글자가 너무 커져서 레이아웃이 틀어지는 등의 문제가 될 수 있다. PC 와 동일하게 보이게 하려면 결론적으로 폰트 사이즈를 키웠을 때 줄넘김이 되지 않는 등 문제가 발생할 수 있다고 판단하면 글자 크기가 재정의되지 않는다.

방법 1.

• width가 이메일 사이즈와 동일하고 height가 1px인 투명 이미지를 넣으면 크기가 재정의되지 않는다.

방법2.

• white-space: nowrap; 을 적용하여 텍스트가 줄넘김 되지 않도록 변경한다.

방법3.

• 이메일 사이즈와 동일한 길이로 공백이 없는 텍스트 (ex, '------')를 문서 가장 아래에 적용해 둔다.

결론

• 모든 플랫폼에 최적화시키기에는 시간이 오래걸리고 유지보수 할 때 문제가 생길 수 있음
• 모바일 기기의 시스템 폰트 사이즈를 조정한다면 레이아웃에 문제가 생길 수 있음
• 가급적 모바일에 최적화된 디자인으로 변경하는 것이 좋아보임