위와 같이 버튼마다 각기 다른 아이콘을 넣어주려고 한다면 어떻게 할 수 있을까? 가장 간단하게는 각 아이콘의 이미지 파일을 하나씩 하나씩 백그라운드나 img태그에 넣어서 보여줄 수 있다.

그러나, 버튼이 4개가 아니라 100개라면 어떨까? 이미지 파일을 많이 넣게 되면 이미지를 불러오는 시간이 걸릴 뿐만 아니라 서버에도 많은 요청을 해야한다. 이러한 문제에 대한 대안으로 Image Sprites 기법을 이용할 수 있다.

Image Sprites

일종의 이미지 콜렉션이라고 할 수 있다. 하나의 이미지 파일에 여러 이미지를 합쳐서 담는 것이다.

디자이너가 sprites 이미지를 주면 좋겠지만, 주지 않는다고 해도 쉽게 만들 수 있다. 이미 누군가가 제너레이터를 만들어놨기 때문에 우리는 그냥 들어가서 이미지를 넣기만 하면 만들어준다!!

Sprite-Generator
: https://www.toptal.com/developers/css/sprite-generator/

좌측에 이미지 파일을 넣으면 알아서 오른쪽처럼 변환해준다. 각 이미지 사이의 간격도 조정이 가능하다. 그리고, css 코드까지 자동으로 생성해주기 때문에 background-position도 그냥 가져다 쓰면 된다.

주의할 점?

• 만약 sprite 파일이 무진장 커지게 된다면 하나의 이미지를 불러오는데 시간이 오래 걸릴 수 있기 때문에 적절하게 사용해야한다.
• 해당 이미지 파일을 불러오는 것을 실패하면 해당 이미지로 적용된 모든 부분이 안보일 수 있으므로 주의해야한다.

레티나 디스플레이 대응하기

레티나 디스플레이는 애플에서 내놓은 고해상도 디스플레이다. 일반적인 디스플레이와 비교했을 때 적은 공간에 더 많은 픽셀을 채워넣기 때문에 더 선명하게 보이는 특징이 있다.

다만, 고해상도 이미지가 아니라면 레티나 디스플레이에서는 이미지가 흐릿하게 보일 수 있다. 이를 해결하기 위해서는??

기존의 이미지보다 2배 더 큰 이미지로 sprite 파일을 만들고, 그 크기를 반으로 압축해서 사용하면 어느정도 해결할 수 있다.

<ul class="social-list">
  <li>
    <button type="button" class="btn google">구글 계정으로 로그인</button>
  </li>
  <li>
    <button type="button" class="btn facebook">페이스북 계정으로 로그인</button>
  </li>
  <li>
    <button type="button" class="btn naver">네이버 계정으로 로그인</button>
  </li>
  <li>
    <button type="button" class="btn kakao">카카오 계정으로 로그인</button>
  </li>
</ul>

.social-list li{
    position: relative;
}

.social-list .btn::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url(./images/css_sprites.png);
    background-repeat: no-repeat;
    background-size: 96px 96px; /* 절반 크기로 가져온다 */
}
    
.social-list .google::before{
    background-position: -10px -10px; /*sprite-generator에서 생성해준 값의 절반*/
}

.social-list .facebook::before{
    background-position: -58px -58px;
}

.social-list .naver::before{
    background-position: -10px -58px;
}

.social-list .kakao::before{
    background-position: -58px -10px;
}

유의할 점은 2배로 큰 이미지들로 만들었기 때문에 background-size를 절반 크기로 가져와야한다. 그리고 sprite-generator에서 생성해준 background-position의 값도 나누기 2한 값으로 넣어주면 끝!!

오늘의 교훈

이미지 넣는 것도 이렇게 스마트한 방법이 있다니! 세상에는 참 똑똑 한 사람들이 많다👍