1. 글의 목적

이 글의 목적은 웹 접근성과 성능 최적화를 위한 두 가지 주요 기법인 IR(Image Replacement) 기법과 IS(Image Sprite) 기법에 대해 알아보는 것이다. 이러한 기법들은 웹 페이지의 로딩 속도를 개선하고, 접근성을 높이며, 서버 부하를 줄이는 데 중요한 역할을 한다. 이를 통해 웹 개발자가 보다 효율적이고 사용자 친화적인 웹사이트를 구축하는 방법을 이해하도록 돕는다.

2. IR(Image Replacement) 기법이란?

<img src="./dog.jpg" alt="강아지">

IR(Image Replacement)기법은 대체 텍스트 처리 기법으로, 기존에는 <img> 태그의 alt 속성을 통해 대체 텍스트를 제공할 수 있었다. 그러나 CSS에서 background 속성을 사용해 이미지를 삽입하면 스크린 리더로 대체 텍스트를 제공할 방법이 없다. 따라서 IR 기법을 사용해 대체 텍스트를 적용하면 어떤 이미지인지 정보를 함께 제공할 수 있다. 이렇게 하면 비장애인에게는 대체 텍스트가 보이지 않게 하고, 시각장애인에게는 스크린 리더가 읽어줄 수 있게 된다.

2-1. IR 기법의 다양한 활용

또한, 기존 alt 속성 내에 값을 표현하기에는 대체 텍스트가 너무 긴 경우에도 IR 기법을 사용한다. alt 속성 내에 기입된 값은 스크린 리더로 읽을 때 중간 스킵이 안 되기 때문이다.

<section class="sc-login">
  <h2 class="blind">로그인</h2>
</section>

현재는 이미지가 아니더라도 스크린 리더의 흐름에서 현재 어느 본문에 위치하고 있는지 알려주는 네비게이션 역할로도 자주 사용된다. 이렇게 하면 해당 영역에 대한 인지를 우선으로 할 수 있기 때문에 청각 자료에만 의존하는 사용자에게 사용성을 좋게 해줄 수 있다.

.blind {
  display: none;
  visibility: hidden;
  opacity: 0;

  /* 모든 사이즈의 값 0 사용 */
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;

  /* 포지션과 관련한 요소의 값을 -9999로 적용 */
  text-indent: -9999px;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

display: none; : 화면에 출력되지 않으며 DOM 트리에서도 제외되어 스크린 리더기가 인식하지 못한다.
visibility: hidden; : 화면에 출력되지 않고 스크린 리더기도 인식하지 못한다.
모든 사이즈의 값 0 사용 : 없는 요소로 취급되며 스크린 리더기도 인식하지 못한다.
포지션과 관련한 요소의 값을 9999px로 적용 : 성능 저하가 발생할 수 있다.
opacity: 0; : 스크린 리더가 읽을 수 있지만, 요소가 화면에는 보이지 않으면서 자리만 차지하게 된다.

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

사이즈를 각 1px로 지정하여 스크린 리더가 인식할 수 있다.
position: absolute : normal flow에서 벗어나 레이아웃에 영향을 주지 않는다.
overflow: hidden : 가로, 세로 사이즈 값을 넘어가는 영역을 가려 보이지 않게 한다.
clip: rect(0, 0, 0, 0) : 해당 영역만 잘라 보여주는 clip 속성의 값을 모두 0으로 두어 화면 상에서 blind 영역을 보이지 않게 한다.
margin: -1px : 마진을 음수 값으로 두어 클릭 영역에서 제외 시킨다.

3. IS(Image Sprite) 기법이란?

컴퓨터 그래픽스에서 스프라이트(sprite)란 비트맵이나 애니메이션을 합성하는 기술을 의미한다. 픽셀 기반 RPG 게임 제작 시에도 모션이 있는 게임 에셋들을 스프라이트 맵 기반으로 만들곤 했다.

웹에서 사용되는 IS(Image Sprite) 기법 또한 위처럼 여러 개의 이미지를 하나의 이미지로 만들어 합성하는 것을 의미한다. 아래 네이버를 예시로 보면, 수 많은 에셋들이 IS 기법으로 구성된 것을 확인할 수 있다.

3-1. IS 기법을 사용하는 이유

웹사이트에는 무수히 많은 <img> 태그들이 존재한다. 사이트가 최초 로딩될 때, 혹은 새로고침할 때마다 이 리소스들을 서버에 요청해야 한다. 이는 서버에 많은 부담을 준다. 따라서 IS 기법을 사용해 여러 이미지를 하나로 합쳐 해당 파일만 서버에 요청하면, 서버 부하를 줄일 수 있다.

최근에는 개인 장비 수준이 좋아지고 네트워크가 발전하면서 로딩 속도와 관련한 측면에서 IS 기법의 중요성이 줄어들었다는 의견도 있다. 그러나 이는 이미지 로딩 속도 측면에서의 이야기일 뿐, 접속자 수가 많은 사이트에서는 사용자 1인당 100개의 리소스 요청 vs 1개의 리소스 요청의 차이의 누적은 엄청난 비용 차이를 만들 것이다.

3-2. IS 기법 사용하기

CSS의 width와 height로 삽입할 이미지의 크기를 결정하고, background-image와 background-position 속성을 이용해 원하는 이미지를 잘라서 사용한다.

.btn-prev::before,
.btn-next::before {
  content: "";
  width: 50px;
  height: 50px;
  background-image: url("이미지 주소");
  background-size: 442px 434px;
  background-repeat: no-repeat;
}

.btn-prev::before {
  background-position: -193px 0px;
}
.btn-next::before {
  background-position: -143px 0px;
}

참고자료

https://pub-kim.tistory.com/entry/%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%9C-%EB%8C%80%EC%B2%B4-%ED%85%8D%EC%8A%A4%ED%8A%B8-CSS-%ED%91%9C%ED%98%84-blind-hidden-sr-only-a11y

https://velog.io/@gotaek/IR%EA%B8%B0%EB%B2%95%EA%B3%BC-IS%EA%B8%B0%EB%B2%95

https://velog.io/@untiring_dev/HTMLCSS-Day31.-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%8A%A4%ED%94%84%EB%9D%BC%EC%9D%B4%ED%8A%B8-%EA%B8%B0%EB%B2%95

ir(image eeplacement)기법과 is(image sprite) 기법

접근성을 위한 IR기법과 최적화를 위한 IS 기법에 대하여

Table of contents