PNG 로고는 로고를 찍은 사진에 가깝습니다. 픽셀이 고정된 격자로 박혀 있습니다. 반면 SVG 로고는 로고를 그리는 설명서입니다. 여기서 저기까지 선을 긋고, 이 색으로 채우고, 이 모서리를 둥글게 하라는 식입니다. 브라우저나 프로그램은 이 설명을 화면 해상도에 맞춰 그때그때 다시 계산합니다. SVG가 크기와 상관없이 언제나 선명한 이유입니다.
한눈에 보는 비교
| 항목 | SVG | PNG |
|---|---|---|
| 형식 종류 | 벡터(XML 명령) | 래스터(픽셀) |
| 손실 없는 확대 | ✅ 제한 없음 | ❌ 확대하면 깨짐 |
| 투명도 | ✅ 완전 지원 | ✅ 알파 채널 완전 지원 |
| 사진에 적합 | ❌ 아니요 | ❌ 아니요(JPG/WebP 권장) |
| 단순한 로고에 적합 | ✅ 가장 좋은 선택 | ✅ 가능하지만 크기 고정 |
| CSS·자바스크립트로 편집 | ✅ 색상, 애니메이션, 인터랙션 | ❌ 아니요 |
| 파일 크기(단순한 로고) | 매우 작음(1~10KB) | 더 큼(20~200KB) |
| SNS 업로드 가능 | ❌ 아니요(대부분 SVG 미지원) | ✅ 어디서나 가능 |
| 이메일에서 표시 | ❌ 아니요 | ✅ 예 |
| 인쇄소 접수 가능 | ✅ 예(오히려 선호됨) | ✅ 고해상도라면 가능 |
| 구글 색인 | ✅ 텍스트를 읽을 수 있음 | ❌ 대체 텍스트로만 |
웹사이트 로고에 SVG가 앞서는 이유
가로 200px짜리 PNG 로고는 풀HD 모니터에서는 선명하지만 4K 모니터나 아이폰 레티나 화면에서는 흐릿해집니다. 화면이 가진 것보다 많은 픽셀로 이미지를 표시하려 들기 때문입니다. PNG로 레티나 화면까지 감당하려면 표시 크기의 2배나 4배로 내보내야 하고, 그만큼 용량도 늘어납니다.
SVG는 이 문제를 통째로 해결합니다. 브라우저가 화면 해상도에 정확히 맞춰 그려 내므로 크기별 버전을 따로 준비할 필요가 없습니다. 단순한 로고의 5KB짜리 SVG 하나면 460PPI 휴대폰에서도, 4K 모니터에서도, 10미터짜리 옥외 광고판에서도 똑같이 선명합니다.
게다가 SVG는 CSS와 자바스크립트로 다룰 수 있습니다. 다크 모드에 맞춰 로고 색을 바꾸거나, 마우스를 올렸을 때 움직이게 하거나, 상황에 따라 로고의 일부를 바꾸는 일까지 CSS 한 줄로 가능합니다.
PNG가 여전히 필요한 순간
SVG를 받아들이지 않는 곳도 많습니다. 다음과 같은 자리에서는 PNG가 여전히 필수입니다.
- SNS: 인스타그램, 페이스북, 링크드인, 카카오톡을 비롯한 대부분의 플랫폼은 프로필 사진과 업로드에 JPG나 PNG를 요구합니다.
- 이메일 마케팅: 이메일 프로그램은 인라인 SVG를 그려 주지 않습니다. 이메일에 넣는 로고는 PNG여야 합니다.
- 발표 자료와 문서: 파워포인트, 워드, 구글 슬라이드는 PNG를 문제없이 받지만 SVG 지원은 제한적이거나 들쭉날쭉합니다.
- 스티커와 앱: 카카오톡 이모티콘처럼 PNG만 받는 형식이 있습니다.
- 그러데이션과 그림자가 많은 복잡한 로고: 사진에 가까운 효과를 넣은 로고는 권장되지 않지만 실제로 존재하며, SVG로는 제대로 표현되지 않습니다.
실무에서 통하는 로고 관리 방식
업계 표준은 두 형식을 모두 갖춰 두는 것입니다.
- SVG: 웹사이트, 웹 애플리케이션, 인쇄소 입고 등 크기 확장이 필요한 모든 곳
- 투명 배경 PNG(고해상도): SNS, 이메일, 문서 등 SVG를 받아 주지 않는 모든 곳
ImageTools의 로고 만들기 도구는 두 형식을 동시에 내보냅니다. 이미 PNG 로고만 있고 SVG가 필요하다면 디자이너가 PNG를 벡터로 변환해 줄 수 있습니다. 반대 방향, 즉 SVG를 PNG로 바꾸는 일은 훨씬 간단해서 변환 도구로 바로 처리할 수 있습니다.