이메일 템플릿에 사용자 정의 글꼴을 추가하는 방법

학습 내용

이메일이 브랜드 스타일에 어울리도록 Klaviyo 이메일 템플릿 편집기에 새 글꼴을 추가하는 방법을 알아보세요. 이 문서에서는 사용자 정의 글꼴을 사용했을 때의 장단점과, 여러 유형의 받은 편지함에서 다양하게 지원하는 글꼴을 선택하는 방법도 안내합니다. 

이메일에 Google 글꼴, Adobe Typekit 또는 가져온(즉, 자체 호스팅한) 글꼴을 사용할 수 있습니다. 그러나 특정 이메일 받은 편지함만 사용자 지정 글꼴을 지원하며, 많은 인기 클라이언트(예: Gmail 및 Yahoo)는 지원하지 않는다는 점에 유의하세요. 

주요 용어

• 사용자 정의 글꼴
  Klaviyo 편집기에서 기본적으로 제공되지 않는 모든 글꼴 
• 웹 글꼴
  외부 소스에서 로드해야 하는 사용자 정의 글꼴 
• 웹 안전 글꼴
  대부분의 기기에 로컬로 저장되므로 외부 소스에서 로드하여 표시할 필요가 없는 글꼴 
• 대체 글꼴
  사용자 정의 글꼴을 지원하지 않는 받은 편지함에서 사용되는 웹 안전 글꼴

사용자 정의 글꼴 지원 및 제한 사항

사용자 정의 글꼴은 이메일 콘텐츠와 전자상거래 사이트를 일치시켜 마케팅 일관성을 유지하는 데 도움이 됩니다. 하지만 웹 글꼴(즉, 기기의 저장소에서 사용할 수 있는 글꼴이 아닌 외부 소스에서 로드한 글꼴)은 모든 디바이스나 이메일 클라이언트에서 예상대로 렌더링되지 않을 수 있습니다. Klaviyo의 기본 글꼴은 대부분의 컴퓨터 및 기기에 사전 설치되어 있으므로 모든 구독자에게 일관성 있는 경험을 제공할 수 있습니다. 

웹 글꼴을 지원하는 이메일 클라이언트에는 다음이 포함됩니다.

• Apple Mail
• iOS Mail(iOS의 기본 이메일 브라우저)
• Google Android(Google 및 Adobe 글꼴에서 사용하는 @import 메서드를 지원하지 않는 Android 2.3 제외)
• Samsung Mail(Android 8.0)
• Mac용 Outlook

Gmail 및 지원되지 않는 기타 받은 편지함의 사용자 정의 글꼴

Gmail(또는 사용자 정의 글꼴을 지원하지 않는 기타 받은 편지함)을 사용하는 수신자에게는 선택한 사용자 정의 글꼴 대신, 이메일 템플릿에서 설정할 수 있는 대체 글꼴이 표시될 수 있습니다. 이를 방지하려면 웹 글꼴 지원 여부와 관계없이 대부분의 기기에서 사용할 수 있는 웹 안전 사용자 정의 글꼴을 선택하는 것이 좋습니다. 

여기에서 기기별 지원 사항과 함께 웹 안전 글꼴을 찾아보세요. 

이메일 템플릿 편집기에 새 사용자 정의 글꼴 추가하기 

이메일 템플릿에 사용자 정의 글꼴을 추가하는 방법은 다음과 같습니다. 

1. 템플릿에서 텍스트 블록을 열거나 템플릿의 스타일 탭을 엽니다.
2. 글꼴 드롭다운에서 글꼴 목록의 맨 아래로 스크롤하여 글꼴 추가를 클릭합니다.
3. 표시되는 모달에서 글꼴의 출처에 따라 Google 글꼴, Adobe 글꼴 또는 글꼴 가져오기를 선택합니다.
4. 아래 섹션에 나와 있는 글꼴 유형(Google, Adobe 또는 업로드한 글꼴)에 대한 지침을 따릅니다.

이메일 템플릿에 글꼴을 추가해 두면 가입 양식뿐만 아니라 다른 모든 템플릿에도 사용할 수 있습니다.

기존 사용자 정의 글꼴에 글꼴 변형 추가하기

브랜드 라이브러리 > 글꼴에서 언제든지 사용자 정의 글꼴에 대해 선택한 변형을 편집, 삭제 또는 업데이트할 수 있습니다.

기존 글꼴 업데이트

이미 추가한 사용자 정의 Google 글꼴 또는 가져온 글꼴에 대한 추가 변형을 선택하려면 다음과 같이 합니다. 

1. Klaviyo에서 콘텐츠 > 이미지 및 브랜드로 이동합니다.
2. 글꼴을 클릭합니다.
3. 내 글꼴 아래에서 편집하려는 글꼴을 찾습니다. 
4. 해당 글꼴의 카드에서 오른쪽 상단에 있는 점 3개 아이콘을 클릭합니다.
5. 표시되는 메뉴에서 편집을 클릭합니다. 
6. 선택한 글꼴 변형 수를 클릭하여 글꼴 변형 목록을 확장합니다. 
7. 추가하려는 글꼴 변형을 선택합니다.
8. 글꼴 업데이트를 클릭합니다.

변형은 Typekit 링크에 내장되어 있으므로 업로드한 후에는 Adobe 글꼴에 변형을 추가할 수 없습니다.   

"이 글꼴 이름이 이미 존재합니다"라는 오류 메시지가 표시되면 다시 추가하지 말고 위의 단계에 따라 기존 버전의 글꼴을 편집하세요. 

글꼴 삭제

1. Klaviyo에서 콘텐츠 > 이미지 및 브랜드로 이동합니다.
2. 글꼴을 클릭합니다.
3. 내 글꼴 아래에서 편집하려는 글꼴을 찾습니다. 
4. 해당 글꼴의 카드에서 오른쪽 상단에 있는 점 3개 아이콘을 클릭합니다.
5. 표시되는 메뉴에서 삭제를 클릭합니다. 

현재 사용자 정의 글꼴을 사용하는 Klaviyo의 모든 메시지는 즉시 대체 글꼴로 되돌아갑니다. 글꼴을 다시 추가하면 해당 이메일에서 해당 글꼴을 다시 사용하기 시작합니다. 

Google 글꼴

Google Font를 추가하려면 사용하려는 Google 글꼴의 이름을 입력하기만 하면 됩니다. 대체 글꼴을 선택한 다음 글꼴 추가를 클릭합니다. 

Adobe 글꼴

Adobe 글꼴은 Adobe Fonts를 구독 중인 사용자만 사용할 수 있습니다. Adobe 글꼴을 추가하려면 Adobe Font를 클릭하고 CSS 주소에 붙여 넣습니다. 주소는 https://use.typekit.com/123ABC와 같은 형식을 따라야 합니다.

대체 글꼴을 선택한 다음 글꼴 추가를 클릭합니다. 

가져온 글꼴

가져온 글꼴(자체 호스팅 글꼴)은 개발자에게 액세스 권한을 부여한 발신자의 경우에만 사용하는 것이 좋습니다. 글꼴 파일을 Klaviyo에 직접 업로드할 수 없습니다. 개발자 팀에 액세스할 수 없는 경우, 원하는 글꼴과 유사한 Google 또는 Adobe 글꼴을 찾는 것이 좋습니다. 

가져온 글꼴을 사용하려면 먼저 서버에서, 또는 글꼴 호스팅 서비스를 사용하여 글꼴을 호스팅해야 합니다. 수신자의 받은 편지함에서 글꼴에 액세스할 수 있도록 액세스 제어-허용-오리진 헤더를 *로 설정하여 CORS(출처 간 리소스 공유) 사용을 활성화해야 합니다. CORS에 대해 자세히 알아보세요. 

글꼴을 성공적으로 호스팅했으면 글꼴 추가 모달에서 글꼴 가져오기를 클릭하고 소스 주소 필드에 호스팅 URL을 붙여 넣습니다. 해당 필드에 글꼴의 이름, 굵기, 스타일을 추가합니다. 

마지막으로 대체 글꼴을 선택하고 글꼴 추가를 클릭합니다. 

대체 글꼴 정보

모든 유형의 사용자 정의 글꼴을 사용하는 경우 대체 글꼴을 선택해야 합니다. 이 글꼴은 사용자 지정 글꼴을 지원하지 않는 클라이언트를 사용하는 수신자에게 표시됩니다. 사용 가능한 옵션 목록에서 사용자 정의 글꼴과 스타일이 비슷한 글꼴을 선택합니다. 

예를 들어, 사용자 정의 글꼴로 Poppins(Google 글꼴)를 사용하고 대체 글꼴로 Arial을 사용하는 경우 이메일 수신자에게는 다음과 같은 글꼴이 표시됩니다: 

• 웹 글꼴을 지원하는 브라우저(예: Apple Mail, iOS Mail)에서 이메일을 여는 수신자에게는 Poppins 글꼴이 표시됩니다. 
• 웹 글꼴을 지원하지 않는 브라우저(예: Gmail)에서 이메일을 여는 수신자에게는 Arial 글꼴이 표시됩니다.

사용자 정의 글꼴 적용하기

사용자 정의 글꼴을 설정한 후에는 다음과 같은 템플릿 내 모든 텍스트에 적용할 수 있습니다. 

• 기본 템플릿 스타일에 적용 
• 모든 블록의 스타일에 적용 
• 텍스트 블록의 특정 텍스트 조각에 적용 
• 버튼 블록, 제품 블록 및 그 외 텍스트가 포함된 모든 블록 유형에 적용 

텍스트 블록에서 글꼴을 적용하려는 텍스트를 선택한 다음 드롭다운에서 사용자 정의 글꼴을 선택합니다. 

다른 모든 블록 유형 또는 블록 및 템플릿 스타일의 경우 해당 드롭다운에서 글꼴을 선택합니다.

표 블록 및 분할 블록에서는 사용자 지정 글꼴이 캔버스(예: 편집 미리 보기)에는 표시되지만 왼쪽 패널에는 표시되지 않습니다. 왼쪽 패널에 사용자 정의 글꼴 대신 대체 글꼴이 표시됩니다. 

사용자 정의 글꼴 미리보기 

템플릿이 준비되면 미리보기 및 테스트 > 테스트 보내기를 클릭하여 미리보기 이메일을 자신에게 먼저 보냅니다. 다양한 기기에서 메시지를 열어 여러 수신자에게 어떻게 표시되는지 확인해 보세요. Email on Acid와 같은 도구를 사용하여 더 다양한 기기에서 미리 볼 수도 있습니다. 

추가 리소스

• 이메일 템플릿 편집기 가이드
• 이메일의 글꼴 이해하기