Mac에서 CSS 스프라이트 시트 만들기
아이콘을 하나의 이미지로 묶고 각각을 표시할 CSS와 HTML 미리보기를 만들어요.
Mac의 스프라이트 시트 만들기
샘플 파일을 사용한 앱 스크린샷.
스프라이트 시트 만들기 사용 방법
- 1
아이콘을 놓으세요
이미지를 두 장 이상 추가하세요. 각 파일 이름이 CSS 클래스가 되므로 먼저 “search.png”, “cart.png”처럼 이름을 잘 지어 두세요.
- 2
간격과 접두어 설정하기
아이콘 사이 간격과 CSS 클래스 접두사를 고르세요.
- 3
레티나 아이콘 표시하기
아이콘이 @2x라면 레티나 옵션을 켜세요. 절반 크기로 선명하게 표시돼요.
- 4
시트 만들기 클릭
아이콘은 여러 줄로 배치되어 sprite.png로 저장되고, sprite.css와 preview.html 페이지와 함께 다운로드 › OneMacTools의 날짜별 폴더에 들어가요.
- 5
사이트에 사용하기
sprite.png와 sprite.css를 함께 두고 CSS를 연결한 다음 요소에 클래스를 추가하세요. preview.html을 열면 모든 클래스를 볼 수 있어요.
스프라이트 시트 만들기의 기능
크기에 상관없이 아이콘을 여러 줄로 빽빽하게 배치하고, 각 아이콘에 알맞은 위치와 크기를 담은 CSS 클래스를 만들어 주며, 미리보기 페이지에서 모두 보여 줘요. 아이콘 사이 간격, 클래스 접두어, 레티나 화면에서 선명하게 보이도록 @2x 아이콘인지를 설정하세요.
이럴 때 좋아요
- 아이콘 세트를 한 번의 요청으로 불러오기
- 게임 스프라이트 시트 만들기
- 웹사이트용 국기나 이모지 묶기
옵션 설명
- 아이콘 간격
- 0, 2, 4 또는 8 px이며 기본값은 2 px예요. 약간의 간격을 두면 페이지를 확대했을 때 이웃한 아이콘이 번져 보이지 않아요.
- 아이콘은 @2x(Retina 화면에서 선명하도록 절반 크기로 표시)
- 기본값은 꺼짐이에요. 켜면 CSS가 모든 아이콘을 픽셀 크기의 절반으로 보여 주고 시트도 그에 맞게 조절해서, 두 배 해상도 아이콘이 레티나 화면에서 선명하게 보여요.
- CSS 클래스 접두어
- 모든 클래스 이름의 시작 부분이며, 비워 두면 “icon”이에요. 접두어가 icon이면 “search.png”는 .icon-search가 돼요.
권장 사항
- 시작하기 전에 파일 이름을 소문자와 하이픈으로 지으세요. 클래스 이름이 파일 이름에서 만들어지고, “@2x”는 자동으로 빠져요.
- 어떤 페이지 색상에서도 어울리도록 투명 배경의 아이콘을 쓰세요.
- 표시 크기의 정확히 두 배에 짝수 픽셀 크기로 레티나 아이콘을 만들어야 절반으로 줄였을 때 픽셀이 딱 떨어져요.
- 그다음 PNG 압축으로 sprite.png를 압축하세요. 아이콘 시트는 팔레트 PNG로 만들면 훨씬 작아지는 경우가 많아요.
- 아이콘이 확대·축소되거나 페이지를 확대해서 볼 경우라면 간격을 2 px 이상으로 쓰세요.
함께 쓸 수 있는 곳
- 입력
- 크기와 상관없는 이미지 두 장 이상. 보통 PNG 아이콘이에요.
- 출력
- sprite.png(모든 아이콘을 한데 모은 이미지), sprite.css(아이콘마다 크기와 위치가 담긴 클래스 하나), preview.html.
- 크기가 다른 아이콘을 키가 큰 것부터 여러 줄로 빽빽하게 배치해요.
- 이름이 같은 파일에는 -2처럼 번호가 붙은 클래스가 생겨서 빠지는 것이 없어요.
스프라이트 시트 만들기에 관한 질문
CSS 스프라이트 시트란 무엇인가요?
여러 아이콘을 담은 이미지 하나와, 배경을 이동시켜 요소마다 아이콘 하나만 보여 주는 CSS예요. 모든 아이콘을 한 번의 요청으로 불러와요.
웹사이트에서 스프라이트를 사용하려면 어떻게 하나요?
sprite.png와 sprite.css를 같은 폴더에 업로드하고, 페이지에 CSS를 연결한 다음, 요소에 class="icon icon-search" 같은 클래스를 추가하세요.
클래스 이름은 어떻게 만들어지나요?
각 파일 이름에서 만들어요. 접두어 뒤에 소문자로, 공백과 기호는 하이픈으로 바꿔요. 접두어가 icon이면 “Shopping Cart.png”는 .icon-shopping-cart가 돼요.
크기가 다른 아이콘을 사용할 수 있나요?
네. 각 아이콘은 원래 크기를 유지하며, CSS 클래스에 그에 맞는 너비와 높이가 들어가요.
레티나 화면에서 스프라이트를 선명하게 만들려면 어떻게 하나요?
아이콘을 실제로 보여 줄 크기의 두 배로 만들고 @2x 옵션을 켜세요. 그러면 CSS가 절반 크기로 보여 줘서 고해상도 화면에서 선명하게 보여요.
게임 스프라이트에 쓸 수 있나요?
네. sprite.css에 시트 위 모든 이미지의 위치와 크기가 나와 있어 게임 엔진이나 캔버스 코드에서 읽어 들일 수 있어요.
스프라이트 시트 만들기이(가) 내 파일을 업로드하나요?
아니요. 스프라이트 시트 만들기은(는) 전적으로 Mac에서 실행되므로 파일이 Mac 밖으로 나가지 않고 오프라인에서도 작동해요.
스프라이트 시트 만들기이(가) 원본 파일을 바꾸나요?
아니요. 결과는 다운로드 › OneMacTools의 날짜별 폴더에 새 파일로 저장되고, 따로 적힌 옵션을 켜지 않는 한 원본은 그대로 남아요.
스프라이트 시트 만들기에는 무엇이 필요한가요?
macOS 26 이상이 설치된 Mac만 있으면 돼요. 따로 설치할 것은 없어요.
다음으로 할 일
색상 수를 줄여 투명도는 유지하면서 PNG를 60–80% 줄여요. 스크린샷, 로고, 아이콘에 딱 맞아요.
이미지를 Base64로이미지를 HTML, CSS, JSON에 바로 붙여 넣을 수 있는 Base64 데이터 URI로 바꿔요.
관련 이미지 도구
PNG, JPEG, HEIC, AVIF, TIFF 간에 변환해요. WebP, RAW 등도 읽을 수 있어요.
이미지 압축실시간 전후 미리보기와 함께 이메일과 웹용으로 사진을 줄여요.
WebP로 변환투명도를 유지한 채 손실 또는 무손실 방식으로 작은 웹용 WebP 이미지를 만들어요.
이미지 크기 조절긴 변, 정확한 픽셀, 비율 또는 원하는 DPI에서의 cm, mm, 인치 인쇄 크기로 크기를 조절해요.
이미지 자르기화면비나 정확한 영역으로 자르거나 단색 테두리를 자동으로 잘라내세요 — 사진 한 장이든 폴더 전체든.
이미지 회전 및 뒤집기사진을 한 번에 회전하거나 반전해요.
