프로젝트 개요
청약 인사이트 대시보드는 공공데이터포털 한국부동산원 청약홈 API를 연동해 전국 아파트 청약 데이터를 실시간 수집·저장·시각화하는 풀스택 웹 애플리케이션입니다.
단순 API 조회 화면에서 출발해 DB 캐싱 → 자동 동기화 → AI 챗봇까지 단계적으로 기능을 확장했습니다.
🔗 라이브 데모: krema-ai-edu-ply8.vercel.app
시스템 아키텍처
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 |
개발 단계별 기능 확장
약 55,000건 이상의 실제 공공데이터를 처리하는 현실적인 규모의 풀스택 프로젝트입니다.