> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spread.so/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML 소스로 편집하기

> 캠페인 본문을 HTML 소스로 직접 작성하고 편집하는 방법을 안내합니다.

## Overview

Spread 캠페인은 기본적으로 [노션처럼 작성하는 에디터](/send-email#이메일-본문-작성하기)로 본문을 만듭니다. 여기에 더해, 캠페인 본문을 **HTML 소스로 직접 작성**할 수도 있습니다.

HTML 편집은 다음과 같은 경우에 유용합니다.

* **외부 툴에서 만든 뉴스레터 HTML을 그대로 사용**하고 싶을 때 (예: Mailchimp, Stibee 등에서 내보낸 HTML)
* `table` 레이아웃과 인라인 CSS로 **디자인을 세밀하게 제어**하고 싶을 때
* 기본 에디터로는 표현하기 어려운 복잡한 레이아웃이 필요할 때

HTML 편집 모드에서는 **여기에 작성한 HTML이 그대로 발송됩니다.**

***

## HTML 편집으로 전환하기

리치 텍스트로 작성 중인 캠페인의 `작성` 탭에서 **`HTML 에디터 사용`** 버튼을 클릭하면 HTML 편집 모드로 전환됩니다.

<div style={{ display: "flex", justifyContent: "center", marginTop: "6px" }}>
  <img src="https://mintcdn.com/relate-2lkj43/icmQ04KP7kZd5aMf/images/email/html-editor-button.png?fit=max&auto=format&n=icmQ04KP7kZd5aMf&q=85&s=463baa31cc2fe0ab33114d7131b1e0d5" alt="캠페인 작성 화면 상단의 HTML 에디터 사용 버튼" style={{ width: "60%", maxWidth: "560px", height: "auto", border: "1px solid #E6E8EB", borderRadius: "8px" }} width="594" height="116" data-path="images/email/html-editor-button.png" />
</div>

<Warning>
  **HTML 편집으로 전환하면 되돌릴 수 없습니다.** 전환한 캠페인은 다시 리치 텍스트 에디터로 열 수 없습니다. 기존 본문을 유지해야 한다면, 새 캠페인을 만들어 전환하는 것을 권장합니다.
</Warning>

전환 시 본문이 비어 있으면, 바로 편집을 시작할 수 있도록 기본 `table` 기반 템플릿이 자동으로 채워집니다.

***

## HTML 작성하기

HTML 편집 모드에서는 본문 영역이 두 개의 탭으로 나뉩니다.

* **`HTML`**: HTML 소스를 직접 작성하는 코드 에디터입니다. 여기에 입력한 내용이 그대로 발송됩니다.
* **`이메일 미리보기`**: 작성한 HTML이 실제로 어떻게 보이는지 확인합니다. 미리보기에는 **푸터·브랜딩·구독 해지 링크까지 포함**되어, 실제 발송되는 모습과 동일하게 표시됩니다.

<div style={{ display: "flex", justifyContent: "center", marginTop: "6px" }}>
  <img src="https://mintcdn.com/relate-2lkj43/icmQ04KP7kZd5aMf/images/email/html-source-editor.png?fit=max&auto=format&n=icmQ04KP7kZd5aMf&q=85&s=d1e317fac9d5827cfe28bb98ec4ad24a" alt="HTML 소스 에디터와 이메일 미리보기 탭 전환 화면" style={{ width: "90%", maxWidth: "760px", height: "auto", boxShadow: "0 12px 30px rgba(0, 0, 0, 0.18)", borderRadius: "8px" }} width="1364" height="1172" data-path="images/email/html-source-editor.png" />
</div>

<Tip>
  **Gmail·Outlook 호환을 위해 `table` 레이아웃과 인라인 CSS를 사용하세요.** 이메일 클라이언트는 `<div>` + 외부 스타일시트를 일관되게 지원하지 않기 때문에, 뉴스레터 HTML은 대부분 표(`table`) 구조와 각 요소에 직접 넣은 인라인 CSS로 작성됩니다. Mailchimp·Stibee 등에서 내보낸 HTML을 그대로 붙여넣어도 됩니다.
</Tip>

<Tip>
  **HTML을 직접 작성하기보다 ChatGPT·Claude 같은 AI 도구를 활용하는 것을 권장합니다.** 이메일용 HTML은 `table` 레이아웃과 인라인 CSS 등 지켜야 할 규칙이 많아 직접 작성하기 번거롭습니다. AI 도구에 *"Gmail·Outlook에서 잘 보이도록 table 레이아웃과 인라인 CSS로 이메일 HTML을 만들어줘"* 처럼 요청한 뒤, 결과 HTML을 `HTML` 탭에 붙여넣으세요. 나아가 [MCP를 연결](#mcp로-html-캠페인-다루기)하면 붙여넣는 과정 없이 AI 도구에서 곧바로 편집할 수도 있습니다. 색상·문구·구성만 다시 요청해 다듬으면 직접 코딩하는 것보다 훨씬 빠르고 안전합니다.
</Tip>

***

## 반드시 확인할 것

### 구독 해지 링크

구독 해지 링크를 넣을 위치에 **`[[Unsubscribe]]`** 를 적으세요. 적지 않으면 이메일 하단에 자동으로 추가됩니다.

<Note>
  `[[여기에 텍스트]]` 형식으로 대괄호를 두 번 감싸면 어떤 텍스트든 구독 해지 링크로 인식됩니다. (예: `[[수신거부 | Unsubscribe]]`) 자세한 내용은 [이메일 Footer 설정](/send-email#이메일-footer-설정)을 참고하세요.
</Note>

### 회사 정보

기본 템플릿에는 회사명·주소 자리에 안내 문구가 들어 있습니다. 이 부분을 **실제 회사 정보로 교체하지 않으면 발송이 차단**됩니다. 발송 전 반드시 실제 정보로 바꿔주세요.

### 메일 머지 변수

HTML 안에서도 `{{sender_name}}` 같은 [메일 머지 변수](/send-email)를 그대로 사용할 수 있습니다. 발송 시 각 리드의 실제 정보로 자동 치환됩니다.

***

## 허용되는 HTML과 제한 사항

안전한 발송과 미리보기를 위해, 저장 시 HTML이 자동으로 정리(sanitize)됩니다.

**허용**

* `table`, `div`, `center`, 이미지, 링크 등 이메일 작성에 필요한 요소
* 인라인 `style` 및 `align`·`bgcolor`·`width`·`height` 같은 표현용 속성
* **Outlook 대응 코드** — MSO 전용 CSS 속성과 조건부 주석(`<!--[if mso]> … <![endif]-->`)은 유지됩니다

**자동 제거**

* `<script>`, `<iframe>`, `<form>`, `<object>`, `<embed>` 및 `onclick` 같은 이벤트 핸들러

<Note>
  제한이 있는 이유는, 저장된 본문이 이메일뿐 아니라 **작성 중 미리보기와 공개 캠페인 페이지에서도 렌더링**되기 때문입니다. 위 요소들은 저장 시 조용히 제거되므로, 붙여넣은 뒤 `이메일 미리보기` 탭에서 의도한 대로 보이는지 꼭 확인하세요.
</Note>

***

## 발송하기

HTML 캠페인의 **테스트 발송, 발송·예약, 통계 확인**은 일반 캠페인과 동일합니다. [이메일 작성하고 발송하기](/send-email#캠페인-발송하는-법)와 [이메일 통계 분석하기](/metrics)를 참고하세요.

<Note>
  이미 발송이 완료된 캠페인은 HTML 소스를 더 이상 수정할 수 없으며, `이메일 미리보기`로 발송된 내용만 확인할 수 있습니다.
</Note>

***

## MCP로 HTML 캠페인 다루기

**MCP(Model Context Protocol)를 통해 HTML 캠페인을 작성·편집할 수 있습니다.** ChatGPT·Claude 같은 AI 도구에서 MCP로 곧바로 HTML 이메일을 만들거나 수정할 수 있습니다.

<Info>
  MCP로 만든 HTML 캠페인도 이 페이지에서 설명한 **HTML 소스 에디터로 이어서 편집**할 수 있습니다. MCP로 초안을 생성한 뒤 앱에서 세부 내용을 다듬는 방식으로 함께 사용할 수 있습니다.
</Info>