들어가기 전에
블로그를 배포한 지 나흘 정도 지났을 무렵, 갑자기 사이트에서 이미지가 보이지 않고 대체 텍스트만 표시되는 이슈가 발생했어요. 개발자 도구를 통해 확인해 보니 원인은 Vercel의 이미지 최적화 기능과 관련된 문제였고, 이를 해결하는 과정을 간단히 정리해 보려고 합니다.
문제의 화면
개발자 도구에는 아래와 같은 메시지가 나타났어요.
Payment required
OPTIMIZED_IMAGE_REQUEST_PAYMENT_REQUIRED
hnd1::n98j8-1754905764499-710a4ffcb128이 오류는 Vercel의 이미지 최적화 서비스에서 결제가 필요한 상황일 때 발생하는데, 무료 요금제에서는 이미지 최적화 요청 횟수가 제한되어 있어 이를 초과하면 이런 문제가 생겨요.
검색해 보니 Next.js와 Vercel로 배포한 프로젝트에서 저와 같은 문제를 겪은 사례가 꽤 있었고, 덕분에 원인과 해결 방법을 비교적 쉽게 찾을 수 있었습니다.
저는 Next.js로 프로젝트를 진행하면서 이미지 로딩에는 권장 방식인 <Image> 컴포넌트를 사용했는데, 이 컴포넌트는 Vercel에서 이미지를 자동으로 최적화해줘요. 그래서 무료 플랜에서는 월별 요청 한도를 넘어가면 이런 오류가 발생하더라고요.
Vercel 이미지 최적화 사용량 확인
Next.js 프로젝트를 처음 진행하다 보니, 그전까지는 Usage를 따로 신경 쓰지 않았던 것 같아요. 하지만 이번 일을 계기로 Usage 메뉴를 직접 확인해 보며 사용량을 챙기게 되었어요.
내 Next.js 프로젝트로 필터링해 사용량을 확인해 보니, 이미 무료 한도를 넘어선 상태였어요. 5,000건 중 5,043건을 사용해서 제한을 초과했더라고요…😅
해결하기
1) unoptimized 옵션 활용
🔗 공식문서: [Next.js] Image Component #unoptimized
<Image> 컴포넌트에 unoptimized 속성을 직접 부여하는 방법도 있지만
<Image {...props} unoptimized />프로젝트 전체에 일괄 적용하기 위해 next.config.js에 설정했어요.
// next.config.js
module.exports = {
images: {
unoptimized: true,
},
};이렇게 하면 모든 <Image> 컴포넌트의 이미지 최적화를 비활성화하고 원본 이미지를 그대로 제공합니다.. 단, 로딩 속도가 조금 느려질수 있는 단점이 있어요…🥲
현재는 이미지가 전혀 표시되지 않는 문제가 있어 임시로 해당 옵션을 적용했지만, 근본적인 해결책은 아니라고 생각해요. Next.js의 핵심 기능 중 하나가 이미지 최적화인 만큼, 이 장점을 제대로 활용할 수 있도록 렌더링 방식을 바꿀 필요가 있어 보였어요.
2) minimumCacheTTL 설정
🔗 공식문서: [Next.js] Image Component #minimumcachettl
이미지는 Vercel Edge Network에 캐시되는 시간을 지정할 수 있어요. 기본 TTL이 60초라 1분만 지나도 같은 이미지를 다시 최적화하게 되는데, 이 값을 늘려주면 불필요한 최적화 요청을 줄일 수 있죠.
제 블로그의 썸네일은 자주 바뀌지 않아서 minimumCacheTTL을 31일(초 단위: 2,678,400)로 설정했어요.
// next.config.js
module.exports = {
images: {
minimumCacheTTL: 2678400,
},
};결과
잠시 가출했던 이미지들이 다시 돌아왔어요~
마치며
그동안 Vercel을 단순히 배포가 편리한 도구 정도로만 생각했는데, Next.js의 Image 컴포넌트를 함께 쓰면서 이미지 최적화 기능까지 제공한다는 점을 새롭게 알게 되어 꽤 흥미로웠어요.