IR 기법 / Sprites 기법

HTML 이미지 요소를 사용하기

방법

HTML의 <img> 요소를 사용해서 이미지를 삽입하는 방법이다.

대체 텍스트

<img> 요소에는 alt 라는 대체 텍스트를 넣어 줄 수 있는 속성이 있다. 이를 사용해서 스크린 리더 사용자에게 이미지에 대한 정보를 제공해 줄 수 있다.

<button>
  <img src="./icon.png" alt="카카오 이미지" />
</button>

IR 기법

IR 기법이란? Image Replacement의 약자로 "이미지 대체" 기법이다. 브라우저에 이미지를 넣을 때 HTML의 <img>가 아닌 CSS의 배경이미지로 이미지를 대체하는 경우가 있다. 하지만 CSS 배경이미지는 대체 텍스트 기능이 없다. 이때, 스크린 리더 사용자를 위해서 대체 텍스트를 제공하는 방법을 IR 기법이라고 한다.

방법 & 데체 텍스트

IR 기법에는 한 가지 방법만 있는 것은 아니다. overflow: hidden, z-index, aria-label 등 여러가지 사용 방법이 있다.

overflow: hidden을 사용하기

overflow: hidden과 CSS의 여러 속성들을 사용하여 대체 텍스트를 감춘다.

<head>
    <style>
        button {
            border: 0;
            padding: 0;
        }
        .icon {
            width: 40px;
            height: 40px;
            background: url("./js.svg") no-repeat top left;
        }

        .hidden {
            position: relative;
            overflow: hidden;
            clip: rect(0,0,0,0);
            clip-path: circle(0);
            width: 1px;
            height: 1px;
            margin: -1px;
            border: 0;
            padding: 0;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <button class="icon">
        <span class="hidden">자바스크립트</span>
    </button>
</body>

z-index 활용하기

position의 z-index의 음수값을 활용하여 이미지 뒤로 대체 텍스트를 감춘다.

<head>
    <style>
        button {
            border: 0;
            padding: 0;
        }
        .icon {
            position: relative;
            width: 40px;
            height: 40px;
            background: url("./js.svg") no-repeat top left;
        }
        .alt-text {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

    </style>
</head>

<body>
    <button class="icon">
        <span class="alt-text" >자바스크립트</span>
    </button>
</body>

aria-label 활용하기

aria-label 속성을 활용하여 대체 텍스트를 제공한다. 단, 우리나라에서 사용 되는 센스리더(스크린리더기)에서는 aria-label을 읽지 못하는 경우(링크의 aria-label의 참고부분 참조)가 종종 있기 때문에 확인하고 사용하는 것은 권장한다.

<head>
    <style>
        button {
            border: 0;
            padding: 0;
        }
        .icon {
            width: 40px;
            height: 40px;
            background: url("./js.svg") no-repeat top left;
        }

    </style>
</head>

<body>
    <button aria-label="자바스크립트" class="icon">
    </button>
</body>

Sprates 기법

sprates 기법은 여러 개의 이미지가 들어있는 한 장의 png 이미지를 CSS 배경이미지로 설정한 다음 배경이미지의 위치를 움직이면서 필요한 이미지를 브라우저에 보이도록 하는 기법이다.

이미지의 위치를 계산해주는 도구

sprates 기법을 사용했을 때, 이미지의 위치를 매 계산 하기엔 너무 번거로운 일이다. 이 때, Sprate Cow 도구를 사용하면 쉽게 계산해 준다.

게임에서 사용되는 sprate 기법

게임에서 캐릭터의 움직임을 표현할 때, sprates 기법을 사용한다. 한 동작을 여러 개의 이미지로 표현한다면 브라우저가 서버에 이미지를 요청하는 시간 때문에 캐릭터의 움직임이 자연스럽지 않을 것이다. 그래서 이전부터 게임에서는 sprates 기법을 사용했다.

spate 기법의 장점

한 장의 이미지를 여러 곳에 재사용 할 수 있다는 장점이 있다.
한 장의 이미지를 사용하기 때문에 웹 사이트에서 서버에 요청하는 횟수가 줄어들어서 브라우저의 속도가 빨라진다. (이미지의 개수가 많을 수록 브라우저의 속도는 느려진다.)

Previous이미지 & 피규어 & 캡션 Next목록 요소

Last updated 2 years ago