SVG 동적 아이콘 시스템 설계: Sprite 시트 활용과 CSS 변수 매핑

웹 서비스 규모가 커지면 아이콘 개수도 수십~수백 개로 증가합니다. 이를 매번 이미지 태그로 별도 로드하면 HTTP 커넥션이 폭증하고, 폰트 파일(`FontAwesome` 등)을 쓰면 용량이 무거워집니다. 가장 탁월한 해법은 단일 SVG Sprite(스프라이트) 파일에 아이콘들을 선언하고 `<use>` 태그로 부분 참조하는 가볍고 성능 좋은 동적 아이콘 시스템 아키텍처입니다.

1. SVG Sprite 시트 파일 구조

하나의 가상 자원 파일(`icons.svg`)에 사용할 모든 심볼을 정의해 둡니다.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <!-- 사용자 아이콘 -->
  <symbol id="icon-user" viewBox="0 0 24 24">
    <circle cx="12" cy="8" r="4" />
    <path d="M12 14c-6.1 0-8 4-8 4h16s-1.9-4-8-4z" />
  </symbol>
  
  <!-- 설정 아이콘 -->
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <!-- 기어 아이콘 패스 -->
  </symbol>
</svg>

2. HTML 본문에서 <use> 노드로 참조하기

실제 로드가 일어날 본문 노드 형태입니다. 브라우저는 단 한 번만 `icons.svg` 파일을 로드하고 캐싱해 둡니다.

<svg class="my-icon">
  <use href="icons.svg#icon-user"></use>
</svg>

"SVG 스프라이트 구조를 채택하면, 기하급수적으로 늘어나는 아이콘 자산들의 전송 비용을 단 한 번의 단일 압축 파일 로딩으로 한계 단축할 수 있습니다."

3. CSS currentColor 및 CSS 변수 동적 색상 매핑

외부 스프라이트 아이콘의 단점은 인라인이 아니라 내부 채우기 색상(`fill`)을 바꾸기 까다롭다는 점입니다. 이를 해결하기 위해 SVG 파일 내부 속성에 `fill="currentColor"`를 지정해 두면, 부모 노드의 텍스트 색상(`color`) 속성을 상속받아 호버(Hover) 시 동적으로 색상이 깔끔하게 변경됩니다.

4. 요약: 최종 14일차 SVG 인사이트를 마치며

지난 2주간 다룬 SVG 드로잉, 필터 효과, 모션, 최적화 기법을 기반으로 가볍고 생동감 넘치면서 호환성까지 완벽한 차세대 그래픽 인터페이스를 실무에 도입해 보시기 바랍니다.