[Frontend] next/image를 사용하는 이유
들어가며
결론부터 말하자면, next/image를 사용하는 이유는 사용성 향상과 성능 최적화를 간단하게 구현할 수 있기 때문입니다. 이 글에서는 next/image 컴포넌트의 주요 기능과 장점, 단점, 대체 방법에 대해 정리해보겠습니다.
목차
- 사용자 경험을 개선하는 placeholder
- 포맷 & 사이즈 자동 최적화
- 기본 제공되는 Lazy Loading
next/image의 단점은?- 다른 대안은 없을까?
- 결론 및 요약
- 참고 자료
1. 사용자 경험을 개선하는 placeholder
기본 <img> 태그를 사용할 경우 이미지가 로딩되는 동안 빈 공간이 그대로 보여집니다. 반면, next/image는 placeholder="blur" 속성을 활용하여 로딩 중에도 블러 처리된 이미지를 보여줍니다.
이는 페이지의 시각적 일관성을 유지하고, 사용자가 콘텐츠를 더욱 쾌적하게 탐색할 수 있도록 도와줍니다.
1
2
3
4
5
6
7
8
9
10
import Image from 'next/image';
<Image
src="/example.jpg"
alt="설명"
width={800}
height={600}
placeholder="blur"
blurDataURL="/example-blur.jpg"
/>
2. 포맷 & 사이즈 자동 최적화
next/image는 브라우저 환경에 맞춰 최적화된 이미지 포맷(WebP 등)과 적절한 크기로 이미지를 서빙합니다. 사용자의 디바이스 해상도나 브라우저 지원 여부에 따라 자동으로 최적화된 이미지를 제공하여 불필요한 데이터 전송을 줄이고 성능을 높일 수 있습니다.
3. 기본 제공되는 Lazy Loading
별도 설정 없이도 next/image는 기본적으로 lazy loading을 지원합니다. 즉, 뷰포트에 들어올 때 필요한 이미지부터 로드하므로 초기 렌더링 속도가 향상되고, 네트워크 리소스를 절약할 수 있습니다.
1
2
3
4
5
6
<Image
src="/photo.jpg"
alt="예시"
width={500}
height={300}
/> // lazy loading은 기본값
4. next/image의 단점은?
물론 단점도 있습니다:
- 외부 이미지 도메인을 사용할 경우,
next.config.js에 허용 도메인을 명시해야 합니다.
1
2
3
4
5
6
// next.config.js
module.exports = {
images: {
domains: ['example.com'],
},
};
- 이미지 최적화는 Next.js 서버에서 처리되므로, 정적 사이트처럼 서버리스로 배포할 경우 제약이 있을 수 있습니다. 특히 자체 서버 없이 호스팅하는 경우, Vercel 등의 플랫폼에 의존하게 됩니다.
5. 다른 대안은 없을까?
next/image 없이도 이미지 최적화를 할 수 있습니다. 예를 들어:
- 직접 리사이징된 이미지 파일을 준비해 정적으로 서빙
<img>태그에loading="lazy"속성 추가- Cloudinary, Imgix, Fastly 같은 이미지 최적화 서비스 활용
1
<img src="/image.jpg" alt="설명" loading="lazy" width="600" height="400" />
하지만 이러한 방법은 수작업이 필요하거나 설정이 복잡해질 수 있습니다. 반면, next/image는 이러한 최적화를 자동화된 방식으로 쉽게 적용할 수 있다는 장점이 있습니다.
6. 결론 및 요약
| 항목 | 기본 <img> | next/image |
|---|---|---|
| Lazy loading | 수동 설정 필요 | 기본 제공 |
| 이미지 포맷 최적화 | 불가능 | 자동 제공 |
| 사이즈 최적화 | 수동 리사이징 필요 | 자동 제공 |
| placeholder 처리 | 직접 구현 필요 | blur 속성 제공 |
| 외부 이미지 | 제한 없음 | next.config.js 설정 필요 |
빠르게 UX를 개선하고 싶을 때
이미지 퍼포먼스를 쉽게 최적화하고 싶을 때
→ next/image는 매우 강력한 도구입니다.