159 lines
5.7 KiB
Markdown
159 lines
5.7 KiB
Markdown
### SVG 기반 아이콘 시스템 작성 방법
|
|
|
|
SVG 기반 아이콘 시스템은 웹 프로젝트에서 아이콘을 효율적으로 관리하고 사용하는 방법을 제공합니다. SVG의 장점인 확장성, 작은 파일 크기, 스타일링 유연성을 활용하여 일관성 있고 유지보수가 쉬운 아이콘 시스템을 구축할 수 있습니다. 아래에서는 SVG 아이콘 시스템의 작성 방법, 장점, 그리고 실무 예시를 설명합니다.
|
|
|
|
---
|
|
|
|
### SVG 아이콘 시스템의 장점
|
|
|
|
1. **확장성**: 해상도에 상관없이 선명함 유지.
|
|
2. **스타일링**: CSS로 색상, 크기 등을 동적으로 변경 가능.
|
|
3. **효율성**: 단일 파일에 여러 아이콘을 포함해 HTTP 요청 감소.
|
|
4. **재사용성**: `<symbol>`과 `<use>`로 동일한 아이콘을 여러 곳에서 재활용.
|
|
5. **애니메이션**: 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 파일로 아이콘 시스템 작성
|
|
```xml
|
|
<!-- 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에서 사용
|
|
```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로 동적 스타일링
|
|
```css
|
|
.icon--large {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.icon--red {
|
|
fill: red;
|
|
}
|
|
```
|
|
```html
|
|
<svg class="icon icon--large icon--red"><use href="#icon-star"/></svg>
|
|
```
|
|
|
|
#### 2. JavaScript로 인터랙션 추가
|
|
```html
|
|
<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>` 태그로 설명 추가:
|
|
```xml
|
|
<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로 파일 크기 축소:
|
|
```bash
|
|
svgo icons.svg -o icons-optimized.svg
|
|
```
|
|
- 불필요한 속성 제거 및 경로 단순화.
|
|
|
|
---
|
|
|
|
### 장단점 및 주의사항
|
|
|
|
#### 장점
|
|
- **유연성**: 크기와 색상을 동적으로 조정 가능.
|
|
- **효율성**: 단일 파일로 여러 아이콘 관리.
|
|
- **성능**: 이미지 파일 대비 HTTP 요청 감소.
|
|
|
|
#### 단점 및 주의사항
|
|
- **브라우저 호환성**: `<use>`의 외부 파일 참조는 CORS 설정 필요.
|
|
- **복잡성**: 아이콘 수가 많아지면 파일 관리가 어려울 수 있음.
|
|
- **렌더링 부담**: 지나치게 복잡한 SVG는 성능에 영향을 줄 수 있음.
|
|
|
|
---
|
|
|
|
### 결론
|
|
|
|
SVG 기반 아이콘 시스템은 `<symbol>`과 `<use>`를 활용해 재사용성과 유지보수성을 극대화하며, CSS와 JavaScript로 동적 제어가 가능합니다. 실무에서는 단일 SVG 파일로 아이콘을 통합하고, 최적화 도구를 사용해 성능을 개선하며, 접근성을 고려한 구조를 설계하는 것이 중요합니다. 위 예시를 기반으로 프로젝트의 요구사항에 맞게 커스터마이징하면, 효율적이고 확장 가능한 아이콘 시스템을 구축할 수 있습니다. 이 접근법은 웹 애플리케이션, UI 라이브러리, 디자인 시스템에서 특히 유용합니다. |