[코드라이언] IR기법 - 있었는데요, 없었습니다... -Day16-

IR이란? 

Image Replace 기법. 말그대로 이미지를 대처한다. 웹페이지에 이미지가 보이지 않게 되더라도 스크린리더나 브라우저가 관련 정보를 읽을 수 있도록 텍스트 내용을 적어두고 숨겨놓는 것이다.

 

중요한 것은, 단순히 "눈에 보이지 않도록 숨기는 것" 에 초점을 두고 단순히 겉모습을 구현하는 것이 아니라 "접근성"과 "검색 엔진"을 고려해야 한다는 것이다.

 

카카오/네이버/쿠팡과 같은 회사들은 저마다 각각 다른 IR 기법을 사용하고 있다. 여러가지 IR 기법들 중에 지양해야할 것들도 분명 있다.

 

<주로 알려져 있는 IR 기법으로 쓰이는 속성들>

• Display : none;
  이 속성은 확실히 가시적으로 보이지는 않지만 정보도 표기되지 않는다. 즉 스크린리더나 브라우저에는 "없는 것"과 마찬가지이므로 사용자에게 전달되지 않는다.
  
  
• visibility : hidden;
  이 속성도 마찬가지로 가시적으로 보이지 않지만, 정보를 전달하지 않겠다는 의미이기 때문에 스크린리더에서 읽지 못한다.
  
  
• text-indent : -9999px;
  가장 많이 쓰이는 기법 중 하나. 들여쓰기를 이용하여 텍스트를 웹페이지 창 저 밖으로 밀어내는 것이다.
  위의 기법들과 다르게 아예 텍스트 정보를 없애는 것은 아니라서 괜찮을지 모르지만, 검색엔진에 영향을 미친다는 단점이 있다. 구글의 SEO 가이드에서는 이런 기법들을 검색 순위를 조작하기 위한 "사기"로 간주한다고 되어있다. 아래 글 참조.
  
  https://developers.google.com/search/docs/advanced/guidelines/hidden-text-links?visit_id=637902926394143240-1438219064&rd=1

검색엔진 최적화의 의미: 숨겨진 텍스트와 링크 | Google 검색 센터  |  문서  |  Google Developers

 

그 외에도 width와 height 혹은 font-size를 0으로 설정하거나 opacity:0 ; 설정등 의 다른 방법들이 더 있다. 다른 방법들의 설명과 그에 따른 이슈들은 글 가장 하단에 첨부해놓았다.

 

 

IR 기법의 사용 예시를 살펴보자. 아래는 기업마다 사용하는 IR 기법 사용 예시이다.

 

 

1. 카카오가 IR 사용하는 법

• 이미지 안에 있는 중요한 텍스트의 대체 텍스트를 제공할 때 (PC용)

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

 

• 이미지 안에 있는 중요한 텍스트의 대체 텍스트를 제공할 때 (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 {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

 

 

2. 네이버가 IR 사용하는 법 (권장 되는 방법)

 

네이버는 위에서 본 작은 이슈들이 있는 IR 기법이 아닌 또 다른 방식으로 IR 처리를 하고 있다.

흔히 알려져 있는 IR 기법들의 문제의 원인인 width나 height: 0 을 쓰지 않고 가장 근접한 수치인 1px을 주고 clip 속성을 사용하고 있다.

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

(사실 클래스명을 'blind'로 지은 것은 controversial할 수도 있겠다는 생각이 든다...)

참고로 여기서 clip 속성은 요소의 특정부분만 나오게 할 수 있는 속성이다.

 

rect(top, right, bottom, left)

top/right/bottom/left 값은 px로 설정할 수 있으며, 설정한 값 만큼 요소(이미지)가 잘려나간다고 보면 된다.

*position 값이 fixed 혹은 absolute일 때만 적용이 된다.

 

 

 

3. 쿠팡이 IR 사용하는 법

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

 

이 외에도 여러 사이트에서 IR 기법을 어떻게 사용하고 있는지 찾아보다 보면, 대체로 어떤 방법이 쓰이는지 파악할 수 있고 IR이 어떤 때에 쓰이는지도 파악할 수 있다.

 

위에서 언급한 여러 IR 기법들에 대한 자세한 이슈는 아래 링크 글 참고 하시길.

https://mulder21c.github.io/2019/03/22/screen-hide-text/#visibility-%EC%9D%B4%EC%9A%A9

접근 가능한 숨김 텍스트