AWS S3 이미지 처리 개선하기, 이미지 최적화

503·2022년 9월 24일
10

안녕하세요, 503입니다.

쇼핑몰 프로젝트를 진행하던 도중, 상품 리스트를 불러올 때 엄청나게 긴 로딩 시간이 걸리는 문제가 발생했습니다. 정적 이미지 서버로 AWS S3 버킷을 사용했었는데, 모든 트래픽이 S3 origin 서버로 몰리면서 병목 현상이 발생한 것입니다.

아래는 필자가 실제로 진행했던 프로젝트의 상품 리스트 조회 서비스입니다.

상품 상세 페이지에서 볼 상품이미지로 큰 사이즈의 사진을 업로드 했었습니다만 생각해보면 상품 리스트의 이미지들. 즉 "썸네일"은 이미지의 크기는 한정되어있었습니다.

일단 사진 크기를 리사이징해서 버킷에 올리자

당장 사진 10개를 불러오는 동안에도 시간이 무진장 걸리고 있으니, 일단 초기 개발당시에는 사진 크기를 직접 작게 리사이징해서 버킷에 올렸습니다.
지금 생각해도 정말 번거롭고 비효율적이었는데요... 상품 상세 페이지에서 이미지가 깨져보이는 문제도 발생했습니다.

아예 썸네일용 사진을 따로 저장하면 되지 않을까?

두 번째로 생각한 방법은 상세페이지 이미지와 썸네일용 사진을 구분해서 저장하는 방법이었습니다. 상세페이지에서 깨지는 문제는 해결되었지만 같은 이미지를 버킷에 2번 저장하게 되니 그만큼 용량이 X2배가 되는 문제가 생겼습니다.

그렇게 마지막으로 생각한 방법.

리스트를 불러올 때마다 썸네일용 이미지를 리사이징 할 수 있지 않을까?

즉, 서버에 이미지를 요청할 때 "GET /imageUrl?w=300&h=300"와 같이 썸네일의 크기에 맞춰서 리사이징 요청을 보내 처리하는 방법이었습니다. 이것도 문제가 없는 건 아니었지만.. 아무튼 현재의 상황에서 제일 적절하다고 생각했던 방법이었습니다.

이미지를 리사이징을 해서 불러온다면 분명 전보다 로딩시간이 단축되는 것은 분명했습니다. 하지만 이미지를 더 빨리 가져올 수 있는 방법은 없을까? 이왕 이미지 처리를 개선하는 김에 로딩시간을 더 단축하고 싶었고 아래와 같은 생각을 하게 되었습니다.

페이지를 로딩할 떄마다 이 큰 사이지의 이미지들을 매번 새롭게 불러오는 것도 로딩 시간에 영향을 주지 않을까?


이미지 처리 개선하기

필자의 당시 상황을 설명하다보니 본문이 길어졌는데요, 다시금 이슈와 해결했던 방법을 정리해보겠습니다.

⚠️ 이슈?

상품 리스트를 불러올 때, S3 버킷에 있는 큰 이미지를 그대로 가져오느라 로딩시간이 엄청 오래걸리는 문제점이 발생한다.


⭕ 그래서 어떻게 해결했느냐?

이미지 처리 개선을 위한 방법을 크게 2가지 나눌 수 있었습니다.

  1. 썸네일 리사이징 기능 구현

  2. 캐싱 기능 => CDN 프록시 서버 구현


그래서 어떻게 해결했느냐? 일단 결론부터 말씀드리자면

캐싱기능을 위해 AWS CloudFront로 CDN 프록시 서버를 구현하기로 했습니다. 그 후 썸네일을 위해 AWS Lambda@Edge에서 실시간 이미지 리사이징 & WebP 형식으로 변환하는 기능을 구현했습니다.


하지만 한 포스팅에 적기엔 내용이 길어질 것 같아서 다음 포스트로 나눠서 작성하도록 하겠습니다. ^-^

감사합니다.



profile
얼레벌레 개발자로 살아가기. 개발하면서 만났던 이슈를 기록합니다.

24개의 댓글

comment-user-thumbnail
2022년 10월 6일

Thanks for sharing that amazing post. Wawa Customer Survey

답글 달기
comment-user-thumbnail
2024년 1월 25일

The company will utilise your input to improve its products, customer service, and even the store's atmosphere. Online completion of the survey is available to make things easier for its clients.
https://mywaawavisit.us/

답글 달기
comment-user-thumbnail
2024년 1월 27일

Additionally, the Survey is a great opportunity for Lowe's to get feedback from customers and make adjustments in the future. By taking the survey, you can join a $500 monthly sweepstakes and win.
https://lowessurveyinfo.pro/

답글 달기
comment-user-thumbnail
2024년 1월 31일

In order to improve customer satisfaction, Hannaford is seeking your candid feedback through the Hannaford Guest Feedback Survey.
https://talktohannafordcom.store/

답글 달기
comment-user-thumbnail
2024년 2월 7일

As a consequence, the businesses are able to make better judgements, which increases client pleasure, loyalty, and advocacy. This aids in drawing attention to and, once acknowledged, removing the company's shortcomings.
https://wallgreenslistens.org/

답글 달기
comment-user-thumbnail
2024년 2월 9일

Both your PC and your mobile application may be used to log into Lowes Kronos. The Google Play Store and Apple Store provide the app for download.

https://mylows-life.org/

답글 달기
comment-user-thumbnail
2024년 2월 12일

I've included all the information you need to take part in the survey on one page, including the guidelines and requirements for the www.homedepot.com survey, instructions for completing the Home Depot Customer Service Survey, and other pertinent information.
https://homedeptcomsurvey.top/

답글 달기
comment-user-thumbnail
2024년 2월 16일

Because you must have a warranty card in addition to your Capital One Platinum Card whenever you make a transaction with the Card, you may obtain a warranty on certain items if you so want.
https://activatellbeenmastarcard.shop/

답글 달기
comment-user-thumbnail
2024년 3월 20일

FitSpresso weight loss supplement can help reverse the process as well. These fatty foods are the primary causes of weight gain.
https://fitspresso.fitmdblog.com/

답글 달기
comment-user-thumbnail
2024년 4월 6일

KFC introduced the My KFC Experience Survey to better understand their customers' demands and improve their services. Customers are asked to respond to a few experience-based survey questions. Here is a list of some of the prerequisites for the https://mykfcxperiencesurvey.shop survey.

답글 달기
comment-user-thumbnail
2024년 4월 29일

The purpose of Hannaford's Customer Satisfaction Survey is to determine how satisfied customers are with the goods and services they have received. https://talktohannafordz.shop/

답글 달기
comment-user-thumbnail
2024년 5월 9일

You can also enter a drawing to win $1,000 or one of ten opportunities to win $100 by leaving feedback. To accomplish this, you are not required to enter the drawing. https://wecareriteaidcom.shop/

답글 달기
comment-user-thumbnail
2024년 5월 31일

With its overseas restaurants, Chipotle aims to demonstrate or refute whether customers would be open to purchasing local menu items in addition to the regular offerings. https://chipotlefeedbackz.shop/

답글 달기
comment-user-thumbnail
2024년 6월 8일

Pizza Hut's TellPizzaHut Survey is one of their greatest options and most skillfully executed efforts to verify that the assistance provided to bureaucracies is accurate and truthful. https://ipizzahutsurveyx.shop/

답글 달기
comment-user-thumbnail
2024년 6월 28일

The accused will receive a confirmation number once they complete the online survey, which is only accessible to their clients. https://bagelexperiencez.shop/

답글 달기
comment-user-thumbnail
2024년 7월 9일

As a result, Hannaford will have a harder time living up to customer expectations because customer survey results will highlight the company's shortcomings. https://talktohannaford500.shop/

답글 달기
comment-user-thumbnail
2024년 7월 31일

Kohl’s Feedback is dedicated to enhancing its customers’ shopping experiences by providing better products and services. https://kohsfeedback.shop/

답글 달기
comment-user-thumbnail
2024년 8월 2일

A Dollar General coupon code will be emailed to you after the survey is complete. https://dgcustomerfirst100s.shop/

답글 달기
comment-user-thumbnail
2024년 9월 17일

Today, we're diving into the story of Paul Inouye's wife, exploring her background, interests, and her life with Paul.
https://rennwoods.com/blog/paul-inouye-wife-explore-all-details-about-paul-inouye/

답글 달기
comment-user-thumbnail
2024년 9월 23일

Discover the latest news, reviews, and interviews with your favorite rock artists on Rock Heardle Magazine, your ultimate source for everything rock music!
https://rock-heardle.com/

답글 달기
comment-user-thumbnail
2024년 9월 24일

You have some awesome stuff, and you keep us all updated.
https://eedrich.com/

답글 달기
comment-user-thumbnail
2024년 9월 25일

Great article! Thanks for this informative article. Keep posting! Visit here - https://eedrich.com/

답글 달기
comment-user-thumbnail
2024년 10월 3일

We appreciate you sharing this excellent post with us. visit
https://eedrich.com/tonya-harding-net-worth-age-bio-family-career-and-controversy/

답글 달기
comment-user-thumbnail
2024년 10월 22일
답글 달기