시트를 나누고, 프레임을 확인하세요
게임용 정지 스프라이트 시트를 분할해 애니메이션을 확인하고, 빈 셀과 픽셀 경계를 측정하는 도구입니다. 원본 파일을 수정하지 않고 브라우저에서 처리합니다.
처음이라면 ‘합성 예제 열기’
직접 만든 4×1 예제가 열립니다. 4번째 프레임은 비어 있고, 3번째 프레임에는 셀 오른쪽 경계에 닿는 픽셀이 있습니다. 검사는 이러한 측정 사실을 보여 줍니다.
빠르게 시작하기
- 이미지 선택 또는 드롭. 정지 PNG, JPEG, WebP 파일 하나를 불러옵니다. 입력 이미지와 파일명은 이미지 처리 코드에서 서버로 전송하지 않습니다.
- 분할 방식 선택. 행·열을 알고 있으면 ‘행 · 열’, 프레임의 픽셀 크기를 알고 있으면 ‘셀 크기’를 사용합니다. 바깥 여백과 셀 사이 간격도 입력합니다.
- 그리드 적용 · 검사. 설정을 바꾼 뒤 다시 적용합니다. 정수 픽셀로 나누어지지 않는 행·열 설정은 오류를 표시합니다.
- 프레임 선택과 재생. 셀이나 프레임 버튼을 선택합니다. FPS는 1–60, 범위는 1부터 시작하는 포함 범위입니다. 수동 프레임 선택은 재생을 멈춥니다.
- 필요한 결과 저장. 현재 프레임을 PNG로, 전체 시트의 측정 결과를 JSON으로 다운로드합니다. 재생 범위가 JSON의 검사 범위를 줄이지는 않습니다.
Tab으로 입력·버튼 사이를 이동하고 Enter 또는 Space로 버튼을 실행할 수 있습니다. 프레임 버튼은 시트의 마우스 선택과 같은 기능을 제공합니다. 배경과 줌은 표시만 바꿉니다.
행·열, 여백, 간격의 관계
바깥 여백은 양쪽에 같은 값이 적용됩니다. 가로 여백 2는 왼쪽과 오른쪽에서 각각 2 px를 제외합니다. 간격은 셀 사이에만 적용됩니다.
예를 들어 가로 38 px 이미지에 2열, 가로 바깥 여백 2 px, 간격 2 px를 지정하면 셀 너비는 (38 − 2×2 − 2) ÷ 2 = 16 px입니다. 세로도 같은 방식으로 계산합니다.
행·열 모드는 나머지를 반올림하지 않습니다. 33 px를 여백·간격 없이 2열로 나누면 16.5 px이므로 오류입니다. 셀 크기 모드에서 16 px를 지정하면 2열을 만들고, 남은 오른쪽 1 px를 별도로 표시합니다. 남은 픽셀은 PNG 프레임에 포함되지 않습니다.
프레임 번호는 왼쪽에서 오른쪽으로 진행한 다음 다음 행으로 이동합니다. 첫 프레임 번호는 1입니다.
검사 결과를 읽는 법
| 항목 | 의미 |
|---|---|
| 판정 알파 | 알파가 설정값 이상인 픽셀을 콘텐츠로 셉니다. 기본값 1은 완전히 투명한 픽셀만 제외합니다. |
| 빈 프레임 | 판정값 이상의 픽셀이 없는 셀입니다. 판정값을 높이면 옅은 픽셀만 있는 셀도 빈 프레임으로 측정될 수 있습니다. |
| 콘텐츠 경계 | 판정 픽셀을 모두 감싸는 사각형의 셀 안 좌표와 크기입니다. |
| 판정 밖 여백 | 셀의 좌·상·우·하 가장자리부터 콘텐츠 경계까지의 픽셀 거리입니다. 빈 셀에는 경계가 없어 여백을 ‘—’로 표시합니다. |
| 셀 경계 접촉 | 판정 픽셀이 셀의 가장자리 행 또는 열에 있습니다. 짤림의 확정 판정이 아닙니다. |
| 완전 투명·불투명 | 각각 알파가 0인 픽셀과 255인 픽셀 수입니다. ‘전체 불투명’은 셀의 모든 픽셀이 255인 경우입니다. |
경계 접촉이 있으면 원본과 여백·간격 설정을 함께 살펴보세요. 배경이 있는 JPEG나 의도적으로 셀을 채우는 그림에서도 접촉이 측정됩니다. 실제로 그림이 잘렸는지, 게임 엔진 설정에 맞는지는 원본과 사용하는 엔진에서 확인해야 합니다.
지원 형식과 안전 제한
| 지원 | 정지 PNG · JPEG · WebP |
|---|---|
| 미지원 | GIF · SVG · APNG · 애니메이션 WebP |
| 파일 크기 | 최대 12 MiB (12,582,912 바이트) |
| 이미지 크기 | 한 변 최대 8,192 px, 전체 최대 16,777,216 픽셀 |
| 프레임 | 최대 1,024개. 목록은 페이지당 64개를 표시합니다. |
헤더에서 크기를 확인한 뒤 디코딩한 이미지 크기를 다시 검사합니다. 손상된 이미지나 들어가지 않는 셀 설정은 오류를 표시합니다. 제한 안에서도 기기 메모리와 브라우저 성능에 따라 처리 속도가 다릅니다.
자주 묻는 질문
원본 이미지가 바뀌나요?
원본 파일을 읽어서 브라우저 메모리에 그립니다. 원본에 덮어쓰지 않고 PNG와 JSON을 새 파일로 다운로드합니다. 새로고침이나 초기화로 작업을 지울 수 있습니다.
체커 배경이나 줌이 PNG에 들어가나요?
들어가지 않습니다. PNG는 선택 셀의 원본 디코딩 픽셀을 셀 크기 그대로 내보냅니다. 판정 알파도 픽셀을 지우거나 바꾸지 않습니다. 미리보기의 배경과 크기는 표시용입니다.
JPEG는 왜 빈 프레임이나 투명 여백이 안 나오나요?
JPEG에는 알파 투명도가 없습니다. 배경도 불투명 픽셀이므로 셀 전체가 콘텐츠와 경계 접촉으로 측정될 수 있습니다. 투명도를 검사하려면 알파가 있는 정지 PNG 또는 WebP를 사용하세요.
알파를 높였더니 빈 프레임이 늘었습니다.
예를 들어 알파 80인 픽셀은 기본 판정값 1에서는 콘텐츠지만, 판정값 128에서는 제외됩니다. 이 변화는 측정 결과에만 적용되며 내보내는 PNG에는 원래 알파가 유지됩니다.
셀 경계 접촉은 곧 잘린 그림인가요?
아닙니다. 가장자리에 픽셀이 있다는 사실만으로 의도된 접촉과 잘린 그림을 구별할 수 없습니다. 원본 그림, 셀 크기, 여백, 간격을 함께 확인하세요.
애니메이션 순서와 재생 범위를 바꿀 수 있나요?
순서는 행 우선으로 고정됩니다. 시작·끝 프레임과 FPS를 바꿀 수 있고, 루프를 끄면 끝 프레임에서 멈춥니다. 프레임 선택과 이전·다음은 미리보기를 위한 것으로 시트의 픽셀이나 JSON의 전체 프레임 순서를 바꾸지 않습니다.
PNG와 JSON에는 어떤 정보가 남나요?
PNG는 셀 크기의 새 이미지이며 원본 메타데이터를 복사하지 않습니다. JSON에는 원본 파일명·크기·SHA-256, 분할 설정, 각 셀 좌표와 측정값이 포함됩니다. JSON을 다른 사람에게 공유하기 전 파일명과 해시도 포함된다는 점을 확인하세요.
같은 파일을 다시 선택하거나 다른 파일로 바꿔도 되나요?
됩니다. 새 파일을 선택하면 이전 결과와 재생을 초기화합니다. 설정을 바꾼 경우에는 다시 그리드를 적용해야 다운로드와 재생을 사용할 수 있습니다.
이미지가 어디로 전송되나요? 광고가 있나요?
이미지 처리 코드에는 업로드·외부 이미지 전송·외부 분석 SDK가 없습니다. 현재 외부 광고 JavaScript와 노출 광고는 없습니다. 공개 게시자 메타 태그와 ads.txt는 AdSense 신청·소유권 확인에 사용됩니다. 실제 광고 노출과 심사 결과는 별도 확인이 필요합니다. 호스팅 서비스의 운영 정보는 별도로 처리될 수 있습니다. 이미지 처리와 호스팅 정보의 차이는 개인정보 처리 안내에서 설명합니다.