SVG 노드가 너무 많나요? 자동 추적 결과를 깔끔하게 정리하는 방법
자동 추적한 SVG는 불필요한 기준점 수백 개로 편집이 어렵고 커팅이 느려지곤 합니다. 그 원인과 처음부터 깔끔한 경로를 얻는 방법을 알아봅니다.
목차
PNG를 SVG로 추적한 뒤 편집하려고 열었더니 경로가 기준점으로 뒤덮여 있습니다. 5~6개면 충분할 곡선에 수백 개가 모여 있습니다. 도형을 조금 움직이려 할 때마다 원치 않았던 수십 개의 핸들과 씨름하게 됩니다.
익숙한 상황이라도 벡터화 도구가 고장 난 것은 아닙니다. 대부분의 자동 추적 도구처럼 도형을 그리는 대신 픽셀을 옮겨 적고 있는 것입니다. 왜 이런 일이 생기는지, 생각보다 작업을 더 느리게 만드는 이유와 처음부터 깔끔한 벡터를 얻는 방법을 살펴보겠습니다.
측정 방법: 이 글의 수치는 표시된 특정 비교 파일에서 경로를 선택하고 점을 세어 얻었습니다. 개별 예시이며 모든 추적 도구나 이미지의 평균이 아닙니다.
"노드가 너무 많다"는 말의 의미
SVG 경로는 선분과 곡선 구간을 구성하는 명령과 좌표로 표현됩니다. 편집기는 관련 좌표를 기준점 또는 노드로 표시하고, 베지어 곡선에는 방향 핸들을 제공합니다. 적절하게 배치한 몇 개의 기준점으로 길고 매끄러운 곡선을 표현할 수 있습니다. W3C SVG 경로 사양을 참고하세요. 매끄러워야 할 굽은 부분에 불필요한 모서리 하나가 있다면, 베지어 연결부 수정에서 기준점은 고정하고 핸들을 정렬하는 방법을 확인할 수 있습니다.
도형에 필요한 것보다 기준점이 훨씬 많을 때 문제가 시작됩니다. 디자이너라면 5개 점으로 그릴 곡선이 50개 점으로 만들어집니다. 한눈에 이미지는 괜찮아 보여도 내부 경로는 복잡하게 얽혀 있습니다.
다음과 같다면 노드가 과도하게 늘어난 상태일 수 있습니다.
- 단순한 곡선에 몇 인치 간격이 아니라 몇 픽셀 간격으로 기준점이 있습니다.
- 도형 하나를 선택하면 몇 개면 충분할 자리에 수십 개의 점이 표시됩니다.
- 작품의 단순함에 비해 파일 크기가 놀라울 정도로 큽니다.
자동 추적 도구가 노드를 많이 만드는 이유
전통적인 추적 도구는 래스터 이미지에서 경계나 중심선을 도출해 벡터 곡선으로 근사합니다. Adobe는 이미지 추적에서 경로, 모서리, 노이즈 같은 설정을 제공하고, Potrace는 비트맵 윤곽에 다각형을 기반으로 곡선을 맞추는 알고리즘을 문서화합니다. (Adobe 이미지 추적 옵션, Potrace 논문)
문제는 그 경계가 어디에 있느냐입니다. PNG에는 화면에서 가장자리를 매끄럽게 보이게 하는 부드러운 반투명 픽셀, 즉 안티앨리어싱이 있습니다. 추적 도구에는 그 부드러운 가장자리가 조금씩 흔들리는 선으로 보여 모든 흔들림을 따라 점을 추가합니다. "이것은 호인가, 직선 구간인가?"라고 판단하지 않고 작은 떨림까지 픽셀 윤곽을 그대로 옮기는 것입니다. 도구가 얼마나 세세하게 따라가는지는 크게 다릅니다. 주요 AI 이미지 벡터화 도구의 비교를 참고하세요.
경로 데이터에서도 차이가 보입니다. 그 부엉이의 한쪽 귀깃을 추적한 경우와 깔끔하게 그린 경우는 대략 다음과 같습니다.
<!-- Auto-traced: one ear tuft, 40+ points -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(many more) Z"/>
<!-- Clean: the same tuft, 6 points -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>같은 곡선입니다. 하나는 모든 픽셀을 옮긴 것이고, 다른 하나는 도형입니다.
작업이 느려지는 이유
점이 빽빽한 경로는 편집기에서 보기만 복잡한 것이 아닙니다. 선택하고 형태를 바꿔야 하는 기준점이 늘고, 경로 데이터가 커질 수 있으며, 후속 도구가 처리할 선분도 늘어납니다. 영향은 작품, 편집기, 컴퓨터, 내보내기 설정에 따라 다릅니다. 노드 수는 진단 지표이며 모든 상황에 적용하는 합격 기준은 아닙니다.
| 점이 많은 추적 경로 | 단순한 경로 | |
|---|---|---|
| 기준점 | 검사할 점이 많음 | 검사할 점이 적음 |
| 편집 | 변경할 때 더 많은 핸들이 관여함 | 직접 형태를 바꾸기 쉬움 |
| 파일 크기 | 경로 데이터가 많은 경우가 흔함 | 경로 데이터가 적은 경우가 흔함 |
| 커팅 작업 | 검토할 선분이 많음 | 공구 경로의 형상이 단순함 |
디자인 도구에서
Illustrator나 Figma에서는 기준점이 늘 때마다 실제 수정을 하기 전에 선택할 때 피하거나 정리해야 할 대상이 하나씩 늘어납니다. 깔끔한 곡선은 한두 점만 움직이면 형태를 바꿀 수 있습니다. 픽셀을 옮긴 곡선은 점 무리 전체와 씨름해야 하며 매끄러움을 유지하기도 어렵습니다.
커팅기에서
커팅기는 벡터 도형에서 공구 경로를 도출하므로 불필요한 미세 선분을 단순화하고 시험 커팅할 가치가 있습니다. 다만 가져오기나 커팅 실패의 원인이 노드 수뿐이라고 생각하지는 마세요. Cricut은 패턴 채우기, 클리핑 경로, 편집 가능한 텍스트, 삽입된 래스터 이미지 등 지원하지 않는 SVG 기능을 별도로 안내합니다. Cricut의 미지원 항목 안내를 참고하세요. 레이저에 사용할 파일이라면 레이저용 SVG를 준비하고 기계 소프트웨어에서 검증하세요.
Cricut이 업로드를 거부하면 File Too Large 오류를 진단하세요. 경로 수와 파일 크기는 노드 수와 다른 개념입니다.
깔끔한 노드를 얻는 방법
세 가지 해결책이 있으며, 대체로 다음 순서로 후속 수고를 더 줄일 수 있습니다.
- 변환 후 단순화합니다. Illustrator의 오브젝트 → 패스 → 단순화로 기준점을 줄일 수 있습니다. Adobe는 단순화 정도, 곡선 정밀도, 모서리 보존을 조절하는 설정을 제공하므로, 무손실이라고 가정하지 말고 결과를 미리 보세요. Adobe 단순화 문서를 참고하세요.
- 추적 디테일을 낮춥니다. 대부분의 추적 도구는 복잡도를 줄일 수 있지만 정교한 해결책은 아닙니다. 노드가 줄 만큼 낮추면 원하던 디테일까지 잃기 시작합니다.
- 처음부터 깔끔하게 시작합니다. 처음부터 깔끔한 경로를 출력하는 도구로 벡터화하면 정리할 것이 없어집니다.
마지막 목표는 저희가 PerfectVector를 만든 이유 중 하나입니다. 원본 픽셀의 모든 흔들림을 보존하기보다 편집 가능한 벡터 도형을 만들도록 설계되었습니다. 파일을 선택하기 전에 벡터 추적 품질 평가표를 사용해 실루엣, 모서리 재현성, 노드 수, 편집 편의성을 다른 추적 결과와 비교하세요.
일러스트만의 문제도 아닙니다. 로고와 레터링 역시 같은 방식으로 비대해집니다. 선명한 가장자리와 깔끔한 비닐 커팅이 필요한 부분에서 특히 문제가 됩니다.
웹에 배포하려면 도형이 제대로 된 뒤 SVGO 최적화 안내를 따르세요. 파일 크기 변화와 ID에 의존하는 스타일을 별도로 시험합니다. SVG가 작아졌다는 것만으로 편집 가능한 경로나 페이지 동작이 여전히 요구사항을 충족한다고 볼 수 없습니다.
후속 내보내기 형식이 DXF라면, 별도의 전달 문제로 CNC 작업의 선분 밀도를 확인하세요.
작품의 두 상태가 서로 변형되는 애니메이션을 만든다면 SVG 모핑 애니메이션 안내에서 노드를 정리하면서 유용한 점 대응 관계를 보존해야 하는 이유를 확인할 수 있습니다. 정지한 시작과 끝 상태뿐 아니라 전환 중간도 검사하세요.
직접 사용해 보세요
PerfectVector 이미지 벡터 변환기에 PNG나 JPG를 넣어 보세요. 로그인도 신용카드도 필요하지 않습니다. 결과에 노드 수와 색상 수가 바로 표시되므로, 다운로드 전에 직접 차이를 판단할 수 있습니다.
자주 묻는 질문
SVG에는 노드가 몇 개 있어야 하나요? 모든 상황에 통하는 목표치는 없습니다. 형태와 필요한 디테일을 보존하는 가장 적은 점 수가 적절합니다. 이 글에 표시된 부엉이에 한정한 규모 참고치로, 비교 추적에는 노드 522개, PerfectVector 결과에는 59개가 있었습니다. 모든 도구와 이미지의 평균이 아니라 재현 가능한 예시로 보세요.
노드가 너무 많으면 커팅기에 영향을 주나요? 그럴 수 있습니다. 빽빽한 경로는 커팅 과정에서 처리할 선분을 늘리며 검사하거나 편집하기 어려울 수 있습니다. 눈에 보이는 영향은 기계, 소재, 속도, 칼날, 경로 형상에 따라 달라지므로 신중하게 단순화하고 작은 시험 커팅을 하세요. 모든 가져오기 문제를 노드 수 탓으로 돌리지 말고 지원하지 않는 SVG 기능도 확인합니다.
SVG의 노드 수를 줄이려면 어떻게 하나요? 세 가지 방법이 있으며, 대체로 다음 순서로 후속 수고를 줄일 수 있습니다. 변환 후 경로를 단순화하는 방법(Illustrator의 오브젝트 → 패스 → 단순화)은 정보를 잃습니다. 추적 디테일 설정을 낮추는 방법은 거친 조절 방식이라 원하는 디테일도 사라집니다. 처음부터 깔끔한 점을 배치하는 벡터화 도구로 다시 추적하면 제거할 것이 없어집니다.
Illustrator의 단순화만 사용하면 안 되나요? 사용할 수 있습니다. Illustrator의 단순화 기능은 곡선 정밀도와 모서리 보존 설정을 제공하면서 기준점을 줄입니다. 강한 설정은 모서리나 곡선을 바꿀 수 있으므로 미리보기를 사용하고 결과를 적용하기 전에 실루엣을 비교하세요. 더 단순한 추적 결과로 시작하면 필요한 정리 작업을 줄일 수 있습니다.
출처
- W3C: SVG 경로: SVG 경로 명령, 좌표, 곡선 구간에 대한 규범적 정의입니다.
- Adobe Illustrator: 이미지 추적 패널 옵션: 경로 맞춤, 모서리, 노이즈, 색상, 추적 복잡도를 조절하는 공식 설정입니다.
- Adobe Illustrator: 경로 자동 단순화: 공식 단순화 절차와 정밀도 및 점 수 조절 설정입니다.
- Selinger: Potrace, 다각형 기반 추적 알고리즘: 전통적인 추적 도구의 경계 근사와 곡선 맞춤을 설명하는 1차 기술 자료입니다.
- Cricut: 이미지 업로드의 미지원 항목: Design Space 업로드를 막거나 바꿀 수 있는 SVG 구조의 공식 목록입니다.
