스프라이트 시트 만들기
Sprite Sheet Packer
여러 이미지를 하나의 아틀라스로 묶고 대응하는 CSS 또는 JSON 좌표표를 함께 만듭니다.
아틀라스 한 장과 그것을 쓸 수 있게 해 주는 좌표를 함께 만듭니다. 좌표표 없는 스프라이트 시트는 아이콘 몇 개를 찍은 그림에 지나지 않기 때문입니다. 채움률도 함께 알려 주는데, 이 아틀라스가 만들 가치가 있는지는 그 숫자가 말해 줍니다.
묶을 아이콘을 놓으세요
아틀라스 한 장과, 그것을 쓸 수 있게 해 주는 좌표표를 함께 만듭니다.
사용 방법
아이콘을 놓습니다
파일 이름이 스프라이트 이름이 되고, 그것이 CSS 클래스 이름이나 JSON 키가 됩니다.
여백은 최소 2픽셀 둡니다
시트를 확대하거나 이중선형 필터로 그릴 때 옆 스프라이트가 배어 나오는 것을 막아 줍니다. 아무도 설명하지 못하는 아이콘 가장자리의 그 선이 이것 때문입니다.
좌표표 형식을 고릅니다
CSS는 자바스크립트가 필요 없는 유일한 형식입니다. JSON은 TexturePacker의 해시 구조를 따르며, 흔히 쓰는 게임 엔진들이 그대로 읽습니다.
원본이 @2x라면 픽셀 비율을 맞춥니다
좌표표의 모든 숫자를 나눠서, CSS가 기기 픽셀이 아니라 CSS 픽셀을 기준으로 말하게 합니다.
자주 묻는 질문
채움률은 무슨 뜻인가요?
아틀라스에서 빈 공간이 아니라 스프라이트가 차지하는 비율입니다. 절반 아래로 내려가면 크기가 제각각인 스프라이트를 억지로 채우고 있다는 뜻이고, 투명한 공간을 잔뜩 내려받게 됩니다. 그럴 때는 시트를 둘로 나누는 편이 대개 낫습니다.
HTTP/2에서도 스프라이트 시트를 써야 하나요?
웹에서는 대개 아닙니다. 아틀라스를 정당화하던 요청 비용이 거의 사라졌고, SVG 스프라이트나 개별 파일이 관리하기 쉽습니다. 캔버스나 WebGL 게임에서는 여전히 맞는 답입니다. 텍스처를 한 번 바인딩하는 편이 쉰 번보다 낫기 때문입니다.
아틀라스 크기가 왜 2의 거듭제곱이 아닌가요?
공간이 낭비되고 요즘 GPU는 대부분 요구하지 않기 때문입니다. 밉맵을 쓰거나 구형 텍스처 경로를 상대한다면 옵션을 켜고 낭비되는 면적을 감수하세요.
이 도구로 이어지는 것
이미지 분할
Image Splitter
한 장의 이미지를 N×M 격자나 일정 높이로 잘라 조각을 zip으로 묶어 줍니다.
픽셀 아트 편집기
Pixel Art Editor
픽셀 격자에 연필·채우기·지우개·스포이드·팔레트·좌우 대칭으로 그리고, 사진을 격자로 불러와 색을 줄이며, 정수 배율 PNG나 SVG로 내보냅니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
JPEG 압축
JPEG Compressor
원하는 품질로 JPEG를 다시 인코딩하고 압축 전후 용량과 차이를 함께 보여줍니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
CSS 정렬·압축
CSS Beautifier & Minifier
선언 순서를 바꾸지 않고 CSS를 정렬하거나 압축하며, 토큰 구성을 그대로 보존합니다.
이미지 크기 조절
Image Resizer
픽셀·비율·최대 변 길이 기준으로 크기를 바꾸고 가로세로 비율 고정과 일괄 처리를 지원합니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
이미지 배경 제거
Background Remover
단색이나 균일한 배경을 OKLab에서 키잉해 투명한 PNG로 만들고, 브러시로 경계를 다듬을 수 있습니다.
EXIF 정보 삭제
EXIF Remover
화질은 그대로 두고 카메라·GPS·편집 이력 메타데이터만 지웁니다.
파비콘 생성
Favicon Generator
ICO·PNG·애플 터치 아이콘·웹 매니페스트를 한 번에 만들고 붙여넣을 HTML까지 제공합니다.