[메일폼] mobile mail form font size 탐구

PC에서 메일을 확인할 때는 글씨가 적당한 크기로 잘 보이지만, 같은 메일을 모바일에서 확인할 때 글씨가 깨알만하게 작아져서 잘 보이지 않는 경우가 있다. 이 문제는 특히 네이버 메일 앱에서 발생하는데, 동일한 메일을 구글 메일 앱에서 확인할 때는 폰트 크기가 잘 보인다.

---

(좌 네이버, 우 지메일, 케세이퍼시픽 메일)

네이버와 구글 메일의 차이점

네이버와 구글 메일 앱에서의 폰트 크기 차이는 scale 처리 방식에서 비롯된 것으로 보인다.

네이버 메일

네이버 메일에서는 모바일 메일로 전환 시 transform scale을 사용하여 비율에 맞춰 줄이면서 글자 크기도 함께 줄어든다.

<div style="height: 1912.51px; transform: scale(0.429487) translate3d(0px, 0px, 0px); transform-origin: 0px 0px;">
  ...
</div>

 

이때, 메일 상단의 "글자가 더 잘 보이도록 해드려요." 버튼을 누르거나 가+ 로 폰트 크기를 키우면, 폰트가 있는 태그마다 폰트 스타일이 %로 변경되거나 더 큰 px 단위로 변경된다.

 

 

 

구글 메일

구글 메일에서는 스케일을 줄이는 동시에 폰트 크기를 키워 가독성을 높이는 처리를 한다.

<div style="font-size: 232.836%; width: 780px; -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; transform: scale(0.429487, 0.429487);">
  ...
</div>

 

이렇게 함으로써 별다른 처리를 하지 않아도 텍스트가 모바일 환경에서도 잘 보인다.

 

결론

모바일 환경에서 이메일 가독성 문제는 브라우저나 클라이언트별로 다양하게 발생할 수 있다.

범용적으로 사용할 수 있는 메일폼을 위해서는 모바일 너비에 맞춘 메일 폼 디자인이 적절할 것 같다.