이메일 템플릿을 만들게 된 상황에 HTML 템플릿을 어떻게 작업해야 되는지 기록 합니다 📝
ex) 이메일로 인증할 때, 또는 이커머스 배송 현황 등등 서비스로 부터 이메일을 받아야 하는 상황
네이버 클라우드 플랫폼(NCP)에 HTML 통짜로 작업된 이메일 인증 폼 코드 삽입 시 <style></style> 태그와 <html></html>,<head></head> 태그들이 자동삭제 된다.
그 외에도 HTML 이메일 템플릿을 만들 때 고려해야 할 사항들이 많다.
어떻게 작업해야 좋을지 알아보자!
스타일
- 스타일은 인라인 스타일 (inline-style)로 작업해야한다.
-
display:flex관련한 스타일 속성은 적용이 안된다. 크로스 브라우징을 고려해서 모든 브라우저에서 사용 가능한 스타일 속성을 적용 시켜야 한다. -
반응형 미디어쿼리는 지원 안해주니 그런 부분들도 고려해서 작업해야합니다. 모바일 PC에 따른 반응형으로 작업하고 싶다면
style="max-width: 100%"를 넣어 모바일 기기에서도 깨지지 않도록 합니다.
이미지
-
이미지 확장자는 jpg, png로 해야 엑박 현상이 일어나지 않는다.
-
svg를 사용할 시 엑박 현상이 일어난다. -
width와height와alt값은 필수로 입력해야한다. -
이미지 주소는 절대경로로 작성하기
마크업
- 몇몇 이메일 클라이언트는
<div>태그를 제공해주지 않기 때문에 이메일의 구조를 정상적으로 제공하려면<div>를 사용하지 않고<table>로 작성해야 합니다.
🌟 코드 예시
<tr>
<td>
<p style="color:#424C5E;
font-family: Pretendard;
font-size: 17px;
font-weight: 400;
line-height: 160%;
margin: 0;
letter-spacing: -0.255px;">
고객님의 이메일 주소를 통해
</p>
<p style="color:#424C5E;
font-family: Pretendard;
font-size: 17px;
font-weight: 400;
line-height: 160%;
margin: 0;
letter-spacing: -0.255px;">
계정 <strong style="font-weight: 600"> ${userEmail}</strong>에 대한 접근이 요청되었습니다.
</p>
<p style="color:#424C5E;
font-family: Pretendard;
font-size: 17px;
font-weight: 400;
line-height: 160%;
margin: 0;
letter-spacing: -0.255px;">
아래 버튼을 클릭하여 이메일 인증을 완료해 주세요.
</p>
</td>
</tr>이와 같이 table 태그를 사용해서 작업 해야하고 인라인 스타일로 작성해야 하는 등 이메일 템플릿을 만들 때 고려해야 될 점들이 한 두가지가 아닙니다.
기록 끝
아늑한 뇌공간 🧠