본문으로 건너뛰기

다음, Gmail등의 수신메일에서 태그가 적용된 메일이 깨지는 경우 어떻게 하나요?

💡 요약 정리

Daum(다음), Gmail은 수신 메일에서 보안상 <script>와 body에 적용된 CSS를 제거합니다.
이로 인해 레이아웃/서식이 깨져 보일 수 있습니다.
해결: <script>는 사용하지 말고, 각 요소에 <div style="..."> 형태로 CSS를 인라인 적용하세요.
즉, 본문 요소마다 style 속성으로 직접 스타일을 지정하면 호환성이 높아집니다.

1. 왜 메일이 깨지나요?

Daum(다음), Gmail 같은 메일 서비스는 보안과 호환성 문제로 수신 메일 내 일부 태그/속성을 자동으로 제거합니다.
특히 아래와 같은 경우가 해당됩니다.
- <script> 태그가 포함된 경우
- body 태그에 직접 CSS를 적용한 경우
위 요소들이 제거되면, 기대한 디자인이 반영되지 않아 내용이 깨져 보일 수 있습니다.

2. 해결 방법

핵심 원칙
- <script> 태그는 사용하지 않습니다.
- CSS는 문서 전체가 아닌, 각 콘텐츠 블록에 인라인 스타일로 적용합니다. 예: <div style="...">

2.1 옳지 않은 예 (지양)

다음과 같이 문서 전역에 스타일을 주거나 스크립트를 포함하면 수신 측에서 제거되어 레이아웃이 무너질 수 있습니다.

<!-- 수신 측에서 제거/무시될 수 있음 -->
<body style="font-family: Arial; color: #333;">
  <script>
    // 인터랙션/동적 제어용 스크립트
  </script>
  <div>안녕하세요</div>
</body>

2.2 권장 예 (정상 표시)

각 블록에 인라인 스타일로 직접 지정합니다.

<!-- 블록별 인라인 스타일 적용 -->
<div style="font-family: Arial, sans-serif; font-size: 14px; color: #333; line-height: 1.6;">
  안녕하세요, 고객님.
</div>

<div style="background: #f5f5f5; padding: 16px; margin-top: 12px; border-radius: 4px; color: #222;">
  안내 드릴 내용은 다음과 같습니다.
</div>

<div style="margin-top: 12px; color: #0075c8; font-weight: 700;">
  자세한 내용은 아래를 확인해 주세요.
</div>

2.3 작성 팁

본문 단락마다 <div style="...">...</div> 형태로 스타일을 부여하세요.
글꼴, 색상, 여백, 배경 등 필요한 속성만 간결하게 지정하면 호환성이 좋아집니다.
주의: 외부 스크립트나 동적 동작은 대부분 메일 클라이언트에서 차단되므로 기대한 대로 동작하지 않습니다.

1. 왜 메일이 깨지나요?
2. 해결 방법