PNG SVG 변환 방법: 로고·아이콘 벡터 변환

PNG는 래스터 이미지입니다. 픽셀이 고정된 격자로 늘어서 있고, 각 픽셀에는 색상과 선택적으로 불투명도 값이 들어 있습니다. 500 × 500 px 로고에는 정확히 250,000개의 칸이 있을 뿐 다른 정보는 없습니다. 그래서 포스터 크기로 키우면 각 칸이 커지거나 칸 사이가 흐려질 수밖에 없습니다. 반면 SVG는 벡터 이미지로, <path>, <circle>, <rect> 같은 도형을 좌표와 채우기 색과 함께 나열한 텍스트 파일입니다. 브라우저나 커팅 머신은 필요한 크기에 맞춰 이 도형을 다시 그리기 때문에, 벡터 로고는 휴대폰 화면에서도 전시회 현수막에서도 선명합니다.

벡터를 래스터로 바꾸는 일은 쉽습니다. 렌더러가 도형을 픽셀로 칠하기만 하면 되니까요. SVG PNG 변환은 이 작업을 1초 만에 끝냅니다. 반대 방향에는 손실 없는 지름길이 없습니다. 픽셀 격자에는 그 픽셀을 만든 도형에 대한 기록이 남아 있지 않기 때문입니다. 누군가 픽셀을 보고 각 도형이 어디서 시작하고 끝나는지 추측해야 합니다. 이 추측 단계를 트레이싱 또는 벡터화라고 부르며, Illustrator부터 명령줄 프로그램까지 제대로 된 PNG SVG 변환기는 모두 속을 들여다보면 트레이서입니다.

어려운 단계를 건너뛰는 변환기도 있습니다. 원본 PNG를 base64 텍스트로 넣은 <image> 요소 하나만 담은, 형식상으로는 올바른 SVG 파일을 만들어 내는 것입니다. 이렇게 하면 파일이 PNG보다 약 3분의 1 커지기도 합니다. 결과물은 SVG로 열리고 파일 형식 검사도 통과하지만, 여전히 벡터 껍데기를 쓴 픽셀 이미지입니다. 확대하면 똑같이 계단 현상이 보이고, 커팅 머신은 따라갈 패스를 찾지 못합니다. 아무 SVG나 텍스트 편집기로 열어 data:image/png를 검색해 보세요. 이 문자열이 있다면 벡터화된 것은 아무것도 없습니다.

트레이싱은 처음부터 도형으로 그린 이미지에서 빛을 발합니다. 디자인 앱에서 내보낸 로고, 플랫 아이콘, 검은 윤곽선이 있는 만화, 스캔한 서명, 스텐실은 모두 뚜렷한 경계로 나뉜 몇 가지 단색으로 이루어져 있습니다. 트레이서는 색상별로 영역을 묶고 경계를 따라가며 부드러운 곡선을 맞추기 때문에, SVG가 디자이너가 처음 그린 도형에 가깝게 나옵니다. 워드마크의 굵은 글자도 잘 트레이싱됩니다. 큰 글자는 그저 또 하나의 채워진 도형이기 때문입니다. 다만 각 글자는 색과 크기를 바꿀 수 있는 윤곽선이 될 뿐, 다시 타이핑할 수는 없습니다.

사진은 정반대입니다. 인물 사진이나 제품 사진에는 미묘하게 다른 수천 가지 톤이 서로 섞여 있는데, 벡터 형식에는 이것을 효율적으로 표현할 방법이 없습니다. 트레이서에 16색을 지정하면 띠가 눈에 보이는 포스터화된 일러스트가 나오고, 64색을 지정하면 PNG보다 훨씬 큰 파일에 수만 개의 작은 도형이 생기는데도 여전히 사진처럼 보이지 않습니다. 부드러운 그라데이션, 그림자, 광선 효과도 같은 식으로 얇은 띠가 겹겹이 쌓인 모양이 됩니다. 작은 글자도 문제입니다. 10–12 px 크기에서는 안티앨리어싱 때문에 모든 글자가 배경과 섞여, 트레이서가 “e”와 “o”를 구별하지 못합니다.

해상도는 어떤 설정보다 중요합니다. 트레이서는 경계를 따라 늘어선 픽셀 계단에 곡선을 맞추는데, 계단이 촘촘할수록 곡선이 정확해집니다. Figma, Canva, Photoshop, 슬라이드에서 직접 PNG를 내보냈다면 표시 크기의 2–3배로 다시 내보내세요. 너비 1500–2000 px 로고라면 트레이서가 다루기에 충분합니다. 작은 PNG를 AI 업스케일러로 먼저 키우는 것은 100% 배율에서 깔끔해 보일 때만 하세요. 지어낸 경계 질감도 실제 경계만큼 충실하게 트레이싱되기 때문입니다.

다음으로 배경을 단순하게 만드세요. PNG는 완전한 투명도를 지원하며, 투명 배경이 가장 쉬운 경우입니다. 완전히 투명한 픽셀은 빈 공간으로 처리되므로 SVG에서 그림 뒤에 흰 상자가 생기지 않습니다. PNG에 단색 배경이 있다면 먼저 그림에 바짝 붙여 자르세요. 정확한 프레이밍은 사진 비율 자르기 가이드에서 다룹니다. 티셔츠에 찍힌 로고를 촬영한 사진처럼 배경이 복잡하다면 트레이싱 전에 배경을 지우거나 단색 하나로 덮어 주세요.

마지막으로, 트레이서가 대신 줄이기 전에 색상 수를 직접 줄이세요. 원본 파일에서 그림자, 광선 효과, 그라데이션 오버레이를 숨기고, 벡터 버전에 그라데이션이 필요 없다면 그라데이션 채우기를 중간 색으로 바꾸세요. 윤곽선 색까지 포함해 남은 단색 개수를 세어 적어 두세요. 다음 단계에서 입력할 가장 쓸모 있는 숫자입니다. 같은 로고의 JPEG와 PNG 중 하나를 고른다면 PNG를 쓰세요. JPG, JPEG, PNG 차이에서 설명하듯 JPEG 압축은 모든 경계 주변에 노이즈를 더합니다.

이름은 달라도 모든 트레이서는 같은 세 가지를 묻습니다. 첫째는 몇 가지 색을 남길지입니다. PNG SVG 변환기에서는 색상 모드로 컬러, 회색조, 흑백 중 하나를 고르고, 색상 수로 픽셀을 몇 개의 묶음으로 나눌지 2에서 64 사이로 정합니다. 앞에서 적어 둔 개수에 맞추세요. 너무 높게 잡으면 트레이서가 안티앨리어싱된 경계 픽셀을 별도의 얇은 색으로 나눠, 모든 도형 둘레에 희미한 테두리가 생깁니다. 너무 낮게 잡으면 브랜드 색 두 가지가 하나로 합쳐집니다.

둘째는 경계를 어떻게 처리할지입니다. 부드럽게는 픽셀이 남긴 계단을 둥글게 다듬고, 디테일은 얼마나 작은 점까지 도형으로 만들지 정합니다. PNG 페이지는 디테일 70, 부드럽게 40에서 시작하며, 깔끔하게 내보낸 이미지라면 작은 모서리까지 살아납니다. 먼지나 잡점이 보이면 디테일을 낮추고, 곡선이 울퉁불퉁하면 부드럽게를 높이세요. 직선으로 이루어진 기하학적 로고라면 곡선을 직선으로, 각진 모양을 유지하고 싶은 픽셀 아트라면 픽셀 경계로 설정하세요.

셋째는 흑백 트레이싱에만 해당하는데, 잉크와 종이의 경계를 어디에 둘지입니다. 임계값은 1에서 254까지이며 기본값은 128입니다. 임계값보다 어두운 픽셀은 검은색이 되고, 밝은 픽셀은 비워집니다. 얇은 파란 볼펜으로 쓴 서명이라면 160–180 쪽으로 올려 흐린 획이 살아남게 하고, 약간 회색빛 종이에 굵은 마커로 그린 그림이라면 100 쪽으로 낮춰 종이 질감이 점으로 변하지 않게 하세요. 효과가 서로 영향을 주므로 설정은 한 번에 하나씩 바꿔 비교하세요.

썸네일만 보고 끝내지 마세요. SVG를 브라우저에서 열어 글자의 둥근 부분이나 뾰족한 끝처럼 가장 급한 곡선을 400–800%로 확대하세요. 잘된 트레이싱은 매끄러운 호와 함께 디자인상 모서리인 곳에는 날카로운 모서리를 보여 줍니다. 잘못된 트레이싱은 울퉁불퉁하거나 움푹 파이고 끝이 뭉툭합니다. 그다음 Inkscape, Illustrator, Figma 같은 벡터 편집기에서 파일을 열고 윤곽선 보기나 노드 보기를 켜세요. 단순한 2색 로고라면 보통 노드가 수백 개면 충분합니다. 수천 개가 보인다면 트레이서가 노이즈를 따라간 것이고, 패스를 편집하거나 커팅하기 번거로울 것입니다.

파일 크기로도 빠르게 점검할 수 있습니다. 최적화된 플랫 로고 SVG는 보통 몇 KB에서 수십 KB 정도로, 원본 PNG보다 작은 경우가 많습니다. 트레이싱한 파일이 원본 PNG보다 몇 배 크다면 대개 색상이 너무 많거나, 디테일이 너무 높거나, 트레이싱하지 말았어야 할 사진이라는 뜻입니다. SVG 최적화는 켜 두세요. 눈에 보이는 변화 없이 좌표를 반올림하고 패스를 합쳐 줍니다. 마지막으로 그림을 포스터 크기로 키우고 파비콘 크기로 줄여 양쪽 모두에서 잘 보이는지 확인하세요.

무료 데스크톱 프로그램으로는 Inkscape가 있습니다. PNG를 가져와 선택한 뒤 Path > Trace Bitmap(Shift+Alt+B)을 여세요. Brightness cutoff 같은 단일 스캔 모드는 검은 패스 하나를 만들어 선화에 알맞고, 다중 스캔 모드는 지정한 개수의 색이나 회색을 층으로 쌓아 트레이싱합니다. Inkscape의 흑백 트레이싱은 Peter Selinger가 2001년에 공개한 트레이싱 라이브러리 Potrace를 바탕으로 합니다. Potrace 자체는 명령줄 프로그램으로, PNG가 아니라 PBM, PGM, PPM, BMP를 읽고, 두 가지 톤 이미지만 처리하며, SVG, PDF, EPS, DXF로 저장합니다. 그래서 대량의 스캔 파일을 스크립트로 처리할 때 좋은 선택입니다.

Adobe Illustrator에서는 Illustrator CS6부터 예전의 라이브 추적 대신 이미지 추적이 들어갔습니다. PNG를 가져와 창 > 이미지 추적을 열고 흑백 로고, 3색, 16색 같은 사전 설정에서 시작한 뒤, 고급 항목에서 패스, 모퉁이, 노이즈를 조정하세요. 추적 결과는 확장을 누르기 전까지 라이브 상태로 남아 있다가, 누르면 일반적인 편집 가능한 패스가 됩니다. 두 프로그램이 모두 없다면 브라우저 변환기가 색 줄이기, 경계 찾기, 곡선 맞추기라는 같은 과정을 실행합니다. 이미지 SVG 변환기는 JPG, WebP, HEIC도 받으며 SVG 대신 EPS, PDF, DXF로도 저장할 수 있습니다.

웹에서 SVG는 2001년부터 W3C 권고안이며, 현재 모든 브라우저가 <img> 태그, CSS 배경, HTML 인라인 방식으로 렌더링합니다. 인라인으로 넣으면 마우스를 올렸을 때 색이 바뀌게 할 수도 있습니다. 트레이싱한 로고 하나가 레티나 화면용 여러 크기의 PNG를 작은 파일 하나로 대신하는 경우가 많습니다. 커팅 머신에서는 Cricut Design Space와 Silhouette Studio가 SVG를 기본 형식으로 씁니다. 트레이싱된 도형 하나하나가 커팅 패스가 되고, 다색 트레이싱은 레이어별로 나뉘어 색이 다른 비닐로 따로 자를 수 있습니다. 레이저 커터와 CNC 소프트웨어는 대개 DXF를 선호하며, PNG DXF 변환이 같은 트레이싱 설정으로 DXF를 만들어 줍니다.

인쇄소가 벡터 파일을 요구하는 이유는 인쇄기, 자수 디지타이저, 간판 커터에 픽셀이 아닌 경계가 필요하기 때문입니다. 스티커, 티셔츠, 현수막이라면 트레이싱한 SVG로 충분한 경우가 많습니다. 그래도 근사치일 뿐입니다. 곡선은 맞춰 그린 추정이고, 색은 픽셀에서 평균 낸 값이며, 글자는 윤곽선으로 바뀝니다. 그러니 회사 로고를 트레이싱하기 전에 로고를 만든 사람에게 먼저 물어보세요. 디자이너나 에이전시는 정확한 곡선, 이름 붙은 색상, 글꼴이 담긴 원본 AI, EPS, PDF, SVG를 거의 항상 갖고 있고, 보내 주는 데 1분이면 됩니다. 트레이싱은 원본을 잃어버렸거나, 로고가 스캔한 레터헤드에만 남아 있거나, 직접 그린 그림일 때 쓰는 도구입니다.