2025-03-14T13:00:37

2025-03-14 13:00:37 +09:00
parent e6370a4a32
commit db94e7ced9
13 changed files with 2012 additions and 0 deletions
--- a/doc/svg/14_실무에서
+++ b/doc/svg/14_실무에서
@@ -0,0 +1,158 @@
+### 실무에서 자주 쓰이는 SVG 활용 사례
+
+SVG(Scalable Vector Graphics)는 웹 개발과 디자인에서 점점 더 중요한 역할을 하고 있으며, 실무에서 다양한 용도로 활용됩니다. SVG의 확장성, 경량화, 스타일링 유연성, 그리고 동적 제어 가능성은 현대 웹 애플리케이션에서 필수적인 요소로 자리 잡았습니다. 아래에서는 실무에서 자주 사용되는 SVG 활용 사례를 구체적인 예시와 함께 소개합니다.
+
+---
+
+### 1. 아이콘 시스템
+SVG는 아이콘을 관리하고 사용하는 데 가장 널리 활용됩니다. `<symbol>`과 `<use>`를 통해 재사용 가능한 아이콘 시스템을 구축할 수 있습니다.
+
+- **활용 사례**: 웹사이트의 버튼, 메뉴, 상태 표시.
+- **예시**:
+  ```html
+  <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>`를 사용해 막대그래프, 선그래프, 파이차트를 구현합니다.
+
+- **활용 사례**: 대시보드, 보고서, 분석 도구.
+- **예시**: 동적 막대그래프
+  ```html
+  <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는 기업 로고나 브랜딩 그래픽을 반응형으로 표시하는 데 자주 사용됩니다.
+
+- **활용 사례**: 웹사이트 헤더, 푸터, 모바일 앱.
+- **예시**:
+  ```html
+  <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 요소에 활용됩니다.
+
+- **활용 사례**: 폼 컨트롤, 대시보드 위젯.
+- **예시**: 진행률 게이지
+  ```html
+  <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를 활용해 로딩 스피너나 동적 효과를 만드는데 유용합니다.
+
+- **활용 사례**: 페이지 로딩, 데이터 처리 중 표시.
+- **예시**: 로딩 스피너
+  ```html
+  <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>`)이나 복잡한 일러스트를 배경으로 사용하기에 적합합니다.
+
+- **활용 사례**: 웹사이트 배경, 헤더 장식.
+- **예시**: 반복 패턴
+  ```html
+  <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.
+- **예시**: 간단한 지역 표시
+  ```html
+  <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>
+  ```
+- **장점**: 호버, 클릭 이벤트로 상호작용 추가 가능.
+
+---
+
+### 실무 팁 및 도구
+
+1. **최적화**: SVGO로 파일 크기 줄이고 불필요한 속성 제거.
+   - `svgo input.svg -o output.svg`
+2. **라이브러리 활용**: D3.js로 복잡한 데이터 시각화, GSAP로 부드러운 애니메이션.
+3. **반응형 디자인**: `viewBox`와 CSS 미디어 쿼리로 다양한 화면 대응.
+4. **접근성**: `<title>`과 ARIA 속성으로 스크린 리더 지원.
+
+---
+
+### 결론
+
+SVG는 실무에서 아이콘, 데이터 시각화, 로고, UI 요소, 애니메이션, 배경, 지도 등 다양한 영역에서 활용됩니다. 그 유연성과 경량화 특성은 웹 성능과 사용자 경험을 동시에 개선하며, JavaScript와 CSS와의 통합으로 동적이고 인터랙티브한 결과물을 제공합니다. 실무에서는 프로젝트 요구사항에 따라 최적화와 반응형 설계를 고려해 SVG를 전략적으로 사용하면 효율성과 품질을 모두 충족할 수 있습니다. 위 사례를 참고해 적절히 커스터마이징하면 강력한 SVG 기반 솔루션을 구현할 수 있습니다.