custom-swipe
배경
기존의 메이저 스와이프 라이브러리들은 기능이 방대하지만 번들 사이즈가 무겁고, 디자인 커스터마이징 시 라이브러리 고유의 스타일과 충돌하는 경우가 많았습니다.
특히 저사양 기기나 네트워크 환경이 좋지 않은 환경에서도 매끄럽게 동작할 수 있는 경량화된 스와이프 기능이 필요했습니다.
이를 해결하기 위해 UI 스타일은 개발자가 직접 정의하고 핵심 로직만 제공하는 'Headless' 방식의 라이브러리를 직접 설계하게 되었습니다.
해결한 문제
- 프레임워크 종속성 탈피: 스와이프의 핵심 로직(Core)을 DOM 조작 중심의 비제어 방식으로 분리하여, React, Vue, Svelte 등 어떤 프레임워크에서도 동일한 로직으로 동작하도록 설계했습니다.
- 번들 사이즈 최적화: 필수적인 스와이프 로직(Infinite Scroll, Carousel 등)에만 집중하여 외부 라이브러리 대비 현저히 가벼운 용량을 유지했습니다.
- 자유로운 UI 커스터마이징: 특정 마크업이나 인라인 스타일을 강제하지 않는 Headless Hook 방식을 제공하여, 개발자가 프로젝트의 디자인 시스템에 맞춰 스와이프 UI를 완벽하게 제어할 수 있도록 했습니다.
기술적 선택 근거
- Headless Architecture: UI와 비즈니스 로직을 분리하여 재사용성을 극대화하고, 다양한 디자인 요구사항에 유연하게 대응하기 위해 채택했습니다.
- TypeScript: 라이브러리 사용자에게 명확한 타입 정의와 가이드를 제공하여, 복잡한 이벤트 핸들링 과정에서의 오류를 방지하고 개발 경험(DX)을 향상시켰습니다.
- Multi-Package (Monorepo): 하나의 코어 로직을 기반으로 각 프레임워크(React, Vue, Svelte) 전용 래퍼 패키지를 효율적으로 관리하기 위해 사용했습니다.
- Vanilla DOM API: 리액트 등의 상태 시스템에 의존하기보다 직접적인 DOM 조작을 통해 성능 최적화와 프레임워크 독립성을 확보했습니다.
README
Custom-Swipe: A Lightweight and Headless Frontend Library
Custom-Swipe is a versatile solution designed for seamless user interactions in web applications. Whether you're building a responsive web app or enhancing the user experience on various devices, Custom-Swipe offers a range of swipe features. It serves as both a basic component for easy integration and a powerful headless hook for developers seeking granular control.
Key Features
- Lightweight: Minimize your bundle size with our lightweight library.
- Responsive: Ensure smooth interactions across various devices and screen sizes.
- Customizable: Tailor swipe behavior to suit your application's specific needs.
- Headless Hook: For developers who prefer a programmatic approach, our headless hook provides extensive control over swipe events.
Explore the possibilities with Custom-Swipe and elevate your frontend development experience.
Supports
Features
- Swipe
- Infinite swipe(scroll)
- Carousel
LICENSE
- MIT