html-examples/doc/svg/11_SVG 기반 아이콘 시스템.md at db94e7ced96ea390fc72fa4280c1c8e17f732023

Files

Elex db94e7ced9 2025-03-14T13:00:37

2025-03-14 13:00:37 +09:00

5.7 KiB

Raw Blame History

SVG 기반 아이콘 시스템 작성 방법

SVG 기반 아이콘 시스템은 웹 프로젝트에서 아이콘을 효율적으로 관리하고 사용하는 방법을 제공합니다. SVG의 장점인 확장성, 작은 파일 크기, 스타일링 유연성을 활용하여 일관성 있고 유지보수가 쉬운 아이콘 시스템을 구축할 수 있습니다. 아래에서는 SVG 아이콘 시스템의 작성 방법, 장점, 그리고 실무 예시를 설명합니다.

SVG 아이콘 시스템의 장점

확장성: 해상도에 상관없이 선명함 유지.
스타일링: CSS로 색상, 크기 등을 동적으로 변경 가능.
효율성: 단일 파일에 여러 아이콘을 포함해 HTTP 요청 감소.
재사용성: <symbol>과 <use>로 동일한 아이콘을 여러 곳에서 재활용.
애니메이션: SVG의 동적 특성을 활용해 인터랙티브한 효과 추가 가능.

SVG 아이콘 시스템 작성 방법

SVG 아이콘 시스템은 주로 <symbol>과 <use> 요소를 활용해 구현됩니다. 다음은 단계별 과정입니다.

1. 아이콘 정의: `<symbol>` 사용

각 아이콘을 <symbol> 태그로 정의하고, 고유한 id를 부여합니다.
viewBox 속성을 사용해 내부 좌표계를 설정하여 크기 조정이 용이하도록 합니다.

2. 아이콘 호출: `<use>`로 재사용

<use> 태그로 <symbol>을 참조하며, 필요에 따라 위치(x, y)와 크기(width, height)를 조정합니다.
CSS로 스타일링을 추가 적용 가능.

3. 단일 파일로 통합

모든 아이콘을 하나의 SVG 파일에 포함하거나, HTML에 인라인으로 삽입합니다.

4. 최적화 및 관리

불필요한 속성을 제거하고, SVGO 같은 도구로 최적화합니다.
아이콘 이름을 체계적으로 관리(예: icon-arrow, icon-star).

예시: SVG 아이콘 시스템 구현

단일 SVG 파일로 아이콘 시스템 작성

<!-- icons.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-arrow" viewBox="0 0 24 24">
    <path d="M4 12h12m-6-6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none"/>
  </symbol>
  <symbol id="icon-star" viewBox="0 0 24 24">
    <polygon points="12,2 15,9 22,9 17,14 18,21 12,17 6,21 7,14 2,9 9,9" fill="currentColor"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M4 12l5 5 10-10" stroke="currentColor" stroke-width="2" fill="none"/>
  </symbol>
</svg>

HTML에서 사용

<!DOCTYPE html>
<html>
<head>
  <style>
    .icon {
      width: 24px;
      height: 24px;
      fill: none; /* 기본값 설정 */
    }
    .icon:hover {
      fill: blue; /* 호버 시 색상 변경 */
    }
  </style>
</head>
<body>
  <!-- 외부 SVG 파일 참조 -->
  <svg class="icon"><use href="icons.svg#icon-arrow"/></svg>
  <svg class="icon"><use href="icons.svg#icon-star"/></svg>
  <svg class="icon"><use href="icons.svg#icon-check"/></svg>

  <!-- 인라인 SVG로 직접 삽입 -->
  <svg style="display: none;">
    <symbol id="icon-arrow" viewBox="0 0 24 24">
      <path d="M4 12h12m-6-6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none"/>
    </symbol>
  </svg>
  <svg class="icon"><use href="#icon-arrow"/></svg>
</body>
</html>

currentColor를 사용해 부모 요소의 색상을 상속받아 스타일링 유연성 확보.

실무에서의 활용 및 추가 기법

1. CSS로 동적 스타일링

.icon--large {
  width: 48px;
  height: 48px;
}
.icon--red {
  fill: red;
}

<svg class="icon icon--large icon--red"><use href="#icon-star"/></svg>

2. JavaScript로 인터랙션 추가

<svg id="starIcon" class="icon"><use href="#icon-star"/></svg>
<script>
  const star = document.getElementById("starIcon");
  star.addEventListener("click", () => {
    star.classList.toggle("icon--red");
  });
</script>

클릭 시 색상 토글.

3. 스프라이트 파일 관리

모든 아이콘을 icons.svg로 통합하고, 웹팩이나 Gulp로 빌드 과정에서 번들링.
캐싱을 활용해 로딩 속도 개선.

4. 접근성 고려

<title> 태그로 설명 추가:

<symbol id="icon-arrow" viewBox="0 0 24 24">
  <title>Arrow Icon</title>
  <path d="M4 12h12m-6-6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none"/>
</symbol>

스크린 리더가 아이콘의 목적을 인식하도록 지원.

5. 최적화

SVGO로 파일 크기 축소:
```
svgo icons.svg -o icons-optimized.svg
```
불필요한 속성 제거 및 경로 단순화.

장단점 및 주의사항

장점

유연성: 크기와 색상을 동적으로 조정 가능.
효율성: 단일 파일로 여러 아이콘 관리.
성능: 이미지 파일 대비 HTTP 요청 감소.

단점 및 주의사항

브라우저 호환성: <use>의 외부 파일 참조는 CORS 설정 필요.
복잡성: 아이콘 수가 많아지면 파일 관리가 어려울 수 있음.
렌더링 부담: 지나치게 복잡한 SVG는 성능에 영향을 줄 수 있음.

결론

SVG 기반 아이콘 시스템은 <symbol>과 <use>를 활용해 재사용성과 유지보수성을 극대화하며, CSS와 JavaScript로 동적 제어가 가능합니다. 실무에서는 단일 SVG 파일로 아이콘을 통합하고, 최적화 도구를 사용해 성능을 개선하며, 접근성을 고려한 구조를 설계하는 것이 중요합니다. 위 예시를 기반으로 프로젝트의 요구사항에 맞게 커스터마이징하면, 효율적이고 확장 가능한 아이콘 시스템을 구축할 수 있습니다. 이 접근법은 웹 애플리케이션, UI 라이브러리, 디자인 시스템에서 특히 유용합니다.

5.7 KiB Raw Blame History