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

학습 내용

이메일이 브랜드 스타일에 어울리도록 Klaviyo 이메일 템플릿 편집기에 새 글꼴을 추가하는 방법을 알아보세요. 이 문서에서는 사용자 정의 글꼴을 사용할 때의 장단점과, 다양한 받은 편지함에서 가장 폭넓게 지원되는 글꼴을 선택하는 방법도 알아볼 수 있어요.

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

This content requires Functional cookies to be enabled.

Update Cookie Settings

주요 용어

• 사용자 정의 글꼴
  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 Fonts, Adobe Fonts 또는 글꼴 가져오기를 선택해 주세요.
4. 아래 섹션에 나와 있는 글꼴 유형(Google, Adobe 또는 가져온 글꼴)에 대한 지침을 따릅니다.

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

This content requires Functional cookies to be enabled.

Update Cookie Settings

사용자 지정 글꼴 관리

브랜드 아래의 콘텐츠 > 미디어 및 브랜드에서 커스텀 글꼴을 편집하거나 삭제할 수 있어요.

기존 글꼴 업데이트

이미 추가한 사용자 정의 Google 글꼴 또는 가져온 글꼴에 대한 추가 같은 이메일의 다른 버전을 선택하려면 다음과 같이 하세요:

1. Klaviyo에서 콘텐츠 > 미디어 및 브랜드로 이동합니다.
2. 브랜드 탭을 연 다음 글꼴을 선택해 주세요. 브랜드 탭에 대신 스타일이 표시되면, 해당 탭을 열고 글꼴 섹션을 찾아보세요.
3. 글꼴 섹션에서 편집하려는 글꼴을 찾으세요.
4. 글꼴 옆의 점 3개 메뉴를 클릭해 주세요.
5. 표시되는 메뉴에서 편집을 클릭합니다.
6. Google 글꼴의 경우 같은 이메일의 다른 버전을 열고 사용하려는 추가 버전을 선택해 주세요.
7. 가져온 글꼴의 경우 글꼴 같은 이메일의 다른 버전 추가를 클릭한 다음 소스 URL을 입력하고 글꼴 굵기와 글꼴 스타일을 선택해 주세요. 추가하려는 각 같은 이메일의 다른 버전에 대해 이 과정을 반복해 주세요.
8. 저장을 클릭합니다.

Klaviyo에서는 Adobe 글꼴에 같은 이메일의 다른 버전을 추가할 수 없어요. 같은 이메일의 다른 버전은 Typekit 링크에서 가져오기 때문이에요. Klaviyo에서 대체 글꼴을 편집할 수 있어요.

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

글꼴 삭제

사용자 지정 글꼴을 삭제하면 다른 템플릿과 가입 양식을 포함해 해당 글꼴을 사용하는 콘텐츠에 영향을 줘요. 사용자 지정 글꼴을 더 이상 사용할 수 없으면 해당 콘텐츠는 대체 글꼴을 사용해요. 동일한 글꼴 패밀리와 같은 이메일의 다른 버전을 다시 추가하면, 여전히 해당 글꼴을 사용하는 콘텐츠에서 다시 사용할 수 있어요.

1. Klaviyo에서 콘텐츠 > 미디어 및 브랜드로 이동합니다.
2. 브랜드 탭을 연 다음 글꼴을 선택해 주세요. 브랜드 탭에 대신 스타일이 표시되면, 해당 탭을 열고 글꼴 섹션을 찾아보세요.
3. 글꼴 섹션에서 삭제하려는 글꼴을 찾으세요.
4. 글꼴 옆의 점 3개 메뉴를 클릭해 주세요.
5. 표시되는 메뉴에서 삭제를 클릭해 주세요.
6. 확인 대화상자에서 삭제를 다시 클릭해 주세요.

Google 글꼴 추가

Google 글꼴을 추가하는 방법:

1. 글꼴 이름을 열고 원하는 Google 글꼴을 검색한 다음 선택해 주세요.
2. 굵게 또는 기울임꼴 같은 같은 이메일의 다른 버전을 추가하려면 # 사용 가능한 글꼴 같은 이메일의 다른 버전을(를) 펼친 다음, 사용할 같은 이메일의 다른 버전을 선택해 주세요.
3. 대체 글꼴을 선택하세요.
4. 글꼴 추가를 클릭합니다.

Adobe 글꼴 추가

Adobe 글꼴은 Adobe Fonts를 구독 중인 사용자만 사용할 수 있습니다. Adobe 글꼴을 추가하는 방법:

1. 아직 선택되어 있지 않다면 글꼴 추가 대화상자에서 Adobe Fonts를 선택해 주세요.
2. Adobe 웹 프로젝트의 URL을 CSS Address에 붙여넣어 주세요. https://use.typekit.net/abcdefg.css 형식을 사용해 주세요.
3. 프로젝트에서 글꼴을 로드하려면 계속을 클릭하세요.
4. 아직 추가되지 않은 각 글꼴에 사용할 대체 글꼴을 선택해 주세요.
5. 글꼴 추가를 클릭합니다.

가져온 글꼴 추가

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

가져온 글꼴을 사용하는 방법:

1. 서버에서, 또는 글꼴 호스팅 서비스를 사용하여 글꼴을 호스팅합니다. 수신자가 받은 편지함에서 글꼴에 액세스할 수 있게 하려면 Access-Control-Allow-Origin 헤더를 *로 설정하여 출처 간 리소스 공유(CORS) 사용을 활성화해야 합니다. CORS에 대해 자세히 알아보세요.
2. 글꼴을 호스팅한 후 글꼴 추가 대화 상자에서 글꼴 가져오기를 열고 글꼴 파일의 직접 URL을 소스 주소에 붙여 넣어 주세요. URL은 .woff, .woff2, .ttf 또는 .eot 파일을 가리켜야 해요.
3. 해당 필드에 글꼴의 이름, 굵기, 스타일을 추가합니다.
4. 같은 이메일의 다른 버전을 하나 더 추가하려면 글꼴 버전 추가를 클릭한 다음 소스 주소, 굵기 및 스타일을 입력해 주세요. 각 같은 이메일의 다른 버전마다 다른 글꼴 파일 URL과 굵기/스타일 조합을 사용해 주세요.
5. 대체 글꼴을 선택하세요.
6. 글꼴 추가를 클릭합니다.

대체 글꼴 정보

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

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

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

사용자 정의 글꼴 적용하기

사용자 지정 글꼴을 설정한 후에는 다음을 포함해 템플릿 내 모든 텍스트에 적용할 수 있어요:

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

텍스트 블록에 사용자 정의 글꼴을 적용하려면 다음과 같이 하세요.

1. 글꼴을 적용하려는 텍스트가 포함된 텍스트 블록을 선택합니다.
2. 글꼴을 적용하려는 특정 텍스트를 강조 표시합니다.
3. 드롭다운에서 사용자 정의 글꼴을 선택합니다.

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

표 및 분할 블록의 경우, 이메일 캔버스에서 텍스트를 선택해 편집하고 사용자 지정 글꼴을 적용해 주세요.

사용자 정의 글꼴 미리보기

템플릿이 준비되면 미리 보기를 클릭하고, 미리 보기 사이드바에 이메일 주소를 입력한 다음 테스트 보내기를 클릭해 주세요. 다양한 기기에서 메시지를 열어 여러 수신자에게 어떻게 표시되는지 확인해 보세요. 또한 Email on Acid와 같은 도구를 사용하여 더 다양한 기기에서 미리 볼 수도 있습니다.

추가 자료

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