|
| 1 | +--- |
| 2 | +title: 실험적 SVG 최적화 |
| 3 | +sidebar: |
| 4 | + label: SVG 최적화 |
| 5 | +i18nReady: true |
| 6 | +--- |
| 7 | + |
| 8 | +import Since from '~/components/Since.astro' |
| 9 | + |
| 10 | +<p> |
| 11 | + |
| 12 | +**타입:** `boolean | object`<br /> |
| 13 | +**기본값:** `false`<br /> |
| 14 | +<Since v="5.16.0" /> |
| 15 | +</p> |
| 16 | + |
| 17 | +이 실험적인 기능은 빌드 시점에 [SVGO](https://svgo.dev/)를 사용하여 [SVG 컴포넌트](/ko/guides/images/#svg-컴포넌트)를 자동으로 최적화합니다. |
| 18 | + |
| 19 | +이 기능을 활성화하면 컴포넌트로 사용되는 SVG 파일이 시각적 품질을 유지하면서 더 작은 파일 크기와 더 나은 성능을 위해 최적화됩니다. 이를 통해 불필요한 메타데이터, 주석, 중복된 코드를 제거하여 SVG 자산의 크기를 크게 줄일 수 있습니다. |
| 20 | + |
| 21 | +이 기능을 활성화하려면 Astro 구성에서 `true`로 설정하세요. |
| 22 | + |
| 23 | +```js title="astro.config.mjs" ins={5} |
| 24 | +import { defineConfig } from "astro/config" |
| 25 | + |
| 26 | +export default defineConfig({ |
| 27 | + experimental: { |
| 28 | + svgo: true |
| 29 | + } |
| 30 | +}) |
| 31 | +``` |
| 32 | + |
| 33 | +## 사용 방법 |
| 34 | + |
| 35 | +이 기능을 활용하기 위해 SVG 컴포넌트의 사용 방법을 변경할 필요는 없습니다. 실험적 `svgo`를 활성화하면 가져온 모든 SVG 컴포넌트 파일이 자동으로 최적화됩니다. |
| 36 | + |
| 37 | +```astro title="src/pages/index.astro" |
| 38 | +--- |
| 39 | +import Logo from '../assets/logo.svg'; |
| 40 | +--- |
| 41 | +
|
| 42 | +<Logo /> |
| 43 | +``` |
| 44 | + |
| 45 | +SVG는 빌드 과정에서 최적화되어 프로덕션 빌드 시 파일 크기를 줄입니다. |
| 46 | + |
| 47 | +이 최적화는 프로젝트 내 모든 SVG 컴포넌트 가져오기에 적용됩니다. 특정 컴포넌트를 제외할 수는 없습니다. |
| 48 | + |
| 49 | +## 구성 |
| 50 | + |
| 51 | +최적화 동작을 사용자 정의하기 위해 [SVGO 구성 객체](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335)를 전달할 수 있습니다. |
| 52 | + |
| 53 | +```js title="astro.config.mjs" |
| 54 | +export default defineConfig({ |
| 55 | + experimental: { |
| 56 | + svgo: { |
| 57 | + plugins: [ |
| 58 | + 'preset-default', |
| 59 | + { |
| 60 | + name: 'removeViewBox', |
| 61 | + active: false |
| 62 | + } |
| 63 | + ] |
| 64 | + } |
| 65 | + } |
| 66 | +}) |
| 67 | +``` |
| 68 | + |
| 69 | +### `plugins` |
| 70 | + |
| 71 | +**타입:** `Array<string | PluginConfig>`<br /> |
| 72 | +**기본값:** `[]` |
| 73 | + |
| 74 | +SVG 컴포넌트 가져오기를 최적화하는 데 사용될 [SVGO 플러그인](https://svgo.dev/docs/plugins/)의 배열입니다. |
| 75 | + |
| 76 | +이는 SVGO의 `preset-default` 플러그인 모음을 포함하여 ID 이름으로 모든 플러그인을 포함할 수 있습니다. 플러그인은 필요에 따라 활성화하거나 비활성화하기 위해 `name`과 `active` 상태를 모두 포함하는 객체로 전달될 수도 있습니다. |
| 77 | + |
| 78 | +```js title="astro.config.mjs" |
| 79 | +export default defineConfig({ |
| 80 | + experimental: { |
| 81 | + svgo: { |
| 82 | + plugins: [ |
| 83 | + 'preset-default', |
| 84 | + { |
| 85 | + name: 'removeViewBox', |
| 86 | + active: false |
| 87 | + } |
| 88 | + ] |
| 89 | + } |
| 90 | + } |
| 91 | +}) |
| 92 | +``` |
| 93 | + |
| 94 | +### 기타 구성 옵션 |
| 95 | + |
| 96 | +[다른 SVGO 구성 옵션](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335)(예: `floatPrecision` 및 `multipass`)을 구성 객체에 직접 전달할 수도 있습니다. |
| 97 | + |
| 98 | +```js title="astro.config.mjs" |
| 99 | +export default defineConfig({ |
| 100 | + experimental: { |
| 101 | + svgo: { |
| 102 | + floatPrecision: 2, |
| 103 | + multipass: true |
| 104 | + } |
| 105 | + } |
| 106 | +}) |
| 107 | +``` |
| 108 | + |
| 109 | +## 일반적인 사용 사례 |
| 110 | + |
| 111 | +SVGO는 각 플러그인을 개별적으로 추가하는 것보다 더 편리한 최적화가 포함된 다양한 [기본 플러그인 목록](https://svgo.dev/docs/preset-default/)을 제공합니다. 하지만 필요에 따라 더 구체적으로 사용자 정의해야 할 수도 있습니다. 예를 들어, 특정 항목을 제거하거나 상황에 따라 더 적극적으로 정리할 수 있습니다. |
| 112 | + |
| 113 | +### 특정 속성 유지하기 |
| 114 | + |
| 115 | +SVGO가 기본적으로 제거하는 `viewBox`와 같은 특정 SVG 속성을 유지하고 싶을 수도 있습니다. |
| 116 | + |
| 117 | +```js title="astro.config.mjs" |
| 118 | +export default defineConfig({ |
| 119 | + experimental: { |
| 120 | + svgo: { |
| 121 | + plugins: [ |
| 122 | + 'preset-default', |
| 123 | + { |
| 124 | + name: 'removeViewBox', |
| 125 | + active: false // viewBox 속성을 유지합니다. |
| 126 | + } |
| 127 | + ] |
| 128 | + } |
| 129 | + } |
| 130 | +}) |
| 131 | +``` |
| 132 | + |
| 133 | +### 특정 요소 제거하기 |
| 134 | + |
| 135 | +플러그인을 구성하여 메타데이터 또는 숨겨진 레이어와 같이 원치 않는 특정 요소를 제거할 수 있습니다. 많은 플러그인이 이미 `preset-default`에 포함되어 있으므로 해당 동작만 구성하면 됩니다. |
| 136 | + |
| 137 | +```js title="astro.config.mjs" |
| 138 | +export default defineConfig({ |
| 139 | + experimental: { |
| 140 | + svgo: { |
| 141 | + plugins: [ |
| 142 | + 'preset-default', |
| 143 | + { |
| 144 | + name: 'removeMetadata', |
| 145 | + active: true |
| 146 | + } |
| 147 | + ] |
| 148 | + } |
| 149 | + } |
| 150 | +}) |
| 151 | +``` |
| 152 | + |
| 153 | +### 정밀도 사용자 정의하기 |
| 154 | + |
| 155 | +경로 데이터의 숫자 값 정밀도를 제어합니다. |
| 156 | + |
| 157 | +```js title="astro.config.mjs" |
| 158 | +export default defineConfig({ |
| 159 | + experimental: { |
| 160 | + svgo: { |
| 161 | + floatPrecision: 2 |
| 162 | + } |
| 163 | + } |
| 164 | +}) |
| 165 | +``` |
| 166 | + |
| 167 | +## 동작 방식 |
| 168 | + |
| 169 | +SVG 최적화는 런타임이 아닌 빌드 과정에서 발생합니다. |
| 170 | + |
| 171 | +- **개발 모드**에서는 더 빠른 재빌드 시간과 원활한 개발 경험을 보장하기 위해 SVG 파일이 최적화되지 않습니다. |
| 172 | +- **프로덕션 빌드**에서는 가져온 모든 SVG 파일이 빌드 과정에서 한 번 최적화되어 파일 크기를 줄입니다. |
| 173 | +- **런타임 오버헤드**는 없으며, 최적화된 SVG는 사전 처리된 정적 자산으로 제공됩니다. |
| 174 | + |
| 175 | +최적화 과정에서 빌드 시간이 약간 증가할 수 있지만, 사용자에게 더 작은 파일 크기와 더 빠른 페이지 로드를 제공합니다. |
| 176 | + |
| 177 | +## 추가 자료 |
| 178 | + |
| 179 | +- [SVGO 문서](https://svgo.dev/) |
0 commit comments