Nextjs 에서 gif 호출 시 500 error 발생하는 문제

Nextjs 프론트 서비스에 gif 이미지를 넣을 일이 있었다. 그런데 프론트 작업을 하던 팀원이 gif 이미지 호출이 안되고 500 에러가 난다는 것이다. 이미지 호출하는데 Internal Server 에러가 난다고? 404 Not found가 아니라? 그것 참 이상하다. 그래서 같이 추적을 해 봤다.

1.

일단 gif 이미지에 문제가 없는지 확인을 해야 한다. 그래서 giphy 에서 아무 이미지나 다운받아서 넣어봤다. 잘 나온다. 이미지에 문제가 있단 얘기.

2

사진으로 gif 생성 사이트에서 이미지를 만들어 봤다. 그리고 호출했더니 잘 된다. 이미지에 문제가 있다는 결론이 확실해 진다.

3.

혹시 용량이 문제일까? gif 이미지 용량을 6메가 정도로 만들어서 호출해보니 에러가 난다. 용량 문제. 기존에 에러가 나던 이미지도 6메가 정도 였다.

4.

gif 이미지 용량을 3메가 정도로 만들어서 테스트 해 보니 잘 나온다. 대략 3메가 언저리는 문제없고 6메가 넘어가면 문제가 발생한다. 정확한 기준을 테스트 해 본것은 아니지만 5메가 기준으로 에러 여부가 결정나는게 아닐까 싶다.

5.

용량이 문제라면 gif 확장자가 아닌 일반 이미지도 문제가 있을까? 대용량 파일, 약 11메가 정도 jpg 파일을 호출했을 땐 문제없다. gif 확장자 파일이 사이즈가 5메가 이상일 때 호출 시 에러가 발생한다.

6

이렇게 결론 지으려고 했으나 팀원이 다시 테스트 해 보고 결론을 찾았다. Nextjs에서 이미지 호출 시 unpotimized=true 를 주면 에러가 안 난단다. Nextjs 자체에서 이미지에 대해 optimized를 실행하는데 그때 gif 파일은 용량 제약이 걸리나 보다. 동적으로 바뀌는 파일에 대해 최적화를 하려면 Nextjs 자체에서 사이즈 제한이 필요한게 아닐까?

7.

unoptimized=true / gif 이미지 용량 제약 없음

unoptimized=false / gif 이미지 용량 제약 있음