서울시 법정동 단위의 주거 데이터를 기반으로, 사용자의 개인 선호도에 맞는 최적의 주거 지역을 추천하는 웹 기반 매칭 서비스입니다.
- 개인화된 주거 지역 추천: 사용자가 중요하게 생각하는 요소(주거, 생활, 치안, 교통)의 가중치를 직접 조절하여 자신에게 맞는 지역을 찾을 수 있도록 지원
- 데이터 기반 의사결정 지원: 단순한 정보 나열이 아닌, 다차원 데이터를 시각화하여 사용자가 쉽게 비교하고 판단할 수 있도록 함
- 연구 도구에서 서비스로: 데이터 분석 도구의 느낌을 벗어나, 실제 사용자가 쉽고 편리하게 활용할 수 있는 서비스 형태로 구현
- 정보 과부하: 서울시 수백 개의 법정동에 대한 방대한 데이터를 어떻게 효율적으로 탐색할 것인가?
- 주관적 선호도 반영: 모든 사람이 동일한 기준으로 지역을 선택하는 것이 아닌, 개인의 우선순위를 반영한 추천이 필요한가?
- 다차원 비교의 어려움: 주거비, 생활 인프라, 치안, 교통 등 여러 요소를 동시에 고려해야 하는 복잡성
- 4가지 평가 항목: 주거, 생활, 치안, 교통
- 슬라이더를 통한 실시간 가중치 조절: 각 항목의 중요도를 0~1 사이에서 자유롭게 설정
- 동적 점수 계산: 가중치 변경 시 실시간으로 지역별 종합 점수 재계산
- TOP 10 추천 리스트: 종합 점수 기준 상위 10개 지역 자동 정렬
- Leaflet 기반 지도: 서울시 전체 지역을 한눈에 볼 수 있는 지도 제공
- 계층적 마커 표시:
- 선택된 지역: 노란색 (크기 16px)
- TOP 3 지역: 빨간색 (크기 14px)
- 나머지 TOP 10: 파란색 (크기 12px)
- 지역 선택 시 자동 확대: 추천 리스트에서 지역 클릭 시 해당 지역으로 지도 자동 이동 및 확대
- 팝업 정보: 마커 클릭 시 지역명, 순위, 종합 점수 표시
- 가상의 실시간 데이터: 사용자 조회수 기반 인기 지역 순위 시뮬레이션
- 동적 순위 변동: 3~5초마다 조회수 변경 및 순위 재정렬
- 순위 변동 표시: 상승(↑) 또는 하락(↓) 표시로 변화 추적
- 구 필터링 연동: 인기 지역 클릭 시 해당 구로 자동 필터링
- 4가지 카테고리 점수 태그: 주거, 생활, 치안, 교통 점수를 색상별 태그로 표시
- 주거 정보: 평균 월세
- 생활 인프라: 평균 소음(dB), 공원 수, 병의원 수, 점포 수
- 교통 접근성: 가장 가까운 역, 역까지 거리(km)
- 원본 데이터 테이블: CSV의 모든 컬럼을 테이블 형태로 제공
각 카테고리(주거, 생활, 치안, 교통)별로 전용 분석 페이지 제공:
- 주거 점수 랭킹 TOP 20: 테이블 및 요약 카드
- 전월세 평균 TOP 20: 수평 바 차트
- 건축년도 TOP 20: 수평 바 차트 (1990~2025년 범위)
- 안정성 점수 TOP 20: 점수 범위에 따른 색상 그라데이션 바 차트
- 생활 점수 랭킹: 자치구별 정렬
- 병의원 수 TOP 20: 수평 바 차트
- 공원 수 TOP 20: 수평 바 차트
- 평균 소음 TOP 20: 수평 바 차트
- Treemap 시각화: 생활 인프라 요소들의 상대적 비중을 면적으로 표현
- 치안 점수 랭킹: 자치구별 정렬
- 범죄 유형별 분석: 살인, 강도, 강간·강제추행, 절도, 폭력
- CCTV 및 가로등 밀도: 치안 인프라 시각화
- 파이 차트: 범죄 유형별 비중 분석
- Treemap: 자치구별 치안 데이터 비교
- 교통 점수 TOP 20: 수평 바 차트
- 버스 정류장 수 TOP 20: 수평 바 차트
- 지하철 접근성 TOP 20: 역까지 거리 기준 (가까울수록 좋음)
- 교통 인프라 요약: 선택 지역의 교통 관련 상세 정보
- 로컬 스토리지 저장: 추천 지역 TOP 10을 브라우저에 저장
- 저장 데이터 포함:
- 저장 시점 (타임스탬프)
- 선택된 구
- 설정한 가중치
- TOP 10 지역의 상세 정보 (순위, 이름, 구, 각 점수, 좌표, 역 정보, 월세 등)
- 최대 10개 세션 저장: 오래된 저장 항목부터 자동 삭제
- 서울시 자치구 선택: 드롭다운을 통해 특정 구만 필터링
- 전체 보기 옵션: 서울시 전체 지역 조회 가능
- 필터링 시 실시간 업데이트: 구 변경 시 추천 리스트 및 지도 자동 갱신
- CSV 파일 기반:
final_data.csv,life_score.csv - 데이터 범위: 서울시 법정동 단위 (약 400~500개 지역)
- 주요 데이터 컬럼:
- 주거: 주거점수, 전월세평균, 건축년도, 안정성점수, 공급건수
- 생활: 생활점수, 평균소음(dB), 공원수, 병의원수, 점포수
- 치안: 치안점수, 살인, 강도, 강간·강제추행, 절도, 폭력, CCTV, 가로등수
- 교통: 교통점수, 가장가까운역, 거리_km, 근처버스정류장수
- 지리 정보: 위도(법정동), 경도(법정동), 자치구, 법정동
- 라이브러리: Leaflet.js
- 마커 색상 코딩: 선택 상태, 순위에 따른 색상 구분
- 인터랙션: 클릭, 호버, 팝업
- 수평 바 차트 (BarChart): TOP 20 랭킹 데이터 비교
- 파이 차트 (PieChart): 범죄 유형별 비중 분석
- Treemap: 다차원 데이터의 상대적 비중 표현
- 색상 그라데이션: 점수 범위에 따른 색상 변화
- 랭킹 테이블: 순위, 지역명, 점수 등을 표 형식으로 제공
- 인터랙티브 행 선택: 행 클릭 시 해당 지역 상세 정보 표시
- 원본 데이터 테이블: 모든 CSV 컬럼을 스크롤 가능한 테이블로 제공
- 카테고리별 색상: 주거(핑크), 생활(초록), 치안(파랑), 교통(노랑)
- 실시간 값 표시: 슬라이더 위치에 따른 가중치 값 표시
- 퍼센트 표시: 슬라이더 트랙에 선택된 영역 색상 표시
- 주거 (Housing): 핑크 계열 (
#fbcfe8/#831843) - 생활 (Life): 초록 계열 (
#86efac/#14532d) - 치안 (Crime): 파랑 계열 (
#93c5fd/#1e3a8a) - 교통 (Transport): 노랑 계열 (
#fde68a/#78350f) - 헤더: 파랑 그라데이션 (
#93c5fd→#60a5fa)
- 카드 기반 레이아웃: 각 섹션을 카드 형태로 구분하여 가독성 향상
- 3단 레이아웃: 왼쪽(컨트롤), 가운데(지도), 오른쪽(결과)
- 반응형 인터랙션: 호버, 클릭 시 부드러운 애니메이션
- 명확한 정보 계층: 헤더, 섹션, 카드, 태그 등으로 정보 구조화
- 파이썬
- React 18: 컴포넌트 기반 UI 개발
- React Router DOM: 페이지 라우팅 (홈, 주거, 생활, 치안, 교통 페이지)
- Vite: 빠른 개발 서버 및 빌드 도구
- Leaflet.js: 인터랙티브 지도
- Recharts: 차트 시각화 (BarChart, PieChart, Treemap)
- CSS3: 커스텀 스타일시트
- CSS Grid / Flexbox: 레이아웃 구성
- CSS Variables: 동적 색상 관리
- Google Fonts: Nanum Square Round 폰트
- CSV 파싱: 클라이언트 사이드 CSV 파일 읽기
- LocalStorage: 브라우저 로컬 스토리지에 데이터 저장
┌─────────────────────────────────────────────────────────┐
│ 헤더: 다이어터 로고 + 서비스 설명 + 카테고리 버튼 4개 │
├──────────┬──────────────┬───────────────────────────────┤
│ 왼쪽 │ 가운데 │ 오른쪽 │
│ 패널 │ 지도 │ 패널 │
│ │ │ │
│ • 실시간 │ • Leaflet │ • 추천 지역 TOP 10 │
│ 인기 │ 지도 │ • 상세 정보 패널 │
│ 지역 │ • 마커 표시 │ • 저장하기 버튼 │
│ │ │ │
│ • 구 선택│ │ │
│ 드롭다운│ │ │
│ │ │ │
│ • 가중치 │ │ │
│ 슬라이더│ │ │
│ (4개) │ │ │
│ │ │ │
│ • 상세 │ │ │
│ 페이지 │ │ │
│ 버튼 │ │ │
│ (4개) │ │ │
└──────────┴──────────────┴───────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ 헤더: 다이어터 로고 + 서비스 설명 + 카테고리 버튼 4개 │
├─────────────────────────────────────────────────────────┤
│ ← 홈으로 돌아가기 버튼 │
├─────────────────────────────────────────────────────────┤
│ 섹션 1: 랭킹 테이블 + 요약 카드 │
├─────────────────────────────────────────────────────────┤
│ 섹션 2: 시각화 그리드 (2~3열) │
│ ┌─────────────┬─────────────┐ │
│ │ 바 차트 1 │ 바 차트 2 │ │
│ └─────────────┴─────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ Treemap / 파이 차트 (전체 너비) │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
- 개인화된 가중치 시스템: 사용자가 직접 중요도를 조절하여 자신만의 기준으로 지역을 찾을 수 있음
- 다차원 데이터 통합: 주거, 생활, 치안, 교통을 하나의 플랫폼에서 통합 분석
- 인터랙티브 시각화: 지도와 차트를 통한 직관적인 데이터 탐색
- 실시간 피드백: 가중치 변경 시 즉시 결과 반영
- 카테고리별 심화 분석: 각 항목에 대한 상세 분석 페이지 제공
CSV 파일 로드
↓
데이터 파싱 (법정동 단위 객체 배열)
↓
구 필터링 (선택 시)
↓
가중치 적용 (사용자 입력)
↓
종합 점수 계산 (주거×w1 + 생활×w2 + 치안×w3 + 교통×w4)
↓
점수 기준 정렬
↓
TOP 10 추출
↓
지도 마커 표시 + 추천 리스트 표시
↓
지역 선택 시 상세 정보 패널 업데이트
- 실제 실시간 데이터 연동: 현재 가상 데이터인 실시간 인기 지역을 실제 API와 연동
- 사용자 계정 시스템: 저장된 추천 지역을 클라우드에 저장하고 공유
- 비교 기능: 여러 지역을 동시에 비교할 수 있는 기능
- 필터 추가: 월세 범위, 건축년도 범위 등 추가 필터 옵션
- 모바일 반응형: 모바일 기기에서도 최적화된 레이아웃
- 가중치 설정: 왼쪽 패널의 슬라이더를 조절하여 각 항목의 중요도 설정
- 구 선택 (선택사항): 특정 구만 보고 싶다면 드롭다운에서 선택
- 추천 지역 확인: 오른쪽 패널에서 TOP 10 추천 지역 확인
- 지역 선택: 추천 리스트나 지도에서 지역을 클릭하여 상세 정보 확인
- 상세 분석: 카테고리 버튼을 클릭하여 각 항목별 상세 분석 페이지 이동
- 저장: 만족스러운 추천 결과를 "저장하기" 버튼으로 저장
이 프로젝트를 통해 다음을 학습하고 구현했습니다:
- 데이터 시각화: 다양한 차트와 지도를 활용한 데이터 표현
- 사용자 인터랙션: 슬라이더, 클릭, 호버 등 다양한 인터랙션 구현
- 상태 관리: React Hooks를 활용한 복잡한 상태 관리
- 데이터 처리: CSV 파싱, 필터링, 정렬, 점수 계산 등
- UI/UX 디자인: 사용자 친화적인 인터페이스 설계 및 구현
이 프로젝트는 교육 목적으로 제작되었습니다.
- 개인화된 주거 지역 추천: 사용자가 중요하게 생각하는 요소(주거, 생활, 치안, 교통)의 가중치를 직접 조절하여 자신에게 맞는 지역을 찾을 수 있도록 지원
- 데이터 기반 의사결정 지원: 단순한 정보 나열이 아닌, 다차원 데이터를 시각화하여 사용자가 쉽게 비교하고 판단할 수 있도록 함
- 연구 도구에서 서비스로: 데이터 분석 도구의 느낌을 벗어나, 실제 사용자가 쉽고 편리하게 활용할 수 있는 서비스 형태로 구현
- 정보 과부하: 서울시 수백 개의 법정동에 대한 방대한 데이터를 어떻게 효율적으로 탐색할 것인가?
- 주관적 선호도 반영: 모든 사람이 동일한 기준으로 지역을 선택하는 것이 아닌, 개인의 우선순위를 반영한 추천이 필요한가?
- 다차원 비교의 어려움: 주거비, 생활 인프라, 치안, 교통 등 여러 요소를 동시에 고려해야 하는 복잡성
- 가중치 기반 맞춤 추천 시스템 (4가지 평가 항목)
- 인터랙티브 지도 시각화 (Leaflet 기반)
- 실시간 인기 지역 (Trending Regions)
- 지역별 상세 정보 패널
- 카테고리별 상세 분석 페이지 (주거/생활/치안/교통)
- 데이터 저장 기능 (LocalStorage)
- 구 필터링 기능
- 지도: 서울시 법정동 위치 표시, 선택/순위에 따른 마커 색상 구분
- 차트: 바 차트, 파이 차트, Treemap을 통한 랭킹 및 비중 분석
- 테이블: 랭킹 테이블, 원본 데이터 테이블
- 슬라이더: 카테고리별 색상으로 가중치 조절
- 범위: 서울시 법정동 단위 (약 400~500개 지역)
- 주요 항목: 주거점수, 생활점수, 치안점수, 교통점수, 전월세평균, 건축년도, 공원수, 병의원수, 점포수, 범죄 통계, CCTV, 가로등수, 지하철 접근성 등
- 파이썬 : 정보처리, 알고리즘
- Frontend: React 18, React Router DOM, Vite
- 시각화: Leaflet.js (지도), Recharts (차트)
- 데이터 분석: Python
- 스타일링: CSS3, CSS Grid/Flexbox, Google Fonts