---
url: "/ko/emailify/integrations/customer-io.md"
description: "Emailify는 Design Studio 이메일이나 재사용 템플릿용 Customer.io API 직접 업로드와, HTML을 Customer.io에 직접 복사할 수 있는 ZIP 내보내기를 제공해요."
---

# Customer.io에 이메일 업로드

> Emailify는 Design Studio 이메일이나 재사용 템플릿용 Customer.io API 직접 업로드와, HTML을 Customer.io에 직접 복사할 수 있는 ZIP 내보내기를 제공해요.

### 영상 튜토리얼: Customer.io에 이메일 업로드(영어)

이 영상에서는 Figma Emailify 플러그인에서 Customer.io로 HTML 이메일을 직접 업로드하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/KQyaQy6gYps)

Emailify에는 Customer.io 내보내기 옵션이 두 가지 있어요.

- **Customer.io (API)** 옵션은 이메일을 Customer.io Design Studio에 이메일이나 재사용 가능한 이메일 템플릿으로 바로 업로드해요.
- **Customer.io (Zip)** 옵션은 Customer.io에 직접 복사할 수 있는 ZIP 파일을 내보내요.

## Customer.io Design Studio에 바로 업로드하기 {#uploading-directly-to-customer-io-design-studio}

Emailify 내보내기 패널의 드롭다운 목록에서 **Customer.io (API)** 옵션을 선택한 다음, 유효한 Customer.io [App API Key](https://docs.customer.io/integrations/api/app/)를 붙여 넣고 워크스페이스에 맞는 Customer.io 리전을 선택하세요.

> **Note:** Customer.io 워크스페이스가 EU에서 호스팅된다면 Emailify에서 **EU** 리전을 선택하세요. 그렇지 않다면 기본값인 **US** 리전을 그대로 두세요.

**Upload As** 설정에서 Emailify가 Customer.io에 재사용 가능한 이메일 템플릿을 만들지, 일반 Design Studio 이메일을 만들지 선택하세요. 이전 버전과의 호환성을 위해 기본값은 **Template**이에요. 준비가 되면 **Upload To Customer.io** 버튼을 클릭하세요. Figma에서 선택한 이메일을 HTML로 내보내고 Customer.io Design Studio에 자동으로 업로드해요.

> **Note:** Customer.io 워크스페이스에서 Design Studio 이메일을 만들 수 있는 Customer.io App API 키가 필요해요.

Customer.io API로 업로드하면 Emailify는 지원되는 이메일 이미지를 기본적으로 [Customer.io Assets](https://docs.customer.io/integrations/api/app/#tag/assets/createAsset)에 업로드해요. Customer.io Assets의 `emailify` 폴더를 사용하며, 이 폴더가 없으면 자동으로 만들어요. Customer.io의 2 MB 파일 제한을 넘는 이미지처럼 Customer.io Assets가 받을 수 없는 이미지는 대신 Hypermatic에 업로드해서, Design Studio 이메일이나 템플릿이 계속 호스팅된 이미지 URL을 참조할 수 있게 해요.

## Emailify에서 업로드한 Customer.io 이메일과 템플릿 업데이트 {#updating-customer-io-emails-and-templates-uploaded-from-emailify}

Customer.io 이메일이나 템플릿을 매번 새 항목으로 만들지 않고 자동으로 *업데이트*하고 싶다면, 플러그인 내보내기 설정에서 **Enable Updatable Templates** 토글을 켜세요(**Upload As** 설정이 **Email**이면 **Enable Updatable Emails** 토글).

그러면 업로드한 Figma 프레임의 레이어 이름 뒤에 `customerioEmailId` 또는 `customerioTemplateId` 값이 자동으로 추가되고, 다음에 플러그인에서 내보낼 때 같은 프레임을 API로 Customer.io에 다시 업로드하면 그 ID를 다시 사용해요.

> **Tip:** 참고로 **처음 이메일이나 템플릿을 업로드하기 *전에* *Enable Updatable Templates* 또는 *Enable Updatable Emails* 토글도 켜져 있는지 확인**해야 해요. 그래야 원본 Customer.io 이메일 또는 템플릿 ID가 Figma 프레임 이름에 추가돼요. 이후 업데이트 토글이 계속 켜져 있다면, 다시 업로드할 때마다 이 ID로 Customer.io 계정의 같은 항목을 업데이트해요(매번 새 항목을 만들지 않아요).

> **Note:** Customer.io에서 이메일이나 템플릿을 *업데이트하려면* 처음 업로드를 받은 것과 같은 Customer.io 워크스페이스와 리전의 App API 키를 사용해야 해요.

## Customer.io에 ZIP 내보내기 직접 업로드하기 {#manually-uploading-a-zip-export-to-customer-io}

Emailify 내보내기 패널의 드롭다운 목록에서 **Customer.io (Zip)** 옵션을 선택하세요. 준비가 되면 **Export For Customer.io** 버튼을 클릭해 Figma에서 선택한 이메일을 HTML로 내보내세요.

내보내기가 끝나면 .zip 파일을 컴퓨터에 다운로드해 압축을 풀고, 이메일 이름으로 된 폴더 안의 `index.html` 파일을 코드/텍스트 편집기에서 열어 파일의 HTML을 모두 복사하세요. 그런 다음 아래 단계를 따르세요.

- Customer.io 계정에 [로그인](https://fly.customer.io/login)하세요.
- 관리자 내비게이션에서 **Content** 메뉴 항목을 펼치세요.
- **Email Layouts** 메뉴 항목을 클릭하세요.
- **Create Layout** 버튼을 클릭하세요.
- **Start from scratch** 옵션을 클릭하세요.
- 레이아웃 이름을 입력하고 **Create Layout**을 클릭하세요.
- 내보낸 index.html 파일에서 복사한 HTML을 **Edit** 탭 편집기에 붙여 넣으세요.
- **Save changes** 버튼을 클릭하세요.

## Customer.io에서 완전히 빈 레이아웃 만들기 {#creating-a-totally-blank-layout-in-customer-io}

> **Warning:** **완전히 빈 레이아웃을 사용하고 있는지 꼭 확인하세요!** Customer.io는 기본적으로 새로 만든 레이아웃에 자체 HTML 태그(예: head, body 등)를 자동으로 추가해요. 이 코드를 제거하지 않으면 HTML 템플릿을 발송했을 때 깨져 보여요.

Customer.io에서 이메일을 만들기 시작할 때는 [레이아웃](https://customer.io/docs/journeys/3-layouts-and-customerio/)을 선택해야 해요. 직접 만든 HTML 템플릿만 렌더링되도록 이 레이아웃은 완전히 비어 있어야 해요.

![Customer.io 이메일 레이아웃 선택](/assets/images/emailify/customer-io-one.jpg)

아래 스크린샷에서 볼 수 있듯이, 비어 보이는 **Layout**을 선택해도 실제로는 비어 있지 않아요(`` 태그가 자동으로 들어가 HTML 템플릿 콘텐츠를 감싸고 있어요).

![Customer.io 레이아웃의 기본 HTML](/assets/images/emailify/customer-io-two.jpg)

이 문제를 해결하려면 Customer.io가 빈 레이아웃에 추가하는 HTML을 직접 모두 제거하고 `content` 태그(아래)만 남겨 두세요.

![content 태그만 남은 빈 Customer.io 레이아웃](/assets/images/emailify/customer-io-three.jpg)

**Layout**을 저장하고 `content` 태그만 남아 있으면 사용자 지정 HTML 템플릿이 의도한 대로 렌더링돼요.