---
url: "/ko/emailify/export/webhook.md"
description: "Emailify에서 생성한 HTML이나 MJML 소스를 JSON 웹훅 페이로드에 담아 직접 만든 엔드포인트로 보낼 수 있어요."
---

# 사용자 지정 웹훅 URL로 이메일 업로드

> Emailify에서 생성한 HTML이나 MJML 소스를 JSON 웹훅 페이로드에 담아 직접 만든 엔드포인트로 보낼 수 있어요.

[Video](/assets/videos/emailify/export/webook-export.mp4)

Emailify 내보내기 패널의 드롭다운 목록에서 **Custom Webhook URL** 옵션을 선택한 다음, Emailify에서 보내는 [JSON 페이로드](#the-json-payload-object-sent-via-post-to-your-url)를 처리하도록 만든 사용자 지정 URL 엔드포인트를 붙여 넣으세요.

준비가 되면 **POST** 버튼을 클릭하세요. Figma에서 선택한 이메일을 내보내 사용자 지정 웹훅 엔드포인트로 `POST` 요청을 보내요.

> **Tip:** 이미지는 저희 CDN에 자동으로 업로드되고, 페이로드로 전송되는 `html` 문자열 속성 안의 모든 `` 태그에 `src` 속성으로 들어가요.

> **Note:** 코드는 기본적으로 HTML로 내보내져요. 엔드포인트에 다른 형식으로 넘겨야 한다면 웹훅 내보내기 옵션에서 **MJML Source Code**나 플랫폼별 형식을 선택할 수 있어요.

## URL로 POST 전송되는 JSON 페이로드 객체 {#the-json-payload-object-sent-via-post-to-your-url}

Emailify에서 보내는 JSON 페이로드에는 아래의 객체 키/값이 들어 있어요. 사용자 지정 웹훅 URL이 이 페이로드를 처리하도록 만들어져 있는지 확인하세요. 페이로드는 원하는 대로 활용할 수 있어요.

```
{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "Exported email HTML"
}
```

### CI 워크플로로 MJML 소스 보내기 {#send-mjml-source-to-a-ci-workflow}

엔드포인트에서 검증이나 컴파일을 위해 생성된 MJML 소스가 필요하다면 웹훅 형식 선택기에서 **MJML Source Code**를 고르세요. CI 워크플로에서 쓰는 것과 같은 MJML 버전을 선택하세요. Emailify는 컴파일된 `html` 필드는 그대로 두고 `mjml`과 `mjmlVersion` 필드를 추가해요.

```json
{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "Compiled email HTML",
  "mjml": "Generated source MJML",
  "mjmlVersion": "mjml4"
}
```

`mjmlVersion` 값은 Emailify에서 선택한 버전에 따라 `mjml4` 또는 `mjml5`예요. 엔드포인트에서 MJML을 저장하고, CI 검증을 실행하고, 이후 이메일 플랫폼 업로드는 CI가 관리하도록 할 수 있어요. 아래의 사용자 지정 JSON 필드로 앱, 템플릿, 환경, 언어 이름 같은 워크플로 메타데이터를 추가할 수 있어요.

### 페이로드에 사용자 지정 JSON 본문과 헤더 추가하기 {#adding-custom-json-body-and-headers-to-your-payload}

원하면 아래 입력란에 직접 만든 [유효한 JSON 문자열](https://www.w3schools.com/js/js_json_datatypes.asp)을 추가할 수 있어요. 이 값은 플러그인이 엔드포인트 URL로 `POST` 요청을 보낼 때 페이로드의 `header` 객체나 `data` 본문 객체(또는 둘 다)에 자동으로 포함돼요.

- **Custom Request Headers (Optional)** 필드에서 사용자 지정 `header` 객체 속성을 설정할 수 있어요(예: `{ "Authorization": "Bearer xyz" }`).
- **Custom Extra JSON Data (Optional)** 필드에서 사용자 지정 본문 `data` 객체 속성을 설정할 수 있어요(예: `{ "category": "emailify" }`).
- 또는 내보내기 패널 목록의 각 이메일 아래에 있는 **Extra Email-Specific JSON Payload Data (Optional)** 필드에서 “이메일별”로 사용자 지정 본문 `data` 객체 속성을 설정할 수도 있어요(예: `{ "id": 26, "tag": "email", "edit": true }`). 이 값은 위에서 전역으로 설정한 JSON 데이터와 병합돼요.

## 프록시 서버를 통해 JSON 페이로드 POST 전송하기 {#post-your-json-payload-via-a-proxy-server}

Figma 플러그인은 Figma 앱의 샌드박스 처리된 `iFrame` 요소 안에서 실행되기 때문에 `origin`이 없어요. 그래서 JSON 페이로드를 `POST`로 보내는 웹훅 URL이 교차 출처(CORS) 문제로 요청을 거부*할 수도* 있어요.

이 문제를 피하려면 직접 만든 웹훅 함수에서 [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)을 `*`(전체)로 설정하거나, 사용자 지정 웹훅으로 이메일을 내보낼 때 Emailify 플러그인 설정에서 **Use Proxy** 토글(기본으로 켜져 있음)을 켜세요.

**Use Proxy** 토글을 켜면 요청이 웹훅 URL에 도달하기 전에 프록시 서버를 거치도록 자동으로 라우팅돼요. 그래서 들어오는 POST 요청에 `origin`이 생기고 CORS 문제가 해결될 거예요. 단순히 요청을 전달만 하므로, JSON 데이터는 프록시를 그대로 거쳐 직접 만든 웹훅 URL로 곧장 전달돼요.

> **Note:** **Use Proxy** 설정을 켜면 프록시 서버를 거치는 요청은 보낼 때마다 **동적 IP 주소**에서 와요. 따라서 **고정 IP 주소가 필요하다면**(예: 사무실 네트워크의 IP 주소 범위처럼 특정 IP에서 들어오는 요청만 허용하는 경우) 이 설정을 끄고, 웹훅 함수에서 [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)을 `*`로 설정해 프록시 서버를 거치지 않고 Figma 플러그인에서 직접 오는 POST 요청을 받도록 하세요.