이미지 그리드 슬라이서

브라우저에서 이미지를 N×M 그리드 타일로 잘라 줍니다.

도구를 불러오는 중…

이미지 그리드 슬라이서이미지를 끌어다 놓으면 HTML 캔버스를 사용해 N×M의 균등한 그리드 타일로 잘라 줍니다. 원하는 행과 열 수를 정하고 각 타일을 미리 본 뒤, fflate로 묶은 ZIP으로 한 번에 모두 내려받거나 타일 하나만 받을 수 있습니다. 모든 처리는 브라우저 안에서 로컬로 이뤄지므로 이미지가 절대 업로드되지 않습니다.

이미지 그리드 슬라이서란?

이미지 그리드 슬라이서는 한 장의 이미지를 균등한 타일 그리드로 나누는 무료 브라우저 기반 도구입니다. 행과 열 수를 지정하면 도구가 이미지를 행 × 열 개의 같은 크기 타일로 나누고, 왼쪽에서 오른쪽·위에서 아래 순으로 번호를 매깁니다. 한 장의 가로로 긴 이미지로 인스타그램이나 SNS 캐러셀을 만들거나, 스프라이트 시트·텍스처 아틀라스를 개별 프레임으로 자르거나, 이미지 퍼즐을 만들거나, 큰 스크린샷을 작은 구역으로 쪼갤 때 유용합니다. 브라우저가 열 수 있는 모든 이미지(PNG, JPEG, WebP 등)에 동작하며, 각 타일을 실시간으로 미리 보여 주고, 전체를 ZIP으로 내려받거나 한 타일씩 저장할 수 있습니다.

이미지 그리드 슬라이서 사용법

  1. 이미지를 드롭존에 끌어다 놓거나, 클릭해 파일(PNG, JPEG, WebP 또는 브라우저가 열 수 있는 그 밖의 이미지)을 선택합니다.
  2. 그리드의 행 수와 열 수를 설정하면, 값을 바꾸는 즉시 도구가 이미지를 행 × 열 개의 같은 크기 타일로 자동으로 잘라 줍니다.
  3. 타일 개수와 미리보기 그리드에서 각 타일을 확인하세요. 타일 썸네일을 클릭하면 확대 라이트박스가 열립니다.
  4. ‘ZIP 다운로드’를 클릭하면 모든 타일이 행·열 순서의 이름으로 하나의 압축 파일에 담겨 저장됩니다.
  5. 또는 ‘첫 타일 다운로드’를 클릭하면 타일 하나만 저장할 수 있어, 한 조각만 필요할 때 유용합니다.

예시

3장짜리 인스타그램 캐러셀 만들기

3240×1080 가로 배너를 끌어다 놓고 행을 1, 열을 3으로 설정하면 1080×1080 정사각형 3장이 만들어집니다. ZIP을 내려받아 끊김 없이 넘기는 캐러셀로 게시할 수 있습니다.

스프라이트 시트를 프레임으로 자르기

4×4 캐릭터 스프라이트 시트를 불러와 행과 열을 모두 4로 설정하면 균등하게 잘린 16개의 프레임이 나옵니다. ZIP을 내려받아 각 프레임을 게임이나 애니메이션에 따로 쓸 수 있습니다.

세로로 긴 스크린샷 나누기

긴 스크린샷을 끌어다 놓고 행을 4, 열을 1로 설정하면 이미지가 위아래로 쌓인 네 구역으로 잘려, 한 조각씩 공유하거나 첨부할 수 있습니다.

자주 묻는 질문

제 이미지가 서버로 업로드되나요?
아니요. 자르기는 HTML 캔버스를 사용해 브라우저 안에서 100% 클라이언트 측으로 실행되며, ZIP도 fflate로 로컬에서 만들어집니다. 이미지는 기기에서 읽고 처리되며 절대 업로드되지 않으므로 비공개로 유지됩니다.
어떤 이미지 형식을 자를 수 있나요?
브라우저가 열 수 있는 모든 이미지(드롭존은 image/*를 허용합니다)로, PNG, JPEG, WebP를 포함합니다. 타일은 PNG로 내보내 각 조각을 선명하고 무손실로 유지합니다.
타일의 크기와 번호는 어떻게 정해지나요?
이미지는 행 × 열 개의 균등한 타일로 나뉩니다. 마지막 행과 열이 남은 픽셀을 흡수하므로 손실되는 부분이 없습니다. 타일은 왼쪽에서 오른쪽·위에서 아래 순으로 번호가 매겨집니다(1행 1열이 처음).
모든 타일을 한 번에 어떻게 내려받나요?
‘ZIP 다운로드’를 클릭하면 fflate로 묶은, 모든 타일이 담긴 하나의 압축 파일을 받습니다. 파일은 행과 열 기준으로 이름이 붙어 순서대로 정렬됩니다. 한 조각만 필요하면 ‘첫 타일 다운로드’도 쓸 수 있습니다.
그리드 크기나 이미지 크기에 제한이 있나요?
도구가 정한 고정 제한은 없습니다. 행과 열은 최소 1 이상이어야 하며, 모든 처리가 로컬에서 이루어지므로 아주 큰 이미지나 그리드는 브라우저와 기기의 가용 메모리에만 제한을 받습니다.

관련 도구