스프라이트 기법 (CSS Sprites) 쉽게 적용하기

CSS Sprites는 최신 기법들을 많이 연구하고 적용하는 포털사이트에서 자주볼 수 있는 기술입니다.

프로그램 개발을 할때에 마젠타 배경(투명으로 인식, 마스킹)에 아이콘 여러개를 넣은 이미지를 쓰는것과 비슷합니다.

여러 이미지파일을 일일히 부르는것이 아니라, 한 이미지파일로 통합한 후 Background로 Position을 잡아주어 한 이 미지만 로드되게 함으로서 트래픽을 절약하고 HTTP 요청횟수를 줄여 빠른 웹 브라우징을 가능하게 해줍니다. 저는 이 스프라이트기법을 쉽게 적용할 수 있게하는 방법을 설명해드리려 합니다.

이 기법에 대해 궁굼하신분들은 스프라이트 기법에 대해 자세하게 설명이 된 포스팅이 있으니 참고하시면 됩니다.^^

HTTP 요청 횟수를 줄여줄 수 있는 CSS Sprites 기법

1. N-MET 다운로드 받기

이번 포스팅에서 CSS 스프라이트 기법의 쉬운 적요을 위해 우리를 도와줄 고마운 프로그램인 N-MET 입니다.
네이버를 서비스하는 Naver 웹표준개발 1팀에서 개발한 도구인데요, 일반인들에게 NULI(널리)를 통해 널리 배포하고 있습니다.

NULU 홈페이지 (nuli.navercorp.com)에 접속하신 뒤, 나눔 > FE 개발도구 모음 > N-MET를 클릭하시면 받을 수 있습니다.

N-MET은 Adobe AIR로 만들어져서 Windows와 MAC 둘 다 지원합니다.
MAC에서 CODA 혹은 다른 애디터로 작업하시는분들도 이용 가능하십니다.^^

저는 Windows 사용자이므로, 윈도우용 N-MET을 다운받아 설치합니다. 이미 친절하게 NULI에서 설치방법을 올려주셨으므로, 직접 다운로드페이지를 참고하셔서 진행하시면 됩니다. (설치방법은 쉽습니다.)

설치환경을 설정하고, 설치위치를 잡아주신 후 계속을 눌러줍니다.

Adobe Air 설치약관에 동의하시면 설치가 진행됩니다.

설치 완료 후 N-MET 실행화면

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

N-MET의 주 기능들

N-MET는 Naver 사내용 프로그램이기 때문에 CSS Sprite기능 말고도 CSS와 HTML을 사내에서 규정한 규칙에 맞게 보정해주는 기능, CSS 선택자 검색기능도 포함되어 있습니다.

메인 메뉴에서 Sprites Generator을 눌러줍니다.

이미지 추가를 눌러주세요.

Sprites으로 만들 이미지들을 추가합니다.

이미지 로딩 후 Sprites용 이미지가 생성되었습니다. 우선 하단에 있는 ‘내보내기’ 버튼을 통해 생성된 이미지를 저장해주세요. (PNG 파일로 저장됩니다.)

생성된 이미지 목록에서 Background Position(위치)값을 알고자하는 이미지를 클릭하시면 간단한 CSS Spright용 코드와 함께 Position과 Width, Height값을 얻을 수 있습니다.

CSS 선택자는 추가 할당시 이미지 파일이름으로 지정되니, 참고하시면 됩니다. (물론 수정도 가능합니다.)

뷰타입을 목록형으로 바꾸면, 전체 CSS Code와 CSS 선택자 정보를 볼 수 있습니다.

‘내보내기’ 버튼 옆에 위치한 ‘전체코드보기’를 누르시면 한꺼번에 통합해서 코드를 얻을 수 있습니다.

프로젝트가 진행중이거나, 나중에 수정해야 할 경우 (이미지를 변경, 추가, 삭제할 경우) 걱정하지 마세요.
프로젝트파일로 작업 내용을 그대로 저장할 수 있습니다.

상단바에서 ‘프로젝트 명’을 적어주시고, ‘저장’버튼을 누르시면 .jspn파일로 저장되고, 추후 다시 불러와 수정하시면 됩니다.

마무리

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

Naver에서 개발해주신 N-MET 프로그램을 통해 이러한 어려움을 쉽게 해결할 수 있습니다.

자동으로 생성된 CSS코드가 마음에 들지않을경우엔 Width, Height, Position값만 알아내어 직접 CSS 코드를 작 성하면 되니까 편하지요? (저도 값만 알아내어 직접 CSS 코드를 작성해 사용하고 있습니다.)

어때요, 참 쉽죠?