한 줄 요약 - 곡선을 따라 요소를 움직이는 offset-path와, 손을 떼면 카드가 자석처럼 멈추는 scroll-snap. 예전엔 JS나 라이브러리가 필요했던 모션을 CSS 몇 줄이 가져갔습니다.
Motion Path (offset-path)
로켓이 호를 그리며 날아가는 곡선 모션은 직선 translate로는 어렵고, 키프레임마다 x/y 좌표를 찍거나 JS로 매 프레임 계산해야 했어요. offset-path는 따라갈 '길'을 한 번 정의하고, offset-distance만 0%에서 100%로 바꾸면 요소가 그 길을 따라 이동합니다. offset-rotate: auto면 진행 방향으로 자동 회전까지 해요.
Scroll Snap
가로로 넘기는 카드 갤러리를 만들 때 보통 캐러셀 라이브러리를 찾지만, '한 칸씩 깔끔히 멈추기'가 목적이면 scroll-snap이 답입니다. 스크롤 영역에 scroll-snap-type, 카드에 scroll-snap-align 한 줄이면 멈추는 순간 가장 가까운 카드에 딱 붙고, 터치/트랙패드 관성도 그대로 살아 있어요.
한 줄 정리
둘 다 '위치 계산을 브라우저에 맡기는' 흐름입니다. 직접 만져보려면 아래 관련 데모를 확인하세요.