스프라이트 시트 좌표 계산기
프레임 크기·개수·열 수를 넣으면 스프라이트 시트 전체 크기와 각 프레임의 CSS background-position 좌표를 계산합니다.
px
px
정사각형에 가깝게 하려면 3열 추천
px
px
전체 시트 크기
256 × 128px
4열 × 2행
열 수 × 행 수4 × 2
총 칸 수(빈 칸 포함)8
빈 칸없음
프레임별 좌표
| # | 행,열 | x, y | background-position |
|---|---|---|---|
| 0 | 0, 0 | 0, 0 | -0px -0px |
| 1 | 0, 1 | 64, 0 | -64px -0px |
| 2 | 0, 2 | 128, 0 | -128px -0px |
| 3 | 0, 3 | 192, 0 | -192px -0px |
| 4 | 1, 0 | 0, 64 | -0px -64px |
| 5 | 1, 1 | 64, 64 | -64px -64px |
| 6 | 1, 2 | 128, 64 | -128px -64px |
| 7 | 1, 3 | 192, 64 | -192px -64px |
.sprite { width: 64px; height: 64px; background-image: url(sheet.png); background-position: -0px -0px; }background-position은 이미지를 반대 방향으로 밀어야 원하는 프레임이 보여서 좌표에 마이너스를 붙입니다. 프레임을 순서대로 보여주는 애니메이션은 background-position을 프레임별 값으로 스텝마다 바꾸거나, CSS steps() 이징으로 구현할 수 있습니다.
사용 방법
- 1프레임 하나의 너비·높이와 전체 프레임 개수를 입력합니다.
- 2한 줄에 놓을 개수(열 수)를 정하면 전체 시트 크기가 자동으로 계산됩니다.
- 3프레임별 좌표와 그대로 쓸 수 있는 background-position 값을 확인합니다.
자주 묻는 질문
아니요. 이미지를 합치는 작업은 하지 않고, 프레임 크기와 배치 규칙(열 수)만으로 전체 시트 크기와 각 프레임의 좌표를 계산합니다. 실제 이미지는 별도 도구(그래픽 편집기·번들러 플러그인 등)로 합쳐야 합니다.
background-position은 배경 이미지를 밀어내는 방향을 정하는 값입니다. 원하는 프레임을 보이는 자리로 가져오려면 이미지 전체를 그 프레임의 좌표만큼 반대 방향으로 밀어야 하므로, 프레임의 x·y 좌표에 마이너스를 붙인 값을 씁니다.
마지막 줄에 빈 칸이 남지만 시트 크기는 올림한 행 수를 기준으로 계산됩니다. 예를 들어 5개를 3열로 놓으면 2행이 되고, 마지막 줄의 1칸은 비어 있는 채로 시트 크기에 포함됩니다.
아니요. 모든 계산은 브라우저에서 이루어지며 입력값은 서버로 전송되지 않습니다.
알아두면 좋은 점
- 프레임 사이 간격(gap)이나 시트 바깥 여백(margin)을 두면 실제 배치 도구(TexturePacker 등)의 출력과 더 비슷해집니다. 기본값은 0입니다.
함께 보면 좋은 도구
마지막 검증: 2026년 9월 8일 · 결과는 참고용 추정치입니다.