웹 개발과 모바일 앱 디자인 과정에서 SVG(Scalable Vector Graphics)는 크기를 아무리 키워도 깨지지 않는 무한 해상도를 제공하여 UI 아이콘과 벡터 일러스트레이션의 표준으로 널리 사용됩니다. 그러나 네이티브 앱 배포, 게임 엔진 텍스처, 오픈그래프 썸네일, 소셜 미디어 공유 등 다양한 플랫폼 요구사항에 맞춰 PNG 또는 JPG 비트맵 이미지로 변환해야 하는 순간이 빈번하게 발생합니다.
핵심 요약: SVG를 단순 1.0x 배율로만 래스터화하면 최신 스마트폰의 레티나(Retina) 디스플레이에서 이미지가 뭉개집니다. 1.0x, 1.5x, 2.0x(@2x), 3.0x(@3x) 다중 해상도 에셋을 손실 없이 한 번에 일괄 추출하는 표준 워크플로우를 익혀보세요.
1. SVG 벡터와 PNG/JPG 래스터 포맷의 근본적 차이
SVG는 점, 선, 면의 좌표를 수학적 방정식으로 정의하는 XML 텍스트 파일입니다. 반면 PNG와 JPG는 2차원 격자(Grid) 위에 픽셀(Pixel) 단위로 색상 정보를 저장하는 래스터(비트맵) 형식입니다.
| 구분 | SVG (벡터) | PNG (무손실 래스터) | JPG (손실 래스터) |
|---|---|---|---|
| 확대 시 화질 | 무한 확대 가능 (무손실) | 확대 시 픽셀 깨짐 (계단 현상) | 확대 시 아티팩트 및 블러 |
| 투명도 지원 | 완벽 지원 (Alpha) | 32비트 알파 채널 완벽 지원 | 미지원 (흰색/검은색 배경 채움) |
| CPU 렌더링 비용 | 복잡한 패스 시 높음 | 매우 낮음 (즉시 디코딩) | 매우 낮음 (고속 압축 해제) |
| 주요 활용처 | 웹 아이콘, UI 컴포넌트 | 앱 아이콘, 투명 그래픽, 에셋 | 고해상도 배경 사진, 배너 |
2. 레티나 고밀도 디스플레이와 배율(@2x, @3x) 네이밍 표준
현대 스마트폰(iPhone, Galaxy 등)과 맥북 레티나 디스플레이는 물리적 1인치 안에 2~3배 많은 픽셀을 배치합니다. 이를 디바이스 픽셀 비율(Device Pixel Ratio, DPR)이라고 부릅니다.
- 1.0x (Standard @1x): 기준 해상도 (예: 24x24 px 아이콘 ->
icon.png) - 1.5x (HDPI @1.5x): 중밀도 안드로이드 기기 및 태블릿 (예: 36x36 px ->
icon@1.5x.png) - 2.0x (Retina @2x / XHDPI): 표준 아이폰 및 고해상도 모니터 (예: 48x48 px ->
icon@2x.png) - 3.0x (Super Retina @3x / XXHDPI): 플래그십 고해상도 스마트폰 (예: 72x72 px ->
icon@3x.png)
실무 팁: 배처 툴에서는 원하는 배율 체크박스를 선택하고 각 배율별 접미사(Suffix)를 지정하면, 단 한 번의 클릭으로 icon.png, icon@2x.png, icon@3x.png가 한 폴더에 완벽히 생성됩니다.
3. 100% 로컬 브라우저 래스터화의 기술적 이점
많은 온라인 변환기가 사용자의 그래픽 에셋을 외부 웹 서버로 전송하여 백엔드 스크립트로 렌더링합니다. 이는 미발표 제품 디자인이나 기업의 기밀 UI 에셋이 유출될 수 있는 중대한 보안 리스크를 안고 있습니다.
배처 툴(Batcher Tools)은 브라우저 샌드박스 내부의 HTML5 Canvas API와 OffscreenCanvas 기술을 활용하여 100% 클라이언트 로컬 메모리에서 픽셀 래스터화를 직접 수행합니다. 외부 네트워크 전송이 0바이트이므로 기업 보안 규정을 준수하면서도 초고속 일괄 처리가 가능합니다.
4. 3단계 초간단 일괄 변환 워크플로우
- 폴더 선택 또는 파일 드래그 앤 드롭: 변환할 SVG 파일들을 화면에 끌어다 놓습니다.
- 포맷 및 배율 옵션 설정: 투명 배경이 필요한 경우 PNG를, 사진형 배경은 JPG를 선택하고 필요한 배율(@1.5x, @2x, @3x)을 활성화합니다.
- 일괄 변환 시작: '변환 시작' 버튼을 누르면 실시간 프로그레스 바와 함께 즉시 결과물이 패키징되어 저장됩니다.