이커머스 플랫폼의 이미지 로드 속도 개선기 - AWS CloudFront + Lambda@Edge(Nodejs Sharp) 모듈을 활용한 개선 사례

nodejs sharp를 이용한 이미지 리사이징

 

서론

이커머스 어플리케이션에서 매끄러운 사용자 경험은 매출 증대와 직결됩니다. 특히 상품 이미지의 로드 속도는 사용자가 사이트에 머무르고 구매로 이어지게 하는 중요한 요소 중 하나입니다. 최근 제가 운영 중인 어플리케이션에서 상품 이미지 로드 시간이 2초를 넘어서는 문제를 발견했고, 이는 사용자 경험에 부정적인 영향을 미칠 수 있다는 우려로 이어졌습니다.

 

문제 인식

실제로 일부 이미지의 로드 시간이 2초를 넘는 경우가 있었습니다. 이는 사용자가 페이지를 이탈할 가능성을 높이고, 최종적으로는 판매 감소로 이어질 수 있는 심각한 문제였습니다.

 

해결 방안

관련 문제를 해결하기 위해 기존에 사용하고 있던 AWS S3 설정을 개선해야할 필요가 있었습니다. 저는 S3 + CloudFront 설정에 Lambda@Edge와 Nodejs의 Sharp 모듈을 사용하여 CloudFront의 엣지 로케이션에 이미지가 캐싱되어 있지 않을 경우, 실시간으로 이미지를 리사이징하고 webp 확장자로 변환하여 엣지 로케이션에 캐싱한 뒤 사용자에게 제공할 수 있도록 개선했습니다. 이후 동일한 이미지에 대한 요청 시 캐싱된 리사이징 이미지를 반환함으로서 이미지 로드 속도를 크게 개선할 수 있었습니다.

이 과정에서 Sharp 모듈을 사용해 이미지의 크기를 조절하고, 필요에 따라 화질을 조정하는 등의 최적화 작업을 수행했습니다. 특히, 안드로이드 디바이스에서 webp 확장자 이미지의 로드 속도가 더욱 빠르다는 점을 고려하여, 모바일 사용자 경험을 더 크게 개선할 수 있었습니다.

 

 

테스트 결과

테스트 결과를 확인하기 위해 특정 이미지에 대한 리사이징 전후 변화를 비교했습니다. 캐싱의 영향도 포함되어 있지만 이미지 파일 용량이 줄어든 만큼 이미지 로드 속도에 매우 긍정적인 영향을 끼쳤다고 판단합니다.

 

 

1. 파일 크기

29.3kb -> 335B(약 90배 감소)

리사이징 전 파일 크기

리사이징 후 파일 크기

 

 

2. 호출 속도

127.80 밀리초 -> 14.42 밀리초(약 9배)

리사이징 전 이미지 호출

 

리사이징 후 이미지 호출

 

 

 

 

주의사항

실제 운영 환경에 맞춰 Lambda를 활용한 테스트를 진행하여 운영 환경에 맞는 Lambda 메모리 사이즈 파악이 필요합니다.

 

AWS Lambda는 설정한 메모리를 기준으로 CPU 파워가 결정되며, 자신의 어플리케이션에 맞는 Lambda 메모리 설정이 필요합니다.

만약, 요청 크기에 맞지 않게 Lambda 메모리를 설정하여 메모리가 부족한 경우, Lambda가 요청을 적절히 처리하지 못하게되고 제한 시간을 초과하게될 경우 에러를 반환하게 됩니다. 에러는 CloudWatch 로그 등에서 확인 가능합니다.

AWS Lambda에서 메모리 설정값과 CPU 파워의 관계(출처 : 데이블)

 

 

참고

만약 S3, CloudFront, Lambda@Edge에 대한 자세한 설명이 필요하실 경우 아래 링크를 통해 확인해주시기 바랍니다.

 

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/Welcome.html

Amazon S3란 무엇인가요? - Amazon Simple Storage Service

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

Amazon CloudFront란 무엇입니까? - Amazon CloudFront

 

https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/lambda-edge.html

Using AWS Lambda with CloudFront Lambda@Edge - AWS Lambda