이미지 스프라이트 생성기 사용법 - 여러 이미지를 하나로 합쳐 로딩 속도 높이기
아이콘 수십 개를 따로 불러오면 사이트가 느려집니다. 이미지 스프라이트 생성기로 한 장에 묶어 HTTP 요청을 줄이고 로딩 시간을 단축하는 방법을 정리했습니다.
웹사이트에 작은 아이콘이 30개쯤 들어간다고 해봅니다. 별 모양, 하트, 화살표, 메뉴 버튼... 이걸 전부 개별 파일로 불러오면 브라우저는 이미지 하나당 한 번씩, 총 30번 서버에 요청을 보냅니다. 파일 크기는 작아도 요청 자체가 쌓이면 페이지가 눈에 띄게 느려집니다. 이 문제를 해결하는 오래된 그러나 여전히 유효한 방법이 바로 이미지 스프라이트입니다.
이미지 스프라이트가 뭔가요
이미지 스프라이트는 여러 개의 작은 이미지를 한 장의 큰 이미지 파일로 합쳐 놓은 것을 말합니다. 게임 개발에서 캐릭터의 여러 동작 프레임을 한 장에 모아 두던 방식에서 이름이 왔습니다. 웹에서는 아이콘, 버튼 같은 작은 그래픽을 하나로 묶을 때 씁니다.
합쳐진 이미지는 한 번만 불러옵니다. 그다음 CSS의 background-position 속성으로 "이 영역만 보여줘"라고 잘라서 표시합니다. 큰 종이에 여러 그림을 그려 놓고 필요한 부분만 창문으로 들여다보는 것과 같은 원리입니다.
왜 아직도 스프라이트를 쓰나요
HTTP/2가 보급되면서 "이제 스프라이트는 필요 없다"는 말이 한때 돌았습니다. HTTP/2는 한 연결에서 여러 파일을 동시에 받을 수 있어 요청 수 부담이 줄었기 때문입니다. 하지만 현실은 그렇게 단순하지 않습니다.
- 이미지 파일마다 헤더, 압축 정보 같은 부가 데이터가 붙어 작은 파일이 많을수록 전체 용량이 커집니다
- HTTP/1.1을 여전히 쓰는 서버나 구형 환경에서는 요청 수 절감 효과가 큽니다
- 한 장으로 묶으면 캐시 관리가 단순해져 버전 갱신이 편합니다
특히 단색 도형이나 단순한 아이콘처럼 SVG로 만들기 애매하고 PNG로 처리해야 하는 경우, 스프라이트는 지금도 실용적인 선택지입니다.
아이콘 20개를 개별 PNG로 불러오던 페이지를 스프라이트 한 장으로 바꾸면 HTTP 요청이 20번에서 1번으로 줄어듭니다. 파일 용량보다 요청 횟수가 로딩 체감 속도를 좌우하는 경우가 많습니다.
이미지 스프라이트 생성기로 만드는 과정
손으로 포토샵에서 이미지를 일일이 배치하고 좌표를 재는 방법도 있지만, 이미지 스프라이트 생성기를 쓰면 작업이 훨씬 간단해집니다. 대부분의 생성기는 다음 순서로 동작합니다.
기본 작업 흐름
- 합칠 이미지 파일을 여러 개 한 번에 업로드합니다
- 생성기가 자동으로 이미지를 격자나 한 줄로 배치해 한 장으로 합칩니다
- 각 이미지의 위치(좌표)와 크기가 담긴 CSS 코드를 함께 만들어 줍니다
- 합쳐진 이미지 파일과 CSS를 내려받아 프로젝트에 넣습니다
핵심은 생성기가 좌표 계산을 대신해 준다는 점입니다. 이미지를 가로로 나열할지 세로로 쌓을지, 사이 간격(padding)을 얼마나 둘지만 정하면 나머지는 자동입니다.
배치 방식 비교
| 배치 방식 | 특징 | 적합한 경우 |
|---|---|---|
| 가로 일렬 | 한 줄로 나열, 좌표 계산 단순 | 아이콘 개수가 적을 때 |
| 세로 일렬 | 위로 쌓음, 너비 통일에 유리 | 같은 폭의 버튼들 |
| 격자형 | 정사각형 형태로 압축 | 아이콘이 많고 크기가 비슷할 때 |
| 압축 최적화 | 빈 공간 최소화로 배치 | 파일 용량을 줄이고 싶을 때 |
CSS로 스프라이트 잘라 쓰기
스프라이트를 만들었다면 이제 화면에 원하는 부분만 보여줄 차례입니다. 방법은 정해진 크기의 상자를 만들고 배경 이미지의 위치를 음수 좌표로 밀어 넣는 것입니다.
예를 들어 가로 96px 이미지에 32px짜리 아이콘 3개가 나란히 있다고 합시다. 두 번째 아이콘만 보이게 하려면 상자 크기를 32px로 잡고 background-position을 가로 -32px로 설정합니다. 그러면 첫 번째 아이콘은 상자 왼쪽 밖으로 밀려나고 두 번째 아이콘이 상자 안에 들어옵니다.
이런 좌표 작업을 하다 보면 생성기가 뱉어 준 CSS 코드가 한 줄로 길게 붙어 나와 읽기 어려울 때가 있습니다. 그럴 때 JSON 포매터 같은 코드 정렬 도구로 들여쓰기를 정리하면 어떤 좌표가 어떤 아이콘에 해당하는지 한눈에 파악하기 편합니다.
고해상도 화면 대응
레티나 같은 고해상도 디스플레이에서는 이미지가 흐려 보일 수 있습니다. 이때는 실제 크기의 2배로 스프라이트를 만든 뒤 background-size로 절반으로 줄여 표시하면 선명함을 유지할 수 있습니다.
쓰기 전에 알아야 할 주의점
이미지 스프라이트가 만능은 아닙니다. 다음 경우에는 다시 생각해 봐야 합니다.
- 이미지를 자주 추가하거나 교체하는 사이트라면 매번 스프라이트를 새로 만들어야 해 번거롭습니다
- 크기가 제각각인 큰 사진들은 스프라이트로 묶을 이유가 없습니다
- 아이콘이 단색이고 형태가 단순하다면 SVG나 아이콘 폰트가 더 가볍고 확대해도 깨지지 않습니다
또 한 가지, 합쳐진 이미지 한 장이 깨지면 그 안의 모든 아이콘이 동시에 안 보입니다. 개별 파일이라면 하나만 문제가 생기지만 스프라이트는 전부 영향을 받으니 파일 관리에 신경 써야 합니다.
참고로 좌표나 변환 작업이 필요한 도구들은 종류가 다양합니다. 모스 신호를 다루는 사람이라면 점과 선을 문자로 바꿔 주는 모스 부호 변환기 같은 변환 도구처럼, 작업 성격에 맞는 전용 도구를 골라 쓰는 것이 시간을 아끼는 길입니다.
정리하면 이렇습니다. 아이콘이 많고 거의 바뀌지 않는 사이트라면 이미지 스프라이트 생성기로 한 장에 묶어 요청 수를 줄여 보세요. 반대로 자주 바뀌거나 확대가 필요한 그래픽이라면 SVG를 먼저 검토하는 것이 현명합니다. 지금 쓰는 페이지의 아이콘 개수부터 세어 보고, 10개가 넘는다면 스프라이트 전환을 한번 시도해 보길 권합니다.
