Flutter로 웹 프로젝트를 진행하다 보면 모바일 네이티브 UX와 웹 표준 UX 사이의 괴리감을 마주하게 됩니다. 특히 모바일의 '무한 스크롤(Infinite Scroll)' 방식은 데스크톱 웹 환경, 특히 데이터 관리가 중요한 어드민 대시보드에서는 사용자 경험을 저해하는 요소가 되기도 합니다. 저 역시 최근 프로젝트에서 페이지 번호(1, 2, 3...)를 직접 클릭하는 전통적인 웹 방식의 페이징이 절실했고, 기존 로직을 완전히 뜯어고쳐 Flutter 패키지로 배포하게 된 기술적 경험을 공유하려 합니다.
문제 인식 및 패키지화 결정
초기 구현체는 특정 비즈니스 로직에 강하게 결합된 상태였습니다. 단순히 기능을 구현하는 것에 급급해, UI 코드와 데이터 페칭 로직이 뒤섞인 '스파게티 코드'가 되어버린 것입니다. 이를 다른 프로젝트에서 재사용하려면 Copy-Paste 후 상당한 수정이 필요했습니다.
저는 이 문제를 해결하기 위해 다음과 같은 리팩토링 목표를 세웠습니다.
- Decoupling (결합도 감소): 데이터 로직 제거, 순수 UI 컴포넌트화.
- Customization (유연성 확보): Primary Color, Button Style 등을 외부 파라미터로 주입.
- Distribution (배포): pub.dev를 통한 버전 관리 및 배포.
The Solution: 배포 및 핫픽스 전략
코드를 정리하고 패키지 구조를 잡은 후, pubspec.yaml을 설정하여 첫 배포를 진행했습니다. 하지만 배포 직후 치명적인 로직 오류를 발견했습니다. 오픈소스 생태계에서 버전 관리는 신뢰의 핵심입니다. 저는 즉시 Semantic Versioning 규칙에 따라 핫픽스를 적용했습니다.
// pubspec.yaml 설정 예시
name: number_pagination
description: A simple pagination widget for Flutter Web.
version: 0.0.1+1 // 핫픽스 적용 (Build number 증가)
homepage: https://github.com/your-repo
// 핵심 위젯 구조 (Simplified)
class NumberPagination extends StatelessWidget {
final Function(int) onPageChanged;
final int totalPages;
final int currentPage;
final Color primaryColor; // 커스터마이징 포인트
const NumberPagination({
Key? key,
required this.onPageChanged,
required this.totalPages,
required this.currentPage,
this.primaryColor = Colors.blue,
}) : super(key: key);
@override
Widget build(BuildContext context) {
// 페이지 버튼 생성 로직
return Row(
children: List.generate(totalPages, (index) {
return _buildPageButton(index + 1);
}),
);
}
}버전별 상태 비교
단순 배포가 목표였던 0.0.1 버전과 실제 사용 가능한 수준으로 수정한 0.0.1+1 버전의 차이점입니다.
| Version | 상태 | 주요 변경 사항 | 안정성 |
|---|---|---|---|
| 0.0.1 | Initial Release | 기본 기능 구현, 스타일 하드코딩 존재 | Unstable |
| 0.0.1+1 | Hotfix | 치명적 버그 수정, 색상 옵션 추가 | Stable |
flutter pub publish --dry-run 명령어를 통해 경고(Warnings)나 오류를 사전에 반드시 확인해야 합니다.
Conclusion
이번 프로젝트를 통해 로컬 컴포넌트를 퍼블릭 패키지로 전환하는 전체 사이클을 경험했습니다. 현재 number_pagination 패키지는 이곳에서 확인하실 수 있습니다. 비록 아직은 초기 단계의 라이브러리지만, 향후 개발자 친화적인 README.md 작성과 버튼 모양 커스터마이징(Radius, Shadow 등) 기능을 추가하여 완성도를 높일 계획입니다. Flutter 생태계에 작은 기여를 했다는 점에서 큰 의미가 있었습니다.
Post a Comment