네이버의 오픈소스 캐로셀 라이브러리 Flicking

 

현재 다니고 있는 회사에서 업무 상 캐로셀 작업이 꽤 많이 있는데, 지금 관리하고 있는 소스는 swiper 라이브러리를 이용하여 쓰고 있습니다.

기존 소스 유지보수 및 리뉴얼 작업 기간을 고려하여 라이브러리 자체를 변경하진 않고 불편하면 불편한대로 커스텀하여 쓰고 있으나, 기획이나 타 팀의 요구사항이 꼭 라이브러리에서 제공하는 범위에 국한하여 들어오지는 않기 때문에 많은 에로사항이 있었죠.

 

Flicking 라이브러리를 접하고 공유해지신 회사 동료분도 저와 같이 작업을 했기 때문에 지금 소스의 캐로셀이 얼마나 개발자를 짜증나게 하는지 공감하고 계셨습니다. Flicking을 알게되고 바로 공유를 해주셨는데 보자마자 'prepend도 있다고?' 하면서 기존 소스를 싹 바꿔버리고 싶은 마음이 들었죠.(오픈이 얼마 남지 않은 관계로 당장은 못하지만..)

 

그래서 나중에 꼭 이용해보고자 다짐도 할 겸, 소개해보려 합니다.

 

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

Flicking · Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

 

 

Flicking 소개

네이버의 오픈소스 캐로셀 라이브러리 Flicking의 메이저 4버젼을 소개드립니다.

이번 메이저 업데이트는 지난 2년간 Flicking을 운영해오면서, Flicking이 갖고 있었지만 해결하기 어려웠던 문제점들을 해결하고 더 발전시키는데 그 목적이 있습니다.

 

Flicking v4의 핵심적인 변화사항

✔ 사용자의 UI를 그대로 유지합니다

많은 수의 캐로셀 라이브러리가 내부 패널 엘리먼트의 크기를 재조정하는 동작을 갖고 있고, 때문에 흔히 “화면에 몇 개의 패널을 표시할 것인지”에 관한 옵션을 기본적으로 제공하는 경우가 많고, 사용자의 UI를 그대로 유지하기 위해서는 별도의 옵션을 사용하곤 합니다.

 

Flicking은 이와는 다르게, 사용자의 UI를 최우선으로 사용합니다. 캐로셀 UI를 구현하기 위한 기본적인 DOM 구조와 CSS를 포함시키기만 하면 이외의 모든 UI 관련 세팅은 사용자의 CSS에 기반하여 따라갑니다. 예를 들면, 사용자는 CSS의 “width”를 이용하여 각각의 패널의 크기를 쉽게 변경할 수도 있고, CSS의 “margin”을 이용하여 패널간의 간격을 쉽게 조절할 수 있습니다.

 

<Flicking>
  <!-- 100px짜리 패널, 다음 패널과 10px을 간격을 가짐 -->
  <div style="width: 100px; margin-right: 10px;"></div>
  <!-- 부모 엘리먼트 대비 20% 크기를 갖는 패널 -->
  <div style="width: 20%"></div>
</Flicking>

 

 

✔ 별도 CSS 파일 제공을 통해, SSR(Server-Side Rendering)을 지원합니다

Flicking v4에서는 컴포넌트 js 파일 이외에 CSS 파일을 별도로 제공하고 있습니다. 이를 통해, SSR 환경에서 hydration 전후 UI 변화에 대응할 수 있음은 물론, 마크업과 스크립트 개발자가 서로 다른 환경에서 마크업 개발자가 최종적으로 보여야만 하는 UI를 만들어낼 수 있기 때문에 스크립트 개발자의 부담을 좀 더 줄일 수 있게 되었습니다.

 

✔ 더 쉽게 커스터마이징 가능합니다

Flicking v3는 Flicking과 Panel에 대해서만 API 문서를 제공했기 때문에 세부적인 커스터마이징은 어려웠습니다. 또한, React나 Angular, Vue와 같은 프레임워크에 대해서 지원하고 있음에도 불구하고 관련된 튜토리얼이 존재하지 않았었죠.

 

 

설치

Flicking 라이브러리는 Javascript, React, Vue, Angular, Preact, Svelte 등의 언어에서 사용할 수 있습니다.

 

 

데모 메뉴를 통해 새로운 패널을 이전/이후에 추가하는 모습도 확인하고

 

코드를 어떻게 작성하면 되는지 확인 할 수 있습니다.