품질 손실 없이 PNG를 SVG로 변환하는 방법과 확인 기준
경로 품질, 노드 수, 색상, 구조를 확인해 PNG를 선명하고 편집 가능한 SVG로 변환합니다. 래스터를 유지하는 편이 더 나은 경우도 알아봅니다.
목차
PNG를 SVG로 추적하면 픽셀이 도형으로 재구성됩니다. 재구성한 작품을 확대하거나 편집할 수 있지만, 정확한 복제나 원본에 없는 세부 정보의 복원까지 보장하지는 않습니다. 로고, 아이콘, 평면 일러스트는 윤곽, 색상, 작은 디테일을 비교한 다음 SVG의 완성 여부를 판단하세요. 사진은 양식화된 결과를 원하지 않는 한 래스터로 유지하는 편이 대체로 좋습니다.
가능한 한 좋은 PNG 원본, 명확한 사용 목적, 최종 검사에 쓸 SVG 지원 편집기나 제작 앱이 필요합니다. 정리 과정에서 디자인이 바뀌었을 때 되돌릴 수 있도록 원본 PNG와 수정하지 않은 SVG 내보내기 파일을 보관하세요.
PNG와 SVG는 서로 다른 종류의 파일입니다
PNG는 픽셀 샘플이 격자로 배열된 래스터 이미지입니다. 의도한 크기에서는 잘 보이지만 충분히 확대하면 격자가 드러나고, 가장자리가 흐리거나 각져 보입니다. PNG 압축은 무손실이지만 저장된 이미지의 픽셀 크기는 유한합니다. W3C PNG 3 사양을 참고하세요.
SVG는 경로, 곡선, 채우기 같은 벡터 도형을 저장할 수 있습니다. 이런 벡터 요소는 확대해도 래스터 픽셀이 드러나지 않습니다. 다만 SVG에도 각자 한계가 있는 래스터 이미지나 효과가 포함될 수 있습니다. (W3C SVG 2, SVG 삽입 콘텐츠) 자세한 설명은 이미지 벡터화란 무엇인가요?를 참고하세요.
따라서 "PNG를 SVG로 변환한다"는 말은 픽셀 이미지를 편집 가능한 도형으로 재구성한다는 뜻입니다. 결과의 품질은 이 재구성을 얼마나 잘하느냐에 달려 있습니다.
"품질 손실 없이"의 실제 의미
PNG를 SVG로 잘 변환했는지는 "Illustrator에서 열린다"는 것만으로 판단할 수 없습니다. 재구성한 벡터의 네 가지 속성을 검사하세요.
- 깔끔한 경로: 픽셀 격자가 아니라 작품의 형태를 따라가는 매끄러운 곡선입니다.
- 불필요한 기준점이 없는 상태: 형태를 보존할 만큼의 점을 사용하되, 수동 편집이 번거로워질 정도로 많아서는 안 됩니다. Adobe 역시 쉬운 편집과 매끄러운 표시를 위해 점을 줄이도록 권장합니다. (Adobe 경로 편집 안내, 노드 수가 중요한 이유)
- 정확한 색상: 단색 영역이 거의 같은 색의 수십 개 도형으로 갈라지지 않고 유지됩니다.
- 사용하기 편한 구조: 의도하지 않은 조각이나 중복 도형 없이 원하는 부분을 선택하고 조정할 수 있습니다. 일부 디자인에서는 그룹이나 복합 경로를 사용하는 것이 적절합니다.
자동 추적 도구마다 결과가 크게 다릅니다. 디테일, 노이즈, 경로 맞춤, 모서리, 색상 설정은 재현성과 복잡도 사이를 조절합니다. Adobe는 이미지 추적에서 이런 설정을 직접 제공합니다. Adobe 이미지 추적 옵션을 참고하세요. 기술적으로 벡터여도 편집하거나 자르기 불편한 파일일 수 있으므로, .svg 확장자로 판단하지 말고 경로를 검사하세요. 커팅기에 사용할 SVG라면 레이저 커팅용으로 준비하고 공구 경로부터 확인하세요.
품질 손실 없이 PNG를 SVG로 변환하는 절차
자동 벡터화 도구를 사용한 뒤 윤곽, 기준점 배치, 색상, 레이어가 어떻게 재구성되었는지 검사하는 방법이 있습니다. PerfectVector에서의 절차는 다음과 같습니다.
- 원본을 선택하고 검사합니다. 스크린샷보다 원본 작품을 우선하세요. 사용할 크기에서 글자 안쪽 공간, 가는 선, 투명 영역, 가장 작은 디테일을 확인합니다.
- PNG를 업로드하고 추적합니다. PNG를 SVG로 변환하는 도구를 여세요. 업로드 준비 과정에서 이미지가 축소되거나 압축된다면 계속하기 전에 준비된 이미지를 검사하세요. 그 변화가 추적에 영향을 줄 수 있습니다. 제품 정보는 준비, 변환, 미리보기, 잠금 해제를 구분해 설명합니다.
- 무료 미리보기를 원본과 비교합니다. 실루엣, 의도한 틈, 글자, 눈에 보이는 색상을 확인합니다. 미리보기에서는 색상 편집을 사용할 수 없습니다.
- 편집 전에 결과를 잠금 해제합니다. 크레딧 1개로 결과를 잠금 해제할 수 있습니다. 그다음 편집기에서 영역의 색상을 바꾸거나 거의 같은 색상을 합칩니다. 변경할 때마다 다시 검사하세요. 팔레트가 작아지면 의도한 색상 차이가 사라질 수 있고, 색상을 바꿔도 겹친 커팅 도형은 합쳐지지 않습니다.
- 작업용 사본을 SVG로 내보냅니다. 추가로 정리하기 전에 사본을 보존합니다.
- 사용할 앱에서 엽니다. 크기, 도형, 채우기, 스트로크, 오브젝트 구조를 확인합니다. 제작용이라면 실제 출력 크기로 시험하세요. 브라우저 미리보기가 선명하다고 해서 다른 앱이 모든 기능을 정확히 가져온다는 뜻은 아닙니다.
실용적인 품질 검사
사용할 크기와 확대한 화면에서 다음을 비교하세요.
- 바깥 실루엣이 원본 작품을 따르나요?
- 글자 안쪽 구멍과 의도한 작은 틈이 여전히 열려 있나요?
- 곡선이 매끄럽고, 날카롭게 남아야 할 모서리가 둥글어지지 않았나요?
- 팔레트를 합친 뒤에도 색상이 시각적 역할을 유지하나요?
- 하나의 삽입 이미지가 아니라 의도한 도형을 선택할 수 있나요?
글자 안쪽 공간이 사라지면 이전 버전으로 복원하고 디테일을 더 남기거나 해당 부분을 다시 그리세요. 여분의 조각이 생기면 원본의 노이즈를 확인하고 의도하지 않은 조각만 제거합니다. 사용할 앱에서 렌더링이 달라지면 바로 전체 디자인을 다시 추적하기보다 지원하지 않는 기능을 찾아 분리하세요. SVG가 픽셀처럼 보일 때의 안내는 삽입된 픽셀과 경로 품질 문제를 구별하는 데 도움이 됩니다.
인터페이스 아이콘 폴더를 변환할 때는 또 다른 품질 문제도 생깁니다. 파일들이 하나의 계열로 어울려야 한다는 점입니다. 대표 이미지의 추적 결과가 검사를 통과하면 UI 키트용 PNG 아이콘을 SVG로 변환하는 절차를 통해 그리드, 시각적 크기, 색상 규칙, 전달 전 검사를 통일하세요.
가능한 한 선명한 결과를 위한 팁
- 사진보다 평면 작품이 유리합니다. 로고, 아이콘, 평면 일러스트는 좋은 후보입니다. 추적 결과를 확인하세요. 세밀한 사진은 재현성에 대한 기대를 다르게 설정해야 합니다.
- 대비를 신중히 확인하세요. 빛바랜 사본은 의도한 디테일을 보존할 수 있을 때만 보정합니다.
- 가능한 한 좋은 원본을 선택하세요. 크고 선명한 PNG는 작은 썸네일보다 가장자리 정보를 더 많이 제공할 수 있지만, 픽셀을 늘려도 이미 흐려지거나 사라진 디테일은 복구되지 않습니다.
- 색상은 먼저 줄이지 말고 나중에 줄이세요. 먼저 추적하고 잠금 해제한 뒤, 팔레트를 합칠 때마다 원본과 비교합니다.
제어 범위와 재현성으로 추적 절차 비교하기
어떤 선택지가 있는지 알면 도움이 됩니다. 모든 상황에 적용되는 순위보다, 각 방식이 얼마나 많은 제어를 제공하고 무엇을 확인해야 하는지를 비교하는 편이 유용합니다.
| 방식 | 주요 제어 | 확인할 사항 |
|---|---|---|
| 자동 벡터화 도구(PerfectVector 포함) | 제품별 설정을 활용한 빠른 초기 변환 | 원본 재현성, 노드 수, 팔레트, 개인정보 보호, 현재 가격 |
| Illustrator 이미지 추적 | 경로, 모서리, 노이즈, 색상, 방식 설정 | 결과를 확장한 뒤 경로 복잡도와 누락된 디테일 검사 |
| Inkscape 비트맵 추적 | 스캔 모드, 임곗값, 다중 스캔 설정 | 겹친 오브젝트, 작은 얼룩, 경로 정리 |
| 수동으로 다시 그리기 | 모든 도형과 기준점을 직접 제어 | 필요한 시간과 원본과의 일치 정도 |
수동으로 다시 그리면 가장 직접적으로 제어할 수 있지만, 필요한 시간은 작품과 작업자에 따라 달라집니다. 자동 도구가 더 빠를 수 있으나 출력 품질도 이미지와 설정에 따라 달라집니다. Adobe는 세부 이미지 추적 설정을, Inkscape는 임곗값과 다중 스캔 절차를 문서화합니다. (Adobe 이미지 추적 절차, Inkscape 추적 안내) 제품 선택지를 비교하고 있다면 AI 이미지 벡터화 도구 비교를 참고하세요.
PNG를 SVG로 변환하지 않는 편이 좋은 경우
벡터화는 로고, 아이콘, 일러스트, 선화, 레터링처럼 도형이 명확한 그래픽에 강합니다. 사진은 처리하기 어렵습니다. 사진에는 연속된 명암의 세부 정보가 있어, 도형으로 근사하면 파일 복잡도가 높아지거나 단순화된 포스터 같은 모습이 될 수 있습니다.
판단 기준은 간단합니다. 가장자리가 선명하고 색상이 제한된 이미지라면 벡터화하세요. 사진이라면 래스터로 유지하거나, 충실한 재현 대신 양식화된 결과를 예상하세요.
자주 묻는 질문
PNG를 SVG로 변환하면 품질이 떨어지나요? 컨테이너를 바꾸는 것만으로 품질이 자동으로 좋아지거나 나빠지지는 않습니다. 추적된 SVG는 재구성한 경로를 확대해도 래스터 픽셀이 드러나지 않지만, 재현성은 원본, 추적 방식, 설정에 따라 달라집니다. PNG를 단순히 삽입한 SVG는 픽셀을 벡터 도형으로 변환한 것이 아닙니다.
PNG 사진을 SVG로 변환할 수 있나요? 가능하지만 보통은 권장하지 않습니다. 사진을 벡터화하면 거대한 파일이나 포스터처럼 색상이 단순화된 파일이 됩니다. 벡터화는 로고, 아이콘, 일러스트에 적합합니다.
PNG를 SVG로 변환하는 것은 무료인가요? 변환과 미리보기는 무료입니다. 크레딧 1개로 결과를 잠금 해제하면 편집하고 내보낼 수 있습니다. 먼저 미리보기를 원본과 비교한 다음, 색상 편집기를 사용하기 전에 잠금 해제하세요. 내보낸 SVG는 실제 사용할 앱에서 시험합니다.
완성한 SVG는 어떤 프로그램에서 열 수 있나요? Illustrator, Figma, Inkscape, Affinity Designer, Canva 등 많은 벡터 지원 도구에서 SVG 작업을 할 수 있습니다. 필터, 텍스트, 마스크, 삽입 콘텐츠 등의 지원은 다를 수 있으므로, 사용할 정확한 앱과 버전에서 파일을 시험하세요.
출처
- W3C: Portable Network Graphics (PNG) 사양 제3판: 무손실 이미지 표현과 알파를 포함하는 현행 PNG 표준입니다.
- W3C: Scalable Vector Graphics (SVG) 2: 벡터 도형, 경로, 색상 처리, SVG 렌더링을 정의하는 표준입니다.
- W3C: SVG 삽입 콘텐츠: PNG를 SVG 안에 넣는 것이 경로 벡터화가 아닌 이유를 보여 주는 사양입니다.
- Adobe Illustrator: 이미지 추적 패널 옵션: 래스터 추적의 디테일, 경로, 모서리, 노이즈, 색상을 조정하는 공식 설정입니다.
- Adobe Illustrator: 경로 자동 단순화: 기준점을 줄이는 공식 설정과 재현성 사이의 절충을 설명합니다.
- Inkscape: 이미지 추적: 단일 스캔과 다중 스캔 추적의 현재 공식 절차입니다.
- PerfectVector: 제품 정보: 업로드 준비, 무료 미리보기, 결과 잠금 해제 이용을 설명합니다.
PNG를 변환하고 미리보기를 비교해 보세요. 원본의 윤곽과 작은 디테일을 확인하고, 편집 전에 잠금 해제한 뒤, 내보낸 SVG를 사용할 앱에서 검증하세요.
