썬더메일 블로그

네이버 웹메일에 최적화된 네이버페이 구매확정 메일 템플릿

안녕하세요. 썬더메일사업부의 최부장입니다.

네이버페이 관련 구매확정 메일을 수신했는데 메일 템플릿이 상당히 깔끔하고 이뻐서 소개합니다.

무엇보다, 네이버웹메일, 아웃룩 프로그램, 구글 지메일 모바일앱에서 틀어짐 없이 깔끔하게 보입니다.

테이블 구조를 유지하면서 활용하면 좋을 듯합니다.

템플릿에 사용 된 폰트도 나눔고딕, 맑은고딕, 돋움 순으로 지정되어 있어서 한국 환경에 최적화 되어 있습니다.

대략적인 디자인입니다. 모바일을 고려해서 폭이 넓지 않습니다.

아웃룩에서도 깔끔하게 보여지고 있습니다. 무엇보다 한국인들이 많이 사용하는 폰트가 설정되어 있어서 수신 된 메일이 더 깔끔하게 보이는 것 같습니다.

 

구글 지메일 웹메일에서도 동일하게 보입니다.

구글 지메일 모바일앱에서도 깔끔하게 잘 보입니다.

네이버와 다음 웹메일에서 html과 Editor을 교차해서 html을 확인하면 해당 메일 클라이언트가 소스를 자동으로 변경하는 것을 확인할 수 있습니다. 즉, 스팸에 악용 될 수 있는 코드는 자동으로 변경 또는 제거됩니다. 

이런 과정을 거쳐도 웹과 아웃룩, 지메일 모바일앱에서 동일하게 노출되어야 잘 만들어진 메일 템플릿이 됩니다.

 

소스는 하단을 참고하세요. 

더보기

<span style="WHITE-SPACE: normal; TEXT-TRANSFORM: none; WORD-SPACING: 0px; FLOAT: none; COLOR: rgb(0,0,0); FONT: 12px/18px Dotum; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">
            <table border="0" cellpadding="0" cellspacing="0" style="width:100%;background-color:#f8f8f9;letter-spacing:-1px"
                   align="center">
                <tr>
                    <td align="center">
                        <!-- 아웃룩용 max-width 핵 -->
                        <!--[if (gte mso 9)|(IE)]>
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="595">
                        <![endif]-->
                        <div style="max-width:595px; margin:0 auto">
                            <table cellpadding="0" cellspacing="0"
                                   style="width:100%;margin:0 auto;background-color:#fff;;-webkit-text-size-adjust:100%;text-align:left">
                                <tr>
                                    <td colspan="3" height="60"></td>
                                </tr>
                                <tr>
                                    <td width="21"></td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
                                            <tr>
                                                <td style="margin:0;padding:0">
                                                   
                                                </td>
                                            </tr>
                                            <tr>
                                                <td height="40">로고 이미지 부분</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="21"></td>
                                </tr>
                                                <!-- 기본정보 -->
                <tr>
    <td width="21"></td>
    <td>
        <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
            <tr>
                <td style="font-size:28px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#424240;line-height:34px;vertical-align:top">
                    구매하신 상품의<br><span style="color:#1ec800">구매확정처리 </span>부탁드립니다.
                </td>
            </tr>
            <tr>
                <td height="13"></td>
            </tr>
            <tr>
                <td style="font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:24px;vertical-align:top">
                    상품을 받으신 후 만족하셨다면 구매확정을 부탁드립니다. <br>
                    아래 기한까지 구매확정을 하지 않으실 경우, 이후 자동으로 구매가 확정될 예정입니다.<br>
                    만일, 구매확정기한 내 정상적으로 상품을 수령하지 못하신 경우에는 판매자문의 또는 구매확정 연장을 해주세요.
                </td>
            </tr>
            <tr>
                <td height="22"></td>
            </tr>
        </table>
    </td>
    <td width="21"></td>
</tr>
<tr>
    <td colspan="3" height="1" style="background:#e5e5e5"></td>
</tr>
<tr>
    <td colspan="3" height="26"></td>
</tr>
<!-- 주문번호 -->
<tr>
    <td width="21"></td>
    <td>
        <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
            <tr>
                <td width="70" style="padding-bottom:9px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;vertical-align:top">
                    고객명
                </td>
                <td style="padding-bottom:9px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#333;vertical-align:top">
                    홍길동님
                </td>
            </tr>
            <tr>
                <td width="70" style="padding-bottom:9px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;vertical-align:top">
                    주문번호
                </td>
                <td style="padding-bottom:7px;font-size:17px;font-family:Helvetica;font-weight:bold">
                    <a target="_blank" href="https://orders.pay.naver.com/order/status/2025070297045301"
                       style="color:#1ec800;text-decoration:none">2025301</a>
                </td>
            </tr>
            <tr>
                <td width="70" style="padding-bottom:9px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;vertical-align:top">
                    주문일자
                </td>
                <td style="padding-bottom:9px;font-size:14px;font-family:Helvetica;color:#333;vertical-align:top">
                    2025.07.02
                </td>
            </tr>
            <tr>
                <td width="70" style="padding-bottom:9px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;vertical-align:top">
                    발송일자
                </td>
                <td style="padding-bottom:9px;font-size:14px;font-family:Helvetica;color:#333;vertical-align:top">
                    2025.07.02
                </td>
            </tr>
            
            <tr>
                <td width="120" style="padding-bottom:9px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;vertical-align:top">
                    자동구매확정일
                </td>
                <td style="padding-bottom:9px;font-size:14px;font-family:Helvetica;color:#333;vertical-align:top">
                    2025.07.11
                </td>
            </tr>
            <tr>
                <td colspan="2" height="47"></td>
            </tr>
        </table>
    </td>
    <td width="21"></td>
</tr>
<!--// 주문번호 -->
                <!-- 결제상세 -->
                
            <tr>
                <td width="21"></td>
                <td>
                    <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
                        <tbody>
                        <tr>
                            <td height="24"
                                style="font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;font-weight:bold;color:#000;vertical-align:top">
                                결제상세
                            </td>
                        </tr>
                        <tr>
                            <td height="2" style="background:#424240"></td>
                        </tr>
                        <tr>
                            <td height="18"></td>
                        </tr>
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
                                    <tbody>
                                    <tr>
                                        <td width="50%"
                                            style="padding-bottom:15px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
                                            &nbsp;</td>
                                        <td style="padding-bottom:15px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#000;line-height:16px;text-align:right;vertical-align:top">
                                            &nbsp;</td>
                                    </tr>
                                    <tr>
    <td width="50%" colspan="2" style="padding-top:3px;border-top: 1px dotted #e6e6e6;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
    </td>
</tr>
                                    
                                    <tr>
    <td width="50%"
        style="padding-top:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
        &nbsp;</td>
    <td style="padding-top:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#000;line-height:16px;text-align:right;vertical-align:top">
        &nbsp;</td>
</tr>
                                    
                                    <tr>
    <td width="50%"
        style="padding-top:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
        &nbsp;</td>
    <td style="padding-top:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#000;line-height:16px;text-align:right;vertical-align:top">
        &nbsp;</td>
</tr>
                                    
                                    
                                    <tr>
                                        <td height="18"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" height="1" style="background:#d5d5d5"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
                <td width="21"></td>
            </tr>
        
                <!-- 배송정보 -->
                <tr>
    <td width="21"></td>
    <td>
        <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
            <tr>
                <td height="56"></td>
            </tr>
            <tr>
                <td height="23"
                    style="font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;font-weight:bold;color:#000;vertical-align:top">
                    &nbsp;</td>
            </tr>
            <tr>
                <td height="2" style="background:#424240"></td>
            </tr>
            <tr>
                <td height="20"></td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    </td>
    <td width="21"></td>
</tr>
                <!-- 주문상품 -->
                            <tr>
                <td width="21"></td>
                <td>
                    <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
                        <tr>
                            <td height="56"></td>
                        </tr>
                        <tr>
                            <td height="24"
                                style="font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;font-weight:bold;color:#000;vertical-align:top">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td height="2" style="background:#424240"></td>
                        </tr>
                        <tr>
                            <td height="21"></td>
                        </tr>
                                                <tr>
                            <td>
                                &nbsp;</td>
                            </tr>                        <tr>
                            <td>
                                &nbsp;</td>
                            </tr>
                    </table>
                </td>
                <td width="21"></td>
            </tr>           
                <!-- 최종결제 금액 -->
                <tr>
    <td width="21"></td>
    <td>
        <table cellpadding="0" cellspacing="0" style="width:100%;margin:0;padding:0">
            <tbody>
            <tr>
                <td colspan="2" height="1" style="height:2px;background:#424240"></td>
            </tr>
            <tr>
                <td colspan="2" height="17"></td>
            </tr>
            <tr>
                <td width="50%"
                    style="padding-bottom:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
                    &nbsp;</td>
                <td style="padding-bottom:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#000;line-height:16px;text-align:right;vertical-align:top">
                    &nbsp;</td>
            </tr>
            <tr>
                <td width="50%"
                    style="padding-bottom:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
                    &nbsp;</td>
                <td style="padding-bottom:12px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#000;line-height:16px;text-align:right;vertical-align:top">
                                &nbsp;</td>
            </tr>
            
            <tr>
                <td width="50%"
                    style="padding-bottom:18px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:16px;vertical-align:top">
                    &nbsp;</td>
                <td style="padding-bottom:18px;font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#000;line-height:16px;text-align:right;vertical-align:top">
                                &nbsp;</td>
            </tr>
            
            <tr>
                <td colspan="2" height="17" style="border-top: 1px dotted #e6e6e6;"></td>
            </tr>
            <tr>
                <td width="45%"
                    style="font-size:16px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;font-weight:bold;color:#333;line-height:22px">
                    주문금액
                </td>
                <td style="font-size:16px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;font-weight:bold;color:#333;text-align:right;line-height:30px">
                    &nbsp;</td>
            </tr>
            <tr>
                <td colspan="2" height="17"></td>
            </tr>
            <tr>
                <td colspan="2" height="1" style="background:#424240"></td>
            </tr>
            <tr>
                <td colspan="2" height="29"></td>
            </tr>
            </tbody>
        </table>
    </td>
    <td width="21"></td>
</tr>
                <!-- Footer -->
                <tr>
<td colspan="3" align="center" style="height: 18px">
<div style="display:inline-block;width:278px;max-width:100%;vertical-align:top">
<table style="table-layout: fixed;width:100%;background:#1ec800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="56" style="text-align:center">
<a href="https://orders.pay.naver.com/order/" style="display:block;height:56px;font-size:18px;color:#fff;text-decoration:none;line-height:56px;font-family:'돋움','Dotum',돋움">구매확정 하러가기</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3" height="40"></td>
</tr>
                                <!-- footer-->
                                <tr>
                                    <td colspan="3"
                                        style="padding-top:26px;padding-left:21px;padding-right:21px;padding-bottom:13px;background:#e5e5e5;font-size:12px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:17px">
                                        본 메일은 발신전용입니다.<br>
                                        
            상품의 배송/반품/교환/취소/환불 문의는 판매자에게 문의하시면 더 빠르고 정확한 처리가 가능합니다.<br>
네이버파이낸셜(주)는 결제정보의 중개자 또는 통신판매중개자이며 통신판매의 당사자가 아닙니다.<br>
상품의 주문, 배송, 환불 등과 관련된 의무와 책임은 판매자에게 있습니다.<br>
                                        네이버페이 이용 관련 제안사항이나 불편 신고는 <a href="http://help.pay.naver.com" style="color:#696969;font-weight:bold;text-decoration:underline">고객센터</a>를 이용해 주세요.
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"
                                        style="padding-top:10px;padding-left:21px;padding-right:21px;padding-bottom:13px;background:#e5e5e5;font-size:12px;font-family:'나눔고딕',NanumGothic,'맑은고딕',Malgun Gothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;color:#696969;line-height:17px">
                                        <a href="https://new-m.pay.naver.com/member/terms-policy/npay-usage" style="padding-right:10px;color:#696969;text-decoration:none">네이버페이 이용약관</a> l 
                                        <a href="https://new-m.pay.naver.com/member/terms-policy/withdrawal-of-subscription" style="padding:0 10px;color:#696969;text-decoration:none">청약철회 등에 관한 사항</a> l 
                                        <a href="https://new-m.pay.naver.com/member/terms-policy/privacy" style="padding:0 10px;color:#696969;text-decoration:none">개인정보 처리방침</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"
                                        style="padding-left:21px;padding-right:21px;padding-bottom:57px;background:#e5e5e5;font-size:12px;font-family:Helvetica;color:#696969;line-height:17px">
                                        Copyright ⓒ <strong>NAVER FINANCIAL Corp.</strong> All Rights Reserved.
                                    </td>
                                </tr>
                                <!--// footer-->
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
            </table>       
        </span><table style='display:none'><tr><td></td></tr></table>

안녕하세요. 썬더메일입니다. 영업문의: 070-7095-9792 , 기술문의: 070-7095-9794 , 메일문의처
지원 서비스: 대량ㆍ자동메일(API포함), 대량ㆍ자동SMS, 카카오톡 알림톡, 설문조사(와이즈서베이)

티스토리툴바

'썬더메일 활용방안/메일 템플릿' 관련 글

더 보기

모바일과 웹에 최적화 된 케인크릭 웰컴 메일 템플릿

  • 2025.06.23
더 읽기

뉴스레터로 사용하지 좋은 메일 템플릿 샘플, '애플 뉴스'

  • 2025.06.16
더 읽기

반응형 이메일 템플릿, Responsive Email Templates

  • 2025.02.17
더 읽기

광군제 관련 알리익스프레스 마케팅 메일 내용 분석

  • 2024.11.11
더 읽기

댓글

Copyright © Andwise Inc. All Rights Reserved Tel: 070-7095-9792

티스토리툴바