[ 공모전 수상작 ] 지역의 사건 사고 등을 실시간으로 피드백하고 공유하는 서비스

이 소프트웨어는 개인적인 목적으로, 공부 용도로 개발되었습니다. 따라서 내부망에서 개발되었을 뿐, 외부 서비스, 제공 목적으로 서비스하지 않습니다. 따라서 라이선스 등 내부적인 사항들은 조사되지 않았습니다. 이 게시물은 단순히 Whitmem의 개발 기록을 남긴 게시물이며 업으로서 제공하지 않습니다.

요약

메인 페이지

최근 각종 특정 장소에 대한 위협 사례가 증가함에 따라 이에 대한 대책과 정보 공유의 필요성이 대두되고 있습니다. 특정 장소에서 발생한 어떤 재해, 사고 등에 대해 신속하게 지역 주민과 공유하고 대응할 수 있으며 서로 토론할 수 있습니다. 결과적으로 각종 위협에 대해 신속하게 대응 정보를 제공하는 새로운 플랫폼입니다. 해당 프로젝트는 4인의 팀으로 구성하여 수행하였습니다.

배경 지도 영역은 API Key의 만료로 인해 표시하지 않았습니다.

개발 언어

주요 언어 : HTMLCSSJS Python

개발 환경 : Ubuntu Server 22

의존성 : Flask 라이브러리 Mariadb 라이브러리 등...

개발 기간 : 약 10일

Flask 서버를 활용해 웹 서버의 기본적인 데이터 송수신을 수행합니다. 새로운 게시글, 요청 응답, 정보 전송 등은 페이지 새로 고침 없이 내부적으로 XMLHTTPREUQEST를 통해 동적으로 요청합니다. 사용자 간의 실시간 채팅, 응답 등은 WebSocket을 사용합니다.

개발 배경

각종 다양한 위협 사고가 증가함에 따라서 지역 주민들의 빠른 피드백, 대처가 필요로 한 상황입니다. 지역 주민이 주변에서 발생한 사건 사고를 좌표와 함께 실시간으로 공유하고 지역 주민은 해당 정보를 기반으로 빠른 대응이 가능한 서비스를 제안하고자 하였습니다.

기능 스냅샷

메인 화면

메인 페이지

메인화면에서는 사용자가 지도를 보고 특정 지도 위에 위협 정보를 공유할 수 있습니다. 뒤의 하늘색 영역이 지도 영역이며 현재는 API 키의 만료로 인해 표시하지 않았습니다.

새 이벤트의 공유

사용자는 새 이벤트 제보버튼을 통해 현재 지도 좌표를 기준으로 발생한 이벤트를 제보할 수 있으며, 새로운 쓰레드를 시작합니다. 사용자는 이미지와 같은 멀티미디어 자료를 같이 게시할 수 있도록 구현하였습니다.

중간 생략...

이외 사용자는 이미 게시된 이벤트 내용을 바탕으로 해당 이벤트의 진행 상황이 어떻게 되는지를 코멘트 형태로 제기할 수 있으며, 코멘트를 제기한 위치를 서버에 기억, 진행 상황을 지도에 흐름에 따라 곡선으로 표시 합니다. 이 부분은 현재 서버 호스팅을 만료한 상황으로 구동할 수 없기에 설명으로 대체합니다.

그러한 구분은 인재인지 위협인지 이벤트인지에 대한 여부를 분류할 수 있으며, 새로운 이벤트가 제보되면 해당 지역 주변의 온라인인 사용자에게 실시간 알림이 전송됩니다. 이러한 계산은 Haversine 공식으로 계산되어 전송됩니다. 한편, WebSocket을 활용하여 온라인인 사용자에게 실시간 전송을 수행합니다.

실시간 채팅

채팅

사용자는 익명인 상태로 IP 주소를 기반으로 채팅할 수 있으며 위치 정보를 제공한 경우 해당 위치로부터 반경 1km 내인 사용자들끼리 실시간 상황을 채팅할 수 있습니다.

공공 시설 자료의 필터링

공공 시설

사용자는 데이터베이스에 저장된 공공 데이터인 방공호대피소경찰서소방서의료기관을 필터링해서 지도에 함께 띄울 수 있습니다. 해당 자료를 바탕으로 제보하고 토론하는데 부가 정보를 제시할 수 있습니다.

구현 과정

파일 구조

image_board.py page_board.py page_comment.py page_login.py page_main.py page_public_data.py page_reaction.py page_weather.py start.py 고지 사항.txt 디비구조.sql 라이브러리 라이선스 정보.txt 사용 한 맵 정보.txt lib\Databases\Database.py lib\Databases\__init__.py lib\IntegratedWebSocket\IntegratedWebClient.py lib\IntegratedWebSocket\IntegratedWebSocket.py lib\IntegratedWebSocket\__init__.py lib\Loggers\Logger.py lib\Loggers\__init__.py socket_py\ConnectionFunction1.py socket_py\SocketMain.py static\css\layout\question_box.css static\css\layout\sound_messagebox.css static\css\map\animated_components.css static\css\map\board.css static\css\map\board_account.css static\css\map\board_chat.css static\css\map\check_box.css static\css\map\fix_button.css static\css\map\global.css static\css\map\lib_global.css static\css\map\map.css static\css\map\map_interface.css static\css\map\navigator.css static\css\map\tags.css static\images\이 위치에 외부 오픈소스 라이브러리를 포함해야 합니다..txt static\js\variable.js static\js\board\bottom_board_popup.js static\js\board\pop_commands.js static\js\form\account_form_request.js static\js\form\board_form_request.js static\js\form\check_box_request.js static\js\form\notification_request.js static\js\map\board_window.js static\js\map\map_first_init.js static\js\map\map_pin_manager.js static\js\map\public_data_manager.js static\js\map\refresh_board_pin.js static\js\map\request_location.js static\js\map\single_map_pin_manager.js static\js\question_box\question_box.js static\js\socket\chat_request.js static\js\socket\connect.js static\js\socket\new_event.js static\js\socket\request_update.js static\js\socket\threat_live_event.js static\js\sound_messagebox\sound_messagebox.js static\js\tools\tools.js static\js\web_request\account_requests.js static\js\web_request\board_request.js static\js\web_request\event_pin_request.js static\js\web_request\public_data_request.js static\js\web_request\reaction_requests.js static\js\web_request\weather_request.js static\js\web_request\web_request.js static\lib\js\IntegratedClient.js static\lib\toastr\이 위치에 외부 오픈소스 라이브러리를 포함해야 합니다..txt static\sounds\이 위치에 외부 파일을 포함해야 합니 다.txt static_py\StaticMemory.py static_py\__init__.py templates\map.html All files : 72

자세한 코드 설명은 생략합니다. 2023년 11월에 업데이트 예정입니다.

고찰 사항

급하게 개발하다보니 클래스 다이어그램과 거리가 조금 멀어진 감이 있습니다. 유지보수가 용이한지에 대해서는 명확하지 않습니다.