투명 배경으로 SVG를 PNG로 변환하기

UI, 문서, 마케팅 제작물에 쓸 깔끔한 투명 PNG를 SVG에서 안정적으로 내보내는 실전 워크플로입니다.

투명 PNG 내보내기가 실패하는 가장 흔한 원인은 viewBox 불일치, 숨겨진 배경 레이어, 가장자리 안티앨리어싱입니다. 이 가이드는 결과물을 안정적으로 만드는 데 집중합니다.

1) 내보내기 전에 SVG 정리

  • 유효한 viewBox를 유지하고 캔버스를 불필요하게 넓히는 보이지 않는 큰 패스를 제거합니다.
  • 출력 대상이 요구하지 않는다면 고정된 흰색 배경 레이어를 삭제합니다.
  • 가능하면 스트로크와 도형을 픽셀 그리드에 맞춰 흐릿한 가장자리를 줄입니다.

2) 내보내기 옵션 설정

  • 투명 배경 모드를 켜고 미리보기에서 알파 픽셀이 제대로 남는지 확인합니다.
  • 내보낸 뒤 다시 리사이즈하지 않도록 대상 화면에 맞춰 1x/2x/3x 배율을 고릅니다.
  • 디자인과 개발이 자산을 안전하게 연결할 수 있도록 파일명 규칙을 고정합니다.

3) 빠른 QA 점검

  • 밝은 배경과 어두운 배경 모두에서 숨은 흰 테두리가 없는지 확인합니다.
  • 아트보드에 임시 패딩을 넣어 가장자리 잘림이 없는지 검사합니다.
  • 배포 전에 출력 크기를 디자인 명세와 비교합니다.

투명 PNG FAQ

PNG에 여전히 흰 박스가 보이는 이유는 무엇인가요?
원본 SVG 안에 배경 사각형이 남아 있거나, 내보내기 배경이 단색으로 설정된 경우가 많습니다. 해당 레이어를 지우고 투명 배경으로 다시 내보내야 합니다.
흐릿한 가장자리는 어떻게 줄이나요?
스트로크를 픽셀에 맞추고, 소수점 변형을 피하고, 레티나 UI라면 2x처럼 적절한 배율로 내보내는 편이 좋습니다.
PNG로 변환하기 전과 후 중 언제 최적화해야 하나요?
보통은 먼저 SVG를 최적화해 마크업과 기하 구조를 정리한 뒤 PNG로 내보내는 편이 더 안정적입니다.
투명 PNG가 항상 JPG보다 나은가요?
아이콘이나 UI 오버레이에는 그렇습니다. 하지만 투명도가 필요 없고 사진처럼 파일 크기가 더 중요하면 JPG가 더 적합할 수 있습니다.