PNG to SVG, 사실은 벡터 트레이싱이 아니다 — 픽셀마다 rect 하나

가이드 · 2026-08-19 최종 확인

"PNG를 SVG로 바꿔준다"는 온라인 도구를 써본 사람이라면 한 번쯤 의아했을 겁니다. 로고를 넣었더니 결과 SVG 파일이 원본 PNG보다 훨씬 크고, 확대해보면 여전히 계단처럼 각져 보입니다. SVG는 벡터 포맷이라 무한히 확대해도 매끈해야 하는데 왜 이럴까요. 답은 간단합니다 — 이런 도구 대부분은 "벡터 트레이싱(vector tracing)"을 하는 게 아니라, 픽셀 하나하나를 그대로 SVG 도형으로 다시 찍어내는 방식이기 때문입니다. 이 가이드는 실제 코드를 근거로 그 차이를 설명합니다.

1. 진짜 벡터 트레이싱은 무엇을 하는가

potrace, Adobe Illustrator의 Image Trace, Inkscape의 Trace Bitmap 같은 진짜 벡터 트레이싱 도구는 컴퓨터 비전에 가까운 작업을 합니다. 먼저 색상을 몇 개의 대표 색으로 단순화(색상 양자화)하고, 같은 색 영역의 경계를 찾아 윤곽선을 추출한 뒤, 그 윤곽선을 베지어 곡선(bezier curve)으로 근사합니다. 즉 "이 영역의 가장자리는 대략 이런 곡선이다"라는 수학적 경로(path)를 계산해내는 것입니다. 결과물은 단순한 로고·아이콘 같은 그래픽에서는 원본보다 훨씬 작은 파일 크기로, 어떤 배율로 확대해도 매끈한 곡선을 유지합니다.

2. 이 도구가 실제로 하는 것: 픽셀 하나 = rect 하나

이 사이트의 PNG to SVG 변환기 소스 코드를 직접 확인하면 방식이 전혀 다릅니다. 곡선 근사 과정이 아예 없습니다. 이미지를 Canvas에 그려 픽셀 데이터를 읽은 뒤, 밝기 임계값보다 어두운 픽셀을 하나씩 순회하면서 그 픽셀 위치에 정확히 <rect x="x" y="y" width="1" height="1"/> 한 줄을 그대로 추가합니다.

이 방식은 "추적(tracing)"이라는 이름과 달리 원본 래스터 그리드를 SVG 문법으로 재인코딩한 것에 가깝습니다. 그래서 결과를 확대해도 원본 PNG와 똑같은 픽셀 계단이 그대로 보이고, 단순한 아이콘이 아닌 이상 파일 크기가 원본 PNG보다 훨씬 커지는 경우가 많습니다(픽셀 하나당 태그 하나이니 당연한 결과입니다).

3. 숨은 함정: 알파 채널을 읽지 않는다

더 실무적인 문제도 있습니다. 이 도구는 전경/배경을 판정할 때 픽셀의 투명도(알파 채널) 값을 전혀 읽지 않고 RGB 밝기만으로 판정합니다. 그런데 투명 PNG는 완전히 투명한 픽셀이라도 내부적으로 RGB 값이 저장되어 있는 경우가 흔하고, 그 값이 검정(0,0,0)인 경우도 많습니다(투명 픽셀의 흔한 인코딩 방식). 이런 PNG를 넣으면 투명해야 할 배경이 "어두운 전경"으로 오판되어, 로고 뒤에 뜻밖의 검은 사각형이 나타날 수 있습니다.

4. 원본이 크면 자동으로 줄어든다

또 하나 알아둘 점은, 원본 PNG의 가로나 세로가 400px를 넘으면 자동으로 400px 이하로 축소한 뒤 변환한다는 것입니다. 픽셀 하나당 rect 요소가 하나씩 생기는 구조상, 축소 없이 큰 이미지를 그대로 변환하면 요소 수가 감당하기 어려울 정도로 늘어나기 때문으로 보입니다. 결과적으로 큰 이미지를 넣으면 원본 해상도가 아니라 축소된 해상도 기준으로 변환됩니다.

5. 그래서 언제 써야 하나

• 이 도구가 맞는 경우: 그냥 .svg 확장자가 필요한 경우, 혹은 매우 단순한 소형 아이콘을 빠르게 SVG 컨테이너에 담고 싶은 경우.
• 이 도구가 안 맞는 경우: 로고를 무한 확대해도 매끈하게 보이게 하려는 경우, 편집 가능한 곡선 경로가 필요한 경우, 투명 배경이 있는 이미지를 변환해야 하는 경우 — 이럴 땐 potrace, Adobe Illustrator의 Image Trace, Inkscape의 Trace Bitmap처럼 실제 윤곽선 추적을 수행하는 도구를 쓰는 것이 맞습니다.

자주 묻는 질문