이미지 최적화
개요
이미지는 일반적으로 바이트 수와 HTTP 요청 수 측면 모두에서 웹 페이지의 가장 무거운 구성 요소입니다. 웹 사이트의 이미지를 최적화하는 것은 사용자 경험을 개선하고 전송 비용을 줄이며 검색 엔진 순위에서 입지를 높이는 데 매우 중요합니다. 예를 들어 Google의 검색 순위 알고리즘의 Largest Contentful Paint(LCP) 지표는 웹사이트 이미지를 얼마나 최적화하느냐에 따라 크게 영향을 받습니다.
아키텍처 관련 결정
이미지 최적화 솔루션은 비용, 유연성 및 성능 측면에서 요구 사항에 따라 다양한 방식으로 설계할 수 있습니다. 이미지 최적화 솔루션을 설계할 때는 다음과 같은 기술적 결정을 내려야 합니다.
- 어떤 이미지 변환이 필요한지? 형식 지정, 크기 조정, 자르기 등이 필요한지?
- 특정 이미지 요청에 어떤 변환을 적용할지 어디에서 결정하는지? 클라이언트 측의 프런트엔드(정적, 반응형 디자인 등)인지, 서버 측(디바이스와 같은 요청 콘텐츠 기반)인지, 또는 이 둘의 조합인지?
- 변환을 어디에서 실행할지? 중앙 위치에 있는지, 아니면 분산된 방식으로 있는지?
- 변환을 언제 실행할지? 변환된 이미지를 매번 저장하는지, 아니면 단기간 동안 저장하는지? 동기식으로 실행되는지, 아니면 비동기적으로 실행되는지?
또 다른 중요한 결정은 AWS 서비스를 사용하여 솔루션을 구축할지, 아니면 타사 관리형 솔루션을 구매할지 여부입니다.
일반 사용 사례
CloudFront, S3 및 Lambda를 기반으로 하는 고객 관리형 솔루션
이미지 최적화의 가장 일반적인 사용 사례에는 사용자 브라우저 기능에 따른 자동 형식 지정이 필요하며 프런트엔드에 이미지 크기를 조정할 수 있는 기능이 제공됩니다. Next.JS 같은 많이 사용되는 웹 개발 프레임워크는 디바이스 뷰포트를 기반으로 이미지 크기를 자동으로 선택할 수 있는 반응형 이미지 구성 요소를 제공합니다. 이 일반적인 사용 사례에 권장되는 아키텍처는 다음 다이어그램에 설명되어 있습니다.
- 사용자는 인코딩 및 크기와 같은 특정 변환이 포함된 이미지에 대한 HTTP 요청을 보냅니다. 변환은 URL, 보다 정확하게는 쿼리 파라미터로 인코딩됩니다. 예제 URL은 다음과 같습니다. https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200
- 요청은 인근의 CloudFront 엣지 로케이션에서 처리되어 최상의 성능을 제공합니다. 요청을 업스트림으로 전달하기 전에 최종 사용자 요청 이벤트에서 CloudFront Function이 실행되어 요청 URL을 다시 작성합니다. CloudFront Functions는 CloudFront의 기능으로, 이를 사용하면 대규모의 지연 시간에 민감한 CDN 사용자 지정을 위해 경량 함수를 JavaScript로 작성할 수 있습니다. 이 아키텍처에서는 URL을 다시 작성하여 요청된 변환의 유효성을 검사하고 변환 순서를 지정하여 URL을 정규화하고 이를 소문자로 변환하여 캐시 적중률을 높입니다. 자동 변환이 요청되면 함수는 적용할 최상의 변환도 결정합니다. 예를 들어, 사용자가 format=auto 지시어를 사용하여 가장 최적화된 이미지 형식(JPEG, WebP 또는 AVIF)을 요청하는 경우 CloudFront Function는 요청에 있는 Accept 헤더를 기반으로 최상의 형식을 선택합니다.
- 요청된 이미지가 이미 CloudFront에 캐시된 경우 캐시 적중이 발생하여 CloudFront 캐시에서 이미지가 반환됩니다. 캐시 적중률을 높이기 위해 오리진 이전에 추가 캐싱 계층 역할을 하는 CloudFront의 기능인 Origin Shield를 활성화하여 요청에서 추가로 오프로드합니다. 이미지가 CloudFront 캐시에 없는 경우 요청은 변환된 이미지를 저장하기 위해 생성된 S3 버킷으로 전달됩니다. 요청된 이미지가 이미 변환되어 S3에 저장되어 있는 경우 간단히 CloudFront에서 제공되고 캐시됩니다.
- 그렇지 않으면 S3는 CloudFront의 오리진 장애 조치에서 감지한 403 오류 코드로 응답합니다. 이 기본 기능 덕분에 CloudFront는 동일한 URL을 재시도하지만 이번에는 Lambda 함수 URL을 기반으로 하는 보조 오리진을 사용합니다. 호출되면 Lambda 함수는 원본 이미지가 저장되어 있는 다른 S3 버킷에서 원본 이미지를 다운로드하고 Sharp 라이브러리를 사용하여 변환하고 변환된 이미지를 S3에 저장한 다음 CloudFront를 통해 제공하여 향후 요청을 위해 캐시합니다.
이 솔루션을 배포하려면 이 블로그의 단계를 따르세요. 또한 블로그에서는 Next.JS의 이미지 구성 요소와 함께 사용하는 방법을 보여줍니다. 이 솔루션을 사용하면 변환된 이미지를 S3에 저장하는 것을 비활성화하며, 변환된 이미지를 제공하는 데 CloudFront 캐시만 사용할 수 있습니다.
타사 관리형 솔루션
타사 관리형 이미지 최적화 솔루션을 사용하려는 경우 AWS Marketplace에서 Cloudinary, ImageKit.io 또는 Cloudimage와 같은 사용 가능한 솔루션을 살펴보세요. 이 세 가지 솔루션은 CloudFront를 사용하고 있거나 자체 CloudFront 배포를 관리하려는 경우 CloudFront와 통합됩니다. 이러한 타사 공급업체는 이미지 최적화를 전문으로 하며 고급 SaaS 기능을 제공할 수 있지만 추가 비용이 듭니다.