오늘은 내가 HTML/CSS 수업에서 배우고 감탄을 금치 못했던 기법인 CSS Sprite를 포스팅하고자 한다. 수업에서 이 개념을 배울 땐 사실 이해하는 것에 급급해서 놀랄 여유도 없었는데, 복습하며 알아볼수록 웹페이지의 성능을 엄청나게 향상시키는 참신하고도 경제적인 기법이라 놀라웠다. 이걸 처음 생각해낸 사람의 천재성과, 이 포스팅의 대문이미지를 스프라이트 음료수로나 하고 있는 나의 진부함(+아재력)이 사뭇 비교된다.
CSS Sprite
CSS Sprite란?
- CSS Sprite는 한 웹페이지에 드러나야 하는 여러 이미지를 한 판의 파일에 합쳐놓은 후, 그 파일 하나만 데려와서 필요한 이미지 부분만 보여지게 하는 기법이다.
- 포탈사이트 메인 화면에서 커스텀된 이미지처럼 보이는 아이콘들은 다 이 기법으로 렌더링 된 이미지라고 봐도 무방하다.
- Inspect로 소스코드에 들어가 해당 아이콘의 background-image를 보면 이것저것 다 섞어놓은 큰 이미지파일 원본을 볼 수가 있는데, 대단한 건 아니지만 남의 집 영업비밀 훔쳐보는 것 마냥 재밌다.
CSS Sprite를 왜 쓰는가?
- 브라우저에서 필요한 이미지를 서버에 요청하고 응답받아 보여주는 과정은 그만큼 서버와 브라우저의 통신 상에 수고가 드는 법이다. 메모리 문제와 성능에 있어서 보여져야하는 이미지가 많으면 많을수록 여러번 요청하고 받아내야 하기 때문에 영향을 받는다.
- 이 떄 한 번에 여러가지가 합쳐진 하나의 이미지파일을 요청해서 사용자의 캐시에 받아 저장한 후 이 위에서 필요한 부분만 보여주게 한다면? 서버에 여러번 요청할 필요가 없어 그만큼 경제적인 것이다!
CSS Sprite는 어떻게 쓰는가? (추후 예시 보완 예정)
- 내가 필요한 이미지들의 파일을 확보한다.
- 내가 필요한 부분이 이 파일에서 얼마만큼의 크기를 차지하는지, 어디에 위치해있는지 width/height와 좌표값을 기억한다.
- 보여주고자 하는 이미지의 위치에 박스요소를 만들어 width와 height을 이미지 크기만큼으로 설정한다.
- 위의 박스요소에
background-image로 이미지파일을 불러오고,background-position을 통해 원하는 이미지가 드러나게끔 좌표값을 찍는다. (이미지 파일의 좌상단에서부터 보여지기 시작하므로 좌표값은 음수로 찾아가야 하며, 좌표값이 아닌%를 통해서도 위치를 조절할 수 있다.)
Sprite의 역사와 어원
- Wikipedia의 Sprite 페이지에 따르면, Sprite는 컴퓨터그래픽, 특히 비디오게임에서 매번 새로운 이미지를 렌더링하는 것의 성능 문제 때문에 등장한 기법이라고 한다.
- 어원 또한 재미있고 깜찍한데, 이미지가 비트맵 데이터의 일부로써 보여지는 게 아니라 ‘sprite(요정)’처럼 그 위를 떠다니면서 필요한 부분만 보여주기 때문에 이런 이름이 붙었다고 한다. 참고로 sprite는 spirit과 어원을 같이하는 단어이다.
느낀 점
사람들은 늘 더 효율적인 방법을 찾아낸다. 적게 일하고 많이 벌기 위한 인간의 창의성을 얼마나 아름다운가.
