[Slide to Verify] 핸들을 끝까지 밀면 통과하는 인증 슬라이더

한 줄 요약 - 핸들을 끝까지 밀면 통과되고, 중간에 놓으면 제자리로 튕겨 돌아오는 "밀어서 인증" 슬라이더입니다. (실제 봇 차단 보안이 아니라 인터랙션 패턴 시연입니다.)

이럴 때 필요해요

로그인이나 폼 제출 직전에 "사람이 맞나요?" 한 단계를 가볍게 끼우고 싶을 때 쓰는 친숙한 패턴입니다. 글자를 알아보는 캡차는 짜증나기 쉽지만, 한 번 쓱 미는 동작은 터치 화면에서도 직관적이라 이탈이 적습니다.

어떻게 동작하나

1. 핸들을 누르면 포인터를 핸들에 "고정(setPointerCapture)"합니다 -> 빠르게 끌어 커서가 핸들 밖으로 벗어나도 이동 이벤트를 계속 받아 끊기지 않습니다.
2. 손가락이 움직일 때마다 (포인터 X - 트랙 왼쪽) / 핸들이 갈 수 있는 폭으로 진행률을 0~1 사이로 계산하고, 트랙 밖으로 끌어도 튀지 않게 0~1로 잘라(clamp)냅니다.
3. 손을 뗀 순간 진행률이 임계값(95%) 이상이면 성공으로 확정하고, 아니면 0으로 되돌립니다. 이때만 CSS 트랜지션을 켜서 부드럽게 튕겨 돌아가는 느낌을 줍니다.

핵심은 이거예요

드래그 중에는 트랜지션을 꺼서 손가락을 즉각 따라오게 하고, 손을 떼는 순간에만 켭니다. 이 on/off 하나가 "끌 때는 착 붙고, 놓으면 부드럽게 돌아오는" 자연스러운 감각을 만듭니다.

놓치기 쉬운 것

• 진행률을 0~1로 자르지 않으면 트랙 밖으로 끌었을 때 핸들이 튀어나갑니다.
• 포인터 캡처가 없으면 빠르게 끌 때 핸들이 손가락을 놓쳐 멈춥니다.
• 마우스만 생각하면 안 됩니다. Pointer Events로 마우스/터치를 한 코드로 처리하고, 키보드(우 방향키로 진행, End로 한 번에 끝)와 role="slider"도 함께 넣어야 누구나 통과할 수 있습니다.

이런 곳에 써요

• 회원가입/로그인 폼의 가벼운 사람 확인 단계
• 쿠폰 받기, 이벤트 응모처럼 "한 동작"으로 의사 확인을 받는 화면