이 게시물은 이메일 템플릿 리뉴얼 과정에서 프론트엔드 관점의 문제와 해결법을 공유하는 글입니다.

문제 상황

• 미디어 쿼리 기반 반응형이 모바일에서 적용되지 않음, 이미지 과도 확대로 레이아웃 붕괴
• 같은 모바일 환경에서도 이메일 클라이언트별로 미세하게 다른 레이아웃 노출

원인

• 이메일 클라이언트별 서로 다른 렌더링 엔진 사용으로 CSS 지원 편차 큼 (Outlook-MS Word, Gmail-필터링, iOS Mail-WebKit 등)
• style 태그·셀렉터 제한, display·box model·z-index·media query 등 속성 지원 불완전

해결 방법

• table 기반 레이아웃과 인라인 스타일 사용으로 호환성 확보
• 이미지는 컨테이너 기준 width="100%" 또는 고정 사용, 겹침은 이미지 병합으로 처리