본문 바로가기

Blog/Thoughts

반응형 스킨제작시 스프라이트 이미지 때문에 발생하는 애로사항들...


현재 로딩속도 비약적 향상을 목표로 삼고 베경 이미지를 제외한 모든 이미지 요소를 스프라이트로 대체 했습니다. 하지만 이에 따른 예상치 못한 문제들이 속속들이 드러나고 있습니다. (오른쪽 플로팅 메뉴 주목)



하지만 옆에 플로팅 요소를 보면 아시듯이 스프라이트를 사용하면 img 요소로 바로 심는 것이 아니라 div나 span을 놓고 거기에 background-img를 사용해서 스프라이트를 CSS로 넣는 방식으로 가야합니다.


사실 이미지 파일 주소를 일일히 쳐넣는 것보다 단일 이미지 파일에 스프라이트 위치만 불러오면 되어 스타일링이 상당히 빠르고 편하지만 요소자체의 크기는 변하되 배경 이미지의 크기는 변하지 않아 반응형 이미지의 구현이 쉽지 않다는 단점이 있습니다.



다음도 현재 개편을 하여 큼직큼직한 스프라이트 이미지를 사용하고 있는데요, 네이버 다운로드도 반쪽자리 반응형이 되었는데 반응형 웹페이지가 아니라는 점은 스프라이트 요소로 로딩 시간을 벌되, 반응형 구현이 힘들어서가 아닐까 합니다.


어찌됐든 꼼수를 통해서 해결하려고 하고 있지만 반응형과 스프라이트는 공존하기 힘든 존재인것은 부인 할수가 없는것 같습니다. ㅠㅠ