노트

IR(Image Replacement) 기법

Image Replacement

프런트엔드#css#html · 연결된 개념 1개

쉽게 말하면

IR 기법은 간판 뒤에 가게 이름을 글씨로 적어 두고 앞에는 그림 간판을 거는 것과 같아요. 사람 눈엔 로고 그림이 보이지만, 스크린 리더와 검색 엔진은 뒤에 남은 글씨를 읽을 수 있어요.

비유가 깨지는 곳 글씨를 아예 지우면 안 돼요. display: none이나 visibility: hidden은 스크린 리더에서도 사라지니 화면 밖으로 밀거나 sr-only처럼 숨겨야 해요. 요즘 로고는 img에 alt를 주는 쪽이 일반적이에요.

HTML에는 텍스트를 그대로 두고, 화면에는 그 텍스트 대신 이미지를 보여 주는 CSS 기법. 로고나 디자인된 제목에 썼다. 텍스트가 남아 있어 스크린 리더(Screen Reader)와 검색 엔진이 내용을 읽을 수 있다.

/* 텍스트를 화면 밖으로 밀어내기 */
.logo {
  background: url(logo.png) no-repeat;
  width: 200px; height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
  • 예전에는 text-indent: -9999px로 멀리 밀어내는 방식(Phark)이 흔했다. 위처럼 100%만 밀고 넘친 부분을 숨기는 방식(Kellum)은 거대한 상자를 만들지 않는다
  • 화면에서만 숨기고 보조 기술(Assistive Technology)에는 읽히게 하는 sr-only(visually hidden) 패턴도 같은 계열이다. 아이콘 버튼에 이름을 붙일 때 지금도 쓴다
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

display: none이나 visibility: hidden은 스크린 리더에서도 사라지므로 이 용도로는 쓰지 않는다. 요즘은 SVG(Scalable Vector Graphics)·웹폰트가 좋아져서 이미지로 바꾸는 IR 자체는 드물고, 로고는 img에 alt를 주거나 인라인 SVG에 title을 다는 쪽이 일반적이다.

참고: Zeldman — Replacing the -9999px hack (new image replacement) · CSS-Tricks — Inclusively Hidden

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • content-visibility

    화면 밖에 있는 요소의 렌더링을 건너뛰어도 된다고 브라우저에 알려 주는 CSS 속성. auto를 주면 뷰포트에서 멀리 있는 요소의 레이아웃·페인트를 생략하므로, 긴 페이지의 첫 렌더링과 스크롤이 빨라진다.

  • CSR·SSR·SSG·ISR

    렌더링 전략은 HTML(HyperText Markup Language)을 언제, 어디서 만드느냐의 선택이다. 브라우저에서 만들면 CSR(Client-Side Rendering), 요청마다 서버에서 만들면 SSR(Server-Side Rendering), 빌드 때 미리 만들면 SSG(Static Site Generation), 미리 만든 것을 주기적으로 다시 만들면 ISR(Incremental Static Regeneration)이다.

  • XSS

    XSS(Cross-Site Scripting)는 공격자가 넣은 스크립트가 내 사이트의 출처(origin) 권한으로 사용자 브라우저에서 실행되는 공격이다. 같은 출처의 코드로 돌기 때문에 same-origin-policy가 막아 주지 못한다. 그 스크립트는 페이지를 바꾸고, 로그인한 사용자 행세를 하며 요청을 보내고, JS가 읽을 수 있는 데이터(localStorage의 토큰 등)를 빼 갈 수 있다.

  • SEO

    SEO(Search Engine Optimization)는 검색 엔진이 페이지를 잘 찾고(크롤링, crawling), 이해해서 저장하고(색인, indexing), 알맞은 검색어로 노출하도록(순위, ranking) 사이트를 다듬는 일이다. 개발자가 맡는 부분은 대부분 앞의 두 단계, 즉 "검색 엔진이 읽을 수 있게 만드는 것"이다.

  • Activity와 숨겨진 라우트 보존

    Activity는 React 19.2의 컴포넌트로, UI를 언마운트하지 않고 display: none으로 숨기면서 state와 DOM(Document Object Model)을 보존한다. 숨기는 동안 Effect는 정리(cleanup)된다. 예전 이름은 Offscreen이다.

보기 옵션