TIL 17 :: IR(Image Replacement) & Image Sprite

---

IR(Image Replacement) 

---

디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법을 배워봅니다. 이미지 대체텍스트 제공을 위한 CSS 기법으로 이미지 대체 텍스트를 제공할 수 있으며, 이 중 다음과 네이버를 기준으로 소개하고자 한다. 

 

1. 다음

ir-pm

1) PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

text-indent는 들여쓰기(양수)와 내어쓰기(음수)를 할 수 있는 속성으로 기본값은 0이다. 값을 -9999px;을 주었는데 그렇다면 왼쪽으로 9999px만큼 이동되어있어야한다. 하지만 overflow: hidden;으로 감추었기때문에 다음 홈페이지를 들어갔을때 사용자의 눈에는 보이지 않게된다. 

 

2) Mobile용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때

.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
}

-  transparent 키워드는 IE9부터 사용 가능하기 때문에 PC에서는 빠져있다.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent> 

 

Screen out

 

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

- 스크린리더가 읽을 필요는 없지만  마크업 구조상 필요한 경우

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용한다.

 

ir_wa

.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

중요한 이미지 대체텍스트로 background-image 로딩에 실패하였을 때 도 대체 텍스트를 보여주고자 할 때 사용하는 기법으로 이미지로 대체 할 요소에 z-index:-1을 이용하여 화면에 보이지 않게 처리한다.

 

 

다음페이지로 보면서 확인해보기!

예시로 다음페이지에서 보면 검색 아이콘은 <button>안에 <span>이 들어가있는것을 확인할 수 있다. 

백그라운드 이미지를 앞에, 글자를 뒤에 배치한다. 

 

두 개를 넣는 이유가 뭘까?

- 디자이너가 디잔인한걸로 넣고 혹시나 이미지 로딩이 실패했을 경우를 대비해 이미지 뒤에 텍스트를 넣어둔 것이다. 

 

display:none; 아예 없는 요소

스크린리더가 굳이 읽을 필요가 없는거는 display none, overflow hidden 둘 중 하나를 했을때 웹표준 위반이 된다. 

 

다음 페이지를 분석하다 알게 된 것은 내부css를 여러개로 구분해서 줬는데 외부CSS가 import가 안 될 경우를 대비해 무슨일이 있더라도 보여주겠다는 의지인것을 보여줄 수 있다...(의지의 다음)

 

속도적인 측면도 생각해볼 수 있는데 이미지 로딩 속도 테스트를 해보고싶다면

네트워크 - 느린3g로 테스트해보면 된다! (너무 느려서 보다가 답답하긴하다)

 

ir-pm - PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때와 ir_wa 이 두가지 기법은 img태그에 넣는 alt 대신에 백그라운드 이미지판 alt라고 생각하면 쉽다. 그라운드 이미지로 어떤 정보를 표현하고자 할 때 내용을 텍스트로 읽을 수 있도록 한다 정도로 이해하면 될 것 같다. 

 

 

---

네이버 기준

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

IE 구버전에서는 스크린리더가 인식을 못하는 경우가 있기 때문에 margin: -1px; 을 사용하거나 clip 속성을 통해 요소를 잘라내는것도 가능하다.

 

출처: can i use

왜 clip을 사용해야할까? 

- 크로스브라우징 요소의 특정 부분만 나오도록 할 수 있다.

 

 

참고) clip-path 시뮬레이터 사이트

https://bennettfeely.com/clippy/

Clippy — CSS clip-path maker

 

---

CSS Sprite 기법

---

여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법이다.

이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집할 수 있다.

 

그렇다면 툴을 잘 다루지 못하는 사람들은 어떻게 해야할까?

 

이런 고민을 할 개발자들을 위한 사이트인 image sprite generator  에서 이미지들을 조합할 수 있다. 순서나 배치를 바꾸기는 어렵지만 간단한 이미지 스프라이트라면 시간절약도 되고 에디팅 앱보다 효율적일 것이다. 무엇보다 좌표도 바로 알려주어 굉장히 유용하다.  

 

 

레티나 대응하기

https://zinee-world.tistory.com/542

[CSS] 이미지 스프라이트(image sprite) 레티나 대응하기