it/web publishing
IR기법과 IS기법
roroism
2025. 5. 18. 13:28
IR기법과 IS기법
이전에 퍼블리싱을 공부할 때, 배우고 실무에서도 활용하고 있지만,
글로는 한번도 정리를 해본적이 없어서 이번에 다시 정리하며 제대로 알아보려고 포스팅을 하기로 했다.
IR기법과 IS기법은 이미지와 관련된 기법이라는 공통점이 있지만, 서로 큰 관련은 없다.
IR기법은 웹 접근성, IS기법은 최적화와 관련이 있다.
IR 기법
- IR 기법(Image Replacement) 의 약자. 이미지 대체 기법.
- 웹에서 텍스트 콘텐츠를 이미지로 대체하여 시각적으로 표현하면서도, HTML 문서 내에 텍스트를 그대로 유지하여 검색엔진 최적화(SEO) 및 접근성을 확보하는 방법.
- 텍스트 설명이 눈에는 보이지 않더라도 스크린 리더기에서는 읽히게끔 만드는 기법.
- html 요소만으로 시멘틱한 마크업이 어려울 경우 사용하는 대체 기술로서 그동안 다양한 방식이 나왔다.
사용하는 이유
- 디자인상의 이유로 텍스트보다는 이미지로 표현하는 것이 더 나아서 이미지를 사용하면서도,
해당 이미지에 대한 설명도 html에 텍스트로 함께 넣기 위해서 사용. - 이렇게 하면 일반 사용자도 이미지로 해당 정보를 접할 수 있고,
이미지를 보지 못하는 사용자(스크린 리더 사용자)나 검색 엔진에게도
텍스트 정보로 해당 정보를 접하게 될 수 있다.
스크린 리더가 인식하지 못하는 경우
- visibility: hidden
- 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 x
- display: none
- 요소가 아예 없는 것으로 인식
- width: 0, height: 0, font-size: 0, line-height:0
- 사이즈가 0이 되면 스크린 리더 인식 x
스크린 리더가 인식은 하지만 레이아웃과 성능 이슈가 있는 경우
- opacity: 0
- 투명해진 것뿐, 위치는 그대로 차지 레이아웃이 망가짐
- text-indent: -9999px
- 레이어에 크기가 지나치게 잡혀서 성능 이슈가 발생할 가능성 있음
- 100%로 처리하면 성능 이슈는 피할 수 있음
- z-index: -1
- position 속성을 추가해야 해서 성능 이슈 발생 가능
대표적인 IR 기법들
1. Text-indent를 이용한 방식
<!-- text-indent를 이용한 방식 예시1 -->
<style>
h1 {
text-indent: -9999px;
background: url(logo.png) no-repeat;
width: 200px;
height: 50px;
overflow: hidden;
}
</style>
<body>
<h1>My Site</h1>
</body>
<!-- text-indent를 이용한 방식 예시2 -->
<style>
h1 {
background: url(logo.png) no-repeat;
width: 200px;
height: 50px;
}
h1 span {
display: block;
text-indent: -9999px;
}
</style>
<body>
<h1><span>My Site</span></h1>
</body>설명
가장 널리쓰이는 방식으로 이미지로 대체할 엘리먼트에 배경이미지를 설정하고,
글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법.
특징
컴퓨터가 웹페이지 로드 시 text-indent 위치 값을 계산해야되서 성능 저하가 생긴다.
2. clip 또는 clip-path를 이용한 방식
<!-- clip을 이용한 방식 -->
<style>
.ir {
background: url(logo.png) no-repeat;
width: 200px;
height: 50px;
}
.ir span {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
</style>
<body>
<h1 class="ir"><span>My Site</span></h1>
</body>
<!-- clip-path를 이용한 방식 -->
<style>
.ir {
background: url(logo.png) no-repeat;
width: 200px;
height: 50px;
position: relative;
color: transparent;
clip-path: inset(100%);
white-space: nowrap;
}
</style>
<body>
<h1 class="ir">My Site</h1>
</body>설명
현대 브라우저에서 사용 가능하고 접근성을 잘 유지함.
text-indent를 사용하지 않으므로 성능 이슈 적음.
특징
네이버에서는 clip 방식사용.
결론
- IR 기법은 디자인과 접근성/SEO를 모두 고려해야 하는 경우에 매우 유용한 웹 기술이다.
- 다양한 방식이 있지만, 크게 현대적인 방법인 clip 또는 clip-path를 이용한 방식과 text-indent를 사용한 전통적인 방식이 있다. 두 방식 모두 디자인과 접근성/SEO를 고려한 좋은 웹 기술이다.
IS 기법
Image Spriting 기법은 웹 개발에서
여러 개의 작은 이미지를 하나의 큰 이미지 파일(스프라이트 시트)에 합쳐서 사용하는 기술.
사용하는 이유
주로 성능 최적화(특히 HTTP 요청 수 감소)를 위해 사용된다.
- HTTP 요청 수 줄이기
- 여러 개의 작은 이미지를 각각 로드하면 그만큼 요청이 많아져 페이지 로딩 속도 저하
- 스프라이트 이미지를 한 번만 요청하면 됨 (속도 개선)
- 브라우저 렌더링 최적화
- 이미지 연결 수 줄이기 → 네트워크 비용 감소
- 캐싱 이점
- 단일 이미지에 여러 UI 요소가 있으므로, 한 번 캐시되면 전체가 캐시됨
사용하는 방법
<style>
.icon {
width: 32px;
height: 32px;
background-image: url('sprite.png');
background-repeat: no-repeat;
}
.home {
background-position: 0 0;
}
.search {
background-position: -32px 0;
}
.settings {
background-position: -64px 0;
}
</style>
<body>
<div class="icon home"></div>
<div class="icon search"></div>
<div class="icon settings"></div>
</body>설명
css의 속성 background-position을 이용하여
스프라이트 시트 파일에서 필요한 이미지의 영역만을 가져와서 보여준다.
결론
장점
- 서버측의 요청 횟수를 줄일 수 있다.
- 문서 전송 속도를 높이기 때문에 웹페이지의 로딩시간이 단축된다.'
- 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.
단점
- 이미지 컷팅을 위한 작업(css코드 및 위치 계산 등)이 추가로 필요하여 작업량이 증가한다.
- Opera (최소 9.0 버전까지)는 2042px보다 크거나 -2042px보다 작은 배경 위치를 인식하지 못한다고 한다.
참고
https://m.blog.naver.com/eirene100999/221686480420