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/08_SVG
+++ b/doc/svg/08_SVG
@@ -0,0 +1,148 @@
+### SVG 최적화에 대한 가이드
+
+SVG(Scalable Vector Graphics)는 벡터 기반 그래픽으로, 크기 조정 시 품질 저하가 없고 파일 크기가 상대적으로 작아 웹에서 널리 사용됩니다. 그러나 SVG 파일이 불필요한 데이터나 복잡한 구조를 포함하면 성능 저하와 로딩 속도 문제가 발생할 수 있습니다. SVG 최적화는 파일 크기를 줄이고 렌더링 효율성을 높여 웹 성능을 개선하는 과정입니다. 아래에서는 SVG 최적화의 필요성, 주요 기법, 그리고 실무에서의 적용 방법을 설명합니다.
+
+---
+
+### SVG 최적화의 필요성
+
+1. **파일 크기 감소**: 불필요한 메타데이터나 중복 코드가 포함된 SVG는 용량이 커져 페이지 로드 시간을 늘립니다.
+2. **렌더링 성능 향상**: 복잡한 경로(`path`)나 과도한 요소는 브라우저의 렌더링 부담을 가중시킵니다.
+3. **네트워크 효율성**: 모바일 환경에서 작은 파일 크기는 데이터 사용량을 줄이고 사용자 경험을 개선합니다.
+4. **유지보수성**: 최적화된 코드는 읽기 쉽고 수정이 용이합니다.
+
+---
+
+### SVG 최적화 기법
+
+#### 1. 불필요한 메타데이터 제거
+디자인 툴(예: Adobe Illustrator, Sketch)에서 내보낸 SVG 파일은 제작 소프트웨어 정보, 주석, XML 선언 등 불필요한 데이터를 포함합니다.
+
+- **제거 대상**:
+  - `<?xml version="1.0" encoding="UTF-8"?>` (현대 브라우저에서는 생략 가능).
+  - `<metadata>`, `<title>`, `<desc>` 등 사용되지 않는 태그.
+- **예시**:
+  ```xml
+  <!-- Before -->
+  <?xml version="1.0" encoding="UTF-8"?>
+  <svg width="100" height="100">
+    <metadata>Generated by Illustrator</metadata>
+    <circle cx="50" cy="50" r="40"/>
+  </svg>
+
+  <!-- After -->
+  <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg>
+  ```
+
+#### 2. 속성 간소화
+SVG 속성에서 소수점이나 단위를 줄이고 중복된 스타일을 통합합니다.
+
+- **소수점 정밀도 줄이기**: `cx="50.000"` → `cx="50`.
+- **단위 생략**: SVG는 기본적으로 단위가 사용자 단위로 간주되므로 `px` 생략 가능.
+- **중복 스타일 통합**: `<g>` 태그나 CSS로 공통 스타일 적용.
+- **예시**:
+  ```xml
+  <!-- Before -->
+  <svg width="100.00px" height="100.00px">
+    <circle cx="50.000" cy="50.000" r="40.000" fill="#ff0000"/>
+    <rect x="10.000" y="10.000" width="20.000" height="20.000" fill="#ff0000"/>
+  </svg>
+
+  <!-- After -->
+  <svg width="100" height="100">
+    <g fill="red">
+      <circle cx="50" cy="50" r="40"/>
+      <rect x="10" y="10" width="20" height="20"/>
+    </g>
+  </svg>
+  ```
+
+#### 3. 경로 데이터(`path`) 최적화
+`<path>` 요소의 `d` 속성은 복잡한 좌표로 인해 길어질 수 있습니다.
+
+- **명령어 단순화**: 동일한 명령어 반복 시 좌표만 나열(예: `L10 10 L20 20` → `L10 10 20 20`).
+- **상대 좌표 사용**: `m`, `l` 등으로 절대 좌표보다 짧게 표현.
+- **점 개수 줄이기**: 베지어 곡선에서 불필요한 점 제거.
+- **예시**:
+  ```xml
+  <!-- Before -->
+  <path d="M10 10 L20 20 L30 30 L40 40" stroke="black"/>
+
+  <!-- After -->
+  <path d="M10 10l10 10 10 10 10 10" stroke="black"/>
+  ```
+
+#### 4. 요소 통합 및 간소화
+중복되거나 불필요한 요소를 제거하고, 복잡한 도형을 단순화합니다.
+
+- **중첩된 `<g>` 제거**: 불필요한 그룹화 해소.
+- **도형 합치기**: 여러 `<path>`를 하나의 경로로 통합.
+- **예시**:
+  ```xml
+  <!-- Before -->
+  <g><g><circle cx="50" cy="50" r="40"/></g></g>
+
+  <!-- After -->
+  <circle cx="50" cy="50" r="40"/>
+  ```
+
+#### 5. 압축 및 인라인 사용
+- **Gzip 압축**: 서버에서 SVG 파일을 압축해 전송.
+- **인라인 SVG**: HTML에 직접 삽입해 HTTP 요청 감소.
+- **예시**:
+  ```html
+  <!-- 외부 파일 대신 -->
+  <img src="icon.svg">
+  <!-- 인라인 사용 -->
+  <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg>
+  ```
+
+#### 6. 최적화 도구 활용
+수작업 외에도 자동화 도구를 사용하면 효율적으로 최적화할 수 있습니다.
+- **SVGO (SVG Optimizer)**: Node.js 기반 도구로 메타데이터 제거, 속성 간소화 등을 자동 수행.
+  - 설치: `npm install -g svgo`
+  - 사용: `svgo input.svg -o output.svg`
+- **온라인 도구**: SVGOMG (SVGO의 웹 버전), Jake Archibald의 SVG Compressor.
+
+---
+
+### 실무 적용 방법
+
+1. **디자인 툴 설정**:
+   - Illustrator에서 "SVG 내보내기" 시 "최소화" 옵션 체크.
+   - Figma에서 "SVG 코드 복사" 후 불필요한 속성 제거.
+
+2. **개발 워크플로우**:
+   - 빌드 과정에 SVGO 통합(예: Webpack 플러그인 `svgo-loader`).
+   - CSS 스프라이트 대신 `<symbol>`과 `<use>`로 아이콘 관리.
+
+3. **성능 테스트**:
+   - 브라우저 개발자 도구로 렌더링 시간 확인.
+   - Lighthouse로 페이지 로드 성능 점검.
+
+#### 최적화 전후 비교
+```xml
+<!-- Before (1.2KB) -->
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100.00px" height="100.00px" xmlns="http://www.w3.org/2000/svg">
+  <metadata>Generated by Tool</metadata>
+  <circle cx="50.000" cy="50.000" r="40.000" fill="#ff0000" stroke="#000000" stroke-width="2.000"/>
+</svg>
+
+<!-- After (0.2KB) -->
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/></svg>
+```
+
+---
+
+### 주의사항
+
+- **기능 유지**: 최적화로 인해 필수 속성(예: `viewBox`)이 제거되지 않도록 확인.
+- **호환성**: 오래된 브라우저를 지원해야 한다면 XML 선언이나 네임스페이스 유지 고려.
+- **테스트**: 최적화 후 시각적 변화가 없는지 반드시 검토.
+
+---
+
+### 결론
+
+SVG 최적화는 파일 크기를 줄이고 렌더링 속도를 높여 웹 성능을 개선하는 필수 과정입니다. 메타데이터 제거, 속성 간소화, 경로 최적화 등의 수작업과 SVGO 같은 도구를 병행하면 효율적인 결과를 얻을 수 있습니다. 실무에서는 디자인 단계부터 최적화를 고려하고, 빌드 프로세스에 자동화를 통합하며, 사용자 경험을 저해하지 않도록 주의 깊게 진행해야 합니다. 최적화된 SVG는 빠른 로딩과 부드러운 인터랙션을 보장하며, 특히 모바일 환경에서 그 가치를 발휘합니다.