하이브리드 이메일 템플릿을 만드는 방법

예상 3분 읽기

업데이트 2025년 7월 7일 AM 12:00 EST

학습 내용

Klaviyo의 드래그 앤 드롭 편집기(즉, 하이브리드 템플릿)와 호환되는 맞춤 HTML 템플릿을 만드는 방법을 알아보세요. 다음 단계를 따르면 드래그 앤 드롭 편집기에서만 사용할 수 있는 기능(예: 제품 블록 또는 범용 콘텐츠 블록)을 계속 이용하면서 완전히 맞춤화된 HTML 이메일을 디자인할 수 있어요.

기술에 익숙한 마케터이거나 개발자의 도움을 받을 수 있는 경우에만 맞춤 HTML 사용을 권장해요. 제품에서 맞춤 HTML을 지원하긴 하지만, 지원 팀은 이 문서에 포함된 일반적인 안내를 제공하는 것 외에는 맞춤 템플릿을 구축하는 데 도움을 드릴 수 없어요. 도움이 필요하신가요? Klaviyo 파트너에게 문의하세요.

데이터 보안을 유지하기 위해 Klaviyo 지원 팀은 회원님의 HTML 파일을 열 수 없습니다.

HTML 템플릿에 코드 조각을 추가하세요.

이메일 템플릿당 아래에 설명된 코드 조각 중 하나만 추가해 주세요. 코드 조각 1개로 여러 드래그 앤 드롭 블록을 추가할 수 있으므로, 여러 코드 조각을 추가할 필요가 없어요.

예를 들어 드래그 앤 드롭 편집기를 사용해 이미지와 표 블록을 추가하려면, 아래의 사용자 지정 가능한 이미지 블록 추가 단계를 따라 해 보세요. 템플릿을 Klaviyo에 업로드한 다음 캠페인이나 플로우에서 사용하면, 이미지 블록 위나 아래에 블록을 추가할 수 있어요.

편집 가능한 텍스트 블록 추가

선호하는 HTML 편집기를 사용해 맞춤형 HTML 템플릿을 만드세요.
다음 코드 조각을 HTML 템플릿에 추가해 주세요. 템플릿에서 텍스트 블록을 추가하고 싶은 위치에 배치해 주세요.

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

Klaviyo에서 콘텐츠 > 템플릿으로 이동합니다.
이메일 템플릿 탭을 선택합니다.
가져오기를 클릭합니다.
템플릿 이름을 입력하고 HTML 파일을 업로드한 다음 가져오세요.
템플릿 탭에서 템플릿을 열면 Klaviyo의 HTML 편집기에서 템플릿 코드를 확인할 수 있어요.

Klaviyo의 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인 또는 플로우에 추가해 주세요.
템플릿 유형으로 드래그 앤 드롭을 선택하세요.

Hello world! 라고 표시된 텍스트 블록을 확인하세요. 편집할 수 있는 텍스트 블록입니다.
원하는 경우 텍스트 블록 위 또는 아래에 추가 블록을 드래그 앤 드롭하세요.

맞춤 설정 가능한 이미지 블록 추가

선호하는 HTML 편집기를 사용해 맞춤형 HTML 템플릿을 만드세요.
다음 코드 조각을 HTML 템플릿에 추가해 주세요. 템플릿을 가져온 후 이미지 블록을 추가하려는 위치에 배치해 주세요.

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

선택적으로 div 내에 사전 설정된 이미지를 추가할 수 있어요. 이렇게 하려면 코드는 다음과 같이 표시돼요:

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="http://klaviyo.com><img src="example.com/my_image.png" alt="My Image" /></a>    </div>
</td>

Klaviyo에서 콘텐츠 > 템플릿으로 이동합니다.
이메일 템플릿 탭을 선택합니다.
가져오기를 클릭합니다.
템플릿의 이름을 입력하고, HTML 파일을 업로드한 다음 가져옵니다.
템플릿 탭에서 템플릿을 열면 Klaviyo의 HTML 편집기에서 템플릿 코드를 확인할 수 있어요.

Klaviyo의 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인 또는 플로우에 추가하세요. 콘텐츠 단계에서 가져온 템플릿을 선택하세요.
이미지 블록을 확인해 보세요. 이미지 블록에는 이미지를 업로드하는 버튼이 있거나 포함한 이미지가 표시돼요.
원하는 대로 이미지 블록 위 또는 아래에 추가 블록을 드래그 앤 드롭해 배치하세요.

범용 콘텐츠 블록 추가

이 프로세스는 범용 섹션이아니라 범용 콘텐츠 블록에서 지원돼요.

선호하는 HTML 편집기를 사용해 맞춤형 HTML 템플릿을 만드세요.
다음 코드 조각을 HTML 템플릿에 추가해 주세요. 템플릿을 가져온 후 이미지 블록을 추가하려는 위치에 배치해 주세요.

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">     <div data-klaviyo-universal-block="block_id_1">&nbsp;<div></td>

block_id_1을 범용 콘텐츠 블록의 ID로 바꿔 주세요. 범용 콘텐츠 블록의 ID를 찾는 방법:
1. 콘텐츠 > 범용 콘텐츠로 이동하세요.
2. 편집할 범용 콘텐츠 블록을 열어요.
3. 이 페이지의 URL은 다음 형식을 따릅니다: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
4. URL에서 블록 ID를 복사하세요.
Klaviyo에서 콘텐츠 > 템플릿으로 이동합니다.
이메일 템플릿 탭을 선택합니다.
가져오기를 클릭합니다.
템플릿의 이름을 입력하고, HTML 파일을 업로드한 다음 가져옵니다.
템플릿 탭에서 템플릿을 열면 Klaviyo의 HTML 편집기에서 템플릿 코드를 확인할 수 있어요.

Klaviyo의 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인 또는 플로우에 추가하세요. 콘텐츠 단계에서 가져온 템플릿을 선택하세요.
범용 콘텐츠 블록을 확인해 주세요.

단일 코드 조각으로 여러 범용 콘텐츠 블록을 추가할 수 있어요. 이렇게 하려면 위 코드 조각에서 첫 번째 div 요소 바로 뒤에 다른 블록의 ID를 사용해 div 요소를 하나 더 추가하세요.

다른 유형의 블록(예: 제품 블록, 표 블록)을 추가하세요.

선호하는 HTML 편집기를 사용해 맞춤형 HTML 템플릿을 만드세요.
다음 코드 조각을 HTML 템플릿에 추가해 주세요. 템플릿을 가져온 후 블록을 추가할 위치에 원하는 대로 배치하세요.

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

Klaviyo에서 콘텐츠 > 템플릿으로 이동합니다.
이메일 템플릿 탭을 선택합니다.
가져오기를 클릭합니다.
템플릿의 이름을 입력하고, HTML 파일을 업로드한 다음 가져옵니다.
템플릿 탭에서 템플릿을 열면 Klaviyo의 HTML 편집기에서 템플릿 코드를 확인할 수 있어요.

Klaviyo의 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인 또는 플로우에 추가하세요. 콘텐츠 단계에서 가져온 템플릿을 선택하세요.
Hello world! 라고 표시된 텍스트 블록을 확인하세요. 이 블록 아래로 다른 블록(예: 제품 블록)을 드래그하세요.
텍스트 블록을 삭제하고 원하는 대로 추가 사용자 지정 블록을 추가하세요.

하이브리드 이메일 템플릿 코드 샘플

아래 예시는 텍스트 블록용 하이브리드 코드 조각이 포함된 정상 작동 HTML 파일을 보여줍니다. 이 코드를 사용하여 하이브리드 편집기 기능을 테스트하세요.

A simple hybrid email

This is a very simple HTML email

Hello world!

{% unsubscribe %}

" data-astro-cid-mnja5ucx style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;">

  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                  <div class="klaviyo-block klaviyo-text-block">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>