Erzsamatory Weblog


모바일을 이용하여 웹 페이지를 검색하는 사람들이 늘어나면서 홈페이지 관리자는 최적화를 생각하지 않을 수 없게 되었습니다. 여기에서 설명할 CSS 스프라이트 기법은 웹 사이트 최적화 방법 중 하나입니다. 용량이 작은 여러 개의 이미지 파일을 하나의 파일로 통합하여 웹 페이지를 불러오는 속도를 향상시키는 방법입니다. CSS 스프라이트 기법을 사용하려면 이미지 재구성을 해야 하며 복잡한 CSS 구문을 작성해야 합니다. 때문에 초보자는 CSS 스프라이트 기법을 사용할 엄두조차 못 내는 것이 현실입니다. 하지만 이 글에서 소개하는 사이트를 이용하면 초보자도 매우 쉽게 CSS 스프라이트 기법을 구현할 수 있습니다. 이 사이트는 CSS 스프라이트 기법을 위한 이미지와 CSS 구문을 알아서 작성해주는 사이트입니다.

CSS Sprites Generator: http://cssspritesgenerator.net/


CSS 스프라이트 기법이란?


웹 브라우저에서 웹 페이지를 불러올 때에는 다양한 요소들이 로딩 속도에 영향을 미칩니다. 가장 큰 영향을 미치는 것은 파일의 용량입니다. 파일의 용량이 크면 클수록 페이지 로딩 속도는 당연히 느려질 것입니다. 따라서 웹 페이지 로딩 속도를 빠르게 하기 위한 가장 중요한 작업은 파일의 용량을 줄이는 것입니다. 이것 다음으로 중요한 것이 파일의 갯수입니다. 웹 브라우저에서 불러와야 하는 파일의 갯수가 늘어나면 늘어날수록 로딩 속도가 느려집니다. 왜냐하면 HTTP를 통해서 파일이 전송될 때에는 서버 응답 시간 만큼의 지연 시간이 발생하기 때문입니다. 따라서 파일의 갯수가 줄어들면 웹 브라우저가 웹 서버에 요청하는 파일의 수 역시 줄어들어 로딩 속도가 빨라집니다.

CSS 스프라이트 기법은 웹 브라우저가 불러와야 하는 파일의 갯수를 줄이고자 할 때에 사용될 수 있는 방법입니다. 일반적으로 웹 페이지에는 여러 개의 이미지가 사용되는데, 이러한 이미지들을 단 한 개의 파일로 만든 후, CSS를 통해서 적당한 이미지 영역을 불러오는 방법을 사용하면 로딩 속도를 획기적으로 빠르게 할 수 있습니다. 바로 이 방법이 CSS 스프라이트입니다.

CSS 스프라이트 소스코드 자동 생성 사이트


CSS Sprites Generator: http://cssspritesgenerator.net/

CSS 스프라이트 기법은 웹 사이트 최적화를 할 때 매우 좋은 방법이지만, 실제로 이것을 웹 사이트에 적용시키는 것은 매우 어렵습니다. 왜냐하면 여러 개의 이미지를 하나의 파일로 통합하는 과정은 웹 디자인 전문가가 아니면 매우 어려운 작업이 될 것이며, CSS로 적합한 이미지의 영역을 찾는 것 역시 쉬운 일이 아니기 때문입니다.

CSS 스프라이트 기법은 구현 난이도가 높은 방법이기 때문에 웹 개발 초보자가 이 방법을 사용하고자 한다면 큰 고생을 해야만 합니다. 하지만 초보자도 매우 쉽게 CSS 스프라이트 기법을 사용할 수 있도록 해주는 사이트가 등장했습니다. 바로 CSS Sprites Generator 라는 사이트입니다.

CSS 스프라이트 기법을 매우 쉽게 구현할 수 있도록 해주는 CSS Sprites Generator

CSS 스프라이트 기법을 매우 쉽게 구현할 수 있도록 해주는 CSS Sprites Generator



이 사이트의 인터페이스는 매우 단순합니다. 따라서 초보자도 매우 쉽게 사용법을 익힐 수 있습니다. 위 스크린샷에서 볼 수 있는 것처럼 본인의 작업장에서 새로운 CSS 스프라이트 소스코드를 만들 수 있습니다. 이미지를 추가하면 사이트에서 자동으로 한 개의 통합 이미지를 만들어주고, 심지어 CSS 구문까지 자동으로 모두 만들어줍니다. 개발자는 이 사이트에서 생성해주는 파일들을 본인의 사이트에서 그대로 사용할 수 있습니다.

이 사이트에서 생성해주는 파일에는 통합 이미지 파일, CSS 파일이 있습니다. 이 파일을 홈페이지 또는 블로그에서 사용하기 위해서는 일단 이미지 파일과 CSS 파일을 웹 서버에 업로드한 후 HTML 소스코드에서 이미지를 표시하고자 하는 적당한 요소에 자동으로 생성된 클래스를 적용시켜주면 됩니다. 이 사이트의 자세한 사용법은 추후 작성되는 글에서 다루도록 하고, 이 글에서는 이러한 사이트가 있다는 것만 소개하도록 하겠습니다.


마무리


CSS Sprites Generator 사이트는 웹 페이지 최적화를 고려하고 있는 모든 웹 개발자에게 매우 유용한 사이트가 될 것입니다. CSS 스프라이트 기법을 사용하기 위해서는 매우 많은 시간과 노력이 필요한데, 이 사이트를 이용하면 이러한 시간과 노력을 절약할 수 있기 때문입니다. 또한 CSS 스프라이트 기법은 웹 사이트 뿐만 아니라 블로그에서도 사용될 수 있습니다.

블로그에는 아기자기한 아이콘이 많이 사용되는 편인데, 이러한 아이콘들을 한 개의 파일로 통합한 후 CSS 스프라이트 기법을 사용하면 블로그 로딩 속도 향상에 큰 도움이 될 것입니다. 이 글에서는 CSS Sprites Generator 사이트에 대한 간단한 소개만 하였습니다.

이 사이트는 인터페이스가 매우 단순하여 사용하는 방법을 익히는 것이 매우 쉽기 때문에 따로 설명하지 않았습니다. 추후 작성할 글에서는 이 사이트를 이용하여 본인의 블로그 또는 사이트에 CSS 스프라이트 기법을 실제로 적용하는 방법에 대해서 알아보겠습니다.
http://www.erzsamatory.net/trackback/88

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기