이메일의 글꼴 이해하기

학습 내용

온라인에서 글꼴을 사용할 때의 기회와 제한 사항, 그리고 브랜드에 맞는 이메일을 보내는 방법을 알아보세요.

글꼴 작동 방식

글꼴은 텍스트를 표현하는 방식이며, 인쇄 매체나 온라인 미디어에서 사용할 수 있어요. Arial이나 Times New Roman 같은 더 흔한 글꼴은 익숙할 수 있지만, 브랜드를 전달하고 표현하는 데 사용할 수 있는 다른 글꼴도 수천 가지가 있어요.

온라인 미디어(웹사이트 또는 이메일 등)에서는 글꼴 옵션이 거의 무한해요. 하지만 다른 사람과 제작물을 공유하면 모든 기기에서 동일한 글꼴에 접근할 수 있는 것은 아니기 때문에 정확히 똑같이 보이지 않을 수 있어요.

기기에서 글꼴에 액세스하고 사용하는 주요 방법은 2가지예요. 시스템 글꼴 (즉, 사용 중인 기기에 저장된 글꼴)과 웹 글꼴 (즉, 외부 서버에서 로드되는 글꼴)입니다.

시스템 글꼴 정보

컴퓨터와 휴대폰에는 다양한 글꼴이 기본으로 사전 설치되어 있어요. 일반적으로 설치되는 글꼴(예: 대부분의 기기에는 Georgia와 Verdana가 포함됨)도 있지만, 기본 포함 글꼴은 기기마다 크게 다를 수 있어요. 대부분의 기기에서 사용할 수 있는 글꼴을 “웹 안전” 글꼴이라고 해요.

웹 글꼴 정보

웹 안전 폰트와 달리 웹 폰트는 보고 있는 콘텐츠와 동시에 외부 서버에서 로드돼요. 맞춤 글꼴은 일반적으로 웹 폰트예요. 웹 폰트를 사용하는 경우, 특정 기기에서 웹 폰트를 로드하지 못할 때를 대비해 웹 안전 대체 글꼴도 함께 설정해 두는 것이 좋아요.

대체 글꼴 정보

온라인에서 웹페이지든 이메일이든 무엇이든 볼 때, 기기에서 어떤 글꼴을 표시할지 알려 주는 CSS(온라인에서 콘텐츠의 스타일을 지정하는 데 사용되는 코드)가 보이지 않는 곳에서 작동하고 있어요. 기기에서 해당 글꼴에 접근할 수 없으면 CSS에서 “대체 글꼴”(기본 글꼴을 사용할 수 없을 때를 대비해 웹사이트 또는 이메일 메시지를 만든 사람이 선택한 글꼴)을 확인해요. 대체 글꼴은 대부분의 기기에서 사용할 수 있는 웹 세이프 글꼴 이어야 해요. 맞춤/웹 글꼴을 지원하지 않는 기기에서 누군가 메시지를 볼 때, 메시지가 표시되는 방식을 더 잘 제어할 수 있어요.

대체 글꼴을 사용할 수 없거나 대체 글꼴이 사용 중인 기기에서 지원되지 않으면, 기기는 Arial 또는 Times New Roman 같은 기본 글꼴을 사용해요. 기본 글꼴은 기기와 앱에 따라 크게 달라요.

이메일에서 글꼴이 작동하는 방식

일부 이메일 클라이언트는 웹 폰트를 지원하지만, 다른 클라이언트는 지원하지 않아요. 웹 폰트를 지원하지 않는 받은편지함이나 기기에서 이메일을 열면, 대신 기본 글꼴이 표시돼요. 대체 글꼴을 설정하여 백업으로 사용되는 시스템 글꼴을 제어할 수 있어요.

웹 폰트를 지원하는 기기에서 이메일을 열면 이메일의 CSS에 제공된 URL에서 폰트를 로드해요. 기기에서 해당 폰트에 액세스할 수 있으면 표시되고, 그렇지 않으면 대체 폰트로 넘어가요.

웹 폰트 지원 여부는 이메일 앱, 해당 버전, 그리고 이메일 계정 유형에 따라 달라져요. 웹 폰트를 지원하는 클라이언트 예시는 다음과 같아요:

• Apple Mail
• iOS Mail(iOS의 기본 이메일 앱)
• 일부 Android 이메일 앱(앱별로 지원 여부가 다르며, Android 2.3은 Google 및 Adobe 글꼴에서 사용하는 @import 메서드를 지원하지 않음)
• Outlook.com 또는 Hotmail 같은 Microsoft 이메일 주소를 사용하는 경우를 제외한 Android의 Samsung Email
• Outlook for Mac 2011 및 2016, Outlook for Mac 16.80은 웹 글꼴을 지원하지 않아요.

Android의 Gmail 앱을 포함한 Gmail은 일반적으로 웹 폰트를 지원하지 않아요. Gmail은 자체 스타일에 Roboto와 Google Sans를 포함하고 있기 때문에 Gmail의 데스크톱 웹메일에서는 이 폰트가 표시될 수 있어요. 그렇다고 해서 Gmail이 이메일에서 다른 맞춤 글꼴을 불러올 수 있다는 뜻은 아니에요. 대체 글꼴을 설정하고, 수신자가 사용하는 Gmail 앱에서 이메일을 테스트해 보세요.

이메일 앱 및 버전별 자세한 내용은 Can I email의 웹 폰트 지원 표를 확인해 주세요.

이메일에서 글꼴 최적화하기

이메일이 기기 전반에서 일관되게 보이도록 하는 가장 좋은 방법은 웹 안전 글꼴을 사용하는 거예요. Klaviyo의 기본 글꼴은 일반적으로 웹 안전 글꼴이에요. Klaviyo에서 제공하는 글꼴은 다음에서 확인할 수 있어요.

• Content > Media & brand > Brand: Fonts를 선택해 주세요. 대신 Style이 표시되면, Fonts 섹션을 찾을 수 있도록 이를 선택해 주세요.
• 이메일 템플릿 편집기의 스타일 편집 패널
• 텍스트 블록에서 텍스트를 편집할 때 표시되는 텍스트 서식 지정 도구 모음 또는 텍스트가 포함된 다른 블록의 글꼴 컨트롤
• 가입 양식 편집기에서 스타일 편집 패널

사용자 지정 글꼴 사용 팁

사용자 지정 글꼴을 사용하려면 아래 팁을 활용해 기기 전반에서 이메일이 잘 디자인되어 보이도록 하세요.

대체 글꼴 사용

사용자 지정 글꼴과 최대한 비슷한 웹 안전 대체 글꼴을 선택하세요. 사용자 지정 글꼴을 구성할 때 Klaviyo의 기본 글꼴에서 대체 글꼴을 선택할 수 있어요.

이미지에서 텍스트 사용

이미지로만 구성된 이메일은 전송 가능성에 악영향을 줄 수 있지만, 이미지 내 텍스트와 텍스트 블록의 텍스트를 전략적으로 조합하면 브랜드에 맞는 이메일을 만들 수 있어요. 제목과 행동 촉구(CTAs)에는 맞춤형 브랜드 글꼴을 선택하고, 본문 텍스트에는 웹 안전 글꼴을 함께 사용해 주세요. 이미지가 로드되지 않더라도 수신자가 사용할 수 있도록, 필수 정보와 주요 CTA도 텍스트 또는 버튼 블록에 넣어 두세요.

선택한 텍스트에는 브랜드 폰트가 포함된 이미지를 사용하고, 이메일에 이미지를 추가할 때 대체 텍스트를 추가 하는 것도 잊지 마세요. 그런 다음, 이메일의 나머지 텍스트에는 웹 안전 폰트를 적용하세요. 이렇게 하면 이미지가 로드되지 않을 때도 이메일의 나머지 부분은 읽기 쉽게 유지하면서 브랜드 폰트를 사용할 수 있어요.

충분히 테스트해 주세요

어떤 방법을 선택하든, 특히 새 디자인을 사용할 때는 이메일을 철저히 테스트해 주세요. 여러 기기에서 자신에게 이메일을 보내 각 기기에서 어떻게 표시되는지 확인해 보고 만족하는지 확인해 주세요. Litmus 또는 Email on Acid 같은 이메일 테스트 프로그램을 활용해 더 다양한 기기에서 테스트할 수도 있어요.

추가 자료