웹과 다른 세계: 이메일 템플릿 작업에서 겪은 시행착오

이메일 클라이언트는 웹 브라우저가 아니어서 일반적인 반응형 CSS가 그대로 통하지 않았다. 처음에는 기존 템플릿처럼 media query로 모바일 대응을 시도했지만, 실제 발송 후 확인하니 이미지 크기 조정이 반영되지 않아 레이아웃이 깨졌다.

문제를 줄이기 위해 웹과 모바일에서 같은 레이아웃을 유지하고, 화면이 작아지면 자연스럽게 축소되는 방향으로 바꿨다. 하지만 같은 모바일 환경에서도 Safari, Gmail 앱, 네이버 메일 앱, iOS 기본 메일마다 보이는 모습이 조금씩 달랐다.

원인은 이메일 클라이언트마다 내부 렌더링 엔진이 다르기 때문이다. 브라우저처럼 HTML/CSS 표준 지원을 기대할 수 없고, 특히 다음 요소들이 자주 제약을 받는다.

• <style> 태그와 복잡한 selector 지원 제한
• display: flex, grid 같은 레이아웃 속성의 불완전한 지원
• margin, padding 같은 box model 처리 차이
• z-index, position 등 겹침 관련 속성의 무력화
• @media 의 불안정한 동작, 특히 Gmail과 Outlook

그래서 이메일 템플릿은 결국 table 레이아웃 + 인라인 스타일이 가장 현실적인 해법이 된다. 보통은 바깥에 100% 폭 table을 두고, 가운데에 600px 고정폭 table을 배치해 데스크톱에서는 안정적으로 보이면서도 모바일에서는 화면 크기에 맞춰 축소되게 만든다.

핵심은 CSS로 억지로 반응형을 만드는 것이 아니라, 구조 자체가 반응하도록 설계하는 것이다. 이미지도 컨테이너 폭에 맞춰 다뤄야 하고, 겹침이 필요한 디자인은 이미지 합성으로 처리하는 편이 안전하다.