🗂️ 스프라이트 시트 생성기

소개

이 도구는 브라우저 Canvas API를 사용해 이미지를 기기 안에서만 처리하여 컴팩트한 PNG 스프라이트 시트로 패킹합니다. 서버에는 아무것도 업로드되지 않습니다. 이미지를 원하는 만큼 드롭하고, 최대 행 너비와 스프라이트별 패딩을 설정하면 패커가 행별로 배치해 낭비 공간을 최소화합니다. 생성 후 합쳐진 PNG를 다운로드하고 CSS 스니펫을 복사할 수 있으며, 각 스프라이트의 background-image·background-position·width·height 값이 포함된 클래스가 스타일시트에 바로 붙여넣을 수 있게 준비됩니다.

사용 방법

1. 업로드 영역에 이미지를 끌어다 놓거나, 클릭해서 여러 파일을 한 번에 선택하세요.
2. 최대 행 너비(픽셀)와 각 스프라이트 주변 패딩을 설정해 얼마나 촘촘하게 패킹할지 조절하세요.
3. 스프라이트 시트 생성 버튼을 클릭해 모든 이미지를 하나의 PNG로 패킹하고 캔버스에서 즉시 미리 보세요.
4. 생성된 CSS를 복사하세요 — 각 스프라이트에 background-position·width·height 값이 담긴 전용 클래스가 만들어집니다.
5. PNG 스프라이트 시트를 다운로드하고 CSS를 프로젝트 스타일시트에 붙여넣으면 완료입니다.

자주 묻는 질문

이미지가 서버에 업로드되나요?

아니요. 모든 처리는 Canvas API를 사용해 브라우저 안에서만 이루어집니다. 파일이 기기 밖으로 나가지 않습니다.

한 스프라이트 시트에 이미지를 몇 개까지 추가할 수 있나요?

정해진 제한은 없습니다. 브라우저 메모리가 허용하는 만큼 이미지를 패킹할 수 있습니다. 최적 성능을 위해 개별 스프라이트 크기를 적당하게 유지하세요.

최대 행 너비 설정은 어떤 역할을 하나요?

패커가 새 행을 시작하기 전까지 각 행이 넓어질 수 있는 최대 너비를 제한합니다. 값이 크면 더 넓은 시트가, 작으면 더 좁고 세로로 긴 시트가 생성됩니다.

생성된 CSS를 프로젝트에 바로 사용할 수 있나요?

네. 각 스프라이트 클래스에는 다운로드한 PNG를 가리키는 background-image URL, background-position, width, height가 포함되어 있습니다. 원하는 스타일시트에 붙여넣고 HTML 요소에 클래스를 적용하기만 하면 됩니다.

어떤 이미지 형식을 입력 스프라이트로 사용할 수 있나요?

브라우저가 디코딩할 수 있는 모든 형식(PNG·JPEG·WebP·GIF·SVG·AVIF 등)을 사용할 수 있습니다. 출력 스프라이트 시트는 최대 호환성을 위해 항상 단일 PNG입니다.