웹 페이지를 보다 아름답게 꾸미려면 포토샵으로 만든 이미지나 아이콘을 많이 사용하는데 이미지를 사용하는 경우 각 이미지를 잘라서 사용하면 웹페이지 로딩시 이미지당 HTTP Request를 요청하므로 속도가 느릴 수 밖에 없습니다. 그래서 대부분의 웹사이트에서는 이미지를 하나의 큰 이미지에 포함시켜 사용합니다. 이러한 이미지 조합을 스프라이트(Sprites)라고 합니다.
위 이미지는 페이스북에서 사용하는 스프라이트입니다. 이러한 이미지를 만드는 방법은 각각의 이미지를 만들거나 아이콘을 내려받아서 포토샵으로 편집해서 하나의 이미지로 만들 수도 있지만 쉽게 만드는 방법을 제공하는 사이트가 여럿 있습니다. 더구나 스타일시트까지 만들어주니 금상첨화죠. 어떤 사이트는 이미 만들어진 웹페이지에서 스프라이트를 추출해서 이 스프라이트를 기존의 이미지와 대체할 수 있게도 해줍니다.
여기서 사용할 아이콘은 다음의 링크로 가면 있습니다. 무려 1000개의 컬러 아이콘이 무료입니다.
http://www.famfamfam.com/lab/icons/silk/
1. 위아키스닷컴 스프라이트 패드
http://spritepad.wearekiss.com/
위 링크로 가면 다음과 같은 화면이 나옵니다.
내려받은 아이콘을 압축을 풀고 웹브라우저 화면을 축소한 다음 아이콘을 클릭 드래그해서 스프라이트 맵에 올려 놓습니다. 정렬 기능이 있지만 무료의 경우 지원하지 않습니다. 스타일시트에 포지션이 정해지므로 꼭 정렬을 하지 않아도 됩니다. 맵을 늘리려면 우측 하단의 아이콘을 클릭드래그하면 됩니다. 새로운 스프라이트 맵을 만들려면 상단의 Spritemap 메뉴를 사용하면 됩니다. 맵을 로드하거나 저장하는 기능은 유료만 지원합니다. 아이콘의 배치가 끝나면 Fit document메뉴를 클릭하면 이미지가 있는 부분만 잘라집니다. 다운로드 메뉴를 클릭하면 CSS 파일과 스프라이트 이미지가 다운로드 됩니다.
2. 스프라이트 빌더 사이트
위 링크를 클릭해서 아래의 화면으로 이동합니다.
아이콘을 원하는 것만 선택해서 스프라이트로 만들 수 있는 빌더가 있는 곳인데 Select All/Select None 링크가 작동하지 않아서 굳이 하려면 각 아이콘의 체크박스를 해제하는 수밖에 없지만 그럴 만큼 한가하지 않습니다. Downlaod Entire Set을 클릭하면 이미 만들어진 모든 아이콘의 스프라이트와 CSS가 포함된 파일을 내려받을 수 있습니다.
압축을 풀면 단색의 아이콘 스프라이트와 컬러 스프라이트가 있고 CSS 파일도 있으며 각각의 아이콘 이미지도 있습니다.
1000개의 아이콘 스프라이트입니다. 1000 개의 이미지가 들어있는 폴더의 옹량을 보니 3메가가 넘는데 위 이미지는 260K바이트 정도되는군요. 그만큼 스프라이트 이미지가 경제적이죠.
3. 스프라이트 제너레이터 사이트
http://ko.spritegen.website-performance.org/
위 링크를 클릭하면 아래의 화면이 나옵니다.
한국어/조선말을 선택하면 한글로 나옵니다. 한글로 돼있으니 설명이 필요없지만 사용하고자 하는 아이콘을 추려서 zip 파일로 1메가까지 올릴 수 있습니다. 아래로 내려서 여러가지 설정을 하고 다시 내려받으면 됩니다.
4. 스프라이트 미
위 링크를 클릭하면 아래의 화면이 나옵니다.
링크를 클릭드래그해서 북마크바에 놓습니다.
스프라이트를 만들고자 하는 사이트에서 북마크를 클릭하면 창이 나옵니다. make all을 클릭한 다음 export CSS를 클릭하면 다음 화면이 나옵니다.
파일을 내려받을 수 있는 것이 아니라 별개로 저장해야합니다. 이미지 링크가 있는데 일시적인 것이니 링크로 사용하지 말고 이미지를 내려받아서 서버에 저장해서 사용하라고 합니다. 스타일시트도 블럭 설정해서 텍스트 편집기에 붙여넣고 파일을 만들어야 합니다. url도 수정해야겠죠.
