좋은 인터랙션은 눈에 띄지 않습니다. 다 보고 난 뒤에야 "이 사이트 좋았다"고 기억될 뿐입니다.
모션은 정보의 위계다
요소가 등장하는 순서는 곧 "이걸 먼저 읽으세요"라는 메시지입니다. 모든 요소가 동시에 나타나면 위계가 사라지고, 모든 요소가 따로 나타나면 피로해집니다.
- 한 화면에 동시에 움직이는 그룹은 최대 3개
- stagger는 0.05~0.12초 사이에서 결정
- 진입 애니메이션은 한 번만(
once: true)
스크롤 속도는 브랜드의 성격이다
Lenis의 duration 값 하나로 사이트의 인상이 바뀝니다.
const lenis = new Lenis({
duration: 1.15,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});
0.8이하 — 빠르고 사무적. 대시보드·B2B 툴에 적합1.0~1.2— 균형. 대부분의 브랜드 사이트1.5이상 — 느긋하고 고급스럽지만, 정보 탐색형 사이트에는 답답합니다
rAF 루프는 하나로 통합한다
Lenis와 GSAP이 각자 requestAnimationFrame을 돌리면 프레임이 어긋납니다. GSAP의 ticker에 Lenis를 태우는 방식이 안전합니다.
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
접근성은 타협 대상이 아니다
prefers-reduced-motion을 존중하지 않는 인터랙션은 일부 사용자에게 어지럼증을 유발합니다. 모션을 끄는 분기를 처음부터 넣어 두면, 나중에 걷어내는 것보다 훨씬 쉽습니다.
인터랙션을 껐을 때도 콘텐츠가 온전히 읽혀야 합니다. 그것이 기준선입니다.
마무리
스크롤 인터랙션은 브랜드의 말투입니다. 빠르게 말할지, 천천히 말할지 정하는 일이 먼저입니다.