html-examples/doc/svg/14_실무에서 자주 쓰이는 SVG 활용 사례.md at db94e7ced96ea390fc72fa4280c1c8e17f732023

Files

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

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

6.5 KiB

Raw Blame History

실무에서 자주 쓰이는 SVG 활용 사례

SVG(Scalable Vector Graphics)는 웹 개발과 디자인에서 점점 더 중요한 역할을 하고 있으며, 실무에서 다양한 용도로 활용됩니다. SVG의 확장성, 경량화, 스타일링 유연성, 그리고 동적 제어 가능성은 현대 웹 애플리케이션에서 필수적인 요소로 자리 잡았습니다. 아래에서는 실무에서 자주 사용되는 SVG 활용 사례를 구체적인 예시와 함께 소개합니다.

1. 아이콘 시스템

SVG는 아이콘을 관리하고 사용하는 데 가장 널리 활용됩니다. <symbol>과 <use>를 통해 재사용 가능한 아이콘 시스템을 구축할 수 있습니다.

활용 사례: 웹사이트의 버튼, 메뉴, 상태 표시.

예시:

<svg style="display: none;">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
    <line x1="16" y1="16" x2="22" y2="22" stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>
<button>
  <svg width="24" height="24"><use href="#icon-search"/></svg> Search
</button>

장점: CSS로 색상 변경(fill: blue), 크기 조정(width: 48px)이 용이하며, 단일 파일로 관리해 HTTP 요청 감소.

2. 데이터 시각화 (차트 및 그래프)

SVG는 동적인 데이터 시각화에 적합하며, <rect>, <circle>, <path>를 사용해 막대그래프, 선그래프, 파이차트를 구현합니다.

활용 사례: 대시보드, 보고서, 분석 도구.

예시: 동적 막대그래프

<svg id="chart" width="100%" height="200" viewBox="0 0 400 200">
  <g id="bars"></g>
</svg>
<script>
  const data = [50, 100, 75, 120];
  const barsGroup = document.getElementById("bars");
  data.forEach((value, i) => {
    const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    bar.setAttribute("x", i * 100);
    bar.setAttribute("y", 200 - value);
    bar.setAttribute("width", "80");
    bar.setAttribute("height", value);
    bar.setAttribute("fill", "teal");
    barsGroup.appendChild(bar);
  });
</script>

장점: JavaScript로 실시간 데이터 반영, CSS로 스타일링 가능.

3. 로고 및 브랜딩 요소

SVG는 기업 로고나 브랜딩 그래픽을 반응형으로 표시하는 데 자주 사용됩니다.

활용 사례: 웹사이트 헤더, 푸터, 모바일 앱.

예시:

<svg width="100%" height="auto" viewBox="0 0 200 50">
  <rect x="0" y="0" width="200" height="50" fill="#333"/>
  <text x="100" y="35" fill="white" text-anchor="middle" font-size="20">Brand</text>
</svg>

장점: viewBox로 크기 조정 시 비율 유지, 다양한 화면에서 선명함 보장.

4. 인터랙티브 UI 요소

SVG는 버튼, 슬라이더, 진행률 표시 등 인터랙티브한 UI 요소에 활용됩니다.

활용 사례: 폼 컨트롤, 대시보드 위젯.

예시: 진행률 게이지

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="lightgray" stroke-width="10"/>
  <circle id="progress" cx="50" cy="50" r="40" fill="none" stroke="orange" stroke-width="10" 
          stroke-dasharray="251.2" stroke-dashoffset="251.2"/>
</svg>
<script>
  const progress = document.getElementById("progress");
  progress.addEventListener("click", () => {
    const offset = Math.random() * 251.2;
    progress.setAttribute("stroke-dashoffset", offset);
  });
</script>

장점: 이벤트 처리와 애니메이션으로 사용자 경험 개선.

5. 애니메이션 및 로딩 인디케이터

SVG는 <animate>, CSS, JavaScript를 활용해 로딩 스피너나 동적 효과를 만드는데 유용합니다.

활용 사례: 페이지 로딩, 데이터 처리 중 표시.

예시: 로딩 스피너

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="blue" stroke-width="4" stroke-dasharray="31.4">
    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" 
                      dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

장점: 경량화된 애니메이션으로 성능 영향 최소화.

6. 배경 패턴 및 일러스트레이션

SVG는 반복 패턴(<pattern>)이나 복잡한 일러스트를 배경으로 사용하기에 적합합니다.

활용 사례: 웹사이트 배경, 헤더 장식.

예시: 반복 패턴

<svg width="100%" height="100%">
  <defs>
    <pattern id="pat" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="lightblue"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#pat)"/>
</svg>

장점: CSS로 동적 크기 조정 가능, 파일 크기 작음.

7. 지도 및 위치 기반 시각화

SVG는 <path>로 지도 데이터를 표현하며, 인터랙티브한 맵을 구현할 수 있습니다.

활용 사례: 지역별 통계, 내비게이션 UI.

예시: 간단한 지역 표시

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M50 50L150 50L150 150L50 150Z" fill="gray" stroke="black"/>
  <circle cx="100" cy="100" r="10" fill="red" class="marker"/>
</svg>
<style>
  .marker:hover { fill: orange; }
</style>

장점: 호버, 클릭 이벤트로 상호작용 추가 가능.

실무 팁 및 도구

최적화: SVGO로 파일 크기 줄이고 불필요한 속성 제거.
- svgo input.svg -o output.svg
라이브러리 활용: D3.js로 복잡한 데이터 시각화, GSAP로 부드러운 애니메이션.
반응형 디자인: viewBox와 CSS 미디어 쿼리로 다양한 화면 대응.
접근성: <title>과 ARIA 속성으로 스크린 리더 지원.

결론

SVG는 실무에서 아이콘, 데이터 시각화, 로고, UI 요소, 애니메이션, 배경, 지도 등 다양한 영역에서 활용됩니다. 그 유연성과 경량화 특성은 웹 성능과 사용자 경험을 동시에 개선하며, JavaScript와 CSS와의 통합으로 동적이고 인터랙티브한 결과물을 제공합니다. 실무에서는 프로젝트 요구사항에 따라 최적화와 반응형 설계를 고려해 SVG를 전략적으로 사용하면 효율성과 품질을 모두 충족할 수 있습니다. 위 사례를 참고해 적절히 커스터마이징하면 강력한 SVG 기반 솔루션을 구현할 수 있습니다.

6.5 KiB Raw Blame History