이미지 슬라이서 사용법 가이드

이미지 슬라이서는 한 장의 이미지에서 캐릭터 동작 프레임, 아이콘, 타일처럼 여러 객체를 낱장으로 잘라내는 도구입니다. 스마트·자동·그리드 세 가지 모드를 한 화면에서 오가며 쓸 수 있고, 어느 모드를 골라도 이미지를 다시 올릴 필요가 없습니다. 이 가이드에서는 세 모드의 사용 순서와 편집 기능, 실패하기 쉬운 케이스를 모드별로 정리합니다.

3가지 모드 한눈에 보기

  • 스마트 모드: 배경과 객체를 자동으로 검출해 그룹으로 묶고, 그룹 분리·이동·여백 조정·지우개까지 세밀하게 편집합니다. 감지가 살짝 어긋나 결과를 직접 다듬어야 할 때 적합합니다.
  • 자동 모드: 스마트 모드와 같은 감지 엔진을 쓰지만 그룹 편집 없이 감지된 프레임을 곧바로 낱장으로 뽑아 압축 파일로 저장합니다. 다듬을 곳이 없는 반듯한 시트를 빠르게 처리할 때 적합합니다.
  • 그리드 모드: 픽셀 검출 없이 칸 크기(또는 행·열 수)·간격·여백을 직접 입력해 고정된 격자로 자릅니다. 칸이 서로 맞붙어 있어 스마트·자동 모드가 하나로 뭉쳐 감지하는 타일셋에 적합합니다.

세 모드는 모두 업로드한 이미지를 공유하므로, 모드를 바꿔도 다시 올릴 필요가 없습니다. 어떤 모드가 맞을지 애매하면 스마트 모드로 먼저 열어 감지 결과를 확인한 뒤, 필요에 따라 자동·그리드 모드로 옮겨가도 됩니다(자세한 기준은 이 가이드 끝의 “모드 선택 팁” 참고).

배경을 판정하는 원리 — 테두리 표본과 색 거리

스마트·자동 모드는 사람이 미리 배경색을 알려 주지 않아도 물체를 찾아냅니다. 이 절에서는 그 감지가 실제로 어떤 규칙으로 동작하는지 다룹니다(그리드 모드는 픽셀을 전혀 읽지 않고 좌표만 계산하므로 이 절과 무관합니다). 판정은 두 단계입니다.

1단계는 반투명 비율 게이트입니다. 알파값이 250 미만인 픽셀을 “반투명”으로 세어, 그 비율이 전체 픽셀의 0.1% 이상이면 테두리 색 분석을 아예 건너뛰고 곧바로 “투명 배경”으로 확정합니다. 즉 이미지에 의미 있는 양의 반투명 영역이 조금이라도 있으면, 색을 볼 필요 없이 알파 채널이 우선합니다.

반투명 비율이 낮으면 2단계로 넘어갑니다. 이미지 네 변의 1픽셀 폭 테두리만 표본으로 모으고(안쪽 영역은 전혀 보지 않습니다), R·G·B 채널을 각각 따로 정렬해 채널별 중앙값(median)을 대표 배경색으로 삼습니다. 그다음 테두리 표본들이 이 대표색에서 얼마나 흩어져 있는지를 재는데, 계산 자체는 각 표본과 중앙값 사이 색 거리를 제곱해 평균한 값(평균제곱거리, 코드에서는 variance라 불립니다)을 48²(=2304)과 비교합니다. 즉 중앙값으로부터의 RMS 색 거리(평균제곱거리의 제곱근)가 48을 넘으면 배경을 하나의 색으로 특정할 수 없다고 보고 “모호(ambiguous)”로 판정해 컴포넌트 탐지 자체를 건너뛰고 빈 결과를 돌려줍니다 — 색상 선택기가 뜨는 순간이 바로 이때입니다. 코드 주석은 이 상수 48을 “테두리 표본 색 표준편차 상한”이라 적어 두었지만, 엄밀히는 통계학의 분산·표준편차가 아니라 중앙값으로부터의 RMS 색 거리에 대한 상한입니다.

배경이 특정되면 전경 마스크를 만듭니다. 투명 배경 모드는 알파값이 128 이상인 픽셀만 전경으로 표시합니다. 단색 배경 모드는 조건이 하나 더 붙어, 알파값이 128 이상이면서 동시에 대표 배경색과의 색 거리가 24보다 커야 전경으로 표시됩니다. 즉 단색 배경 판정에서도 알파 임계값을 함께 검사하므로, 완전히 불투명하지 않은 픽셀(PNG 안티앨리어싱 가장자리 등)은 단색 배경에서도 배경 취급될 수 있습니다.

전경을 프레임으로 묶는 원리 — 8-연결과 4-연결의 짝, Jordan 곡선

전경 마스크가 만들어지면 픽셀 덩어리를 하나의 프레임(컴포넌트)으로 묶는 라벨링 단계로 넘어갑니다. 이 라벨링은 각 픽셀의 상하좌우와 대각선까지 총 8방향 이웃을 연결로 간주하는 8-연결방식입니다. 재귀 함수로 흔히 구현하는 flood fill 대신 명시적 스택을 쓰는 반복문으로 구현돼 있는데, 큰 이미지에서 재귀 호출이 콜스택을 소진하는 문제(재귀 깊이 폭주)를 피하기 위한 선택입니다. 이 8-연결 정의 때문에 두 객체가 변이 아니라 모서리(대각선)로만 맞닿아도 하나의 그룹으로 합쳐집니다 — 앞서 살펴본 “두 객체가 픽셀로 맞닿아 있으면 하나의 그룹으로 감지된다”는 현상의 실제 원인이 이것입니다.

단색 배경 모드에는 후처리가 하나 더 있습니다. 배경색과 우연히 같은 색을 가진 전경(흰 배경 위의 흰 신발 등)은 색 거리 기준만으로는 배경으로 오분류되어, 추출한 프레임 안쪽에 투명 구멍이 뚫릴 수 있습니다. 이를 막기 위해 이미지 테두리에서부터 “배경만 밟아서” 도달할 수 있는 픽셀만 진짜 배경으로 인정하고, 테두리에서 도달할 수 없는 나머지 배경 픽셀(전경에 완전히 둘러싸인 구멍)은 전경으로 되메웁니다. 흥미로운 지점은 이 되메우기가 8-연결이 아니라 상하좌우 4방향만 보는4-연결이라는 것입니다. 도구 코드의 주석은 그 이유를 직접 밝힙니다: 전경 라벨링이 8-연결이므로 배경 채우기는 4-연결이어야 디지털 위상수학의 Jordan 곡선 정합(8-전경 ↔ 4-배경)이 성립해, 1픽셀 두께의 대각선 전경선도 배경을 확실히 가릅니다. 두 연결성에 같은 규칙을 쓰면 이 위상학적 보장이 깨집니다 — 둘 다 8-연결이면 배경도 대각선 틈으로 이어져 전경선을 뚫고 새어 나가고, 둘 다 4-연결이면 대각선 전경선 자체가 끊어진 것으로 취급돼 배경을 가르는 장벽이 되지 못합니다. 이는 로젠펠트(Rosenfeld)의 디지털 Jordan 곡선 정리가 정식화한, 전경과 배경에 서로 다른 연결성(4와 8)을 짝지어야 한다는 결론과 정확히 일치하는 설계입니다.

같은 8-연결 개념은 추출 단계에서 한 번 더 등장합니다. 그룹 밖 픽셀을 지우는 “배경 자동 투명화”는 살릴 픽셀 주위 8-이웃 중 하나라도 살릴 대상이면 함께 유지하는 1픽셀 팽창을 적용하는데, 도구 주석은 그 목적을 “안티앨리어싱 halo 보존”이라고 밝힙니다. 안티앨리어싱 경계의 반투명 혼합색 픽셀이 이진 판정에서 잘려나가 얼룩(halo)처럼 보이는 문제를 줄이려는 것으로 보입니다.

잡티를 걸러내는 기준과 감지의 정직한 한계

컴포넌트 하나하나에는 “잡티(노이즈)” 여부가 함께 매겨집니다. 기준 면적은 절대값 4픽셀과 전체 픽셀 수의 0.001% 중 더 큰 쪽입니다 — 예를 들어 1024×1024(약 105만 픽셀) 이미지라면 0.001%가 약 10.5픽셀이라 이쪽이 채택되어 실질 기준은 10픽셀이 됩니다. 작은 이미지에서는 절대값 4픽셀이, 큰 이미지에서는 비율 기준이 하한으로 작동하는 구조입니다. 이 판정 자체는 라벨만 붙일 뿐 컴포넌트를 목록에서 지우지는 않으며, 그룹 후보를 추리는 단계(스마트 모드의 그룹 제안, 자동 모드의 프레임 목록)에서 잡티로 표시된 조각을 실제로 제외합니다. 자동 모드는 면적 기준과 별개로 가로나 세로 중 어느 한 쪽이라도 3픽셀 미만이면 제외하는 최소 크기 필터를 하나 더 둡니다.

이 모든 과정은 통계적 학습이나 딥러닝 세그멘테이션이 아니라, 테두리 색 표본·색 거리·연결 요소를 조합한 규칙 기반 휴리스틱입니다. 그래서 완벽한 분할을 보장하지 않습니다: 배경이 그라데이션이거나 사진처럼 색이 고르지 않으면 대표색 하나로 요약할 수 없어 “모호” 판정과 함께 감지 자체가 중단되고, 손실 압축(JPEG)의 경계 아티팩트는 색 거리 판정을 흔들어 경계에 얇은 테두리가 섞여 들어올 수 있습니다. 도구가 이런 경우를 항상 스스로 고칠 수는 없으므로, 색상 선택기로 배경색을 직접 지정하거나 조각 편집·지우개로 결과를 다듬는 수동 보정 경로가 함께 제공되는 것입니다.

스마트 모드

스마트 모드는 한 장의 이미지에서 객체를 자동 검출해 개별 프레임으로 나누는 과정과, 자동 감지가 빗나갔을 때 그룹을 다듬는 순서, 배경색 재선택 요령, 그리고 투명 PNG로 추출하는 방법까지 다루는 가장 정밀한 모드입니다.

스마트 모드 사용 목적

캐릭터의 걷기·공격 동작이 한 장에 그려진 스프라이트 시트, 아이콘 여러 개가 모여 있는 아틀라스 이미지, 여러 컷이 나란히 배치된 일러스트처럼 “한 장 안의 여러 객체”를 각각의 파일로 나눠야 할 때 사용합니다. 격자 간격이 일정하지 않거나 객체마다 크기가 달라도 픽셀이 이어져 있는지를 기준으로 경계를 찾기 때문에, 이미지 편집기에서 선택 영역을 하나씩 잡아 잘라내는 수작업을 반복할 필요가 없습니다. 게임 리소스 준비, 아이콘 세트 분리, 스캔 자료 정리에 특히 유용합니다. 자동 감지만으로 부족한 스프라이트시트 자르기는 조각 편집 모드와 지우개로 프레임 단위까지 이어서 다듬을 수 있습니다.

스마트 모드 사용 순서

  1. 투명 또는 단색 배경의 이미지 한 장(PNG·JPEG·WebP)을 드래그하거나 선택해 업로드합니다.
  2. 배경이 자동으로 판별되면 곧바로 객체 그룹이 감지되어 미리보기와 그룹 카드가 표시됩니다. 배경색이 모호하면 색상 선택기가 나타나며, 실제 배경색을 직접 고르면 그 색을 기준으로 다시 분석합니다.
  3. 미리보기와 잘라내기 갤러리에서 감지된 프레임 경계가 의도와 맞는지 확인합니다.
  4. 필요하면 그룹 편집기에서 조각을 다른 그룹으로 옮기거나 새 그룹으로 분리하고, 그룹별 여백(패딩)을 조정합니다. 모든 편집은 실행 취소·다시 실행이 가능합니다.
  5. “배경 자동 투명화” 체크박스로 그룹 밖 픽셀 제거 여부를 정합니다(기본 켜짐).
  6. 그룹 카드의 체크박스로 일부만 선택하면 버튼이 “선택 프레임 다운로드 (N)”으로 바뀌어 고른 프레임만 저장됩니다. 아무것도 선택하지 않으면 전체가 대상입니다. “프레임 다운로드”를 누르면 프레임이 1개일 때는 PNG 한 장, 여러 개일 때는 ZIP으로 저장되고, “스프라이트 편집기로 전달”을 누르면 다운로드 없이 패킹 도구로 바로 이어집니다.

편집 기능 설명

  • 그룹 분리: 하나로 묶인 감지 결과에서 특정 조각을 새 그룹으로 떼어냅니다. 서로 닿아 있어 한 덩어리로 감지된 두 객체를 나눌 때 사용합니다.
  • 그룹 이동: 조각을 다른 그룹으로 옮겨 합칩니다. 모자나 무기처럼 본체와 떨어져 그려진 부속을 같은 프레임으로 묶을 때 유용합니다.
  • 여백(패딩): 그룹별로 프레임 가장자리의 여유 픽셀을 조정합니다. 원본 범위를 벗어나는 여백은 이미지 경계에서 잘립니다.
  • 실행 취소·다시 실행: 그룹 편집은 히스토리로 관리되어 잘못 나눴어도 언제든 되돌릴 수 있습니다.
  • 배경 자동 투명화: 프레임 사각형 안에 함께 들어온 배경 잔존 픽셀과 이웃 객체 조각을 투명 처리합니다. 끄면 사각형 영역을 있는 그대로 잘라냅니다.

조각 편집 모드로 스프라이트 프레임 편집하기

그룹 단위 편집으로 부족하면 “조각 편집” 버튼으로 조각 편집 모드를 켭니다. 켜지면 그룹 체크박스 대신 조각(감지된 낱개 픽셀 덩어리) 썸네일이 선택 버튼으로 바뀌어, 그룹 경계와 상관없이 여러 조각을 한 번에 고를 수 있습니다. 선택한 조각은 작업 바의 “…로 이동” 메뉴로 다른 그룹에 합치거나 “새 그룹으로 분리”로 독립시킬 수 있고, 조각 썸네일을 다른 그룹 카드나 “+ 새 그룹” 영역으로 직접 끌어다 놓아도(드래그 앤 드롭) 같은 결과를 얻습니다. 모드를 끄면 선택은 초기화되고 그룹 단위 화면으로 돌아갑니다.

모드가 꺼진 일반 상태에서도 조각 썸네일을 클릭하면 같은 동작(새 그룹으로 분리·다른 그룹으로 이동)을 제공하는 메뉴가 바로 뜹니다. 조각 하나만 옮길 때는 모드를 켤 필요 없이 이 메뉴만으로 충분합니다.

전체 선택·해제와 그룹 복제

그룹이 많을 때는 “전체 선택”으로 모든 그룹을 한 번에 고르고, “전체 해제”로 선택을 비울 수 있습니다(선택된 그룹이 없으면 이 버튼은 비활성화됩니다). 이 선택 상태는 그룹 병합과 프레임 다운로드가 함께 사용합니다. 그룹 카드의 “복제” 버튼을 누르면 같은 영역·여백·지우개 편집을 그대로 가진 새 그룹이 하나 더 생겨, 원본은 그대로 둔 채 사본에서 다른 편집을 시도해 볼 수 있습니다.

지우개로 프레임 다듬기

그룹 카드의 “지우개” 버튼을 누르면 해당 프레임만 확대해서 다듬는 편집창이 열립니다. “지우개”·“복원” 두 모드를 오가며 브러시로 픽셀을 지우거나 되살릴 수 있고, 브러시 크기는 슬라이더나 단축키([ ] 키)로 조절합니다. 확대·축소는 +/− 버튼이나 마우스 휠로, 화면 이동은 Space 키를 누른 채 드래그로 합니다. “원본 비교” 체크박스를 켜면 편집 전 이미지와 바로 비교할 수 있고, 지우개 작업 자체도 별도의 실행 취소·다시 실행과 전체를 되돌리는 “초기화”를 지원합니다. “적용”을 눌러야 편집이 그룹에 반영되며, 취소하면 버려집니다 — 업로드한 원본 이미지는 어느 쪽이든 바뀌지 않고, 편집은 추출 시점에만 반영됩니다.

스마트 모드 실패·주의 케이스

  • 원본에서 이미 잘려 있는 픽셀은 복원되지 않습니다. 추출은 원본 크기 그대로의 1:1 크롭이며 확대나 보간을 하지 않습니다.
  • 배경색을 자동으로 정하지 못하면(그라데이션 배경 등) 색상 선택 안내가 표시됩니다. 실제 배경에 가장 가까운 색을 고르면 되지만, 사진처럼 배경이 균일하지 않은 이미지는 분리 품질이 떨어질 수 있습니다.
  • JPEG처럼 손실 압축된 이미지는 객체 경계에 압축 노이즈가 남아 얇은 테두리가 프레임에 섞일 수 있습니다. 배경 자동 투명화를 켜두면 대부분 정리되지만, 가능하다면 PNG 원본을 사용하는 편이 좋습니다.
  • 두 객체가 픽셀로 맞닿아 있으면 하나의 그룹으로 감지됩니다. 이때는 그룹 분리 기능으로 나누거나, 원본에서 간격을 벌린 뒤 다시 업로드하세요.
  • 이미지가 아닌 파일이나 손상된 파일을 업로드하면 오류 안내와 함께 도구가 초기 상태로 돌아갑니다.
  • 그룹을 복제하면 처음에는 원본과 같은 영역을 담습니다. 그대로 두면 두 그룹 모두 같은 이미지를 추출하므로, 지우개나 조각 이동으로 한쪽을 다르게 편집한 뒤 다운로드하세요.

스마트 모드 예시 시나리오

  • 걷기 동작 6프레임 시트 → 6개 투명 PNG: 시트를 업로드하면 6개 그룹이 자동 감지되고, “프레임 다운로드” 한 번으로 프레임별 PNG가 ZIP으로 묶여 저장됩니다.
  • 흰 배경 아이콘 모음 → 개별 투명 아이콘: 흰 배경이 단색으로 판별되면 각 아이콘이 그룹으로 나뉘고, 배경 자동 투명화가 흰 픽셀을 제거해 투명 PNG 아이콘을 얻습니다.
  • 추출 후 규격 시트로 재구성: 간격이 들쭉날쭉한 시트를 나눈 뒤 “스프라이트 편집기로 전달”을 누르면, 추출된 프레임이 재업로드 없이 패킹 도구로 넘어가 일정한 규격의 새 시트로 만들 수 있습니다.
  • 맞닿은 이펙트 스프라이트 → 조각 편집으로 분리 후 지우개 마무리: 두 이펙트가 픽셀로 이어져 하나의 그룹으로 감지되면 조각 편집 모드에서 해당 조각들을 새 그룹으로 분리하고, 지우개로 남은 배경·이웃 조각의 흔적을 브러시로 지워 깨끗한 프레임을 얻습니다.

자동 모드

자동 모드는 스프라이트시트를 올린 뒤 감지된 조각을 따로 손보지 않고 곧장 낱장으로 뽑아내는 모드입니다. 프레임 사이에 틈이 있는 시트와 칸이 맞붙어 있는 시트를 미리 눈으로 구분하는 법, 배경 투명화 스위치를 언제 켜고 꺼야 결과가 깔끔한지 판단하는 기준, 그리고 감지 결과를 손질해야 한다면 스마트 모드로, 격자가 촘촘히 맞붙은 시트라면 그리드 모드로 바꿔야 하는 이유까지 아래에서 살펴봅니다.

자동 모드 사용 목적

게임이나 앱 리소스를 다루다 보면 배포하려고 한 장에 합쳐 둔 시트를 나중에 다시 낱장으로 풀어야 하는 상황이 자주 생깁니다. 프레임을 일일이 캡처하거나 좌표를 재는 수고 대신, 자동 모드가 바탕과 그림을 갈라 조각을 알아서 집어내고 원본 해상도를 유지한 채 오려 냅니다. 잘린 프레임에는 위→아래, 같은 줄에서는 왼쪽→오른쪽 차례로 번호가 붙어, 시트에서 눈으로 보던 배열과 저장된 파일 이름이 그대로 맞물립니다. 밑바탕의 감지 로직은 스마트 모드와 같지만, 자동 모드는 그룹 카드로 펼쳐 손질하는 과정을 생략하고 찾아낸 프레임을 곧바로 압축 파일로 내주는 대량 처리 쪽에 무게를 둡니다.

자동 모드 사용 순서

  1. 슬라이스할 시트 이미지를 끌어다 놓거나 눌러서 불러옵니다(스마트·그리드 모드와 업로드를 공유합니다).
  2. 화면에 뜬 감지 프레임 수가 예상과 맞는지 살핍니다.
  3. “배경 자동 투명화(프레임 밖 픽셀 제거)” 체크박스를 상황에 맞춰 켜거나 끕니다.
  4. “전체 프레임 추출 (ZIP)” 버튼으로 감지된 프레임을 한 번에 압축 파일로 저장합니다.
  5. 낱장을 다시 한 장으로 엮고 싶다면 “스프라이트 패킹으로 전달” 버튼을 눌러 다운로드 없이 패킹 도구로 바로 넘깁니다.

잘 감지되는 시트, 안 되는 시트

  • 프레임끼리 사이에 투명하거나 단색인 여백이 깔린 시트는 경계가 뚜렷해 잘 잡힙니다.
  • 칸이 빈틈없이 맞붙은 규칙적 격자 시트는 픽셀이 연결돼 한 덩이로 뭉칩니다 — 이럴 땐 그리드 모드 쪽이 낫습니다.
  • 그라데이션이나 사진처럼 바탕색이 들쭉날쭉하면 배경을 자동으로 가려내지 못할 수 있습니다.

자동 모드 주의

  • 바탕을 자동으로 못 가려내면 프레임도 잡히지 않습니다. 그럴 땐 스마트 모드로 바꿔 실제 배경색을 손수 지정한 뒤 다시 돌려 보세요.
  • 계단 현상이 심한 테두리나 반투명 그림자는 프레임 경계 안으로 딸려 들어올 수 있습니다.
  • 너무 작은 점이나 가느다란 선은 잡티로 보고 걸러 냅니다 — 빠진 조각이 있다면 원본에서 더 키우거나 스마트 모드로 촘촘히 손보세요.

그리드 모드

체스판처럼 똑같은 크기의 칸이 반복해서 이어진 그림 — 타일맵 배경, 아이콘을 모아 둔 시트, 걷기 모션 프레임을 격자에 정렬한 자료 — 를 낱장으로 뜯어내야 할 때가 있습니다. 그리드 모드는 픽셀을 검출하지 않고 입력한 칸 크기·간격·여백으로 이런 반복 칸의 위치를 계산해 한 칸씩 오려 내고, 잘라 낸 조각을 압축 파일 하나로 묶어 줍니다.

그리드 모드 사용 목적

게임 리소스 파이프라인에서는 배포용으로 한 장에 모아 둔 그림을 다시 낱개로 되돌려야 하는 순간이 생깁니다. 특정 칸 하나만 다시 그리거나, 아틀라스를 새로 패킹하기 전에 원재료 조각을 미리 확보하거나, 문서나 스토어 페이지에 아이콘 한 개만 첨부해야 하는 경우가 대표적입니다. 반복 무늬가 몇 픽셀 간격으로 놓여 있는지만 알려 주면 나머지 계산은 그리드 모드가 맡아, 모든 칸을 같은 경계로 잘라 냅니다.

두 가지 지정 방식

  • 고정 크기(칸 크기 직접 입력) — 낱장 하나의 너비·높이를 픽셀 단위로 알고 있을 때 고릅니다. 그림 폭에 몇 칸이 들어가는지는 자동으로 셈하며, 끝자락에 온전히 채워지지 않은 조각은 결과에서 빠집니다.
  • 행·열 개수 — 몇 줄 몇 칸으로 나뉘는지는 알아도 낱장 크기를 모를 때 씁니다. 넣은 행·열 수만큼 남는 폭과 높이를 고르게 나눠 칸 크기를 거꾸로 셈합니다.

간격 · 여백 · 오프셋

  • 간격(spacing)은 옆 칸까지 벌어진 픽셀 폭입니다. 경계가 서로 겹치지 않게 그린 자료에서 이 값을 실제와 다르게 넣으면 칸이 밀려나 어긋난 위치에서 잘립니다.
  • 여백(margin)은 그림 테두리부터 첫 칸까지 남겨 둔 공백입니다. 첫 칸이 시작하는 지점을 정합니다.
  • 오프셋 X·Y는 첫 칸의 위치를 가로·세로로 한 번 더 밀어 줍니다. 여백을 적용한 다음 덧붙는 값이라, 규칙이 딱 맞아떨어지지 않는 자료를 손끝으로 맞출 때 유용합니다.

그리드 모드 사용 순서

  1. 타일 시트 이미지를 끌어다 놓거나 클릭해서 불러옵니다(스마트·자동 모드와 업로드를 공유합니다).
  2. “고정 크기”와 “행·열 개수” 가운데 이번 자료에 맞는 쪽을 고릅니다.
  3. 간격·여백·오프셋 값을 바꿔 가며 오버레이 격자선이 실제 칸 테두리와 겹치는지 눈으로 맞춰 봅니다.
  4. 화면에 표시된 결과 칸 개수가 예상한 숫자와 같은지 확인합니다.
  5. “타일 ZIP 다운로드” 버튼을 눌러 잘라낸 조각을 한 번에 저장합니다.

그리드 모드 주의·실패 케이스

  • 격자 값이 그림의 실제 배치와 안 맞으면 마지막 줄이나 칸 전체가 통째로 빠질 수 있습니다. 저장하기 전에 오버레이 선이 칸 테두리에 딱 붙었는지 한 번 더 훑어보세요.
  • 오프셋 값과 여백 값을 동시에 크게 잡으면 뒤쪽 칸들이 그림 범위를 벗어나 잘려 나오는 개수 자체가 줄어들 수 있습니다.
  • 해상도가 매우 큰 시트는 브라우저 메모리 한도를 넘어 처리가 도중에 멈출 수 있습니다 — 이때는 그림을 나눠서 두 번에 걸쳐 처리하세요.

모드 선택 팁

세 모드는 모두 같은 업로드를 공유하므로 모드 탭만 눌러 바로 비교할 수 있습니다. 프레임이 몇 개인지 감이 잡히지 않으면 스마트 모드로 먼저 열어 감지 결과부터 확인하세요.

  • 감지 결과가 대체로 맞고 그룹 몇 개만 손보면 되면 → 스마트 모드에서 그룹 분리·이동·여백·지우개로 다듬습니다.
  • 감지가 이미 깔끔하고 다듬을 곳이 없으면 → 자동 모드로 전체 프레임을 한 번에 압축 파일로 뽑습니다.
  • 스마트·자동 모드에서 칸들이 하나로 뭉쳐 감지되면(빈틈없이 맞붙은 격자) → 그리드 모드로 옮겨 칸 크기나 행·열 수를 직접 입력합니다.

자주 묻는 질문

Q. 업로드한 이미지는 서버에 저장되나요?
아니요. 스마트·자동·그리드 세 모드 모두 감지·편집·추출 전 과정이 브라우저 메모리와 canvas·Blob API 안에서만 이루어지며 서버로 전송되지 않습니다. 페이지를 닫으면 데이터도 함께 사라집니다.

Q. 여러 장을 한 번에 올릴 수 있나요?
아니요, 모드에 상관없이 한 번에 한 장만 처리합니다. 새 이미지를 업로드하면 이전 분석 결과는 초기화되므로, 필요한 결과를 먼저 다운로드한 뒤 다음 이미지를 올리세요.

Q. 스마트 모드에서 배경 자동 투명화를 끄면 무엇이 달라지나요?
끄면 프레임 사각형 영역을 있는 그대로 잘라내므로, 사각형 안에 들어온 배경색과 이웃 객체의 조각이 결과에 남습니다. 프레임끼리 가까이 붙은 시트라면 켠 상태(기본값)를 권장합니다.

Q. 스마트 모드에서 조각 편집 모드와 조각 썸네일 클릭 메뉴는 어떻게 다른가요?
기능은 같습니다. 조각 하나만 옮기거나 분리할 때는 썸네일을 클릭하는 메뉴로 충분하고, 그룹 경계와 상관없이 여러 조각을 한 번에 고르거나 드래그로 옮기고 싶을 때 조각 편집 모드를 켜면 더 편합니다.

Q. 스마트 모드에서 지우개로 지운 부분이 원본 이미지에서도 사라지나요?
아니요. 지우개는 추출 결과에만 적용되는 마스크이며 업로드한 원본 데이터는 바뀌지 않습니다. 편집창을 취소하면 지우개 작업 내용도 반영되지 않습니다.

Q. 자동 모드는 스마트 모드와 무엇이 다른가요?
감지하는 엔진은 공통이지만 쓰임새가 갈립니다. 스마트 모드는 잡아낸 프레임을 그룹 단위로 쪼개고 붙이고 여백을 손보는 편집기이고, 자동 모드는 그런 손질 없이 찾아낸 프레임 전부를 한꺼번에 압축 파일로 뽑아 주는 대량 처리 모드입니다. 따로 다듬을 필요가 없다면 자동 모드 쪽이 빠릅니다.

Q. 자동 모드에서 프레임이 하나로 붙어서 감지돼요.
프레임 사이에 배경(투명 또는 단색) 여백이 없으면 픽셀이 맞닿아 한 덩이로 묶여 버립니다. 이렇게 빈틈없는 격자 시트는 행·열 개수나 타일 크기로 자르는 그리드 모드가 어울립니다. 자동 모드는 조각끼리 간격을 두고 떨어진 시트에서 제 실력을 냅니다.

Q. 자동 모드로 추출한 프레임의 배경은 투명한가요?
기본값으로 배경 자동 투명화가 켜져 있으면, 잘라 낸 조각의 테두리 바깥에 묻은 바탕 픽셀과 옆 조각 부스러기까지 지운 투명 PNG로 저장됩니다. 원본 바탕을 그대로 남기고 싶을 때는 이 옵션을 꺼 두면 됩니다.

Q. 그리드 모드에서 타일 사이에 여백(간격)이 있는 타일셋은 어떻게 자르나요?
간격 입력칸에는 타일끼리 벌어진 픽셀 폭을, 여백 입력칸에는 그림 테두리와 첫 타일 사이에 남은 공백을 넣어 주세요. 미리보기의 격자선이 실제 타일 테두리에 겹칠 때까지 두 값을 조금씩 조정하면 됩니다.

Q. 그리드 모드에서 가장자리 타일이 잘려서 빠져요.
칸 크기·간격·여백 중 하나라도 실물과 어긋나면 맨 끝 줄이나 칸이 반쪽짜리로 걸려 통째로 제외됩니다. 고정 크기 입력 대신 행·열 개수 입력으로 바꾸거나, 여백과 간격을 눈금자로 잰 실제 값으로 맞추면 모든 칸이 살아납니다.

Q. 감지 결과에서 얇은 안테나나 꼬리 끝이 사라져요.
본체와 픽셀로 전혀 맞닿지 않은(대각선으로도 안 닿은) 가느다란 조각은 별도 컴포넌트로 잡히는데, 그 면적이 노이즈 기준(절대 4픽셀과 전체 픽셀 수의 0.001% 중 더 큰 쪽)보다 작으면 잡티로 분류되어 그룹 후보에서 아예 빠집니다. 원본에서 그 부분이 본체와 최소 한 픽셀이라도(대각선도 인정됩니다) 맞닿게 그리거나 조금 더 두껍게 그려 면적을 키우면 잡히기 쉬워집니다.

Q. 반투명한 그림자나 안개 효과까지 배경으로 지워져요.
투명 배경 모드는 알파값이 128 이상인 픽셀만 전경으로 인정합니다. 그보다 낮은 반투명 그림자·안개 효과는 이 알파 임계값 미만이라 배경(투명 처리 대상)으로 판정됩니다. 살리고 싶다면 원본에서 해당 부분의 알파값을 128 이상으로 올려서 그려야 합니다.

Q. 배경색이 화려하거나 그라데이션이면 왜 자동 감지가 실패하나요?
배경 판정은 이미지 테두리 1픽셀 표본에서 채널별 중앙값을 대표 배경색으로 잡고, 표본들이 그 대표색에서 얼마나 흩어져 있는지(중앙값으로부터의 평균제곱거리)를 48²(=2304)과 비교합니다. 즉 중앙값으로부터의 RMS 색 거리가 48을 넘으면 배경을 하나의 색으로 특정할 수 없다고 보고 모호(ambiguous)로 판정해 감지 자체를 건너뜁니다. 그라데이션이나 사진처럼 테두리 색이 고르지 않은 배경이 이 경우이며, 색상 선택기로 대표색을 직접 골라주면 우회할 수 있습니다.

관련 가이드

이미지 슬라이서 도구 열기

최종 업데이트 2026-08-21