이메일 템플릿 편집기 가이드

학습 내용

템플릿 스타일 사용 방법과 각 블록 유형 구성 방법을 비롯해 Klaviyo의 드래그 앤 드롭 이메일 템플릿 편집기에 대해 알아보세요. 

블록 및 레이아웃 정보 

Klaviyo 이메일 템플릿 편집기를 열면 사이드바에 선택할 수 있는 블록 및 섹션이 표시됩니다. 이메일을 처음부터 작성하는 데 사용되는 백지인 기본 블록과, 다른 템플릿에서 작성 후 나중에 사용하기 위해 저장한 콘텐츠인 유니버설 콘텐츠 중에 선택합니다. 

기본 섹션에서 블록과 레이아웃을 모두 선택할 수 있습니다. 블록을 사용하여 텍스트, 이미지 또는 버튼과 같은 콘텐츠를 추가하세요. 레이아웃(예: 섹션 및 열)을 사용하여 블록을 그룹화하고 구성합니다. 

블록이나 섹션 위에 마우스를 갖다 대면 나타나는 아이콘을 사용해 블록과 섹션을 복제, 삭제 또는 저장할 수 있습니다. 

블록이나 섹션을 이동하려면 클릭하고 드래그합니다. 

템플릿 스타일

기본 스타일 탭에는 전체 템플릿에 적용할 수 있는 여러 가지 스타일 옵션이 포함되어 있습니다. 템플릿의 기본 스타일 설정에 액세스하려면 완료 버튼을 사용하여 작업 중인 블록 또는 섹션에서 나온 다음 스타일을 클릭합니다. 

여기에서 이메일의 형태와 분위기를 설정할 수 있습니다. 설정 마법사를 완료했다면 이 영역에 이미 브랜드 스타일이 포함되어 있을 것입니다.

여기에서 다음 설정을 편집할 수 있습니다:

• 이메일 
  • 템플릿 배경
    템플릿의 배경색을 선택하세요. 
  • 배경 이미지
    배경 이미지를 추가할 수 있습니다. 
  • 콘텐츠 배경
    이메일 콘텐츠의 배경색을 설정합니다. 이 색상은 템플릿 배경과 다를 수 있으며 이메일 콘텐츠의 너비만큼만 사용할 수 있습니다. 
  • 너비
    이메일 콘텐츠의 너비(600px 권장)
  • 모서리 반경, 여백, 패딩 및 테두리
    템플릿에 간격 및 테두리 추가 
• 텍스트 & 헤딩
  일반 텍스트 및 네 가지 제목 스타일에 대한 스타일을 설정한 다음 텍스트 블록의 드롭다운 메뉴에서 텍스트 스타일을 선택하여 적용합니다. 
• 글꼴
  텍스트 스타일의 글꼴, 글꼴 간격, 크기, 굵기 및 색상을 선택합니다. 
• 문자 간격
  각 문자 사이의 가로 간격 
• 줄 간격
  텍스트 줄 사이의 세로 간격
• 텍스트 정렬
  왼쪽, 가운데 또는 오른쪽 맞춤을 선택합니다.
• 모바일
  모바일 최적화 사용(권장) 또는 데스크톱과 모바일 모두에 동일한 스타일과 콘텐츠를 표시할지 여부를 선택합니다. 
• 기타
  • 통화
    계정 설정과 다른 경우 템플릿의 기본 통화를 선택합니다. 

템플릿 스타일이 블록 및 섹션 스타일과 상호 작용하는 방식

템플릿 스타일 설정은 블록 또는 섹션별 설정이 적용되기 전에 템플릿에 먼저 적용됩니다. 블록 또는 섹션의 스타일이 템플릿 스타일과 충돌하는 경우 블록 및 섹션 스타일이 사용됩니다. 예를 들어 기본 스타일 섹션에서 콘텐츠 배경색을 설정한 다음 블록별 배경색을 설정하면 해당 블록의 영역에 해당 블록의 배경색이 사용됩니다. 

섹션 및 섹션 스타일 

템플릿 편집기의 모든 콘텐츠는 섹션으로 구성되어 있습니다. 새 템플릿을 만들면 기본적으로 하나 이상의 섹션이 포함되며 필요에 따라 섹션을 추가하거나 삭제할 수 있습니다. 

섹션의 설정을 열려면 해당 섹션 콘텐츠의 오른쪽 또는 왼쪽에 있는 영역을 클릭합니다. 블록을 클릭하면 해당 블록이 포함된 섹션이 아니라 해당 블록의 설정이 열립니다. 

각 섹션에는 스타일 탭과 표시 옵션 탭이 있습니다. 섹션의 스타일을 사용하여 해당 섹션에 배경 이미지, 패딩 및 기타 스타일을 추가합니다. 섹션의 표시 옵션을 사용하여 섹션을 표시할 디바이스 유형 및 수신자를 선택합니다. 

섹션에 대해 자세히 알아보세요.

섹션 스타일 설정은 템플릿 스타일 다음에 적용되지만 블록별 스타일보다는 먼저 적용됩니다. 템플릿 스타일이 섹션 스타일과 충돌하는 경우 섹션 스타일이 사용됩니다. 블록의 설정이 섹션 스타일과 충돌하는 경우 블록의 스타일이 사용됩니다. 

블록 및 블록 스타일

섹션 내에서 블록을 추가하여 이메일을 콘텐츠로 채웁니다. 대부분의 콘텐츠 블록에는 블록의 모양을 구성할 수 있는 스타일 탭과 블록을 볼 수 있는 대상 및 표시할 디바이스 유형을 선택할 수 있는 표시 옵션 탭이 있습니다. 사용 가능한 특정 스타일 설정은 블록 유형마다 다르지만 모든 블록에서 동일한 표시 옵션을 사용할 수 있습니다. 

색상 옵션이 있는 모든 스타일 섹션에는 다음과 같이 색상을 선택할 수 있는 여러 가지 방법을 제공하는 색상 선택 도구가 포함되어 있습니다:

• 그레디언트 필드를 사용하여 음영과 색조를 선택하세요.
• HEX 또는 RGB 코드를 복사하여 붙여넣습니다.
• 최근에 사용한 색상 또는 이 템플릿에 이미 있는 색상 중에서 선택합니다.
• 스포이드 도구를 사용하여 이메일 캔버스 영역에서 어떤 색상이든 선택하세요(현재 텍스트, 분할 또는 표 블록에는 사용할 수 없음).
  

표시 옵션에 대해 알아보세요. 또는 블록 유형 및 사용 방법에 대해 자세히 알아보세요. 

텍스트 

텍스트 블록을 사용하여 이메일에 텍스트를 추가합니다. 텍스트 스타일(일반 또는 제목 1~4)을 선택하여 기본 템플릿의 스타일 설정을 적용하거나 텍스트 편집기의 설정으로 텍스트 콘텐츠를 사용자 지정합니다. 

Klaviyo의 이메일 편집기는 UTF-8 인코딩 표준을 사용하므로 라틴 문자, 이모티콘, 더블 바이트 문자 등을 지원합니다.  

텍스트 블록에 동적 콘텐츠를 추가하여 각 수신자에 맞게 메시지를 맞춤 설정할 수 있습니다. 메시지 맞춤 설정에 대해 자세히 알아보세요. 

<스타일 유형="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

콘텐츠 섹션을 축소하거나 스크롤하여 블록의 스타일을 조정합니다. 블록 또는 텍스트 콘텐츠 영역의 배경색을 선택하고 패딩을 추가합니다. 

이미지 

이미지 블록을 사용하여 이메일에 이미지를 삽입합니다. 다음 소스에서 이미지를 추가할 수 있습니다: 

• 이미지 라이브러리
  이미지 라이브러리를 검색하여 과거에 업로드한 이미지를 추가합니다.
• 이미지 업로드
  디바이스에서 JPEG, PNG 또는 GIF를 업로드합니다. 
• 이미지 가져오기
  이미지 URL을 사용하여 이미지 가져오기
• 동적 이미지
  동적 이미지 변수를 사용하여 각 수신자별 사용자 지정 이미지를 표시합니다(예: 수신자의 이벤트 데이터에 저장된 이미지 URL이나 프로필 속성을 참조).

이미지를 선택한 후에는 이미지에 대한 설명인 대체 텍스트, 이미지 클릭 시 연결되는 링크 주소, 이미지 너비, 정렬 및 기타 스타일을 포함한 이미지 설정을 조정합니다. 

분할

분할 블록을 사용하여 콘텐츠를 원하는 너비의 두 열로 표시합니다. 분할 블록의 양쪽 콘텐츠는 이미지 또는 텍스트 콘텐츠여야 합니다. 기본적으로 분할 블록은 50/50 분할을 사용하며, 분할 설정 탭으로 이동하여 이 비율을 조정할 수 있습니다. 또는 열 레이아웃을 사용하여 콘텐츠를 두 개 이상의 열로 분할할 수 있습니다. 

버튼 

버튼 블록은 일반 텍스트 링크보다 눈에 잘 띄는 큰 링크를 생성하며 중요한 행동 촉구(CTA)를 강조하는 데 유용합니다. CTA에 사용되므로 각 이메일에 몇 개만 사용하는 것이 좋습니다.

최소한 텍스트 및 URL 필드는 입력해야 합니다. 텍스트는 수신자가 버튼에서 볼 수 있는 내용이며, URL은 방문자가 버튼을 클릭할 때 이동하는 위치입니다. 색상, 모서리 반경 및 패딩 옵션을 사용하여 버튼의 모양, 형태 및 크기를 조정합니다. 아래에서 블록의 글꼴 및 기타 스타일을 조정할 수도 있습니다. 

헤더/링크 바 

헤더/링크 바 블록을 사용하여 사이트의 다른 콘텐츠로 리디렉션되는 로고와 탐색 링크를 추가할 수 있습니다.

블록을 드래그하면 몇 가지 일반적인 헤더/링크 바 레이아웃 중에서 선택할 수 있습니다. 데스크톱과 모바일에 대해 서로 다른 레이아웃을 선택하여 각 디바이스의 크기에 최적화할 수도 있습니다. 

원하는 링크를 링크 바에 추가합니다. 각 링크에 대한 디바이스 표시 설정을 정할 수 있으며, 디바이스 크기가 작으므로 모바일에서는 주요 링크만 표시하는 것을 권장합니다. 

링크와 로고를 추가한 후에는 아래의 스타일 옵션을 사용하여 스타일을 마무리합니다. 블록의 글꼴, 색상 및 간격을 변경할 수 있습니다. 준비가 완료되면 데스크톱과 모바일에서 미리 보기를 통해 최종 결과물을 확인합니다. 

그림자 효과

그림자를 사용하여 메시지에 깊이를 더하거나 특정 영역을 강조할 수 있습니다. 그림자의 색상 옵션에는 밝게, 어둡게, 더 어둡게 등이 있으며 블록의 배경색과 패딩도 설정할 수 있습니다. 

디바이더

다른 콘텐츠 블록들 사이에 간단한 줄을 추가합니다. 실선, 파선 또는 점선 중에서 선택합니다. 색상, 크기 및 패딩은 완전히 사용자 지정이 가능합니다. 이전에는 수평 규칙이라고 불렀던 부분입니다. 

소셜 링크 

소셜 링크 블록은 Instagram, Pinterest, Facebook, X(트위터) 등의 소셜 아이콘을 쉽게 추가할 수 있는 수단입니다. Klaviyo는 다양한 사이트를 위한 표준 풀컬러 아이콘과 단순화된 검정, 흰색 또는 회색 옵션을 제공합니다. 

완전히 사용자 정의된 소셜 아이콘을 사용하려면 사용자 지정 옵션을 사용하여 직접 만든 이미지 파일을 업로드하세요. 이 방법을 사용하는 경우 정사각형 96픽셀 이미지를 사용하는 것이 좋습니다. Klaviyo의 소셜 아이콘과 사용자 지정 이미지 사이의 간격과 정렬을 유지하려면 이미지 파일에서 가로와 세로 기준으로 중앙에 오는 50px 너비의 아이콘을 사용하세요.

사이드바에서 아이콘 레이블을 드래그하여 아이콘 순서를 변경할 수 있습니다. 스페이서 추가 버튼을 사용하여 각 아이콘 사이의 간격을 더 세밀하게 제어할 수 있습니다. 

스페이서

스페이서 블록은 수직으로 쌓인 블록 사이에 사용자 지정 가능한 공간을 추가합니다. 나란히 있는 블록 사이의 공간을 사용자 지정하려면(예: 열에서) 왼쪽/오른쪽 패딩을 사용합니다. 

제품 

제품 블록을 사용하여 스토어 카탈로그에서 추천 품목을 추가합니다. 제품 블록을 추가할 때 동적 또는 정적의 두 가지 옵션이 제공됩니다. 

동적 피드는 자동으로 업데이트되며 제품 피드를 통해 구성됩니다. 제품 피드 설정에 대해 자세히 알아보려면 제품 피드 사용법 및 추천하는 방법 문서를 참조하세요. 

정적 제품 블록은 템플릿 편집기에서 직접 선택한 카탈로그 항목만 표시하며, 자동으로 업데이트되거나 개별 수신자를 대상으로 타겟팅되지 않습니다. 

어느 옵션을 사용하든 피드 또는 항목을 선택한 후에는 블록의 모양을 사용자 지정할 수 있습니다. 제품 블록에는 이미지만 표시하거나 각 품목의 이름과 가격을 포함할 수 있습니다. 제품 블록의 스타일 탭에서 전체 옵션을 스크롤하며 블록을 완전히 사용자 지정하세요. 

표

표 블록은 이메일 템플릿 내에서 이미지와 텍스트를 구성하는 데 도움이 됩니다. 표 블록은 원하는 만큼 열 또는 행을 추가할 수 있는 유연성을 제공합니다(자동으로 공백이 생기게 하거나 열 탭의 너비 설정에서 너비를 설정할 수 있음). 

표 블록을 템플릿에 처음 드래그하면 하나의 행과 두 개의 열이 포함되어 있습니다. 표 설정 탭을 사용하여 행과 열을 추가한 다음 콘텐츠 탭으로 다시 이동하여 표의 콘텐츠를 구성합니다. 

셀 선택기 섹션을 사용하여 특정 셀의 콘텐츠를 엽니다. 셀 콘텐츠 섹션을 사용하여 텍스트 또는 이미지 콘텐츠 중에서 선택한 다음 콘텐츠를 추가합니다. 텍스트와 이미지 콘텐츠 유형 간에 전환하면 해당 셀에 있던 콘텐츠가 손실될 수 있으며, 이 경우 실행 취소 버튼을 사용하여 변경 내용을 되돌릴 수 있습니다. 

표의 색상, 글꼴, 테두리 및 레이아웃을 편집하려면 표 설정 탭을 엽니다. 

테이블 블록은 수신자의 장바구니에 있는 품목 리스트에 대한 세부 정보와 같은 동적 콘텐츠를 표시하는 데에도 사용됩니다. 동적 테이블 블록에 대해 자세히 알아보세요. 

HTML 

HTML 블록을 사용하여 템플릿에 사용자 정의 코드를 추가합니다. 사용자 정의 코딩 요소, 카운트다운 타이머와 같은 타사 기능 또는 사용자 정의 CSS를 추가할 경우 이 블록 유형을 사용하세요. 이메일의 사용자 정의 코드에 문제가 있는 경우 템플릿의 사용자 정의 코드 문제 해결 방법을 알아보세요.

견적 검토

Klaviyo 리뷰를 사용한다면 실제 고객 리뷰를 통해 브랜드 가치에 대한 소셜 증거를 제공하고 전환율을 높일 수 있습니다. 

리뷰 인용문 블록에서는 메시지에 포함할 리뷰를 선택할 수 있습니다. 아직 리뷰를 선택할 수 없다면 다음과 같은 이유 때문일 수 있습니다: 

• 귀하의 계정에 선택할 수 있는 고품질 리뷰가 충분하지 않습니다. 나중에 다양한 리뷰를 다시 확인하세요. 
• 아직 리뷰가 처리되지 않았습니다. 새로운 리뷰를 소개하려면 몇 시간 정도 기다렸다가 다시 시도하세요.
• 계정에 있는 리뷰가 인증되지 않았습니다. 인증을 받으려면 Klaviyo 리뷰 요청 플로우의 개인화된 링크를 통해 리뷰를 제출하거나 다른 플랫폼에서 업로드된 리뷰 CSV에서 리뷰를 '인증됨'으로 표시해야 합니다. 사이트에 직접 제출된 리뷰를 포함하여 인증되지 않은 리뷰는 리뷰 인용 블록에 포함할 수 없습니다.

열

열을 이메일 템플릿으로 끌어오는 데 사용할 수 있는 두 가지 블록은 분할 블록과 열 레이아웃입니다. 분할 블록을 사용하면 두 열의 텍스트 및 이미지 콘텐츠로 제한되지만 각 열의 너비를 정밀하게 조정할 수 있습니다. 

열 레이아웃을 사용하면 각 열에 모든 유형의 콘텐츠를 추가할 수 있지만 미리 선택된 몇 가지 열 너비 옵션으로 제한됩니다. 그러나 열 레이아웃은 1~4개의 열을 허용합니다. 

템플릿에 열을 추가한 후에는 각 열에 콘텐츠 블록을 끌어다 놓아 열을 채웁니다. 열당 하나의 콘텐츠 블록으로만 제한되지 않고 원하는 만큼 콘텐츠 블록을 추가하여 서로 겹쳐서 쌓을 수 있습니다. 

동영상

동영상 블록은 이메일에 삽입된 동영상의 형태를 결정합니다. 수신자가 재생 버튼을 클릭하면 새 탭이 열리고 동영상이 재생됩니다. 

동영상 블록을 추가하려면 Youtube, Vimeo, TikTok 또는 선택한 동영상 호스팅 플랫폼에서 동영상의 URL을 복사하세요. Youtube 동영상일 경우, Klaviyo에서 썸네일 이미지를 자동으로 선택합니다. 

다른 출처의 동영상을 사용하는 경우, 동영상 썸네일 이미지를 직접 업로드해야 합니다. 동영상 썸네일 이미지에 재생 버튼이 겹쳐지게 되며, 이 버튼은 블록 설정에서 토글하여 끌 수 있습니다.

이메일 내에서 동영상이 바로 재생되지 않는 이유는 무엇인가요? 

대부분의 주요 이메일 클라이언트(예: Gmail)는 동영상과 같은 임베디드 콘텐츠를 보안 위협으로 간주합니다. 이러한 이메일 클라이언트는 이 임베디드 코드를 완전히 제거하기 때문에 수신자가 이메일을 열 때 콘텐츠가 렌더링되지 않는 경우가 많습니다. 

Klaviyo는 고객의 성공을 위해 최선을 다하고 있습니다. 테스트 결과, 모든 주요 이메일 클라이언트에서 동영상이 안정적으로 렌더링되지 않는 것으로 확인되었으므로 직접 임베드된 동영상은 지원하지 않습니다.

유니버설 콘텐츠

별 아이콘을 사용하여 다른 템플릿에서 사용할 수 있도록 템플릿에 블록 또는 섹션을 저장할 수 있습니다. 블록 또는 섹션을 저장하면 이메일 템플릿 블록의 유니버설 탭에 해당 블록이 표시됩니다. 유니버설 블록 또는 섹션을 편집할 때 저장된 콘텐츠의 모든 인스턴스에 해당 편집 내용을 적용하도록 선택할 수 있습니다.

유니버설 저장 콘텐츠 사용에 대해 자세히 알아보세요.

실행 취소 및 다시 실행

템플릿을 편집하는 동안 실수한 경우 실행 취소 버튼을 사용하여 되돌릴 수 있습니다. 다시 실행 버튼을 사용하여 변경 사항을 되돌릴 수도 있습니다. 템플릿은 편집 세션 내내 자동 저장되며, 실행 취소/다시 실행 버튼은 템플릿을 편집하는 동안 발생하는 변경 사항을 기록합니다. 그러나 이전의 변경 사항은 편집 세션이 끝나면 사라집니다. 템플릿을 종료했다가 나중에 다시 돌아오면 향후 다시 변경을 할 때까지 실행 취소 버튼이 비활성화됩니다. 

이메일 미리보기 

미리보기 및 테스트 버튼을 사용하여 이메일이 수신자의 받은 편지함에 어떻게 표시되는지 미리보기합니다. 이메일 템플릿 탭에서 이메일을 작성하는 경우 이메일 전송 방식에 따른 미리보기로 이메일을 확인하세요. 아래 표를 참조하여 미리보기에 가장 적합한 방법을 찾아보세요. 

추가 리소스

• 메시지 개인화 참고자료
• 기본 템플릿을 만드는 방법
• 교육 과정: 이메일 템플릿 편집기 시작하기