PNG to SVG 변환 방법 총정리 - 무료 도구부터 벡터화 품질 높이는 팁까지
로고와 아이콘이 깨지지 않는 벡터 이미지로 바꾸는 방법을 정리했습니다. 무료 변환 도구 비교, Inkscape 사용법, 가짜 변환 구별하는 방법까지 실전 위주로 안내합니다.
로고 파일을 현수막 업체에 보냈더니 벡터 파일로 다시 달라는 답장을 받아본 적 있으실 겁니다. 분명 컴퓨터에서는 선명하게 보이던 PNG인데, 크게 인쇄하거나 확대하면 가장자리가 계단처럼 깨집니다. 이럴 때 필요한 것이 PNG to SVG 변환입니다. 그런데 막상 검색해 보면 변환 사이트가 수십 개나 나오고, 어떤 곳은 변환해도 화질이 그대로 깨져 있습니다. 왜 그런지 원리부터 짚고, 실제로 쓸 만한 방법을 순서대로 정리하겠습니다.
PNG와 SVG, 무엇이 다른가
두 형식은 이미지를 저장하는 방식 자체가 다릅니다. PNG는 래스터(비트맵) 형식으로, 이미지를 수많은 픽셀 점으로 기록합니다. 반면 SVG는 벡터 형식으로, 점과 점을 잇는 수학적 곡선(패스)으로 도형을 기록합니다. 픽셀이 아니라 수식이기 때문에 아무리 확대해도 깨지지 않습니다.
| 구분 | PNG | SVG |
|---|---|---|
| 저장 방식 | 픽셀 단위 래스터 | 수학적 패스 기반 벡터 |
| 확대 시 품질 | 계단 현상 발생 | 무한 확대 가능 |
| 적합한 용도 | 사진, 스크린샷 | 로고, 아이콘, 도형 |
| 파일 크기 | 해상도에 비례 | 도형 복잡도에 비례 |
| 수정 편의성 | 픽셀 편집 필요 | 색상, 형태를 코드로 수정 가능 |
웹사이트 아이콘이나 인쇄용 로고처럼 크기가 자주 바뀌는 그래픽이라면 SVG가 압도적으로 유리합니다. 파일 하나로 모든 해상도에 대응할 수 있기 때문입니다.
PNG to SVG 변환의 원리와 한계
PNG to SVG 변환은 단순한 확장자 변경이 아닙니다. 픽셀 덩어리를 분석해서 색상 경계를 찾고, 그 경계를 곡선으로 다시 그리는 트레이싱(tracing) 작업입니다. 없던 정보를 새로 만들어내는 과정이라서, 원본이 어떤 이미지냐에 따라 결과 품질이 크게 갈립니다.
변환이 잘 되는 이미지와 안 되는 이미지를 구분하면 다음과 같습니다.
- 잘 되는 이미지: 로고, 아이콘, 픽토그램, 손글씨 캘리그라피처럼 색 수가 적고 경계가 뚜렷한 그래픽
- 어느 정도 되는 이미지: 단순한 일러스트, 색이 4~8개 수준인 캐릭터 그림
- 사실상 안 되는 이미지: 인물 사진, 풍경 사진, 그라데이션이 많은 이미지. 변환해도 색 덩어리가 뭉개지거나 파일 크기만 수십 배로 커집니다
PNG to SVG 변환의 핵심은 도구 선택이 아니라 원본 판별입니다. 색이 적고 경계가 선명한 이미지는 어떤 도구를 써도 잘 나오고, 사진은 어떤 도구를 써도 벡터화의 이점이 사라집니다.
무료로 쓸 수 있는 변환 도구 비교
Inkscape - 무료 프로그램 중 최고 선택지
오픈소스 벡터 편집 프로그램으로, 내장된 비트맵 트레이싱 기능(Trace Bitmap)이 강력합니다. 변환 후 패스를 직접 다듬을 수 있다는 점이 온라인 도구와의 가장 큰 차이입니다. Windows, macOS, Linux 모두 지원하며 완전 무료입니다.
SVGcode - 설치 없는 브라우저 도구
구글 개발자가 만든 웹 기반 도구(svgco.de)로, 브라우저 안에서 변환이 이루어져 이미지가 서버로 전송되지 않습니다. 흑백과 컬러 트레이싱을 모두 지원하고 무료입니다. 간단한 아이콘 변환이라면 이것만으로 충분합니다.
Vectorizer.AI - 품질이 가장 좋은 AI 변환
AI 기반 트레이싱으로 복잡한 일러스트도 비교적 깔끔하게 벡터화합니다. 다만 결과 미리보기는 무료지만 파일 다운로드는 유료 크레딧이 필요합니다. 상업용 로고처럼 품질이 중요한 작업에 적합합니다.
Inkscape로 직접 변환하는 방법
가장 확실한 무료 방법인 Inkscape 기준으로 과정을 정리합니다. 처음이라도 5분이면 충분합니다.
- 1단계: Inkscape를 실행하고 PNG 파일을 캔버스로 드래그해서 불러옵니다
- 2단계: 이미지를 선택한 상태에서 메뉴의 패스(Path) > 비트맵 따오기(Trace Bitmap)를 누르거나 단축키 Shift+Alt+B를 누릅니다
- 3단계: 단색 로고라면 밝기 기준(Brightness cutoff), 컬러 이미지라면 다중 스캔(Multicolor)을 선택하고 미리보기를 확인합니다
- 4단계: 적용 후 생성된 벡터를 옆으로 옮겨 원본과 비교하고, 원본 PNG 레이어는 삭제합니다
- 5단계: 파일 > 저장에서 형식을 Plain SVG로 지정해 저장합니다
다중 스캔의 색상 단계 수를 조절하면 결과물의 디테일과 파일 크기가 함께 변합니다. 로고라면 2~6단계 정도에서 시작해 보시는 것을 권합니다.
변환 품질을 높이는 실전 팁
같은 도구를 써도 원본을 어떻게 준비하느냐에 따라 결과가 눈에 띄게 달라집니다. 변환 전에 아래 항목을 점검해 보세요.
- 원본은 가능한 한 큰 해상도로 준비합니다. 가로 200px짜리 로고보다 1000px짜리가 경계 인식이 훨씬 정확합니다
- 배경이 있다면 투명 배경 PNG로 먼저 정리합니다. 흰 배경도 하나의 색 영역으로 트레이싱되기 때문입니다
- JPG를 PNG로 바꿔서 변환하는 것은 의미가 없습니다. JPG 압축으로 생긴 노이즈가 경계를 지저분하게 만듭니다
- 변환 후에는 반드시 500% 이상 확대해서 곡선이 매끄러운지 확인합니다
정리하면 이렇습니다. 지금 변환하려는 이미지가 로고나 아이콘이라면 SVGcode에서 바로 시도해 보시고, 결과가 아쉬우면 Inkscape의 다중 스캔으로 다시 변환해 보세요. 이 두 가지만 해봐도 무료 범위 안에서 얻을 수 있는 최상의 결과에 도달할 수 있습니다.
