사용자의 UI는 유지하고, 커스터마이징은 더 강화한 Flicking v4를 공개합니다
네이버의 오픈소스 캐로셀 라이브러리 Flicking의 메이저 4버젼을 소개드립니다.
이번 메이저 업데이트는 지난 2년간 Flicking을 운영해오면서, Flicking이 갖고 있었지만 해결하기 어려웠던 문제점들을 해결하고 더 발전시키는데 그 목적이 있습니다.
Flicking v4의 핵심적인 변화사항들을 설명드리도록 하겠습니다.
사용자의 UI를 그대로 유지합니다
v3부터 Flicking이 갖고 있는 방향성 중 하나로 사용자가 만든 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>
Flicking v3도 위와 같은 기능을 지원하긴 했으나, 추가적으로 패널에 “position: absolute” 속성을 설정하였기 때문에 margin을 통한 패널간 간격 조절이나 width transition을 통한 자연스러운 애니메이션 구현도 불가능했습니다. 또한, 해당 속성으로 인해 명시적으로 패널의 높이를 지정하지 않는 이상 사용자의 UI를 망가뜨리는 경우도 많았습니다.
Flicking v4에서는 “position: absolute” 대신에 Flexbox 기반의 CSS를 사용하여 패널 엘리먼트들을 배치하고 있습니다. 이를 통해 앞서 Flicking v3에서 설명한 문제들을 해결하여 사용자분들이 좀 더 쉽게 UI를 커스터마이징할 수 있도록 변경했습니다. 또한, IE9를 지원해야 하는 페이지를 위해 “display: inline-box” 기반의 CSS도 별도로 제공하고 있습니다.
별도 CSS 파일 제공을 통해, SSR(Server-Side Rendering)을 지원합니다
Flicking v3에서도 Nuxt나 Next 등의 환경에서 Server-Side Rendering을 활용할 수 있도록 하고 있지만, Flicking v3는 앞서 설명한 것처럼 “position: absolute” 기반의 패널 배치 방식을 사용하고 있고, 때문에 패널 크기를 알아야만 패널을 정확한 위치에 배치할 수 있기 때문에 hydration 이전에는 패널들이 세로로 stacking되는 문제가 발생하거나 겹쳐서 표시되는 문제가 발생할 수 있습니다. 때문에, Flicking v3에서는 사용자가 렌더링 전에 적용할 CSS를 별도로 생성해야만 했습니다.
Flicking v4에서는 컴포넌트 js 파일 이외에 CSS 파일을 별도로 제공하고 있습니다. 이를 통해, 위와 같은 SSR 환경에서 hydration 전후 UI 변화에 대응할 수 있음은 물론, 마크업과 스크립트 개발자가 서로 다른 환경에서 마크업 개발자가 최종적으로 보여야만 하는 UI를 만들어낼 수 있기 때문에 스크립트 개발자의 부담을 좀 더 줄일 수 있게 되었습니다.
더 쉽게 커스터마이징 가능합니다
Flicking v4를 배포하면서, 문서와 데모 페이지 또한 업데이트했습니다. 기존 Flicking v3는 Flicking과 Panel에 대해서만 API 문서를 제공했기 때문에 세부적인 커스터마이징은 어려웠습니다. 또한, React나 Angular, Vue와 같은 프레임워크에 대해서 지원하고 있음에도 불구하고 관련된 튜토리얼이 존재하지 않아 사용법에 대한 문의가 꾸준히 들어왔습니다.
Flicking v4에서는 이러한 부분들을 개선하여, 각 프레임워크별로 사용법을 확인할 수 있는 튜토리얼을 추가했으며 커스텀 플러그인이나 UX를 만들기 위해 활용할 수 있는 내부 컴포넌트들에 대한 정보도 API 문서에 포함하여 제공하고 있습니다.
또한, Flicking의 옵션별로 getter/setter가 각각 설정되어 현재 Flicking에 설정된 각 옵션의 값을 바로 확인할 수 있으며, 옵션을 쉽게 변경할 수 있습니다.
Vue3를 지원합니다
Flicking v4 기반의 @egjs/vue3-flicking 도 같이 공개하였습니다. Vue2를 사용하시는 분들은 기존 @egjs/vue-flicking 을, Vue3를 사용하시는 분들은 vue3-flicking을 사용하시면 됩니다.
기존에 지원하던 다른 프레임워크들(React, Angular, Preact)도 여전히 지원하고 있으며, 이후에 Svelte 등 다른 프레임워크들도 추가적으로 지원할 예정입니다.
두 개의 새로운 플러그인을 지원합니다
Flicking v4에서는 그동안 많은 요청이 있었던 2개의 새로운 플러그인, Arrow와 Pagination을 사용하실 수 있습니다.
Arrow
3개의 기본 UI를 지원하며, CSS를 통해 커스터마이징 가능합니다.
Pagination
3개의 타입을 기본 제공하며, 렌더 옵션과 CSS를 통해 커스터마이징 가능합니다.
자세한 옵션 및 사용방법은 Plugins 페이지를 확인해주세요!
이외에 “preventClickOnDrag”나 “reachEdge”와 같이 편리한 옵션/이벤트들을 새로 추가했습니다.
Flicking v4는 이와 같이 사용자분들의 의견과, 이슈를 기반으로 많은 부분을 개선하여 더사용하기 편리하도록 만들었습니다. 여기에 추가로 개별 테스트를 모든 프레임워크를 대상으로 테스트하는 e2e 테스트도 운영하여 더 안정적인 라이브러리를 만들 수 있도록 노력하고 있습니다.
저희 로드맵에 적은 내용처럼, 앞으로도 지속적인 개선을 통해 더 많은 기능을 제공할 생각입니다. 사용중에 겪는 불편함이나 필요한 기능 등을 제안해주시면 라이브러리 발전에 큰 도움이 되므로 이슈를 남겨주시면 감사하겠습니다.
여러분의 Star 는 저희에게 많은 힘이 됩니다 🙏
