SVG vs PNG: 올바른 포맷을 선택하는 완전 가이드

이미지 포맷 선택이 정말 중요한 이유

SVG인가 PNG인가? 잘못 선택하면 히어로 섹션이 Retina 디스플레이에서 흐릿해지는 2MB 래스터 파일을 로드합니다. 또는 14MB XML로 부풀어 오르는 벡터 패스로 사진을 변환하느라 몇 시간을 보냅니다.

SVG와 PNG는 경쟁자가 아닙니다 — 근본적으로 다른 작업을 위한 상호 보완적 도구입니다. 이 차이를 이해하는 것이 사이트의 성능, 접근성, 시각적 품질을 위해 할 수 있는 가장 영향력 있는 일입니다.

SVG의 작동 원리

SVG(Scalable Vector Graphics)는 XML 기반 마크업 언어입니다. 각 픽셀의 색상 값을 저장하는 대신 명령을 저장합니다: «(50, 50)에 반지름 40인 원을 그리고 파란색으로 채워라.» 브라우저는 렌더링 시 이 명령을 실행하여 출력을 설계상 해상도 독립적으로 만듭니다.

<!-- 간단한 SVG 아이콘 — 247바이트 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
  <path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
        fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

SVG는 DOM에 존재하므로 CSS로 스타일링, JavaScript로 애니메이션, 사용자 이벤트에 반응할 수 있습니다 — 인터랙티브 시각화와 동적 UI에 독보적인 힘을 발휘합니다.

• 수학적 렌더링 — 16px 파비콘부터 3미터 간판까지 선명.
• 텍스트는 텍스트로 유지 — 검색 엔진이 인덱싱, 스크린 리더가 읽기 가능.
• 스타일링 및 스크립팅 가능 — 색상 동적 변경, 호버 효과 추가, 애니메이션 생성.
• 뛰어난 압축 — gzip이 SVG를 60~80% 줄임 (XML이 반복적이므로).

PNG의 작동 원리

PNG(Portable Network Graphics)는 각 픽셀의 정확한 색상을 저장하는 무손실 래스터 포맷입니다. 1000×1000 PNG를 표시하면 브라우저가 백만 개의 값을 화면 픽셀에 매핑합니다. 표시 영역이 더 크면 브라우저가 보간합니다 — 흐릿함은 여기서 발생합니다.

• 픽셀 퍼펙트 충실도 — 모든 색상 값이 정확히 보존.
• 완전한 알파 투명도 — 모든 배경에서 부드러운 가장자리.
• 유니버설 지원 — 모든 브라우저, 이메일 클라이언트, OS가 PNG 처리.
• 예측 가능한 렌더링 — 복잡한 패스 분석 없음.

결정판 비교표

특성	SVG	PNG	승자
확장성	무한 — 모든 해상도에서 선명	고정 — 확대 시 흐릿	SVG
크기 (단순)	극소 (아이콘 1KB 미만이 많음)	더 큼 (5~50KB가 많음)	SVG
크기 (복잡)	거대 (수백만 패스)	압축으로 합리적	PNG
애니메이션	CSS, SMIL, JS, Lottie, GreenSock	네이티브 불가 (APNG 필요)	SVG
접근성	마크업에 title/desc/aria-labels	alt 속성만	SVG
보안	인라인 SVG에서 XSS 위험	스크립트 실행 위험 없음	PNG

성능 벤치마크

24개 UI 아이콘(64×64 표시)의 로드 및 렌더링 시간:

지표	SVG 스프라이트	개별 SVG	PNG 스프라이트	개별 PNG
총 크기	12 KB	18 KB (24요청)	48 KB	96 KB (24요청)
gzip 전송	4 KB	6 KB	44 KB	88 KB
파싱 시간	2.1 ms	3.8 ms	0.4 ms	0.6 ms
첫 렌더링 (3G)	120 ms	340 ms	180 ms	890 ms

사용 사례 매트릭스

SVG가 이기는 경우

• 로고와 브랜드 마크 — 파일 하나, 모든 크기, 영원히.
• 아이콘과 UI 요소 — 테마를 위해 CSS Custom Properties로 스타일링.
• 데이터 시각화 — D3.js, Chart.js, Recharts 모두 SVG를 출력.
• 애니메이션 일러스트 — Lottie, GreenSock 또는 순수 CSS.
• 지도와 다이어그램 — 줌 가능, 인터랙티브, 접근성 높음.

PNG가 이기는 경우

• 사진 — 부드러운 그라데이션을 가진 수백만 색상.
• 스크린샷 — 픽셀 수준의 정확성이 중요.
• 복잡한 텍스처 — 유기적 디테일은 벡터로 변환되지 않음.
• 이메일 캠페인 — 많은 이메일 클라이언트가 SVG를 지원하지 않음.

빠른 결정 규칙: «Figma에서 도형 도구만으로 다시 만들 수 있나?» 예 → SVG. 사진을 가져와야 한다면 → PNG. 래스터를 벡터로 변환해야 하나요? VectoSolve의 AI 벡터라이저가 몇 초 만에 처리합니다.

SVG 보안: 알아야 할 XSS 벡터

인라인 SVG는 JavaScript를 실행할 수 있습니다. <script> 태그나 onload 핸들러가 있는 파일은 사용자 브라우저에서 임의의 코드를 실행합니다. 사용자가 업로드한 SVG를 새니타이징 없이 인라인으로 렌더링하지 마세요.

모던 모범 사례

• SVG: VectoSolve의 옵티마이저 또는 SVGO로 처리.
• PNG: pngquant나 oxipng으로 lossy/lossless 압축.

SVG여야 할 PNG 로고가 있나요? VectoSolve는 AI로 래스터 이미지를 깨끗한 벡터 패스로 트레이스합니다 — 보통 90% 더 작아집니다.

결론: «더 좋은» 포맷은 없다

SVG와 PNG가 존재하는 이유는 이미지가 두 가지 유형으로 나뉘기 때문입니다: 구축된 것(도형, 텍스트, 기하학)과 캡처된 것(사진, 스캔, 스크린샷). 포맷을 콘텐츠에 맞추고 공격적으로 최적화하면 모든 디바이스에서 빠르고 선명하며 접근성 높은 페이지를 제공할 수 있습니다.

속성	SVG	PNG
타입	벡터 (수학 기반)	래스터 (픽셀 기반)
확장성	무한 — 품질 손실 없음	고정 — 확대 시 흐릿
최적 용도	로고, 아이콘, UI 요소	사진, 스크린샷, 복잡한 이미지
일반 크기 (아이콘)	1~5 KB	10~50 KB
애니메이션 지원	CSS + JS 애니메이션	APNG만 (제한적 지원)