매일 수백만 개의 이미지를 제공하는 비디오 호스팅 사이트에서 썸네일 생성을 PHP 백엔드에서 Cloudflare Workers로 이전함으로써 오리진 서버의 CPU 부하를 완전히 제거했습니다. 또한 이 전환을 통해 이미지 처리 지연 시간을 데이터 센터에서 에지로 옮겨 응답 시간을 단축하고 대역폭 비용을 예측 가능하게 만들었습니다.

기존 모델이 한계에 부딪힌 이유

수만 개의 비디오를 보여주는 플랫폼인 이 사이트는 한 페이지에 최대 40개의 썸네일을 포함합니다. 각 썸네일은 원본 파일을 읽고 크기를 조정하는 PHP 스크립트에 의해 요청 시마다 리사이징됩니다. 크롤러가 사이트를 방문하면 백엔드 서버가 멈추곤 했습니다.

에지 프로세싱이 5가지 핵심 요구사항을 해결하는 방법

프로덕션급 썸네일 API는 다음 사항들을 처리해야 합니다:

  • Fan-in – 여러 서드파티 호스트에서 소스 이미지를 가져오기.
  • Fan-out – 여러 크기 생성 (예: 320px 카드, 640px 히어로 이미지).
  • Format negotiation – 대역폭 절감을 위해 브라우저가 지원하는 경우 WebP 또는 AVIF 제공.
  • Cache – 첫 번째 요청은 비용이 들더라도 이후의 모든 요청은 무료로 처리되도록 보장.
  • Security – 누군가가 임의의 이미지를 처리하기 위해 서비스를 악용하는 것을 방지.

Cloudflare Workers는 오리진의 CPU를 사용하지 않고도 각 요구사항을 해결합니다:

  1. Proximity (근접성) – Workers는 사용자에게 가까운 데이터 센터에서 실행되므로 처리된 이미지가 이동하는 경로가 짧아집니다.
  2. Built-in Image Resizing – 플랫폼의 Image Resizing 기능을 통해 픽셀 작업을 수행하므로 별도의 커스텀 라이브러리가 필요 없습니다.
  3. Cache API – Workers는 리사이징된 이미지를 에지에 저장하며, 첫 번째 요청 이후에는 에지에서 직접 이미지를 제공합니다.
  4. Programmable security – 작은 스크립트가 HMAC 서명을 검증하고, 호스트 이름 및 너비에 대한 허용 목록(allow-list)을 적용하며, 캐시 포이즈닝(cache poisoning)을 방지하기 위해 캐시 키를 정규화합니다.

시스템 작동 방식

  1. 오리진이 서명된 URL 생성 – 백엔드는 비밀 키를 보유하며 모든 썸네일 요청에 HMAC 서명을 추가합니다. URL에는 원하는 너비와 형식도 포함됩니다.
  2. Worker가 서명 검증 – 요청을 받으면 Worker는 공유 비밀 키를 사용하여 HMAC을 다시 계산합니다. 서명이 누락되었거나 틀린 경우 요청이 거부되어 악용을 방지합니다.
  3. 허용 목록 적용 – 스크립트는 소스 호스트 이름이 사전 정의된 목록에 있는지, 요청된 너비가 지원되는 크기 중 하나인지 확인합니다. 이를 통해 악성 호스트가 캐싱되는 것을 방지합니다.
  4. 캐시 키 정규화 – 캐시 키에서 서명 자체를 제거합니다. 키에는 소스 URL, 너비, 형식만 포함됩니다. 이를 통해 동일한 이미지를 요청하는 서로 다른 사용자가 동일한 캐시 항목에 접근할 확률을 높입니다.
  5. 에지 페치 및 리사이징 – 이미지가 캐싱되어 있지 않은 경우, Worker는 서드파티 호스트에서 원본을 가져와 Image Resizing API를 실행하고 그 결과를 에지 캐시에 저장합니다.
  6. 캐시 워밍(Cache warming) – 크롤링이 끝날 때마다 가벼운 Python 스크립트가 최신 썸네일을 미리 요청합니다. 따라서 실제 첫 사용자는 리사이징 작업을 기다리는 대신 캐시된 응답을 받게 됩니다.

한 달 후 측정된 효과

  • 이미지 처리를 위한 오리진 CPU – 0으로 감소했습니다. 백엔드는 더 이상 이미지 바이트를 처리하지 않습니다.
  • HTML 제공 속도 – 서버가 더 이상 이미지 작업으로 인해 차단되지 않으므로 눈에 띄게 향상되었습니다.
  • 에지 캐시 적중률(Hit rate) – 96%에 도달했습니다. 이는 거의 모든 요청이 백엔드 호출 없이 에지에서 처리되었음을 의미합니다.
  • 지연 시간(Latency) – 이미지가 중앙 오리진이 아닌 사용자 근처의 데이터 센터에서 제공되므로 감소했습니다.
  • 대역폭 예측 가능성 – 에지 캐싱을 통해 오리진의 아웃바운드 트래픽이 안정화되어 예측하기 쉬워졌습니다.

결론

썸네일 생성을 Cloudflare Workers로 오프로딩함으로써 CPU 집약적인 병목 현상을 비용이 거의 들지 않는 에지 캐시로 전환했습니다. 이제 오리진은 서명된 URL만 발행하고, 에지가 페치, 리사이징, 형식 협상 및 캐시된 결과 제공을 담당합니다. 이미지에 크게 의존하는 사이트, 특히 페이지당 수십 개의 썸네일을 표시하는 비디오 플랫폼의 경우, 에지 우선(edge-first) 접근 방식은 더 빠른 페이지 로딩, 예측 가능한 비용, 그리고 "무엇을 보여줄 것인가"(오리진)와 "어떻게 전달할 것인가"(에지) 사이의 명확한 분리를 제공합니다.