이미지 IR 효과와 이미지 스플라이트 기법을 알아보자

이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현

오늘은 이미지 IR 효과에 대해서 알아보겠습니다. 추가적으로 이미지 스프라이트 기법도 소개해드리겠습니다. 제가 이미지 스프라이트 기법으로 백그라운드 이미지를 어떻게 넣고 표현하는지 봐주세요!

이미지 IR 효과

웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있습니드. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없잖아요? 그래서 이미지에 텍스트를 붙여줘야겠죠? 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 웹표준을 준수하는 방법이겠죠?

이렇게 텍스트를 안보이게 처리합니다. 스크린 리더기에는 읽히겠죠?

.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

---

이미지 스프라이트 기법

스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미합니다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미합니다. 주로 네이버에서 이렇게 이미지를 표현하죠.
아니 그러면 왜 이렇게 하나의 이미지에 몰아넣을까요?

		설명
장점	이미지 로딩 속도 향상(최적화)됩니다.	우리가 생각해보면 각각의 이미지 파일을 가져오는 것 보다 한번에 파일하나를 가져오는게 더 빠르겠죠?
	HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다.	우리가 이미지를 표현하기 위해 img 태그를 쓴다면 스크린리더는 여러번의 img태그를 읽어야 하죠? 하지만 이미지 스프라이트 기법을 통해 이미지를 background속성으로 적용하게 되면 스크린 리더가 읽을 필요가 없는 "배경 이미지"로 인식하게 되어 탐색 속도가 향상될 수 있습니다. 그래서 이미지 스프라이트 기법은 되도록 중요치 않은 이미지에 사용합니다. (디자인목적)
	하나의 파일만 관리하면 됩니다.	이미지 스프라이트 기법으로 합친 하나의 이미지는 당연히 여러가지의 이미지를 관리하는 것보다 간편하겠죠?
단점	상황에 따라 유지보수가 어려울 수 있습니다.	위의 장점에서 파일관리가 쉽기 때문에 유지보수가 잘된다고 했죠? 하지만 만약 웹페이지가 업데이트됨에 따라 이미지가 추가가 된다면 스프라이트 이미지를 다시 만들어야하는 번거로움이 있죠.
	데이터 관리에 문제가 생기면 이미지의 로딩이 불가능합니다.	스프라이트 이미지는 모든 이미지가 합쳐져 있기 때문에 이미지 파일에 문제가 생긴다면 스프라이트 이미지가 적용된 부분에서는 이미지를 볼 수 없는 상황이 발생할겁니다.

---

반응형

이미지 스플라이트 기법으로 백그라운드 표현하기

이미지 스프라이트는 img태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다. background : url로 이미지 스프라이트가 있는 파일을 불러와서 background-position 속성으로 원하는 이미지를 가져오면 됩니다. 맨 위 (0,0) 기준을 잡고 본인이 떨어뜨린 위치만큼 계산해서 차례차례 background-position을 설정해 줍니다. 제블로그 이미지유형 03 번에서 인용한 코드를 보시죠.

.image__sns a {
    width: 36px;
    height: 36px;
    background: #000;
    border-radius: 50px;
    display: block;
    margin-bottom: 5px;
    background: url('./img/image_bg03_icon.svg') no-repeat; /* 이미지를 불러오고 (no-repeat : 반복하지 않겠다) */
}


.image__sns a:nth-child(2) {
    background-position: -50px 0;  /* 50px씩 띄워 놨으니까 간격만큼 띄워서 이미지를 불러옵니다. */
}

.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;
}

스플라이트 기법 만들기

처음에 맨 위(0,0) 에서 시작해서 정확한 간격에 맞춰서 이미지를 배치합니다. 그래야 사용할 때 편리하니까요!