가이드 목록으로 돌아가기 Back to Guides
|

[사용 가이드] 웹 디자이너 및 앱 개발자를 위한 해상도별(@2x, @3x) SVG 에셋 일괄 내보내기 [Usage Guide] Multi-Resolution (@2x, @3x) SVG Asset Export Guide for Designers & Developers

발행일: 2026-08-03Published: 2026-08-03 작성자: Batcher Tools UI/UX 팀Author: Batcher Tools Design Team

피그마(Figma), 어도비 일러스트레이터(Adobe Illustrator), 스케치(Sketch) 등 디자인 툴에서 작업한 아이콘과 그래픽 에셋은 원본이 벡터(SVG) 형태입니다. 하지만 iOS Swift(Xcode Asset Catalog) 및 안드로이드 Kotlin(res/drawable) 프로젝트에 아이콘을 탑재할 때는 여전히 해상도별 픽셀 밀도(DPI)에 맞춘 PNG 비트맵 파일이 반드시 필요합니다.

본 가이드에서는 **1.0x, 1.5x, 2.0x, 3.0x 고해상도 배율 에셋을 한 번의 클릭으로 접미사 커스텀과 함께 일괄 변환 및 내보내는 스마트 워크플로우**를 소개합니다.

1. 모바일 플랫폼별 픽셀 밀도 규격 매핑

  • iOS 규격: 1.0x (Standard @1x), 2.0x (Retina @2x), 3.0x (Super Retina @3x). 접미사 규칙 `icon@2x.png`, `icon@3x.png`
  • Android 규격: mdpi(1.0x), hdpi(1.5x), xhdpi(2.0x), xxhdpi(3.0x). 접미사 규칙 `icon_1.5x.png`, `icon_2x.png`

배처 툴 접미사 커스텀 기능: 배처 툴에서는 1.5x, 2.0x, 3.0x 체크박스를 활성화한 후 접미사를 `@1.5x`, `@2x`, `@3x`로 원하는 규칙대로 지정할 수 있어 모바일 프로젝트 폴더 구조에 맞게 즉시 빌드할 수 있습니다.

2. 실전 에셋 변환 단계

  1. 피그마 등에서 작업한 SVG 아이콘 파일들을 하나의 로컬 폴더에 보관합니다.
  2. 배처 툴의 '이미지 변환 (SVG)' 탭에서 해당 폴더를 연동합니다.
  3. 출력 포맷을 **PNG (알파 투명도 보존)**로 설정합니다.
  4. 설정 패널에서 1.0x, 1.5x, 2.0x 배율 및 접미사를 확인하고 **'변환 시작'**을 클릭합니다.

3. 투명 배경(Alpha Channel)과 원본 ViewBox 설정 체크리스트

PNG 변환 시 사각형 외곽선 밖 배경이 투명하게 유지되도록 SVG 내부에 background="none" 또는 viewBox 파라미터가 명시되어 있는지 확인하세요. 배처 툴의 HTML5 캔버스는 투명 픽셀 알맹이를 알파 채널 무손실로 정확하게 인코딩합니다.

Design tools like Figma and Adobe Illustrator create scalable SVG vector icons. However, native iOS Swift (Xcode Asset Catalog) and Android Kotlin (`res/drawable`) applications still demand pixel-density bitmap assets in PNG format.

This guide explains how to export multi-scale assets (1.0x, 1.5x, 2.0x, 3.0x) with custom filename suffixes (@2x, @3x) in one batch click using Batcher Tools.

1. Mobile Density Standards

  • iOS: Standard @1x, Retina @2x, Super Retina @3x. Filename convention: `icon@2x.png`, `icon@3x.png`.
  • Android: mdpi (1.0x), hdpi (1.5x), xhdpi (2.0x), xxhdpi (3.0x).

Custom Suffix Support: Customize output suffixes like `@1.5x`, `@2x`, and `@3x` directly inside Batcher Tools settings.

2. Step-by-Step Conversion

  1. Export SVG files from Figma into a local directory.
  2. Mount directory in Batcher Tools under 'SVG Images'.
  3. Select **PNG output** to retain alpha transparency.
  4. Enable target scale multipliers and click **'Start Conversion'**.