Email Template Builder: HTML 이메일 작성

Email Template Builder란?

Email Template Builder는 브라우저에서 직접 반응형 HTML 이메일 템플릿을 만들 수 있는 시각적 블록 기반 에디터입니다. 헤더, 텍스트 단락, 버튼, 이미지, 구분선, 2단 레이아웃, 푸터 등의 콘텐츠 블록을 추가하고 위/아래 컨트롤로 순서를 정하며 각 블록을 속성 패널로 편집합니다. 작성하는 동안 라이브 iframe 미리보기가 실시간으로 업데이트됩니다. 완성되면 인라인 CSS가 포함된 테이블 기반 HTML 이메일이 생성되어 Gmail, Outlook, Apple Mail과 호환됩니다. 디자인 소프트웨어, 코딩, 계정 모두 필요하지 않습니다.

주요 기능

• 시각적 블록 기반 이메일 에디터 — 콘텐츠 블록을 추가하고 재배열하여 이메일을 구성합니다. 7가지 블록 유형: 헤더, 텍스트, 버튼, 이미지, 구분선, 2단, 푸터.
• 헤더, 텍스트, 버튼, 이미지, 구분선, 푸터 블록 — 각 블록에는 고유한 속성 패널이 있습니다. 헤더 블록에는 배경색과 텍스트 색상 선택기가 있습니다. 텍스트 블록에서는 글꼴 크기(12px~24px)와 정렬(왼쪽, 가운데, 오른쪽)을 선택할 수 있습니다. 버튼 블록은 레이블, URL, 색상 쌍을 받습니다. 이미지 블록은 URL, 대체 텍스트, 너비를 설정합니다.
• 모바일/데스크톱 전환이 있는 라이브 미리보기 — 에디터 패널에 실시간 iframe 미리보기가 포함되어 있습니다. 에디터 탭을 벗어나지 않고 데스크톱(전체 너비)과 모바일(375px) 사이를 전환할 수 있습니다.
• 색상, 글꼴, 간격 사용자 정의 — 전역 이메일 설정으로 본문 배경(#f4f4f4 기본값), 콘텐츠 배경(#ffffff), 기본 색상, 최대 너비(480px, 600px, 640px), 글꼴 패밀리(Arial, Georgia, Helvetica, Verdana)를 제어합니다.
• 깔끔한 반응형 HTML 내보내기 — HTML 탭에 완전히 생성된 소스 코드가 표시됩니다: 인라인 CSS가 포함된 표준 준수 테이블 기반 레이아웃, 프리헤더 텍스트, Outlook용 MSO VML 버튼 폴백, 600px 미만의 화면에서 전체 너비로 축소되는 반응형 미디어 쿼리.
• HTML 클립보드 복사 — "HTML 복사" 버튼으로 생성된 HTML 문자열 전체를 한 번의 클릭으로 복사하며, "복사됨!" 확인 상태가 표시됩니다.
• 미리 제작된 템플릿 스타터 — 3개의 스타터 템플릿이 즉시 로드됩니다: 환영, 뉴스레터, 프로모션. 각각 용도에 맞게 사전 구성된 블록이 포함되어 있습니다. 환영과 뉴스레터는 현재 기본 색상을 사용하고, 프로모션은 자체 빨간 강조색을 사용합니다.
• 100% 클라이언트 사이드 — 이메일 콘텐츠가 서버로 전송되지 않습니다. 페이지 로드 후 완전히 오프라인으로 작동합니다.

Email Template Builder 사용 방법

1단계: 전역 설정 구성

곧 출시 예정: Email Template Builder를 열고 왼쪽 패널에서 "이메일 설정" 카드를 찾습니다. 다음을 입력합니다:

• 제목 줄 — 내보낸 HTML의 <title> 태그가 됩니다(일부 이메일 클라이언트에 표시되며 접근성에 사용됩니다).
• 프리헤더 텍스트 — 받은 편지함 미리보기에서 제목 뒤에 나타나는 숨겨진 미리보기 줄입니다. 기본값은 "받은 편지함에 표시되는 미리보기 텍스트..."입니다. 간결하고 설득력 있는 한 줄 요약으로 설정하세요.
• 본문 배경 / 콘텐츠 배경 — 색상 선택기로 16진수 값을 입력하거나 기본 색상 선택기를 사용할 수 있습니다. 기본 연한 회색 본문(#f4f4f4)과 흰색 콘텐츠(#ffffff)는 대부분의 주요 브랜드가 사용하는 시각적 패턴과 일치합니다.
• 기본 색상 — 새로운 헤더 및 버튼 블록의 기본 배경으로 자동 사용됩니다.
• 최대 너비 — 480px(컴팩트), 600px(표준, 기본값), 640px(넓음) 중 선택합니다.
• 글꼴 패밀리 — Arial(기본값), Georgia, Helvetica, Verdana.

2단계: 템플릿 로드 또는 블록 추가

옵션 A: 템플릿 스타터 로드. "템플릿 스타터" 카드에서 "환영", "뉴스레터", "프로모션"을 클릭합니다. 에디터가 해당 사용 사례에 맞게 사전 구성된 블록 세트 전체를 로드합니다. 환영 템플릿에는 헤더, 인사 텍스트 블록, "시작하기" CTA 버튼, 구분선, 푸터가 포함됩니다. 프로모션 템플릿은 고정된 빨간색(#e53e3e) 헤더와 버튼 색상을 사용하며 이미지 플레이스홀더가 포함됩니다. 환영과 뉴스레터 스타터는 현재 기본 색상 설정을 사용하고, 프로모션 템플릿은 자체 빨간 색상 구성을 사용합니다.

옵션 B: 처음부터 구성. "블록 추가" 카드에서 아무 블록 유형을 클릭합니다. 사용 가능한 블록: 헤더, 텍스트, 버튼, 이미지, 구분선, 2단, 푸터. 새 블록은 블록 목록 끝에 나타나며 자동으로 편집 패널이 열립니다.

3단계: 각 블록 편집

"블록" 목록에서 블록을 클릭하여 편집기를 엽니다. 변경 사항은 라이브 미리보기에 즉시 반영됩니다.

• 헤더 블록: 제목과 부제목 텍스트 필드, 배경색과 텍스트 색상 선택기.
• 텍스트 블록: 콘텐츠용 텍스트 영역(줄바꿈으로 별도의 <p> 태그가 생성됨), 글꼴 크기 드롭다운(12px~24px), 왼쪽/가운데/오른쪽 정렬.
• 버튼 블록: 레이블 텍스트, 대상 URL, 버튼 배경색, 버튼 텍스트 색상. 생성된 HTML에는 Outlook에서 단순한 링크 대신 실제 버튼이 렌더링되도록 MSO VML 마크업이 포함됩니다.
• 이미지 블록: 이미지 URL(또는 로컬 파일 업로드), 대체 텍스트, 너비(예: 100% 또는 400px). 업로드된 이미지는 Base64 데이터 URI로 삽입됩니다.
• 구분선 블록: 색상 선택기와 두께 입력(1~10px).
• 컬럼 블록: 왼쪽과 오른쪽 컬럼 콘텐츠용 별도의 텍스트 영역 2개.
• 푸터 블록: 푸터 텍스트용 텍스트 영역(줄바꿈으로 별도의 단락이 됨), 링크 레이블과 링크 URL 필드 쌍(예: 구독 취소 링크 추가), 배경색과 텍스트 색상 선택기.

블록을 재정렬하려면 위/아래 화살표 버튼을 사용합니다. 블록을 삭제하려면 휴지통 아이콘을 사용합니다.

4단계: 미리보기 및 내보내기

미리보기 탭으로 전환하여 이메일의 전체 페이지 보기를 확인합니다. 데스크톱/모바일 전환을 사용하여 375px에서 반응형 레이아웃을 확인합니다.

HTML 코드 탭으로 전환하여 생성된 소스 코드를 봅니다. 텍스트 영역을 클릭하여 전체 텍스트를 선택하거나 "HTML 복사"를 클릭하여 클립보드에 복사합니다. 코드는 Mailchimp, SendGrid, HubSpot 등 모든 ESP(이메일 서비스 제공업체)에 바로 붙여넣을 수 있습니다.

실용적인 예시

예시 1: 제품 출시 발표

"프로모션" 템플릿 스타터로 시작합니다. 헤더 텍스트를 제품 이름과 출시 슬로건으로 교체합니다. 색상 선택기로 #e53e3e 헤더 배경을 브랜드 색상으로 업데이트합니다. 플레이스홀더 이미지 URL을 제품 스크린샷으로 교체합니다. 텍스트 블록을 편집하여 주요 혜택을 한두 문장으로 설명합니다. 버튼 레이블("지금 사전 주문")과 URL을 업데이트합니다. 프리헤더 텍스트를 "[제품] 소개 — 오늘부터 이용 가능합니다."로 설정합니다. HTML을 내보내고 ESP에 붙여넣습니다.

예시 2: 주간 뉴스레터

"뉴스레터" 템플릿을 로드합니다. 제목을 "주간 다이제스트 — 2026년 3월 3일 주"로 설정합니다. 주요 기사 텍스트 블록을 리드 기사로 편집합니다. 아래에 두 번째 "2단" 블록을 추가하여 두 개의 짧은 기사를 나란히 배치합니다. 웹사이트로 연결되는 "전체 아카이브 읽기" 버튼 블록을 추가합니다. CAN-SPAM에서 요구하는 구독 취소 링크와 실제 우편 주소를 포함하도록 푸터 텍스트를 조정합니다.

예시 3: 환영 이메일 시퀀스

"환영" 템플릿을 사용합니다. 헤더 부제목을 "계정이 준비되었습니다."로 변경합니다. 본문 텍스트를 세 개의 짧은 단락으로 편집합니다: 사용자가 할 수 있는 것, 도움말 위치, 지원 연락 방법. "시작하기" 버튼 URL을 실제 온보딩 URL로 교체합니다. 미리보기 탭으로 전환하고 모바일 뷰로 전환하여 375px에서 모든 텍스트가 읽기 쉬운지 확인합니다. 내보내기 후 ESP 자동화 워크플로에 업로드합니다.

팁과 모범 사례

템플릿을 로드하기 전에 기본 색상을 설정하세요. 템플릿 스타터는 현재 기본 색상을 새 헤더 및 버튼 블록에 적용합니다. 템플릿 로드 후 기본 색상을 변경해도 기존 블록은 소급하여 업데이트되지 않습니다 — 각 블록의 색상 선택기는 독립적으로 편집 가능합니다.

프리헤더 필드를 활용하세요. 많은 빌더가 이를 무시하지만 프리헤더 텍스트는 열람률에 직접 영향을 미칩니다. 생성된 HTML은 display:none; ... max-height:0px; overflow:hidden으로 이를 숨깁니다 — 이메일에서는 시각적으로 나타나지 않지만 받은 편지함 미리보기에서는 표시됩니다.

14px 미만의 글꼴 크기는 모바일에서 잘 보이지 않습니다. 텍스트 블록의 글꼴 크기 드롭다운은 12px까지 내려갑니다. 실제로는 본문 텍스트에 14px 이상을 사용하세요. 12px는 법적 면책 조항이나 푸터의 소문자에만 사용하세요.

600px 최대 너비를 테스트하세요. 표준 600px 최대 너비는 모든 주요 클라이언트에서 잘 작동합니다. 480px 옵션은 좁은 레이아웃 디자인에 적합합니다. 640px는 자체 너비 제약을 적용하지 않는 클라이언트에만 적합합니다.

Outlook VML 버튼에는 추가 단계가 필요하지 않습니다. 생성된 HTML에는 이미 각 버튼 주위에 MSO VML 조건부 주석 블록이 포함되어 있습니다. ESP에 붙여넣는 경우 ESP가 HTML 주석을 제거하지 않는지 확인하세요. VML 마크업은 주석에 의존합니다.

일반적인 문제 및 문제 해결

라이브 미리보기에 빈 흰색 영역이 표시됩니다. 블록을 추가하기 전에 발생합니다. 블록을 하나 이상 추가하거나 템플릿 스타터를 로드하면 iframe이 즉시 채워집니다.

이미지 블록에 깨진 이미지가 표시됩니다. 툴이 이미지 URL을 직접 <img> 태그로 표시합니다. URL이 공개적으로 접근 가능하고(인증 뒤에 있지 않고) HTTPS를 사용하는지 확인하세요. 입력한 대체 텍스트는 접근성을 위해 내보낸 HTML에 포함됩니다.

복사한 HTML이 Outlook에서 깨진 레이아웃을 표시합니다. 글꼴 패밀리 설정이 웹 안전 스택(예: Arial, Helvetica, sans-serif)을 사용하는지 확인하세요. 웹 폰트(Google Fonts, 사용자 정의 폰트)는 Outlook에서 렌더링되지 않습니다. 툴의 4가지 글꼴 옵션은 모두 웹 안전 스택입니다.

2단 블록이 모바일에서 1단으로 축소됩니다. 이는 MSO 조건부 주석과 인라인 블록 레이아웃의 예상되는 동작입니다. 600px 미만의 화면에서 미디어 쿼리가 .email-container를 width: 100%로 설정하고 48% 너비의 인라인 블록 컬럼이 자연스럽게 줄바꿈됩니다. 모바일에서 나란히 배치된 컬럼을 강제하는 옵션은 없습니다.

템플릿 스타터가 내 브랜드 색상을 사용하지 않습니다. 템플릿 스타터 버튼을 클릭하기 전에 이메일 설정 카드에서 기본 색상 설정을 확인하세요. 템플릿은 로드 시점에 기본 색상을 읽습니다 — 로드 후 변경하려면 각 블록의 색상 선택기를 수동으로 업데이트해야 합니다.

개인정보 보호 및 보안

Email Template Builder는 이메일 HTML을 완전히 브라우저 내에서 구성하고 미리봅니다. 템플릿 콘텐츠, 제목 줄, 이미지 URL이 서버로 전송되지 않습니다. 라이브 미리보기는 sandbox="allow-same-origin"이 있는 iframe을 사용합니다 — 미리보기 내에서 스크립트가 실행되지 않습니다. 페이지가 로드되면 완전히 오프라인으로 작동하여 기밀 마케팅 콘텐츠나 고객 자료에도 안전하게 사용할 수 있습니다.

자주 묻는 질문

Email Template Builder는 무료인가요? 예. 완전한 블록 에디터, 7가지 모든 블록 유형, 3개의 템플릿 스타터, 라이브 미리보기, HTML 내보내기는 모두 계정 없이 완전히 무료입니다. 곧 출시 예정: /web/social/email-template-builder에서 툴에 접근하세요.

Email Template Builder가 오프라인으로 작동하나요? 예, 페이지가 로드되면 작동합니다. 모든 HTML 생성은 기기의 JavaScript에서 이루어집니다. 라이브 미리보기는 이미지 URL을 소스에서 로드합니다(연결이 필요), 하지만 에디터, 블록 관리, HTML 내보내기는 모두 오프라인으로 작동합니다.

Email Template Builder에서 내 데이터는 안전한가요? 이메일 콘텐츠, 제목 줄, 디자인 선택이 브라우저를 떠나지 않습니다. 툴은 HTML을 로컬에서 생성하며 데이터를 사용한 서버 요청을 하지 않습니다. 기밀 고객 이메일이나 독점 캠페인 콘텐츠를 작성해도 안전합니다.

생성된 HTML은 어떤 이메일 클라이언트를 지원하나요? 툴은 인라인 CSS가 포함된 테이블 기반 HTML을 생성합니다. 이는 이메일 클라이언트 호환성이 가장 넓은 레이아웃 방법입니다. Outlook 버튼 렌더링을 위한 MSO VML 조건부와 모바일 클라이언트를 위한 반응형 미디어 쿼리가 포함됩니다. Gmail, Outlook(2016~2024), Apple Mail, Yahoo Mail을 위해 설계되었습니다.

7가지 이상의 블록 유형을 추가할 수 있나요? 현재 에디터는 헤더, 텍스트, 버튼, 이미지, 구분선, 컬럼, 푸터의 7가지 블록 유형을 지원합니다. 같은 블록 유형을 여러 번 추가하여 복잡한 레이아웃을 구성할 수 있습니다 — 예를 들어 텍스트와 이미지 블록을 교대로 배치하거나 여러 버튼 블록을 사용할 수 있습니다.

구독 취소 링크는 어떻게 추가하나요? 푸터 블록을 추가합니다. 푸터 에디터에는 전용 링크 레이블 필드와 링크 URL 필드가 있습니다. 링크 텍스트(예: "구독 취소")와 대상 URL을 입력합니다. 생성된 HTML은 이를 푸터 텍스트 아래에 클릭 가능한 <a> 태그로 렌더링합니다. 내보낸 후 ESP의 구독 취소 병합 태그로 URL을 교체할 수도 있습니다.

프리헤더 텍스트 필드란 무엇인가요? 프리헤더 텍스트는 짧은 문자열(일반적으로 40~130자)로, 이메일 클라이언트가 받은 편지함 목록에서 제목 줄 뒤에 표시합니다. CSS를 사용하여 렌더링된 이메일에서는 숨겨집니다. 툴은 display:none과 max-height:0px을 가진 <div> 안의 생성된 HTML에 이를 포함합니다.

만든 템플릿을 저장할 수 있나요? 예. Glyph Widgets 서포터는 PresetsPanel을 사용하여 모든 블록, 설정, 콘텐츠를 포함한 완전한 에디터 상태를 브라우저 로컬 IndexedDB에 저장된 명명된 사전 설정으로 저장하고 다시 로드할 수 있습니다.

어떤 최대 너비를 사용해야 하나요? 600px은 업계 표준이며 모든 주요 클라이언트에서 올바르게 작동합니다. 더 좁고 집중된 레이아웃을 원하면 480px을 사용하세요. 640px은 대상 ESP와 클라이언트가 올바르게 처리할 수 있음을 확인한 경우에만 사용하세요 — 일부 오래된 Outlook 버전은 자체 너비 제약을 적용합니다.

툴이 사용자 정의 폰트를 지원하나요? 아니요. 글꼴 드롭다운의 4가지 글꼴 패밀리는 모두 웹 안전 스택입니다: Arial, Georgia, Helvetica, Verdana. 대부분의 이메일 클라이언트(특히 Outlook)가 외부 폰트 파일을 로드하지 않기 때문에 웹 폰트는 지원되지 않습니다.

관련 도구

• 곧 출시 예정: Email Extractor — 모든 텍스트에서 이메일 주소를 추출하고 유효성을 검사한 후 여기서 만든 템플릿과 함께 사용하세요.
• 곧 출시 예정: Social Meta Tags — Open Graph 및 Twitter Card 태그를 생성하여 캠페인 랜딩 페이지가 소셜 공유 시 어떻게 보이는지 최적화하세요.
• 곧 출시 예정: Hashtag Generator — 이메일 가입 양식으로 트래픽을 유도하는 소셜 미디어 게시물을 위한 관련 해시태그를 생성하세요.

지금 Email Template Builder 사용하기: 곧 출시 예정: Glyph Widgets Email Template Builder