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/11_SVG
+++ b/doc/svg/11_SVG
@@ -0,0 +1,159 @@
+### 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 라이브러리, 디자인 시스템에서 특히 유용합니다.