"우리 일하는 방식" 같은 단계형 콘텐츠를 보여줄 때, 그냥 정적인 리스트로 두는 것과 스크롤이 라인을 그어 내려가며 "지금 여기까지 봤다"를 시각화하는 것은 체감이 완전히 다릅니다. 단계가 늘어나도 라인 채우기 비율과 stagger만 그대로면 자동으로 동작하는 구조로 만들었습니다.
구현 포인트
- useScrollProgress({ mode: "enter-exit" })가 섹션의 진입~탈출 비율을 0~1로 주고, 그 progress를 라인 height %로 매핑.
- 좌/우 교대 배치는 i % 2로 grid-cols-2 안에 col-start만 다르게 데스크탑은 zigzag, 모바일(lg:)은 좌측 라인 단일 컬럼으로 폴백.
- 각 카드의 등장은 useStaggerReveal이 [data-reveal] 자식을 setTimeout 시차로 reveal. CSS scroll-reveal-blur 클래스가 blurclear 전환 담당.
알아둘 점 (gotcha)
- 라인 채우기를 transition: height로 하면 60fps가 보장되지 않아 빠른 스크롤에서 한 박자 늦어 보일 수 있다. 짧은 transition(duration-300)으로 끊어지는 느낌만 가렸다.
- 모바일에서 zigzag를 유지하려고 하면 텍스트가 너무 좁아진다 모바일은 단일 컬럼으로 깔끔히 폴백하는 게 정답.
- 라인 dot의 animate-ping은 cumulative cost가 있어 단계 수가 많아지면 GPU 부담. 5~7개가 적정선.
실무 활용 예시
- 회사 소개의 "우리가 일하는 방식"
- 제품 온보딩 단계 (가입 설정 사용 리포트)
- 채용 페이지의 채용 프로세스