래스터 픽셀에서 벡터 패스로
PNG, JPEG, JPG, WebP, AVIF, BMP 파일은 픽셀 격자를 저장합니다. SVG는 호환 소프트웨어에서 다양한 크기로 다시 그릴 수 있는 모양, 채우기, 좌표를 저장합니다. 벡터화는 인접한 픽셀을 분석하고 시각적 영역을 묶은 다음, 경계를 따라가며 그 경계를 벡터 패스로 근사합니다.
파일 이름을 바꾸거나 비트맵을 SVG 안에 넣는 것만으로는 이러한 재구성이 이루어지지 않습니다. VectorizeThis는 눈에 보이는 원본에서 실제 SVG 도형을 생성합니다.
브라우저 안에서 처리
지원되는 이미지의 디코딩, 추적, 평가, 출력 준비는 사용자의 기기에서 이루어집니다. 일반적인 변환 과정에서는 원본 이미지 바이트를 변환 서버에 업로드하지 않습니다. 기기 내 처리를 우선하는 설계 덕분에, 조정할 때마다 서버 응답을 기다리지 않고 여러 결과를 비교하기도 수월합니다.
추적 후보 비교
모든 이미지에 가장 적합한 하나의 추적 설정은 없습니다. 단순한 아이콘과 사진에는 서로 다른 정보가 들어 있고, 커팅 파일에 필요한 조건은 웹 일러스트와 다릅니다.
그래픽은 6가지 단색 추적 방식, 또는 최대 4개의 지원되는 팔레트 프로필에 걸쳐 10개, 16개, 18개, 20개의 색상 후보를 비교합니다. 유용한 결과가 여러 개 남으면 팔레트를 선택한 다음 SVG를 선택합니다. 사진과 복잡한 일러스트는 전용 최적화 도구를 계속 사용합니다. 제작용 출력은 실물 치수와 도형 검사를 유지하며 SVGO를 비활성화합니다. 자세한 과정은 자동 선택 문서에서 설명합니다.
따라서 “가장 적합한 결과”는 해당 이미지와 용도에 맞춰 여러 조건 사이의 균형이 가장 좋은 후보를 뜻합니다. 단순히 픽셀 유사도 점수가 가장 높거나 파일이 가장 작다는 뜻은 아닙니다.
용도에 따라 달라지는 우선순위
- 웹, 로고, 아이콘은 정돈된 모양, 편집 가능한 색상, 효율적인 마크업을 중시합니다.
- 사진과 복잡한 일러스트는 색상과 세부 정보를 더 많이 보존하므로 패스가 많아질 수 있습니다.
- Cricut, 비닐, 레이저, CNC 작업은 실용적인 도형, 닫힌 영역, 의미 있는 실물 치수, 제작하기 어려울 수 있는 모양에 대한 경고를 더 중시합니다.
- 자동 용도는 아직 사용처가 정해지지 않은 경우 전반적인 시각적 충실도와 다루기 쉬운 출력 사이의 균형을 맞춥니다.
제작 검사는 잠재적인 문제를 찾을 수 있지만, 모든 기기, 소재, 칼날, 절단 폭, 가져오기 설정 또는 애플리케이션별 규칙을 고려할 수는 없습니다.
출력 정리 및 검사
추적 후에는 브라우저와 편집기에서 사용할 수 있도록 SVG를 준비하고, 불필요한 마크업을 제거하며, 선택한 출력 옵션을 적용합니다. 작은 팔레트를 표시해 색을 바꾸거나, currentColor를 사용하거나, 감지된 배경을 제거하거나, 실제 내용에 맞게 자르거나, 요청한 경우 마크업 형식을 정리할 수 있습니다.
또한 과도한 복잡성, 작은 고립 영역, 열린 패스 등 선택한 작업에 필요한 조건을 검사할 수 있습니다. 경고는 검토할 정보이며, 파일이 반드시 실패한다는 증거는 아닙니다.
자동 추적의 한계
충분한 크기와 뚜렷한 경계를 갖춘 선명한 이미지는 대체로 더 단순하고 원본에 충실한 패스를 만듭니다. 노이즈, JPEG 압축 손상, 흐림, 그라데이션, 투명도, 미세한 질감, 겹치는 색상은 해석이 필요할 수 있습니다. 추적한 SVG로 원본에 없던 세부 정보를 되찾을 수 없으며, 원래 디자이너가 구성한 방식을 재현하지 못할 수도 있습니다.
나란히 배치한 미리보기와 수동 설정은 사용자의 시각적 판단이 여전히 중요하기 때문에 제공합니다. 제작용 파일은 본격적인 생산에 앞서 대상 소프트웨어와 소재에서 시험하세요.
변경 사항 테스트 방법
추적과 순위 선정 로직의 변경은 아이콘, 로고, 선화, 다색 이미지, 저해상도 원본, 사진, 제작용 예시를 포함하는 대표 이미지로 테스트합니다. 자동 테스트로 주요 브라우저 동작과 출력 정책을 보호하며, 벤치마크 비교를 통해 배포 전에 품질 저하를 찾습니다.
기술 콘텐츠 작성 방법
VectorizeThis의 기술 설명은 변환기의 실제 동작, 대표 원본 이미지를 이용한 테스트, W3C SVG 사양과 같은 일차 자료에 근거합니다. 변환기의 동작이 크게 바뀌면 페이지를 검토합니다.
VectorizeThis는 Maxime Desrosiers가 만들었습니다. 예상과 다르게 작동하는 출력을 알리려면 변환기의 리뷰 보내기를 사용하거나 문의 페이지를 방문하세요.