---
url: "/ko/emailify/integrations/klaviyo.md"
description: "Emailify는 Klaviyo와 기본 연동되어 있어서 Figma 플러그인에서 Klaviyo 템플릿으로 HTML 이메일을 바로 업로드할 수 있어요."
---

# Klaviyo에 이메일 업로드

> Emailify는 Klaviyo와 기본 연동되어 있어서 Figma 플러그인에서 Klaviyo 템플릿으로 HTML 이메일을 바로 업로드할 수 있어요.

### 영상 튜토리얼: Klaviyo에 이메일 업로드

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

> **Tip:** [텍스트 단락](/ko/emailify/content/link-paragraphs)에 Klaviyo 템플릿 링크(예: `{{ event.url }}`)가 필요하다면, Figma 기본 링크 필드는 이를 잘못된 URL로 보고 막아요. 이럴 때는 Emailify의 특수 Klaviyo 링크 형식인 `https://klaviyo.invalid/?{{ event.url }}`를 대신 사용하세요. 그러면 Emailify가 내보낸 HTML에 원래의 Klaviyo 템플릿 구문을 그대로 출력해요.

Emailify 내보내기 패널의 드롭다운 목록에서 **Klaviyo** 옵션을 선택한 다음, 아래 단계에 따라 유효한 Klaviyo 비공개 API 키를 붙여 넣으세요.

1. Klaviyo에 로그인하고 [Klaviyo API 키 설정 페이지](https://www.klaviyo.com/settings/account/api-keys)로 이동하세요.
2. **Create Private API Key** 버튼을 클릭하세요.
3. 이름(예: “Emailify API Key”)을 입력하고 **Custom Key** 라디오 버튼을 클릭하세요.
4. **Templates** API 범위 라디오 버튼을 **Read/Write Access**로 설정하세요(다른 API 범위는 모두 *No Access*로 두어도 돼요).
5. API 키 생성 완료 화면의 **Your Private Key** 섹션 아래에 있는 **Copy** 아이콘 버튼을 클릭하세요.
6. 복사한 API 키(`pk_b3338b071136f98817d2a0e0a9581137ee`와 비슷한 형태)를 Emailify 플러그인에 붙여 넣으세요.

준비가 되면 **Upload To Klaviyo** 버튼을 클릭하세요. Figma에서 선택한 이메일이 HTML로 내보내지고 [Klaviyo 템플릿](https://www.klaviyo.com/email-templates/list) 페이지에 자동으로 업로드돼요.

> **Info:** HTML 이메일 크기가 102kb 미만인데도 Klaviyo에서 발송한 이메일이 Gmail에서 잘린다면, Klaviyo에서 링크 추적이 켜져 있기 때문이에요. 링크 추적은 원래 링크 URL을 훨씬 긴 “추적 URL”로 자동으로 바꿔서 발송되는 HTML의 파일 크기를 늘려요. 이 문제를 막으려면 Klaviyo 계정에서 링크 추적/GA 설정을 끌 수 있어요.

## Emailify에서 업로드한 Klaviyo 템플릿 업데이트 {#updating-klaviyo-templates-uploaded-from-emailify}

업로드할 때마다 새 템플릿을 만드는 대신 Emailify가 같은 Klaviyo 템플릿을 자동으로 업데이트하게 하려면, **Klaviyo** 옵션을 선택한 상태에서 플러그인 내보내기 설정의 **Enable Updatable Templates** 토글을 켜세요(선택 사항).

이렇게 하면 첫 업로드에 성공한 뒤 Figma 프레임 이름에 `klaviyoTemplateId` 값이 자동으로 추가되고, 다음에 같은 프레임을 Klaviyo에 업로드할 때 Emailify가 저장된 템플릿 ID를 재사용해요.

> **Tip:** 템플릿을 처음 업로드하기 전에 **Enable Updatable Templates** 토글이 켜져 있는지 꼭 확인하세요. 이후 다시 업로드할 수 있도록 원래 Klaviyo Template ID를 Figma 프레임 이름에 저장하는 것이 바로 이 첫 업로드예요.

> **Warning:** 이 기능은 Klaviyo 템플릿 라이브러리에 저장된 템플릿만 업데이트해요. 그 템플릿이 이미 Klaviyo 캠페인이나 플로에 사용되었다면 Klaviyo가 해당 메시지용 사본을 만들기 때문에, Emailify에서 다시 업로드해도 사용 중인 사본은 자동으로 바뀌지 않아요.

## 업로드한 Klaviyo 이메일 템플릿을 캠페인에 사용하기 {#using-your-uploaded-klaviyo-email-template-in-a-campaign}

1. Klaviyo에서 새 [이메일 캠페인](https://www.klaviyo.com/campaigns)을 만드세요.
2. **Templates** 페이지 목록의 **Email:saved** 탭에서 새 템플릿 이름을 클릭하세요.
3. 미리보기 팝업 창에서 **Use template** 버튼을 클릭하세요.
4. 코드 편집기 페이지에서 **Save** 버튼을 클릭하세요(**이 단계가 중요해요**).
5. “Your changes have been saved.”가 표시되면 **Back to Content** 버튼을 클릭하세요.
6. 필요에 따라 이메일 캠페인을 예약하세요.

## Klaviyo에서 사용자 지정 HTML 템플릿 A/B 테스트 {#a-b-testing-custom-html-templates-in-klaviyo}

Klaviyo는 사용자 지정 HTML 이메일의 A/B 테스트를 지원하지만, 테스트를 만들면 Variation B가 Variation A와 똑같은 사본으로 자동 생성돼요. 서로 다른 두 Emailify 디자인을 테스트하려면 다음과 같이 하세요.

1. Figma에서 두 Emailify 프레임에 알아보기 쉬운 이름을 붙이세요(예: **Summer Sale - Test A**, **Summer Sale - Test B**). Emailify는 이 프레임 이름을 Klaviyo에 저장되는 템플릿 이름으로 사용해요.
2. 두 프레임을 각각 별도의 저장된 템플릿으로 Klaviyo에 업로드하세요.
3. Test A 템플릿으로 Klaviyo 캠페인을 만든 다음 제목란 위의 **Create A/B test**를 클릭하세요. Klaviyo가 Variation A의 사본으로 Variation B를 만들어요.
4. 다른 브라우저 탭에서 **Content > Templates** 아래의 저장된 Test B 템플릿을 열고, 코드 편집기를 열어 HTML 전체를 복사하세요.
5. 캠페인으로 돌아가 Variation B를 열고 **Edit**를 클릭한 다음, 복사되어 있던 Test A HTML을 Test B HTML로 바꾸고 변경 사항을 저장하세요.
6. 두 변형에 알아보기 쉬운 이름을 붙이고, 캠페인을 예약하기 전에 각 버전을 미리 보거나 테스트 발송하고 일반 텍스트 버전도 검토하세요.

> **Tip:** 이메일 디자인이나 콘텐츠를 테스트한다면 변수가 하나만 바뀌도록 제목과 발신자 정보는 똑같이 유지하세요.

테스트 설정과 승자 기준 지표 선택에 대한 자세한 내용은 Klaviyo의 [A/B 테스트 가이드](https://help.klaviyo.com/hc/en-us/articles/115005228148)를 참고하세요.

## Klaviyo에서 편집 가능한 텍스트/이미지(선택 사항) {#editable-text-images-in-klaviyo-optional}

> **Warning:** **중요: Klaviyo의 새 편집기는 편집 가능한 텍스트 블록과 버튼에 패딩을 자동으로 추가해요**. 아쉽게도 이메일을 Figma의 원래 디자인처럼 보이게 하려면, 아래 **Klaviyo의 자동 패딩 재정의 문제 해결(편집 가능한 캠페인)** 섹션의 영상을 따라 각 값을 직접 “0”으로 되돌려야 해요.

Klaviyo에 템플릿을 업로드한 뒤에도 콘텐츠 블록을 편집할 수 있게 하려면 Emailify 내보내기 옵션에서 **Editable Content** 토글을 켠 다음 Klaviyo에서 아래 단계를 따르세요.

1. Klaviyo에서 새 [이메일 캠페인](https://www.klaviyo.com/campaigns)을 만드세요.
2. 캠페인 **Content** 단계에서 **Drag and Drop** 옵션을 클릭하세요.
3. **My Templates** 탭을 클릭한 다음 새 템플릿을 클릭하세요.
4. **Save** 버튼을 클릭한 다음 **Back to Content**를 클릭하세요.
5. **Edit Email** 버튼을 클릭하세요.

### Klaviyo의 자동 패딩 재정의 문제 해결(편집 가능한 캠페인) {#fixing-klaviyo-s-automatic-padding-overrides-in-editable-campaigns}

[Video](/assets/videos/emailify/export/klaviyo-padding-overrides.mp4)

Klaviyo가 [편집기를 업데이트](https://help.klaviyo.com/hc/en-us/articles/13160284274459)하고 2023년 6월 6일부터 모든 템플릿에 새 편집기 사용을 강제하면서, 아쉽게도 Emailify에서 **Editable Content** 토글을 켠 채로 HTML 이메일을 내보내면 Klaviyo가 기본적으로 각 텍스트 요소 주위에 약 18px의 패딩을 자동으로 추가해요. 편집 가능한 템플릿이면 HTML에 새 `` 요소를 삽입하고, 그 요소의 인라인 `style` 속성으로 이 패딩을 적용해요.

Emailify에서 **Force the padding added by Klaviyo's new editor to be 0px** 토글을 켜면 모든 모바일 클라이언트와 Gmail 같은 Outlook 외 데스크톱 클라이언트에서 이 패딩을 없애는 CSS가 자동으로 추가돼요. 하지만 Klaviyo 편집기에서 캠페인용 이메일을 편집할 때 템플릿의 편집 가능한 텍스트 블록마다 “Padding” 값을 직접 “0”으로 바꾸지 않으면 *Outlook*에서는 **여전히 패딩이 표시돼요**.

## Klaviyo 이메일에 동적 상품 피드 추가 {#adding-a-dynamic-product-feed-to-your-klaviyo-emails}

### 영상 튜토리얼: Klaviyo 이메일에 동적 상품 피드 추가

Emailify Figma 플러그인으로 사용자 지정 HTML 템플릿에 Klaviyo 사용자 지정 상품 피드를 추가하는 방법을 보여 주는 영상이에요.
[Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo)

Emailify에서 HTML 이메일 템플릿에 동적 Klaviyo [상품 피드](https://help.klaviyo.com/hc/en-us/articles/115005082787)를 추가하려면 Emailify 플러그인 카테고리 탭 중 **Ecomm** 탭에 있는 컴포넌트 프리셋 중 하나를 사용할 수 있어요.

Emailify 프레임에 컴포넌트를 추가한 뒤에는, 추가된 컴포넌트의 `YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE` 이름을 Klaviyo 계정에서 상품 피드로 만든 본인의 Klaviyo Product Feed 이름으로 바꿔야 해요.

Klaviyo에서 사용자 지정 HTML 상품 피드를 사용하려면 Emailify 내보내기 옵션에서 **Editable Content** 토글도 켜져 있는지 확인해야 해요. 그래야 Klaviyo Templates에 업로드한 뒤 Klaviyo 편집기의 “Blocks” 사이드바에서 기본 “Product” 블록을 이메일로 드래그 앤 드롭할 수 있어요.

위의 영상 튜토리얼을 보며 단계별로 따라 하면서 Klaviyo 템플릿이 올바르게 설정되었는지 확인하는 것이 좋아요. 단계를 제대로 따르지 않으면 상품 피드의 데이터가 표시되지 않을 수 있어요.

> **Note:** **도움이 필요하다면** 팀의 개발자나 [Klaviyo 지원 담당자](https://www.klaviyo.com/support)에게 문의해 주세요. 저희(Emailify)는 Klaviyo의 이 고급 템플릿 기능에 대한 기술 지원이나 사용자 지정 구현을 도와드릴 수 없어요.

### Klaviyo Product Feed를 드래그 앤 드롭할 편집 가능 영역 직접 추가 {#manually-adding-editable-region-to-drag-drop-the-klaviyo-product-feed}

2025년부터는 동적 상품 피드에 데이터가 불러와지도록, 캠페인에 템플릿을 사용하기 *전에* Klaviyo의 자체 HTML 템플릿 코드 편집기에서 이 편집 가능 영역을 HTML 템플릿에 직접 추가하고 템플릿을 다시 저장해야 하는 것으로 보여요.

```

        Drag and Drop your Klaviyo Product Feed Block Here

        NOTE: Remove this text element in Klaviyo's editor when you're done!

        Video Tutorial: https://www.youtube.com/watch?v=PaRSIxVLYlo

```

Klaviyo 템플릿 편집기 안에서 HTML 템플릿의 ` **Note:** **도움이 필요하다면** 팀의 개발자나 [Klaviyo 지원 담당자](https://www.klaviyo.com/support)에게 문의해 주세요. 저희(Emailify)는 Klaviyo의 이 고급 템플릿 기능에 대한 기술 지원이나 사용자 지정 구현을 도와드릴 수 없어요.