158 lines
6.5 KiB
Markdown
158 lines
6.5 KiB
Markdown
### 실무에서 자주 쓰이는 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 기반 솔루션을 구현할 수 있습니다. |