Creation
스프라이트 시트 생성기
여러 이미지를 CSS, JSON 및 SCSS 출력과 함께 스프라이트 시트로 결합하여 개발자에게 제공합니다.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the 스프라이트 시트 생성기 to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="스프라이트 시트 생성기 by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix 스프라이트 시트 생성기</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About 스프라이트 시트 생성기
Last updated: May 2026
OptiPix 스프라이트 시트 생성기는 여러 이미지를 하나의 최적화된 스프라이트 시트로 결합하며, 바로 사용할 수 있는 CSS, JSON 좌표, SCSS 변수를 제공합니다. 레이아웃을 선택하세요: 가로 스트립, 세로 스트립, 그리드(사용자 지정 열 수) 또는 패킹(최소 낭비 공간을 위한 빈 패킹). 가장자리 번짐을 방지하기 위해 스프라이트 간 패딩을 설정하세요. 출력 결과는 단일 PNG 스프라이트 시트와 각 스프라이트에 대한 생성된 CSS('.sprite-icon-home { background-position: -0px -0px; … }'), JSON 좌표 맵, SCSS 변수입니다. Retina @1x 및 @2x 스케일링을 지원합니다. 각 스프라이트는 원본 파일 이름을 따서 명명됩니다. 모든 작업은 로컬에서 실행됩니다 - 이미지는 기기를 벗어나지 않습니다. 게임 개발자, CSS 스프라이트를 사용하는 웹 개발자, 작은 아이콘을 단일 네트워크 요청으로 묶고 싶은 모든 사람을 위해 제작되었습니다.
How It Works
각 입력 이미지는 메모리로 로드됩니다. 선택한 레이아웃 알고리즘(스트립, 그리드 또는 선반 빈 패킹)이 스프라이트별 (x, y, w, h) 좌표를 계산합니다. 스프라이트 시트는 캔버스에 렌더링됩니다. CSS / JSON / SCSS는 동일한 좌표 맵에서 생성됩니다.
Use Cases
- •UI 아이콘을 단일 PNG + CSS 스프라이트 시트로 묶기
- •Phaser 또는 Pixi용 2D 게임 스프라이트 아틀라스 생성
- •소셜 미디어 아이콘을 하나의 CSS 스프라이트로 결합하여 사이트 속도 향상
- •캐릭터 애니메이션 프레임을 가로 스트립으로 패킹
- •원본 이미지에서 retina-ready @2x 스프라이트 시트 빌드
You Might Also Like
If you find 스프라이트 시트 생성기 useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools