01
Services · Scroll Interaction
스크롤 인터랙션
스크롤이 곧 언어가 될 때.
사용자의 스크롤을 이동 수단이 아니라 악기로 봅니다. 속도, 정지, 호흡 — 세 박자의 문법을 설계합니다. 정답이 없는 영역이기에 가장 많은 실험을 하는 서비스입니다.
Focus areas
네 가지 초점.
A
타임라인 설계
ScrollTrigger pin, scrub, snap을 조합해 섹션 단위의 시퀀스를 악보처럼 설계합니다. 이벤트가 아니라 장면을 그립니다.
B
관성 & 호흡
Lenis의 lerp 값과 GSAP ticker를 페이지의 리듬에 맞춰 조율합니다. 빠르지도 느리지도 않은, 브랜드에 맞는 속도를 찾습니다.
C
글자와 여백
SplitText + Pretendard Variable의 가중치 축을 활용해 타이포그래피 자체를 스크롤의 피사체로 만듭니다.
D
관측과 리포트
prefers-reduced-motion을 존중하고 정적 fallback을 제공합니다. GA4 커스텀 이벤트와 Microsoft Clarity의 세션 리플레이·히트맵으로 유저가 어느 장면에서 멈추고 어디서 떠나는지를 장면 단위로 측정합니다.
Process
보통 이렇게 진행됩니다.
Diagnosis
1주
현재 사이트의 스크롤 흐름을 분해합니다. 어디서 관성이 끊기고, 어디서 장면이 멈춰야 하는지를 표시합니다.
Timeline Design
2주
섹션별로 pin/scrub 시퀀스를 종이 위에서 먼저 설계합니다. 코드 이전에 악보가 있습니다.
Prototype & Tune
2~4주
GSAP + Lenis + SplitText를 결합해 실제 프로토타입을 만들고, 속도·이징·타이밍을 반복 조정합니다.
Ship & Measure
1주
LCP / INP / CLS 코어 지표에 더해, GA4 이벤트와 Clarity 세션 리플레이로 실제 유저의 스크롤 깊이·체류·이탈 지점을 측정해 월간 리포트로 전달합니다.
Case study
이 서비스의 대표 작업