# SVG로 만드는 멋진 것들

> Clean Markdown view of GeekNews topic #20305. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20305](https://news.hada.io/topic?id=20305)
- GeekNews Markdown: [https://news.hada.io/topic/20305.md](https://news.hada.io/topic/20305.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-04-13T11:32:35+09:00
- Updated: 2025-04-13T11:32:35+09:00
- Original source: [fuma-nama.vercel.app](https://fuma-nama.vercel.app/blog/svg-art)
- Points: 3
- Comments: 2

## Topic Body

- **SVG**는 웹에서 벡터 그래픽을 표현하는 강력한 도구임
- **애니메이션**을 통해 SVG 요소를 더욱 매력적으로 만들 수 있음
- **마스크**를 사용하여 SVG 요소의 특정 부분을 강조하거나 숨길 수 있음
- **서버 사이드 렌더링**을 통해 클라이언트 측 자바스크립트 없이 TOC를 구현할 수 있음
- **CSS**와 **SVG**를 결합하여 인터랙티브한 요소를 만들 수 있음

---

### SVG 애니메이션

- **SVG**는 벡터 그래픽을 웹에서 표현하는 데 사용됨
- JSX(React)로 작성된 예제 코드가 포함되어 있음
- `line` 또는 `path`를 사용하여 선을 만들고, 이를 마스크로 사용하여 애니메이션을 추가할 수 있음
- `@keyframes`를 사용하여 애니메이션을 정의하고, `transform` 속성을 통해 요소의 위치를 변경할 수 있음
- **Figma**나 다른 SVG 편집기에서 디자인된 부분을 활용하여 애니메이션 블록을 마스크로 처리할 수 있음

### Clerk 스타일 목차

- **Clerk** 스타일의 목차를 **Fumadocs**에서 구현함
- 서버에서 목차를 렌더링하여 클라이언트 측 자바스크립트 없이 SSR과 호환되도록 함
- 절대 위치를 사용하여 요소의 정확한 위치를 알 수 없는 서버 환경에서 목차를 렌더링함
- **thumb**라는 애니메이션된 부분을 추가하여 활성화된 항목을 강조함
- 클라이언트에서 렌더링된 위치 정보를 활용하여 **SVG**를 사용해 "마스크 맵"을 구성함
- `mask-image` 속성을 사용하여 애니메이션된 `div` 블록을 마스크하여 목차의 강조된 부분을 렌더링함

**Clerk**의 영감을 받아 문서 사이트의 목차를 더욱 흥미롭게 구현함.

## Comments



### Comment 37105

- Author: ndrgrd
- Created: 2025-04-14T04:26:42+09:00
- Points: 1

멋있긴 한데 그냥 현재 항목 하나만 확실하게 강조하는 게 더 눈에 잘 띄네요.

### Comment 37095

- Author: neo
- Created: 2025-04-13T11:32:35+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=43666439) 
* Sarah Drasner의 "SVG Can Do That?" 발표는 8년이 지났음에도 여전히 많은 사람들에게 놀라움을 줌. CSS는 그 이후로 많이 발전했지만, SVG 자체는 확신이 덜함. 어쨌든 강력히 추천됨
  - 슬라이드: [slides.com/sdrasner/svg-can-do-that](https://slides.com/sdrasner/svg-can-do-that)
  - 비디오: [youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte](https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte)

* SVG 파일로 할 수 있는 재미있는 것 중 하나는 인라인 DTD에서 엔티티를 사용하여 파일의 여러 곳에서 공유할 수 있는 상수를 정의하는 것임. David Ellsworth의 "Squares in Squares" 페이지에서 좋은 예를 볼 수 있음
  - 주요 브라우저는 이와 관련된 문제가 없지만, Inkscape 같은 일부 도구는 DTD를 파싱하거나 엔티티를 확장하지 않음
  - [kingbird.myphotos.cc/packing/squares_in_squares.html](https://kingbird.myphotos.cc/packing/squares_in_squares.html)

* 복잡한 애니메이션 SVG는 재미있지만 SMIL의 복잡함과 Safari가 부동 소수점 앞에 0이 없어서 문제가 생기는 등의 문제로 인해 어려움이 있음

* Nanda Syahrasyad의 "A Deep Dive Into SVG Path Commands"는 SVG 경로가 어떻게 구성되는지를 이해하는 데 매우 유용함. 거의 2년 전 자료이지만 SVG가 할 수 있는 모든 것과 그 방법에 대해 눈을 뜨게 해줌
  - [nan.fyi/svg-paths](https://www.nan.fyi/svg-paths)

* JS를 창의적으로 사용하여 SVG를 동적으로 생성하고 있는 사람이라면, 저에게 DM을 보내길 바람

* React로 구축된 프로젝트에서 SVG를 사용한 재미있는 작업을 했음. 정지된 일러스트레이션 시리즈와 애니메이션 요소가 있었고, 색상은 CMS로 제어됨
  - 프론트엔드는 기본적으로 API를 호출하여 적절한 색상이 할당된 SVG 이미지를 반환받고, 애니메이션은 SVG 요소를 숨기고 보여주는 방식으로 수행됨
  - 예시: [web.archive.org/web/20221020133516im_/https://uncrowd.uk/illustrations/friction/bright_yellow.svg](https://web.archive.org/web/20221020133516im_/https://uncrowd.uk/illustrations/friction/bright_yellow.svg)

* SVG+CSS는 매우 강력함. 내가 좋아하는 간단한 기능은 자바스크립트 없이 다크/라이트 모드를 존중하는 다이어그램을 만드는 것임. 예시 다이어그램: [blog.davidv.dev/posts/ipvs-lb/](https://blog.davidv.dev/posts/ipvs-lb/)

* 선의 밀도를 허용하는 SVG 확장이 있는지 궁금함. 나는 펜을 들어 올리고 내릴 수 있는 플로터를 가지고 있으며, SVG 파일에서 구동됨. 선을 그리는 동안 펜을 내릴 수 있다면 좋겠음
  - 아, Evil Mad Scientist Labs의 Axidraw임. 훌륭한 장치이며 멋진 사람들임

* 멋진 게시물이며, 사이트 디자인도 멋짐. SVG가 존재한 지 오래되었지만 그 잠재력은 아직 다 발휘되지 않은 느낌임. HTML, CSS, JS를 기능적으로 캡슐화할 수 있는 다른 요소는 생각나지 않음. 기본적으로 완전히 다른 HTML 문서처럼 쉽게 사용할 수 있음

* SVG는 매우 탐구되지 않고 사용되지 않은 영역처럼 느껴짐. 상상력에 따라 많은 것을 할 수 있음. 그러나 많은 것을 "하드코어"하게 해야 할 수도 있으므로, 사용 사례에 따라 다름