그동안 많은 과제들이 오고 가고 해서 여유시간이 없었는데 드디어 여유로운 시간이 있어서 오랜만에 정리를 한다. 하얗게 불태운다는 것이 이런 것일까..?🔥
아무튼 오늘은 "이미지 스프라이트 기법"에 대해서 살펴볼 것이다.
이미지 스프라이트 기법이란?
스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미한다.
예를 들어, 아래의 이미지처럼 4개의 로고를 하나의 이미지를 합치는 것이다.
이미지 스프라이트 사용법은?
이미지 스프라이트는 <img>태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입한다.
우선 삽입하기 위한 태그를 작성한다.
나는 아래의 소스코드처럼 <a>태그의 가상요소 ::after를 사용하여 이미지를 넣어볼 것이다.
<a href="#" class="naver">네이버</a>
<a href="#" class="fb">페이스북</a>
<a href="#" class="google">구글</a>
<a href="#" class="kakao">카카오</a><a>태그를 작성한 후 가상요소 ::after를 CSS에서 설정한다.
a::after {
content: "";
display: block;
width: 28px;
height: 28px;
background-image: url(./asset/images/css_sprites.png);
}
.naver::after {
background-position: -58px -58px;
}
.fb::after {
background-position: -10px -10px;
}
.google::after {
background-position: -58px -10px;
}
.kakao::after {
background-position: -10px -58px;
}위의 코드처럼 이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 속성이 있다.
width,height: 삽입할 이미지의 크기를 결정한다.background-image: 삽입할 이미지의 경로를 설정한다.background-position: 이미지에서 사용할 이미지의 위치를 설정한다.
스프라이트된 이미지를 background-image를 통해 ::after에 적용하고,
background-position을 통해 위치를 잡아주면 된다.
쉽게 그림으로 설명해보겠다. 왼쪽 상단의 (0,0) 모서리를 기준으로 설정하고,
x축, y축의 거리를 계산하면 위의 소스코드처럼 수치가 나오는데, 그것을 background-position의 값으로 x축, y축을 적용시켜주면 된다.
그러면 스프라이트 이미지는 어떻게 만들까?
스프라이트 기법이 적용된 이미지를 일일이 붙여서 만들면 시간 소요가 생각보다 될 것이며 오차가 발생한다면 올바른 이미지가 적용이 안될 수가 있기 때문에 우리는 만들어주는 프로그램을 이용해보도록 하자.
아래의 링크는 CSS Sprites Generator라는 프로그램이다.
https://www.toptal.com/developers/css/sprite-generator/
위를 들어가보면 간단한 UI로 만들어볼 수 있다.
이미지를 업로드하면 이미지 완성본을 기준으로 각각의 이미지마다 background-position값이 나오는데 그 값을 각각의 이미지에 맞는 값을 적용시키면 아래처럼 정상적으로 출력되는 것을 볼 수 있다.
유용한 프로그램이니 즐겨찾기 하도록 하자! 😉
그럼 이미지 스프라이트 기법은 왜 사용하는 걸까? 장점을 알아보자🤔
왜 굳이 이미지를 하나로 합쳐서 사용하는 걸까?
1. 이미지 로딩 속도 향상(최적화)된다.
아래의 소스 코드처럼 일반적으로 <img>태그를 통해 이미지를 삽입하는 것이다.
<img src="./images/naver.png" alt="naver">
<img src="./images/facebook.png" alt="facebook">
<img src="./images/google.png" alt="google">
<img src="./images/kakao.png" alt="kakao"><img>를 이용하여 각각의 이미지를 하나씩 삽입할 때 브라우저의 로딩 시간은 얼마나 걸릴지 확인해보자.
위의 이미지에 빨간 박스를 확인해보면 최소 3.7밀리초, 최대 7밀리초 정도 소요된다고 기록되어있다.
하지만, 이미지 스프라이트 기법을 통한 이미지를 background 속성을 사용해서 불러온다면?
각각의 이미지를 가져오는 것보다 적은 약 3밀리초 정도 소요된다고 기록되어 있다.
이를 보면 알 수 있듯이 이미지의 로딩 속도가 매우 빠른 것을 볼 수 있다.
왜냐하면 여러 개의 이미지를 받아야하는 전자의 경우에 비해 스프라이트 이미지를 딱 하나만 받아야하는 브라우저의 입장에서는 후자가 빠를 수 밖에 없다.
2. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다.
아무래도 CSS로 컨트롤하지 않고 일일이 HTML의 <img>에 적용을 시킨다면 텍스트도 늘어날 것이고, <img>태그로 인해 스크린 리더가 하나 하나씩 읽게 될 것이다.
그래서 이미지 스프라이트 기법을 통해 이미지를 background속성으로 적용하게 되면 스크린 리더가 읽을 필요가 없는 "배경 이미지"로 인식하게 되어 탐색 속도가 향상될 수 있다.
즉, 이미지 스프라이트 기법은 되도록 의미가 없고 디자인을 목적으로 하는 이미지를 위해 사용하는 것이 적합하다.
3. 하나의 파일만 관리하면 된다.
이미지 스프라이트 기법으로 합친 하나의 이미지는 당연히 여러가지의 이미지를 관리하는 것보다 간편하다.
하지만, 문맥에 관련된 이미지만 묶는 것이 좋다. 왜냐하면 아무 이미지나 묶을 시 "여러 개의 이미지를 하나의 이미지 파일"에 관리하는 것이기 때문에 번거로움이 그대로 유지될 것이다.
하지만 단점도 있다😡
1. 상황에 따라 유지보수가 어려울 수 있다.
위의 장점에서 파일관리가 쉽기 때문에 유지보수가 잘된다고 했다.
하지만 만약 웹페이지가 업데이트됨에 따라 이미지가 추가가 된다면 스프라이트 이미지를 다시 만들어야하는 번거로움이 있다.
이미 만들어진 이미지 파일은 각각의 포지션 값이 정해져있기 때문에 이미지 파일을 바꾸면 이전에 적용되어 있던 설정값들은 모두 다시 바꿔줘야하는 번거로움이 발생한다.
그래서 만약 이미지가 "수정"이 잦은 이미지라면 개별적인 이미지 파일을 사용하는 것이 적합하다.
2. 데이터 관리에 문제가 생기면 이미지의 로딩이 불가능하다.
여러 개의 이미지 파일을 이용하여 이미지를 삽입했을 때 하나의 이미지가 문제가 발생한다면 문제가 생긴 하나의 이미지 파일만 수정을 하면 된다.
하지만 스프라이트 이미지는 모든 이미지가 합쳐져 있기 때문에 이미지 파일에 문제가 생긴다면 스프라이트 이미지가 적용된 부분에서는 이미지를 볼 수 없는 상황이 발생한다.
정리를 마치며 ⛳️
최근 배운 내용을 정리하는 시간이 매우 적어지고 있는 것 같아 한편으로는 새로운 스택을 쌓는다라는 생각도 있지만 혼자 온전히 공부하는 시간이 별로 없는 것 같아 아쉬운 마음도 있다.
하지만 지금 정리한 내용을 지금 정리하지 못한다고 해서 실무에서 아예 사용 못하는 것도 아니니 걱정하지 않기로 했다.
나에게는 구글링이라는 좋은 기술이 있으니까..!
오랜만에 정리를 하니 머리 속에서 정리가 된 느낌이라 기분이 좋다.
여유가 나면 다시 내용을 정리하는데 불태워야 겠다. 🔥
