요즘 홈페이지에서 자주 보이는 장면이 있습니다. 화면을 아래로 내려도 맨 위 메뉴 바가 따라오는데, 그 바탕이 완전히 불투명하지 않고 뒤에 지나가는 사진이 유리 너머처럼 은은하게 비쳐 흐릿하게 깔립니다. 팝업이 뜰 때 뒷배경이 뿌옇게 가라앉는 것도 같은 연출이죠. 고급스러워 보이는 이 '반투명 유리' 느낌을, 예전에는 진짜 유리가 아니라 흉내로 만들어야 했습니다.
예전엔 '가짜 유리'를 손으로 만들었다
브라우저는 오랫동안 '내 뒤에 무엇이 있든 그것을 흐리게 하라'는 명령을 몰랐습니다. 그래서 디자이너는 배경 이미지를 미리 흐리게 처리한 사진을 따로 만들어, 메뉴 바 자리에 조각내어 붙이곤 했습니다. 배경이 스크롤로 움직이면 유리 효과는 어긋났고, 사진을 바꾸면 흐린 버전도 다시 만들어야 했습니다. 손이 많이 가는 데다, 결국 진짜로 뒤가 비치는 게 아니라 비치는 척일 뿐이었죠.
backdrop-filter — 뒤에 있는 것을 실시간으로 흐린다
backdrop-filter는 요소 '뒤에' 깔린 화면을 그 자리에서 흐리거나, 어둡게, 채도를 낮추는 CSS 속성입니다. 요소 자체가 아니라 요소를 통해 비쳐 보이는 배경에 효과를 주는 것이 핵심입니다. 대표적으로 이런 곳에 쓰입니다.
- 반투명 고정 메뉴 바 — 스크롤로 사진이 지나가도 그 위 글씨는 또렷하게 읽히도록 배경만 살짝 흐립니다.
- 팝업·모달의 뒷배경 — 뒤 화면을 뿌옇게 가라앉혀, 손님의 시선을 팝업 내용에 모읍니다.
- 사진 위에 얹은 안내 카드 — 배경이 복잡해도 카드 안 글씨가 파묻히지 않습니다.
- 상단 알림 띠 — 페이지 색이 무엇이든 위에 살짝 얹혀 자연스럽게 어울립니다.
공통점은, 예전 같으면 흐린 이미지를 미리 만들어 오려 붙이던 일을 이제 CSS 한 줄이 실시간으로 해낸다는 것입니다.
작은 회사 홈페이지에서 왜 좋은가
멋만 내는 기능처럼 보이지만, 실속은 가독성에 있습니다. 배경 사진 위에 글씨를 그냥 얹으면 밝은 부분에선 글자가 사라져 손님이 내용을 놓칩니다. 배경을 살짝 흐리고 어둡게 눌러 주면, 사진의 분위기는 살리면서 그 위 글씨는 또렷해집니다. 관리도 편합니다. 흐린 이미지를 따로 만들어 두지 않으니, 사장님이 배경 사진 한 장만 바꿔도 유리 효과는 알아서 새 배경을 따라갑니다. 손댈 파일이 줄면 그만큼 고장 날 곳도 줄어듭니다.
지금 써도 되나 — 조건부로 '예'
backdrop-filter는 크롬·사파리·엣지·파이어폭스 최신 버전이 모두 지원해, 지금은 대부분의 손님 화면에서 잘 작동합니다. 다만 두 가지를 챙겨야 합니다. 첫째, 효과가 안 먹는 옛 브라우저를 위해 반투명이 실패해도 글씨가 읽히도록 배경에 은은한 단색을 함께 깔아 두는 것이 안전합니다. 둘째, 유리 효과에 취해 배경과 글씨의 명암 대비가 흐려지면 저시력 손님에게는 오히려 읽기 어려워지니, 흐림은 거들 뿐 대비는 따로 확보해야 합니다.
결국 사라진 건 '흉내 내는 수고'다
새 CSS 기능이 반가운 이유는 화려함이 아니라, 예전에 사람이 손으로 흉내 내던 일을 브라우저가 진짜로 해 주기 때문입니다. 그만큼 홈페이지는 가벼워지고, 배경을 바꿔도 어긋나지 않고, 나중에 고치기도 쉬워집니다. CYAN 에이전시가 작은 회사 홈페이지에 이런 최신 표준을 챙겨 넣는 것도 같은 이유입니다. 당장 눈에 띄는 장식이 아니라, 몇 년 뒤에도 사장님이 편하게 손볼 수 있는 튼튼한 짜임새야말로 오래가는 홈페이지의 조건이니까요.
