CSS 이미지 스프라이트란 무엇일까?

이미지 스프라이트(image sprite)

웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러 개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러 개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다.

일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버 요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다.

이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 수 있습니다.

예를 들어, 네이버 포털에 로그인을 하고 메인에서 이러한 부분을 발견할 수가 있는데, 날씨 아이콘의 이미지는 하나의 이미지로 표현되는 것이 아니라, 사실은 이미지의 집합인 이미지 스프라이트에 연결이 되어 있고 일부분만 표현이 된 것입니다.

 

이미지 스프라이트(image sprite)

바로 위의 이미지가 이미지 스프라이트(image sprite)입니다. 위 이미지가 적용된 스타일시트를 살펴보면 아래와 같이 되어 있습니다.

    display: inline-block;
    width: 29px;
    height: 29px;
    vertical-align: top;
    background-position: 0 -68px;

다른 요소보다도 background-position을 통해 가로의 위치의 세로의 위치를 지정하고, 이미지의 사이즈(29px)로 스타일을 주게 되면 위와 같이 딱 저만큼의 부분만 이미지로 적용할 수 있는 것입니다.

 

이미지 스프라이트(image sprite)의 위치를 얻는 방법

하나씩 스타일을 조정하면서 위치를 얻는 방법도 있겠지만, 편한 방법으로 온라인 도구를 사용하는 것이 가장 좋습니다. 스트라이프 카우와 같은 사이트에서는 이미지 스프라이트 위치를 쉽게 찾을 수 있습니다. 따라서, 이미지들을 조합하여 이미지의 집 한인 스프라이트를 생성했고, 그것을 웹페이지에 적용하고자 한다면 해당 이미지를 요청한 뒤 위의 사이트를 활용하여 위치 값을 잡을 수 있습니다.