네이버 오픈소스 캐로셀 컴포넌트 Flicking

JS 공부를 하면서 혼자 네이버 쇼핑 따라 하기를 진행하던 중 슬라이더 구현에서 멈칫하게 되었다. 네이버처럼 자연스러운 기능을 구현하려 하니 코드가 점점 꼬이는 기분이 들어서이다.

https://hyermione.tistory.com/category/Challenge/%EB%84%A4%EC%9D%B4%EB%B2%84%EC%87%BC%ED%95%91

'Challenge/네이버쇼핑' 카테고리의 글 목록

여러 슬라이더 관련 오픈 소스를 참고하려고 알아보던 중, 네이버에서 직접 사용하고 관리하는 Flicking에 대하여 발견하게 되었다..! 두둥

호기심이 생겨 간단하게 정리한 바를 포스팅으로 남겨본다-!

 

Flicking

내가 이해한 바가 맞다면, flicking은 2015년부터 네이버에서 오픈소스로 운영하고 있는 캐로셀 컴포넌트이다. 리드미에서는 다음과 같은 문구로 시작하니 아마 맞을 것이다.

Copyright (c) 2015-present NAVER Corp.

 

지원하는 프레임 워크를 살펴보면 가장 기본인 바닐라 스크립트는 물론일 것이고, 뷰, 스벨트, 리액트, 앵귤러 등 다양한데, 특히나 인상 깊었던 부분은 vue3까지 벌써 (완벽...! 인지는 잘 모르겠지만) 호환되었다는 점이다.

상단에 언급한 것 처럼 네이버 모바일 쇼핑에서 구현된 슬라이더를 고민하던 중 발견한 라이브러리이니 네이버에서 사용하는 것은 당연한 이야기이다. 네이버는 대한민국에서 알아주는 대형 포털사이트로 하루에도 방문자가 많은 서비스를 운영 중인데, 해당 페이지에서 직접 사용하고 있는 라이브러리라고 하니 그 경량성과 안정성은 단연 보장되었으리라 생각한다. 뿐만 아니라 어떠한 버그가 생기더라도 아마 빠르게 수정이 가능하지 않을까? 수정을 안 한다면 네이버도 버그를 노출시키는 채로 서비스를 운영하고 있는 것일 테니 말이다.

사실 라이브러리라는 것이 워낙 도큐멘트에 의존성이 강한 플러그인이라서 딱히 설명할 것은 없지만 그래도 새롭게 알게 되어 신기하고 즐거운 마음에 포스팅을 작성해 보았다.

오픈 소스이니 코드를 분석하고 따라하면서 얻게 되는 배움도 클 거라고 생각한다. 참고할 만한 사이트 링크를 걸어둔다. 맨 하단에 있는 미디엄 글은 2019년에 작성된 것으로 내용은 섬세하지만 예제 링크가 간혹 깨지는 부분이 있으니 감안해주시길..!

 

참고 사이트

https://naver.github.io/egjs-flicking/ko/

Flicking

https://github.com/naver/egjs-flicking

GitHub - naver/egjs-flicking: 🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel

https://medium.com/naver-fe-platform/%EC%8B%9C%EC%84%A0%EC%9D%84-%EC%82%AC%EB%A1%9C%EC%9E%A1%EB%8A%94-%EC%BA%90%EB%A1%9C%EC%85%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-flicking-%EC%9D%84-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4-7ef02e2f7b9c

시선을 사로잡는 캐로셀 컴포넌트 Flicking 을 소개합니다