PNG·JPG를 편집 가능한 SVG로 바꾸는 방법: 트레이싱부터 결과 검증까지

PNG나 JPG를 편집 가능한 SVG로 바꾸려면 이미지의 형태를 트레이싱하거나 벡터 도형으로 다시 그려야 합니다. SVG 파일 안에 이미지를 넣는 것만으로는 벡터화되지 않습니다. 파일명이 .svg로 끝나는지보다 원본 비트맵을 제거한 뒤에도 개별 요소의 채우기 색이나 윤곽선을 바꿀 수 있는지가 중요합니다.

트레이싱은 평면 아이콘, 윤곽이 뚜렷한 실루엣, 단순한 일러스트에 특히 적합합니다. 사진, 부드러운 그림자, 질감이 있는 그림은 대개 선택이 필요합니다. 래스터로 유지하거나, 단순화된 벡터 표현을 받아들이거나, 필요한 부분만 수작업으로 다시 만들 수 있습니다. AI로 다시 그리는 방법도 있지만 새로운 해석이므로 원본과 얼마나 일치하는지 별도로 검증해야 합니다.

이 튜토리얼에는 직접 만든 기하학적 머그잔 테스트 이미지, 실제 로컬 트레이싱 결과, 비트맵을 담아 벡터처럼 보이게 한 SVG, 색을 바꾼 벡터 파일이 포함됩니다. 테스트 이미지는 코드로 만든 것이며 AI 모델의 출력이 아닙니다. 변환은 2026년 11월 11일 VTracer 0.6.15로 실행했습니다. 이 글을 위해 유료 Illustrator나 AI 변환 서비스를 테스트하지는 않았습니다.

예제 파일을 내려받아 차이 확인하기

PNG → SVG 예제 모음을 내려받으세요. mug.png, mug-wrapped.svg, mug-traced.svg, mug-recolored.svg, 그라데이션 테스트 이미지, 변환 스크립트와 검사 보고서가 들어 있습니다. 고객 로고나 기밀 디자인을 다루기 전에 이 파일로 먼저 확인하세요.

파일	내용	이 예제로 확인한 것
`mug.png`	512 × 384픽셀 원본 테스트 이미지	입력 이미지이며 편집 가능한 벡터는 아님
`mug-wrapped.svg`	PNG 이미지 1개를 포함하며 path는 0개	유효한 SVG 파일도 전부 픽셀에 의존할 수 있음
`mug-traced.svg`	path 4개, 포함된 이미지 없음	이 입력에 대해 벡터 형상이 생성됨
`mug-recolored.svg`	형상은 같고 채우기 색 하나만 변경됨	비트맵을 다시 칠하지 않고 요소의 색을 바꿀 수 있음
`gradient-traced.svg`	이번 실행에서는 path 2개	작은 벡터 파일을 만드는 과정에서 원본의 색조 정보가 크게 줄 수 있음

path 개수는 이 파일에서 측정한 값이지 목표 수치가 아닙니다. 단순한 그림은 path 네 개로도 충분할 수 있고, 수백 개여도 편집하기 어려울 수 있습니다. 반대로 사각형, 원, 텍스트만으로 이루어진 벡터에는 path가 하나도 없을 수 있습니다. 실제 내용과 필요한 수정 작업을 확인하세요.

실제 로컬 트레이싱 결과와 색상 변경 결과

로컬 결과 확인 화면을 영어 브라우저에서 촬영한 스크린샷입니다. 입력은 코드로 만들었으며, 실제 트레이싱 결과를 보여 줍니다. AI 제품의 인터페이스가 아닙니다.

트레이싱, 다시 그리기, 혼합 파일 중 선택하기

기존 윤곽을 유지해야 한다면 트레이싱을 선택하세요. 실루엣이 명확하고 해상도가 충분하며 색 영역이 적은 입력이 좋습니다. 발표 자료에서 복사한 작은 미리보기보다 품질이 가장 좋은 원본으로 시작하세요. JPEG 압축으로 생긴 작은 색 얼룩이 불필요한 도형으로 변환될 수 있습니다.

픽셀의 정확한 일치보다 요소별 편집이 중요하다면 다시 그리기를 선택하세요. 예를 들어 컵, 손잡이, 받침을 이름이 있는 그룹으로 분리하면 애니메이션이나 배치 변경에 유용합니다. 자동 트레이싱은 대개 의미 있는 물체가 아니라 연결된 색 영역을 구분합니다. AI가 그룹을 더 잘 나눌 수 있지만 비율을 바꾸거나 세부를 없애거나 글자를 만들어 낼 수도 있습니다. 다시 그린 결과는 승인이 필요한 디자인 수정본으로 다루세요.

픽셀이 적절한 부분은 혼합 파일로 유지하세요. 사진 배경 위에 벡터 라벨을 올린 SVG도 정상적인 파일입니다. 파일 전체를 벡터화된 사진이라고 설명하는 것이 문제입니다. 어느 부분이 래스터인지 밝히고 고해상도 원본을 보관하세요. 파일 형식이 확대 가능하다고 사진의 세부가 무한히 유지되는 것은 아닙니다.

기존 이미지를 변환하는 대신 새 벡터 그림을 생성하려면 Image 2.6 SVG 가이드 (영문)를 참고하세요. 출발점이 다르므로 검수 기준도 달라집니다. 해당 모델의 SVG/GIF 요청이 거부된다면 확장자를 바꾸지 말고 Image 2.6 출력 형식·매개변수 오류 해결 가이드 (영문)를 확인하세요.

그래픽 편집기에서 트레이싱하기

Inkscape 트레이싱 설명서는 이미지를 가져온 뒤 Path → Trace Bitmap을 사용하는 방법을 설명합니다. 단순한 단색 실루엣에는 단일 스캔을, 서로 다른 색 영역을 살려야 할 때는 컬러 트레이싱을 사용하세요. 모든 이미지에 같은 프리셋을 적용하지 말고 미리보기를 보면서 입력에 맞게 설정을 조정하세요.

트레이싱을 적용한 뒤 결과를 옆으로 옮겨 보세요. 많은 편집기가 원본 위에 결과를 겹쳐 놓아 실제보다 좋아 보일 수 있습니다. 문서 사본에서 원본 비트맵을 숨기거나 삭제하고 윤곽, 구멍, 작은 세부를 확인하세요. 요소 하나의 색을 바꾼 뒤 SVG를 저장하고 다시 여세요. 그래야 생성 성공과 실제 사용 가능 여부를 구분할 수 있습니다.

Illustrator의 공식 Image Trace 작업 흐름은 이미지 배치와 선택, Image Trace 패널 열기로 시작합니다. 적절한 프리셋과 미리보기를 확인하고 일반적인 편집 가능 path가 필요하면 Expand를 실행하세요. 이는 문서에 근거한 대안 설명이며, 이 글의 다운로드 결과는 Illustrator가 아닌 VTracer로 만들었습니다.

글자는 별도로 처리해야 합니다. 글자를 트레이싱하면 편집 가능한 텍스트 대신 윤곽선이 만들어지는 경우가 많습니다. 문구를 바꿔야 한다면 사용할 수 있는 글꼴로 다시 입력하고 줄바꿈과 간격을 확인하세요. 텍스트를 편집할 수 있는 작업본을 보관하고, 수신자가 요구할 때만 윤곽선으로 바꾼 전달용 사본을 따로 만드세요. 윤곽선 변환은 형태를 보존하지만 일반적인 텍스트 편집 기능은 없앱니다.

로컬 변환 재현하기

VTracer 프로젝트는 래스터를 벡터로 변환합니다. 다음 예제는 실제 사용한 버전을 고정합니다. 새 버전은 API가 다를 수 있습니다. ZIP을 새 폴더에 풀고 해당 폴더에서 터미널을 연 다음 실행하세요.

python3 -m venv .venv
source .venv/bin/activate
python -m pip install vtracer==0.6.15 Pillow==11.3.0
python convert.py mug.png my-mug.svg

Windows에서는 source 대신 .venv\Scripts\activate로 활성화하세요. 스크립트는 이미 있는 출력 파일을 덮어쓰지 않습니다. 변환은 로컬에서 실행되며 AI API를 호출하거나 이미지를 업로드하지 않습니다. 호환되는 wheel 패키지가 없는 환경에서는 빌드 도구가 필요할 수 있습니다. 설치 환경을 해결하는 대신 데스크톱 편집기를 쓰는 것도 합리적인 선택입니다.

테스트한 설정은 컬러 트레이싱, 영역 중첩, 스플라인 곡선을 사용합니다. 영역이 겹칠 수 있으므로 앞쪽 요소를 삭제하면 뒤에 있던 더 큰 배경 도형이 드러날 수 있습니다. 디자이너가 직접 만든 파일의 객체 구조와 같다고 볼 수는 없습니다. 커팅이나 제작에 쓸 독립된 도형이 필요하면 최종 작업 앱에서 겹침과 구멍을 확인하세요. 웹 미리보기가 정상이라고 충분한 것은 아닙니다.

함께 제공한 검사 도구는 래스터 이미지 요소, 벡터 형상, 캔버스 속성을 보고합니다.

python inspect_svg.py my-mug.svg

이 도구는 구조 검사를 돕는 것이며 보안 감사나 원본 재현 정확도를 입증하지는 않습니다. <image>가 없는 파일도 시각적으로 틀리거나, 없는 글꼴에 의존하거나, 지나치게 복잡한 형상을 포함할 수 있습니다. 신뢰할 수 있는 SVG만 열고 웹사이트에 넣기 전에 생성된 마크업을 검토하세요.

색과 크기를 바꾼 뒤 결과 확인하기

테스트 파일에서 주황색 채우기 하나를 보라색으로 바꾸자 윤곽을 유지한 채 머그잔 색이 바뀌었습니다. mug-recolored.svg와 mug-traced.svg를 나란히 열어 손잡이의 구멍과 받침이 그대로인지 확인하세요. 편집기에서 채우기 색은 객체 선택 도구로 바꾸고, 윤곽 자체를 수정할 때만 노드를 편집하세요.

ZIP에는 캔버스 설정을 정리한 mug-responsive.svg도 들어 있습니다. 트레이싱 원본 출력은 width와 height를 지정하지만 viewBox는 없습니다. 고정 크기 문서로는 유효하지만 반응형으로 삽입하기에는 불편합니다. 크기가 알려진 512 × 384 테스트 이미지에 대해 변환 스크립트는 viewBox="0 0 512 384"를 추가합니다. 다른 파일에서는 실제 좌표계를 기준으로 viewBox를 정하세요. 이 값을 무조건 복사하면 안 됩니다. 종횡비를 유지하면서 작은 크기와 큰 크기로 모두 확인하세요.

실제 전달 전에 사본에서 세 가지를 바꿔 보세요. 채우기 색 하나를 바꾸고, 객체 하나를 옮기고, 그림 전체의 크기를 조정합니다. 저장 후 다시 열어 세 변경이 모두 유지되는지 확인하세요. 수신자에게 필요한 편집 작업을 직접 검증하는 방법이며, 미리보기나 변환 성공 메시지보다 유용합니다.

AI로 다시 그릴 때 요구사항 유지하기

이미지를 참고 자료로 받아 SVG 코드나 파일을 반환하는 AI 도구라면 범위가 명확한 요청으로 시작하세요. 아래는 재사용할 수 있는 프롬프트 템플릿이며 모든 도구에서 실행했다는 뜻은 아닙니다.

첨부한 그림을 독립적으로 사용할 수 있는 편집 가능한 SVG로 다시 만들어 주세요.
실루엣, 비율, 중요한 빈 공간을 유지하세요.
벡터 path나 도형을 사용하고 원본 래스터 이미지는 포함하지 마세요.
의미 있는 요소를 이름이 있는 그룹으로 분리하세요.
의도한 종횡비에 맞는 viewBox를 사용하세요.
텍스트, 객체, 외부 이미지, 스크립트, 외부 글꼴을 추가하지 마세요.
정확히 재현할 수 없는 세부는 임의로 대체하지 말고 알려 주세요.
SVG와 단순화한 항목의 짧은 목록을 반환하고 원본 이미지는 변경하지 마세요.

그다음 형상을 유지하면서 컵 색만 바꾸는 식으로 수정 범위를 제한하세요. 다른 부분이 바뀌지 않았다는 에이전트의 설명보다 실제 출력 파일을 비교해야 합니다. 브랜드 마크, 정확한 윤곽, 법적으로 승인된 문구는 원본 벡터를 사용하거나 디자이너 검토를 받으세요. 보기 좋은 재작업도 요구사항에는 맞지 않을 수 있습니다.

사용이 허용된 참고 이미지와 위 요구사항을 준비해 Ofox Chat에서 작업을 시작할 수 있습니다. 이 글의 로컬 트레이싱 결과는 모든 Chat 모드가 SVG를 만들거나 특정 디자인을 보존한다는 증거가 아닙니다. 반환된 파일을 사용하기 전에 검사하세요.

자주 생기는 문제 해결하기

증상	가능한 원인	다음 조치
확대하면 픽셀이 보임	래스터 이미지가 포함됐거나 일부가 래스터로 남음	이미지 요소를 검사하고 해당 부분을 트레이싱하거나 다시 그리기
결과가 단색 덩어리임	설정 때문에 배경과 대상이 합쳐짐	대비와 미리보기를 확인하고 임계값 조정 또는 컬러 트레이싱 사용
작은 구멍이 사라짐	필터링이나 단순화 과정에서 제거됨	필터링을 줄이고 더 좋은 입력을 쓰거나 윤곽을 수작업으로 복원
글자를 텍스트로 편집할 수 없음	글자가 도형으로 변환됨	텍스트를 다시 입력하고 글꼴 사용 가능 여부 확인
그라데이션이 색 띠나 한 영역으로 바뀜	연속적인 색조가 단순화됨	해당 부분을 래스터로 유지하거나 그라데이션 재구성, 또는 스타일화된 결과 수용
웹페이지에서 그림이 잘림	캔버스 범위와 그림 좌표가 맞지 않음	width, height, viewBox와 영역 밖 객체 확인

그라데이션 테스트는 좋은 주의 사례입니다. 선택한 설정은 path 두 개만 반환했고 색상 변화를 크게 단순화했습니다. SVG가 그라데이션을 표현하지 못한다는 뜻은 아닙니다. 평면 아이콘에 적절한 자동 설정이 연속적인 색조를 가진 이미지에는 적절하지 않을 수 있다는 의미입니다.

완성된 변환 결과에는 원본 입력, 편집 가능한 SVG, 미리보기를 포함하고 단순화한 내용을 밝혀야 합니다. 다음 수정 때 다시 손실 변환을 시작하지 않도록 작업본도 보관하세요.