1. SVG 벡터와 PNG/JPG 래스터 포맷의 기술적 차이와 변환 필요성
SVG(Scalable Vector Graphics)는 W3C에서 제정한 XML 기반의 2차원 벡터 그래픽 표준 규격입니다. 점과 선, 베지어 곡선, 색상 좌표 등의 수학적 수식으로 도형을 정의하기 때문에 아무리 확대하거나 축소해도 픽셀이 깨지지 않는 무한 해상도를 자랑합니다.
하지만 모바일 앱 환경(iOS의 `Assets.xcassets`, Android의 `res/drawable-xxhdpi`), 게임 엔진(Unity, Unreal), 메일 템플릿 및 소셜 미디어(OpenGraph 메타 이미지) 등 다양한 플랫폼에서는 벡터 수식을 실시간 렌더링하는 데 따른 연산 비용을 줄이기 위해 정적 비트맵 포맷인 PNG(Portable Network Graphics) 또는 JPG(JPEG)를 기본 규격으로 요구합니다.
따라서 디자이너가 피그마(Figma)나 일러스트레이터(Illustrator)에서 작업한 고화질 원본 SVG 마스터 에셋을 실제 배포 및 빌드 파이프라인에 투입하기 위해서는 정확한 픽셀 단위로 래스터화(Rasterization)하는 변환 과정이 필수적입니다.
2. 모바일 앱과 웹 환경을 위한 레티나 배율(@2x, @3x) 추출 전략
최신 스마트폰과 태블릿, 고해상도 노트북 디스플레이는 일반적인 96 DPI 모니터 대비 2배에서 3배 이상의 픽셀 밀도를 탑재하고 있습니다. 이러한 고밀도 디스플레이(레티나, Retina)에서 기본 1.0x 규격의 비트맵 이미지를 출력하면 화면 확대 렌더링 알고리즘에 의해 가장자리 경계면이 흐려지는 블러 현상이 발생합니다.
플랫폼별 대표적인 해상도 배율 표준
- 1.0x (표준 밀도): 일반 웹 브라우저 표준 및 레거시 디스플레이 기본 에셋 (`icon.png`)
- 1.5x (HDPI): 중저가형 모바일 디바이스 및 웹 태블릿 환경 대응 (`icon@1.5x.png`)
- 2.0x (@2x, XHDPI): Apple Retina 디스플레이 및 표준 스마트폰 UI 에셋 (`icon@2x.png`)
- 3.0x (@3x, XXHDPI): 초고해상도 플래그십 스마트폰 및 4K 고화질 그래픽 에셋 (`icon@3x.png`)
배처 툴(Batcher Tools)은 사용자가 지정한 배율 설정에 맞추어 SVG 내부의 `viewBox`와 `width`/`height` 속성을 정밀하게 계산하고, HTML5 오프스크린 캔버스에 고품질 스케일링 필터를 적용하여 1픽셀의 왜곡도 없는 완벽한 고해상도 에셋을 대량으로 생성합니다.
3. 100% 클라이언트 사이드(Client-Side) 렌더링의 강력한 보안 원리
기존의 많은 무료 온라인 이미지 변환 서비스들은 사용자가 업로드한 그래픽 파일을 원격 클라우드 서버로 전송한 뒤 백엔드 툴(ImageMagick, Inkscape CLI 등)로 변환하여 다운로드 링크를 제공합니다. 이 과정에서 다음과 같은 치명적인 위험이 존재합니다:
- 기밀 유출 리스크: 미발표 신제품 UI 디자인, 기업 독점 로고, 저작권 보호 일러스트가 외부 서버 로그에 영구 또는 임시 보관될 수 있습니다.
- 네트워크 대역폭 낭비 및 지연: 수백 메가바이트의 에셋을 서버로 업로드하고 다시 다운로드받아야 하므로 인터넷 속도에 따라 작업 시간이 크게 지연됩니다.
반면 배처 툴은 최신 웹 표준 기술인 WICG File System Access API와 Blob URL / HTML5 Canvas 2D Context를 직접 활용합니다. 모든 파일 I/O와 그래픽 렌더링이 당신의 웹 브라우저 로컬 샌드박스 내부에서만 실행되므로 네트워크 연결이 끊긴 오프라인 상태에서도 완벽하게 동작하며, 어떠한 개인 정보나 디자인 데이터도 외부로 유출되지 않습니다.
4. 3단계 초간단 대량 변환 워크플로우
파일 드롭존에 SVG 파일을 끌어다 놓거나 상단 '폴더 선택' 버튼을 눌러 디렉토리를 통째로 로드합니다.
출력 포맷(PNG/JPG)과 목표 배율(1.0x ~ 3.0x), 파일명 접미사 규칙(@2x 등)을 원하는 대로 설정합니다.
'변환 시작'을 누르면 실시간 프로그레스 바와 함께 즉시 결과물이 생성되어 ZIP 압축 또는 로컬 폴더에 저장됩니다.