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

학습 내용

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

기존 HTML 템플릿을 드래그 앤 드롭 템플릿으로 다시 만들려면 HTML-드래그 앤 드롭 전환을 사용하세요. Klaviyo는 AI를 사용해 편집 가능한 블록으로 디자인을 다시 만들어요. 보내기 전에 전환된 레이아웃과 콘텐츠를 검토하세요. 맞춤 HTML은 유지하면서 특정 영역에만 편집 가능한 블록을 추가하려면 하이브리드 템플릿을 사용하세요.

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

아래의 각 코드 조각은 편집 가능한 영역 1개를 생성해요. 해당 영역 내에 여러 개의 드래그 앤 드롭 블록을 추가할 수 있어요. 템플릿의 개별 영역을 편집 가능하게 만들려면, 각 영역에 코드 조각을 추가해 주세요.

이메일의 테이블 레이아웃에서 각 <td> 스니펫을 <tr> 안에 넣어 주세요. data-klaviyo-region-width-pixels을(를) 해당 영역의 너비(픽셀)로 설정해 주세요. 예시에서는 600을(를) 사용해요.

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

마케팅 이메일 템플릿을 가져오기 전에 {% unsubscribe %} 같은 구독 취소 태그를 포함해 주세요. 템플릿을 .html 파일로 저장해 주세요.

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

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

textCopy

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

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

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

1. 템플릿 갤러리에서 이메일: 저장됨을 선택하고, 가져온 템플릿을 선택한 다음 템플릿 사용을 클릭해 주세요.
2. Hello world! 라고 표시된 텍스트 블록을 확인하세요. 편집할 수 있는 텍스트 블록입니다.
3. 원하는 경우 텍스트 블록 위 또는 아래에 추가 블록을 드래그 앤 드롭하세요.

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

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

textCopy

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

1. 선택적으로 div 안에 프리셋 이미지를 추가할 수 있어요. 아래의 예시 이미지 URL을 공개적으로 액세스할 수 있는 이미지 URL로 바꾸고, 링크와 대체 텍스트를 본인 것으로 바꿔 주세요:

textCopy

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

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

1. Klaviyo 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인이나 플로우에 추가해 주세요. 템플릿 유형을 선택하라는 메시지가 표시되면 드래그 앤 드롭을 선택해 주세요.
2. 템플릿 갤러리에서 이메일: 저장됨을 선택하고, 가져온 템플릿을 선택한 다음 템플릿 사용을 클릭해 주세요.
3. 이미지 블록을 확인해 보세요. 이미지 블록에는 이미지를 업로드하는 버튼이 있거나 포함한 이미지가 표시돼요.
4. 원하는 대로 이미지 블록 위 또는 아래에 추가 블록을 드래그 앤 드롭해 배치하세요.
   

범용 콘텐츠 블록 추가

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

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

textCopy

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

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

1. Klaviyo 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인이나 플로우에 추가해 주세요. 템플릿 유형을 선택하라는 메시지가 표시되면 드래그 앤 드롭을 선택해 주세요.
2. 템플릿 갤러리에서 이메일: 저장됨을 선택하고, 가져온 템플릿을 선택한 다음 템플릿 사용을 클릭해 주세요.
3. 범용 콘텐츠 블록을 확인해 주세요.

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

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

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

textCopy

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

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

1. Klaviyo 드래그 앤 드롭 편집기에서 템플릿에 액세스하려면 캠페인이나 플로우에 추가해 주세요. 템플릿 유형을 선택하라는 메시지가 표시되면 드래그 앤 드롭을 선택해 주세요.
2. 템플릿 갤러리에서 이메일: 저장됨을 선택하고, 가져온 템플릿을 선택한 다음 템플릿 사용을 클릭해 주세요.
3. Hello world! 라고 표시된 텍스트 블록을 확인하세요. 이 블록 아래로 다른 블록(예: 제품 블록)을 드래그하세요.
4. 텍스트 블록을 삭제하고 원하는 대로 추가 사용자 지정 블록을 추가하세요.
   

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

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

  <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>

이모지 및 하이브리드 이메일 템플릿

2024년 2월 기준, 모든 이모지가 모든 Klaviyo 이메일 편집기(예: 드래그 앤 드롭 편집기, 하이브리드 편집기, 텍스트 전용 편집기, 커스텀 HTML 편집기)에서 지원돼요.

하이브리드 이메일 미리보기

데스크톱과 모바일에서 이메일을 미리 보고, 수신자에게 보내기 전에 테스트 이메일을 보내 보세요. 캠페인 또는 플로우에서 사용할 예정인 레이아웃, 이미지, 링크, 그리고 모든 동적 콘텐츠를 확인해 보세요. 편집기를 나가기 전에 변경 사항 저장이 완료될 때까지 기다려 주세요.

결과

이 단계를 완료하면 코드 조각으로 정의된 영역 내에서 드래그 앤 드롭 블록을 추가하고 편집할 수 있어요. 주변의 커스텀 HTML은 이러한 편집 가능 영역 밖에 그대로 유지돼요.

추가 자료