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

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

Emailify 내보내기 패널의 드롭다운 목록에서 Custom Webhook URL 옵션을 선택한 다음, Emailify에서 보내는 JSON 페이로드를 처리하도록 만든 사용자 지정 URL 엔드포인트를 붙여 넣으세요.

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

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

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

URL로 POST 전송되는 JSON 페이로드 객체 ​

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

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

CI 워크플로로 MJML 소스 보내기 ​

엔드포인트에서 검증이나 컴파일을 위해 생성된 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": "<html><head></head><body>Compiled email HTML</body></html>",
  "mjml": "<mjml><mj-body>Generated source MJML</mj-body></mjml>",
  "mjmlVersion": "mjml4"
}

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

페이로드에 사용자 지정 JSON 본문과 헤더 추가하기 ​

원하면 아래 입력란에 직접 만든 유효한 JSON 문자열을 추가할 수 있어요. 이 값은 플러그인이 엔드포인트 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 전송하기 ​

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

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

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

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