이미지 스프라이트 시트 생성기
작은 이미지(아이콘, UI 상태, 캐릭터 프레임) 여러 개를 다운로드 가능한 PNG 한 장으로 합치고, 각각을 `background-position`으로 배치하는 CSS 블록 출력. 아이콘 폰트·SVG 스프라이트·실제 스프라이트 시트 파이프라인 옵션 없을 때 HTTP 요청 감소. 레이아웃: 가로 스트립, 세로 스트립, 고정 컬럼 그리드; 시트는 각 행·열 최대 항목에 맞춰 사이즈. 파일 전부 canvas로 클라이언트 측 처리 — 아이콘이 브라우저 밖으로 안 나감.
—
사용법
- 이미지 드롭 또는 선택. OS가 넘긴 순서대로 표시.
- 레이아웃 선택: 가로/세로 스트립이 가장 단순, 그리드가 더 조밀. 번짐 방지엔 패딩 설정.
- PNG 다운로드, CSS 복사, 함께 배포 — CSS 프리픽스에 넣은 클래스명 일치시켜.
자주 묻는 질문
- 스프라이트 시트 vs. SVG 스프라이트 vs. 아이콘 폰트?
- PNG 스프라이트는 소스가 실제 래스터(게임 아트, 사진 썸네일)일 때 여전히 우세. UI 아이콘은 SVG 스프라이트(`<symbol>` + `<use>`) 선호 — 스케일됨, currentColor 반응. 아이콘 폰트는 이제 대부분 레거시 폴백.
- 투명도는 어떻게 됨?
- 배경 투명 유지 시 PNG는 알파로 저장(미리보기 체커보드는 투명 영역 가시화용). 흰색·검정 선택 시 시트에 베이킹.
관련 도구
이미지 듀오톤 효과
어떤 이미지든 2색 듀오톤 효과 적용 — 섀도우 컬러·하이라이트 컬러 선택, 미드포인트·콘트라스트 조정, 결과 다운로드. Spotify 스타일 커버 2클릭에.
이미지 0 0
이미지 블러
Gaussian·박스·모션 블러를 브라우저에서 바로 적용. 반지름 0-64px 조정 가능, 동등한 CSS filter 문자열도 함께 제공.
이미지 0 0
CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
색상 0 0
이미지 → ASCII 아트
이미지를 ASCII 아트로 변환 — 너비·문자 집합·반전 조정, 브라우저에서.
이미지 0 0
Lorem Picsum URL 빌더
picsum.photos에서 플레이스홀더 이미지 URL 생성 — 크기·그레이스케일·블러·안정 이미지용 시드·특정 이미지 ID.
이미지 0 0
이미지 픽셀화
이미지 드롭 → 블록 크기로 픽셀화. 스크린샷 검열·레트로 픽셀 아트에 깔끔한 출력.
이미지 0 0