Cloudflare Fonts: 웹 사이트 글꼴 개인정보 보호 및 속도 개선

Cloudflare Fonts를 소개하게 되어 기쁩니다! 앞으로 몇 주 안에 Google Fonts를 사용하는 사이트에서는 Google이 아닌 사이트의 자체 도메인에서 글꼴을 손쉽게 로드할 수 있게 됩니다. 버튼 클릭 한 번으로 가능합니다. 이렇게 하면 개인정보 보호와 성능이 모두 향상됩니다. Google의 타사 서버에서 글꼴을 로드할 필요가 없으므로 사용자의 개인정보 보호가 강화됩니다. 최종 사용자에게 글꼴을 더 가까운 곳에서 가져오므로 DNS 조회 및 TLS 연결에 소요되는 시간이 줄어들어 사이트의 성능이 향상됩니다.

현재 Google Fonts를 사용하는 사이트에서는 글꼴을 자체 호스팅하거나 복잡한 코드를 변경할 필요 없이 Cloudflare Fonts 에서 전체 프로세스를 간소화하여 간편하게 이용할 수 있습니다.

Google에서 글꼴을 로드하면 웹 사이트에서는 Google 서버와 데이터 교환을 시작합니다. 즉, 방문자의 브라우저에서 Google에 직접 요청을 전송합니다. 따라서 Google에서는 IP 주소, 사용자 에이전트(브라우저 및 운영 체제에 대한 형식화된 설명), 참조자(Google 글꼴이 표시될 페이지), 각 IP가 Google에 요청하는 빈도 등 다양한 데이터를 축적할 수 있습니다. Google에서는 이러한 데이터를 타깃 광고나 쿠키 설정에 사용하지 않는다고 명시하고 있지만, 최종 사용자의 개인 데이터가 불필요하게 공유되는 것을 방지할 수 있다면 개인정보 보호에 도움이 됩니다.

Cloudflare Fonts를 사용하면 자체 도메인에서 직접 글꼴을 제공합니다. 즉, 과거 일부 개인정보 보호 규제기관에서 문제로 지적한 Google과 같은 타사 도메인으로 글꼴 요청이 전송되지 않습니다. 저희 개인정보 보호 지향 접근 방식은 최종 사용자의 IP 주소 및 기타 데이터가 다른 도메인으로 전송되지 않음을 의미합니다. 이 모든 정보는 고객의 도메인 내에서 회고객의 통제에 따라 유지됩니다. 또한 Cloudflare Fonts를 사용하면 Google과 같은 타사 서버로 데이터가 전송되지 않으므로 고객이 잠재적인 데이터 현지화 요건을 준수하는 능력이 향상됩니다.

이제 Cloudflare Fonts가 개인정보 보호를 개선할 수 있다는 사실을 확인했으니, 동전의 반대편에 있는 Cloudflare Fonts가 성능을 개선하는 방법을 살펴 보겠습니다.

이를 위해서는 먼저 Google 글꼴이 웹 사이트 성능에 어떤 영향을 미치는지 살펴볼 필요가 있습니다. 그런 다음에는 Cloudflare Fonts로 이러한 성능 문제를 해결하고 수정하는 방법을 살펴보겠습니다.

Google 글꼴은 웹 사이트 소유자에게 웹 사이트에서 사용할 수 있는 다양한 로열티 없는 글꼴을 제공하는 환상적인 리소스입니다. 통합하려는 글꼴을 결정하면 매우 쉽게 통합할 수 있습니다. 사이트에 HTML 스니펫을 추가하기만 하면 됩니다. 그런 다음 스타일을 추가하여 페이지의 다양한 부분에 이러한 글꼴을 적용하면 됩니다.

하지만 이 사용 편의성에는 성능 저하가 따릅니다.

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab" rel="stylesheet">
<style>
  body {
    font-family: 'Open Sans', sans-serif;
  }
  h1 {
    font-family: 'Roboto Slab', serif;
  }
</style>

웹 페이지를 로드하면 방문자의 브라우저에서는 HTML이 구문 분석되기 시작하자마자 CSS 파일을 가져옵니다. 그런 다음 브라우저에서 페이지 렌더링이 시작되고 다른 텍스트 섹션에서 글꼴이 필요하다는 것이 식별되면 필요한 글꼴 파일이 요청됩니다.

바로 이 부분에서 성능 문제가 발생합니다. Google Fonts는 두 개의 도메인 시스템을 사용합니다. CSS는 한 도메인(fonts.googleapis.com)에, 글꼴 파일은 다른 도메인(fonts.gstatic.com)에 상주합니다.

이렇게 분리되어 있으므로 각 리소스 요청에 대해 타사 서버로 최소 4번의 왕복이 발생합니다. 이러한 왕복은 DNS 조회, 소켓 연결 설정, TLS 협상(HTTPS의 경우), 실제 리소스 요청을 위한 최종 왕복 등입니다. 결국 Google 서버에서 브라우저로 글꼴을 가져오려면 8번의 왕복이 필요합니다.

사용자는 이를 확인할 수 있습니다. Google 글꼴을 사용하는 경우 네트워크 탭을 열고 이러한 Google 도메인을 필터링할 수 있습니다.

이러한 요청으로 웹 사이트 경험에 추가되는 추가 DNS 요청 및 TLS 연결의 영향을 시각적으로 확인할 수 있습니다. 예를 들어 테마의 일부로 Google Fonts를 기본적으로 사용하는 내 WordPress 사이트에서는 약 150ms가 추가됩니다.

Cloudflare Fonts는 왕복 횟수를 8회에서 1회로 줄임으로써 이 프로세스를 간소화합니다. CSS 또는 글꼴을 제공하는 데 더 이상 타사 서버가 관여하지 않으므로 두 세트의 DNS 조회, 소켓 연결 및 타사에 대한 TLS 협상이 더 이상 필요하지 않습니다. HTML이 호스팅되는 바로 그 도메인에서 직접 글꼴 파일을 제공하기만 하면 됩니다. 이 접근 방식은 글꼴을 다른 페이지 리소스와 동일한HTTP/2 또는 HTTP/3 연결을 통해 전송할 수  있으므로 적절한 우선순위를 지정하고 대역폭 경합을 방지한다는 추가적인 이점이 제공됩니다.

매의 눈을 가진 분이라면 "그래도 왕복 두 번인데, CSS 요청은 어떻게 되나요?"라고 생각할 수 있습니다. Cloudflare Fonts를 사용하면 별도의 CSS 요청이 필요하지 않습니다. 즉, 실제로는 글꼴 자체를 가져오는 왕복 요청이 한 번만 필요합니다.

글꼴 요청의 홈 라우팅과 CSS 요청의 제거를 모두 달성하기 위해 Cloudflare의 전역 네트워크를 통과할 때 저희는 HTML을 다시 작성합니다. CSS 응답이 임베드되고 임베드된 CSS 내에서 글꼴 URL 변환이 수행됩니다.

이러한 변환에서는 글꼴 URL이 HTML 콘텐츠와 동일한 도메인에 맞춰 조정됩니다. 이렇게 수정된 응답은 Cloudflare의 캐싱 인프라를 원활하게 통과하여 자동으로 캐싱되므로 성능이 크게 향상됩니다. 캐시에 누락된 글꼴이 있는 경우, Fontsource와 NPM을 사용하여 이러한 글꼴을 로드하고 Cloudflare 인프라 내에 캐싱합니다. 이 접근 방식은 Google 인프라에 의도치 않게 데이터가 노출되는 것을 방지하여 성능과 데이터 프라이버시가 모두 유지됩니다.

Cloudflare Fonts를 활성화하면 네트워크 탭에서 글꼴 파일이 /cf-fonts 경로의 호스트 이름에서 로드되고 cf-cache-status: HIT에 표시된 것처럼 Cloudflare의 사용자에게 가장 가까운 캐시에서 제공되는 것을 확인할 수 있습니다.

또한 브라우저의 타이밍 섹션에서 호스트 이름에 대한 추가 DNS 조회나 TLS 연결 설정이 더 이상 필요로 하지 않음을 알 수 있습니다. 이는 콘텐츠가 호스트 이름에서 제공되고 브라우저에서 이미 DNS 응답을 캐시했고 TLS 연결이 열려 있기 때문에 발생합니다.

마지막으로 Cloudflare Fonts의 실제 성능 이점을 확인할 수 있습니다. Cloudflare에서는 텍스트를 표시하는 간단한 페이지에서 Cloudflare Fonts를 활성화하기 전에 종합 Google Lighthouse 테스트를 수행했습니다. 페이지에 첫 번째 콘텐츠 요소가 표시되는 데 걸리는 시간을 나타내는 최초 콘텐츠풀 페인트(FCP)는 Google 글꼴 테스트에서 0.9초로 측정되었습니다. Cloudflare Fonts를 활성화한 후 최초 콘텐츠풀 페인트(FCP)가 0.3초로 단축되었고, 전반적인 Lighthouse 성능 점수는 100점 만점에 98점에서 100점 만점으로 향상되었습니다.

Cloudflare Fonts의 성능을 향상시키기 위해서는 Cloudflare의 네트워크를 통해 응답이 스트리밍될 때 초고속으로 HTML을 변경해야 했습니다. 이는 Cloudflare의 최신 기술 중 하나를 활용함으로써 가능해졌습니다.

올해 초, 저희는 HTML 콘텐츠를 동적으로 변경하는 데 중요한 역할을 하는 Cloudflare의 가장 오래된 구성 요소 중 하나를 재작성하는 작업을 완료했습니다. 하지만 이 블로그 게시물에서 설명한 대로, 이전 솔루션을 대체할 새로운 솔루션이 필요했습니다. 바로 Cloudflare의 계속 증가하는 로드에 맞춰 확장할 수 있는 메모리 안전 솔루션이었습니다.

이 새로운 모듈은 ROFL(Response Overseer for FL)로 알려져  있습니다. 이 모듈은 이제 Email Obfuscation, Rocket Loader, HTML Minification 등 스트리밍 시 HTML을 변경해야 하는 다양한 Cloudflare 제품을 지원합니다.

ROFL은 전적으로 Rust에서 개발되었습니다. 이러한 결정은 Rust의 메모리 안전성, 성능, 보안을 고려한 것입니다. Rust의 메모리 안전 기능은 초당 수백만 건에 달하는 엄청난 양의 요청을 처리하는 동안 메모리 유출에 대한 완벽한 보호를 보장하는 데 있어 필수적인 기능입니다. Rust의 컴파일된 특성 덕분에 특정 하드웨어 구성에 맞게 코드를 세밀하게 최적화할 수 있으므로 해석 언어에 비해 인상적인 성능 향상이 제공됩니다.

ROFL을 이용할 수 있어서 Cloudflare Fonts의 개발을 위한 길이 열렸습니다. ROFL의 성능 덕분에 즉석에서 HTML을 다시 작성하고 Google 글꼴 링크를 빠르고 안전하며 효율적으로 수정할 수 있습니다. 이 속도는 HTML 파일 처리로 인해 추가되는 대기 시간을 줄이고 웹 사이트의 성능을 개선하는 데 도움이 됩니다.

Cloudflare Fonts는 10월에 모든 Cloudflare 고객에게 제공될 예정입니다. Google 글꼴을 사용하는 경우 사이트의 개인정보 보호와 속도를 향상할 수  있습니다. 이 기능을 활성화하면 사용자의 개인정보를 보호하면서 웹 사이트의 성능을 원활하게 개선할 수 있습니다.