스프라이트(css sprites) 기법으로 '빠른 블로그' 만들기.

얼마전 css sprite를 이용한 끊김없는 마우스오버 이미지를 넣는 간단한 방법을 알아봤었습니다.(참고 -> 여기클릭). 오늘은 블로그에 있는 대부분의 아이콘들을 하나의 이미지로 통합해 하나로 만들어서 http 요청을 줄여 속도가 빠른 블로그를 만드는 방법에 대해 알아보도록 하겠습니다.

블로그는 백그라운드로 이미지를 삽입하든, img src 로 바로 삽입하든, 아무튼 각종 아이콘들로 치장되어 있어서 서버요청 횟수가 상당히 많은 편입니다. 아이콘의 용량이 아무리 작더라도 한번 요청하는데 걸리는 시간이 들기 때문에, 많은 그림파일을 로딩해야 한다면 느려질 수 밖에 없습니다. 블로그 페이지의 로딩속도를 빠르게 만드는 방법은 여러가지가 있는데요, 그 중 오늘 알려드리는 css sprites는 아이콘을 표현하기 위한 수많은 http 요청 횟수를 최소화해서 빠른 블로그를 만들 수 있습니다. 물론 css sprite 사용으로 잃는 것도 있습니다만, 그 부분은 아래에서 좀 더 자세하게 설명해 드리겠습니다.

 

 

 

 

 

 

1. N-MET 다운로드 및 설치 (쉽게 css sprites 코드를 얻을 수 있습니다.)

 

 

먼저 저는 스프라이트 코드를 얻기 위해 네이버에서 만든 N-MET tool을 사용하겠습니다.

링크로 가셔서 OS에 맞는 버젼을 받아서 까시면 됩니다. -> http://html.nhncorp.com/markup_tools/nmet

css 스프라이트 코드를 얻는 방법은 다른 웹에도 있고, 다른 툴도 많이 있으니 맘에 드시는 것 사용하시면 됩니다.

 

참고로 N-MET은 네이버를 서비스하는 NHN 웹표준개발팀에서 만든 도구인입니다.

일반인들에게 NULI(널리)라는 사이트를 통해 배포하고 있으니 공짜로 쓰시면 됩니다.

 

 

 

 

 

 

프로그램을 깔고 실행하면 이 화면이 나옵니다.

N-MET은 CSS Sprite기능 말고도 CSS와 HMTL을 정렬하고,

필요없는 공백이나 문자를 줄여주는 기능도 포함하고 있고요,

CSS 선택자(selector) 검색기능 또한 포함되어있습니다. 그냥 참고만 하세요.

 

 

 

 

 

2. N-MET으로 CSS Sprites용 이미지 만들기

 

 

우리는 스프라이트를 만들어야하니 블로그에 사용하는 이미지를 추가해보겠습니다.

 

 

 

 

 

 

저는 일단 블로그 footer에 있는 각종 SNS 아이콘들과 앰블럼을 추가했습니다.

자동으로 정렬되지만, 원하시면 마우스로 잡고 끌어서 옮기시면 됩니다.

일단 제 블로그 오른쪽에 있는 top버튼의 정보를 한번 확인해 볼께요.

 

 

 

 

 

3. 이미지의 크기와 background-position 값 얻기

 

 

아이콘을 클릭하면 그 아이콘의 크기와 background position(위치)값을 보여줍니다.

선택자는 이미지파일의 이름으로 지정되는데요, 필요하면 바꾸시면 됩니다.

 

제 블로그의 TOP 아이콘은 width:30px; height:30px; 이고,

background position: -160px -120px; 군요.

 

나중에 이 숫자들을 이용해야하니 확인은 이렇게 하면 됩니다.

 

 

 

 

css 백그라운드 이미지는 좌측상단을 기준으로 하기 때문에

sprites 포지션 값은 전부 0 또는 - 값을 가집니다.

왜 이렇게 기준을 잡아야하냐고요?

 

그건 저도 몰라요. 그냥 그래요. ㅎㅎㅎ

 

 

 

 

 

 

한꺼번에 목록형으로 보고 싶으면 왼쪽 위의 '목록형'을 클릭하면 이렇게 볼 수도 있습니다.

전체코드를 보려면 우측하단 '전체 코드 보기'를 클릭하세요.

 

 

 

 

 

 

이렇게 전체코드를 볼 수도 있는데요,

사실 각기 블로그마다 이미지 경로도 다르고 선택자도 다 다르기 때문에 이 건 참고만하세요.

 

 

 

 

 

 

프로젝트를 나중에 다시 불러와서 이미지 위치를 바꾸거나, 추가/삭제 할 경우가 있습니다.

이럴 경우를 대비해서 우측 상단에 '저장'이라는 아이콘 있죠? 이걸 클릭하면 중간에 저장을 할 수 있답니다.

 

일단 저장이 끝나고 이렇게 만들어진 이미지를 저정하려면 우측하단 '내보내기'를 클릭하시고 저장하시면 됩니다.

 

http://html.nhncorp.com/N-MET/guide_public/

 

N_MET의 다른 기능은 위 링크의 매뉴얼을 확인해보세요.

 

 

 

 

 

 

N_MET으로 만들어 얼마전까지 제 블로그에서 사용했던 이미지입니다.

 

자동으로 만들어진 코드는 약간 손보고 사용해도 되고, 아니면 width, height, position 값만 알아내셔도 됩니다.

저도 이렇게 값만 알아내서 이용하고 있습니다.

 

보통 CSS Sprites 기법을 이용할때 가장 어려운 점이 이미지를 관리하는 것과, 이미지 위치값을 찾는 일입니다.

하지만 우리는 NHN에서 만든 N-MET을 이용해 이런 어려움은 쉽게 해결할 수 있답니다.

 

 

 

 

 

4. 코드 적용하기.

 

 

html에서 이미지가 들어가야할 태그에 class 또는 id를 정해주고,

CSS에서 width, height, position 값을 지정해주면 됩니다.

 

 

 

 

 

 

만약, 마우스오버시 다른 이미지가 나오게 하실 분들은 마우스오버 이미지까지 포함해서 sprites를 만든 다음,

위 코드처럼 hover 에서 마우스오버 이미지의 background position을 지정해주시면 됩니다.

 

 

 

 

※ 매우 주의해야할 사항

 

- 블로그 포스팅에 사용되는 이미지는 css sprite로 만들면 안됩니다.

- 만약 인쇄를 하면 sprites로 만들어진 이미지는 인쇄에서 제외됩니다.

- 그러니 블로그용 작은 아이콘에만 사용하시고, 인쇄용에는 사용하지 마세요.

- 너무 큰 이미지를 스프라이트 기법으로 만들면  블로그 방문자 PC의 메모리를 많이 점유합니다.

 

 

어떻습니까, 어렵지않죠?

css sprites를 고민할 정도면 왠만한 코드는 다 알고 있다는 가정하게 적어내렸습니다.

혹시 안되시거나 모르는 것은 공개댓글로 질문해주세요.