Klaviyo에서 사용자 지정 CSS, JavaScript 및 HTML 문제 해결
학습 내용
맞춤 HTML 템플릿을 가져오거나 자체 맞춤 코드 템플릿을 빌드할 때 맞춤 코드 문제를 해결하는 방법을 알아보세요.
기술에 익숙한 마케터이거나 개발자의 도움을 받을 수 있는 경우에만 맞춤 HTML 사용을 권장해요. 저희 제품은 맞춤 HTML을 지원하지만, 지원팀에서는 이 문서에 포함된 일반적인 안내를 제공하는 것 외에는 맞춤 템플릿 제작을 도와드릴 수 없어요.
데이터 보안을 유지하기 위해 Klaviyo 지원 팀은 회원님의 HTML 파일을 열 수 없습니다.
사용자 지정 HTML 및 CSS 요소
맞춤 HTML 템플릿을 만들고 있다면 이메일 내에서 제품 피드를 사용할 수 없어요.
이메일을 인터랙티브하게 만들기 위해 사용되는 일부 HTML 및 CSS 요소는 현재 지원되지 않아요. 예를 들어 특정 CSS 속성 선택자를 사용해 Gmail에서 이메일을 인터랙티브하게 만들려고 하면 템플릿이 Klaviyo에서 오류를 트리거할 수 있어요.
Klaviyo는 현재 이메일 템플릿에서 일부 연산자(예: ~)를 지원하지 않아요. 이로 인해 일부 맞춤 HTML 및 CSS를 사용할 수 있는 범위가 제한될 수 있어요. 템플릿에 완전히 지원되지 않는 HTML 또는 CSS가 포함되어 있으면 이메일 미리보기를 생성할 수 없고, 대신 오류 메시지가 표시돼요.
일반적인 HTML 문제
맞춤 HTML 이메일이 올바르게 보이지 않는다면 문제를 확인할 수 있는 몇 가지 일반적인 항목은 다음과 같아요.
글꼴에서 작은따옴표
CSS에서 font-family 속성을 추가하는 모든 위치에서 작은따옴표나 불필요한 따옴표가 있는지 확인해 보세요. 글꼴을 추가할 때는 모든 따옴표를 제거하세요.
문제 | 지정 |
font-family:'Helvetica Neue', Helvetica, Arial | font-family:Helvetica Neue, Helvetica, Arial |
미디어 쿼리
미디어 쿼리가 표준 형식이 아니면 제대로 렌더링되지 않아요. 모든 미디어 쿼리에 표준 형식을 따라 주세요.
Standard 미디어 쿼리 형식 |
@media only screen and (max-width: 460px) |
불필요한 center 태그
이메일 템플릿 전체에 HTML <center> 태그가 여러 개 있으면 Gmail에서 제대로 렌더링되지 않을 수 있어요. 이 문제를 해결하려면 불필요한 <center> 태그를 모두 제거해 주세요. <center> 이메일 템플릿 상단의 <body> 태그 근처에는 태그 1개만 있으면 돼요. 추가 <center> 태그는 모두 불필요합니다.
Klaviyo는 JavaScript 이메일을 지원하지 않아요.
대부분의 이메일 클라이언트(Gmail, Hotmail, Yahoo 등)는 이메일의 JavaScript를 보안 위협으로 간주해요. 이는 스크립트가 악성 콘텐츠를 숨길 수 있기 때문이에요. 그 결과, 이러한 주요 이메일 클라이언트는 이메일의 스크립트를 완전히 차단해요. 이메일의 JavaScipt와 관련된 고유한 보안 위협과 대부분의 주요 이메일 클라이언트에서 이러한 스크립트를 지원하지 않는 점을 고려할 때, 추가된 스크립트는 자동으로 제거돼요.
Klaviyo는 임베드된 양식 또는 비디오를 지원하지 않아요.
Klaviyo에서는 템플릿에 임베디드 양식, 위젯 또는 동영상을 지원하지 않아요. 테스트 결과, 이러한 유형의 기능은 모든 주요 이메일 클라이언트에서 일관되게 렌더링되지 않는 것으로 확인됐기 때문이에요. JavaScript 스니펫과 비슷하게, 대부분의 이메일 클라이언트는 이러한 요소를 보안 위협으로 간주하고 이메일에서 완전히 제거해요.
이 문제에 대한 해결 방법을 알고 싶다면 이메일에 동영상 또는 GIF 추가하기 도움말 문서를 참조하세요.
지원되지 않는 다른 태그 및 속성
여기서 다루는 HTML 태그 및 속성은 Klaviyo에서 지원하는 모든 것을 나열한 것은 아닙니다. 일반적으로 주요 받은 편지함 공급업체에서 지원하는 HTML 요소는 Klaviyo에서도 지원돼요.
템플릿에 지원되지 않는 HTML이 포함되어 있으면, Klaviyo에서 지원되지 않는 요소를 지원되는 대체 요소(예: span 태그)로 바꾸려고 시도해요. 명확한 대체 항목이 없으면, 해당 HTML의 그 부분은 제거돼요. HTML의 일부가 추가한 뒤 사라지는 것처럼 보이면 지원되지 않을 가능성이 높아요. 비슷한 효과를 얻을 수 있도록 다른 HTML 태그 또는 속성을 사용해 보세요.
추가 자료
- How to import a custom HTML template
Learn how to import a custom HTML template into Klaviyo.
- Troubleshooting email template error messages
If you encounter errors or warnings in an email template, you may need to resolve them before sending your message. Search this resource for the error message or warning you’re encountering to find tips for resolving the issue.