처음 벡터 디자인을 접했을 때 가장 당황했던 건 "SVG로 저장하려면 어떤 프로그램이 필요하지?" 였어요. 이미지 하나 만들긴 했는데, 확대하면 깨지고 포맷도 복잡하니 막막하더라고요. 그때부터 무료 툴을 하나씩 써보며 저만의 SVG 저장 루틴을 찾기 시작했습니다. 피그마는 텍스트랑 아이콘 만들 때 최고였고, 포토피아는 기존 PSD 파일을 간단히 SVG로 바꿀 때 유용했어요. Vectorizer는 로고를 벡터로 바꾸고 싶을 때 정말 신세계였고요. 이 글에선 제가 실제로 사용해 본 SVG 저장 가능한 무료 툴 세 가지를 초보자 눈높이에서 설명드릴게요. 디자인 전공이 아니더라도 이 툴들만 알면 충분히 벡터 작업 시작할 수 있어요.
피그마: 벡터 디자인의 기본부터 고급까지
피그마는 웹 기반 벡터 디자인 툴로, SVG로 저장은 물론 다양한 파일 형식으로 내보낼 수 있는 강력한 무료 툴입니다. UI/UX 디자이너들 사이에서 가장 많이 쓰이는 이유 중 하나가 바로 이 SVG 저장의 자유도에 있어요. 특히 초보자도 인터페이스가 직관적이기 때문에 쉽게 적응할 수 있습니다. 피그마에서 SVG로 저장하는 방법은 매우 간단합니다. 저장하고 싶은 요소를 선택하고 오른쪽 속성 영역에서 내보내기 항목을 활성화한 후 SVG를 선택하면 됩니다. 이때 요소가 텍스트라면 벡터 형태로 내보내기 위해 ‘Outline Stroke’를 해주는 게 좋습니다. 이렇게 하면 웹에서 사용 시 폰트 깨짐이나 위치 밀림을 방지할 수 있거든요. 피그마의 SVG 저장은 단순한 저장을 넘어, 클린한 코드 구조와 파일 최적화까지 고려되기 때문에 개발자와 협업할 때도 높은 호환성을 자랑합니다. 특히 아이콘, 버튼, 일러스트 등 크기와 비율이 중요한 디자인 요소를 만들 때, SVG로 저장하면 품질 손실 없이 다양한 해상도에 대응할 수 있어요. 저는 피그마로 블로그 버튼을 만들 때 항상 SVG로 저장해요. 해상도나 레이아웃이 바뀌어도 그대로 유지되기 때문에 디바이스별 반응형 작업에 정말 유리하거든요. 그리고 피그마는 공동작업 기능도 뛰어나서, 누군가 만든 SVG를 수정할 때도 버전 이력을 보면서 안정적으로 작업할 수 있습니다. 또 피그마 플러그인 중에는 ‘SVG Export Cleaner’ 같은 걸 활용하면 불필요한 코드나 태그를 정리해 줘서 웹 퍼포먼스 향상에도 효과적이에요. 저는 개인 작업으로 만든 캐릭터를 SVG로 저장해 유튜브 썸네일, 블로그 일러스트, 상품 패키지에도 다양하게 활용했는데, 어떤 환경에서도 손실 없이 잘 보여서 만족도가 정말 높았습니다. SVG라는 형식 자체가 아직 낯선 분들이라도 피그마에서 몇 번만 내보내기를 해보면 ‘이게 그렇게 어려운 게 아니었네’ 하고 쉽게 익숙해질 수 있을 거예요.
포토피아: 포토샵 못지않은 웹 기반 편집기
포토피아는 포토샵의 인터페이스와 기능을 거의 그대로 웹에서 구현한 툴입니다. 처음 접했을 때는 ‘이게 진짜 무료 맞아?’ 싶을 정도로 기능이 풍부하고 강력했어요. 포토샵에 익숙한 사람이라면 바로 적응 가능하고, 그렇지 않더라도 몇 번 클릭해보면 금방 익숙해질 수 있어요. 포토피아에서 SVG로 저장하는 방법은 크게 두 가지가 있어요. 첫째는 간단하게 ‘파일 → 내보내기(Export As) → SVG’를 통해 전체 파일을 SVG로 저장하는 방법이고, 둘째는 선택된 벡터 도형이나 텍스트만 SVG로 저장하는 방식이에요. 포토피아는 벡터 기반 도형도 만들 수 있기 때문에, 도형 툴을 활용해 텍스트나 아이콘을 만든 뒤 SVG로 내보내면 깔끔한 결과물을 얻을 수 있어요. 저는 웹사이트용 아이콘 디자인할 때, 빠르게 레이아웃만 잡아서 SVG로 저장한 다음 나중에 피그마에서 마무리하는 식으로 작업하기도 했어요. 이게 가능한 이유는 포토피아가 SVG 저장 시 레이어 구조나 도형 정보를 꽤 잘 유지해 주기 때문이에요. 포토피아의 또 다른 장점은 포토샵 PSD 파일을 바로 열 수 있다는 건데요, 예전 PSD 작업 파일에서 아이콘만 추출해 SVG로 변환할 때 진짜 유용합니다. 모바일에서는 다소 제한이 있지만, 데스크톱에서는 파일 저장도 빠르고 안정적이라 실무에서도 충분히 쓸 수 있는 수준이에요. 실제로 저는 클라이언트로부터 받은 PNG 로고를 열고, 배경을 제거한 다음 텍스트 부분만 추출해서 벡터로 저장해 주는 용도로 포토피아를 자주 사용합니다. SVG 저장뿐 아니라 레이어 스타일, 투명도, 그룹화된 요소까지 반영해 내보낼 수 있기 때문에 의외로 디테일 작업에도 강한 툴이에요. 텍스트를 패스 형태로 바꾸고 싶다면 해당 텍스트를 먼저 래스터화 하지 말고 그대로 SVG로 저장하는 걸 추천드려요. 그래야 파일 크기도 줄이고, 수정도 자유롭게 할 수 있거든요. 무료지만 기능적인 면에서 결코 가볍지 않은 포토피아는, 웹 기반 벡터 편집이 필요한 분들에게 강력 추천드립니다.
Vectorizer: 이미지 기반 SVG 변환 툴
Vectorizer는 기존 이미지 파일을 자동으로 벡터화해주는 무료 온라인 서비스입니다. 그림 실력이 없어도, 혹은 벡터 툴을 전혀 다룰 줄 몰라도 사용할 수 있다는 게 이 툴의 가장 큰 장점이에요. 원리는 간단합니다. 사용자가 업로드한 JPG나 PNG 이미지의 경계와 색상 구역을 AI가 분석한 뒤, 이를 벡터로 바꿔서 SVG로 다운로드할 수 있게 해주는 거예요. 특히 스캔한 손그림이나 흑백 로고, 선명한 아이콘 이미지를 변환할 때 놀라울 정도로 깔끔하게 처리해 줘요. 저는 친구가 연필로 그린 로고 스케치를 사진으로 찍어 보내줬을 때, Vectorizer에 업로드해 SVG로 변환한 적이 있어요. 딱 10초도 안 되는 시간에 라인과 비율이 정돈된 벡터 이미지가 나오는데, 너무 신기했어요. 그걸 다시 피그마에서 컬러만 입히고 텍스트만 추가해 바로 명함에 넣어 디자인 완료했을 정도니까요. 물론 모든 이미지가 완벽하게 변환되는 건 아니에요. 배경이 복잡하거나 컬러톤이 애매하면 결과가 흐릿해질 수도 있고, 추출된 경계선이 덜 매끄러운 경우도 있어요. 그래서 저는 Vectorizer에 올리기 전, 이미지 대비를 높이거나 배경을 흰색으로 정리해서 선명하게 보이도록 편집해 두는 편이에요. 또 흑백 모드로 전환 후 업로드하면 복잡한 색상이 덜 얽혀서 더 깔끔한 SVG를 얻을 수 있답니다. Vectorizer는 단순한 툴이지만, 초보자에겐 진입장벽 없이 SVG를 이해할 수 있는 좋은 시작점이 될 수 있어요. 일러스트레이터 없이도 벡터 로고를 만들어야 한다면 꼭 한번 써보시길 추천드려요. 결과물은 개인 웹사이트, SNS, 티셔츠 디자인, 굿즈 작업까지 어디든 활용 가능해요. 특히 반복해서 자주 쓸 이미지가 있다면 이 툴로 SVG화해두면 관리도 편하고, 인쇄용 고해상도 이미지가 없어도 선명한 결과를 낼 수 있다는 게 정말 큰 장점이에요.