디자인 아틀라스보통 스크롤은 페이지 콘텐츠를 위로 흘려보내지만, 피닝은 특정 구간에서 그 흐름을 잠시 멈춥니다. position: sticky(짧은 구간)나 JS로 요소를 position: fixed로 바꾸고 그 구간만큼 페이지에 여분의 스크롤 높이를 미리 확보해두는 방식(긴 구간, 여러 단계)으로 구현합니다. 사용자 입장에서는 스크롤 휠을 계속 돌리는데 화면은 그대로고, 그 안의 그림이나 텍스트만 다음 단계로 넘어갑니다.
핀 구간의 길이는 "그 안에서 보여줄 단계 수 × 한 단계당 필요한 스크롤량"으로 정합니다 — 예를 들어 4단계를 보여주려면 뷰포트 높이의 4배 정도를 여분 스크롤 공간으로 잡고, 그 안의 진행률(0~1)을 스크롤 스크럽처럼 각 단계에 매핑합니다. GSAP ScrollTrigger의 pin: true 옵션이 이 패턴을 널리 알렸습니다.
핀 구간이 너무 길면 사용자가 "스크롤이 안 먹는다"고 느끼고 이탈합니다. 보통 3~5단계, 뷰포트 3~5배 이내로 제한하고, 빠져나갈 수 있는 시각적 신호(다음 섹션이 살짝 보이는 것)를 남겨두는 게 안전합니다.
언제 쓰나
한 화면에서 여러 단계를 순서대로 설명해야 할 때(제품 기능 소개, 데이터 스토리) 씁니다. 단순히 "요소 하나가 등장"하는 정도면 스크롤 리빌로 충분하고 피닝은 과합니다.