개요
Next.js에서 SVG 아이콘을 효율적으로 관리하는 방법에 대해 고민해본 적이 있나요? 프로젝트에서 아이콘이 많아질수록 번들 크기가 증가하고, 최적화하지 않으면 성능 저하로 이어질 수 있습니다.
이번 글에서는 재사용 빈도에 따라 SVG 아이콘을 두 가지 방식으로 관리하여 번들 크기를 줄이고 성능을 최적화하는 방법을 소개합니다.
SVG를 사용하는 대표적인 방법
SVG를 Next.js에서 사용하는 방법은 대표적으로 두 가지가 있습니다.
-
SVGR + SVGO + Tree Shaking (JSX에서 직접 사용 가능)
-
정적 파일(public 폴더 + Image 태그) (빌드 크기 증가 없음)
이 두 가지 방식은 각각 장단점이 있으며, 적절히 활용하면 최적의 성능을 얻을 수 있습니다.
최적의 SVG 사용 전략
1️⃣ 한 번만 사용되는 아이콘 → public/ 폴더 + Image 태그
대부분의 아이콘이 한 번만 사용된다면, 굳이 SVGR을 사용할 필요가 없습니다. SVG 파일을 public/icons/ 폴더에 저장한 후 Image 태그로 불러오면 됩니다.
장점
- 번들 크기에 영향을 주지 않음 (Next.js는 public/ 폴더 파일을 번들에 포함하지 않음)
- next/image와 함께 사용하여 최적화 가능
단점
- 색상, 크기 등을 CSS로만 조작 가능 (JSX에서 fill 변경 불가)
- 코드에서 직접 import 할 수 없음
2️⃣ 자주 사용되는 아이콘 → SVGR + SVGO + Tree Shaking
프로젝트에서 2번 이상 반복적으로 사용되는 아이콘은 SVGR을 활용하면 더 효율적입니다.
장점
- fill, stroke, size를 JSX에서 쉽게 변경 가능
- Tree Shaking 적용 가능 → 사용되지 않는 아이콘은 번들에서 제외됨
단점
- 아이콘 개수가 많아지면 번들 크기 증가 가능
결론: 두 가지 방식을 함께 사용하기
요약
-
한 번만 사용되는 아이콘은 public/ 폴더에 두고 Image 태그로 사용하면 번들 크기를 줄일 수 있음
-
여러 번 재사용되는 아이콘은 SVGR + SVGO + Tree Shaking을 적용하여 코드에서 쉽게 조작 가능하도록 유지
-
두 가지 방법을 혼합하면 번들 크기를 최소화하면서도 재사용성을 확보 가능
이 방법을 적용하면 Next.js 프로젝트의 번들 크기를 줄이면서도 SVG를 효율적으로 관리할 수 있습니다.
