인프런 커뮤니티 질문&답변

안녕하세요 duddud님 😀

좋은 질문 감사드립니다~

lenis와 smooth-scrollbar는 몇가지 차이점이 있습니다.

lenis는 가상 스크롤(virtual scroll)을 사용하여 기본 스크롤 동작을 변경하는 방식이고,

requestAnimationFrame을 사용해 스크롤 애니메이션을 처리합니다.

smooth-scrollbar는 실제 DOM요소를 사용하여 스크롤바를 완전 새롭게 재구현하여 스크롤 애니메이션을 처리합니다.

lenis는 단순히 부드러운 스크롤 효과를 적용해야 하는 경우에 적합한 도구이며 기능을 많이 포함하고 있지 않기 때문에 용량도 작다는 장점이 있습니다.

smooth-scrollbar는 기본 브라우저 스크롤바를 완전히 다른 DOM요소로 대체하기 때문에 스크롤바의 색상, 너비, 모서리, 크기등 모든 부분을 css로 제어할 수 있으며, 원하는 스크롤 방향의 잠금 뿐만 아니라 스크롤의 lifeCycle과 다양한 플러그인들까지 지원하기 때문에 보다 복잡하고 섬세한 컨트롤이 가능합니다.

뭐가 더 좋다 나쁘다 할것 없이 도구는 상황에 맞게 사용하는게 제일 좋은 방향인 것 같습니다.

마치 React vs Vue vs Svelt 도구들을 골라 사용하는 것 처럼 말이죠,

강의 수강해주셔서 감사합니다 :)

안녕하세요, 인프런 AI 인턴입니다. duddnd님.

smooth-scrollbar와 Lenis의 차이에 대해 궁금하신 것 같네요. 프론트엔드 개발에서 부드러운 스크롤을 구현하는 방식은 여러 가지가 있으며, 사용 목적에 따라 적합한 라이브러리를 선택하는 것이 중요합니다.

1. scrollerProxy vs. window.scrollY:

   • smooth-scrollbar는 scrollerProxy를 사용하여 스크롤 값을 커스터마이징하여 다양한 애니메이션 효과를 줄 수 있습니다. 이것은 더 많은 제어를 필요로 하는 복잡한 애니메이션을 구현할 때 유리합니다.
     
   • 반면, Lenis는 직관적으로 window.scrollY를 업데이트하여 스크롤을 처리하므로, 간단한 스크롤을 위한 보다 쉬운 접근을 제공합니다.
     

2. 학습 목적으로의 선택:

   • scrollerProxy를 배우는 것은 개발자에게 스크롤 값과 애니메이션 간의 상호작용을 더 깊이 이해하도록 돕습니다. 이는 고급 웹 애니메이션 개발을 목표로 하는 경우 유용한 기술입니다.
     

3. Lenis의 문제점:

   • Lenis가 다른 특정 문제를 갖고 있는 것은 아니지만, 이 라이브러리가 모든 상황에 적합한 것은 아닙니다. Lenis는 스크롤의 부드러움에 초점을 맞추고 있지만, 복잡한 환경에서는 부족함을 느낄 수 있습니다.
     

궁극적으로 어느 라이브러리를 선택할지는 구현하고자 하는 프로젝트의 복잡성, 관리하려는 스크롤 애니메이션의 복잡성에 따라 달라질 것입니다.

아래의 링크들은 다른 수강생들이 비슷한 문제를 다루며 토론한 게시글입니다. 이를 통해 추가적으로 해결책을 얻으실 수 있습니다:
- Smooth Scrollbar를 활용한 GSAP 구현 사례
- OneScroll Layout에서의 스크롤 문제 해결

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.