제품 사진을 한 장씩 손가락으로 넘겨 보는 슬라이드는 작은 회사 웹사이트에서 가장 흔히 쓰이는 장치다. 그런데 이 슬라이드 하나를 넣겠다고 수십 킬로바이트짜리 슬라이더 라이브러리를 통째로 설치하는 경우가 여전히 많다. 라이브러리는 무겁고, 버전이 바뀌면 깨지고, 휴대폰에서 손끝에 착 감기지 않고 뚝뚝 끊기기 일쑤다. 이제는 그럴 필요가 없다. CSS scroll-snap 한 묶음이면 자바스크립트 한 줄 없이도 손끝에 자석처럼 달라붙는 슬라이드를 만들 수 있다.
scroll-snap이 하는 일
scroll-snap은 스크롤이 멈추는 지점을 브라우저가 알아서 '딱딱' 맞춰주는 기능이다. 사용자가 슬라이드를 어중간하게 밀어도, 손을 떼는 순간 가장 가까운 사진의 정중앙으로 화면이 자동으로 안착한다. 예전에는 이 '안착' 동작을 만들려고 스크롤 위치를 계속 계산하고 애니메이션을 직접 그리는 자바스크립트가 필요했다. 지금은 부모 요소와 자식 요소에 속성 두세 개만 적어주면 끝난다.
기본 구조는 단 두 줄
가로로 늘어선 사진 묶음(부모)에는 scroll-snap-type: x mandatory를 주어 가로 방향으로 반드시 멈추게 하고, 각 사진(자식)에는 scroll-snap-align: center를 주어 가운데에 맞추도록 지정한다. 여기에 부모에 overflow-x: auto만 더하면 슬라이드의 뼈대가 완성된다. 라이브러리도, 이벤트 핸들러도, 복잡한 초기화 코드도 없다.
작은 회사 사이트에서 빛을 발하는 이유
첫째, 속도다. 외부 스크립트를 내려받지 않으니 페이지가 그만큼 가볍고 빨리 뜬다. 둘째, 안정성이다. 브라우저에 내장된 표준 기능이라 라이브러리 업데이트로 어느 날 갑자기 슬라이드가 멈추는 사고가 없다. 셋째, 모바일 감각이다. 휴대폰에서 손가락으로 밀 때의 관성과 안착이 운영체제의 기본 동작과 똑같이 자연스럽게 느껴진다.
이미지가 덜컹이지 않게
슬라이드 안의 사진에는 비율을 미리 잡아두는 것이 좋다. 사진이 뒤늦게 떠 자리가 밀리면 어렵게 만든 안착이 어긋나기 때문이다. 각 사진에 aspect-ratio로 비율을 고정하고 scroll-snap-stop: always를 더하면, 사용자가 빠르게 밀어도 한 장씩 또박또박 넘어가 제품을 놓치지 않고 보여줄 수 있다.
접근성과 대체 동작도 챙기자
scroll-snap은 키보드와 마우스 휠로도 자연스럽게 동작하지만, 슬라이드 아래에 작은 점(인디케이터)이나 좌우 화살표 버튼을 함께 두면 어떤 사용자든 헤매지 않는다. 이때 화살표는 자바스크립트 대신 같은 페이지 내 위치로 이동하는 링크 방식으로도 구현할 수 있어 부담이 적다. 화면 너비가 좁아지면 한 번에 보이는 사진 수만 줄이면 되니, 반응형 대응도 수월하다.
'딱 필요한 만큼'의 기술
슬라이드 하나에 무거운 라이브러리를 얹던 시대는 지났다. scroll-snap은 '기능은 충분하되 군더더기는 없다'는 요즘 웹의 방향을 잘 보여준다. 작은 회사 웹사이트일수록 이런 가벼운 선택이 로딩 속도와 유지보수 부담에서 큰 차이를 만든다.
CYAN은 이렇게 표준 기술을 알맞게 골라 가볍고 오래 가는 웹사이트를 만드는 일을 합니다. 제품 슬라이드 하나도 '무엇을 넣느냐'보다 '무엇을 덜어내느냐'를 먼저 고민합니다. 군더더기 없이 빠르고 단단한 홈페이지가 필요하시다면, 편하게 문의 주세요.