가입 양식에서 사용자 정의 글꼴을 사용하는 방법
학습 내용
커스텀 글꼴을 사용해 가입 양식을 디자인하여 고객이 강력한 브랜드 아이덴티티를 경험하고 사이트의 나머지 부분과 일관성을 유지하는 방법을 알아보세요.
목표한 행동을 끝까지 완료하도록 유도하려면, 보기 좋게 디자인된 가입 양식을 만드는 것이 매우 중요해요. 브랜드에서 가입 양식 편집기에서 기본으로 제공되지 않는 글꼴을 사용한다면, 이러한 사용자 지정 글꼴을 추가하면 양식이 사이트의 다른 부분과 조화롭게 보이도록 만드는 쉬운 방법이에요. 글꼴을 추가한 다음에는, 원하는 대로 글꼴을 사용해 가입 양식을 맞춤 설정할 수 있어요.
주요 용어
- 사용자 정의 글꼴
Klaviyo 편집기에서 기본적으로 제공되지 않는 모든 글꼴입니다. 여기에는 다음이 포함됩니다.- Google 글꼴
- Adobe 글꼴
- 가져온 글꼴
- 웹 안전 글꼴
대부분의 기기에 로컬로 저장되므로 외부 소스에서 로드하여 표시할 필요가 없는 글꼴입니다. - 대체 글꼴
페이지에서 기본 글꼴을 로드할 수 없는 경우 사용되는 웹 안전 글꼴입니다.
계정에 맞춤 글꼴 추가하기
왼쪽의 기본 메뉴에서 콘텐츠 > 이미지 및 브랜드로 이동해 주세요. 그런 다음 글꼴 탭을 클릭해 주세요. Google 글꼴, Adobe 글꼴 또는 가져온 글꼴을 추가할 수 있어요.
사이트에서 이미 사용 중인 사용자 지정 글꼴을 Klaviyo에 추가하는 경우, 현재 사이트에서 사용하는 정확한 글꼴 스타일(예: light, bold 또는 italic)과 굵기(예: 400)를 업로드하세요. 글꼴을 업로드하고 약간 다른 스타일 또는 굵기를 선택하면, Klaviyo에서 선택한 스타일이 사이트의 기존 글꼴 스타일 일부를 덮어쓸 수 있어요.
Google 글꼴 추가
Google 글꼴을 추가하는 방법:
- 계정에 이미 로드한 글꼴을 제외한 사용 가능한 모든 Google 글꼴 목록을 보려면 글꼴 이름 드롭다운을 선택하세요.
- 원하는 글꼴을 선택하세요. 선택하면 드롭다운 아래에서 글꼴 미리보기와 함께 가능한 같은 이메일의 다른 버전 수(예: 볼드, 이탤릭 등)도 확인할 수 있어요.
- 1개 이상의 같은 이메일의 다른 버전을 추가하려면 가능한 같은 이메일의 다른 버전 수 옆의 화살표를 클릭한 다음 추가할 글꼴을 선택해 주세요.
- 대체 글꼴을 선택하세요.
- 글꼴 추가를 클릭합니다. 추가한 글꼴이 이제 페이지 하단의 내 글꼴 섹션에 표시됩니다.
Your Fonts 섹션에서 계정에 추가한 글꼴을 확인할 수 있어요. 이 섹션에서 글꼴을 편집하거나 삭제하려면 해당 글꼴의 점 3개를 선택하세요.
Google 글꼴을 사용하기로 선택하는 경우, GDPR의 목적상 Google 글꼴은 Google에서 호스팅된다는 점을 참고해 주세요. 글꼴 라이브러리에 Google 글꼴을 포함하면 Google 글꼴을 사용하게 됩니다. Klaviyo는 가입 양식 템플릿에서 사용하는 다양한 사용자 정의 글꼴을 제공하며, 쉽게 가져와 사용할 수 있어요. Klaviyo 호스팅 글꼴 목록 보기.
Adobe 글꼴 추가하기
Adobe 글꼴을 사용하려면 Adobe 계정이 있어야 해요.
Adobe 글꼴을 추가하는 방법:
- Adobe Fonts로 이동합니다.
- Adobe 글꼴 링크를 검색한 다음 글꼴을 선택하세요.
- 글꼴 이름 옆에서 코드 아이콘을 클릭하세요.
- 필요하면 새 프로젝트 이름을 입력한 다음 저장을 클릭합니다.
- 다음 모달에서 추가하려는 글꼴의 https://use.typekit.net URL을 복사하세요. 복사할 때 URL에 .css를 포함하지 마세요. 복사할 때 URL의 일부로 표시됩니다.
- Klaviyo로 다시 이동한 다음 URL을 CSS 주소 필드에 붙여넣어 주세요.
- 계속을 선택한 다음 업로드하려는 글꼴에 사용할 대체 글꼴을 선택해 주세요. 계정에서 글꼴을 이미 사용할 수 있는 경우, 글꼴 옆에 녹색 체크 표시가 나타나고 기존 대체 글꼴이 표시돼요.
- 글꼴 추가를 선택하세요.
글꼴을 추가하면 페이지 하단의 내 글꼴 섹션에 목록으로 표시됩니다. 이 섹션에서 글꼴을 편집하려면 글꼴의 점 3개를 선택하세요.
가져온 글꼴 추가
타사에서 호스팅되지 않는 맞춤 글꼴을 구매하거나 다운로드한 경우에도 Klaviyo 양식에서 사용할 수 있어요. 먼저, Klaviyo에서 액세스할 수 있는 위치(예: 사이트 자산 또는 글꼴 호스팅 플랫폼)에 글꼴 파일을 호스팅 하세요. 수신자의 기기에서 글꼴에 액세스할 수 있도록 Access-Control-Allow-Origin header을(를) *(으)로 설정해 출처 간 리소스 공유(CORS) 사용을 활성화해 주세요.
가져온 글꼴을 추가하려면:
- 글꼴 이름을 지정해 주세요.
- 글꼴 두께, 스타일 및 소스 URL을 지정하세요. 소스 URL은 WOFF, WOFF2, TTF, EOT 또는 SVG로 끝나는 유효한 URL이어야 해요.
- 선택 사항: 추가 같은 이메일의 다른 버전을 추가하려면 글꼴 같은 이메일의 다른 버전 추가를 선택한 다음, 이 같은 이메일의 다른 버전에 대해 2단계를 반복하세요.
- 글꼴 추가 를 선택해 이 글꼴을 내 글꼴 섹션에 추가해 주세요.
내 글꼴에서 계정에 가져온 글꼴을 확인할 수 있어요. 글꼴에서 점 3개를 선택하면 글꼴을 삭제하거나 편집할 수도 있어요.
글꼴 편집
기존 맞춤 글꼴을 편집하려면:
- 콘텐츠 > 이미지 및 브랜드 > 글꼴로 이동합니다.
- 페이지 하단의 내 글꼴 섹션에서 편집하려는 글꼴을 찾습니다.
- 해당 글꼴의 카드에서 오른쪽 상단에 있는 점 3개 아이콘을 클릭하세요.
- 편집을 선택해 주세요. 여기에서 다음을 할 수 있어요:
- 모든 사용자 지정 글꼴에 대한 대체 글꼴을 편집하세요.
- Google 및 Klaviyo에서 호스팅하는 글꼴에만 해당되는 내용으로, 글꼴 같은 이메일의 다른 버전 수를 선택해 목록을 확장한 다음 추가할 글꼴을 선택하여 선택한 같은 이메일의 다른 버전을 편집하거나 추가해 주세요.
같은 이메일의 다른 버전은 Typekit 링크에 내장되어 있으므로 업로드한 후에는 Adobe 글꼴에 같은 이메일의 다른 버전을 추가할 수 없어요. Adobe 글꼴에 같은 이메일의 다른 버전을 추가하려면 기존 글꼴을 삭제한 다음, 포함하려는 모든 같은 이메일의 다른 버전이 들어 있는 다른 Typekit 링크를 사용해 다시 추가해야 해요.
- 글꼴 편집을 마쳤으면 글꼴 업데이트를 선택하세요.
글꼴 삭제
글꼴을 삭제하려면:
- 내 글꼴 섹션으로 이동하세요.
- 삭제하려는 글꼴에서 점 3개를 클릭한 다음 삭제를 선택하세요. 글꼴을 삭제하도록 선택하면 모달이 표시되어, 해당 글꼴이 어떤 양식에서든 사용 중인 경우 추가한 글꼴을 삭제한 후 대체 글꼴이 표시된다는 점을 알려줘요.
- 삭제를 선택해 주세요.
사용자 정의 글꼴이 삭제되면 현재 사용자 정의 글꼴을 사용하는 Klaviyo의 모든 양식은 즉시 대체 글꼴로 되돌아갑니다. 글꼴을 다시 추가하면 해당 양식에서 해당 글꼴을 다시 사용하기 시작합니다.
가입 양식 빌더에서 사용자 정의 글꼴 사용하기
가입 양식에서 맞춤 글꼴을 사용하려면 양식 미리보기에서 텍스트를 편집하기만 하면 돼요:
- 가입 양식 탭으로 이동합니다.
- 편집하려는 양식을 찾은 다음, 옆의 점 3개를 클릭하고 양식 편집을 선택하세요.
- 양식 미리보기에서 편집할 텍스트를 선택하세요.
- 오른쪽의 Text 메뉴에서 텍스트를 하이라이트하세요.
- 상단의 글꼴 드롭다운에서 사용자 지정 글꼴을 선택하세요. 계정의 Your Fonts 섹션에 있는 글꼴은 목록 상단에 표시됩니다.
편집하는 동안 사용자 지정 글꼴은 캔버스(예: 편집 미리 보기)에는 표시되지만 왼쪽 패널에는 표시되지 않아요. 왼쪽 패널에는 사용자 지정 글꼴 대신 대체 글꼴이 표시돼요.
- 변경 사항이 만족스러우면 게시를 클릭해 적용하세요.
Klaviyo.js의 영향을 받는 사이트 글꼴
Klaviyo 활성 사이트 트래킹 (Klaviyo.js)은 웹사이트에 Klaviyo 가입 양식을 게시하려면 수동으로 설치하거나 전자상거래 연동을 통해 설치해야 합니다. 일부 글꼴 변형만 로드했다면 Klaviyo.js는 사이트에 삽입될 때 라이브러리에 남은 변형을 로드합니다. 이 때문에 이 과정에서 사이트 헤더의 가중치가 변경되는 등 사이트의 글꼴이 약간 편집될 수 있습니다.
Klaviyo.js에 의해 글꼴이 변경된 경우 이를 해결하는 두 가지 옵션이 있습니다. 다음 중 하나를 선택할 수 있습니다.
- Klaviyo 글꼴 라이브러리에서 관련 글꼴을 삭제하세요.
- Klaviyo.js가 추가 같은 이메일의 다른 버전을 로드할 때 덮어쓰지 않도록 사이트 헤더의 CSS를 업데이트하세요.
이 옵션을 사용하려면 CSS에 대한 심층적인 지식이 필요하므로 개발자의 도움이 필요할 수 있습니다. Klaviyo는 사이트의 CSS 조정을 직접 지원해 드릴 수는 없지만, 방대한 파트너 네트워크를 보유하고 있습니다.
추가 자료
- How to host a custom font on your site
Learn how to upload a font, meaning a font that is not hosted by Google or Adobe, to your ecommerce site to import in your Klaviyo sign-up forms. If you want to use an imported font in your sign-up form, there are 2 options:
- Creating an effective acquisition strategy using sign-up forms