VectorizeThis는 누가 만들었나요?
저는 VectorizeThis를 개발한 Maxime Desrosiers입니다. 10년 넘게 웹사이트와 프런트엔드 인터페이스를 만들었으며, 특히 WordPress를 전문으로 다뤄 왔습니다. 장식용 SVG 섹션 구분선과 이를 사용하는 CSS를 생성하는 도구인 ShapeDividers.com도 만들었습니다.
ShapeDividers를 만들면서 SVG의 구조와 압축이 얼마나 중요한지 배웠습니다. 화면에서는 단순해 보이는 벡터에도 불필요한 점, 속성, 마크업이 들어 있을 수 있습니다. 생성하는 CSS를 가볍게 유지하려면 눈에 보이는 결과를 보존하면서 불필요한 코드를 줄이는 법을 익혀야 했습니다.
이 도구를 만든 이유
VectorizeThis는 홈페이지를 새로 디자인하던 중 겪은 문제에서 시작했습니다. ChatGPT에 새로운 디자인을 요청했고, 결과에 마음에 드는 아이콘이 여러 개 있었습니다. 원래 아이콘이 너무 작아 하나씩 더 큰 버전을 요청했습니다. 새 아이콘은 PNG로 도착했습니다. 보기에는 쓸 만했지만 파일이 크고 색을 바꾸기 어려웠으며, 웹사이트에서 관리하기도 불편했습니다.
온라인 이미지-SVG 변환기를 여러 개 써 봤습니다. 시험한 일괄 변환기는 추적 품질이 아쉬운 경우가 많았습니다. 단일 파일용 도구 중에는 필요 없는 획을 추가하는 것도 있었습니다. 결과가 필요 이상으로 큰 경우도 많아서, 사용하기 전에 SVGOMG로 다시 처리해야 했습니다.
여러 추적 결과를 평가하고, 쓸 만한 구조를 유지하며, 과도한 마크업을 줄이면서도 사용자가 결과를 확인하고 조정할 수 있도록 하는 일을 하나의 도구가 더 잘 처리할 수 있을 것 같았습니다.
VectorizeThis의 기능
VectorizeThis는 지원되는 래스터 이미지를 브라우저에서 SVG 패스 도형으로 변환합니다. 여러 추적 설정을 시험하고 후보를 비교한 뒤, 선택한 SVG를 최적화하고 용도에 필요한 검사 결과를 보여 줄 수 있습니다. 설정을 조정하거나, 감지된 작은 색상 팔레트를 편집하거나, 마크업을 복사하거나, 개별 또는 일괄 결과를 다운로드할 수 있습니다.
변환기는 기기 내 처리를 우선합니다. 이미지 디코딩, 추적, 비교, SVG 준비는 사용자의 기기에서 이루어집니다. 제품 분석에는 도구 개선을 위한 동작과 설정 정보가 포함되지만, 원본 이미지의 바이트나 파일 이름은 포함되지 않습니다. 원본 이미지는 사용자가 직접 피드백에 첨부하고 전송에 동의한 경우에만 전송됩니다.
VectorizeThis의 벡터화 결과 평가 방법 보기.
보장하지 않는 사항
자동 추적은 픽셀을 해석하는 과정이며, 디자이너의 원래 벡터 파일을 복구하는 작업은 아닙니다. 사진, 그라데이션, 압축 손상, 부드러운 그림자, 작은 세부 요소, 저해상도 원본은 모두 결과에 영향을 줄 수 있습니다.
제작용 사전 설정과 검사는 도형을 준비하고 확인하는 데 도움을 주지만, 특정 커터, 레이저, CNC 기기, 소재 또는 외부 애플리케이션에 대한 인증은 아닙니다. 실제 제작 전에 다운로드한 SVG를 확인하고 자신의 작업 과정에서 시험해야 합니다.
도구 개선에 참여하기
출력이 잘못된 것 같다면 변환기의 리뷰 보내기를 사용하거나 VectorizeThis에 문의해 주세요. 문제를 명확히 설명하고 선택한 용도와 문제를 일으킨 설정을 알려 주시면 도움이 됩니다. 문제를 재현하기 어려운 경우 원본 이미지를 선택적으로 보낼 수도 있습니다.