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

Source: Wanted Tech

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

원티드에서는 지원 완료, 서류 합격 등 채용 진행 과정과 합·불 결과를 안내하는 이메일을 발송하고 있습니다. 이러한 이메일들은 오랫동안 동일한 템플릿을 사용해 왔는데, 최근 해당 이메일 템플릿을 리뉴얼하는 작업을 진행하게 되었습니다.

이번 글에서는 프론트엔드 개발자로서 이메일 템플릿 작업을 하며 겪었던 문제와 그 원인, 그리고 해결 방법을 공유해 보려고 합니다. 이메일 템플릿 작업을 처음 접하시는 분들께 작은 참고 자료가 되었으면 합니다.

문제 상황

새롭게 변경되는 이메일 템플릿은 웹과 모바일 웹에서 반응형으로 노출되는 디자인으로 제작되었습니다. 작업 전 기존에 사용 중이던 이메일 템플릿 HTML을 몇 개 전달받았고, 해당 파일 안에서 CSS 미디어 쿼리를 사용해 반응형 처리를 하고 있는 것을 확인할 수 있었습니다. 따라서 저 역시 기존 템플릿을 참고하여, 미디어 쿼리를 활용한 반응형 디자인을 구현하는 방식으로 작업을 진행했습니다.

문제 상황 1: 모바일에서 반응형이 적용되지 않음

구현한 템플릿을 적용해 테스트 이메일을 발송한 뒤 모바일에서 확인해 보니, 의도했던 반응형 디자인이 적용되지 않은 것을 발견했습니다. 특히 이미지 크기를 미디어 쿼리로 조정하려 했던 부분이 전혀 반영되지 않았고, 그 결과 모바일 환경에서 이미지가 과도하게 크게 노출되면서 전체 레이아웃이 깨지는 문제가 발생했습니다.

이 시점에서 이메일 환경에서는 일반적인 웹 반응형 접근 방식이 잘 동작하지 않을 수 있다는 의심이 들었습니다.

문제 상황 2: 동일한 모바일 환경에서도 제각각 다르게 보임

1차 문제를 겪은 뒤, 반응형 디자인을 포기하고 웹과 모바일에서 동일한 레이아웃을 유지하되, 화면 크기에 따라 비율만 자연스럽게 축소되는 방식으로 방향을 수정했습니다. 다시 테스트 이메일을 발송한 결과, 모바일에서는 의도한 대로 축소된 비율로 노출되긴 했습니다.

하지만 같은 모바일 환경임에도 불구하고, 아래와 같은 앱마다 미묘하게 다른 레이아웃으로 노출되었습니다.

• 모바일 Safari 브라우저
• Gmail 앱
• 네이버 메일 앱
• iOS 기본 메일 앱

알고 보니 기존에 사용하던 이메일 템플릿도 앱에 따라 조금씩 다른 레이아웃으로 노출되고 있음을 확인할 수 있었습니다.

원인: 이메일 클라이언트는 브라우저가 아니다

문제의 근본적인 원인은 단순했습니다. 이메일 클라이언트는 웹 브라우저가 아니기 때문입니다.

웹 브라우저의 특징

• 표준 HTML / CSS 렌더링 엔진 사용
• flex, grid, media query, box model 등 거의 완전 지원

이메일 클라이언트의 현실

이메일 클라이언트는 각자 서로 다른 내부 렌더링 엔진을 사용합니다.

• Outlook (Windows) → MS Word 렌더링 엔진 사용
• Gmail (웹 / 앱) → CSS 필터링 + 자체 파서
• iOS Mail → WebKit 기반 (가장 정상적인 편)
• 네이버 / 카카오 메일 → 제한적인 WebView 사용

즉, CSS를 웹 브라우저처럼 정확히 그려줄 것이라는 전제 자체가 성립하지 않습니다.

이메일에서 CSS가 깨지는 이유

1. <style> 태그와 selector 지원 제한

• 복잡한 CSS가 무시되거나 일부만 적용
• class selector, descendant selector 등이 필터링
• 특히 Gmail 웹/앱에서 자주 발생

2. display 속성 지원 불완전

• display: flex;, display: grid;, display: inline-block; 등
• Outlook: 거의 전부 무시
• Gmail: 일부만 지원, 예외 많음

3. Box model 불안정

• margin: auto;, padding: 16px; 등
• Gmail: 정상
• Outlook: margin 무시, padding 깨짐
• 모바일 앱: 환경에 따라 랜덤

4. 레이어 / 겹침 관련 속성 사용이 사실상 무용

• z-index, overflow: hidden 등
• position이 깨지기 때문에 같이 무력화
• 배너 위 텍스트 오버레이 같은 구조 불가능

5. 반응형 / 미디어 쿼리 불안정

• @media 지원 편차 극심
  • Gmail 웹/앱: ❌
  • Outlook: ❌
  • iOS Mail / Apple Mail: ✅

👉 “모바일 대응”을 media query로 하면 일부 iOS 앱에서만 잘 보이고 나머지는 데스크톱 그대로 보여집니다. 결과적으로 이메일 클라이언트마다 부분적으로만 적용되는 CSS가 발생합니다.

해결 방법: table 레이아웃 + 인라인 스타일

왜 table인가?

table은

• HTML 3.x 시절부터 존재
• CSS 등장 이전부터 레이아웃 용도로 사용
• 이메일 클라이언트가 깨뜨리면 안 되는 핵심 태그

이메일 클라이언트 제작사 입장에서는 “div, flex, grid가 깨지는 건 감수할 수 있지만 table이 깨지면 수많은 이메일이 망가진다”는 전제가 깔려 있습니다. 그 결과, table만 유독 가장 안정적으로 지원됩니다.

이메일에서 가장 현실적인 레이아웃 패턴

<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <!-- 콘텐츠 -->
    </td>
  </tr>
</table>

이 구조의 장점

• ✅ 데스크톱: 600 px 고정 레이아웃
• ✅ 모바일: 화면이 줄어들면 자연스럽게 축소
• ✅ 미디어 쿼리 없이도 유사 반응형 구현 가능
• ✅ Outlook 포함 대부분의 이메일 클라이언트에서 동일하게 동작

이는 CSS 기반 반응형이 아니라, 구조적으로 반응하는 레이아웃에 가깝습니다.

추가 팁

• 이미지는 컨테이너(table)의 width를 기준으로 width="100%" 또는 고정 width 속성 사용
• 중첩된 도형이나 겹침이 필요한 디자인은 이미지 병합으로 처리 (z-index 사용 불가)
• 필요한 경우 display: inline-block 정도만 제한적으로 활용

마무리하며

작업을 마치고 나서야 이메일 템플릿의 특성을 미리 알고 있었다면 시행착오를 훨씬 줄일 수 있었겠다는 생각이 들었습니다. 요즘은 AI에게 코드나 디자인을 전달하고 “이메일 호환성에 맞게 수정해 달라”고 요청하면 꽤 그럴듯한 결과를 만들어 주기도 합니다. 하지만 실제 서비스에 바로 적용할 수 있을 만큼 완벽하지는 않았습니다.

앞으로 이메일 템플릿 작업을 하게 되실 분이 계시다면, 제가 겪었던 시행착오가 지름길이 되길 바랍니다.