피드로 돌아가기
Zero-Config New AI Provider Tabs: DB-Driven Dynamic Tabs in Flutter + Supabase
Dev.toDev.to
Frontend

DB 기반 동적 탭 구조로 66개 AI 프로바이더 관리 공수 제로화

Zero-Config New AI Provider Tabs: DB-Driven Dynamic Tabs in Flutter + Supabase

kanta13jp12026년 4월 17일6intermediate

Context

하드코딩된 TabController 구조로 인해 신규 AI 프로바이더 추가 시마다 UI 코드 수정과 배포가 반복되는 비효율 발생. 프로바이더 수 증가에 따른 유지보수 비용 상승 및 배포 사이클 지연 문제를 해결해야 하는 상황.

Technical Solution

  • Supabase DB를 Source of Truth로 설정하여 데이터 삽입만으로 UI가 자동 갱신되는 DB-Driven 아키텍처 설계
  • UNIQUE(provider, category) 제약 조건을 활용한 UPSERT 쿼리 구현으로 중복 데이터 방지 및 효율적 업데이트 수행
  • TabController 재생성 전 dispose() 호출을 통한 TickerProvider 메모리 누수 방지 로직 적용
  • _providerMeta 맵 기반의 Fallback 메커니즘을 구축하여 메타데이터 부재 시에도 Graceful Degradation 유지
  • maybeSingle() 메서드 활용으로 특정 카테고리 데이터 부재 시 발생하는 406 에러 원천 차단
  • 세션 라이프타임 기반의 In-memory Cache를 도입하여 불필요한 네트워크 요청 제거 및 응답 속도 최적화

1. 동적 UI 변경이 잦은 경우 설정 값을 DB로 관리하는 Dynamic UI 패턴 검토

2. Flutter TabController 등 State 관련 객체 재할당 시 반드시 기존 객체 dispose 여부 확인

3. API 응답의 불확실성을 처리하기 위해 예외 발생 대신 null을 반환하는 Safe-fetch 메서드 활용

4. 필수 데이터와 선택적 메타데이터를 분리하여 데이터 부재 시의 Fallback 전략 수립

원문 읽기