[이미지 최적화] 02. Next/Image의 한계점, 그에 대한 대책

오늘 제가 글쓰려고 하는 주제는 바로
Vercel 무료플랜 사용 시 Next/Image의 한계점과 그에 대한 대책입니다.

사용자가 없거나 작은 프로젝트의 경우에는 그대로 Next/Image를 써도 무방하니
글을 읽어보고 비슷한 경험에 해당되는 사람은 저와 같은 고민을 해보는것도 좋을 것 같아요.

글에 대한 수정 요청 및 정보 공유는 언제든지 환영입니다 ~.~

---

Next/Image가 제공하는 장점

- webp, avif등의 이미지 확장자 최적화
- Lazy 로딩
- placeholder제공을 통한 CLS 점수 개선
- width, height값을 받아 reflow 현상을 최소화
- sizes props를 통한 디바이스 크기 혹은 화면 해상도에 맞춰 적절한 크기의 이미지 제공
- vercel을 통한 이미지 캐싱

---

vercel을 통한 이미지 캐싱

Next/Image. 장점도 많고 사용하기에도 편하다.
(무료플랜의 image optimizaiton 캐싱 카운트 한도를 초과하기 전까진 말이야)

이러한 Next/Image를 사용하던 중 현재 진행중인 "다독다독" 프로젝트에서 예상 밖의 문제가 발생했다.

무한 스크롤이 적용된 페이지에서 너무나도 많은 이미지를 호출 및 캐싱을 하다보니
vercel에서 기본적으로 제공하는 image optimization 캐싱 카운트(1000)를 초과해 버린 것.

이로인해 약 한달간 Next/Image를 사용한 이미지가 호출되지 않는 대참사가 발생했다.

차선책으로 Next/Image 컴포넌트에 unoptimized props을 넘겨주어
최적화가 되지 않은 이미지를 호출하는 방법을 활용했다.

한 달이 지나고
"도서 검색" 페이지 처럼 이미지를 많이 호출하는 페이지에서는
Next/Image에 unoptimized props를 넘겨주어
vercel의 image optimization 카운트를 관리하는 방식으로 바꾸었다.

참 아이러니하다. 이미지 최적화가 필요한 페이지에서 최적화가 진행되지 않고있다니...
(방법을 찾아야겠지?)

---

AWS S3 + CloudFront 조합

AWS의 S3 + CloudFront를 활용하여 이미지 최적화가 아닌 이미지 로딩 속도 단축을 통해 개선하는 방법이다.
하지만 프리티어 플랜으로 제공되는 것도 한계가 있어 악의적인 요청에 대한 대책 또한 필요하다 생각했다.

S3
- 표준 스토리지 5GB까지 무료
- Get 요청 매달 20,000건 무료
- Put 요청 매달 2,000건 무료

CloudFront
- 데이터 송신 50GB까지 무료
- HTTP 또는 HTTPS 요청 2,000,000건 무료

 

"도서 검색" 페이지 개선하면서 하루만에 이미지 캐싱 카운트만 800건을 넘겼던 과거를 떠올려본다면
S3의 매달 Put 요청 2,000건... 조금 쫄리긴하지만 나쁘지 않다 생각했다.
(서버 비용은 조상님이 안내주시나?)

 

비용: 비교적 높음, 성능: 좋음

---

Sharp + API routes 조합

Next/Image도 Vercel 프로덕션 환경에서는 자동으로 Sharp를 통한 이미지 최적화가 되고있다고 한다.
그 외의 배포 환경에서는 Sharp 라이브러리를 설치하여 이미지 최적화를 진행할것을 Next측에서도 적극 권장하고있다.

그러면 Sharp 라이브러리와 Next.js의 API routes의 조합으로 이미지 최적화를 진행한다면..!?

 

테스트 결과 확실히 이미지 로딩 속도는 빨라졌다.
하지만 문제점은 이미지 캐싱이 브라우저 안에서만 진행되고
별다른 스토리지가 없기 때문에 Next/Image 컴포넌트를 사용할 때 만큼의 성능을 기대할 수 없었다.

 

비용: 매우 낮음, 성능: 비교적 좋음

---

1, 2편을 통해 Next/Image를 활용한 이미지 성능 최적화의 장점과 단점, 지닌 한계를 간단하게 정리해 보았고
한계점을 해결하기위한 방법 2가지를 고민해 보았다.
나처럼 Next.js를 쓰면서 비슷한 고민이 있는 분들에게 조금이나마 도움이 됐음 한다!

진행중인 프로젝트에는 급한대로
Sharp + API routes 를 활용하여 이미지 최적화가 진행되고 있다.

그리고 기회가 된다면 진행중인 프로젝트에는
AWS S3 + CloudFront 조합과 Sharp + API routes 조합
두가지를 함께 적용해보려 한다.

스스로 찾아보면서 AWS 서비스를 활용하는건 처음이라
험난한 여정이 될 것 같지만... 화이팅이야~~