피드로 돌아가기
Dev.toFrontend
원문 읽기
SSE 기반 실시간 테마 업데이트로 앱 배포 없는 2초 내 UI 변경 구현
I built a remote skin engine for Flutter
AI 요약
Context
Compile-time 테마 시스템으로 인한 단순 색상 변경 시에도 전체 빌드 및 스토어 심사 과정이 강제되는 비효율 발생. 정적 설정값으로 인한 릴리스 사이클 지연 및 운영 유연성 결여 문제 분석.
Technical Solution
- 하드코딩된 값 대신 명명된 Token 기반의 Runtime Skin Engine 설계
- PostgreSQL과 Supabase Realtime을 연동한 데이터 변경 감지 체계 구축
- Node.js 백엔드를 통한 Server-Sent Events(SSE) 기반의 실시간 Push 알림 구조 채택
- SSE 플래그 수신 후 CDN에서 최신 Skin 데이터를 Re-fetch 하는 2단계 업데이트 전략
- Stream API와 setState() 연동을 통한 MaterialApp의 즉각적인 리페인트 유도
Impact
- 단순 UI 변경에 소요되는 전체 릴리스 사이클을 약 2초 내외의 실시간 업데이트로 단축
실천 포인트
정적 설정값의 잦은 변경이 예상되는 UI 요소는 Token 기반의 Remote Config 구조로 분리하고, Polling 대신 SSE나 WebSocket을 활용하여 전송 효율 최적화 검토