CSS - 이미지 스프라이트(Sprite)의 정의와 사용하는 2가지 방법

이미지 스프라이트의 정의

스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미합니다.

 

 이미지 스프라이트(Image Sprite)를 사용하면 생기는 장점은 크게 2가지를 이야기할 수 있습니다.

 

1. 요청을 단 한번 만한다.

 

 브라우저는 화면을 그릴 때 필요한 모든 자원(이미지, CSS, JS 등)을 서버에 요청하고 가져와 사용합니다. 서버에 요청하고 가져오는 작업은 일괄적으로 한 번에 이루어지지 않습니다. 서버에 자원을 요청하는 구문이 사용된 횟수만큼 서버에 자원을 요청합니다.

// 서로 다른 아이콘 이미지 3개를 선언하고 사용하는 코드

<img src="icon1.png" > 
<img src="icon2.png" > 
<img src="icon3.png" >

 예를 들어 위와 같은 예제는 서버에서 이미지를 가져오기 위해 서버에 3번의 요청을 합니다. 즉 자원을 사용하는 구문 하나는 서버 요청 하나입니다. 예제 코드는 3번의 이미지 요청을 이야기했지만, 가져와야 하는 이미지가 10개 혹은 그 이상이 되면 서버에 이미지를 요청하기 위해서 많은 브라우저 자원을 사용해야 합니다. 이는 결국 화면을 그리는 속도를 저해합니다.

// 3개의 아이콘 이미지를 하나로 만들고 이미지 스프라이트를 CSS를 이용해서 사용하면
// 한번의 요청으로 3개의 아이콘 이미지를 사용하는 것과 같은 화면을 만들 수 있다.

<img src="icon_total.png" style="..."> 
<img src="icon_total.png" style="..."> 
<img src="icon_total.png" style="..."> 

 그렇기 때문에 하나의 이미지에 여러 개의 이미지를 합쳐서 사용하는 이미지 스프라이트를 사용하면, 서버에 이미지를 요청하는 횟수를 한 번으로 줄 일수 있습니다. 거기에 CSS를 사용하면 이미지 스프라이트(여러 개의 이미지가 하나로 합쳐진 이미지)를 하나의 이미지처럼 보이게 할 수 있습니다. 즉 이미지 스프라이트를 잘 활용한다면, 서버에 이미지 요청하는 횟수를 줄이고 화면을 빠르게 그릴 수 있습니다.

 

2. 하나의 이미지 파일만 관리한다.

 

 이미지 스프라이트는 여러 개의 이미지를 하나로 합쳤기 때문에, 합친 이미지의 개수만큼 관리를 해야 하는 이미지 파일이 줄어듭니다. 관리해야 하는 이미지 수가 줄어든다는 것은 관리하는 대상이 줄어든다는 말과 같기 때문에 유지보수 측면에서도 유리한 점이 있습니다.

 다만 스프라이트 이미지를 만드는 경우는 아이콘들처럼 문맥적으로 같은 유형을 묶어서 사용하는 것이 좋습니다. 아무리 하나의 이미지라도 다른 의미를 지닌 이미지를 합친다면, 하나의 이미지를 관리하는 게 아니라 여러 개의 이미지를 하나의 파일에서 관리하는 것 일 뿐입니다.

이미지 스프라이트 사용법

1. 이미지 스프라이트로 만드는 아이콘

상, 하, 좌, 우 아이콘 이미지

<style>
    .up, .down, .right, .left { display: inline-block; background: url("icon.png") no-repeat; }

    .up { width: 59px; height: 62px; background-position: 0 0; }
    .down { width: 56px; height: 62px; background-position: -60px 0; }
    .right { width: 62px; height: 60px; background-position: -117px 0; }
    .left { width: 62px; height: 60px; background-position: -178px 0; }
</style>

 이미지 스프라이트를 사용하는 경우 CSS의 backgroud와 backgroud-position 속성 설정을 통해 하나의 이미지로 보이게 할 수 있습니다.

이미지 스프라이트와 CSS 활용하기

2. 역동적인 이미지 스프라이트 사용법

모션을 하나로 합친 이미지 스프라이트

 

@keyframes run {
  to {
    background-position: -192px 0;
  }
}

#hero {
  position: absolute;

  width: 64px;
  height: 64px;

  background: url('./hero.png') no-repeat 0 0 / auto 64px;
  animation: run 0.5s infinite steps(3);
}

 CSS의 backgroud, backgroud-position에 뿐만 아니라, @keyfraems, animaition 기능도 같이 사용하면 움직이는 것처럼 보이는 화면을 만들 수 있습니다. 이전에는 자바스크립트 코드를 많이 사용해야 했지만 CSS가 자체적으로 애니메이션 기능을 제공함으로써 간단한 코드로도 쉽게 아래와 같은 화면을 만들 수 있습니다.

역동적인 이미지 스프라이트 활용 방법

 위에서 제시한 예제 코드는 첨부파일로 제공합니다. 필요하신 분은 첨부파일을 다운로드 받아서 사용하시면 됩니다.

 

이미지 스프라이트 활용법.zip

0.01MB

추가로 키보드 이벤트도 활용하면 게임처럼 움직이는 화면도 만들어 볼수 있습니다.

 

게임처럼 움직이는 이미지 만들기

2021.05.24 - [프로그래밍/Javascript] - Javascript - 키보드 이벤트를 활용한 움직이는 이미지 만들기