이전에 작성한 포스팅(Minify로 CSS, Javascript 압축[gzip] 전송하기)에 이어 웹 페이지 로딩 속도 최적화를 위한 또 다른 방법인 CSS Sprite 사용법을 포스팅하겠습니다. gzip가 웹 문서를 압축해서 전송하는 방법이었다면 CSS Sprite는 HTTP Request를 줄이는 방법의 일환으로 속도 향상의 효과가 아주 뛰어납니다.

웹 문서를 열 때 사용하기 위한 A라는 웹 브라우저가 있다면 이 A브라우저는 동시에 다운로드 할 수 있는 파일의 갯수가 제한되어 있습니다. 예를 들어 example.html이라는 문서가 하나 있고 또 example.html 파일안에는 6개의 이미지를 불러오게 되어 있다고 가정합시다. 그렇다면 A브라우저가 example.html 파일을 다운로드 받아서 열어봤다면 또 다시 이미지 파일 6개를 또 다운로드 해야 할 것입니다. 이때 6개의 이미지를 한꺼번에 다운로드 하는게 아니라 3개 정도를 먼저 다운로드 받고 이 다운로드가 끝나면 이제 나머지 2개를 다운로드 하기 시작하게 되어 있습니다.(물론 호스트가 같을 경우에 한하는 이야기입니다.)
자 그렇다면 문제가 뭘까요? 이미지가 많으면 처리 속도가 떨어지는 건 당연하지만 이런 구조에서 속도를 빠르게 할 수는 없을까요? 웹 문서에는 이미지 말고도 css, javascript, 플래시 등의 여러 파일을 불러와야 하는데 최소한으로 줄여도 불러와야 할 파일은 어차피 불러와야 하므로 그냥 손 놓고 기다려야 할까요? 그래서 사용할 수 있는 것이 CSS Sprite입니다.

CSS Sprite 소개
CSS Sprite를 간단히 설명하자면 30개의 이미지가 있다면 30개의 이미지 파일을 1개로 합쳐서 전송한 뒤에 필요할 때 아까 그 이미지에서 쓸 부분만 적당히 잘라서 보여주는 방법입니다. CSS Sprite는 계정에 따로 별도의 프로그램을 설치할 필요가 없습니다. 웹에서 기본적으로 지원하는 부분인데 잘 알려지지 않아서 쓰이고 있지 않았을 뿐이죠. 대표적인 예로 구글에서도 로딩 속도를 빠르게 하기 위해서 이 방법을 사용하고 있습니다. 물론 호쯔넷에서도 사용하고 있죠. 이해를 돕기 위해 아래 이미지를 보여드립니다

http://www.hozz.net/tc/skin/customize/1/images/sprite2.png
위 이미지는 각각 제각각인 8개의 이미지 파일을 합쳐놓고 sprite2.png 파일 1개로 나타낸 것입니다. 눈치 챈 분도 계시겠지만 호쯔넷에서 사용하는 이미지입니다. 주로 호쯔넷 블로그 하단에 쓰고 있습니다. 원래 8개 이미지를 불러오려면 3~4개를 다운로드 한 뒤에 다시 남은 3~4개의 이미지를 다운로드해야 하지만 CSS Sprite를 사용하다면 저 이미지 파일 하나 불러놓고 필요한 곳에 잘라서 붙이기만 하면 되는 것이죠. 결과적으로 이미지 파일 1개만 다운로드하면 되므로 다른 이미지 파일을 다운로드 할 때까지 기다릴 필요가 없습니다.

CSS Sprite 사용
자 이제 CSS Sprite를 사용해봅시다. 먼저, 하나로 합칠 이미지 파일들을 모아놓고 위 sprite2.png 파일과 같이 만듭시다. 포토샵 같은 이미지 프로그램으로 일일히 작업하셔도 상관없고 CSS Sprite를 사용할 수 있도록 도와주는 사이트도 있으니 그 사이트들을 이용하셔도 좋습니다. (http://spritegen.website-performance.org/) - 더 좋은 사이트가 있었는데 못 찾고 있습니다.;
이미지를 하나로 만들었다면 이제 웹 문서에 파일을 잘라서 넣어봅시다.

▲ 첫 번째 방법 : DIV 태그에 background-position에 필요한 부분의 위치를 정해주고 width, height 값을 줬습니다. 위 sprite2.png 이미지에서 RSS FEED가 맨 위쪽의 맨 왼쪽에 위치해 있기 때문에 background-position을 0px와 0px로 값을 지정했으며, 이미지 자체 크기가 65x16 이기에 width와 height를 똑같이 지정했습니다. 이 방법에는 onclick를 사용해야 이미지에 링크를 걸 수 있습니다.

▲ 두 번째 방법 : 작은 이미지일 경우 span 태그를 사용할 수 있습니다. <span>과 </span> 태그 사이에 스페이스바(&nsbp;)를 넣어서 간격을 조절해야 합니다.

<img src="/tc/skin/customize/1/images/t.gif" style="background: url('/tc/skin/customize/1/images/sprite2.png'); background-position: 0px -99px; width: 220px; height: 40px; /">

▲ 세 번째 방법 : 크기가 1x1이고 투명파일인 t.gif 파일을 하나 따로 만들어서 넣어주는 방법입니다. 사용자에 따라서 이 방법이 가장 편할 수도 있겠습니다. 링크를 걸기 위해서는 a href를 사용할 수 있습니다.

단, 주의할 점은 위 붉은 태그들에서 밑줄이 쳐진 부분을 사용자에 따라서 잘 설정해줘야 한다는 것입니다. background-position 부분에서 왼쪽 숫자 값은 sprite2.png 파일에서 왼쪽으로부터 얼마나 떨어진 곳부터 출력을 시작할 것인가를 나타내고 오른쪽 값은 이미지 위쪽으로부터 얼마나 떨어진 곳으로부터 출력을 시작할 것인가를 물어보는 것입니다.  (마이너스 값이어야 함.)
또한, width와 height도 반드시 지정되어야 하는 값인데 이미지 크기를 넣어주면 됩니다.

호쯔넷 sprite2.png처럼 반드시 이미지들을 줄줄히 가로로 정렬, 세로로 정렬해야 하는 것은 아닙니다. 이미지 용량 크기를 줄이려면 빈 공간마다 그림을 쑤셔넣고 필요한 부분을 지정해서 사용하면 됩니다. 그러나 이런 경우에는 후에 웹 문서를 변경할 때 이미지 위치가 바뀐다면 처음부터 수치를 일일히 다시 확인하고 웹 문서를 수정해야 하기 때문에 번거롭다는 단점이 있습니다.

CSS Sprite는 W3C 웹표준 검사에서 Valid 값을 토해냅니다.
기타 문의사항 있으면 댓글로 달아주시기 바랍니다. 확인하는대로 답변 드리겠습니다.