웹 최적화 덕목들 중에 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까지 함께 보여준다면 더 바랄게 없겠군.