걷는 펭귄
프레임 6개를 한 줄로, 모두 같은 바닥선 위에 세웠어요.
스프라이트 시트 만들기: 이미지를 시트 한 장에
PNG 프레임, 아이콘, 게임 아이템을 끌어다 놓으면 몇 초 만에 스프라이트 시트 한 장이 완성돼요. 반듯한 격자로도, 빈틈없이 촘촘하게도 놓을 수 있고 JSON, XML 아틀라스, CSS 스프라이트, 움직이는 GIF까지 받아요. 이 무료 스프라이트 시트 만들기 도구는 브라우저에서 작동해서 아무것도 업로드되지 않아요.
스프라이트 시트 만들기무료 · 브라우저에서 실행
이미지를 여기에 끌어다 놓으세요
PNG, WebP, JPG, GIF, AVIF를 필요한 만큼 넣으세요. 모든 처리는 브라우저 안에서 이뤄져요.
- 무료, 브라우저에서 처리
- 격자 또는 촘촘한 배치
- JSON, XML, CSS
- 가장자리 자르기, 여백, 2의 거듭제곱
스프라이트 시트 만들기 예시
이 예시를 위해 만든 이미지 8세트를 이 스프라이트 시트 만들기 도구로 하나씩 시트 한 장에 담았어요. 하나를 열어 모든 설정을 시험해 보세요.
폭발 이펙트
불꽃에서 연기까지, 프레임 8개를 정사각형 격자에 담았어요.
앱 아이콘
크기가 다른 아이콘 9개의 가장자리를 잘라 촘촘하게 배치했어요.
픽셀 게임 아이템
아이템 8개를 200%로 키워 픽셀을 선명하게 배치했어요.
CSS용 과일 아이콘
아이콘 6개를 한 줄로, 웹 페이지에 바로 쓰는 CSS 스프라이트로 만들었어요.
우주 스티커
스티커 6장을 3열로, 2의 거듭제곱 크기 시트에 담았어요.
날아가는 박쥐
아래로 읽는 엔진에 맞게 프레임 4개를 한 열로 놓았어요.
체스 말
높이가 다른 말 6개를 XML 아틀라스와 함께 촘촘하게 배치했어요.
스프라이트 시트 만들기 사용법
3단계면 끝나고, 아무것도 업로드되지 않아요.
PNG, WebP, JPG, GIF 파일을 필요한 만큼 끌어다 놓거나, 붙여 넣거나, 선택하세요. 이름순으로 정렬하거나 끌어서 순서를 바꿀 수 있어요.
애니메이션 프레임에는 같은 크기의 칸이 놓인 격자를, 크기가 제각각인 이미지에는 촘촘한 배치를 고르세요. 가장자리 자르기, 여백, 간격, 크기도 정할 수 있어요.
스프라이트 시트 PNG를 JSON이나 XML 아틀라스와 함께 저장하거나, 웹사이트용 CSS 스프라이트, 프레임을 차례로 재생하는 움직이는 GIF로 받으세요.
이 도구가 잘하는 것
걷기 동작부터 웹 아이콘 모음까지, 잘하는 것 여섯 가지예요.
이미지격자도, 촘촘한 배치도
같은 크기의 칸이 놓인 격자는 애니메이션 프레임의 순서를 그대로 지켜요. 촘촘한 배치는 어떤 크기의 이미지든 최대한 작은 시트에 담아요.
투명한 가장자리 자르기
빈 테두리를 빼서 공간을 아끼고, 아틀라스에는 이미지마다 원래 크기와 오프셋을 담아서 게임 안에서 아무것도 어긋나지 않아요.
어떤 엔진에도 맞는 아틀라스
JSON 아틀라스는 Phaser와 PixiJS가 읽는 해시 형식이고, XML 아틀라스는 여러 게임 프레임워크가 읽는 Sparrow, Starling 형식이에요.
웹사이트용 CSS 스프라이트
이미지마다 크기와 위치를 담은 클래스를 하나씩 만들어서, 페이지가 이미지 수십 장 대신 한 장만 불러와요.
애니메이션 미리 보기와 GIF
정한 초당 프레임 수로 이미지를 차례로 재생하고, 공유하거나 시험해 볼 수 있게 움직이는 GIF로 저장하세요.
무료, 그리고 안전하게
모든 처리가 브라우저 안에서 이뤄져요. 업로드도, 회원가입도, 워터마크도 없고, 페이지가 한 번 열리면 오프라인에서도 계속 쓸 수 있어요.
가이드: 엔진에 맞는 스프라이트 시트 제작
깔끔한 결과를 위한 스프라이트 시트 만들기 팁 다섯 가지예요.
파일 이름에 순서대로 번호 붙이기
walk_1, walk_2 … walk_10처럼 이름 붙인 파일은 ‘이름순 정렬’로 올바른 순서로 놓여요. 숫자는 숫자 크기대로 읽고, 어떤 이미지든 끌어서 옮길 수 있어요.
애니메이션은 격자, 모음은 촘촘하게
프레임이 같은 크기와 위치를 지켜야 한다면 격자를 쓰세요. 크기가 다른 아이콘, 아이템, 타일은 촘촘하게 배치해 공간을 아끼세요.
잘라도 오프셋은 그대로
가장자리를 자르면 시트가 작아지고, 아틀라스를 읽는 엔진이 이미지마다 제자리로 돌려놓아요. 칸 크기로 읽는 단순한 격자라면 가장자리 자르기를 꺼 두세요.
번짐을 막는 여백
시트를 확대·축소하거나 필터를 거친다면 1~2px의 여백이나 간격을 더하세요. 가장자리에 옆 이미지가 비치지 않고 깔끔하게 보여요.
시트 크기 확인하기
크기는 미리 보기 아래에 표시돼요. 휴대폰용이라면 각 변을 4,096px 안에 맞추고, 엔진이 요구하면 ‘크기를 2의 거듭제곱으로’를 켜세요.
스프라이트 시트 만들기 도구, 이런 분들이 써요
여러 이미지를 시트 한 장에 모으는 대표적인 이유예요.
게임 개발자
캐릭터, 이펙트, 아이템을 엔진용 아틀라스와 함께 텍스처 한 장에 모아요.
웹 개발자
아이콘을 CSS 스프라이트와 함께 이미지 한 장으로 합쳐 요청 수를 줄여요.
픽셀 아티스트
애니메이션 프레임을 배치하고 2배나 4배 크기의 깔끔한 시트로 내보내요.
모드 제작자·애니메이터
모드, 도구, 애니메이션 소프트웨어용으로 XML이나 JSON 아틀라스가 있는 시트를 만들어요.
스프라이트 시트 만들기 자주 묻는 질문
만드는 방법, 아틀라스, 개인정보 보호에 관한 답변이에요.
이미지를 추가하고 격자나 촘촘한 배치를 고른 다음, 필요한 아틀라스나 CSS와 함께 스프라이트 시트 PNG를 받으세요.
네. 모든 처리가 브라우저에서 이뤄지고, 회원가입도 워터마크도 없어요.
아니요. 이미지를 읽고 배치하는 일은 모두 내 기기에서 이뤄지고, 서버로는 아무것도 보내지 않아요.
격자는 모든 이미지에 같은 크기의 칸을 줘서 애니메이션에 가장 잘 맞아요. 촘촘한 배치는 크기가 다른 이미지를 최대한 빈틈없이 맞춰 넣어서 아이콘과 아이템에 가장 잘 맞아요.
Phaser, PixiJS와 대부분의 웹 엔진에는 JSON, Sparrow와 Starling 방식의 프레임워크에는 XML, 웹 페이지에는 CSS를 고르세요.
아니요. 아틀라스에 이미지마다 원래 크기와 오프셋이 담겨서, 아틀라스를 읽는 엔진은 모든 프레임을 제자리에 그려요.
네. GIF를 ‘GIF 스프라이트 시트 변환’에서 열면 모든 프레임을 시간과 함께 읽어 시트 한 장에 놓아요.
컴퓨터에서는 최대 1,000장, 휴대폰에서는 최대 400장까지, 각 변 최대 16,384px의 시트에 담을 수 있어요.