픽셀 고양이 걷기
GIF를 스프라이트 시트로 바꿔 6프레임을 한 줄로 놓았어요. 대부분의 엔진이 띠 모양으로 읽는 배치예요.
GIF 스프라이트 시트 변환: 모든 프레임을 PNG 한 장에
움직이는 GIF를 끌어다 놓으면 모든 프레임을 스프라이트 시트 PNG 한 장에 담고, JSON 아틀라스와 CSS 애니메이션도 만들어 줘요. 이 무료 GIF 스프라이트 시트 변환기는 움직이는 WebP와 PNG, 짧은 영상도 열 수 있고, 모든 과정이 브라우저에서 끝나요.
GIF 스프라이트 시트 변환무료 · 브라우저에서 실행
GIF를 여기에 끌어다 놓으세요
움직이는 GIF, WebP, PNG나 짧은 MP4, WebM 영상을 지원해요. 모든 처리는 브라우저 안에서 이뤄져요.
- 무료, 브라우저에서 처리
- GIF, WebP, PNG, 영상
- 행, 열, 여백 설정
- PNG, JSON 아틀라스, CSS
GIF 스프라이트 시트 예시
이 예시를 위해 만든 애니메이션 8개를 이 페이지의 변환기로 하나씩 시트로 만들었어요. 하나를 열어 모든 설정을 시험해 보세요.
날갯짓하는 파랑새
4프레임을 2의 거듭제곱 크기인 1024 × 1024 시트에 담았어요. 이 크기를 요구하는 엔진에 맞춰요.
일렁이는 횃불
6프레임을 절반 크기로 줄인 작은 시트예요. 타일 기반 게임에 잘 맞아요.
로딩 스피너
8프레임을 정사각형 시트에 담아 CSS 로딩 애니메이션으로 바로 써요.
둥실 떠다니는 유령
4프레임을 한 열로 놓았어요. 시트를 위에서 아래로 재생하는 엔진용이에요.
두근거리는 하트 아이콘
4프레임에 4px 여백을 둬서 가장자리가 늘 깔끔하게 남아요.
손 흔드는 로봇
4프레임을 한 줄로 놓고 프레임 사이에 4px 간격을 뒀어요.
로켓 분사 불꽃
일렁이는 불꽃 4프레임을 정사각형에 가까운 시트에 담았어요.
GIF를 스프라이트 시트로 만드는 법
3단계면 끝나고, 아무것도 업로드되지 않아요.
움직이는 GIF, WebP, PNG나 짧은 MP4, WebM 영상을 끌어다 놓거나, 붙여 넣거나, 선택하세요. 모든 프레임을 내 기기에서 읽어요.
모든 프레임이나 일부 구간만 남기고, 몇 프레임마다 하나씩 고르고, 반복되는 프레임을 뺀 다음 열, 여백, 간격, 프레임 크기를 정하세요.
스프라이트 시트 PNG, 프레임마다 재생 시간을 담은 JSON 아틀라스, CSS 애니메이션을 저장하거나, 프레임을 PNG로 ZIP 하나에 담아 받으세요.
이 스프라이트 시트 변환기가 가장 잘하는 것
픽셀 걷기 동작부터 웹 로딩 애니메이션까지, 특히 잘하는 여섯 가지예요.
- 애니메이션
GIF, WebP, PNG, 짧은 영상
움직이는 GIF, 움직이는 WebP나 PNG, 짧은 MP4나 WebM 영상을 열어요. 프레임을 뷰어에 보이는 그대로 읽어서, 겹쳐 그려진 GIF 프레임도 온전한 한 장으로 나와요.
필요한 프레임만
구간을 정하고, 두세 프레임마다 하나씩 고르고, 반복되는 프레임을 빼요. 건너뛴 프레임의 시간은 앞 프레임에 더해져서 애니메이션 속도가 그대로예요.
어떤 엔진에도 맞는 배치
정사각형에 가깝게, 한 줄, 한 열, 원하는 열 수로 놓고 여백, 간격, 2의 거듭제곱 크기까지 정할 수 있어서, 어떤 GIF 스프라이트 시트도 내 엔진에 딱 맞아요.
JSON 아틀라스와 CSS 애니메이션
JSON 아틀라스는 Phaser와 PixiJS가 읽는 형식으로 모든 프레임의 위치와 시간을 담아요. CSS 파일은 어떤 웹 페이지에서든 시트를 재생해요.
프레임 크기와 픽셀 아트
프레임을 4분의 1이나 절반으로 줄여 시트를 작게 만들거나, 픽셀 아트를 2배나 4배로 선명하게 키워요. 시트 크기는 다운로드 전에 보여 줘요.
무료, 그리고 안전하게
모든 처리가 브라우저 안에서 이뤄져요. 업로드도, 회원가입도, 워터마크도 없고, 페이지가 한 번 열리면 오프라인에서도 계속 쓸 수 있어요.
가이드: 어떤 애니메이션이든 깔끔한 스프라이트 시트로
어떤 애니메이션이든 깔끔한 시트로 만드는 짧은 팁 다섯 가지예요.
엔진이 읽는 배치 고르기
‘한 줄’은 대부분의 애니메이션 도구와 CSS에 맞아요. ‘정사각형에 가깝게’는 큰 애니메이션도 텍스처 크기 한도 안에 담고, ‘한 열’은 시트를 위에서 아래로 읽는 엔진에 맞아요.
프레임 다듬기
‘시작 프레임’과 ‘끝 프레임’으로 한 번 반복하는 구간만 남기고, ‘건너뛰기 간격’으로 긴 애니메이션을 절반으로 줄이세요. ‘반복되는 프레임 빼기’를 켜면 일부 GIF가 같은 프레임을 이어 붙여 만든 멈춤을 덜어 내요.
여백과 간격
게임에서 프레임을 확대하거나 축소한다면 1~4px 여백을 더하세요. 가장자리가 옆 프레임 없이 깔끔하게 보여요. ‘간격’은 칸 사이에 공간을 둬서 편집하기 쉬워요.
시트 크기 확인하기
크기는 시트 아래에 표시돼요. 휴대폰용이라면 프레임 크기를 줄이거나 열을 늘려 각 변을 4,096px 안에 맞추세요. 엔진이 요구하면 ‘크기를 2의 거듭제곱으로’를 켜세요.
아틀라스나 CSS 쓰기
엔진에서 PNG를 JSON 아틀라스와 함께 불러오면 모든 프레임을 이름과 시간으로 쓸 수 있어요. 웹사이트에서는 CSS 파일을 연결하고 요소에 해당 클래스를 붙이세요.
스프라이트 시트, 이럴 때 만들어요
애니메이션을 스프라이트 시트로 바꾸는 대표적인 이유예요.
게임 개발자
움직이는 GIF와 영상 클립을 이름 붙은 프레임이 담긴 텍스처 한 장으로 게임 엔진에 가져와요.
웹 디자이너
무거운 GIF를 PNG 한 장과 짧은 CSS 애니메이션으로 바꿔요.
UI·앱 제작자
로딩 스피너와 아이콘 애니메이션을 앱과 인터페이스용 시트로 만들어요.
애니메이터·모드 제작자
애니메이션의 모든 프레임을 시트 한 장에 모아 편집하고, 공유하고, 모드를 만들어요.
GIF 스프라이트 시트 변환 자주 묻는 질문
애니메이션을 스프라이트 시트로 바꾸는 법, 파일, 개인정보에 관한 답변이에요.
GIF를 열고 프레임과 열을 고른 다음 스프라이트 시트 PNG를 받으세요. 필요하면 JSON 아틀라스나 CSS도 받을 수 있어요.
네. 모든 처리가 브라우저에서 이뤄지고, 회원가입도 워터마크도 없어요.
아니요. 애니메이션을 읽고 시트로 만드는 일은 모두 내 기기에서 이뤄지고, 서버로는 아무것도 보내지 않아요.
네. 움직이는 WebP와 PNG는 Chrome, Edge, Safari에서 열리고, 짧은 MP4나 WebM 영상은 초당 12프레임으로 읽어요.
모든 프레임의 시간이 JSON 아틀라스와 CSS에 담겨요. 프레임을 건너뛰면 그 시간이 앞 프레임에 더해져서, 한 번 반복하는 길이가 원래 GIF와 같아요.
애니메이션에는 ‘한 줄’을 가장 많이 써요. ‘정사각형에 가깝게’는 긴 애니메이션을 작게 담고, ‘한 열’은 시트를 아래로 읽는 엔진에 맞아요.
JSON 해시 형식은 Phaser, PixiJS를 비롯한 여러 엔진과 도구에서 읽어요. 각 프레임의 이름, 시트 위 위치, 시간이 담겨 있어요.
네. ‘프레임(ZIP)’은 남긴 프레임을 하나씩 PNG로 저장하고, 순서대로 이름과 번호를 붙여요.