이메일 템플릿, 웹과 달라요!
by DD
5개월 전
조회수 31
이메일 템플릿 리뉴얼 작업 중 반응형 디자인 적용 실패
Gmail, Outlook 등 이메일 클라이언트별 CSS 렌더링 차이 발생
Table 레이아웃과 인라인 스타일 적용으로 호환성 확보
이메일 클라이언트의 렌더링 엔진
이메일 클라이언트는 웹 브라우저와 달리 자체적인 렌더링 엔진을 사용한다. Outlook은 MS Word, Gmail은 CSS 필터링, iOS Mail은 WebKit 기반이다. 따라서 웹 표준 CSS가 제대로 적용되지 않아 레이아웃 깨짐 현상이 발생하며, 미디어 쿼리 또한 제대로 동작하지 않는다.
CSS 제약과 해결책: Table 레이아웃
이메일 클라이언트는 태그 및 셀렉터 지원에 제한적이며, display 속성과 box model 또한 불안정하다. Table 레이아웃은 HTML 3.x 시절부터 사용되어 이메일 클라이언트에서 가장 안정적으로 지원된다. 따라서 인라인 스타일과 함께 사용하면 호환성을 확보할 수 있다.
이메일 템플릿 실전 적용 가이드
이미지는 컨테이너의 width를 기준으로 width="100%" 또는 고정 width를 사용한다. 중첩된 디자인은 이미지 병합으로 처리하고, display: inline-block은 제한적으로 활용한다. Table 레이아웃을 활용하여 데스크톱과 모바일에서 유사 반응형 디자인을 구현하고, Outlook을 포함한 대부분의 클라이언트에서 일관성을 유지한다.
