Helios: CCTV 영상 데이터를 이용한 실시간 도로 노후화 탐지 시스템
퍼블리싱을 진행 하면서 수많은 UI가 개편 되었으며 전체적인 페이지, 구현한 기능, 반응형 UI/UX 개선을 진행하였다.
1. 제작 페이지
메인 페이지
- 프로젝트 소개와 핵심 기능들을 보여주는 페이지
- 반응형 UI 적용
- 모바일 환경에선 이미지 대신 텍스트 위주의 구성
CCTV 현황 페이지
- CCTV에 대한 정보를 불러올 수 있는 API를 설계하였으며 해당 API를 통해 좌표와 CCTV 영상을 HLS 형태로 제공받음
- CCTV 마커를 클릭 시 패널이 열려 위치, 이름, 스트리밍 화면을 확인할 수 있음
탐지 결과 페이지
- 과거 탐지된 도로 파손 데이터를 리스트 형태와 카드 형태로 제공
- 필터 기능을 통해 날짜, 지역, 심각도에 따라 검색 가능
- 많은 정보를 제공하므로 한눈에 들어오는 간결한 디자인으로 구성
신고 페이지
- 사용자가 도로 파손을 신고할 수 있는 페이지
- 사용자에게 도로 이용중 불편했던 경험을 신고할 수 있는 신고 폼을 제공
- 신고된 결과를 확인할 수 있도록 구현할 예정
2. 기능적 요소
-
조건별 필터 기능
-
사용자 경험을 고려한 직관적인 UI와 사용자 뷰포트에 맞는 반응형 UI
-
제공받는 API를 활용하여 데이터를 가공해 사용자에게 제공하는 API 설계
엔드 포인트:
GET /cctv/minX좌표&maxX좌표&minY좌표&maxY좌표
해당 방식으로 사용자 뷰포트에 해당하는 CCTV를 조회하며 조회된 CCTV에 대한 정보를 제공함. -
도로 파손 탐지 모델 제작
추후에 모델 개발에 대한 내용을 다룰 예정
-
ETC
3. 추가사항
- 지속적인 모델 개선
- 모델 탐지 결과 DB 구축
- 탐지 결과 리포트 제공
- 관리자 페이지 구성
- ETC
.