짭방 — 서울 아파트 전월세 실거래가 지도

어제 서울에서 어떤 아파트 거래가 있었는지, 지도 위에서 한눈에 확인하세요.

🔗 서비스 주소: 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