🚨 서울시 안전 앱 (Seoul Safety App)

서울시 전역의 안전비상벨, 커뮤니티, 핫존 정보를 통합하여 제공하는 종합 안전 플랫폼입니다.

🎯 프로젝트 개요

이 프로젝트는 3명의 개발자가 협업하여 구현한 서울시 안전 앱입니다:

1. 안전비상벨 지도 - 서울시 22,502개 안전비상벨 위치 표시
2. 커뮤니티 기능 - 지역별 안전 정보 공유 및 소통
3. 핫존 분석 - 범죄 예상 구역 및 위험 지역 정보

📊 데이터 현황

• 총 비상벨 수: 22,502개
• 구별 분포: 강남구(1,713개), 중랑구(1,456개), 용산구(1,421개) 등
• 설치목적: 방범용(20,054개), 약자보호(1,116개), 기타(1,332개)
• 설치장소: 가로변(17,524개), 공원(2,630개), 기타(1,864개) 등

✨ 주요 기능

🗺️ 지도 기능

• 실시간 위치 기반 서비스: 사용자 현재 위치에서 가장 가까운 비상벨 자동 검색
• 전체 비상벨 표시: 서울시 전역의 모든 비상벨을 지도에 마커로 표시
• 카테고리별 필터링: 방범용, 약자보호, 기타 목적별 필터링
• 주소 검색: 원하는 주소를 검색하여 해당 지역의 비상벨 확인

🚨 안전 기능

• 가장 가까운 비상벨 찾기: 클릭한 위치에서 가장 가까운 비상벨 자동 검색
• 상세 정보 제공: 각 비상벨의 설치목적, 관리기관, 연락처 등 상세 정보
• 거리 계산: 현재 위치에서 각 비상벨까지의 정확한 거리 계산
• 비상 상황 안내: 비상벨 사용법 및 안전 정보 제공

📱 사용자 경험

• 반응형 디자인: 모바일, 태블릿, 데스크톱 모든 기기에서 최적화
• 직관적인 UI: 사용하기 쉬운 인터페이스와 시각적 피드백
• 실시간 통계: 현재 표시된 비상벨 수와 거리 정보 실시간 업데이트

🛠️ 기술 스택

Frontend

• HTML5, CSS3, JavaScript (ES6+)
• 카카오맵 JavaScript API - 지도 및 장소 검색
• 반응형 디자인 - 모바일, 태블릿, 데스크톱 최적화

Backend

• Flask - Python 웹 프레임워크
• SQLite - 경량 데이터베이스
• RESTful API - JSON 기반 통신
• CORS - 프론트엔드와 백엔드 연동

데이터

• 서울시 공공데이터 - 안전비상벨 정보 (22,502개)
• 실시간 위치 기반 서비스 - GPS 활용
• 핫존 데이터 - 범죄 예상 구역 분석

🚀 설치 및 실행

1. 프로젝트 클론

git clone [repository-url]
cd cctv2

2. 의존성 설치

# Python 라이브러리 설치 (데이터 변환용)
pip install pandas openpyxl

3. 데이터 변환

python convert_data.py

4. 백엔드 서버 실행

cd backend
python main.py

5. 프론트엔드 서버 실행 (새 터미널)

# Python 내장 서버 사용
python -m http.server 8000

# 또는 Node.js 서버 사용
npx serve .

6. 브라우저에서 접속

• 프론트엔드: http://localhost:8000
• 백엔드 API: http://localhost:5001
• API 상태 확인: http://localhost:5001/api/health

📁 파일 구조

cctv2/
├── frontend/               # 프론트엔드 파일
│   ├── index.html         # 메인 HTML 파일
│   └── app.js             # JavaScript 애플리케이션
├── backend/                # 백엔드 서버
│   ├── main.py            # Flask 메인 서버
│   ├── emergency_bells/   # 안전벨 API 모듈
│   ├── community/         # 커뮤니티 API 모듈
│   └── hotzone/           # 핫존 API 모듈
├── database/               # 데이터베이스 파일
├── emergency_bells.json   # 변환된 비상벨 데이터
├── 안전비상벨정보.xlsx    # 원본 Excel 데이터
├── convert_data.py        # 데이터 변환 스크립트
├── requirements.txt        # Python 의존성
└── README.md              # 프로젝트 문서

🎯 사용법

기본 사용법

1. 위치 권한 허용: 브라우저에서 위치 정보 접근을 허용하세요
2. 자동 위치 검색: 페이지 로드 시 현재 위치에서 가장 가까운 비상벨을 자동으로 찾습니다
3. 지도 탐색: 지도를 클릭하여 원하는 위치의 비상벨을 확인하세요

고급 기능

1. 주소 검색: 검색창에 주소를 입력하고 Enter를 누르세요
2. 필터링: 방범용, 약자보호, 기타 버튼으로 비상벨 유형을 필터링하세요
3. 상세 정보: 비상벨 마커를 클릭하여 상세 정보를 확인하세요

키보드 단축키

• Ctrl + F: 검색창 포커스

🔧 API 키 설정

카카오맵 API

카카오맵 API 키가 이미 설정되어 있습니다:

• JavaScript API: d0ba84a83946f644629defc2356bd29c
• REST API: 9ad69b16627cd6c6ef0be64463ffbf18

백엔드 API 엔드포인트

• 안전벨: /api/emergency-bells
• 커뮤니티: /api/community
• 핫존: /api/hotzone
• 상태 확인: /api/health

📊 데이터 분석

구별 비상벨 분포 (상위 10개)

1. 강남구: 1,713개
2. 중랑구: 1,456개
3. 용산구: 1,421개
4. 구로구: 1,372개
5. 관악구: 1,280개
6. 영등포구: 1,185개
7. 강서구: 1,156개
8. 마포구: 1,099개
9. 도봉구: 1,071개
10. 광진구: 1,055개

설치목적별 분포

• 방범용: 20,054개 (89.1%)
• 기타: 1,332개 (5.9%)
• 약자보호: 1,116개 (5.0%)

설치장소별 분포

• 가로변: 17,524개 (77.9%)
• 공원: 2,630개 (11.7%)
• 기타: 1,864개 (8.3%)
• 화장실: 318개 (1.4%)
• 건물: 83개 (0.4%)
• 주차장: 83개 (0.4%)

🚨 비상 상황 시 사용법

1. 가장 가까운 비상벨 찾기: 지도를 클릭하거나 현재 위치를 확인하세요
2. 비상벨 사용: 빨간색 비상벨을 누르면 경찰서와 자동 연결됩니다
3. 야간 안전: 가로등이 있는 곳의 비상벨을 우선적으로 이용하세요
4. 위치 공유: 비상벨 위치를 주변 사람들과 공유하세요

🤝 기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

📞 문의

프로젝트에 대한 문의사항이 있으시면 이슈를 등록해 주세요.

---

⚠️ 주의사항: 이 애플리케이션은 참고용으로 제작되었습니다. 실제 비상 상황에서는 112에 즉시 연락하시기 바랍니다.