정비ON AI
부산의 변화를 켜다, 정비ON AI
부산 재개발·재건축 정비사업 정보 검색부터 관심지역 관리와 투자 수익 분석까지 제공하는 부동산 정보 웹앱
프로젝트 개요
한 줄 소개
정비ON AI는 부산광역시의 재개발·재건축 정비사업 공개자료를 검색하고, 관심지역을 관리하며, 예상 투자비용과 수익을 분석할 수 있도록 개발한 웹앱입니다.
개발 배경
재개발·재건축 정보는 여러 공공기관과 웹사이트에 분산되어 있습니다. 일반 사용자가 정비구역의 위치, 사업 추진단계, 관련 정보를 찾고 비교하려면 많은 시간과 노력이 필요합니다.
정비ON AI는 이러한 문제를 해결하기 위해 공식자료 검색, 위치 확인, 개인별 관심지역 관리, 수익 계산 기능을 하나의 서비스에 통합하는 것을 목표로 개발했습니다.
주요 사용자
- 재개발·재건축에 관심 있는 부산 시민
- 정비사업 관련 정보를 조사하는 부동산 투자자
- 지역 정보를 확인하는 공인중개사
- 부동산 관련 학과 학생 및 학습자
서비스 차별점
- 부산시 공식 정비사업 공개자료 중심의 정보 제공
- 재개발·재건축 유형 및 사업 추진단계별 검색
- 카카오맵을 활용한 정비구역 위치 확인
- 회원별 관심지역과 관심 정비구역 관리
- 투자비용과 예상 손익을 직접 계산하는 분석 기능
- PC·모바일에서 사용할 수 있는 반응형 인터페이스
- 정비ON 로고와 자체 마스코트 '온이'를 활용한 브랜드 경험
주요 기능
| 과제의 꼭 있어야 하는 기능 | 화면(프론트엔드) | API(백엔드) |
|---|
| 1. 정비사업 정보 검색 | 구역명·구군 검색, 재개발·재건축 필터, 추진단계, 구역 상세 및 지도 | 부산시 공식 공개자료 조회·정규화·중복 제거·검색 API |
| 2. 회원가입 및 관심지역 관리 | 이메일 및 카카오 로그인, 관심지역 저장·해제, MY 페이지 | Supabase Auth, PostgreSQL, Prisma 및 사용자별 데이터 처리 |
| 3. 투자 수익 분석 | 매입가격·추가분담금·기타 비용·완공 후 예상가격 입력, 손익 및 수익률 표시 | 입력값 검증과 투자 수익 계산 로직 |
1. 부산 정비사업 공식자료 검색
부산의 재개발·재건축 정비사업 자료를 검색하고 상세정보를 확인할 수 있습니다.
- 부산 구·군별 정비사업 검색
- 재개발·재건축 유형 필터
- 추진단계별 필터
- 정비구역 명칭 검색
- 정비구역 상세정보
- 구역면적 및 공개된 사업 관련 정보
- 부산시 원본 자료 링크
- 구·군별 정비사업 현황 통계
데이터 출처
공식자료의 원본 갱신일과 웹앱의 조회 시각을 구분하여 표시합니다.
2. 카카오맵 위치 확인
정비구역 상세 및 지역 탐색 화면에서 카카오맵 JavaScript SDK를 활용합니다.
- 부산 지역 지도 표시
- 주소가 확인된 정비구역의 위치 마커 표시
- 지도 확대·축소 및 이동
- 카카오맵에서 위치 열기
- 검색 결과와 지도 연결
실제 지도와 위치 마커의 운영 화면 표시를 확인했습니다. 다만 주소 기반 마커는 정비구역의 정확한 법적 경계를 의미하지 않습니다.
3. 회원가입 및 로그인
Supabase Authentication을 이용하여 두 가지 로그인 방식을 제공합니다.
일반 로그인
카카오 간편 로그인
- 카카오 로그인
- Supabase OAuth 연동
- PKCE 인증 콜백
로그인 이후 사용자별 관심지역 정보를 제공하는 구조로 구현했습니다.
4. 관심지역 및 관심 정비구역 관리
사용자가 관심 있는 부산 지역과 정비사업 구역을 관리하도록 구성했습니다.
- 관심 구·군 등록
- 등록된 관심지역 조회
- 관심지역 해제
- 관심 정비구역 저장 및 해제 UI
- MY 페이지
- 홈 화면의 개인화된 관심지역 표시
Supabase PostgreSQL 데이터베이스 마이그레이션을 적용하고 회원별 데이터 관리 구조를 개발했습니다.
검증 범위: 실제 운영 화면에서 관심 구·군 목록과 저장된 정비구역 표시를 확인했습니다. 다만 상세페이지의 일부 관심 등록 버튼 오류가 보고되어 수정 및 재검증이 필요합니다. 심사용 서로 다른 두 계정 간 데이터 격리도 최종 확인 대상입니다.
5. 투자 수익 계산기
재개발·재건축 투자 시나리오를 비교할 수 있습니다.
입력 항목:
- 매입가격
- 추가분담금
- 세금·금융 등 기타 비용
- 완공 후 가정 가격
분석 결과:
- 예상 총투입액
- 예상 손익
- 단순 수익률
- 보수적·기준·낙관적 시나리오 비교
초기 입력값은 빈칸으로 제공하며, 유효한 값이 입력되기 전에는 계산 결과를 —로 표시합니다. 입력 초기화 기능을 지원합니다.
계산 결과는 사용자 가정에 따른 단순 시뮬레이션이며, 실제 투자 수익을 보장하지 않습니다.
더 만든 기능
- 정비ON 브랜드 로고와 마스코트 '온이'
- 부산 정비사업 현황 대시보드
- 구·군별 통계 카드
- 정비사업 단계 시각화
- 실제 공식자료 상세페이지
- 카카오맵 정비구역 위치 표시
- 사용자별 관심지역 화면
- 로그인 및 개인화 UI
- 투자 수익 시나리오 비교
- PC·태블릿·모바일 반응형 화면
- SNS 공유용 OG 이미지
- GitHub 버전 관리 및 Vercel 자동 배포
추가 개발 및 개선 중인 기능
- 관심 정비구역 등록·해제 버튼의 전체 화면 동작 검증
- 심사용 계정 2개의 실제 저장·수정·삭제 및 데이터 분리 검증
- 모바일 계산기 입력·금액 단위 표시 최적화
- 반응형 UI 세부 조정
- AI도우미 챗봇
- 정비사업 FAQ
- 자연어 구역 검색 및 상세페이지 안내
- 모바일 음성 입력
- 개인 맞춤 알림 고도화
기술 스택
| 구분 | 사용 기술 | 활용 목적 |
|---|
| 프론트엔드 | Next.js, React, TypeScript | 웹앱 화면 및 기능 개발 |
| UI | Tailwind CSS, CSS, HTML | 반응형 디자인과 컴포넌트 |
| 서버 | Next.js 서버 기능, Node.js | API·인증·서버 처리 |
| 인증 | Supabase Authentication | 이메일 로그인 및 카카오 OAuth |
| 데이터베이스 | Supabase PostgreSQL | 회원 및 관심지역 데이터 |
| ORM | Prisma | 데이터 모델과 DB 접근 |
| 지도 | Kakao Maps JavaScript SDK | 정비구역 위치 표시 |
| 외부 데이터 | 부산광역시 공식 공개자료 | 재개발·재건축 사업정보 |
| 버전 관리 | Git, GitHub | 개발 이력과 소스 관리 |
| 배포 | Vercel | 운영 웹사이트 배포 |
데이터 관리
Supabase Auth
- 사용자 인증 및 세션 관리
- 이메일·비밀번호 로그인
- 카카오 OAuth 연동
Supabase PostgreSQL
- 회원 프로필
- 관심지역
- 관심 정비구역
- 알림 관련 설정
Prisma
- 데이터 모델 정의
- 관계형 데이터 접근
- 마이그레이션 관리
사용자별 데이터 접근 제어를 위해 서버 측 소유권 검증 및 RLS 정책을 설계·적용하는 구조를 사용합니다.
실행 방법
1. 개발 환경
- Node.js 24.x
- Git
- VS Code 또는 호환 개발 도구
- Supabase 프로젝트
- 카카오 개발자 애플리케이션(지도·카카오 로그인 사용 시)
2. 프로젝트 다운로드
git clone https://github.com/ddrong/re-zone.git
cd re-zone
3. 패키지 설치
npm ci
4. 환경변수 설정
.env.example 및 docs/SETUP.md를 참고하여 프로젝트 루트의 .env.local에 필요한 값을 설정합니다.
대표 환경변수 이름:
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
NEXT_PUBLIC_KAKAO_MAP_JS_KEY=
DATABASE_URL=
DIRECT_URL=
환경변수의 실제 값은 프로젝트별로 다르며 공개 저장소에 올리지 않습니다.
카카오 로그인 제공업체의 REST API 키와 Client Secret은 Supabase 제공업체 설정에서 별도로 관리합니다.
5. 로컬 실행
npm run dev
터미널에 표시된 로컬 주소로 접속합니다. 기본 포트가 사용 중이면 다른 포트로 실행될 수 있습니다.
6. 코드 검사
npm run typecheck
npm run lint
npm run build
운영 DB에 마이그레이션을 적용할 때는 별도의 백업과 변경 검토 절차를 수행합니다.
7. 배포 주소
정비ON AI 운영 사이트
https://jeongbi-on.vercel.app
GitHub 저장소
https://github.com/ddrong/re-zone
주요 화면
AI 활용 내역
사용한 도구
| 도구 | 활용 내용 |
|---|
| Claude | 초기 서비스 기획, 아이디어 및 제안 방향 검토 |
| Gemini | 링크 및 웹사이트 자료 분석 보조 |
| ChatGPT | 서비스 기획, 기능 설계, 프롬프트 작성, 오류 분석, 디자인 기획 |
| OpenAI Codex | 코드 작성·수정, 오류 분석, 테스트 및 배포 준비 |
| VS Code | 개발 환경 및 코드 관리 |
| GitHub | 소스코드 버전 관리 |
| Supabase | 인증·데이터베이스 관리 |
| Vercel | 웹앱 배포 및 환경변수 관리 |
주요 프롬프트(그대로 붙여 넣기)
프롬프트 1 — 부산 공식 정비사업 데이터 통합 및 검색 시스템
부산광역시에서 공개하는 재개발·재건축 정비사업 자료를 활용해 실제 데이터를 조회하는 검색 시스템을 구현하시오.
재개발과 재건축 데이터를 통합하되 사업 유형을 명확히 구분하고, 구·군, 정비구역명, 사업 추진단계를 기준으로 복합 검색할 수 있도록 설계하시오.
공식자료의 원본 정보와 조회 시각을 구분하고, 중복 자료 제거·입력값 검증·오류 처리·데이터 출처 표시를 포함하시오. 공식자료 조회 실패 시 가상의 데이터를 실제 검색 결과로 대체하지 않도록 하시오.
활용 기술: Next.js API, 공공데이터 처리, 데이터 정규화, 복합 필터링
This is the beginning of the README. Read the rest at the original. Read the full README ↗
