피드로 돌아가기
From 34 to 41 AI Providers + Notion-Style Tab Blocks in Flutter Web
Dev.toDev.to
Frontend

OpenAI SDK 표준화와 Markdown 기반 설계를 통한 AI Provider 41개 확장

From 34 to 41 AI Providers + Notion-Style Tab Blocks in Flutter Web

kanta13jp12026년 4월 16일4intermediate

Context

다양한 AI Provider의 신속한 온보딩과 Notion 스타일의 복잡한 UI 구조를 Flutter Web 환경에서 구현해야 하는 과제 직면. 고정된 UI 위젯 구조로는 지속적인 Provider 추가에 따른 유지보수 비용 증가와 데이터 포맷 파편화 가능성 존재.

Technical Solution

  • OpenAI SDK 호환 API를 채택하여 base_url 변경만으로 Qwen, Moonshot 등 신규 Provider를 통합하는 Migration 비용 최소화 구조 설계
  • Supabase 기반의 DB-Driven UI 패턴을 적용하여 Dart 코드 수정 없이 SQL Migration만으로 신규 컨텐츠 및 Provider 탭을 확장하는 데이터 중심 설계
  • GitHub Actions 기반의 2시간 주기 자동 갱신 워크플로우를 구축하여 최신 뉴스 카테고리 데이터의 동기화 자동화
  • Markdown의 H2 태그와 구분선(---)을 조합한 커스텀 블록 파서를 구현하여 Proprietary 포맷 없이 Notion-Style Tab UI를 렌더링하는 구조 채택
  • flutter_markdown과 DefaultTabController를 결합하여 표준 Markdown 호환성을 유지하며 인터랙티브한 Tab 뷰를 제공하는 렌더링 로직 구현

- 신규 API 통합 시 표준 SDK 호환 여부를 최우선으로 검토하여 인터페이스 단일화 추진 - UI 요소의 추가가 빈번한 경우 하드코딩된 위젯 대신 DB-Driven 메타데이터 구조 설계 고려 - 커스텀 리치 텍스트 기능 구현 시 전용 포맷 대신 표준 Markdown 확장 방식을 채택하여 데이터 벤더 락인 방지

원문 읽기