이미지 서빙
작성: 0chil고객으로부터 피드백을 받고 빙글의 문제를 해결해나가고 있다.
그 중 하나는 로딩이 느리다는 피드백이었으며, 이 피드백이 비즈니스 지표에 직접적으로 반영되고 있는 것으로 추측, 1순위로 해소해나가고 있다.
이미지 로드 속도를 개선하여 고객의 불편을 확실히 해소하고, 비즈니스 지표 하락 원인에서 배제한다.
빙글 서비스에서 로딩이 느리다는 것은 크게는 API가 느리거나, 이미지 로드가 느린 경우로 나뉜다.
이 문서에서는 이미지 로드가 느린 경우를 해소한다.
빙글의 이미지는 한번 들어오면 변화가 없다.
기본 1일에서 -> 7일로 캐시 기간을 늘려 더 오랫동안 이미지를 빠르게 서빙한다.
이미지 리사이징
Section titled “이미지 리사이징”아직 적절한 사이즈에 대한 기준이 없으므로, 동적으로 리사이징 및 캐싱한다.
Lambda@Edge 사용, 한번 리사이징되어 서빙된 이미지는 일정 기간동안 CDN에 캐시된다.
How-to-use
Section titled “How-to-use”개발/연구용 트래픽과 운영 트래픽의 구분을 위해 도메인을 분리하였다.
| 개발/연구용 | 운영용 |
|---|---|
dev-images.vingle.kr | images.vingle.kr |
w, h, q, f 옵션이 있으며, 이미지 요청 시 쿼리스트링에 추가한다.
예시
| Original | Downscaled | Resized & Downscaled |
|---|---|---|
 |  |  |
아무 옵션도 사용하지 않으면 원본이 전달된다.
w: 이미지 리사이징 목표 너비. (단위 px)h: 이미지 리사이징 목표 높이. (단위 px)
q: 이미지 품질 조절 (1~100), 기본값 80f: 이미지 포맷, 기본값 jpeg
| Before | After |
|---|---|
| 최소 60Kb ~ 최대 2Mb | 10kb~ |
- 주로 사용하는 사이즈 (썸네일 등)이 정해지면, 목적에 맞게 정적 리사이징하여 람다 실행으로 인한 지연을 줄인다.
- 이미 판매된 상품은 다수에게 서빙할 필요가 없으므로, CloudFlare R2 (느리지만, 트래픽 비용 없음)에서 서빙하는 방법을 고려한다.
- 현재 중요한 문제는 아니며, AWS 크레딧에 여유가 있는 관계로 당장 실행할 필요는 없다.