200ms 내 응답 체감 구현을 위한 React Native Streaming 아키텍처 설계

Context

모바일 환경의 네트워크 지연과 LLM의 긴 추론 시간으로 인해 발생하는 사용자 경험 저하 문제 해결 필요. 단순 API 호출 방식은 수 초간의 정적 대기 시간을 유발하여 서비스 이탈 및 앱 프리징 오인 가능성을 높이는 한계 존재.

Technical Solution

• API Key 유출 방지 및 Rate Limit 제어를 위한 Edge Endpoint 기반의 Proxy 아키텍처 채택
• Vercel AI SDK의 x-vercel-ai-data-stream 프로토콜을 통한 서버-클라이언트 간 정규화된 Streaming 데이터 전송
• FlatList 내 onContentSizeChange 이벤트를 활용하여 토큰 추가 시에만 동작하는 최적화된 Auto-scroll 로직 구현
• 토큰 생성 속도(30 tokens/sec)에 따른 렌더링 부하 해결을 위해 React.memo와 Custom Comparator 기반의 Message Bubble 메모이제이션 적용
• AsyncStorage 쓰기 부하 방지를 위해 토큰별 저장이 아닌 isLoading 상태 변화 시점에 맞춘 Debounced Persistence 전략 수립
• AbortController를 연동한 stop() 함수 구현으로 불필요한 모델 추론 비용 절감 및 네트워크 자원 회수