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

Figma Emailify 플러그인에서 Klaviyo로 HTML 이메일을 업로드하는 방법을 보여 주는 영상이에요.

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

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

1. Klaviyo에 로그인하고 Klaviyo API 키 설정 페이지로 이동하세요.
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 템플릿 페이지에 자동으로 업로드돼요.

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

Emailify에서 업로드한 Klaviyo 템플릿 업데이트

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

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

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

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

업로드한 Klaviyo 이메일 템플릿을 캠페인에 사용하기

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

Klaviyo에서 사용자 지정 HTML 템플릿 A/B 테스트

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. 두 변형에 알아보기 쉬운 이름을 붙이고, 캠페인을 예약하기 전에 각 버전을 미리 보거나 테스트 발송하고 일반 텍스트 버전도 검토하세요.

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

테스트 설정과 승자 기준 지표 선택에 대한 자세한 내용은 Klaviyo의 A/B 테스트 가이드를 참고하세요.

Klaviyo에서 편집 가능한 텍스트/이미지(선택 사항)

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

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

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

Klaviyo의 자동 패딩 재정의 문제 해결(편집 가능한 캠페인)

Klaviyo가 편집기를 업데이트하고 2023년 6월 6일부터 모든 템플릿에 새 편집기 사용을 강제하면서, 아쉽게도 Emailify에서 Editable Content 토글을 켠 채로 HTML 이메일을 내보내면 Klaviyo가 기본적으로 각 텍스트 요소 주위에 약 18px의 패딩을 자동으로 추가해요. 편집 가능한 템플릿이면 HTML에 새 <td> 요소를 삽입하고, 그 요소의 인라인 style 속성으로 이 패딩을 적용해요.

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

Klaviyo 이메일에 동적 상품 피드 추가

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

Emailify Figma 플러그인으로 사용자 지정 HTML 템플릿에 Klaviyo 사용자 지정 상품 피드를 추가하는 방법을 보여 주는 영상이에요.

Emailify에서 HTML 이메일 템플릿에 동적 Klaviyo 상품 피드를 추가하려면 Emailify 플러그인 카테고리 탭 중 Ecomm 탭에 있는 컴포넌트 프리셋 중 하나를 사용할 수 있어요.

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

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

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

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

Klaviyo Product Feed를 드래그 앤 드롭할 편집 가능 영역 직접 추가

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

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Klaviyo 템플릿 편집기 안에서 HTML 템플릿의 <div dir="auto" lang="en"... 줄 바로 위에 붙여 넣으면 템플릿 맨 위에 추가돼요.

Klaviyo 이메일에 장바구니 이탈 상품 피드 추가

영상 튜토리얼: Figma에서 Klaviyo 장바구니 이탈 플로 이메일 템플릿 만들기

Emailify Figma 플러그인으로 사용자 지정 HTML 템플릿에 Klaviyo 사용자 지정 장바구니 이탈 플로를 추가하는 방법을 보여 주는 영상이에요.

Emailify에서 HTML 이메일 템플릿에 동적 Klaviyo 장바구니 이탈 플로 블록을 추가하려면 Emailify 플러그인 카테고리 탭 중 Ecomm 탭에서 다음 배리언트에 해당하는 컴포넌트 프리셋 중 하나를 사용할 수 있어요.

• Shopify
• WooCommerce
• Magento 1
• Magento 2
• BigCommerce

이렇게 하면 플랫폼별 Klaviyo 상품 이벤트 데이터 변수가 담긴 레이어가 자동으로 만들어져요. 다만 이 기능이 작동하려면 Klaviyo 장바구니 이탈 플로를 설정해야 해요.

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