이미지 SVG 변환기: PNG와 JPG를 벡터로

사진과 웹의 이미지 대부분은 래스터 그래픽, 즉 색 픽셀의 격자입니다. 확대하면 픽셀이 커지고 윤곽이 들쭉날쭉하거나 흐려집니다. SVG 같은 벡터 그래픽은 대신 수학적인 경로와 채우기로 모양을 표현하므로, 파비콘에서 대형 광고판까지 어떤 크기에서도 완벽하게 선명합니다.

래스터 이미지를 벡터로 바꾸는 것을 트레이스라고 합니다. 소프트웨어가 비슷한 색의 영역을 찾아 윤곽을 따라가고, 매끄러운 곡선으로 바꿉니다. 평면 색과 분명한 윤곽으로 이루어진 이미지에서 가장 잘 됩니다.

언제 무엇을 쓸까

래스터와 벡터를 한 문장으로 비교하면, 래스터는 끝없이 섬세한 디테일의 사진에, 벡터는 모양이 분명한 로고, 아이콘, 글자, 일러스트에 가장 좋습니다. 트레이스한 사진은 예술적으로 보일 수는 있지만 원래 픽셀만큼 충실하지는 않습니다.

상자에 사진을 드래그하거나, 찾아보거나, 클립보드에서 붙여 넣어 추가하세요. 프리셋을 고르고, 필요하면 색상 수를 조정한 뒤 ‘SVG로 변환’을 누르세요. 트레이서가 이미지를 고른 색상 수로 줄이고, 각 색 영역의 윤곽을 찾아 SVG 경로로 씁니다. 그다음 슬라이더로 원본과 벡터를 나란히 비교할 수 있습니다.

비교 아래에 경로 수, SVG 파일 크기, 트레이스에 걸린 시간이 표시됩니다. 파일을 다운로드하거나, 코드를 복사해 HTML이나 디자인 도구에 바로 붙여 넣으세요.

로고

로고가 PNG 파일로만 있는 경우가 많아 PNG를 SVG로 바꾸는 작업이 가장 흔합니다. ‘로고’ 프리셋을 쓰고 색상 수는 로고의 실제 색 수, 보통 2~8색으로 하세요. 로고가 단색 배경 위에 있고 투명한 벡터를 원한다면 ‘배경색 제거’를 체크하세요.

스케치와 선화

스케치, 서명, 도장, 스캔한 그림 같은 선화를 벡터로 바꾸려면 ‘흑백’을 고르세요. 가는 선은 온전하고 종이 질감은 사라질 때까지 임계값을 움직이세요. 결과는 커팅기와 각인에 이상적인 깔끔한 2색 SVG입니다.

정밀과 부드럽게

‘정밀’은 작은 특징과 섬세한 곡선을 지켜 일러스트와 복잡한 배지에 알맞지만 파일이 커집니다. ‘부드럽게’는 트레이스 전에 노이즈를 줄여 흐르는 듯한 모양을 만들며, 손그림 일러스트와 입자가 있는 스캔 작품에 알맞습니다.

포스터화와 그레이스케일

‘포스터화’는 이미지를 몇 개의 굵은 색 영역으로 줄여 그래픽적인 실크스크린 느낌을 줍니다. ‘그레이스케일’은 먼저 색을 없애며, 단색 인쇄나 사진을 예술적인 흑백 벡터로 트레이스할 때 유용합니다.

가진 것 중 가장 크고 선명한 이미지로 시작하세요. 압축 아티팩트와 흐림은 트레이스에서 불필요한 모양이 됩니다. 원본이 작거나 흐릿하다면 AI 이미지 업스케일러로 먼저 확대하고 선명하게 하면, 더 깔끔한 입력으로 훨씬 좋은 벡터를 얻습니다.

제대로 보이는 범위에서 가장 적은 색상 수를 쓰세요. 색이 하나 늘 때마다 경로와 파일 크기가 늘어납니다. 2색 로고라면 2~3색, 평면 일러스트라면 보통 8~16색이면 충분합니다. ‘디테일’ 설정은 작업 크기를 정합니다. 1000픽셀이 적당한 균형이고, 2000픽셀은 속도를 희생해 더 많은 디테일을 담습니다.

압축된 사진

JPG를 SVG로 바꾸는 것도 같은 방식이지만, JPEG 압축은 윤곽 주변에 노이즈를 더합니다. ‘부드럽게’ 프리셋이나 약간 낮은 색상 수가 노이즈를 숨기고 더 깔끔한 모양을 만듭니다.

SVG 파일은 Illustrator, Inkscape, Figma, Affinity Designer, Canva, 그리고 대부분의 커팅기 소프트웨어에서 열립니다. 웹사이트에서는 img 태그로 파일을 쓰거나, 코드를 HTML에 바로 붙여 넣어 CSS로 스타일을 줄 수 있습니다. 파비콘과 앱 아이콘에는 파비콘 생성기가 SVG 입력을 받아 필요한 모든 크기를 만들어 줍니다.

SNS 프로필처럼 다시 픽셀 버전이 필요하다면 SVG PNG 변환기가 투명도 유무를 골라 원하는 크기로 벡터를 렌더링합니다.

커팅기

Cricut 등 커팅기용 SVG에는 ‘흑백’이나 색이 적은 ‘로고’를 쓰고 배경을 제거하세요. 작은 모양 여러 개보다 큰 모양 몇 개가 더 깔끔하게 잘리므로, 트레이스에 잡티가 많다면 디테일 크기를 낮추세요.

트레이스는 모두 브라우저에서 실행되므로 미공개 로고와 고객 작품이 기기 밖으로 나가지 않습니다. 크고 세밀한 사진은 몇 초가 걸리고 파일이 커질 수 있으며, SVG가 1MB를 넘으면 도구가 경고합니다.

자동 트레이스는 손으로 그린 벡터 작업과 같지 않습니다. 완벽한 기하학이 필요한 브랜드 로고라면 트레이스를 출발점으로 삼아 벡터 편집기에서 다듬으세요. 이 도구는 무료, 무제한이며, 워터마크를 넣지 않고 EnhancerPro 크레딧을 쓰지 않습니다.

SVG에 모양이 왜 이렇게 많을까요?

노이즈, 그라데이션, 음영은 색이 약간씩 다른 작은 영역을 많이 만듭니다. 색상 수를 낮추거나, ‘부드럽게’나 ‘포스터화’ 프리셋을 고르거나, 디테일 크기를 줄이세요. 배경을 제거해도 경로 수가 눈에 띄게 줄어듭니다.

글자도 트레이스할 수 있나요?

네, 로고 속 글자는 모양으로 트레이스되지만 더 이상 편집 가능한 텍스트가 아닙니다. 글꼴을 안다면 벡터 편집기에서 글자를 다시 입력하는 것이 가장 깔끔합니다.

색이 정확히 일치하나요?

트레이서는 이미지에서 대표 색을 고르므로 브랜드 코드와 아주 약간 다를 수 있습니다. 정확도가 중요하다면 색상 추출기로 원본의 정확한 코드를 읽고 벡터 편집기에서 채우기를 조정하세요.

오래된 웹사이트의 로고

많은 소상공인이 오래된 웹사이트에서 받은 작은 이미지로만 로고를 가지고 있습니다. 아주 작다면 먼저 업스케일하고, ‘로고’ 프리셋과 실제 색 수로 트레이스하세요. 결과 SVG는 원래 픽셀로는 불가능했던, 간판, 티셔츠, 차량에 어떤 크기로든 인쇄할 수 있습니다.

손그림 스케치

흰 종이에 진한 펜으로 그리고, 낮에 찍어 바짝 자르세요. 임계값을 잘 맞춘 ‘흑백’ 모드가 그림을 깔끔한 모양으로 바꿔, 벡터 편집기에서 색을 칠하거나, 스티커로 쓰거나, 시트 플로터로 자를 수 있습니다.

앱이나 웹사이트용 아이콘

단순한 아이콘은 아주 잘 트레이스됩니다. 색상 수를 낮게 하고, 배경을 제거하고, 코드를 페이지에 바로 붙여 넣으세요. SVG는 흐림 없이 확대되므로 같은 파일이 모든 화면 밀도에서 선명해 보입니다.

서명과 도장

스캔한 서명과 고무도장은 ‘흑백’ 모드에서 작고 투명한 SVG가 됩니다. 문서에 어떤 크기로든 넣을 수 있고, 사진으로 찍은 원본의 회색빛 흐린 윤곽 없이 인쇄됩니다.

사진으로 만드는 포스터

예술적인 효과를 원한다면 ‘포스터화’ 프리셋과 4~6색으로 사진을 트레이스하세요. 결과는 포스터와 SNS 그래픽에 어울리는 굵은 평면 색 일러스트이며, 큰 인쇄에도 깔끔하게 확대됩니다. 피사체를 알아볼 수 있으면서 모양은 단순하게 유지될 때까지 색상 수를 바꿔 보세요. 몇 가지 톤의 ‘그레이스케일’은 종이나 천에 단색 잉크로 잘 인쇄되는 전통적인 스텐실 느낌을 줍니다.

트레이스한 파일이 마음에 들면 원래 래스터 파일을 옆에 보관하세요. 나중에 고객이 약간 다른 자르기나 색을 요청하면, 수백 개의 작은 경로 점을 손으로 고치는 대신 몇 초 만에 다시 트레이스할 수 있습니다. logo-source.png와 logo-traced.svg처럼 두 파일 이름을 분명히 붙이면 작은 디자인 폴더를 관리하기 쉽습니다.