이미지스프라이트

입사 초기에 마크업 공부한답시고 네이버 홈페이지에서 개발자도구 키고 따라치면서 분석했던 적이 있다.

 

그냥 똑같이 따라치는데, background-image가 이렇게 되어있어서 심히 당황했었다.

 

그렇게 몇달이 지나고 오늘, 이미지 스프라이트 라는 것을 알게 되었다.

 

이미지 스프라이트 기법

https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png

여러 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법

 

해당 기법을 사용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다.

또한 많은 이미지 파일을 개별로 관리하지 않고 특정 스프라이트 이미지만 관리하기 때문에 유지보수가 용이하다.

 

우리 회사도 적용할 수 있을까??

내가 하는 업무는 마케팅팀과 함께 회사 랜딩페이지를 유지보수 하는 일이다.

현재 회사 랜딩페이지의 가장 큰 문제는 로딩으로 인한 액박(말하자면 길다. 레거시의 총체적집합소이기 때문에 간단하지 않음)이다.

이미지 스프라이트로 로딩을 줄일 수 있다는 문장을 읽고 한껏 기대에 벅차올랐지만 금방 시들어들었다.

 

왜냐하면 이미지 스프라이트 기법은 자주 변동되지 않는 이미지들에 적합하기 때문이다.

 

만약 이미지 스프라이트 기법을 사용하는 이미지들이 자주 변경된다면 그때마다 스프라이트 이미지도 매번 새로 만들어야 할 것이다.

 

때문에 그럴바에는 개별적으로 관리하며 매번 교체해주는 것이 편하다.

 

우리 회사 랜딩페이지의 이미지, 문구들은 어드민페이지를 통해 마케터 분들이 관리하고 있다. 때문에 이미지들이 아주 잦은 주기로 교체된다. 

 

결국 혼자서 북치고 장구치고 기대에 들떴다가 이내 '우리의 액박 문제를 해결할 솔루션은 아니다' 라는 결론을 내렸다.

 

역시 해결책은 어드민을 새롭게 만드는 것이다..