CSS Sprites는 최신 기법들을 많이 연구하고 적용하는 포털사이트에서 자주 볼 수 있는 기술입니다.
프로그램 개발을 할 때에 마젠타 배경(투명으로 인식, 마스킹)에 아이콘 여러 개를 넣은 이미지를 쓰는 것과 비슷합니다.
여러 이미지 파일을 일일이 부르는 것이 아니라
이미지 파일 하나로 통합한 후 Background로 Position을 잡아주면
하나의 이미지만 로드되어 트래픽을 절약하고 HTTP 요청 횟수를 줄여 빠른 웹 브라우징을 가능하게 해 줍니다.
저는 이 스프라이트 기법을 쉽게 적용할 수 있게 하는 방법을 설명해드리려 합니다.
이 기법에 대해 궁금하신 분들은 스프라이트 기법에 대해 자세하게 설명이 된 포스팅이 있으니 참고하시면 됩니다.
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에서 설치방법을 올려주셨으므로 직접 다운로드페이지를 참고하셔서 진행하시면 됩니다. (설치방법은 쉽습니다.)
2. N-MET로 CSS Sprite용 이미지 만들기
N-MET는 Naver 사내용 프로그램이기 때문에 CSS Sprite기능 말고도
CSS와 HTML을 사내에서 정의한 컨벤션에 맞게 보정해주는 기능과 CSS 선택자 검색기능도 포함되어 있습니다.
우선 하단에 있는 «내보내기» 버튼을 통해 생성된 이미지를 저장해주세요. (PNG 파일로 저장됩니다.)
생성된 이미지 목록에서 Background Position(위치) 값을 알고자 하는 이미지를 클릭하시면 간단한 CSS Spright용 코드와 함께 Position과 Width, Height값을 얻을 수 있습니다.
CSS 선택자는 추가 할당 시 이미지 파일이름으로 지정됩니다. (물론 수정도 가능합니다.)
프로젝트가 진행 중이거나 나중에 수정해야 할 경우 (이미지변경·추가·삭제시) 걱정하지 마세요.
프로젝트파일로 작업 내용을 그대로 저장할 수 있습니다.
상단바에서 «프로젝트 명»을 적어주시고, «저장» 버튼을 누르시면,
json파일로 저장되고 추후 다시 불러와 수정이 가능합니다.
마무리
보통 CSS Sprites 기법을 이용할 때 가장 힘든 점이 이미지를 통합·관리하는 점과,
이미지 위치값을 찾는 일입니다.
NAVER에서 개발해 주신 N-MET 프로그램을 통해 이러한 어려움을 쉽게 해결할 수 있습니다.
자동으로 생성된 CSS코드가 마음에 들지 않을 경우엔 Width, Height, Position값만 알아내어 직접 CSS 코드를 작 성하면 되니까 편하지요? (저도 값만 알아내어 직접 CSS 코드를 작성해 사용하고 있습니다.)
2024년 현재는 Adobe Flash 기반 기술이 사라지기도 했고 Nuli에서는 더이상 M-NET를 배포하지 않습니다.
지금은 보통 개발단에서 빌드시 자동으로 스프라이트 기술이 적용
되도록 하고 있으며,
그렇지 않을경우 온라인 툴을 활용하기도 합니다.