프로젝트 개요

청약 인사이트 대시보드는 공공데이터포털 한국부동산원 청약홈 API를 연동해 전국 아파트 청약 데이터를 실시간 수집·저장·시각화하는 풀스택 웹 애플리케이션입니다.

단순 API 조회 화면에서 출발해 DB 캐싱 → 자동 동기화 → AI 챗봇까지 단계적으로 기능을 확장했습니다.

🔗 라이브 데모: krema-ai-edu-ply8.vercel.app


시스템 아키텍처

공공데이터포털 청약홈 API (5종) Next.js API Routes 서버사이드 프록시 API 키 보안 처리 Turso DB libSQL / SQLite TTL 캐싱 전략 Vercel Cron 매일 KST 02:00 자동 DB 갱신 React UI ECharts · GeoMap AI 챗봇 팝업

DB-first 캐싱 전략

매 요청마다 공공 API를 호출하는 방식의 한계(응답 지연, 속도 제한)를 해결하기 위해 TTL 기반 캐싱 레이어를 구현했습니다.

요청 수신
   ↓
isStale(apiName, TTL) 확인
   ├── 신선함 (TTL 이내) → DB에서 즉시 반환
   └── 오래됨 (TTL 초과) → 공공 API 호출 → DB upsert → 반환
API 종류 TTL 갱신 주기
분양공고 15분 수시
경쟁률 5분 수시
신청·당첨 통계 60분 매월 26일

핵심 기능

RAG 챗봇 (Text-to-SQL)

자연어 질문을 SQL로 변환해 DB를 직접 조회하고 스트리밍 답변을 생성합니다.

사용자 질문 (자연어)
      ↓
GPT-3.5 (1단계: Tool Call 판단)
      ├── Tool Call 없음 → 일반 답변 스트리밍
      └── Tool Call 있음 → queryDatabase 실행
                              ↓
                        SELECT 쿼리 실행
                              ↓
                        GPT-3.5 (2단계: 결과 해석 → 스트리밍 답변)
  • SELECT 쿼리만 허용하는 화이트리스트 검증으로 데이터 변조 방지
  • DB 스키마 컨텍스트를 시스템 프롬프트에 주입

데이터 시각화

컴포넌트 기술 기능
HBarRank SVG 커스텀 경쟁률 TOP 8 가로 막대 히트맵
KoreaMap GeoJSON + SVG 전국 타일맵 히트맵
EChart Apache ECharts 인터랙티브 차트
Donut SVG 커스텀 공급 유형 비율

기술 스택

구분 기술
프론트엔드 Next.js 14, React 18, TypeScript, Tailwind CSS
데이터 Turso (libSQL), SWR, nuqs
시각화 Apache ECharts, Recharts, SVG 커스텀
AI OpenAI GPT-3.5, Text-to-SQL
인프라 Vercel, Vercel Cron, GitHub

개발 단계별 기능 확장

① API 연동 공공API 5종 서버사이드 프록시 ② 시각화 SVG·ECharts·GeoMap 4개 서브 페이지 ③ DB 캐싱 Turso·TTL 전략 응답속도 개선 ④ 자동화 Vercel Cron KST 02:00 갱신 ⑤ AI 챗봇 Text-to-SQL GPT-3.5

55,000건 이상의 실제 공공데이터를 처리하는 현실적인 규모의 풀스택 프로젝트입니다.