무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기
스마트폰에서 쇼핑몰 상품 목록이나 갤러리를 좌우로 쓸어 넘길 때(스와이프), 스크롤이 멈추는 힘이 부족해서 상품 이미지가 화면 중간에 반쯤 잘린 채로 멈춰버린 경험 있으신가요?
넷플릭스나 앱스토어처럼, 손가락을 대충 튕겨도 마치 자석이 끌어당기듯 다음 콘텐츠가 화면 정위치에 딱! 하고 들어맞는 쫀득한 터치감을 만드는 마법의 CSS를 소개합니다.
💡 굳이 자바스크립트를 써야 할까요?
과거에는 이 기능을 위해 슬라이더(Slider) 플러그인을 무겁게 불러와야 했습니다. 하지만 이제는 브라우저 공식 표준으로 자리 잡은 'CSS Scroll Snap (스크롤 스냅)' 기능 단 2줄만으로, 사이트 속도 저하 없이 완벽한 네이티브 앱(App) 수준의 스와이프를 구현할 수 있습니다.
1. 부모 박스에 '자석 켜기' (Scroll Snap Type)
먼저 가로로 스크롤이 발생하는 전체를 감싸는 겉면 박스(Container)에게 "이제부터 스크롤이 끝날 때 자석 기능을 켤 거야"라고 선언해 주어야 합니다.
/* 스크롤을 감싸는 부모 박스에 적용 */
.swipe-container {
display: flex;
overflow-x: auto; /* 가로 스크롤 활성화 */
/* x축(가로) 방향으로, 멈출 때 무조건(mandatory) 자석처럼 붙어라! */
scroll-snap-type: x mandatory;
}2. 자식 요소에 '붙는 기준점' 정해주기 (Scroll Snap Align)
이제 스크롤 영역 안에 있는 각각의 상품 카드나 이미지(Item)들에게, 화면에 멈출 때 어느 부분(시작점, 중간, 끝)을 기준으로 정렬될지 지정해 줍니다.
보통 한국어 읽기 방향에 맞추어 왼쪽 시작점(start)을 기준으로 멈추게 하는 것이 가장 깔끔합니다.
/* 스크롤되는 개별 카드/이미지에 적용 */
.swipe-item {
flex-shrink: 0; /* 카드가 찌그러지지 않게 보호 */
/* 스크롤이 멈출 때, 카드의 '왼쪽 시작점(start)'을 화면 뷰포트에 딱 맞춰라! */
scroll-snap-align: start;
}"가벼운 코드가 가장 빠른 속도를 만듭니다."
나눔웹은 불필요한 스크립트 남용을 배제하고 모던 CSS의 숨겨진 잠재력을 200% 활용하여,
로딩 지연 없이 가장 쾌적하고 부드러운 하이엔드 UI를 구축합니다.