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

문제 상황 및 원인

• 프론트엔드 개발자가 이메일 템플릿 리뉴얼 중 반응형 디자인이 모바일에서 적용되지 않거나, 이메일 클라이언트별로 다르게 보이는 문제를 겪음.
• 원인은 이메일 클라이언트가 웹 브라우저와 달리 각기 다른 렌더링 엔진을 사용하며, CSS 지원(특히 <style> 태그, display, box model, 미디어 쿼리)이 매우 제한적이기 때문.

해결 방법: table 레이아웃

• 이메일 클라이언트에서 가장 안정적인 <table> 태그를 활용한 table 레이아웃이 현실적인 해결책.
• <table>은 HTML 3.x 시절부터 레이아웃 용도로 사용되어 클라이언트들이 깨뜨릴 수 없는 핵심 태그.
• <table width=\"100%\"> 내부에 max-width:600px 테이블을 중첩하는 구조로 미디어 쿼리 없이 유사 반응형 동작 구현 가능.