### SVG 기반 아이콘 시스템 작성 방법 SVG 기반 아이콘 시스템은 웹 프로젝트에서 아이콘을 효율적으로 관리하고 사용하는 방법을 제공합니다. SVG의 장점인 확장성, 작은 파일 크기, 스타일링 유연성을 활용하여 일관성 있고 유지보수가 쉬운 아이콘 시스템을 구축할 수 있습니다. 아래에서는 SVG 아이콘 시스템의 작성 방법, 장점, 그리고 실무 예시를 설명합니다. --- ### SVG 아이콘 시스템의 장점 1. **확장성**: 해상도에 상관없이 선명함 유지. 2. **스타일링**: CSS로 색상, 크기 등을 동적으로 변경 가능. 3. **효율성**: 단일 파일에 여러 아이콘을 포함해 HTTP 요청 감소. 4. **재사용성**: ``과 ``로 동일한 아이콘을 여러 곳에서 재활용. 5. **애니메이션**: SVG의 동적 특성을 활용해 인터랙티브한 효과 추가 가능. --- ### SVG 아이콘 시스템 작성 방법 SVG 아이콘 시스템은 주로 ``과 `` 요소를 활용해 구현됩니다. 다음은 단계별 과정입니다. #### 1. 아이콘 정의: `` 사용 - 각 아이콘을 `` 태그로 정의하고, 고유한 `id`를 부여합니다. - `viewBox` 속성을 사용해 내부 좌표계를 설정하여 크기 조정이 용이하도록 합니다. #### 2. 아이콘 호출: ``로 재사용 - `` 태그로 ``을 참조하며, 필요에 따라 위치(`x`, `y`)와 크기(`width`, `height`)를 조정합니다. - CSS로 스타일링을 추가 적용 가능. #### 3. 단일 파일로 통합 - 모든 아이콘을 하나의 SVG 파일에 포함하거나, HTML에 인라인으로 삽입합니다. #### 4. 최적화 및 관리 - 불필요한 속성을 제거하고, SVGO 같은 도구로 최적화합니다. - 아이콘 이름을 체계적으로 관리(예: `icon-arrow`, `icon-star`). --- ### 예시: SVG 아이콘 시스템 구현 #### 단일 SVG 파일로 아이콘 시스템 작성 ```xml ``` #### HTML에서 사용 ```html ``` - `currentColor`를 사용해 부모 요소의 색상을 상속받아 스타일링 유연성 확보. --- ### 실무에서의 활용 및 추가 기법 #### 1. CSS로 동적 스타일링 ```css .icon--large { width: 48px; height: 48px; } .icon--red { fill: red; } ``` ```html ``` #### 2. JavaScript로 인터랙션 추가 ```html ``` - 클릭 시 색상 토글. #### 3. 스프라이트 파일 관리 - 모든 아이콘을 `icons.svg`로 통합하고, 웹팩이나 Gulp로 빌드 과정에서 번들링. - 캐싱을 활용해 로딩 속도 개선. #### 4. 접근성 고려 - `` 태그로 설명 추가: ```xml <symbol id="icon-arrow" viewBox="0 0 24 24"> <title>Arrow Icon ``` - 스크린 리더가 아이콘의 목적을 인식하도록 지원. #### 5. 최적화 - SVGO로 파일 크기 축소: ```bash svgo icons.svg -o icons-optimized.svg ``` - 불필요한 속성 제거 및 경로 단순화. --- ### 장단점 및 주의사항 #### 장점 - **유연성**: 크기와 색상을 동적으로 조정 가능. - **효율성**: 단일 파일로 여러 아이콘 관리. - **성능**: 이미지 파일 대비 HTTP 요청 감소. #### 단점 및 주의사항 - **브라우저 호환성**: ``의 외부 파일 참조는 CORS 설정 필요. - **복잡성**: 아이콘 수가 많아지면 파일 관리가 어려울 수 있음. - **렌더링 부담**: 지나치게 복잡한 SVG는 성능에 영향을 줄 수 있음. --- ### 결론 SVG 기반 아이콘 시스템은 ``과 ``를 활용해 재사용성과 유지보수성을 극대화하며, CSS와 JavaScript로 동적 제어가 가능합니다. 실무에서는 단일 SVG 파일로 아이콘을 통합하고, 최적화 도구를 사용해 성능을 개선하며, 접근성을 고려한 구조를 설계하는 것이 중요합니다. 위 예시를 기반으로 프로젝트의 요구사항에 맞게 커스터마이징하면, 효율적이고 확장 가능한 아이콘 시스템을 구축할 수 있습니다. 이 접근법은 웹 애플리케이션, UI 라이브러리, 디자인 시스템에서 특히 유용합니다.