From Chaos to Control: Building a Google Maps–Style AI Command Console with Cloud Run

개요

Cloud Run을 사용하여 Google Maps 스타일의 AI 명령 콘솔을 구축하는 과정에서 발생한 UI 및 배포 문제를 해결하고, 완전한 기능을 갖춘 AI 기반 경기장 네비게이션 시스템을 개발한 경험을 공유합니다.

주요 내용

* 시스템 아키텍처: 사용자 입력(React)에서 시작하여 백엔드(Node.js), 빅쿼리(크라우드 데이터), Vertex AI(추론), Firebase(로깅)를 거쳐 UI 시각화로 응답하는 전체 스택 AI 시스템을 구축했습니다.
* 기술 스택: 프론트엔드는 React + Vite, 백엔드는 Node.js + Express, AI 레이어는 Vertex AI (Gemini), 데이터 레이어는 BigQuery, 로깅은 Firebase, 배포는 Cloud Run, 인프라는 Docker + Artifact Registry를 사용했습니다.
* UI 기능: 줌 및 이동 가능한 SVG 지도, 경기장 구역(게이트, 시설), 애니메이션 AI 경로(파티클 흐름), 히트맵 레이어(군중 밀집도), 토글 가능한 시설 레이어, AI 추론 패널(타이핑 효과)을 포함한 공간 AI 제어 허브로 UI를 재구축했습니다.
* 논리적 문제 해결: 초기 AI 시스템의 무작위 출력 문제를 해결하기 위해 의도 정규화, 규칙 기반 라우팅, 검증 가드 계층을 도입하여 결정론적 라우팅 엔진을 구축했습니다.
* Cloud Run 배포 문제 및 해결:
* 컨테이너 시작 오류: Cloud Run은 PORT=8080에서 실행되고 0.0.0.0에 바인딩되는 실행 서버를 요구하므로, 백엔드 코드에서 app.listen(PORT, '0.0.0.0', ...) 설정을 통해 해결했습니다.
* 프론트엔드 오류: Cloud Run은 서버를 기대하지만 프론트엔드는 정적 파일이므로, Dockerfile에서 CMD ["node", "server.js"]를 사용하여 프론트엔드를 서버 안에 포함시켜 해결했습니다.
* 주요 학습 내용: Cloud Run은 엄격하며 PORT, 서버 프로세스, 올바른 컨테이너 구조를 따라야 합니다. Cloud Run 환경에서는 프론트엔드가 더 이상 정적이지 않으며, 구축, 제공, 실행이 필요합니다. AI는 구조 없이는 잘 작동하지 않으며, 디버깅이 코딩보다 중요합니다.

시사점

AI 애플리케이션을 구축할 때 배포는 필수적이며, 아키텍처는 UI보다 더 중요합니다. 클라우드 지식은 경쟁 우위를 제공하며, 프로덕션 수준의 AI 시스템 구축 경험은 UI 개발 이상의 가치를 지닙니다.