로고를 PNG로 가지고 계십니다. 사이트 헤더에서는 괜찮아 보이는데, 누군가 크게 달라고 합니다 — 배너, 인쇄물, 티셔츠 — 그리고 확대하면 부드럽고 들쭉날쭉해집니다. 그것이 래스터 파일의 한계입니다. 고정된 픽셀 격자라, 확대할 때 찾아낼 추가 디테일이 없죠. SVG에는 그 한계가 없습니다. 로고를 도형과 경로로 저장하므로, 폭이 32픽셀이든 2미터든 선명하게 다시 그려집니다.
PNG 로고를 SVG 형태로 만드는 것은 그것을 트레이싱 하는 것 — 픽셀을 읽어 가장자리를 따라 벡터 경로를 그리는 것 — 을 뜻합니다. 평면 로고에는 정확히 맞는 도구이고, 빠릅니다.
로고가 잘 트레이싱되는 이유
좋은 로고는 트레이싱에 이상적인 입력입니다. 보통 적은 수의 단색, 그것들 사이의 깔끔한 경계, 그리고 부드러운 그라데이션이나 사진적 질감이 없습니다. 트레이서는 그런 이미지를 깔끔하게 읽습니다. 각 색 블록을 찾고, 그 주위에 촘촘한 경로를 그리고, 한 줌의 도형만으로 SVG를 만들죠. 작은 파일, 선명한 가장자리, 그리고 이후 완전히 편집 가능합니다.
아이콘, 단순한 일러스트, 라인아트, 손글씨도 같은 이유로 같은 행복한 범주에 듭니다 — 평면 색과 뚜렷한 가장자리.
단계별로
- 가진 것 중 가장 깔끔한 PNG로 시작하세요. 고해상도의 선명한 소스가 작고 흐릿한 것보다 더 잘 트레이싱됩니다. 로고에 투명 배경이 있다면 유지하세요 — 트레이스가 그것을 보존할 수 있습니다.
- 로고에 맞는 프리셋을 고르세요. 두세 색 마크에는 Flat / logo 가 색 수를 낮게, 도형을 단순하게 유지합니다. 더 세밀한 일러스트에는 Detailed 가 더 많은 경로를 허용합니다. 순수 라인아트나 실루엣에는 Black & white 가 두 톤으로 줄입니다.
- 비포/애프터 미리보기를 확인하세요. 트레이스를 원본과 비교하세요. 가장자리가 울퉁불퉁해 보이거나 도구가 여분의 색을 지어냈다면, 다른 프리셋을 시도하세요 — 색이 적을수록 대개 더 깔끔하고 작은 결과를 줍니다.
- SVG를 내려받아 벡터 편집기에서 열어 필요하면 미세 조정하세요.
이것이 전적으로 여러분 브라우저에서 실행되므로, 넣는 로고는 절대 업로드되지 않습니다 — 여러분 기기의 캔버스에서 읽히고, 계정도 없으며, 페이지가 로드되면 오프라인에서 작동합니다.
트레이싱 후 정리하고 색 바꾸기
출력은 이름이 붙은 경로와 채움으로 된 평범한 SVG라, 트레이스가 만들어 낸 것에 갇히지 않습니다. Illustrator, Inkscape, Figma에서 열어 채움 하나를 편집해 영역 전체의 색을 바꾸거나, 정확한 브랜드 헥스를 설정하거나, 트레이서가 잡은 엉뚱한 도형을 삭제하거나, 경로를 살짝 움직일 수 있습니다. 이것이 진짜 보상입니다. 로고가 고정된 그림이기를 멈추고 어떤 크기에서든 편집 가능한 객체가 됩니다.
도움이 안 되는 곳: 사진
입력에 관해 정직해집시다. 이것은 사진이 아니라 도형을 트레이싱합니다. 사진 — 인물, 제품 컷, 풍경 — 을 넣으면 SVG는 여전히 만들어 주지만 형편없는 것입니다. 수천 가지 미묘한 색이 쌓인 얼룩으로 근사되고, 파일이 원본 JPG를 한참 넘어 부풀며, 번져 보입니다. 연속 톤인 것은 래스터 형식으로 두고 대신 압축하세요. 그리고 이것은 여러분 로고를 새로운 무언가로 다시 그리는 AI가 아닙니다 — 소스 PNG가 흐리거나 노이즈가 많으면 트레이스가 그것을 물려받습니다. 깔끔하고 평면적이며 색이 적은 로고가 깔끔한 SVG를 줍니다. 그게 최적점입니다.