GIF 만들기
여러 이미지 프레임을 animated GIF로 만들 수 있습니다. 스프라이트 시트로 만든 프레임을 GIF로 변환하거나, PNG/JPG/WebP 이미지를 순서대로 업로드해 GIF를 생성할 수 있습니다. 모든 처리는 가능한 한 브라우저에서 이루어집니다.
GIF애니메이션
바로가기이미지 툴킷
스프라이트 시트 만들기
여러 PNG 프레임을 하나의 spritesheet.png로 합치고 브라우저에서 애니메이션처럼 미리 확인합니다. 실제 GIF 파일은 GIF 만들기 도구에서 생성합니다.
파일은 서버로 업로드되지 않고 브라우저에서 처리됩니다.
이미지 업로드
클릭하거나 파일을 끌어오세요
대용량 이미지는 브라우저가 느려질 수 있습니다.
프레임 간격은 각 프레임 사이의 거리입니다. 게임 엔진에서 일정한 셀 크기로 자동 자르기를 할 때는 0px이 편하고, 사람이 보기 쉬운 시트를 만들 때는 2~4px 정도를 권장합니다.
추천 단위는 px입니다. 픽셀 아트와 게임 리소스는 픽셀 단위 좌표가 중요하기 때문에 %, rem 같은 단위보다 px가 가장 적합합니다.
- - 0px: 프레임을 딱 붙여야 하는 게임 엔진/자동 슬라이스용
- - 1~2px: 픽셀 아트에서 프레임이 붙어 보이는 것을 방지
- - 4px: 미리보기와 편집이 편한 일반적인 간격
- - 8px 이상: 설명용 이미지, 문서용, 사람이 보기 쉬운 스프라이트 시트
애니메이션 미리보기
행은 아래/위/왼쪽/오른쪽 같은 방향 애니메이션으로 쓸 수 있지만 실제 의미는 이미지 구성에 따라 자유롭게 정하면 됩니다.
프레임 좌표 설명
- 1.스프라이트 시트는 한 장의 이미지에서 특정 사각형 영역만 잘라 그리는 방식으로 애니메이션을 재생합니다.
- 2.frameX와 frameY는 시트 안에서 프레임이 시작되는 위치를 의미합니다.
- 3.frameWidth와 frameHeight는 한 프레임의 크기입니다.
- 4.frame spacing은 프레임 사이 간격, cell padding은 셀 안 이미지 주변 여백, outer margin은 전체 시트 바깥쪽 여백입니다.
- 5.metadata 파일은 게임 엔진이나 자체 렌더링 코드에서 프레임 좌표를 읽을 때 사용할 수 있습니다.
JavaScript 사용 예시
const image = new Image();
image.src = "spritesheet.png";
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
const frameWidth = 32;
const frameHeight = 32;
const columns = 4;
const frameSpacing = 2;
const cellPadding = 0;
const outerMargin = 0;
let frame = 0;
let last = 0;
function drawFrame(index) {
const col = index % columns;
const row = Math.floor(index / columns);
const sx = outerMargin + col * (frameWidth + cellPadding * 2 + frameSpacing) + cellPadding;
const sy = outerMargin + row * (frameHeight + cellPadding * 2 + frameSpacing) + cellPadding;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, sx, sy, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
}
function loop(time) {
if (time - last > 125) {
drawFrame(frame);
frame = (frame + 1) % 1;
last = time;
}
requestAnimationFrame(loop);
}
image.onload = () => requestAnimationFrame(loop);CSS 애니메이션 예시
CSS steps 예시는 frame spacing이 0인 단일 행 스프라이트 시트에서 가장 단순하게 동작합니다. 여러 행이나 간격이 있으면 JavaScript 방식이 더 유연합니다.
.sprite {
width: 32px;
height: 32px;
background-image: url("spritesheet.png");
animation: play 0.13s steps(1) infinite;
}
@keyframes play {
from { background-position: 0 0; }
to { background-position: -32px 0; }
}Unity 사용 팁
- - Texture Type = Sprite (2D and UI)
- - Sprite Mode = Multiple
- - Pixel art는 Filter Mode = Point
- - Compression = None 권장
- - Sprite Editor에서 Slice 사용
- - 셀 크기가 일정해야 자동 Slice가 편합니다
- - Pivot은 캐릭터 중심 또는 발밑 기준으로 맞추면 좋습니다
- - 자동 Slice에는 프레임 간격 0px이 가장 단순합니다
- - 간격을 둔 경우 Unity Sprite Editor에서 Grid By Cell Size의 offset/spacing을 맞춰야 할 수 있습니다
GIF 파일이 필요하신가요?
여러 프레임을 실제 animated GIF 파일로 저장하려면 GIF 만들기 도구를 사용해 보세요.
GIF 만들기 열기사용법
- 1.PNG 프레임 파일을 업로드합니다.
- 2.파일명 오름차순으로 정렬됩니다.
- 3.열 수, 셀 크기, 프레임 간격, 셀 내부 여백, 바깥쪽 여백, 배경을 설정합니다.
- 4.스프라이트 시트와 메타데이터를 다운로드합니다.
- 5.애니메이션 미리보기로 FPS, 프레임 범위, 행 선택, 확대 배율을 확인합니다.
FAQ
스프라이트 시트는 어디에 쓰나요?
게임과 웹에서 한 장의 이미지 중 프레임 사각형만 잘라 그려 애니메이션을 재생할 때 사용합니다.
프레임 너비와 높이는 무엇인가요?
애니메이션 한 프레임의 크기입니다.
프레임 간격은 몇 px가 적당한가요?
자동 슬라이스에는 0px이 단순하고, 사람이 보기 좋게 정리하려면 2~4px 정도가 좋습니다. 문서용은 8px 이상도 사용할 수 있습니다.
셀 내부 여백과 프레임 간격은 무엇이 다른가요?
셀 내부 여백은 이미지 주변 내부 공간이고, 프레임 간격은 셀과 셀 사이의 거리입니다.
FPS는 무엇인가요?
초당 표시되는 프레임 수로 미리보기 재생 속도를 조절합니다.
metadata JSON은 어디에 쓰나요?
게임 엔진이나 canvas 렌더링 코드에서 정확한 프레임 좌표를 읽을 때 사용합니다.
스프라이트 시트와 GIF는 무엇이 다른가요?
스프라이트 시트는 프레임 애니메이션에 쓰는 원본 이미지이고, GIF는 재생 가능한 애니메이션 파일입니다.