웹 성능과 디자인을 동시에 만족시키는 SVG 아이콘 제작 가이드
경량화, 스프라이트 사용, 접근성까지 실무 중심으로 정리했습니다.
1. 왜 웹 아이콘에 SVG가 최적일까?
**SVG(Scalable Vector Graphics)**는 벡터 기반의 그래픽 포맷으로,
해상도에 영향을 받지 않고 모든 화면에서 선명하게 표현됩니다.
✅ 이미지 크기 작음
✅ 무한 확대 가능
✅ 코드로 제어 가능 (CSS, JS)
✅ 접근성 및 SEO에 유리
이러한 이유로 웹 아이콘, UI 요소, 로고, 일러스트 등에 널리 사용됩니다.
2. SVG 아이콘 제작 시 알아야 할 기본 규칙
항목권장 방식
| 아트보드 크기 | 24x24 또는 32x32 px (아이콘 단위 표준) |
| 패스 정리 | 불필요한 그룹, 마스크 제거 |
| 색상 사용 | currentColor 사용 → CSS에서 색 제어 가능 |
| Stroke & Fill | 일관성 있게 설정 (둘 중 하나 선택) |
| ViewBox 설정 | 반드시 <svg viewBox="0 0 24 24"> 형태 유지 |
🎯 정사각형 기반, 중심 정렬, 픽셀 딱 맞는 선 두께 유지
3. SVG 아이콘 최적화 방법
✅ 1. 불필요한 요소 제거
- <g>, <metadata>, <desc>, <title> 등 필요 없는 태그 삭제
- 빈 id, class, style 속성 정리
- <path> 간 중복 제거
✅ 2. 파일 사이즈 줄이기
✅ 3. 스프라이트(SVG Sprite)로 관리
- 다수의 아이콘을 하나의 SVG 파일에 통합
- <symbol> 태그로 구분 후 <use>로 호출
- HTTP 요청 수 감소 → 웹 성능 개선
4. 접근성과 SEO 고려하기
요소설명
| <title> 태그 | 스크린리더용 텍스트 제공 |
| <aria-hidden="true"> | 장식용 아이콘은 숨김 처리 |
| role="img" | 이미지 역할 명시 |
| ALT 텍스트 | <img>로 사용할 경우엔 반드시 포함 |
→ 사용자 경험과 웹 접근성 준수에 도움
5. 자주 묻는 질문 (Q&A)
Q1. PNG 아이콘보다 SVG가 항상 좋은가요?
A. 웹에서 해상도 독립성, 용량, 제어성 측면에서 SVG가 대부분 더 우수합니다.
단, 복잡한 일러스트나 브라우저 호환이 필요한 경우 PNG가 나을 수 있습니다.
Q2. Figma나 일러스트레이터에서 SVG 내보낼 때 주의할 점은?
A.
- 아트보드는 정사각형으로 설정
- 불필요한 그룹/레이어 제거
- “최적화된 SVG로 저장” 또는 플러그인 활용
- ViewBox 누락되지 않도록 확인
Q3. 아이콘의 색을 CSS로 바꾸고 싶어요
A. SVG 내부에서 fill="currentColor"를 사용하면
부모 엘리먼트의 color 속성으로 제어 가능합니다.
→ 다크모드, hover 효과 등에 유리
6. SVG 아이콘 제작 & 최적화 요약표
항목권장 기준
| 아트보드 크기 | 24x24, 32x32 등 정사각형 |
| ViewBox | 필수 설정 |
| 색상 | currentColor로 제어 |
| 최적화 툴 | SVGOMG, SVGO |
| 접근성 | title, role, aria 속성 활용 |
| 성능 향상 | SVG Sprite 사용 권장 |
댓글