1. 개념
이미지 스프라이트(Image Sprite)란?
background-image로 사용될 여러 개의 이미지들을 한 개의 이미지로 묶은 후, 각 이미지가 필요한 곳에서는 해당 이미지만을 보여주도록 background-position을 조정해주는 기법입니다.
왜 사용해야 하는가?
페이지 접속 시 서버에게 전송하는 요청(Request)의 개수를 최소화하기 위함입니다.
이미지 스프라이트 비교표
- 스프라이트는 수직 정렬(Vertical) 타입과 바둑판(Tile) 타입 중 필요한 것을 선택하여 사용합니다.
- 수직 정렬 타입의 스프라이트는 이미지 개수가 늘어남에 따라 공간 또한 늘어나서 용량 이슈가 발생하므로, 모바일 환경에서는 바둑판 타입의 스프라이트를 사용하도록 합니다. (위 비교표 참조)
- 각 스프라이트 집합은 타이틀, 버튼, 아이콘, 메뉴(GNB 또는 Tab), 숫자 등 용도별로 나누어 그룹화합니다.
2. 사용 가이드
타이틀 이미지
- 수직 정렬 타입에서 각 개체의 기본 간격은 50px이나, 높이가 크지 않으면 25px로 줄일 수 있습니다.
- 수직 정렬 타입은 좌우에 텍스트가 배치되거나 사이즈가 고정이 아닐 때 사용합니다.
버튼 이미지
- 바둑판 타입에서 각 개체의 기본 간격은 10px입니다.
- 가로 세로 사이즈가 고정일 경우 사용할 수 있습니다.
아이콘 이미지
- 좌측에 배치되는 아이콘은 가장 좌측에, 우측에 배치되는 아이콘은 가장 우측에 배치합니다.
GNB와 Tab 이미지
- Off 상태인 Default 개체가 On 상태 개체의 바로 위에 있도록 합니다.
3. 이미지 용량 및 크기
- PC Web
- 최대 사이즈 : 가로 1024px X 세로 1024px
(모바일 환경에서 PC 웹에 접속하였을 때, 다운로드된 이미지의 사이즈가 1024px이 넘어가면 해당 이미지가 올바르게 표시되지 않으므로 PC 웹에서 가로/세로 사이즈의 제한을 둠)
- 최대 사이즈 : 가로 1024px X 세로 1024px
- Mobile Web
- Css Image : 스프라이트 된 이미지의 용량이 60KB를 넘지 않도록 합니다.
- Promotion image : 스프라이트 된 이미지의 용량이 400KB를 넘지 않도록 합니다.
4. 사용법
Case 1) PNG
PNG로 스프라이트를 만들면 사용될 아이콘의 크기와 개수에 따라 이미지 파일이 커집니다. (PNG 파일 참고)
- background-image에 스프라이트를 연결합니다.
→ div { background-image: url(<이미지 파일 경로>); } - 사용할 이미지의 위치를 background-position을 이용하여 지정합니다.
→ div #one { background-position: 0 0; }
→ div #two { background-position: -36px 0; }
→ div #three { background-position: -72px 0; }
Case 2) SVG
SVG로 스프라이트를 만들면 .svg 파일 내 각 아이콘마다 translate로 위치값이 정해집니다. (SVG 파일 참고)
- background-image에 스프라이트를 연결합니다.
→ div { background-image: url(<이미지 파일 경로>); } - .svg 파일에 기재되어 있는 translate(x, y)를 참고하여 사용할 이미지의 위치를 background-position을 이용하여 지정합니다.
→ div #one { background-position: 0 0; } # transform: translate(0, 0);
→ div #two { background-position: -147px -32px; } # transform: translate(147, 32);
→ div #three { background-position: -90px 0; } # transform: translate(90, 0);
댓글