모바일에서 웹으로의 전환: Expo Web과 FastAPI를 사용하여 3-Pane 데스크톱 AI 인터페이스를 구축한 방법

풀스택 애플리케이션을 구축할 때, 우리는 종종 초기에 플랫폼을 선택해야 한다는 제약에 갇히곤 합니다. 하지만 여러분의 네이티브 모바일 앱이 멀티 페인(multi-pane) 레이아웃, 실시간 스트리밍, 그리고 마찰 없는 사용자 경험을 갖춘 데스크톱급 웹 버전이 필요해진다면 어떻게 될까요?

저의 프로젝트인 LLM Council을 위해, 저는 그 간극을 완전히 메우기로 결정했습니다. 우리의 네이티브 아키텍처를 고성능 웹 클라이언트로 어떻게 마이그레이션했는지 그 세부 내용을 공유합니다.

아키텍처 설정 (The Architecture Setup)

목표는 간단했습니다. iOS/Android 모바일 빌드를 지원하는 동시에, 정확히 동일한 코드베이스로부터 완전히 분리된 프리미엄 데스크톱 웹 앱을 구축하는 것이었습니다.

• 프론트엔드 (Frontend): Expo Web (React Native for Web) + NativeWind (Tailwind CSS)
• 상태 관리 (State Management): Zustand (로컬 캐싱, 게스트 모드를 위한 무거운 동기화 네트워크 우회)
• 백엔드 (Backend): Python / FastAPI (Render에서 호스팅)
• 호스팅 (Hosting): Vercel (Edge 네트워크 최적화)

우리가 극복한 3가지 기술적 장애물

1. 서버 간 프록시를 통한 CORS 우회

브라우저는 OpenRouter와 같은 제3자 AI API와 직접 통신할 때 엄격한 교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 규칙을 적용합니다. 이를 해결하기 위해, 우리는 프론트엔드 요청을 FastAPI 백엔드로 직접 라우팅했습니다. Python 서버는 브라우저의 CORS 제한을 받지 않기 때문에, 우리의 백엔드가 보안 API 호출을 원활하게 처리할 수 있습니다.

2. 서버 전송 이벤트 (SSE, Server-Sent Events)를 통한 라이브 스트림

웹에서 ChatGPT 스타일의 매우 부드러운 타이핑 애니메이션을 구현하기 위해, 우리는 무거운 데이터베이스 리스너를 우회하고 브라우저 네이티브 ReadableStream API를 직접 사용했습니다. 우리는 들어오는 원시 바이너리 텍스트 스트림을 청크(chunk) 단위로 파싱하며, Zustand 스토어에 업데이트를 정밀하게 전달하여 AI 토론의 다양한 단계를 애니메이션화합니다.

3. Vercel의 "화이트 스크린 오브 데스 (White Screen of Death)"와의 싸움

Vercel과 같은 정적 플랫폼(static platform)에 Expo Router 앱을 배포하면, 하위 페이지(예: /chat/123)를 새로고침할 때 MIME-type 패닉(MIME-type panics)이나 라우팅 문제(routing issues)가 발생하는 경우가 많습니다. 프로젝트 디렉토리에 커스텀 vercel.json rewrite 설정을 추가함으로써 싱글 페이지 라우팅 루프(single-page routing loop) 문제를 영구적으로 해결했습니다:

{
  "rewrites": [
    {
...

공식 출시! 🚀

데스크톱 클라이언트가 공식적으로 가동되었으며, Vercel의 글로벌 엣지 네트워크(global edge network)에서 끊김 없이 컨텍스트를 스트리밍하며 작동하고 있습니다.

공식 발표 내용과 최종 UI 상세 분석을 여기서 확인하세요:

https://x.com/JimmyFalco65924/status/2061129219049181598?s=20

Expo 앱을 웹으로 마이그레이션해 본 적이 있으신가요? 가장 컸던 레이아웃이나 배포 관련 장애물은 무엇이었나요? 아래에서 함께 이야기해 봅시다!