짭방 — 서울 아파트 전월세 실거래가 지도
어제 서울에서 어떤 아파트 거래가 있었는지, 지도 위에서 한눈에 확인하세요.
🔗 서비스 주소: https://zzapbang.vercel.app
서비스 소개
짭방은 국토교통부 실거래가 공공데이터를 매일 자동 수집해 지도 위에 시각화하는 정적 웹 서비스입니다. 서버 없이 GitHub Actions + Vercel만으로 운영됩니다.
주요 기능
지도
- 서울 전체 전·월세 거래를 지도 마커로 표시
- 전세: 보증금 구간별 색상 (초록 → 노랑 → 주황 → 빨강)
- 월세: 파란색 빈 원으로 구분
- 마커 클릭 시 상세 팝업 표시
팝업 상세 정보
- 아파트명, 동·층·면적(평수 + ㎡), 보증금(월세 시 월 임대료 포함)
- 가장 가까운 지하철역 — 1~9호선·신분당·분당·공항철도·경의중앙 전 노선, 호선 색상 뱃지 + 도보 예상 시간
- 집 내부 사진 보기 (네이버 부동산 검색 링크)
- 주변 환경 보기 (카카오 로드뷰)
- 채광·조망·소음 확인 (네이버 블로그·카페 후기 검색)
- ☆ 즐겨찾기 추가 — 로컬스토리지에 저장, 최대 10개
- 💬 카카오톡 공유 — 모바일: Web Share API / 데스크탑: 클립보드 복사
거래 목록
- 보증금 낮은 순 정렬
- 전체 / 전세 / 월세 탭 필터
- 목록 클릭 시 지도에서 해당 위치로 자동 이동 및 팝업 오픈
- 선택된 항목 자동 스크롤
즐겨찾기 (★)
- 팝업에서 ☆ 버튼으로 즐겨찾기 추가·해제
- ★ 탭에서 저장된 목록 조회 (날짜 무관)
- 지도에는 즐겨찾기한 매물만 마커로 표시
- 목록에서 ✕ 버튼으로 개별 제거
- 브라우저 로컬스토리지에 저장 — 앱을 닫아도 유지
날짜 선택
- 데이터가 있는 날짜만 드롭다운에 표시
- 날짜 변경 시 해당 날짜 거래 데이터를 자동 로드
통계 바
- 지도에 표시된 건수, 전세 평균 보증금 실시간 표시
데이터 수집 방식
| 항목 | 내용 |
|---|
| 수집 시점 | 매일 KST 06:00 (GitHub Actions cron 0 21 * * * UTC) |
| 수집 대상 | 전날 계약된 서울 아파트 전·월세 거래 |
| 데이터 출처 | 국토교통부 실거래가 공공데이터 (data.go.kr) |
| 지오코딩 | 카카오 REST API (주소 → 위경도 변환, 캐시 적용) |
| 저장 방식 | public/data/YYYY-MM-DD.json → GitHub 커밋 → Vercel 자동 배포 |
참고: 부동산 실거래 신고는 계약일로부터 최대 30일 이내에 하면 되므로, 당일 수집 건수는 적을 수 있습니다. 이후 며칠간 신고 건이 추가되며 실제 건수가 늘어납니다.
프로젝트 구조
zzapbang/
├── scripts/
│ └── collect.py # 공공데이터 수집 + 지오코딩 스크립트
├── public/
│ ├── data/ # 날짜별 JSON (YYYY-MM-DD.json) + geocode 캐시
│ ├── robots.txt
│ └── sitemap.xml
├── src/
│ ├── components/
│ │ ├── KakaoMap.jsx # Leaflet 지도 + 마커 + 팝업
│ │ ├── RecordList.jsx # 거래 목록
│ │ └── FavoritesList.jsx # 즐겨찾기 목록
│ ├── data/
│ │ └── subway.js # 서울 지하철역 좌표 데이터 (~200개역)
│ ├── utils/
│ │ ├── deposit.js # 보증금 포맷·색상·평수 계산 유틸
│ │ └── favorites.js # 즐겨찾기 로컬스토리지 유틸
│ ├── App.jsx
│ └── App.css
├── .github/workflows/ # GitHub Actions 수집 자동화
├── index.html
└── vite.config.js
기술 스택
| 분류 | 기술 |
|---|
| 프론트엔드 | React 18, Vite |
| 지도 | Leaflet + OpenStreetMap (react-leaflet) |
| 스타일 | 순수 CSS (다크 테마, 모바일 퍼스트, 100dvh) |
| 데이터 수집 | Python 3, requests |
| 공공 API | 국토교통부 아파트 전월세 실거래가 (data.go.kr) |
| 지오코딩 | 카카오 REST API (/v2/local/search/keyword.json) |
| 자동화 | GitHub Actions (cron) |
| 호스팅 | Vercel (정적 사이트 자동 배포) |
| 데이터 저장 | GitHub 저장소 내 JSON 파일 (서버 DB 없음) |
| 클라이언트 저장 | 브라우저 localStorage (즐겨찾기) |
| 공유 | Web Share API (모바일) / Clipboard API (데스크탑) |
| SEO | Google Search Console, Open Graph, sitemap.xml |
