elex/html-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-03-14T13:00:37

Browse Source
This commit is contained in:
Elex
2025-03-14 13:00:37 +09:00
parent e6370a4a32
commit db94e7ced9
13 changed files with 2012 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
doc/svg/00_svg.md Normal file
View File

@@ -0,0 +1,205 @@
SVG의 모든 요소와 그 설명을 표로 정리한 후, 각 요소별 속성을 속성과 설명이 포함된 표로 정리하겠습니다.
---
## 1. SVG 요소 목록
| 요소 | 설명 |
|------|------|
| `<svg>` | SVG 그래픽을 정의하는 루트 요소 |
| `<g>` | 여러 요소를 그룹화하는 컨테이너 |
| `<defs>` | 재사용 가능한 요소(예: 패턴, 필터)를 정의하는 요소 |
| `<symbol>` | 독립적인 그래픽을 정의하고 `<use>` 요소로 재사용할 수 있도록 함 |
| `<use>` | `<symbol>`이나 다른 요소를 참조하여 재사용하는 요소 |
| `<rect>` | 사각형을 그림 |
| `<circle>` | 원을 그림 |
| `<ellipse>` | 타원을 그림 |
| `<line>` | 한 점에서 다른 점까지 선을 그림 |
| `<polyline>` | 여러 선을 연결한 열린 경로를 그림 |
| `<polygon>` | 여러 선을 연결한 닫힌 도형을 그림 |
| `<path>` | 복잡한 곡선 및 선을 그릴 수 있는 자유로운 경로를 정의 |
| `<text>` | 텍스트를 그림 |
| `<tspan>` | `<text>` 내에서 텍스트의 위치나 스타일을 변경하는 요소 |
| `<textPath>` | 경로를 따라 텍스트를 배치하는 요소 |
| `<image>` | 외부 이미지를 SVG 내에 포함 |
| `<clipPath>` | 일부 영역만 표시되도록 마스크 역할을 하는 요소 |
| `<mask>` | 반투명한 마스킹 효과를 줄 때 사용 |
| `<pattern>` | 반복되는 패턴을 정의 |
| `<linearGradient>` | 선형 그라디언트를 정의 |
| `<radialGradient>` | 방사형 그라디언트를 정의 |
| `<stop>` | 그라디언트의 색상 지점을 정의 |
| `<filter>` | 블러, 그림자 등의 그래픽 효과를 정의 |
| `<feGaussianBlur>` | 블러 효과를 적용 |
| `<feOffset>` | 요소의 위치를 이동 |
| `<feColorMatrix>` | 색상을 변환 |
| `<animate>` | 속성에 애니메이션 효과를 추가 |
| `<animateTransform>` | 변형(이동, 회전, 크기 변경) 애니메이션을 적용 |
| `<set>` | 특정 속성을 일정 시간 동안 변경 |
| `<foreignObject>` | SVG 내부에서 HTML 요소를 사용할 수 있도록 함 |
---
## 2. 요소별 속성 목록
### 2.1 `<svg>` 요소 속성
| 속성 | 설명 |
|------|------|
| `width` | SVG의 너비 |
| `height` | SVG의 높이 |
| `viewBox` | 좌표 시스템을 정의하는 영역 (`min-x min-y width height`) |
| `preserveAspectRatio` | 화면 크기에 따른 비율 조정 방식 |
---
### 2.2 `<g>` 요소 속성
| 속성 | 설명 |
|------|------|
| `transform` | 그룹에 변환 효과(이동, 회전 등) 적용 |
| `fill` | 그룹 내 요소의 기본 색상 지정 |
| `stroke` | 그룹 내 요소의 테두리 색상 지정 |
---
### 2.3 `<rect>` 요소 속성
| 속성 | 설명 |
|------|------|
| `x` | 사각형의 좌측 상단 x 좌표 |
| `y` | 사각형의 좌측 상단 y 좌표 |
| `width` | 사각형의 너비 |
| `height` | 사각형의 높이 |
| `rx` | 사각형 모서리의 x 방향 둥근 정도 |
| `ry` | 사각형 모서리의 y 방향 둥근 정도 |
---
### 2.4 `<circle>` 요소 속성
| 속성 | 설명 |
|------|------|
| `cx` | 원의 중심 x 좌표 |
| `cy` | 원의 중심 y 좌표 |
| `r` | 원의 반지름 |
---
### 2.5 `<ellipse>` 요소 속성
| 속성 | 설명 |
|------|------|
| `cx` | 타원의 중심 x 좌표 |
| `cy` | 타원의 중심 y 좌표 |
| `rx` | x 방향 반지름 |
| `ry` | y 방향 반지름 |
---
### 2.6 `<line>` 요소 속성
| 속성 | 설명 |
|------|------|
| `x1` | 선의 시작 x 좌표 |
| `y1` | 선의 시작 y 좌표 |
| `x2` | 선의 끝 x 좌표 |
| `y2` | 선의 끝 y 좌표 |
---
### 2.7 `<polyline>` 요소 속성
| 속성 | 설명 |
|------|------|
| `points` | 여러 점을 정의 (`x1,y1 x2,y2 ...`) |
---
### 2.8 `<polygon>` 요소 속성
| 속성 | 설명 |
|------|------|
| `points` | 다각형을 구성하는 점 좌표 리스트 |
---
### 2.9 `<path>` 요소 속성
| 속성 | 설명 |
|------|------|
| `d` | 경로 데이터 (M, L, C, Q 등 사용) |
| `fill-rule` | 내부 영역 채우기 규칙 (`nonzero` 또는 `evenodd`) |
---
### 2.10 `<text>` 요소 속성
| 속성 | 설명 |
|------|------|
| `x` | 텍스트의 시작 x 좌표 |
| `y` | 텍스트의 시작 y 좌표 |
| `dx` | x 방향 오프셋 |
| `dy` | y 방향 오프셋 |
| `text-anchor` | 텍스트 정렬 (`start`, `middle`, `end`) |
---
### 2.11 `<image>` 요소 속성
| 속성 | 설명 |
|------|------|
| `href` | 이미지 경로 (SVG 2.0부터는 `xlink:href` 대신 사용) |
| `x` | 이미지의 x 좌표 |
| `y` | 이미지의 y 좌표 |
| `width` | 이미지 너비 |
| `height` | 이미지 높이 |
---
### 2.12 `<clipPath>` 요소 속성
| 속성 | 설명 |
|------|------|
| `clipPathUnits` | 좌표 시스템 단위 (`userSpaceOnUse` 또는 `objectBoundingBox`) |
---
### 2.13 `<mask>` 요소 속성
| 속성 | 설명 |
|------|------|
| `maskUnits` | 좌표 단위 (`userSpaceOnUse` 또는 `objectBoundingBox`) |
| `maskContentUnits` | 마스크 내용의 좌표 단위 |
---
### 2.14 `<linearGradient>` 요소 속성
| 속성 | 설명 |
|------|------|
| `x1`, `y1` | 그라디언트 시작점 좌표 |
| `x2`, `y2` | 그라디언트 끝점 좌표 |
---
### 2.15 `<radialGradient>` 요소 속성
| 속성 | 설명 |
|------|------|
| `cx`, `cy` | 방사형 그라디언트 중심 좌표 |
| `r` | 반지름 |
---
### 2.16 `<animate>` 요소 속성
| 속성 | 설명 |
|------|------|
| `attributeName` | 애니메이션할 속성 이름 |
| `from` | 애니메이션 시작 값 |
| `to` | 애니메이션 종료 값 |
| `dur` | 애니메이션 지속 시간 |
---
이 외에도 여러 속성이 있지만, 주요한 요소와 속성을 정리했습니다. 필요한 경우 추가 정보를 요청해 주세요!

148
doc/svg/02_SVG의 기본 구조와 핵심 요소.md Normal file
View File

@@ -0,0 +1,148 @@
### SVG의 기본 구조와 주요 요소들
SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 포맷으로, 웹에서 확장 가능한 그래픽을 표현하는 데 사용됩니다. SVG는 크기를 변경해도 품질이 유지되며, 텍스트로 작성되기 때문에 코드로 직접 편집하거나 스타일링할 수 있는 장점이 있습니다. 아래는 SVG의 기본 구조와 주요 요소들을 예시와 함께 설명한 내용입니다.
#### SVG 기본 구조
SVG 파일은 `<svg>` 태그로 시작하며, 일반적으로 XML 선언과 함께 작성됩니다. 기본 구조는 다음과 같습니다:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 그래픽 요소들이 여기 들어감 -->
</svg>
```
- `width`와 `height`: SVG 캔버스의 크기를 정의합니다.
- `xmlns`: SVG 네임스페이스를 지정하여 브라우저가 이를 SVG로 인식하게 합니다.
#### 주요 요소들
1. **`<svg>`**: 최상위 컨테이너로, 그래픽의 캔버스를 정의합니다.
```xml
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
```
위 코드는 100x100 크기의 캔버스에 중심이 (50, 50)이고 반지름이 40인 빨간 원을 그립니다.
2. **`<g>`**: 요소들을 그룹화하여 스타일이나 변환을 일괄 적용할 때 사용합니다.
```xml
<svg width="200" height="200">
<g fill="blue">
<rect x="10" y="10" width="50" height="50" />
<circle cx="100" cy="100" r="30" />
</g>
</svg>
```
`<g>` 안의 모든 도형에 `fill="blue"`가 적용됩니다.
3. **`<defs>`**: 재사용 가능한 정의(예: 패턴, 그라디언트)를 저장합니다. `<defs>` 안의 요소는 직접 렌더링되지 않습니다.
```xml
<svg width="200" height="200">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<rect x="10" y="10" width="100" height="100" fill="url(#grad1)" />
</svg>
```
그라디언트를 정의하고 사각형에 적용했습니다.
4. **`<symbol>`**: 재사용 가능한 그래픽 템플릿을 정의합니다. `<defs>` 안에 사용되며, `<use>`로 호출됩니다.
```xml
<svg width="200" height="200">
<defs>
<symbol id="star">
<polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" />
</symbol>
</defs>
<use href="#star" x="0" y="0" fill="gold" />
</svg>
```
별 모양을 정의하고 재사용합니다.
5. **`<use>`**: `<symbol>`이나 다른 요소를 참조하여 재사용합니다.
```xml
<svg width="200" height="200">
<defs>
<rect id="box" x="0" y="0" width="50" height="50" />
</defs>
<use href="#box" x="10" y="10" fill="red" />
<use href="#box" x="70" y="70" fill="blue" />
</svg>
```
동일한 사각형을 다른 위치와 색상으로 재사용합니다.
---
### 뷰박스(ViewBox)와 좌표 시스템
#### 뷰박스(ViewBox)
`viewBox` 속성은 SVG 캔버스의 보이는 영역과 좌표계를 정의합니다. 이는 "min-x, min-y, width, height" 형식으로 지정되며, 캔버스의 크기(`width`, `height`)와 독립적으로 내부 콘텐츠의 배율과 위치를 조정합니다.
```xml
<svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="purple" />
</svg>
```
- `viewBox="0 0 100 100"`: 좌표계가 0,0에서 시작해 100x100 단위로 정의됨.
- 실제 캔버스는 200x200px이지만, `viewBox`에 맞춰 콘텐츠가 확대됩니다.
`viewBox`를 사용하면 확대/축소나 특정 영역 포커싱이 가능합니다:
```xml
<svg width="200" height="200" viewBox="25 25 50 50">
<circle cx="50" cy="50" r="40" fill="purple" />
</svg>
```
위 예시는 원의 일부만 보이도록 50x50 영역을 확대합니다.
#### 좌표 시스템
SVG의 좌표계는 왼쪽 위가 (0,0)이며, x는 오른쪽으로, y는 아래로 증가합니다. 단위는 기본적으로 사용자 단위(user units)로, `viewBox`에 따라 상대적으로 해석됩니다.
---
### 기본 도형들
SVG는 다양한 기본 도형을 제공하며, 속성을 통해 크기, 위치, 스타일을 정의합니다.
1. **`<rect>`**: 사각형을 그립니다.
- 속성: `x`, `y` (왼쪽 위 좌표), `width`, `height`, `rx`, `ry` (모서리 둥글기)
```xml
<rect x="10" y="10" width="100" height="50" rx="10" fill="green" />
```
2. **`<circle>`**: 원을 그립니다.
- 속성: `cx`, `cy` (중심 좌표), `r` (반지름)
```xml
<circle cx="50" cy="50" r="30" fill="red" />
```
3. **`<ellipse>`**: 타원을 그립니다.
- 속성: `cx`, `cy` (중심), `rx`, `ry` (가로/세로 반지름)
```xml
<ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" />
```
4. **`<line>`**: 직선을 그립니다.
- 속성: `x1`, `y1` (시작점), `x2`, `y2` (끝점)
```xml
<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />
```
5. **`<polyline>`**: 연속된 선분을 그립니다.
- 속성: `points` (점들의 좌표 목록)
```xml
<polyline points="10,10 50,50 100,20" stroke="orange" fill="none" stroke-width="2" />
```
6. **`<polygon>`**: 다각형을 그립니다. 마지막 점이 첫 점과 자동 연결됩니다.
- 속성: `points`
```xml
<polygon points="50,10 90,90 10,90" fill="yellow" stroke="black" />
```
---
### 결론
SVG는 `<svg>`를 기반으로 다양한 요소와 도형을 조합해 그래픽을 생성합니다. `viewBox`를 통해 유연한 크기 조정이 가능하고, 좌표계를 활용해 정밀한 위치 지정이 가능합니다. 위의 기본 도형과 요소들을 조합하면 간단한 아이콘부터 복잡한 일러스트까지 만들 수 있습니다. SVG의 강력함은 코드로 직접 제어할 수 있다는 점에 있으며, CSS나 JavaScript와 결합하면 동적이고 인터랙티브한 그래픽도 구현할 수 있습니다.

117
doc/svg/03_경로.md Normal file
View File

@@ -0,0 +1,117 @@
### SVG의 `<path>` 요소와 `d` 속성
SVG에서 `<path>` 요소는 가장 강력하고 유연한 도구로, 직선, 곡선, 복잡한 모양을 자유롭게 그릴 수 있습니다. `<path>`의 핵심은 `d` 속성(Data)으로, 이 속성에 일련의 명령과 좌표를 작성해 경로를 정의합니다. `d` 속성은 명령어와 숫자 쌍(좌표 또는 매개변수)으로 구성되며, 이를 통해 간단한 선부터 복잡한 곡선까지 표현할 수 있습니다.
#### 기본 구조
```xml
<svg width="200" height="200">
<path d="M10 10 L100 100" stroke="black" fill="none" />
</svg>
```
위 예시는 (10, 10)에서 시작해 (100, 100)까지 직선을 그립니다.
---
### `d` 속성의 명령어 정리
`d` 속성에서 사용되는 명령어는 대문자(절대 좌표)와 소문자(상대 좌표)로 나뉩니다. 아래 표는 주요 명령어와 설명을 정리한 것입니다.
| 명령어 | 설명 |
|--------|---------------------------------------------------------------------------------------|
| `M` / `m` | **Move to**: 펜을 (x, y)로 이동. 경로의 시작점을 지정. 예: `M10 10` (절대), `m10 10` (상대). |
| `L` / `l` | **Line to**: 현재 위치에서 (x, y)까지 직선을 그림. 예: `L100 100`. |
| `H` / `h` | **Horizontal line to**: 수평선을 그림. x값만 지정. 예: `H50`. |
| `V` / `v` | **Vertical line to**: 수직선을 그림. y값만 지정. 예: `V50`. |
| `Z` / `z` | **Close path**: 현재 경로를 닫음(시작점으로 직선 연결). |
| `C` / `c` | **Cubic Bézier curve**: 3차 베지어 곡선을 그림. (x1 y1, x2 y2, x y)로 제어점과 끝점 지정. |
| `S` / `s` | **Smooth cubic Bézier**: 이전 `C`의 두 번째 제어점을 반영해 부드럽게 이어지는 곡선. (x2 y2, x y). |
| `Q` / `q` | **Quadratic Bézier curve**: 2차 베지어 곡선. (x1 y1, x y)로 제어점과 끝점 지정. |
| `T` / `t` | **Smooth quadratic Bézier**: 이전 `Q`의 제어점을 반영해 부드럽게 이어짐. (x y). |
| `A` / `a` | **Arc**: 타원형 호를 그림. (rx ry x-axis-rotation large-arc-flag sweep-flag x y). |
- **대문자**: 절대 좌표(캔버스 기준).
- **소문자**: 상대 좌표(현재 위치 기준).
---
### 베지어 곡선(Bézier Curves)
#### 1. 3차 베지어 곡선 (`C`)
3차 베지어 곡선은 두 개의 제어점과 끝점을 사용해 부드러운 곡선을 만듭니다.
```xml
<svg width="200" height="200">
<path d="M10 150 C50 50, 150 50, 190 150" stroke="blue" fill="none" />
</svg>
```
- `M10 150`: 시작점 (10, 150).
- `C50 50, 150 50, 190 150`: 첫 제어점 (50, 50), 두 번째 제어점 (150, 50), 끝점 (190, 150).
#### 2. 2차 베지어 곡선 (`Q`)
2차 베지어 곡선은 하나의 제어점을 사용하며, 더 단순한 곡선을 그립니다.
```xml
<svg width="200" height="200">
<path d="M10 150 Q100 50 190 150" stroke="red" fill="none" />
</svg>
```
- `Q100 50 190 150`: 제어점 (100, 50), 끝점 (190, 150).
#### 3. 부드러운 연결 (`S`, `T`)
`S`와 `T`는 이전 곡선의 제어점을 반영해 연속적인 곡선을 만듭니다.
```xml
<svg width="200" height="200">
<path d="M10 150 C50 50, 150 50, 190 150 S250 250, 300 150" stroke="green" fill="none" />
</svg>
```
- `S250 250, 300 150`: 첫 번째 `C`의 두 번째 제어점이 반영되어 부드럽게 이어짐.
---
### 아크(Arc, `A`)
`A` 명령어는 타원형 호를 그리며, 복잡한 매개변수를 사용합니다.
- 형식: `A rx ry x-axis-rotation large-arc-flag sweep-flag x y`
- `rx`, `ry`: 타원의 가로/세로 반지름.
- `x-axis-rotation`: x축 기준 회전 각도.
- `large-arc-flag`: 0(작은 호) 또는 1(큰 호).
- `sweep-flag`: 0(반시계), 1(시계 방향).
- `x`, `y`: 끝점 좌표.
```xml
<svg width="200" height="200">
<path d="M50 150 A50 50 0 0 1 150 150" stroke="purple" fill="none" />
</svg>
```
- `(50, 150)`에서 `(150, 150)`까지 반지름 50인 호를 시계 방향으로 그림.
---
### 실무에서 자주 사용되는 `<path>` 예시
1. **아이콘 (간단한 화살표)**
```xml
<svg width="24" height="24">
<path d="M4 12 H18 M12 6 L18 12 L12 18" stroke="black" stroke-width="2" fill="none"/>
</svg>
```
수평선(`H`)과 꺾인 선(`L`)으로 화살표를 표현.
2. **파도 모양 (베지어 곡선 활용)**
```xml
<svg width="200" height="100">
<path d="M0 50 Q50 0, 100 50 T200 50" stroke="blue" fill="none" stroke-width="2"/>
</svg>
```
`Q`와 `T`로 부드러운 파도 형태를 그림.
3. **하트 모양 (복합 경로)**
```xml
<svg width="200" height="200">
<path d="M100 50 C75 0, 25 0, 25 50 C25 75, 50 100, 100 150 C150 100, 175 75, 175 50 C175 0, 125 0, 100 50 Z" fill="red"/>
</svg>
```
`C`와 `Z`를 사용해 하트 모양을 완성.
---
### 결론
SVG의 `<path>` 요소는 `d` 속성을 통해 직선, 베지어 곡선, 아크 등 다양한 형태를 표현할 수 있어 실무에서 아이콘, 로고, 애니메이션 경로 등에 폭넓게 활용됩니다. 베지어 곡선은 부드러운 곡선을, 아크는 원형 경로를 다룰 때 유용하며, 명령어를 조합하면 거의 모든 2D 그래픽을 구현할 수 있습니다. 실무에서는 디자인 툴(예: Adobe Illustrator)로 만든 경로를 SVG로 내보내거나, 직접 코드를 작성해 정밀하게 조정하는 방식으로 사용됩니다.

128
doc/svg/04_스타일링.md Normal file
View File

@@ -0,0 +1,128 @@
### SVG의 스타일링과 시각적 효과
SVG는 벡터 그래픽을 표현하는 강력한 도구로, 다양한 스타일링 속성과 시각적 효과를 통해 모양을 꾸밀 수 있습니다. CSS와 유사한 속성(`fill`, `stroke` 등)을 사용하거나, `<style>` 태그와 결합해 스타일을 적용할 수 있으며, 그라디언트와 패턴 같은 고급 효과도 지원합니다. 아래에서는 주요 스타일링 속성과 시각적 효과를 자세히 설명합니다.
---
### `fill`과 `stroke` 속성
1. **`fill`**
- 도형의 내부를 채우는 색상이나 패턴을 지정합니다.
- 값: 색상(`red`, `#ff0000`), 그라디언트(`url(#gradient)`), `none`(채우기 없음).
- 예시:
```xml
<svg width="200" height="200">
<rect x="10" y="10" width="100" height="100" fill="blue" />
</svg>
```
2. **`stroke`**
- 도형의 외곽선을 그리는 색상을 지정합니다.
- 값: 색상, `none`(선 없음).
- 예시:
```xml
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" fill="none" />
</svg>
```
이 두 속성은 SVG 스타일링의 기본이며, 추가 속성으로 세부 스타일을 조정할 수 있습니다.
---
### 선과 면 스타일링 속성 정리
아래는 `fill`과 `stroke`를 보완하는 주요 스타일링 속성들입니다.
| 속성 | 설명 | 예시 값 |
|---------------------|---------------------------------------------------------------------------------------|-------------------------|
| `fill-opacity` | 채우기 투명도(0~1). | `0.5` |
| `stroke-width` | 선의 두께(단위: 사용자 단위 또는 px). | `2` |
| `stroke-opacity` | 선의 투명도(0~1). | `0.7` |
| `stroke-linecap` | 선 끝의 모양. | `butt`, `round`, `square` |
| `stroke-linejoin` | 선이 꺾이는 부분의 모양(모서리 처리). | `miter`, `round`, `bevel` |
| `stroke-dasharray` | 점선 패턴(선과 간격의 길이). | `5,5` (5단위 선, 5단위 간격) |
| `stroke-dashoffset` | 점선 패턴의 시작 오프셋. | `10` |
| `fill-rule` | 복잡한 경로에서 채우기 영역 결정 규칙. | `nonzero`, `evenodd` |
#### 예시: 선 스타일링
```xml
<svg width="200" height="200">
<path d="M20 20 L100 100" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="10,5" />
</svg>
```
- 점선(10단위 선, 5단위 간격)으로 둥근 끝을 가진 선을 그립니다.
#### 예시: 면 스타일링
```xml
<svg width="200" height="200">
<polygon points="50,50 150,50 100,150" fill="green" fill-opacity="0.8" stroke="black" stroke-width="2" />
</svg>
```
- 반투명한 녹색 삼각형에 검은색 테두리를 적용.
---
### 그라디언트와 패턴
SVG는 단순 색상 외에도 그라디언트와 패턴을 사용해 더 풍부한 시각적 효과를 제공합니다. 이들은 `<defs>` 안에 정의되고, `fill`이나 `stroke`에서 참조됩니다.
#### 1. **`linearGradient` (선형 그라디언트)**
- 색상이 직선 방향으로 점진적으로 변하는 효과.
- 주요 요소: `<stop>` 태그로 색상 전환 지점을 정의.
- 속성: `x1`, `y1`, `x2`, `y2` (그라디언트 방향).
```xml
<svg width="200" height="200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>
```
- 좌에서 우로 노랑에서 빨강으로 변하는 사각형.
#### 2. **`radialGradient` (방사형 그라디언트)**
- 색상이 중심에서 바깥으로 방사형으로 변하는 효과.
- 속성: `cx`, `cy` (중심), `r` (반지름).
```xml
<svg width="200" height="200">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#grad2)" />
</svg>
```
- 중심이 흰색이고 가장자리가 파란색인 원.
#### 3. **`pattern` (패턴)**
- 반복되는 그래픽 요소로 면을 채움.
- `<pattern>` 안에 도형을 정의하고, 크기와 반복 단위를 설정.
```xml
<svg width="200" height="200">
<defs>
<pattern id="pat1" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill="orange" />
</pattern>
</defs>
<rect x="10" y="10" width="180" height="180" fill="url(#pat1)" />
</svg>
```
- 20x20 단위로 주황색 원이 반복되는 패턴으로 사각형을 채움.
---
### 실무 활용 팁
- **CSS와 결합**: SVG 스타일링은 CSS로도 가능합니다. 예: `<style>.shape { fill: red; stroke: blue; }</style>`를 사용해 클래스 단위로 관리.
- **애니메이션**: `stroke-dasharray`와 `stroke-dashoffset`을 조합하면 선 애니메이션(예: 그리기 효과)을 만들 수 있습니다.
- **복잡한 디자인**: 그라디언트와 패턴은 로고, 배경, 아이콘 등에서 고급스러운 효과를 줄 때 유용합니다.
---
### 결론
SVG의 스타일링은 `fill`과 `stroke`로 시작해 다양한 선과 면 속성으로 세밀하게 조정할 수 있으며, `linearGradient`, `radialGradient`, `pattern`을 통해 시각적으로 풍부한 표현이 가능합니다. 이러한 속성들은 웹 디자인, 데이터 시각화, 인터랙티브 그래픽 등에서 활용도가 높아, SVG를 단순한 도형 이상의 강력한 도구로 만듭니다. CSS와 결합하거나 애니메이션을 추가하면 더욱 역동적인 결과물을 만들 수 있습니다.

154
doc/svg/05_텍스트와 아이콘.md Normal file
View File

@@ -0,0 +1,154 @@
### SVG의 `<text>` 요소와 관련 기능
SVG에서 `<text>` 요소는 텍스트를 그래픽으로 렌더링하는 데 사용됩니다. 단순히 텍스트를 표시하는 것을 넘어, 스타일링, 위치 조정, 경로 따라 배치 등 다양한 기능을 제공합니다. 아래에서는 `<text>` 요소의 주요 속성, `<tspan>`과 `<textPath>`의 역할, `<symbol>`과 `<use>`를 활용한 아이콘 제작 방법, 그리고 `<foreignObject>`에 대해 설명합니다.
---
### `<text>` 요소와 주요 속성
`<text>`는 텍스트를 SVG 캔버스에 추가하며, 위치와 스타일을 속성으로 정의합니다.
#### 기본 예시
```xml
<svg width="200" height="100">
<text x="10" y="50" fill="black">Hello, SVG!</text>
</svg>
```
#### 주요 속성 정리
| 속성 | 설명 | 예시 값 |
|---------------------|--------------------------------------------------------------------------------------|--------------------------|
| `x` | 텍스트의 x축 시작 위치. | `10` |
| `y` | 텍스트의 y축 시작 위치(기본적으로 baseline 기준). | `50` |
| `dx`, `dy` | 텍스트 또는 문자별로 상대적 위치 조정. | `5`, `-10` |
| `fill` | 텍스트 채우기 색상. | `red`, `#ff0000` |
| `stroke` | 텍스트 외곽선 색상. | `black` |
| `font-size` | 글꼴 크기. | `16`, `1em` |
| `font-family` | 글꼴 종류. | `Arial`, `sans-serif` |
| `text-anchor` | 텍스트 정렬(시작점 기준). | `start`, `middle`, `end`|
| `dominant-baseline` | 텍스트의 수직 정렬 기준. | `auto`, `middle`, `hanging` |
| `transform` | 회전, 이동 등 변환 적용. | `rotate(45 50 50)` |
#### 예시: 스타일링된 텍스트
```xml
<svg width="200" height="100">
<text x="100" y="50" font-size="20" fill="blue" text-anchor="middle" transform="rotate(-45 100 50)">
Rotated Text
</text>
</svg>
```
- 가운데 정렬된 파란색 텍스트를 45도 회전.
---
### `<tspan>`: 텍스트 일부 스타일링
`<tspan>`은 `<text>` 내부에서 특정 텍스트 부분에 스타일을 적용하거나 위치를 조정할 때 사용됩니다.
#### 예시
```xml
<svg width="200" height="100">
<text x="10" y="50" font-size="16">
Hello <tspan fill="red" font-weight="bold">SVG</tspan> World!
</text>
</svg>
```
- "SVG"만 빨간색으로 굵게 표시.
#### 주요 특징
- `dx`, `dy`로 위치 미세 조정 가능.
- 여러 줄 텍스트를 만들 때 유용:
```xml
<svg width="200" height="100">
<text x="10" y="20" font-size="16">
<tspan x="10" dy="0">First Line</tspan>
<tspan x="10" dy="20">Second Line</tspan>
</text>
</svg>
```
---
### `<textPath>`: 경로를 따른 텍스트
`<textPath>`은 텍스트를 `<path>`로 정의된 경로를 따라 배치합니다. `href` 속성으로 경로를 참조합니다.
#### 예시
```xml
<svg width="200" height="200">
<defs>
<path id="curve" d="M10 80 Q100 20 190 80" />
</defs>
<text font-size="16">
<textPath href="#curve">Curved Text</textPath>
</text>
</svg>
```
- 텍스트가 곡선을 따라 배치됨.
#### 주요 속성
- `startOffset`: 경로 시작점에서의 오프셋(예: `50%`로 가운데 정렬).
- `text-anchor`: 텍스트 정렬.
---
### `<symbol>`과 `<use>`를 활용한 아이콘 제작
`<symbol>`은 재사용 가능한 그래픽 템플릿을 정의하며, `<use>`로 이를 인스턴스화합니다. 아이콘 제작에 이상적입니다.
#### 제작 방법
1. `<symbol>`로 아이콘 정의:
```xml
<svg>
<defs>
<symbol id="star" viewBox="0 0 100 100">
<polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" fill="gold"/>
</symbol>
</defs>
</svg>
```
- `viewBox`로 내부 좌표계를 설정.
2. `<use>`로 아이콘 재사용:
```xml
<svg width="200" height="200">
<use href="#star" x="10" y="10" width="50" height="50"/>
<use href="#star" x="100" y="100" width="30" height="30" fill="red"/>
</svg>
```
- 위치와 크기, 색상을 조정해 여러 번 사용.
#### 장점
- 파일 크기 절약: 동일한 그래픽을 여러 번 재사용.
- 스타일 커스터마이징: 각 `<use>`마다 다른 스타일 적용 가능.
---
### `<foreignObject>`: 외부 콘텐츠 삽입
`<foreignObject>`는 SVG 안에 HTML, 이미지 등 외부 콘텐츠를 포함할 수 있게 합니다. SVG가 아닌 다른 네임스페이스의 요소를 렌더링하는 데 사용됩니다.
#### 예시
```xml
<svg width="200" height="200">
<foreignObject x="10" y="10" width="180" height="180">
<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue; font-size: 16px;">
This is <b>HTML</b> inside SVG!
</div>
</foreignObject>
</svg>
```
- SVG 안에 HTML `<div>`를 삽입.
#### 주요 속성
- `x`, `y`, `width`, `height`: 삽입 영역 정의.
- 제한: 브라우저 호환성에 따라 렌더링이 달라질 수 있음.
#### 활용
- SVG와 HTML의 장점을 결합(예: 버튼, 입력 폼 삽입).
- 복잡한 레이아웃이 필요한 데이터 시각화.
---
### 결론
SVG의 `<text>`는 위치와 스타일링을 자유롭게 조정할 수 있으며, `<tspan>`과 `<textPath>`로 세부 조정과 창의적 배치가 가능합니다. `<symbol>`과 `<use>`는 아이콘 시스템을 효율적으로 관리하는 데 유용하고, `<foreignObject>`는 SVG의 한계를 넘어 외부 콘텐츠를 통합할 수 있는 강력한 도구입니다. 이러한 기능들을 활용하면 단순한 텍스트나 아이콘을 넘어 인터랙티브하고 복잡한 그래픽을 구현할 수 있습니다.

155
doc/svg/06_SVG 애니메이션.md Normal file
View File

@@ -0,0 +1,155 @@
### SVG의 `<animate>`와 `<animateTransform>` 요소
SVG는 `<animate>`와 `<animateTransform>` 요소를 통해 애니메이션을 구현할 수 있는 강력한 기능을 제공합니다. 이들은 SMIL(Synchronized Multimedia Integration Language)을 기반으로 하며, 별도의 CSS나 JavaScript 없이도 동적인 효과를 만들 수 있습니다. 아래에서는 이 두 요소의 사용법과 실무에서 유용한 예제, 그리고 CSS와 JavaScript를 활용한 대체 방법을 설명합니다.
---
### `<animate>`: 속성 애니메이션
`<animate>`는 SVG 요소의 특정 속성을 시간에 따라 변화시키는 데 사용됩니다. 색상, 크기, 위치 등 다양한 속성을 애니메이션할 수 있습니다.
#### 주요 속성
| 속성 | 설명 | 예시 값 |
|-----------------|-------------------------------------------------------------------------------------|------------------------|
| `attributeName` | 애니메이션 대상 속성. | `opacity`, `x`, `r` |
| `from` | 시작 값. | `0`, `10` |
| `to` | 종료 값. | `1`, `50` |
| `dur` | 애니메이션 지속 시간. | `2s`, `500ms` |
| `begin` | 시작 시점. | `0s`, `click` |
| `repeatCount` | 반복 횟수. | `indefinite`, `3` |
| `fill` | 애니메이션 종료 후 상태(`freeze`: 마지막 값 유지, `remove`: 원래 값으로 복귀). | `freeze`, `remove` |
#### 예시: 원의 반지름 변화
```xml
<svg width="200" height="200">
<circle cx="100" cy="100" r="20" fill="red">
<animate attributeName="r" from="20" to="50" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
```
- 원의 반지름이 20에서 50으로 2초 동안 반복적으로 커짐.
---
### `<animateTransform>`: 변환 애니메이션
`<animateTransform>`는 `transform` 속성(회전, 이동, 크기 조정 등)을 애니메이션합니다.
#### 주요 속성
| 속성 | 설명 | 예시 값 |
|-----------------|-------------------------------------------------------------------------------------|------------------------|
| `attributeName` | 항상 `transform`으로 설정. | `transform` |
| `type` | 변환 유형. | `rotate`, `scale`, `translate` |
| `from` | 시작 변환 값. | `0 100 100`, `1` |
| `to` | 종료 변환 값. | `360 100 100`, `2` |
| `dur` | 지속 시간. | `3s` |
| `repeatCount` | 반복 횟수. | `indefinite` |
#### 예시: 회전 애니메이션
```xml
<svg width="200" height="200">
<rect x="75" y="75" width="50" height="50" fill="blue">
<animateTransform attributeName="transform" type="rotate"
from="0 100 100" to="360 100 100" dur="3s" repeatCount="indefinite" />
</rect>
</svg>
```
- 사각형이 중심(100, 100)을 기준으로 360도 회전.
---
### 실무에서 유용한 SVG 애니메이션 예제
#### 1. 로딩 스피너
```xml
<svg width="100" height="100">
<circle cx="50" cy="50" r="20" fill="none" stroke="gray" stroke-width="4" stroke-dasharray="31.4" >
<animate attributeName="stroke-dashoffset" from="0" to="31.4" dur="1s" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50"
dur="1s" repeatCount="indefinite" />
</circle>
</svg>
```
- 점선이 회전하며 로딩 효과를 만듦.
#### 2. 펄스 효과 (Pulse)
```xml
<svg width="200" height="200">
<circle cx="100" cy="100" r="30" fill="red">
<animate attributeName="r" values="30;40;30" dur="1.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite" />
</circle>
</svg>
```
- 원이 커졌다 작아지며 투명도가 변함.
---
### CSS를 활용한 SVG 애니메이션
CSS는 SVG 요소에 `@keyframes`와 `animation` 속성을 적용해 애니메이션을 구현할 수 있습니다. SMIL보다 브라우저 호환성이 좋습니다.
#### 예시: 회전 애니메이션
```xml
<svg width="200" height="200">
<rect x="75" y="75" width="50" height="50" fill="blue" class="spin" />
</svg>
<style>
.spin {
transform-origin: 100px 100px;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
```
- 사각형이 3초마다 무한 회전.
#### 장점
- CSS 변수로 동적 제어 가능.
- 트랜지션과 결합해 부드러운 효과 구현.
---
### JavaScript를 활용한 SVG 애니메이션
JavaScript는 SVG 속성을 동적으로 변경하거나 복잡한 로직을 추가할 때 유용합니다. `setAttribute`나 DOM 조작을 사용합니다.
#### 예시: 클릭 시 크기 변화
```xml
<svg width="200" height="200">
<circle id="myCircle" cx="100" cy="100" r="30" fill="green" onclick="animateCircle()" />
</svg>
<script>
function animateCircle() {
const circle = document.getElementById("myCircle");
let r = 30;
const animate = () => {
r = r === 30 ? 50 : 30;
circle.setAttribute("r", r);
setTimeout(animate, 1000);
};
animate();
}
</script>
```
- 클릭하면 원의 반지름이 30과 50 사이를 1초 간격으로 전환.
#### 라이브러리 활용: GSAP
복잡한 애니메이션은 GSAP(GreenSock Animation Platform) 같은 라이브러리로 더 쉽게 구현 가능:
```javascript
gsap.to("#myCircle", { duration: 1, attr: { r: 50 }, repeat: -1, yoyo: true });
```
- 원이 1초마다 커졌다 작아짐.
---
### 결론과 비교
- **`<animate>`와 `<animateTransform>`**: 간단한 애니메이션에 적합하지만, SMIL 지원이 Chrome에서 제한적(2023년 기준 중단 계획).
- **CSS**: 직관적이고 호환성이 뛰어나며, 반응형 디자인에 유리.
- **JavaScript**: 복잡한 상호작용이나 동적 제어가 필요할 때 강력. GSAP 같은 도구로 생산성 향상 가능.
실무에서는 로딩 스피너, 버튼 효과, 데이터 시각화 애니메이션 등에 SVG 애니메이션을 활용하며, 프로젝트 요구사항(호환성, 복잡도)에 따라 적절한 방법을 선택합니다. CSS와 JavaScript를 함께 사용하면 SMIL의 한계를 보완하면서도 풍부한 효과를 낼 수 있습니다.

168
doc/svg/07_인터랙티브 SVG.md Normal file
View File

@@ -0,0 +1,168 @@
### SVG와 JavaScript 이벤트 및 인터랙티브 그래프 제작
SVG는 JavaScript와 결합하여 클릭, 마우스 이동 등 다양한 이벤트를 처리할 수 있어 인터랙티브한 그래픽을 구현하는 데 이상적입니다. 여기에 `getBoundingClientRect()`를 활용한 좌표 변환, 그래프/차트 제작 기법, 그리고 드래그&드롭 기능을 위한 포인터 이벤트까지 설명하겠습니다.
---
### SVG와 JavaScript 이벤트
SVG 요소는 HTML 요소처럼 DOM 이벤트(`click`, `mouseover`, `mousemove` 등)를 지원합니다. 이를 통해 사용자 상호작용을 감지하고 동적으로 반응할 수 있습니다.
#### 주요 이벤트
| 이벤트 | 설명 | 사용 예시 |
|-----------------|--------------------------------------------------------------------------------------|-------------------------------|
| `click` | 요소를 클릭할 때 발생. | 버튼, 토글 기능 |
| `mouseover` | 마우스가 요소 위로 올라갈 때 발생. | 호버 효과, 툴팁 표시 |
| `mouseout` | 마우스가 요소를 벗어날 때 발생. | 호버 효과 해제 |
| `mousemove` | 마우스가 요소 위에서 움직일 때 발생. | 드래그, 실시간 좌표 추적 |
| `mousedown` | 마우스 버튼을 누를 때 발생. | 드래그 시작 |
| `mouseup` | 마우스 버튼을 뗄 때 발생. | 드래그 종료 |
#### 예시: 클릭과 호버 이벤트
```xml
<svg width="200" height="200">
<circle id="myCircle" cx="100" cy="100" r="30" fill="blue" />
</svg>
<script>
const circle = document.getElementById("myCircle");
circle.addEventListener("click", () => circle.setAttribute("fill", "red"));
circle.addEventListener("mouseover", () => circle.setAttribute("r", "40"));
circle.addEventListener("mouseout", () => circle.setAttribute("r", "30"));
</script>
```
- 클릭 시 색상이 빨강으로, 호버 시 반지름이 커짐.
---
### `getBoundingClientRect()`를 활용한 마우스 좌표 변환
SVG는 자체 좌표계를 사용하므로, 브라우저의 클라이언트 좌표(`clientX`, `clientY`)를 SVG 좌표로 변환해야 합니다. `getBoundingClientRect()`와 `getScreenCTM()`를 활용하면 이를 쉽게 처리할 수 있습니다.
#### 변환 과정
1. `getBoundingClientRect()`: SVG 요소의 뷰포트 내 경계 상자 좌표를 반환.
2. `getScreenCTM()`: SVG 좌표계와 화면 좌표계 간 변환 행렬을 반환.
3. `point` 객체: SVG 좌표로 변환된 값을 계산.
#### 예시: 마우스 위치에 원 추가
```xml
<svg id="svgCanvas" width="400" height="400">
</svg>
<script>
const svg = document.getElementById("svgCanvas");
svg.addEventListener("click", (e) => {
const rect = svg.getBoundingClientRect();
const matrix = svg.getScreenCTM().inverse();
const point = svg.createSVGPoint();
point.x = e.clientX - rect.left;
point.y = e.clientY - rect.top;
const svgPoint = point.matrixTransform(matrix);
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", svgPoint.x);
circle.setAttribute("cy", svgPoint.y);
circle.setAttribute("r", "10");
circle.setAttribute("fill", "green");
svg.appendChild(circle);
});
</script>
```
- 클릭한 위치에 녹색 원을 추가. `viewBox`가 설정된 경우에도 정확한 SVG 좌표로 변환됨.
---
### SVG를 활용한 인터랙티브 그래프 및 차트 제작
SVG는 데이터 시각화(막대그래프, 선그래프 등)에 적합하며, 이벤트와 동적 업데이트를 통해 인터랙티브하게 만들 수 있습니다.
#### 예시: 인터랙티브 막대그래프
```xml
<svg id="chart" width="400" height="200" viewBox="0 0 400 200">
<g id="bars"></g>
</svg>
<script>
const data = [50, 100, 80, 120];
const svg = document.getElementById("chart");
const barsGroup = document.getElementById("bars");
data.forEach((value, index) => {
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
bar.setAttribute("x", index * 100);
bar.setAttribute("y", 200 - value);
bar.setAttribute("width", "80");
bar.setAttribute("height", value);
bar.setAttribute("fill", "steelblue");
bar.addEventListener("mouseover", () => bar.setAttribute("fill", "orange"));
bar.addEventListener("mouseout", () => bar.setAttribute("fill", "steelblue"));
bar.addEventListener("click", () => alert(`Value: ${value}`));
barsGroup.appendChild(bar);
});
</script>
```
- 막대그래프에서 호버 시 색상 변경, 클릭 시 값 표시.
#### 기법
- **데이터 바인딩**: 배열 데이터를 SVG 요소로 변환.
- **축 추가**: `<line>`과 `<text>`로 x/y축 렌더링.
- **툴팁**: `mouseover`로 동적 `<text>` 요소 표시.
- **업데이트**: 데이터 변경 시 `removeChild`와 `appendChild`로 DOM 갱신.
---
### 드래그&드롭 (Pointer Events)
SVG에서 드래그&드롭은 `pointerdown`, `pointermove`, `pointerup` 이벤트를 사용해 구현합니다. 이들은 `mousedown` 등보다 멀티터치와 스타일러스 입력을 지원해 더 현대적입니다.
#### 예시: 드래그 가능한 원
```xml
<svg id="svgCanvas" width="400" height="400">
<circle id="dragCircle" cx="100" cy="100" r="30" fill="purple" />
</svg>
<script>
const svg = document.getElementById("svgCanvas");
const circle = document.getElementById("dragCircle");
let isDragging = false;
circle.addEventListener("pointerdown", (e) => {
isDragging = true;
circle.setPointerCapture(e.pointerId); // 포인터 캡처 설정
});
svg.addEventListener("pointermove", (e) => {
if (!isDragging) return;
const rect = svg.getBoundingClientRect();
const matrix = svg.getScreenCTM().inverse();
const point = svg.createSVGPoint();
point.x = e.clientX - rect.left;
point.y = e.clientY - rect.top;
const svgPoint = point.matrixTransform(matrix);
circle.setAttribute("cx", svgPoint.x);
circle.setAttribute("cy", svgPoint.y);
});
svg.addEventListener("pointerup", (e) => {
isDragging = false;
circle.releasePointerCapture(e.pointerId); // 포인터 캡처 해제
});
</script>
```
- 원을 클릭해 드래그하면 마우스 위치로 이동.
#### Pointer Events 주요 속성
- `pointerdown`: 드래그 시작.
- `pointermove`: 드래그 중 위치 업데이트.
- `pointerup`: 드래그 종료.
- `setPointerCapture`: 해당 요소가 포인터 이벤트를 독점.
- `releasePointerCapture`: 캡처 해제.
#### 추가 팁
- **제약 조건**: `Math.min`/`Math.max`로 이동 범위 제한.
- **스냅 효과**: 좌표를 일정 단위로 반올림.
---
### 결론
SVG와 JavaScript 이벤트는 클릭, 호버, 드래그 등 다양한 상호작용을 가능하게 하며, `getBoundingClientRect()`와 좌표 변환으로 정확한 위치 계산을 지원합니다. 이를 활용해 막대그래프 같은 데이터 시각화를 만들고, 포인터 이벤트를 통해 드래그&드롭 기능을 추가할 수 있습니다. 실무에서는 D3.js 같은 라이브러리로 복잡한 차트를 쉽게 구현하거나, 순수 JavaScript로 가볍고 커스터마이징된 인터랙션을 만들 수 있습니다. SVG의 유연성과 이벤트 처리 능력은 웹에서 동적이고 사용자 친화적인 경험을 제공하는 데 큰 강점입니다.

148
doc/svg/08_SVG 최적화.md Normal file
View File

@@ -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는 빠른 로딩과 부드러운 인터랙션을 보장하며, 특히 모바일 환경에서 그 가치를 발휘합니다.

159
doc/svg/11_SVG 기반 아이콘 시스템.md Normal file
View File

@@ -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 라이브러리, 디자인 시스템에서 특히 유용합니다.

205
doc/svg/12_SVG를 활용한 대시보드 UI.md Normal file
View File

@@ -0,0 +1,205 @@
### SVG를 활용한 대시보드 UI 구현
SVG(Scalable Vector Graphics)는 대시보드 UI를 구현하는 데 매우 적합한 기술입니다. 확장 가능한 벡터 그래픽 특성 덕분에 다양한 화면 크기와 해상도에서 선명함을 유지하며, 동적 데이터 시각화와 인터랙티브 요소를 구현하기에 유연합니다. 아래에서는 SVG를 활용한 대시보드 UI의 설계 접근법, 주요 구성 요소, 그리고 구현 예시를 설명합니다.
---
### SVG 기반 대시보드 UI의 장점
1. **해상도 독립성**: 데스크톱, 모바일 등 모든 디바이스에서 품질 유지.
2. **동적 업데이트**: JavaScript로 실시간 데이터 반영 가능.
3. **스타일링 유연성**: CSS로 색상, 크기, 애니메이션 조정.
4. **인터랙티브성**: 클릭, 호버, 드래그 등 이벤트 처리 용이.
5. **작은 파일 크기**: 이미지 기반 UI보다 효율적.
---
### 대시보드 UI 설계 접근법
대시보드는 데이터 시각화(차트, 그래프), 상태 표시(아이콘, 게이지), 사용자 인터랙션(버튼, 필터) 등으로 구성됩니다. SVG를 활용한 설계 단계는 다음과 같습니다.
1. **레이아웃 정의**: SVG 캔버스의 크기와 `viewBox`로 기본 구조 설정.
2. **컴포넌트 분리**: 차트, 아이콘, 버튼 등을 모듈화.
3. **데이터 매핑**: 데이터 소스를 SVG 요소로 변환.
4. **인터랙션 추가**: 이벤트 리스너로 사용자 입력 처리.
5. **애니메이션 적용**: 데이터 변화나 사용자 행동에 반응하는 효과 추가.
---
### 주요 구성 요소와 SVG 활용법
#### 1. 차트 (예: 막대그래프)
데이터를 시각화하는 핵심 요소로, `<rect>`나 `<path>`로 표현.
```xml
<svg id="barChart" width="400" height="200" viewBox="0 0 400 200">
<g id="bars"></g>
</svg>
<script>
const data = [50, 100, 75, 120];
const barsGroup = document.getElementById("bars");
const maxHeight = 200;
data.forEach((value, i) => {
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
bar.setAttribute("x", i * 100);
bar.setAttribute("y", maxHeight - value);
bar.setAttribute("width", "80");
bar.setAttribute("height", value);
bar.setAttribute("fill", "steelblue");
barsGroup.appendChild(bar);
});
</script>
```
#### 2. 원형 게이지 (예: 진행률 표시)
`<circle>`과 `stroke-dasharray`로 진행률을 시각화.
```xml
<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="green" stroke-width="10"
stroke-dasharray="251.2" stroke-dashoffset="251.2"/>
</svg>
<script>
const progress = document.getElementById("progress");
const updateProgress = (percent) => {
const circumference = 2 * Math.PI * 40; // 원 둘레
const offset = circumference * (1 - percent / 100);
progress.setAttribute("stroke-dashoffset", offset);
};
updateProgress(75); // 75% 진행률
</script>
```
#### 3. 아이콘 시스템
`<symbol>`과 `<use>`로 상태 아이콘 제공.
```xml
<svg style="display: none;">
<symbol id="icon-alert" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2zm0 5v8m0 4h.01" fill="none" stroke="currentColor" stroke-width="2"/>
</symbol>
</svg>
<svg class="icon" width="24" height="24"><use href="#icon-alert"/></svg>
```
#### 4. 버튼 및 인터랙티브 요소
`<rect>`와 `<text>`로 버튼을 만들고 이벤트 추가.
```xml
<svg width="100" height="40">
<rect x="0" y="0" width="100" height="40" rx="5" fill="blue"/>
<text x="50" y="25" fill="white" text-anchor="middle" font-size="16">Click</text>
</svg>
<script>
const button = document.querySelector("svg");
button.addEventListener("click", () => alert("Button clicked!"));
button.addEventListener("mouseover", () => button.querySelector("rect").setAttribute("fill", "darkblue"));
button.addEventListener("mouseout", () => button.querySelector("rect").setAttribute("fill", "blue"));
</script>
```
---
### 예시: 간단한 대시보드 UI
#### HTML과 SVG 구조
```html
<!DOCTYPE html>
<html>
<head>
<style>
.dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.icon { width: 24px; height: 24px; }
.chart, .gauge, .status { border: 1px solid #ccc; padding: 10px; }
</style>
</head>
<body>
<div class="dashboard">
<!-- 막대그래프 -->
<div class="chart">
<svg id="barChart" width="400" height="200" viewBox="0 0 400 200">
<g id="bars"></g>
</svg>
</div>
<!-- 진행률 게이지 -->
<div class="gauge">
<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="green" stroke-width="10"
stroke-dasharray="251.2" stroke-dashoffset="251.2"/>
</svg>
</div>
<!-- 상태 아이콘 -->
<div class="status">
<svg class="icon"><use href="#icon-alert"/></svg>
<span>Warning</span>
</div>
</div>
<!-- 아이콘 정의 -->
<svg style="display: none;">
<symbol id="icon-alert" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2zm0 5v8m0 4h.01" fill="none" stroke="currentColor" stroke-width="2"/>
</symbol>
</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", "steelblue");
barsGroup.appendChild(bar);
});
// 진행률 업데이트
const progress = document.getElementById("progress");
const updateProgress = (percent) => {
const circumference = 2 * Math.PI * 40;
progress.setAttribute("stroke-dashoffset", circumference * (1 - percent / 100));
};
updateProgress(75);
</script>
</body>
</html>
```
#### 설명
- **막대그래프**: 데이터 배열을 기반으로 동적 생성.
- **진행률 게이지**: 원형 진행률을 실시간으로 업데이트 가능.
- **상태 아이콘**: 재사용 가능한 아이콘 시스템 통합.
- **CSS Grid**: 대시보드 레이아웃을 구조화.
---
### 실무에서의 고급 기법
1. **데이터 연동**: API에서 가져온 JSON 데이터를 SVG로 렌더링.
```javascript
fetch("data.json")
.then(response => response.json())
.then(data => renderChart(data));
```
2. **애니메이션**: 데이터 변화 시 부드러운 전환 추가.
```javascript
gsap.to("#progress", { duration: 1, attr: { "stroke-dashoffset": newOffset } });
```
3. **드래그&드롭**: 차트 요소를 재배치 가능하도록 구현.
- 앞서 설명한 `pointer-events` 활용.
4. **반응형 설계**: `viewBox`와 CSS 미디어 쿼리로 다양한 화면 크기에 대응.
5. **라이브러리 활용**: D3.js로 복잡한 차트(예: 선그래프, 파이차트)를 쉽게 구현.
---
### 결론
SVG를 활용한 대시보드 UI는 차트, 게이지, 아이콘 등 다양한 요소를 조합해 데이터 중심의 인터랙티브 인터페이스를 제공합니다. `<rect>`, `<circle>`, `<path>`로 시각적 요소를 그리고, JavaScript로 동적 업데이트와 이벤트를 처리하며, CSS로 스타일링과 레이아웃을 관리합니다. 실무에서는 데이터 연동과 애니메이션을 추가해 사용자 경험을 강화하고, 최적화와 반응형 설계를 통해 성능과 접근성을 확보해야 합니다. 위 예시를 기반으로 프로젝트 요구사항에 맞게 확장하면 강력한 대시보드 UI를 구축할 수 있습니다.

192
doc/svg/13_반응형 SVG 디자인 패턴.md Normal file
View File

@@ -0,0 +1,192 @@
### 반응형 SVG 디자인 패턴
반응형 웹 디자인(Responsive Web Design, RWD)은 다양한 화면 크기와 디바이스에 맞춰 콘텐츠를 최적화하는 필수 요소입니다. SVG(Scalable Vector Graphics)는 벡터 기반으로 해상도에 상관없이 선명함을 유지하며, `viewBox`와 CSS를 활용해 반응형 디자인에 이상적입니다. 아래에서는 반응형 SVG 디자인의 핵심 패턴, 구현 방법, 그리고 실무에서의 활용 예시를 설명합니다.
---
### 반응형 SVG의 장점
1. **확장성**: 픽셀 단위가 아닌 벡터로 정의되어 크기 조정 시 품질 저하 없음.
2. **유연성**: `viewBox`로 좌표계를 조정해 콘텐츠 비율 유지.
3. **스타일링**: CSS 미디어 쿼리와 결합해 조건에 따라 스타일 변경 가능.
4. **경량화**: 이미지 파일 대신 SVG로 대체해 로딩 속도 개선.
---
### 반응형 SVG 디자인 패턴
#### 1. `viewBox`를 활용한 비율 유지
`viewBox`는 SVG의 내부 좌표계를 정의하며, 캔버스 크기(`width`, `height`)와 독립적으로 콘텐츠를 스케일링합니다. 이를 통해 반응형 비율을 유지합니다.
- **구현 방법**:
- `viewBox="min-x min-y width height"`로 콘텐츠 영역 설정.
- `width="100%"`로 컨테이너에 맞게 크기 조정.
- **예시**:
```xml
<svg width="100%" height="auto" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
```
- 컨테이너 너비에 따라 원이 비례적으로 크기 조정됨.
#### 2. CSS 미디어 쿼리로 조건부 스타일링
SVG 요소의 스타일을 화면 크기에 따라 다르게 적용합니다.
- **구현 방법**:
- SVG 내부 `<style>` 태그나 외부 CSS 사용.
- 미디어 쿼리로 크기, 색상, 표시 여부 조정.
- **예시**:
```html
<svg width="100%" height="auto" viewBox="0 0 100 100">
<circle class="responsive-circle" cx="50" cy="50" r="40"/>
</svg>
<style>
.responsive-circle {
fill: blue;
}
@media (max-width: 600px) {
.responsive-circle {
fill: red;
r: 20;
}
}
</style>
```
- 화면 너비 600px 이하에서 원이 작아지고 색상이 변경됨.
#### 3. 컨테이너에 맞춘 유동적 크기 조정
SVG를 부모 요소에 종속시켜 반응형 레이아웃을 만듭니다.
- **구현 방법**:
- `width="100%"`와 `height="auto"`로 부모 크기에 맞춤.
- `preserveAspectRatio`로 가로세로 비율 조정.
- **예시**:
```html
<div style="width: 50%; max-width: 400px;">
<svg width="100%" height="auto" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<rect x="10" y="10" width="80" height="80" fill="green"/>
</svg>
</div>
```
- 부모 너비에 따라 사각형 크기가 조정되며, 비율은 유지됨.
#### 4. 동적 콘텐츠 조정
화면 크기에 따라 SVG 내부 요소의 위치나 크기를 동적으로 변경합니다.
- **구현 방법**:
- JavaScript로 `window.resize` 이벤트 감지 후 속성 업데이트.
- **예시**:
```html
<svg id="dynamicSvg" width="100%" height="auto" viewBox="0 0 100 100">
<circle id="dynamicCircle" cx="50" cy="50" r="40" fill="purple"/>
</svg>
<script>
const svg = document.getElementById("dynamicSvg");
const circle = document.getElementById("dynamicCircle");
const resizeHandler = () => {
const width = svg.clientWidth;
circle.setAttribute("r", width < 300 ? "20" : "40");
};
window.addEventListener("resize", resizeHandler);
resizeHandler();
</script>
```
- 창 크기가 300px 미만일 때 원의 반지름이 줄어듦.
#### 5. 복잡한 레이아웃에서의 그룹화
`<g>` 태그로 요소를 그룹화하고, 반응형 조건에 따라 표시/숨김 처리.
- **구현 방법**:
- CSS의 `display` 속성으로 그룹 제어.
- **예시**:
```html
<svg width="100%" height="auto" viewBox="0 0 200 100">
<g class="desktop-view">
<rect x="10" y="10" width="180" height="80" fill="blue"/>
</g>
<g class="mobile-view">
<circle cx="100" cy="50" r="40" fill="red"/>
</g>
</svg>
<style>
.mobile-view { display: none; }
@media (max-width: 600px) {
.desktop-view { display: none; }
.mobile-view { display: block; }
}
</style>
```
- 데스크톱에서는 사각형, 모바일에서는 원 표시.
---
### 실무에서의 활용 예시
#### 1. 반응형 로고
```html
<svg width="100%" height="auto" viewBox="0 0 200 50">
<rect x="0" y="0" width="200" height="50" fill="black"/>
<text x="100" y="35" fill="white" text-anchor="middle" font-size="20">Logo</text>
</svg>
```
- 컨테이너 크기에 따라 로고가 비례적으로 조정됨.
#### 2. 인터랙티브 차트
```html
<svg id="chart" width="100%" height="auto" viewBox="0 0 400 200">
<g id="bars"></g>
</svg>
<script>
const data = [50, 100, 75, 120];
const barsGroup = document.getElementById("bars");
const renderBars = () => {
barsGroup.innerHTML = "";
const width = document.getElementById("chart").clientWidth / 400 * 80; // 비례적 너비
data.forEach((value, i) => {
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
bar.setAttribute("x", i * width * 1.25);
bar.setAttribute("y", 200 - value);
bar.setAttribute("width", width);
bar.setAttribute("height", value);
bar.setAttribute("fill", "teal");
barsGroup.appendChild(bar);
});
};
window.addEventListener("resize", renderBars);
renderBars();
</script>
```
- 창 크기에 따라 막대 너비가 동적으로 조정됨.
#### 3. 아이콘 시스템
```html
<svg style="display: none;">
<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>
</svg>
<div style="width: 100%;">
<svg class="icon" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
<use href="#icon-star"/>
</svg>
</div>
<style>
.icon { max-width: 48px; }
@media (max-width: 600px) { .icon { max-width: 24px; } }
</style>
```
- 화면 크기에 따라 아이콘 크기 변경.
---
### 주의사항 및 최적화
1. **성능**: 복잡한 SVG는 렌더링 부담을 줄 수 있으므로 경로 최적화(SVGO 사용) 필요.
2. **브라우저 호환성**: `viewBox`와 `preserveAspectRatio` 지원 확인.
3. **접근성**: 텍스트 기반 요소에 `<title>` 추가로 스크린 리더 지원.
---
### 결론
반응형 SVG 디자인 패턴은 `viewBox`로 비율을 유지하고, CSS 미디어 쿼리와 JavaScript로 동적 조정을 통해 다양한 디바이스에 대응합니다. 로고, 차트, 아이콘 등 실무에서 자주 사용되는 요소를 반응형으로 구현하면 사용자 경험과 성능을 동시에 개선할 수 있습니다. 위 패턴을 기반으로 프로젝트의 요구사항에 맞게 조정하면, SVG의 유연성을 최대한 활용한 반응형 UI를 구축할 수 있습니다.

158
doc/svg/14_실무에서 자주 쓰이는 SVG 활용 사례.md Normal file
View File

@@ -0,0 +1,158 @@
### 실무에서 자주 쓰이는 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 기반 솔루션을 구현할 수 있습니다.

75
doc/svg/README.md Normal file
View File

@@ -0,0 +1,75 @@
실무 중심의 SVG 책을 위한 목차를 구성해 보았습니다.
---
# **실무에서 바로 쓰는 SVG**
## **1. SVG 기본 개념과 활용 개요**
1.1 SVG란 무엇인가?
1.2 SVG와 래스터 이미지(PNG, JPEG) 비교
1.3 SVG의 장점과 한계
1.4 실무에서 SVG가 사용되는 분야
## **2. SVG의 기본 구조와 핵심 요소**
2.1 SVG 문서의 기본 구조
2.2 주요 SVG 요소 소개 (`<svg>`, `<g>`, `<defs>`, `<symbol>`, `<use>` 등)
2.3 뷰박스(`viewBox`)와 좌표 시스템 이해
2.4 기본 도형 (`<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<polyline>`, `<polygon>`)
## **3. 경로(Path)와 복잡한 도형 그리기**
3.1 `<path>` 요소의 기본 개념
3.2 `d` 속성 상세 설명 (M, L, H, V, C, S, Q, T, A 명령어)
3.3 Bézier 곡선과 아크(Arc) 다루기
3.4 실무에서 자주 쓰이는 Path 예제
## **4. 스타일링과 시각적 효과**
4.1 `fill`과 `stroke` 속성
4.2 선과 면 스타일링 (`stroke-width`, `stroke-dasharray`, `opacity` 등)
4.3 `fill-rule`과 `clipPath` 활용
4.4 그라디언트 (`<linearGradient>`, `<radialGradient>`)
4.5 패턴 (`<pattern>`)을 이용한 배경 효과
## **5. 텍스트와 아이콘**
5.1 `<text>` 요소와 주요 속성
5.2 `<tspan>`과 `<textPath>`를 활용한 세밀한 조정
5.3 SVG 아이콘 제작과 활용 (`symbol`, `use`)
5.4 웹 폰트와 SVG 조합 (`<foreignObject>` 활용)
## **6. SVG 애니메이션**
6.1 `animate`와 `animateTransform` 기본 개념
6.2 실무에서 유용한 SVG 애니메이션 예제
6.3 CSS를 활용한 SVG 애니메이션
6.4 JavaScript와 SVG 애니메이션
## **7. 인터랙티브 SVG**
7.1 SVG와 JavaScript 이벤트 (`click`, `mouseover`, `mousemove` 등)
7.2 `getBoundingClientRect()`와 마우스 좌표 변환
7.3 SVG를 활용한 인터랙티브 차트 및 그래프
7.4 드래그 & 드롭 구현 (`pointer-events`)
## **8. SVG 최적화 및 퍼포먼스 튜닝**
8.1 불필요한 속성 및 요소 제거
8.2 `use`와 `symbol`을 이용한 재사용
8.3 SVG 코드 압축 및 최적화 도구 (SVGO 활용)
8.4 복잡한 SVG를 Canvas로 변환하기
## **9. SVG와 프레임워크 연동**
9.1 React에서 SVG 사용 (`<svg>` vs `background-image`)
9.2 Vue와 SVG 컴포넌트 활용
9.3 D3.js와 SVG를 활용한 데이터 시각화
9.4 Three.js와 SVG 연계
## **10. SVG 실무 프로젝트**
10.1 SVG 기반 아이콘 시스템 만들기
10.2 SVG를 활용한 대시보드 UI
10.3 반응형 SVG 디자인 패턴
10.4 실무에서 자주 쓰이는 SVG 활용 사례 분석
## **부록**
A. SVG 관련 유용한 도구 및 사이트 목록
B. SVG 파일을 코드로 변환하는 방법
C. SVG의 접근성 고려 사항
---
이 목차는 실무에서 SVG를 활용할 때 필요한 내용을 체계적으로 정리했습니다. 추가하고 싶은 내용이 있으면 알려 주세요!