이미지를 여기에 드래그 앤 드롭
또는 클릭하여 여러 파일 업로드
생성기 설정
Set to 0 for auto-calculating columns.
프론트엔드 최적화를 위한 고효율 유틸리티
Reduce HTTP requests and speed up loading.
자동 좌표 생성
계산을 대신합니다. 통합된 스프라이트 시트의 모든 개별 이미지에 대한 정확한 X 및 Y 좌표를 즉시 얻으세요.
스마트 그리드 패킹 알고리즘
엔진이 다양한 크기의 이미지를 가능한 가장 효율적인 그리드로 지능적으로 배열하여 빈 공간을 최소화하고 최종 파일 크기를 줄입니다.
바로 사용 가능한 CSS 클래스
background-position 및 dimension 속성을 포함하여 모든 에셋에 대한 개별 클래스가 있는 깨끗한 복사-붙여넣기 가능한 CSS 블록을 생성합니다.
맞춤 레이아웃 모드
특정 프로젝트 아키텍처의 필요에 따라 수직 스트립, 수평 스트립 또는 가장 효율적인 '그리드' 모드를 선택하세요.
패딩 및 간격 제어
'픽셀 블리딩' — 인접 아이콘의 일부가 UI에서 실수로 보이는 현상 — 을 방지하기 위해 스프라이트 사이에 맞춤 간격을 추가하세요.
로컬 메모리 처리 보호
UI 자산은 여러분의 재산입니다. 모든 패킹과 코드 생성이 브라우저에서 바로 이루어져 데이터가 기기를 떠나지 않습니다.
고속 에셋 가이드: 생성기 사용 방법
Create sprites in minimal steps.
작은 에셋 수집
결합하려는 모든 작은 아이콘, 버튼 또는 애니메이션 프레임을 모으세요. PNG와 같은 고품질 포맷인지 확인하세요.
도구에 일괄 업로드
모든 파일을 한 번에 선택하고 업로드하세요. 도구가 즉시 함께 패킹할 수 있는 방법의 시각적 미리보기를 생성합니다.
최적화 설정
Retina 화면에서 가장자리가 보이는 것이 걱정되면 '패딩'을 조정하거나, 사이드 메뉴나 필름스트립을 만들고 있다면 '수직' 레이아웃을 선택하세요.
스프라이트 미리보기 확인
생성된 시트를 확인하세요. 모든 항목이 보이고 그리드가 촘촘하고 효율적이며 낭비되는 공간이 없는지 확인하세요.
아틀라스 이미지 다운로드
'스프라이트 시트 다운로드' 버튼을 클릭하여 통합된 이미지 파일을 프로젝트의 에셋 폴더에 저장하세요.