[240115] 이미지 스프라이트와 자동화

 

이미지 스프라이트란?

웹사이트들을 개발자도구로 뜯어보면 네트워크 탭에서 가끔 저런 이미지의 모음들을 볼 수 있다. 이게 이미지 스프라이트이다!

이미지 스프라이트란, 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다.

 

 

이미지 스프라이트, 장점과 단점

장점	단점
서버 요청 횟수를 줄여 로딩 속도를 줄여준다 하나의 스프라이트 이미지 파일만 관리하면 된다	img 태그가 아니라 css의 background-image로 처리되기 때문에 alt 속성을 사용할 수 없다 일부 이미지의 수정이 필요한 경우 파일을 다시 수정해야 한다

 

 

언제 사용할까?

• 의미상 크게 중요하지 않고 디자인적인 이미지의 경우
• 수정이 자주 되지 않는 이미지의 경우

 

 

어떻게 사용할까?

CSS Sprites Generator Tool을 활용할 수 있다!

1. 스프라이트 만들 이미지 선택
2. 패딩 설정
3. 정렬 방식 설정
4. 우측의 만들어진 스프라이트 이미지 업로드
5. 좌측의 코드를 이용해 각 이미지 사용

 

 

문제점

그런데 만약 만들어진 스프라이트 이미지 중 일부만 변경하고 싶으면 어떻게 해야할까?

스프라이트 이미지를 다시 제작해야 하는 상황이 생긴다. 매번 툴을 활용해 수동으로 업데이트를 하는 것은 유지보수 측면에서 좋지 않기 때문에, 자동화 방법을 알아보자!

 

 

gulp

gulp.spritesmith 라이브러리를 사용해보자.

1. 라이브러리 설치 (공식문서 참고)
2. 스프라이트 이미지를 만들 이미지들을 모아둘 폴더와, 스프라이트 이미지 산출물을 관리할 폴더 생성
3. 프로젝트의 가장 바깥쪽에 gulpfile.ts 파일 생성

project
├── gulpfile.ts
├── public
│   ├── images
│   └── sprites
├── src
└── ...

4. 구성한 폴더구조에 맞추어 gulpfile.ts 파일 작성

const gulp = require('gulp');
const spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
  const spriteData = gulp.src('./public/sprites/*.png').pipe(
    spritesmith({
      imgName: 'sprite.png',
      cssName: 'sprite.css',
      padding: 5,
    })
  );

  return spriteData.pipe(gulp.dest('./public/images/'));
});

5. gulpfile.ts가 존재하는 위치에서 gulp sprite 명령어 실행

6. 아래와 같이 결과물이 생긴다!