이 초보자 친화적인 가이드에서는 어떤 기기에서든 멋지게 보이는 반응형 이메일 템플릿을 만드는 방법을 배웁니다. 단계별 지침과 코드 스니펫을 따라 하며 누구나 따라올 수 있는 이메일 디자인의 기본기를 익힐 수 있습니다.
이메일 디자인 기초를 제대로 마스터하고 싶은 입문자에게 안성맞춤인 프로젝트입니다!
1단계: 기본 구조 설정하기
이메일 템플릿을 만들려면 먼저 기본적인 HTML 구조부터 시작해야 합니다. 여기에는 이메일용 DOCTYPE 선언, head와 body 섹션 정의, 그리고 모바일 환경에서 올바르게 렌더링되고 확대·축소가 가능하도록 head에 메타 태그를 추가하는 작업이 포함됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Email Template</title>
</head>
<body>
<!-- Email content goes here -->
</body>
</html>2단계: 이메일 구조 만들기
다양한 이메일 클라이언트와의 호환성을 보장하려면 테이블(table)을 사용해 이메일의 기본 구조를 잡는 것이 좋습니다.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<!-- Email content goes here -->
</table>
</td>
</tr>
</table>3단계: 콘텐츠와 인라인 스타일 추가하기
이메일 클라이언트마다 CSS를 해석하는 방식이 다르기 때문에, 인라인 스타일을 사용하는 것이 안전합니다. 아래는 간단한 이메일 본문의 예시입니다.
<body style="font-family: 'Poppins', Arial, sans-serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 20px;">
<table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
<!-- Header -->
<tr>
<td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
Responsive Email Template
</td>
</tr>
<!-- Body -->
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
Hello, All! <br>
Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis.
</td>
</tr>
<!-- Call to action Button -->
<tr>
<td style="padding: 0px 40px 0px 40px; text-align: center;">
<table cellspacing="0" cellpadding="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consultation</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit.
</td>
</tr>
<!-- Footer -->
<tr>
<td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
Copyright &copy; 2024 | Your brand name
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>주요 요소들이 각각 어떤 역할을 하는지 하나씩 살펴보겠습니다.
body 태그와 폰트 설정
<body style="font-family: 'Poppins', Arial, sans-serif">이메일 전체의 기본 폰트를 'Poppins'로 지정합니다. 'Poppins'를 사용할 수 없는 경우를 대비해 Arial과 sans-serif가 차례로 대체(fallback) 폰트로 적용됩니다.
테이블 구조
<table width="100%" border="0" cellspacing="0" cellpadding="0">이것은 이메일 너비의 100%를 차지하는 최상위(외곽) 테이블입니다. border, cellspacing, cellpadding을 모두 0으로 설정하여 기본 스타일과 간격을 제거했습니다.
이 테이블 안에는 고정 폭 600px의 또 다른 <table class="content">이 중첩되어 있으며, 부모 요소의 td align="center" 덕분에 화면 중앙에 정렬됩니다.
안쪽 테이블에는 테두리와 세부 스타일이 적용되어 있어 이메일의 메인 콘텐츠 영역으로 정의됩니다.
헤더는 인라인 CSS로 짙은 남색(#345C72) 배경, 흰색 글자, 큰 글자 크기(24px)를 적용하여 이메일을 열자마자 시선을 사로잡도록 설계되었습니다.
참고: 이 영역에는 브랜드 이름이나 로고를 넣어 자유롭게 커스터마이징할 수 있습니다.
본문 콘텐츠
본문 섹션에는 이메일의 핵심 메시지가 담깁니다. 가독성을 높이기 위해 글자 크기는 16px, 줄 간격(line-height)은 1.6으로 설정했으며, 내용은 좌측 정렬되어 있습니다. <br> 태그를 활용하면 줄 간격을 조절하는 데 도움이 됩니다.
클릭 유도 버튼(CTA 버튼)
<!-- Call to action Button -->
<tr>
<td style="padding: 0px 40px 0px 40px; text-align: center;">
<table cellspacing="0" cellpadding="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consultation</a>
</td>
</tr>
</table>
</td>
</tr>CTA 버튼은 헤더와 동일한 배경색, 둥근 모서리(border-radius: 5px), 그리고 굵은 흰색 글씨로 눈에 잘 띄도록 디자인되었습니다.
버튼 안의 <a> 태그는 기본 밑줄을 제거(text-decoration: none)하고, 수신자가 "무료 상담 예약"을 할 수 있는 웹페이지로 연결됩니다.
푸터(Footer)
푸터는 헤더와 비슷한 스타일링 방식을 사용하지만 더 어두운 배경(#333333)과 작은 글자 크기(14px)를 적용합니다. 저작권 정보, 링크, 기타 연락처 정보 등을 담을 수 있습니다.
구성 요소 한눈에 보기
템플릿의 주요 부분인 헤더, CTA 버튼, 푸터의 위치를 나타낸 구성도
4단계: 반응형으로 만들기
모바일 기기에서도 이메일이 깔끔하게 보이도록 하려면 CSS 미디어 쿼리(media query)를 활용하면 됩니다. 대부분의 스타일은 인라인으로 처리하지만, 반응형 동작을 위해서는 head 안에 <style> 블록을 추가해야 합니다.
미디어 쿼리는 기기의 화면 너비에 따라 스타일을 조정합니다.
<style>
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
display: block !important;
padding: 10px !important;
}
.header, .body, .footer {
padding: 20px !important;
}
}
</style>이 CSS 스니펫의 세부 내용을 분석해 보겠습니다.
@media screen and (max-width: 600px) { ... }이 미디어 쿼리는 최대 너비가 600픽셀인 화면을 대상으로 합니다. 즉, 화면 폭이 600px 이하인 기기—일반적으로 스마트폰과 일부 소형 태블릿—에서 볼 때만 아래 스타일이 적용됩니다.
.content 클래스
width: 100% !important;: HTML에 지정된 600px 대신.content테이블이 화면 전체 폭을 사용하도록 변경합니다.!important규칙은 충돌하는 다른 스타일을 덮어쓰기 위해 사용됩니다.display: block !important;:<table>요소는 원래 블록 레벨 요소이지만, 일부 이메일 클라이언트에서 요소가 의도대로 동작하도록 명시적으로display: block을 지정하면 도움이 됩니다.padding: 10px !important;:.content테이블 내부의 패딩을 추가합니다. HTML에 있던 기존 40px에서 줄여, 작은 화면에서 좁아진 공간을 더 효율적으로 활용합니다.
.header, .body, .footer 클래스
padding: 20px !important;: 헤더, 본문, 푸터 세 영역의 패딩을 모든 방향으로 20px로 통일하여 작은 화면에 맞게 간격을 최적화합니다. HTML에 정의된 값 중 일부는 더 크기 때문에, 이 규칙이 해당 값들을 덮어씁니다.
이메일 디자인에서는 이메일 클라이언트가 적용할 수 있는 기본 스타일이나 충돌 가능한 스타일을 무시하고 의도한 대로 스타일이 적용되도록 !important를 사용하는 것이 꽤 일반적입니다.
5단계: 다양한 이메일 클라이언트에서 테스트하기
Gmail, Outlook, Apple Mail 같은 여러 이메일 클라이언트와 다양한 기기에서 템플릿을 테스트하여 호환성과 반응형 동작을 확인하는 것이 매우 중요합니다. Litmus나 Email on Acid 같은 도구가 이 과정에 큰 도움이 됩니다.
6단계: Google 폰트 추가하기
HTML 이메일 템플릿에 Google 폰트를 적용하면 시각적인 매력이 크게 향상됩니다.
하지만 모든 이메일 클라이언트가 웹 폰트를 지원하는 것은 아니라는 점에 유의해야 합니다. Apple Mail처럼 Google 폰트를 지원하는 클라이언트가 있는 반면, Gmail처럼 지원하지 않는 클라이언트도 있습니다. 모든 수신자에게 좋은 결과물을 전달하려면 반드시 대체(fallback) 폰트를 함께 지정하세요.
Google 폰트를 추가하고, 지원하지 않는 클라이언트를 위한 대체 옵션까지 포함하는 방법은 다음과 같습니다.
1. Google 폰트 선택하기
먼저 Google Fonts 웹사이트에 접속해 폰트를 선택합니다. 이번 예시에서는 "Poppins"를 사용하겠습니다.
2. 이메일 head에 폰트 링크 추가하기
HTML 문서의 <head>에 Google 폰트 링크를 포함합니다. 모든 이메일 클라이언트에서 지원되지 않을 수 있으므로, 스타일에 적절한 대체 폰트를 반드시 함께 지정해야 합니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">3. 스타일에 폰트 적용하기
인라인 CSS를 사용해 HTML 요소에 Google 폰트를 적용하고, 항상 일반적인 대체 폰트를 포함하세요. 이메일 클라이언트마다 <style> 태그 지원 여부가 다르기 때문에, 이메일 템플릿에서는 인라인으로 스타일을 적용하는 것이 더 안전합니다.
이메일 body에 폰트를 적용하고 대체 폰트를 포함하는 방법은 다음과 같습니다.
<body style="font-family: 'Poppins', Arial, sans-serif;">
<table width="100%" cellspacing="0" cellpadding="0">
<!-- Email content -->
</table>
</body>완성된 결과물
아래는 우리가 디자인한 이메일 템플릿의 스크린샷입니다. 로고가 들어갈 자리가 있는 전문적인 헤더, 메시지를 담는 본문 섹션, 연락처 및 구독 관리 링크가 포함된 어두운 푸터로 구성된 깔끔한 레이아웃이 특징입니다.
완성된 이메일 템플릿 스크린샷
추가 팁
- 많은 이메일 클라이언트가
<style>태그를 지원하지 않으므로, CSS는 최대한 인라인으로 작성하세요. - 모든 이메일 클라이언트에서 텍스트가 올바르게 표시되도록 웹 세이프(web-safe) 폰트를 사용하세요.
- HTML을 지원하지 않거나 HTML이 비활성화된 클라이언트를 위해 항상 일반 텍스트(plain text) 버전의 이메일을 함께 제공하세요.
이 가이드가 반응형 이메일 템플릿 제작의 기본 틀을 잡는 데 도움이 되었기를 바랍니다. 이메일 디자인에 익숙해지면 더 복잡한 레이아웃과 스타일도 직접 실험해 보세요.
즐거운 코딩 되세요!