가입 양식에서 사용자 정의 HTML 블록을 사용하는 방법
사용자 정의 HTML 블록은 HTML 작성에 익숙한 사용자를 위한 고급 기능이에요. HTML에 익숙하지 않다면, 양식 편집기의 표준 블록과 스타일링 옵션으로 필요한 모든 사용자 정의 요구 사항을 충족할 수 있어요.
학습 내용
양식 편집기에서 제공되는 블록 외에도, 사용자 지정 HTML 블록을 사용해 Klaviyo 가입 양식에 원하는 마크업을 추가하는 방법을 알아보세요. HTML 블록을 사용하면 사용자 지정 제목, 서식 있는 텍스트, 목록, 표, 이미지, 링크 등 콘텐츠와 레이아웃을 세밀하게 제어할 수 있어 양식을 브랜드와 메시징에 정확히 맞출 수 있어요.
보안을 위해 HTML 블록은 특정 태그 및 속성 세트만 지원해요. 해당 세트에 포함되지 않은 항목은 양식이 렌더링될 때 자동으로 제거되므로, 작성한 모든 HTML이 사이트에 표시되지는 않아요. 아래 섹션에는 지원되는 태그와 속성, 그리고 항상 제거되는 항목이 나열되어 있어요.
시작하기 전에 알아야 할 것
맞춤 HTML을 사용하기 전에 다음 사항을 확인해 주세요.
- 맞춤 HTML 블록은 유료 Klaviyo 요금제에서만 사용할 수 있어요. 이 기능은 단계적으로 출시되고 있어서 아직 계정에 표시되지 않을 수 있어요.
- 보안을 위해 HTML이 자동으로 정리돼요. HTML 블록은 지원되는 태그와 속성만 유지하고, 양식이 렌더링될 때 그 외의 모든 항목(스크립트 및 이벤트 핸들러 포함)을 제거해요. 이렇게 하면 사이트 방문자를 악성 코드로부터 보호할 수 있어요. 그 결과, 지원되지 않는 경우 작성한 HTML 일부가 사이트에 표시되지 않을 수 있어요. 아래에서 지원되는 태그 목록을 확인해 주세요.
- 맞춤 HTML 블록은 새 콘텐츠만 추가해요. HTML 블록을 사용하면 양식에 자체 요소를 추가할 수 있어요. 이 블록으로는 양식의 기존 블록 HTML을 수정할 수 없어요.
- Klaviyo 지원팀은 사용자 지정 코드를 문제 해결할 수 없어요. 사용자 지정 HTML(예: 레이아웃 깨짐, 콘텐츠가 렌더링되지 않음, 스타일링 문제)로 인해 발생한 문제는 직접 디버그하고 수정해야 해요. 사용자 지정 HTML이 포함된 양식이 올바르게 표시되거나 동작하지 않으면, 먼저 HTML 블록을 제거해서 코드가 원인인지 확인해 보세요.
- 게시하기 전에 테스트하세요. 맞춤 HTML은 양식의 레이아웃과 사용성에 영향을 줄 수 있어요. 게시하기 전에 데스크톱과 모바일에서 모두 양식을 항상 미리 보고 테스트해 보세요.
양식에 HTML 블록 추가
양식에 맞춤 HTML을 추가하려면:
- 가입 양식 으로 이동한 다음, 편집기에서 양식을 여세요.
- 블록 패널에서 HTML 블록을 찾아, 맞춤 콘텐츠가 표시되길 원하는 위치로 양식에 끌어다 놓아 주세요.
- HTML 블록을 선택해 설정을 여세요. 코드 편집기가 블록의 사이드바에 표시돼요.
HTML 블록은 양식 편집기의 다른 블록과 동일하게 작동해요. 블록을 2개 이상 추가하고, 위치를 변경하고, 삭제할 수 있어요. 맞춤 HTML은 해당 블록 안에 포함되므로, 양식 나머지 구조에는 영향을 주지 않아요.
HTML 작성
코드 편집기는 비어 있는 상태로 시작해요. 지원되는 태그와 속성만 사용해 HTML을 직접 입력해 주세요. 지원되지 않는 태그와 속성은 양식이 렌더링될 때 자동으로 제거돼요.
예시
<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
<li>Early access to new drops</li>
<li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>
HTML에 스타일을 적용하려면 요소에 자체 class 이름을 추가한 다음 사용자 정의 CSS로 타겟팅하세요. 예를 들어 제목에 class="promo-heading"을(를) 설정한 다음 사용자 정의 CSS 편집기에서 .promo-heading의 스타일을 지정하세요. 사용자 정의 CSS를 활성화하고 작성하는 방법은 가입 양식에서 사용자 정의 CSS를 사용하는 방법을(를) 참조하세요.
지원되는 HTML 태그 및 속성
보안을 위해 HTML 블록은 다음 태그 및 속성을 지원해요. 이 목록에 없는 태그 또는 속성은 양식이 렌더링될 때 제거돼요.
전역 속성 ― 지원되는 모든 태그에서 허용됩니다: id, class, dir, lang, role, aria-* (접근성 속성).
아래 표에는 위의 전역 속성 외에도 특정 태그에서 허용되는 추가 속성이 나열되어 있어요.
텍스트 및 서식
태그 | 용도 | 추가로 허용되는 속성 |
|---|---|---|
| 단락 | — |
| 일반 컨테이너 | — |
| 인라인 컨테이너 | — |
| 줄 바꿈 | — |
| 수평 규칙 | — |
| 굵게(중요) | — |
| 강조 | — |
| 굵게 | — |
| 이탤릭체 | — |
| 밑줄 | — |
| 취소선 | — |
| 작은 텍스트 | — |
| 아래 첨자 | — |
| 위 첨자 | — |
| 하이라이트 | — |
| 약어 |
|
| 인용 | — |
| 인라인 코드 | — |
| 미리 서식 지정된 텍스트 | — |
| 블록 인용 |
|
| 인라인 인용 |
|
| 시간 값 |
|
| 단어 줄바꿈 기회 | — |
제목
태그 | 용도 | 추가로 허용되는 속성 |
|---|---|---|
| 제목(1~6수준) | — |
목록
태그 | 용도 | 추가로 허용되는 속성 |
|---|---|---|
| 순서 없는 목록 | — |
| 정렬된 목록 |
|
| 목록 항목 |
|
| 설명 목록 | — |
| 설명 용어 | — |
| 설명 세부정보 | — |
표
태그 | 용도 | 추가로 허용되는 속성 |
|---|---|---|
| 표 | — |
| 표 헤더 | — |
| 표 본문 | — |
| 표 바닥글 | — |
| 표 행 | — |
| 테이블 셀 |
|
| 테이블 헤더 셀 |
|
| 표 캡션 | — |
| 열 그룹 |
|
| 열 |
|
미디어 및 링크
태그 | 용도 | 추가로 허용되는 속성 |
|---|---|---|
| 링크 |
|
| 이미지 |
|
| 반응형 이미지 래퍼 | — |
| 미디어 소스 |
|
| 그림 래퍼 | — |
| 그림 캡션 | — |
허용되는 URL 스킴
링크(href)와 이미지 소스(src)는 http, https, mailto, tel 및 상대 경로나 #fragment 앵커만 URL 스키마로 사용할 수 있어요. 다른 스키마(예: javascript: 또는 data:)를 사용하는 URL은 제거돼요. 링크에서 target="_blank"를 사용하면 링크 보안을 유지하기 위해 rel="noopener noreferrer" 이(가) 자동으로 적용돼요.
보안을 위해 제거된 태그 및 속성
사이트와 방문자를 보호하기 위해 HTML 블록은 코드를 실행하거나 양식을 탈취할 수 있는 모든 항목을 자동으로 제거해요. 이를 교차 사이트 스크립팅(XSS)이라고 해요. 다음 항목은 HTML에서 흔히 사용되더라도 항상 제거돼요:
- 스크립트:
<script>및<noscript> - 이벤트 핸들러 속성: 이름이
on로 시작하는 모든 속성(예:onclick,onload,onerror,onmouseover) - 프레임 및 임베드:
<iframe>,<frame>,<frameset>,<object>,<embed>,<applet>,<portal> - 벡터 및 마크업 언어 태그:
<svg>,<math> - 문서 및 리소스 태그:
<base>,<meta>,<link>및<style>태그 - 링크 또는 소스의 위험한 URL 스키마:
javascript:,vbscript:,data:,filesystem: - 양식 제출 재정의 속성:
formaction,formmethod,formtarget,formenctype - 레거시 또는 사용 중단된 태그:
<marquee>,<bgsound>,<keygen>,<isindex>,<xmp>,<listing>,<plaintext>,<template>,<noembed>
양식을 렌더링할 때 코드 일부가 사라진다면, 위의 지원 목록에 없는 태그 또는 속성을 사용했을 가능성이 높아요.
미리 보고 게시하기
HTML을 작성한 후:
- 편집기 미리 보기를 사용해 양식의 표시 상태를 확인해 보세요.
- 사용자 지정 HTML은 데스크톱과 모바일에 서로 다르게 영향을 줄 수 있으므로, 두 환경에서 모두 양식을 확인해 보세요.
- 사이트에 어떻게 표시되는지 확인하려면 공개되지 않는 페이지에 양식을 게시해 검증해 보세요.
- 게시한 양식에서 테스트 가입을 제출해 모든 입력과 버튼이 여전히 작동하는지 확인해 주세요.
- 양식을 공개로 게시하세요.
맞춤 HTML 편집 또는 삭제
HTML을 편집하려면 HTML 블록을 선택하고 설정에서 코드를 업데이트하세요.
맞춤 HTML을 제거하려면 HTML 블록을 선택한 다음 삭제해 주세요. 그러면 양식에서 블록과 그 콘텐츠가 제거되고, 양식의 나머지 부분은 영향을 받지 않아요. 블록을 제거하는 것은 표시 문제가 맞춤 코드로 인해 발생했는지 확인하는 가장 빠른 방법이기도 해요.
문제 해결
Klaviyo 지원팀은 사용자 지정 코드를 문제 해결할 수 없어요. 사용자 지정 HTML(예: 레이아웃 깨짐, 콘텐츠가 렌더링되지 않음, 스타일링 문제)로 인해 발생한 문제는 직접 디버그하고 수정해야 해요. 사용자 지정 HTML이 포함된 양식이 올바르게 표시되거나 동작하지 않으면, 먼저 HTML 블록을 제거해서 코드가 원인인지 확인해 보세요.
일부 HTML이 표시되지 않아요.
HTML 블록은 양식이 렌더링될 때 지원되지 않는 태그 또는 속성을 모두 제거해요. 위의 지원되는 태그 및 속성과 비교해 코드를 확인하고, 보안상 제거되는 태그 또는 속성을 사용하고 있지 않은지 확인해 주세요.
내 양식이 깨져 보여요.
닫히지 않았거나 서로 맞지 않는 태그, 그리고 다른 블록의 위치를 옮기거나 겹치게 만드는 레이아웃 규칙이 있는지 HTML을 검토해 주세요. 코드가 자체 블록에 들어 있으므로 HTML 블록을 삭제해 원인인지 확인한 다음, 다시 추가하고 더 작은 변경 사항으로 테스트해 볼 수 있어요.
HTML에 스타일이 적용되지 않아요.
HTML의 class 이름이 사용자 지정 CSS의 선택자와 일치하는지, 사용자 지정 CSS가 켜져 있는지, 그리고 양식의 최신 버전을 게시했는지 확인해 주세요. 가입 양식에서 사용자 정의 CSS를 사용하는 방법을(를) 참조하세요.
HTML 블록이 보이지 않아요.
사용자 지정 HTML은 유료 요금제에서만 사용할 수 있으며, 단계적으로 출시되고 있어요. 유료 요금제를 사용 중인데 아직 보이지 않는다면, 곧 다시 확인해 주세요.
자주 묻는 질문
폼의 기존 블록 HTML을 편집할 수 있나요?
아니요. HTML 블록을 사용하면 폼에 새로운 맞춤 콘텐츠를 추가할 수 있어요. 이는 폼의 기존 블록 HTML을 변경하지 않아요.
왜 일부 코드가 제거되었나요?
보안을 위해 HTML 블록은 지원되는 태그 및 속성만 유지하고, 나머지(예: 스크립트 및 이벤트 핸들러)는 모두 제거하여 사이트에서 악성 코드가 실행되지 않도록 방지해요. 위에서 보안을 위해 제거된 태그 및 속성 목록을 확인해 주세요.
폼에 <script> 또는 기타 JavaScript를 추가할 수 있나요?
아니요. 사이트 방문자를 보호하기 위해 스크립트와 이벤트 핸들러 속성은 항상 제거돼요. 이 기능은 끌 수 없어요.
HTML 블록에 스타일을 적용할 수 있나요?
예, 그렇습니다. HTML 요소에 자체 class 이름을 추가하고 사용자 지정 CSS로 이를 타겟팅하세요. 가입 양식에서 사용자 정의 CSS를 사용하는 방법을 참조하세요.
Klaviyo Support에서 HTML을 작성하거나 수정하는 데 도움을 받을 수 있나요?
아니요. Klaviyo Support는 커스텀 코드를 작성, 검토, 또는 문제 해결해 드릴 수 없어요. 커스텀 HTML이 포함된 양식에 문제가 있으면, Support에서 추가로 조사하기 전에 원인을 배제하기 위해 HTML 블록을 제거해 달라는 요청을 받게 돼요.