이미지 파이프라인 복잡성 해결! bunny.net으로 비용 절감

기존 DEV의 이미지 파이프라인은 다수의 CDN과 이미지 프록시 서비스, 클라우드 스토리지(AWS S3)를 조합하여 운영되었음. 이로 인해 동적 이미지 변환(On-the-fly Image Transformation) 시 발생하는 클라우드 Egress 비용과 변환 처리 비용이 기하급수적으로 증가하는 문제가 발생함. 특히, 캐시 미스(Cache Miss) 발생 시 원본 이미지를 다시 가져와 재처리해야 하는 구조는 트래픽 세금(Traffic Tax)으로 작용하여 비용 부담을 가중시켰음. 또한, HTML 엣지 캐싱(HTML Edge Caching)과 이미지 전달/최적화 CDN을 분리 운영하며 발생하는 운영 오버헤드(Operational Overhead)와 CORS 이슈, 라우팅 규칙 관리의 복잡성도 주요 비효율 요소였음.

bunny.net의 Perma-Cache 기능은 이미지 최적화 처리 후 결과물을 영구적으로 엣지 스토리지에 복제하여, 캐시 미스 발생 시에도 원본 스토리지(AWS S3)를 다시 호출할 필요가 없도록 함. 이는 클라우드 스토리지 Egress 비용을 거의 제거하는 효과를 가져왔음. 또한, WebP, AVIF와 같은 차세대 이미지 포맷을 브라우저 Accept 헤더에 따라 자동으로 협상하고 압축하여 파일 크기를 최대 80%까지 줄여줌. 이러한 동적 이미지 최적화(Dynamic Image Optimization)는 사용자 경험을 저해하지 않으면서도 전송량을 크게 감소시켜 페이지 로딩 속도(Page Loading Speed) 향상에 기여함.

기존 Rails 애플리케이션에서 처리하던 이미지 URL 생성 및 최적화 로직을 bunny.net의 Edge Scripting으로 이관함. Deno와 V8 기반으로 동작하는 이 기능은 타입스크립트(TypeScript) 기반의 경량 미들웨어를 엣지에서 직접 실행시켜줌. 이를 통해 사용자 아바타나 썸네일 이미지의 최대 크기를 강제하고, 원본 URL 요청 시에도 자동으로 최적화된 포맷으로 변환하는 등 맞춤형 비즈니스 로직을 CDN 레벨에서 처리할 수 있게 됨. 이는 Rails 뷰의 복잡성을 줄이고, 이미지 프록시 서버의 필요성을 제거하여 아키텍처를 간소화하는 데 크게 기여함.

Forem의 이미지 파이프라인은 Images::Optimizer 서비스를 통해 특정 CDN에 종속되지 않도록 플러그형(Pluggable) 아키텍처로 설계되었음. 이 서비스는 표준화된 파라미터(width, height 등)를 받아 현재 설정된 CDN 제공업체(Provider)에 맞는 URL 형식으로 변환하는 전략 패턴(Strategy Pattern)을 사용함. bunny.net 도입 시에도 기존의 Fastly, Cloudflare, Cloudinary 지원 구조를 활용하여 새로운 프로바이더(BunnyProvider)를 추가하는 방식으로 매우 쉽게 통합할 수 있었음. 이러한 느슨한 결합(Loose Coupling) 설계는 오픈소스 프로젝트로서 다양한 환경에서의 유연한 CDN 설정 변경을 가능하게 함.

Edge Scripting은 이미지 요청 실패 시 깨진 이미지 아이콘 대신 스타일링된 플레이스홀더 이미지를 제공하는 UX 개선을 가능하게 함. 원본 스토리지에서 404 또는 500 에러 발생 시, 엣지 스크립트가 이를 가로채 사용자 정의 플레이스홀더로 응답을 대체함. 이는 Rails 애플리케이션의 JavaScript onError 이벤트 리스너보다 훨씬 효율적인 네트워크 계층에서의 처리 방식임. 또한, GitHub Actions와 연동하여 엣지 스크립트의 배포 및 관리를 자동화함으로써, 새로운 최적화 규칙 적용이나 레이아웃 변경 시 전 세계적으로 몇 초 안에 반영될 수 있는 강력한 운영 효율성을 제공함.