이미지 스프라이트 방법시 장점 및 단점과 고려할 사항은?

css에서 이미지 스프라이트(image sprite)를 적용시 장점 및 단점과 고려할 사항은 무엇일까요?


먼저 이미지 스프라이트에 대하여 아래에서 무엇인지 간략히 아실 수 있습니다.

css 이미지 스프라이트란? 관련 링크 바로가기 >
https://webisfree.com/2015-06-10/[css]-css-image-sprites-알아보기

! 이미지 스프라이트 적용시 장단점은?

이미지 스프라이트를 사용하는 가장 큰 이유, 장점은 아래와 같습니다.

- 새롭게 로딩되는 경우의 깜박임 현상 없음
; 이미지는 실제로 사용되기 전 까지는 렌더링되지 않습니다. 이런 이유로 마우스오버시에만 나타나는 이미지 등은 새롭게 로딩되면서 깜박일 수 있죠. 이미지 스프라이트는 미리 모두 로드하기 때문에 이런 현상을 방지할 수 있습니다 

- 모듈 형태로 모아서 관리가 가능
모듈화가 가능하다는 장점이 있습니다. 모듈화를 통하여 컴포넌트화 할 수 있고 커스텀하는데에도 더 간단합니다. 또한 수정사항이에 따른 히스토리를 트랙킹하거나 새로운 업데이트 사항을 전달 받을 때에도 통합하여 전달받을 수 있죠.

! 이미지 스프라이트의 단점은?

먼저 큰 단점은 없습니다. 이미지 스프라이트가 필요한 부분에만 사용하면 되기 때문에 단점이 우려되는 부분은 다른 방식과 함께 사용하면 됩니다. 다만 이미지 스프라이트의 크기가 너무 큰 경우나 각각의 이미지 사이트가 크다면 로딩시 매우 오래 걸리는 문제가 있습니다. 이런 이유로 스프라이트는 비슷한 특징을 가지는 버튼이나 아이콘 등등의 구분을 통해 나누어 사용하는 것이 좋습니다.