웹 최적화 덕목 중에 Front-End User Interface 단에서 손볼 수 있는 항목에는 대표적으로 HTTP Requests의 수를 줄여주는 것이 있다. 물론, 여기에 CSS Sprite 기술을 써서 여러 배경 이미지들을 하나로 묶어 상당한 양의 서버 부담을 덜어줄 수 있지만, 문제는 그 적용에 만만치 않은 수작업이 필요하다는 것이다.
그래서, 이런 작업에 손을 덜어주는 여러 CSS Sprite Generator들이 존재하지만, 일일이 한데 묶을 수 있는 알맞은 배경 이미지를 찾아내고, 또 실제 적용될 background position을 계산하는 일은 여전히 개발자의 몫.
하지만, SpriteMe 덕분에 이것도 옛말이고 귀찮음 때문에 실제 적용을 미루는 것도 이젠 핑곗거리밖에 안 될 듯.
SpriteMe의 소개와 사용법은 개발자인 Steve Souders씨의 블로그 글에도 잘 설명되어 있는데, SpriteMe bookmarklet을 웹 브라우저 책갈피에 저장해놓고 필요할 때마다 선택해서 쓰면 된다.
SpriteMe가 기존 CSS Sprite Generator들보다 한 단계 더 진화된 놈이라고 부를 수 있는 이유는, 웹 페이지에 사용된 배경 이미지를 자동으로 찾아서 하나의 sprite 이미지로 사용될 수 있는 놈들을 따로 묶어주고, 이렇게 생성된 sprite 이미지를 시험 삼아 현재 웹 페이지에 바로 적용해서 보여준다는 점이다. 덤으로 각 배경 이미지에 적용될 background position도 함께 계산해서 보여주니, 아주 똑똑한 놈이다.
그런데, 사용하면서 한 가지 주의해야 할 것이, 하나의 CSS Sprite 이미지로 추천된 여러 배경 이미지 중에 서로 그 크기가 많이 차이 나는 배경 이미지들이 한데 묶여있을 경우, 나중에 이 배경 이미지들을 sprite 이미지로 묶어 생성하게 되면 그 크기 만큼의 불필요한 공백도 함께 포함되기 때문에 차이가 크게 나는 배경 이미지는 추천된 배경 그림 묶음들에서 drag out해서 끄집어낼 필요가 있다.
덕분에, 또 간단하게 4개의 requests를 더 줄일 수 있어서 고맙고, 앞으로 실제 바로 적용될 수 있는 CSS까지 함께 보여준다면 더 바랄 게 없겠군.
이곳의 블로그에서도 오른쪽 옆구리 아래에 붙어있는 표딱지 그림들의 경우, 개별 이미지를 사용해서 웹 페이지에 표시하려면 모두 10번의 서버 요청이 필요한데, CSS Sprites 기법을 써서 왼쪽에 보이는 바와 같은 하나의 그림으로 모든 단추의 배경 그림들을 표시할 수 있었다.