네이버 메일로 보낸 이메일의 레이아웃이 깨지는 경우

워드프레스 등에서 발송되는 이메일의 레이아웃이 지메일 등 대부분의 메일에서는 원하는 대로 표시되지만 네이버 메일로 전송되면 레이아웃이 제대로 표시되지 않는 경우가 있습니다. 이는 네이버 웹메일이 보안 및 호환성 문제로 인해 특정 CSS나 태그를 제한하기 때문에 발생하는 문제입니다. 이 글에서는 네이버 메일에서 이메일 서식이 깨지는 이유와 이를 해결하기 위한 방법에 대하여 살펴보겠습니다.

네이버 메일로 보낸 이메일의 레이아웃이 깨지는 경우

워드프레스에서 비밀번호 리셋 페이지의 레이아웃을 커스텀하고 싶은 경우 Frontend Reset Password이라는 플러그인을 사용할 수 있습니다.

워드프레스 프런트엔드 비밀번호 재설정 플러그인

이 플러그인에서는 사용자가 비밀번호 재설정 요청을 할 경우 사용자에게 전송되는 이메일 템플릿을 HTML로 편집할 수 있습니다. HTML 코드를 사용하여 사용자에게 전송되는 이메일 서식을 설정한 경우 지메일에서는 원하는 레이아웃으로 표시됩니다.

그러나 네이버 메일에서는 메일 콘텐츠가 제대로 표시되지 않습니다.

네이버 메일에서 HTML이 깨지는 이유

스타일 태그 제거
네이버 메일에서는 <style> 태그 또는 <link>를 통해 불러온 CSS를 대부분 삭제하거나 무시합니다. 따라서 <style> 태그 안에 정의한 폰트(글꼴), 색상, 레이아웃 관련 규칙이 적용되지 않습니다.
인라인 스타일 위주로 동작
네이버 메일은 보안상의 이유로 여러 가지 CSS 속성을 제한한다고 합니다. 그러나 인라인 스타일(태그 내 style="..." 형태로 입력된 속성)은 상대적으로 수용하는 편이라고 합니다.
테이블 레이아웃 권장
일부 이메일 클라이언트(특히 웹메일)는 <div> 기반의 레이아웃보다 <table> 기반 레이아웃을 안정적으로 렌더링하는 경향이 있다고 합니다. 네이버 메일 역시 <div>보다는 <table>을 사용할 때 스타일이 깨질 확률이 훨씬 적은 것으로 보입니다.

네이버 메일 호환성을 높이는 데 도움이 되는 팁

아래 HTML 코드와 같이 <body>에 직접 스타일을 주거나 <div> 태그를 중심으로 레이아웃을 구성할 경우 네이버 메일에서 외부 스타일이 무시되어 배경색이나 여백, 테두리 등이 깨지는 현상이 발생할 가능성이 높습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>비밀번호 재설정</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 40px; background-color: #f4f4f4; line-height: 1.6;">
	<div style="background-color: #ffffff; padding: 20px; border-radius: 5px;">
		<h1 style="color: #333;">안녕하세요!</h1>
		<p>이메일 본문 내용입니다.</p>
	</div>
</body>
</html>

아래와 같이 배경색, 여백 등이 정상 표시되도록 모든 스타일을 인라인으로 두고 <table> 태그로 레이아웃을 구성하면 네이버 메일에서 레이아웃이 깨지지 않을 가능성이 높습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>비밀번호 재설정</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #333333; background-color: #f4f4f4; line-height: 1.6;">
	<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" style="border-collapse: collapse;">
		<tr>
			<td align="center" style="padding: 40px;">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="border-collapse: collapse; border-radius: 5px;">
					<tr>
						<td style="padding: 20px; font-family: Arial, sans-serif; color: #333333; line-height: 1.6;">
							<h1 style="margin: 0 0 10px 0; color: #333333;">안녕하세요!</h1>
							<p style="margin: 0 0 10px 0;">이메일 본문 내용입니다.</p>
							<p style="margin: 0;">감사합니다!</p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

실제로 위의 두 HTML 코드로 테스트해보면 아래 코드를 사용할 때 레이아웃이 깨지지 않습니다.

다음과 같은 관행이 도움이 될 수 있습니다.

모든 스타일을 인라인으로 처리하기
body 여백, 폰트, 색상 등은 모두 style 속성 안에 직접 인라인으로 입력합니다.
테이블(table) 태그로 전체 레이아웃 구성하기
외부 레이아웃뿐만 아니라 버튼, 이미지 배치를 위해서도 가능한 한 <table> 태그를 활용하는 것이 호환성을 높이는 데 도움이 됩니다.
CSS3 속성 사용 시 주의
border-radius, box-shadow 등은 대체로 네이버 메일에서도 지원되지만, 일부 오래된 이메일 클라이언트에서는 깨질 수 있다고 합니다.
심플한 코드 유지
지나치게 복잡한 레이아웃이나 중첩되는 스타일은 예기치 않은 깨짐 현상을 유발할 수 있으므로 꼭 필요한 요소를 중심으로 디자인하시기 바랍니다.

우커머스에서 이메일 템플릿을 만들 때 위의 내용을 참고하면 네이버 메일에서도 이메일 서식이 깨질 가능성이 줄일 수 있을 것입니다.