작은 회사 웹사이트에서 가장 흔한 요청 중 하나가 이미지 슬라이더입니다. 제품 사진을 옆으로 넘기고, 고객 후기를 카드로 돌리고, 포트폴리오를 한 장씩 보여주는 그 화면이죠. 그런데 이 단순한 기능 하나를 위해 지금도 많은 사이트가 수백 KB짜리 캐러셀 라이브러리를 통째로 불러옵니다. 첫 화면은 느려지고, 몇 년 뒤 라이브러리가 업데이트를 멈추면 사이트의 골칫거리가 됩니다.
슬라이더는 원래 '스크롤'이었다
생각해 보면 슬라이드를 옆으로 넘기는 동작은 결국 가로 스크롤입니다. 문제는 스크롤이 어중간한 위치에서 멈춰 사진이 반쯤 잘려 보인다는 것이었고, 그 어색함을 감추려고 자바스크립트로 위치를 계산해 왔던 겁니다. CSS Scroll Snap은 이 문제를 브라우저가 직접 풀게 합니다. 스크롤이 끝나는 순간, 정해둔 지점에 자석처럼 착 붙여주는 표준 기능입니다.
핵심은 단 두 줄
컨테이너에 scroll-snap-type: x mandatory를 선언하고, 각 슬라이드에 scroll-snap-align: start를 붙이면 끝입니다. 손가락으로 휙 넘기면 다음 사진이 정확히 화면에 맞춰 멈추고, 마우스 휠이나 키보드로 움직여도 똑같이 동작합니다. 모바일 앱의 그 매끄러운 손맛이 자바스크립트 한 줄 없이 나옵니다.
라이브러리보다 나은 이유
- 용량이 0에 가깝습니다. 불러올 스크립트가 없으니 첫 화면 속도에 부담을 주지 않고, 코어 웹 바이탈 점수도 지킬 수 있습니다.
- 관성 스크롤을 그대로 씁니다. 브라우저의 기본 스크롤 위에서 동작하기 때문에 기기마다 다른 터치 감각을 흉내 낼 필요가 없습니다.
- 접근성이 공짜로 따라옵니다. 키보드 방향키, 스크린리더, 브라우저 확대 기능이 모두 평범한 스크롤로 인식해 자연스럽게 동작합니다.
- 유지보수가 사라집니다. 웹 표준이라 라이브러리 업데이트 중단이나 버전 충돌을 걱정할 일이 없습니다.
작은 회사 사이트에서 바로 쓸 곳
제품 상세 페이지의 사진 갤러리, 메인 화면의 고객 후기 카드, 시공 사례나 포트폴리오 목록처럼 옆으로 넘기는 모든 화면이 대상입니다. 특히 모바일에서 카드 여러 장을 보여줘야 하는 레이아웃이라면 효과가 가장 큽니다.
알아둘 한 가지
자동 재생이나 하단의 점(인디케이터) 표시처럼 장식적인 기능까지 필요하다면 약간의 스크립트가 더 들어갑니다. 하지만 그 경우에도 위치 계산이라는 가장 무거운 일은 브라우저가 대신하므로, 코드는 몇 줄 수준으로 줄어듭니다. 주요 브라우저 지원도 이미 안정권이라 오늘 만드는 사이트에 바로 적용해도 좋습니다.
CYAN 에이전시는 새 기능을 붙일 때 라이브러리부터 찾는 대신, 브라우저가 이미 품고 있는 표준 기능으로 더 가볍게 풀 수 없는지를 먼저 검토합니다. 사이트는 가벼울수록 고객에게 빨리 닿고, 단순할수록 오래 갑니다.