PNG SVG 변환: 로고는 깔끔하게, 배경은 투명하게

PNG를 SVG로 변환하려면 이미지를 벡터 도형으로 트레이싱하고, 경계와 색상을 확인한 뒤 파일로 내보내면 됩니다. 결과를 가장 크게 좌우하는 것은 원본의 선명도입니다. 트레이싱으로 로고를 크기 조절이 자유로운 형태로 만들 수는 있지만, PNG에 처음부터 없던 글자나 세부 묘사까지 되살리지는 못합니다.

나뭇잎 그림은 트레이싱의 원리를 보여 주는 일러스트이며, 실제 변환 결과가 아닙니다.

이 글에서는 이미지 벡터화 도구로 로고를 벡터화하는 순서를 설명합니다. 흰 배경을 지우는 법과 작은 요소를 잃지 않는 법도 함께 다룹니다. PNG, JPG, WebP 파일을 최대 10 MB까지 올릴 수 있고, 계정은 필요 없습니다.

PNG를 SVG로 변환하면 무엇이 달라지나요?

PNG는 픽셀을 저장합니다. 벡터 패스는 좌표와 곡선으로 도형을 나타내서 크기를 바꿔도 픽셀이 깨지지 않습니다.

확장자가 .svg라고 해서 벡터화된 이미지라는 보장은 없습니다. SVG 안에는 래스터 이미지도 넣을 수 있으며, W3C SVG 명세는 이를 image 요소로 설명합니다. PNG를 SVG 안에 넣기만 했다면 원래 비트맵의 한계가 그대로 남습니다. 편집 가능한 로고가 필요하다면 벡터 편집기에서 하나씩 선택하고 색을 바꿀 수 있는, 트레이싱된 패스여야 합니다.

트레이싱은 근사치입니다. 단색 면과 뚜렷한 경계는 잘 잡아내지만, 흐림이나 그림자, 아주 작은 글자는 도형으로 되살리기 어렵습니다. 처음 로고를 만든 디자이너에게 벡터 원본을 받을 수 있다면 그 파일부터 쓰세요. 이미지 벡터화는 래스터 파일밖에 없을 때 쓸모가 있습니다.

트레이싱 전에 PNG부터 점검하세요

가지고 있는 로고 파일 중 가장 선명한 것을 고르세요. 원본 작업 파일에서 바로 내보낸 이미지라면 더 좋습니다. 화면 UI가 함께 찍힌 캡처, 비스듬히 찍어 원근이 틀어진 사진, 불필요한 여백은 피하는 편이 낫습니다. 완성된 SVG와 비교할 수 있도록 원본 사본도 남겨 두세요.

배경도 자세히 보세요. 이미지 편집기에 보이는 회색 체크무늬는 투명하다는 표시일 수 있지만, 체크무늬 자체가 PNG에 그려져 있다면 그것은 그림의 일부입니다. 검색해서 받은 '투명 PNG'도 이런 파일일 수 있습니다. 그대로 트레이싱하면 칸 하나하나가 도형이 될 수 있습니다.

작은 글자가 들어간 로고라면 업로드 전에 글자를 확대해 보세요. PNG에서 이미 두 획이 붙어 있다면 세부 묘사를 높여도 붙은 채로 남을 수 있습니다. 흐린 이미지에서 글자를 살리려 애쓰기보다 편집기에서 글자를 다시 만드는 편이 확실한 경우가 많습니다.

PNG를 SVG로 변환하고 로고를 벡터화하는 방법

1. 이미지를 올리고 이미지 유형 확인하기

이미지 SVG 변환 도구를 열고 이미지 선택을 누르거나, PNG를 업로드 영역에 끌어다 놓으세요. 첫 결과가 나올 때까지 페이지를 닫지 말고 기다리면 됩니다.

처음에는 설정이 자동으로 맞춰집니다. 조정 항목이 접혀 있다면 다듬기를 열고 이미지 유형을 확인하세요. 평면 로고나 아이콘이라면 로고를 고릅니다. 무언가를 바꾸기 전에 원본과 벡터 결과부터 비교해 보세요. 첫 트레이싱에서 주요 도형이 이미 잡혀 있을 수도 있습니다.

2. 색상 수를 알맞게 정하기

최대 색상 수로 팔레트를 단순하게 만듭니다. 두 가지 색으로 된 마크라면 2색부터 시도하고, 두 색이 모두 살아 있는지 확인하세요. 음영이 들어간 로고라면 색이 더 필요할 수 있습니다. 필요한 색은 남기고, 가장자리의 흐릿한 중간색까지 따로 도형으로 만들지는 마세요.

팔레트 편집에서 색상 견본을 선택하면 색을 바꿀 수 있습니다. 브랜드 색상 고정을 켜 두면 팔레트를 조정하는 동안에도 고른 색이 유지됩니다. 비슷한 견본 여러 개를 선택해 선택한 색상 합치기를 누르면 지정한 색 하나로 합쳐집니다. 조정할 때마다 미리보기를 확인하고, 특히 두 색이 만나는 부분을 살펴보세요.

3. 세부 묘사와 부드러움은 따로 조정하기

작은 홈이나 가는 선, 글자 속 빈 공간이 사라졌다면 세부 묘사를 올리세요. 원치 않는 잡티가 남아 있다면 내리면 됩니다. 세부 묘사를 높이면 SVG가 더 크고 복잡해질 수 있으니, 높을수록 좋은 설정은 아닙니다.

부드러움으로 윤곽을 다듬을 때는 모서리와 곡선을 유심히 보세요. 한 번에 하나씩만 바꿔야 무엇이 효과가 있었는지 알 수 있습니다. 확대해서 경계를 살핀 다음, 로고가 실제로 쓰일 크기로 줄여서 다시 보세요. 크게 확대했을 때 깔끔해 보이던 변화가 작은 로고에서는 오히려 알아보기 어렵게 만들기도 합니다.

4. 흰 배경은 신중하게 지우기

PNG의 흰 배경을 없애고 싶다면 흰색 제거를 켜세요. 이 기능은 로고 안의 흰색을 모두 지우는 것이 아니라, 바깥 배경과 이어진 흰색만 지웁니다.

그래서 흰 글자나 바깥 배경에 맞닿은 흰 부분은 꼭 확인해야 합니다. 도형 안쪽에 갇힌 공간도 살펴보세요. 배경과 이어지지 않은 흰 영역은 그대로 남을 수 있습니다. 색이 있는 배경, 그림자, 이미지에 그려진 체크무늬는 이미지 편집기나 벡터 편집기에서 따로 정리해야 할 수도 있습니다.

투명 배경 SVG를 원한다면 로고 주변이 실제로 투명해야 합니다. 내보낸 결과를 밝은 배경과 어두운 배경에 모두 올려 보면, 남아 있는 흰 도형이나 옅은 테두리가 금방 드러납니다.

5. SVG로 내보내고 확인하기

계속 편집할 계획이라면 SVG 내보내기 용도에서 디자인을 고르세요. 웹은 웹사이트에 쓰기 좋게 최적화된 코드를 만듭니다. 처리가 끝나면 SVG 다운로드를 누릅니다.

기존 로고를 새 파일로 바꾸기 전에 벡터 편집기에서 열어 다음을 확인하세요.

• 도형을 선택하고 색을 바꿀 수 있는가
• 글자 속 공간, 좁은 틈, 작은 세부 묘사가 그대로 보이는가
• 색상이 의도한 팔레트와 같은가
• 밝은 배경과 어두운 배경 모두에서 배경 처리가 자연스러운가

인쇄나 제작에 쓸 파일이라면 그 작업에 쓰는 프로그램에서 치수와 제작 조건을 확인하세요. SVG를 다운로드했다고 해서 곧바로 제작에 쓸 수 있는 파일이 되는 것은 아닙니다.

로고 트레이싱이 잘 안 될 때

윤곽이 울퉁불퉁하다면 더 선명한 PNG가 있는지 먼저 찾아보세요. 부드러움은 조금씩 올려야 합니다. 너무 높이면 일부러 각지게 만든 모서리까지 둥글어집니다. 그래도 남는 오류는 패스를 직접 고쳐야 할 수 있습니다.

도형이 너무 많이 생겼다면 최대 색상 수나 세부 묘사를 낮춘 뒤 중요한 요소가 남아 있는지 확인하세요. 팔레트에 거의 같은 색이 여러 개 있다면 합치는 것이 좋습니다.

글자가 이상하게 나왔다면 트레이싱 과정에서 글자가 편집 가능한 텍스트가 아니라 도형이 되었기 때문입니다. 정확한 글자 모양이 필요하거나 나중에 문구를 바꿀 예정이라면, 편집기에서 맞는 글꼴로 다시 입력하세요.

자주 묻는 질문

로고 벡터화를 무료로 할 수 있나요?

이미지 변환과 SVG 다운로드는 무료이며, 가입이나 워터마크가 없습니다. 텍스트로 그림을 생성하는 기능은 별도 작업으로, 로그인이 필요하고 현재 무료이지만 계정별 일일 한도가 있습니다.

흐릿한 로고도 SVG로 변환하면 선명해지나요?

크기를 바꿔도 깨지지 않는 윤곽은 얻을 수 있지만, 원본에 없는 세부 묘사까지 되살리지는 못합니다. 정확해야 하는 작업이라면 더 선명한 PNG를 쓰거나 망가진 부분을 직접 다시 그리세요.

SVG에서도 투명 배경이 유지되나요?

원본 PNG의 투명한 부분은 그대로 유지됩니다. 다만 부드러운 가장자리나 그림자는 단순화될 수 있으니 내보낸 결과를 확인하세요. 흰색이 꽉 채워진 배경이라면 흰색 제거를 켜고 남은 도형을 살펴보세요.

포토샵이나 일러스트레이터로도 로고를 벡터화할 수 있나요?

일러스트레이터에는 비트맵을 패스로 바꾸는 이미지 추적 기능이 있어서, 프로그램이 있다면 그 안에서 트레이싱하고 바로 다듬을 수 있습니다. 포토샵은 픽셀 편집이 중심인 프로그램이라, 로고 벡터화에는 보통 일러스트레이터 같은 벡터 편집기를 씁니다. 두 프로그램이 없다면 브라우저에서 이미지 벡터화로 SVG를 만든 뒤 일러스트레이터, 피그마, Inkscape 같은 편집기에서 열어 마무리하면 됩니다.

PNG 없이 로고를 새로 만들 수도 있나요?

텍스트로 벡터 생성에 원하는 로고를 설명하면 출발점이 될 시안을 만들 수 있습니다. 결과를 다듬은 뒤, 정확한 브랜드 글자는 벡터 편집기에서 추가하세요.

내보낸 SVG를 꼭 확인하세요

PNG를 SVG로 제대로 변환했다면 로고를 로고답게 만드는 도형, 색상, 간격이 그대로 남아 있어야 합니다. 선명한 원본으로 시작하고, 내보낸 파일은 실제로 쓸 환경에서 확인하세요. 지금 가진 이미지로 로고를 SVG로 변환해 보세요.