css sprite

오늘의 개발 이야기는 LazyBird의 프론트엔드를 책임지고 계신 정이사님이 보내주셨습니다. 최근 저희 Dermaster에 기분좋은 패치가 도착했습니다. 사실 저는 아직 웹초보인 관계로 잘 인식하지 못했는데, 로딩속도를 개선하는 패치였습니다. 받기 전까지만해도 ‘아 이런 패치가 있구나!’ 했는데, 세상에나 적용하고나니 쾌적하다는 표현을 이때 쓰면 되는구나 싶더라고요. 그럼 정이사님이 보내주신 꿀팁 바로 전달합니다.

웹 로딩속도를 개선하는데는 서버로 보내는 request 숫자를 줄이는 것이 중요합니다. 디자인된 버튼이나 아이콘을 개별의 png 파일로 사용하면 페이지 로딩할때보면 일일이 서버에 요청해서 받아오게 됩니다. (물론 초기 로딩 이후에는 캐쉬에 저장되긴 하지만요)

개발자 도구의 network 탭에서 확인할 수 있습니다.

F12 -> network 탭

이 png 파일들을 하나의 파일로 묶어서 css에서 background-position으로 접근하면 저 많은 요청들이 1건으로 해결됩니다!

이미지를 합치는 작업은 자동화 도구로 해결할 수 있습니다.

이번에 진행한 프로젝트에서는 Grunt 를 사용해서 scss 파일과 합쳐진 이미지를 생성하도록 하였습니다. (grunt-contrib-sass, grunt-spritesmith) 아래는 자동화 도구를 사용하여 생성된 scss 파일과 sprite 이미지입니다. scss파일은 이미지별 variable과 mixin으로 구성됩니다.

Dermaster에서 사용 중인 Icon들

버튼 속성을 지정할 때는 자동생성 된 variable과 mixin을 include하면 됩니다. 이미지 이름으로 variable이 생성되므로 네이밍 규칙을 잘 정하면 깔끔하게 작업할 수 있습니다.

Css sprite 기법을 사용하면 페이지 로딩속도도 개선할 수 있고, 아이콘이나 버튼에 마우스 오버했을때 flicker 현상도 없앨 수 있습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다