Korean English Japanese

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)의 위치를 얻는 방법

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