이메일의 글꼴 이해하기

학습 내용

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

글꼴 작동 방식

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

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

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

시스템 글꼴 정보

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

웹 글꼴 정보

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

대체 글꼴 정보

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

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

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

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

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

다음 이메일 클라이언트는 웹(사용자 지정) 글꼴을 지원해요:

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

가장 큰 이메일 클라이언트 중 하나인 Gmail은 일반적으로 웹 폰트를 지원하지 않는다는 점에 유의하세요. 하지만 예외가 하나 있어요. Gmail은 Roboto를 지원해요.

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

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

• 콘텐츠 > 이미지 및 브랜드 > 브랜드 자산
• 이메일의 스타일 탭
• 텍스트가 포함된 모든 이메일 블록의 스타일 섹션
• 가입 양식 편집기의 스타일 탭

사용자 지정 글꼴 사용 팁

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

대체 글꼴 사용

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

이미지에서 텍스트 사용

이미지만으로 구성된 이메일은 전송 가능성에 부정적인 영향을 줄 수 있지만, 이미지 안의 텍스트와 텍스트 블록의 텍스트를 전략적으로 조합하면 브랜드에 맞는 이메일을 만들 수 있어요. 제목과 행동 촉구(CTA)에 사용할 맞춤 브랜드 글꼴을 선택하고, 본문 텍스트에는 웹 안전 글꼴을 함께 사용하세요.

선택한 텍스트에는 브랜드 글꼴이 포함된 이미지를 사용하고, 이메일에 이미지를 추가할 때 대체 텍스트를 추가 해 주세요. 그런 다음 이메일의 나머지 텍스트에는 웹 안전 글꼴을 적용해 주세요. 그러면 사이트와 일치하는 브랜드 이메일을 만들면서도 구독자의 받은편지함에서 접근성을 유지할 수 있어요.

충분히 테스트해 주세요

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