스프라이트 이미지 생성기

클릭하여 이미지 업로드

지원 형식: PNG, JPG, WebP

레이아웃

이미지 간격: 10px

050

스프라이트 미리보려면 이미지를 업로드하세요

여러 개의 작은 아이콘을 온라인으로 CSS 스프라이트시트로 결합. 로컬 브라우저에서 처리되므로 업로드가 필요 없으며, 가로·세로·그리드 3가지 레이아웃에서 background-position 코드를 자동 생성합니다.

스프라이트 이미지 (CSS Sprite)란?

스프라이트 이미지 (CSS Sprite)는 여러 개의 작은 이미지를 1장의 큰 이미지로 합치고, background-position으로 개별 아이콘을 표시하는 기술입니다. 「Sprite」라는 단어는 초창기 게임기에서 유래했으며, 여러 애니메이션 프레임을 1장의 큰 이미지에 모아 순차적으로 전환해 표시했습니다. 웹 프론트엔드가 이 개념을 차용해 페이지의 많은 소형 아이콘을 1장의 이미지로 모아 로드합니다.

**왜 스프라이트가 필요한가?** HTTP 1.1 시대에는 각 이미지 파일이 1회의 HTTP 요청을 발생시켰고, TCP 핸드셰이크, TLS 핸드셰이크, 요청 헤더 오버헤드가 뒤따랐습니다. 아이콘 100개 = 요청 100회. 스프라이트는 모든 아이콘을 1장 이미지에 배치해 1회 요청으로 모든 아이콘 로드를 완료해 첫 화면 렌더링을 크게 빠르게 합니다. HTTP/2 멀티플렉싱이 이 장점의 일부를 줄였지만, CDN 캐시, gzip 압축, HTTP/1.1 호환 측면에서는 여전히 가치가 있습니다.

**기본 원리:** 200×60 스프라이트에 60×60 아이콘 3개가 가로로 배치되었다고 가정합니다. CSS에서 60×60 요소에 `background: url(sprite.png); background-position: 0 0;` 로 첫 번째를 표시하고, -60px 0 으로 두 번째, -120px 0 으로 세 번째를 표시합니다. 본 도구가 이러한 좌표 값을 자동 출력합니다.

**모던 대안:** SVG + use/symbol (권장, 벡터, 색상 변경 가능, 애니메이션 가능), Icon Font (광범위한 호환성, 크로스 플랫폼), HTTP/2 Server Push, 웹 폰트 아이콘 등. 각 방식마다 적용 시나리오가 있으므로 프로젝트 상황에 맞게 선택하세요.

사용 사례

웹 프로젝트에서 다수의 소형 아이콘을 스프라이트로 결합해 HTTP 요청을 줄이고 첫 화면 로드를 빠르게 하고 싶을 때
프론트엔드 개발 시 프로젝트 아이콘 자원을 일괄 관리하고 CSS 배경 위치 코드를 자동 생성하고 싶을 때
아이콘 자원 준비 완료 후 스프라이트 + CSS 코드를 대량 생성해 팀에 바로 납품
결합한 이미지를 [이미지 압축 도구](/image/compress/)로 처리해 전체 용량을 더 줄이고 LCP 지표를 최적화
App / Electron / 데스크톱 앱 내부에 정적 아이콘 자원을 1장으로 묶어 번들
이메일 HTML 템플릿 또는 정적 블로그에서 여러 아이콘이 필요하지만 메일 클라이언트 호환성 제약이 있을 때
디자이너가 아이콘 자원을 스프라이트 형태로 납품해 프론트엔드 엔지니어가 빠르게 통합
Retina 화면 전용 2x 해상도 스프라이트를 출력해 background-size 로 1x와 2x 화면에 대응

이용 방법

업로드 영역을 클릭하거나 여러 이미지를 드래그&드롭 (JPG / PNG / WebP / GIF 등 지원)
좌측 이미지 목록에서 드래그 핸들 또는 상하 버튼으로 아이콘 순서 조정
좌측 레이아웃 영역에서 「가로」「세로」「그리드」 3가지 배치 방식 중 하나 선택
간격 슬라이더로 아이콘 사이의 픽셀 간격 조정 (1-5px 권장)
우측에서 스프라이트 효과를 실시간 미리보기 후 「다운로드」로 PNG 저장, 「복사」로 CSS 코드를 프로젝트에 적용

주요 기능

여러 이미지 1회 결합: 여러 작은 아이콘 또는 이미지를 업로드해 1장 스프라이트로 자동 결합
3가지 레이아웃: 가로, 세로, 그리드를 자유롭게 전환해 다양한 시나리오에 대응
간격 조정 가능: 0-50px 픽셀 간격 슬라이더로 아이콘 사이 여백을 유연하게 제어
드래그 정렬: 목록에서 아이콘을 드래그해 결합 순서 변경, CSS 좌표 자동 동기화 업데이트
모바일 정렬: 상하 버튼으로 순서 조정, 모바일 브라우저에서도 편리하게 조작
CSS 자동 생성: 각 서브 이미지의 background-position, 너비·높이 등 완전한 위치 지정 코드 자동 출력
실시간 미리보기: 이미지 또는 매개변수 변경 시 즉시 스프라이트 재생성, WYSIWYG
1회 클릭 CSS 복사: 내장 복사 버튼으로 완전한 스타일시트 코드를 클립보드로
1회 클릭 PNG 다운로드: 결합한 이미지를 로컬에 직접 저장, 파일명은 sprite.png 고정
로컬 브라우저 처리: Canvas API로 로컬 결합, 이미지가 서버로 전송되지 않아 프라이버시 보호
다중 형식 입력: JPG, PNG, WebP, GIF 등 주요 이미지 형식 업로드 지원
투명 배경 유지: 출력 PNG가 원본 아이콘의 투명 채널을 유지해 아이콘 합성에 적합

Best Practices

Retina 2x 대응: 2x 소스 파일로 스프라이트 생성

대상 사용자가 Retina 디스플레이 (Mac, iPhone, HiDPI Windows)를 사용한다면, 2x 해상도 소스 파일 (예: 32×32 아이콘)로 생성한 뒤 CSS에서 background-size: 32px auto를 지정해 16×16로 축소 표시하는 것이 좋습니다. 이렇게 하면 1x 화면과 2x 화면이 모두 선명하게 표시되며, 1회 생성으로 모든 기기에 대응할 수 있습니다.

HTTP/2 프로젝트에서도 스프라이트는 여전히 가치가 있음

HTTP/2 멀티플렉싱이 요청 수 병목 완화를 가져왔지만, 스프라이트는 CDN 캐시 재사용, gzip/Brotli 높은 압축률, 내부망 프록시 통과, HTTP/1.1 폴백 대응 4가지 시나리오에서 여전히 두드러진 장점이 있습니다. 기업 내부망, 정부·은행 시스템, 이메일 HTML 템플릿은 여전히 HTTP/1.1 위주이므로 스프라이트는 대체 불가합니다.

PNG-8 vs PNG-24 선택: 아이콘은 PNG-8, 그라데이션은 PNG-24

스프라이트 출력은 PNG로 고정되지만, 생성 전에 알맞은 비트 심도의 소스를 사용하세요. 단색/1색 아이콘은 PNG-8 (무손실 투명, PNG-24보다 60-80% 작음); 그라데이션, 그림자, 하이라이트가 있는 아이콘은 PNG-24. 본 도구는 소스 형식을 제한하지 않으므로 PNG 압축 도구로 미리 최적화 후 결합하는 것을 권장합니다.

CDN 캐시 전략: 파일명에 해시 추가하여 영구 캐시

결합 후 sprite.png는 고정된 파일명을 피하고 콘텐츠 해시 (예: sprite.a3f2b1.png)로 리네임하여 영구 캐시 (Cache-Control: max-age=31536000)를 구현하는 것이 좋습니다. 브라우저는 1회만 다운로드하고 이후 요청은 로컬 캐시에서 처리되어, HTTP/2 단독 사용보다 더 많은 트래픽을 절약합니다. 본 도구의 다운로드 파일명은 sprite.png로 고정되므로 다운로드 후 직접 리네임해 주세요.

gzip / Brotli 압축으로 스프라이트 트래픽 절감

결합한 이미지는 픽셀 값의 연속성이 강해, gzip/Brotli 압축률이 흩어진 작은 이미지보다 훨씬 높습니다. Nginx + gzip 레벨 1만으로도 스프라이트가 60-80% 더 줄고, Brotli는 85%+까지 줄일 수 있습니다. HTTP 응답 헤더에 Content-Encoding을 활성화하면 1MB 스프라이트의 실제 전송량이 200-300KB에 불과할 수 있으며, 이는 가장 과소평가되는 스프라이트의 숨은 장점입니다.

CSS Modules / Vue scoped 대응: :global() 로 감싸기

프로젝트가 CSS Modules 또는 Vue scoped CSS를 사용한다면, 본 도구가 출력하는 .icon-home, .sprite 클래스명이 로컬 해시화되어 무효가 됩니다. .module.css에서 :global(.sprite) { ... } 로 공통 클래스를 감싸고 scoped 블록 외부에서 가져오거나, CSS Modules를 사용하지 않고 BEM 네임스페이스로 관리하세요.

Icon Font와 혼용: 핵심 아이콘은 Font, 복잡한 아이콘은 스프라이트

실무에서 가장 안정적인 방식은 혼용입니다. UI 범용 소형 아이콘 (설정, 닫기, 검색, 사용자)은 Icon Font (색상 변경 가능, 벡터, 크로스 플랫폼), 복잡한 컬러 아이콘 (제품 로고, 운영 배너 아이콘)은 스프라이트. 두 방식의 장점이 상호 보완되어 한쪽만 전면 사용 시 발생하는 유지보수 비용을 피할 수 있습니다.

엔지니어링 프로젝트는 spritesmith 자동화, 본 도구는 프로토타입용

장기 유지보수 프로젝트는 spritesmith (Webpack) 또는 gulp.spritesmith로 스프라이트 생성을 빌드 플로우에 통합하는 것이 좋습니다. 소스 코드 수정 시 자동 재실행, 해시 포함 파일명 출력, SCSS/LESS 변수도 자동 생성. 본 도구는 의존성 없는 빠른 프로토타입과 소규모 프로젝트 납품용이며, CI/CD 파이프라인에는 빌드 플러그인이 더 적합합니다.

모던 프로젝트는 스프라이트에서 SVG symbol로 이전 가능

프로젝트가 모던 브라우저 (Chrome / Safari / Firefox / Edge 전체, IE 11+)를 지원한다면, 스프라이트에서 SVG symbol로의 마이그레이션을 고려하세요. 단일 파일로 모든 아이콘을 관리하고, CSS가 색상과 애니메이션을 제어하며, background-position 좌표 유지보수 비용이 없습니다. 본 도구가 출력하는 스프라이트는 1회성 자산으로 마이그레이션 전 과도기 솔루션으로 사용할 수 있습니다.

자주 묻는 질문

스프라이트 이미지란? 왜 여러 이미지를 1장으로 합치나요?

스프라이트 이미지 (CSS Sprite)는 여러 개의 작은 이미지를 1장의 큰 이미지로 합치고 background-position으로 개별 아이콘을 표시하는 기술입니다. 합치면 1회의 HTTP 요청으로 모든 아이콘을 불러올 수 있어, 개별 로드에 비해 요청 수를 크게 줄이고 첫 화면 렌더링을 빠르게 합니다. 프론트엔드 성능 최적화의 고전적 기법입니다.

온라인에서 여러 아이콘을 스프라이트로 합치려면?

여러 이미지를 업로드하면 도구가 선택한 레이아웃으로 자동 합치고 실시간 미리보기를 보여줍니다. 동시에 우측에 각 서브 이미지에 대응하는 CSS 배경 위치 코드 (background-position)와 너비·높이 값이 자동 출력되어 스타일시트에 복사해 사용할 수 있습니다. 생성된 스프라이트는 PNG 형식이며, 1회 클릭으로 다운로드할 수 있습니다.

생성된 CSS 코드는 어떻게 사용하나요?

다운로드한 sprite.png를 프로젝트 디렉터리 (예: /img/sprite.png)에 두고, 도구가 출력한 CSS를 스타일시트에 붙여넣으세요. 아이콘을 표시할 요소에 .sprite 클래스와 매칭되는 .icon-xxx 클래스를 추가하면 됩니다. 예: <i class="sprite icon-home"></i>. 클래스명은 도구가 원본 파일명에서 자동 생성합니다.

어떤 배치 방식을 지원하나요?

3가지를 지원합니다. 가로 정렬 (아이콘을 한 줄에 왼쪽에서 오른쪽으로), 세로 정렬 (아이콘을 한 열에 위에서 아래로), 그리드 정렬 (아이콘 수에 따라 자동으로 정사각형 행렬, 열 수는 제곱근 올림). 좌측 패널에서 모드를 전환해 미리볼 수 있습니다.

아이콘 사이의 간격을 조정할 수 있나요?

가능합니다. 좌측에 0-50px 범위의 픽셀 간격 슬라이더가 있으며, 1-5px를 권장합니다. 적절한 간격은 CSS 위치 지정 시 가장자리 픽셀 간섭을 방지하지만, 최종 사용에는 영향을 주지 않습니다. 간격은 스프라이트 내부 여백이며, CSS 호출 시 background-position의 정확한 좌표만 사용됩니다.

아이콘 배치 순서를 변경할 수 있나요?

가능합니다. 좌측 이미지 목록의 각 항목은 드래그 핸들로 순서 변경이 가능하며, 모바일에서는 상하 버튼으로 조정할 수 있습니다. 조정 후 스프라이트가 새 순서로 재생성되고, CSS 좌표도 함께 업데이트됩니다.

어떤 이미지 형식을 지원하나요?

JPG, PNG, WebP, GIF 등 일반적인 모든 이미지 형식 입력을 지원합니다. 출력은 투명 배경을 유지한 PNG 형식으로 통일됩니다. 아이콘은 PNG 입력을 권장하며, PNG 투명 채널은 결합 후 스프라이트에서도 정상적으로 유지됩니다.

모던 프로젝트에서도 스프라이트가 필요한가요?

HTTP/2 보급 후 멀티플렉싱이 스프라이트 장점의 일부를 줄였지만, CDN 캐시, gzip 압축, 첫 화면 핵심 아이콘 로드 측면에서 여전히 가치가 있습니다. 아이콘 수가 적거나 (10개 미만) 색상 변경·애니메이션이 필요하면 SVG symbol 또는 Icon Font로의 전환을 권장합니다. 대량의 정적 PNG 아이콘이라면 스프라이트는 여전히 안정적이고 신뢰할 수 있는 선택입니다.

Retina 화면에서 스프라이트가 흐려지나요? 어떻게 대응하나요?

흐려질 수 있습니다. Retina 화면 (Mac, iPhone, HiDPI Windows)은 물리 픽셀이 CSS의 2배 또는 3배이므로, 일반 1x 스프라이트가 2x로 늘어져 가장자리가 흐려집니다. 해결책은 2x 해상도 소스 파일 (16×16 대신 32×32)로 스프라이트를 생성하고, CSS에서 background-size: 32px auto로 16×16로 축소 표시하는 것입니다.

아이콘 결합 시 화질 손실이 있나요?

화질 손실은 없습니다. 결합 처리는 여러 이미지를 큰 캔버스의 지정된 위치에 배치할 뿐, 재샘플링·압축·색상 조정을 수행하지 않습니다. 출력 PNG는 원본 화질을 유지합니다. 추가 용량 절감이 필요하면 다운로드 후 [이미지 압축 도구](/image/compress/)로 처리할 수 있습니다.

스프라이트 이미지가 서버로 전송되나요? 안전한가요?

전송되지 않습니다. 모든 이미지 결합은 로컬 브라우저에서 Canvas API로 수행되며, 파일은 어떤 서버에도 업로드되지 않고 처리 후 폐기됩니다. 민감한 정보를 포함한 내부 아이콘, 미공개 로고 디자인도 안심하고 처리할 수 있습니다.

생성된 스프라이트는 어떻게 다운로드하나요?

이미지 업로드 후 도구가 자동으로 미리보기를 생성합니다. 좌측 「다운로드」 버튼을 클릭하면 sprite.png로 로컬에 저장됩니다. CSS가 필요한 경우 도구가 완전한 CSS를 자동 출력하므로, 「복사」 버튼으로 클립보드에 복사할 수 있습니다.

클래스명을 직접 지정할 수 있나요?

현재 버전에서는 클래스명이 도구가 원본 파일명에서 .icon- 접두사를 붙여 자동 생성합니다. 예: home.png를 업로드하면 .icon-home이 생성됩니다. 영문, 숫자, 하이픈을 사용한 파일명은 깔끔한 CSS 클래스명을 얻는 데 도움이 됩니다.

스프라이트, Icon Font, SVG Symbol 중 무엇을 선택해야 하나요?

시나리오에 따라 다릅니다. 대량의 정적 PNG 아이콘 또는 낡은 IE 호환이 필요하면 스프라이트, UI 범용 소형 아이콘에 색상 변경과 크로스 플랫폼이 필요하면 Icon Font, 모던 프로젝트에서 색상 변경·애니메이션·단일 파일 관리가 필요하면 SVG Symbol이 1순위입니다. 실무에서는 혼용이 일반적입니다. 핵심 UI 아이콘은 Icon Font, 복잡한 컬러 아이콘은 스프라이트로 사용하세요.

결합한 스프라이트 이미지를 [이미지 압축 도구](/image/compress/)로 더 줄일 수 있나요?

가능합니다. 본 도구는 무손실 PNG 고정 출력이라 용량이 클 수 있습니다. 권장 워크플로우: 본 도구로 스프라이트 생성 → [이미지 압축 도구](/image/compress/)로 PNG 용량 축소 또는 JPG 변환 (투명도 불필요 시) → [이미지 변환 도구](/image/convert/)로 필요 시 WebP 변환. 도구를 조합해 로딩 성능을 최대화할 수 있습니다.

용어집

스프라이트 이미지 (CSS Sprite): 여러 개의 작은 이미지를 1장의 큰 이미지로 합치고, background-position으로 개별 아이콘을 표시하는 기술. 웹 프론트엔드의 고전적 성능 최적화 기법.
background-position: CSS 속성으로, 배경 이미지의 시작 좌표를 지정. 스프라이트는 음수 값으로 배경을 좌측/상단으로 스크롤해 대상 아이콘 위치에 표시. 예: background-position: -60px 0 는 60px 오프셋 위치의 아이콘을 표시.
background-size: CSS 속성으로, 배경 이미지의 표시 크기를 지정. Retina 대응의 핵심. 2x 소스로 스프라이트 생성 후 CSS에서 background-size: 32px auto 로 1x 크기로 축소해 1x와 2x 화면 모두 선명하게 표시.
그리드 레이아웃 (Grid Layout): 본 도구의 그리드 모드는 아이콘 수에 따라 열 수를 자동 계산 (제곱근 올림)하고 행 우선으로 정사각형 행렬에 배치. 예: 9개 아이콘은 3×3 그리드로 배치.
아이콘 간격 (Padding): 스프라이트에서 각 서브 이미지 사이의 픽셀 여백. 1-5px 권장. CSS 위치 지정 시 가장자리 픽셀 간섭을 방지하지만 최종 사용에는 영향 없음. CSS 호출 시 정확한 좌표만 사용.
PNG 투명 채널: PNG 형식은 Alpha 채널을 지원해 아이콘 배경을 투명으로 설정 가능. 스프라이트 출력은 PNG 형식을 유지해 투명 아이콘이 결합 후에도 정상 표시됨.
HTTP/2 멀티플렉싱: HTTP/2 프로토콜은 단일 연결에서 여러 요청을 병렬 처리해 스프라이트 장점의 일부를 줄임. 다만 HTTP/2는 CDN 설정, 구형 브라우저 호환, gzip 압축에서 결합된 큰 이미지에 비해 부족.
SVG Symbol: SVG의 <symbol> 요소 + <use> 참조 메커니즘으로, 모든 아이콘을 단일 SVG 파일에 통합하고 CSS가 fill / stroke / 애니메이션을 제어. 모던 프로젝트에서 스프라이트의 1순위 대체안.
DPR (디바이스 픽셀 비율): Device Pixel Ratio, 물리 픽셀과 CSS 픽셀의 비율. Retina 화면은 DPR=2, CSS 16×16 아이콘에는 실제 32×32 물리 픽셀이 필요. 스프라이트의 Retina 대응 핵심 매개변수.

스프라이트 이미지 3가지 레이아웃 모드 비교

레이아웃 모드	배치 규칙	주요 용도
가로 정렬	아이콘을 한 줄에 왼쪽에서 오른쪽으로 배치	내비게이션, Tab 버튼, 가로 툴바
세로 정렬	아이콘을 한 열에 위에서 아래로 쌓음	세로 메뉴, 목록 항목 접두사, 상하 구조
그리드 정렬	아이콘 수에 따라 자동으로 정사각형으로 배치	범용, 개수 미지정 시 최적의 시작점

스프라이트 이미지 간격 Padding 권장값

간격 픽셀	적용 시나리오	사용 권장
`0px`	아이콘 가장자리 깨끗, 투명 padding 포함	최대한 압축, 가장자리 픽셀 간섭 가능
`1-2px`	고품질 아이콘, 최소 안전 여백	권장값, 압축과 안정성 균형
`3-5px`	일반 아이콘, 그림자/스트로크 포함	안전한 거리, 주류 권장
`6-10px`	아이콘 크기 차이 큼, 스트로크 포함	큰 아이콘이 작은 아이콘 가리는 것 방지
`10-50px`	디버깅, 시각적 그룹화	개발 미리보기 전용, 운영 환경 비권장

Retina 2x 스프라이트 이미지 대응 매개변수

화면 DPR	CSS 크기	소스 파일 크기	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`