Next.js 이미지 최적화에서 자주 막히는 부분

개인 프로젝트를 하다 보면 이미지가 안 보이거나 외부 이미지 도메인 오류가 나는 상황을 자주 만납니다. 처음에는 그냥 검색해서 나온 명령어를 따라 치는 경우가 많지만, 왜 그런 문제가 생기는지 이해해두면 다음에 훨씬 빨리 해결할 수 있습니다.

이번 글은 제가 Next.js 이미지 최적화을 정리하면서 실제로 확인하는 순서와 기준을 적어둔 글입니다. 복잡한 이론보다 바로 써먹을 수 있는 흐름 위주로 정리했습니다.

먼저 증상을 정확히 보기

문제가 생겼을 때 가장 먼저 할 일은 추측을 줄이는 것입니다. “아마 서버 문제겠지”, “아마 코드 문제겠지”라고 생각하고 바로 수정하기보다 현재 상태를 숫자와 로그로 확인하는 편이 좋습니다.

npm run build
npm run dev

위 명령어들은 상황을 빠르게 좁히는 데 도움이 됩니다. 에러 메시지, 상태 코드, 실행 중인 프로세스, 실제 열린 포트처럼 눈으로 확인 가능한 정보를 먼저 모아야 합니다.

원인을 나누어 생각하기

저는 보통 원인을 세 가지로 나눠서 봅니다.

1. 코드 자체의 문제
2. 실행 환경의 문제
3. 네트워크나 배포 설정 문제

이 기준으로 나누면 어디부터 봐야 할지 정리가 됩니다. 예를 들어 로컬에서는 잘 되는데 서버에서만 안 된다면 코드보다 환경변수, 포트, 권한, 런타임 버전을 먼저 의심하는 식입니다.

다시 확인하는 체크리스트

• next.config.js remotePatterns 확인
• width와 height 지정
• 이미지 URL이 https인지 확인
• LCP 이미지 priority 고려

체크리스트를 만들어두면 같은 실수를 반복하는 횟수가 줄어듭니다. 특히 서버나 배포 문제는 당장 해결하고 나면 기록을 안 남기기 쉬운데, 나중에 거의 같은 문제를 다시 만나는 경우가 많습니다.

마무리

Next.js 이미지 최적화은 처음에는 어렵게 느껴질 수 있지만, 확인 순서를 정해두면 생각보다 단순해집니다. 중요한 건 한 번에 모든 걸 고치려고 하지 않고, 현재 상태를 보고 작은 단위로 원인을 좁혀가는 것입니다.