[CSS] 이미지 스프라이트 + 백그라운드 & IR 효과

이미지 스프라이트

이번 포스팅에서는 지난번에 올렸던 이미지 유형 03 포스팅에서 활용된 이미지 스프라이트 효과와 백그라운드, IR 효과에 대해 심도 있게 다뤄보도록 하겠습니다.

---

이미지 스프라이트(Image Sprite)란?

여러 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹을 제작하다보면 사용되는 이미지 수는 기하급수적으로 증가하게 될 것이며 그만큼 웹 브라우저가 서버에 요청해야 할 이미지의 수가 늘어나게 되므로 로딩 시간이 오래 걸리게 된다. 하지만 이미지 스프라이트를 사용한다면 요청해야 할 이미지의 수를 줄여 로딩 시간을 절약하는 것이 가능하다.

Figma 예제

다음 예제는 SNS 공유 기능을 위한 아이콘(36x36px 사이즈)을 14px 간격으로 떨어뜨려 아이콘 하나당 50px씩 차지하도록 레이아웃을 짜 놓은 이미지 스프라이트 예제이다. 해당 이미지 스프라이트 프레임을 SVG 파일로 추출하여 사용 가능하다.

HTML 코드 예제

Figma 예제에서처럼 아이콘 여러개를 배치한 후 SVG 파일로 무사히 추출해냈다면 이제 HTML 영역에 아래와 같이 코딩하도록 한다.

<div class="image__sns">
    <a href="#" class="link"><span class="ir">공유하기</span></a>
    <a href="#" class="link"><span class="ir">Twitter</span></a>
    <a href="#" class="link"><span class="ir">Instagram</span></a>
    <a href="#" class="link"><span class="ir">YouTube</span></a>
    <a href="#" class="link"><span class="ir">Facebook</span></a>
</div>

CSS 코드 예제

이제 CSS 코드에서 본격적으로 이미지 스프라이트와 IR 효과, 백그라운드 효과를 활용해보자.

01. 먼저 출력해주고자 하는 image__sns 태그의 a 영역에 백그라운드 효과로 Figma로 생성한 이미지 스프라이트용 SVG 파일을 출력시켜주도록 한다.

02. 그런 다음 nth-child를 이용해 background-position을 -50px 단위로 옮겨주면서 각각의 다른 아이콘들을 출력시켜준다.

03. 그런 다음 IR 효과를 이용해 방금 전 HTML 코드 예제에서 입력해뒀던 텍스트를 보이지 않도록 작업한다. 이는 시각 장애인용 스크린 리더기에는 텍스트가 읽히도록 하면서 동시에 비장애인들에게는 텍스트가 보이지 않도록 하기 위함이다.

.image__sns a {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin-bottom: 5px;
    background: url(img/image_bg03_icon.svg);   /* 백그라운드로 아이콘 5개 만든거 출력하기 */
}

/* 이미지 스프라이트 */
/* 아이콘 5개를 이어 만든 프레임을 SVG로 추출하여 그 좌표값을 아래와 같이
    옮겨가며 아이콘 하나씩 보이도록 하는 기법 */
.image__sns a:nth-child(1) {    
    /* 첫 번째 아이콘은 그대로 */
}
.image__sns a:nth-child(2) {
    background-position: -50px 0;
}
.image__sns a:nth-child(3) {
    background-position: -100px 0;
}
.image__sns a:nth-child(4) {
    background-position: -150px 0;
}
.image__sns a:nth-child(5) {
    background-position: -200px 0;
}

/* ir 효과 (이미지 대체 효과 == alt) */
/* 화면상에서는 안나오게 함과 동시에 스크린리더기에는 읽히게 하는 작업 */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

코드펜 결과

사용된 SVG 파일