화재감지기와 관제 대시보드

하드웨어 · 펌웨어 · 앱 · 관리자 웹 · 클라우드2021.04 ~ 2021.07

연기와 불꽃을 감지하는 기기를 만들고, 어디서 났는지 지도에 띄우는 관리자 대시보드와 알림 앱을 붙였습니다.


과제 배경

기존 화재경보기는 사이렌만 울립니다. 그 자리에 사람이 없으면 아무도 모릅니다. 감지기와 서버가 따로 돌아 전체 상태를 한 번에 볼 수도 없었고, 와이파이가 끊기면 복구하지 못한 채 오래 남아 있었습니다.

주요 설계 결정

통신 두절

연결이 끊기면 스스로 다시 붙는 것을 펌웨어에 넣었습니다

무응답 상태로 남은 감지기는 없는 것보다 나쁩니다. 있는 줄 알고 아무도 확인하지 않습니다.

접근 제어

기기 등록에 토큰 인증을 걸고 화면 접근은 OAuth2 로 나눴습니다

인증 없이 기기 설정이 열려 있으면 감지 임계값을 남이 바꿀 수 있습니다.

알림 경로

푸시와 문자 두 갈래로 보냅니다

앱을 지웠거나 알림을 꺼 둔 사람이 있습니다. 화재는 한 경로가 막히면 안 되는 알림입니다.

제공 기능

제공 기능
기능내용
실시간 감지와 알림연기나 불꽃을 감지하면 서버로 올리고 앱과 관리자 화면에 띄웁니다.
지도 기반 대시보드감지기 상태를 지도에 표시하고 이상이 있으면 그 자리에 경고를 겁니다.
이력 조회장소별, 날짜별 감지 이력과 로그를 앱에서 봅니다.
자동 재연결와이파이가 끊기면 다시 붙을 때까지 시도합니다.

수행 결과

  • 감지되면 그 자리 사이렌만이 아니라 관계자 휴대폰까지 갑니다.
  • 와이파이가 끊겼다 붙어도 데이터를 잃지 않습니다.
  • 전체 감지기 상태를 지도 한 장에서 봅니다.
  • 한국어와 영어와 중국어 화면을 함께 냅니다.

화면 구성

화면의 구조와 기능을 보여주는 시안이며, 색과 서체를 포함한 디자인은 다음 단계에서 정합니다.

관제이력기기계정

정상 42 / 경고 1

지도 위 감지기 위치
장소상태마지막 응답

관제 화면

어디서 무슨 일이 났는지 지도에서 봅니다

감지 이력

시각장소종류알림

감지 이력

언제 어디서 감지되었는지 되짚습니다

시스템 구성도

사용자와 기기서버저장소와 외부MQTT푸시문자HTTPS화재감지기ESP32 + 연기/불꽃감지하면 바로 올립니다알림 앱Flutter푸시로 받고 이력을 봅니다관제 대시보드Vue.js지도에 상태를 띄웁니다IoT 브로커AWS IoT Core감지기와 붙는 자리API 서버EC2알림과 이력을 다룹니다문자 발송앱이 막힌 사람에게감지 이력RDS장소와 시각을 남깁니다

점선은 외부 서비스를 사용하는 항목입니다.

설계 원칙

설계 원칙과 적용 방법
원칙적용 방법
무응답 감지기가 조용히 남지 않는다끊기면 스스로 다시 붙고, 못 붙으면 화면에 표시됩니다
한 경로가 막혀도 알림은 닿는다푸시와 문자 두 갈래로 보냅니다
인증 없이 기기 설정이 열리지 않는다기기 등록에 토큰, 화면 접근에 OAuth2 를 겁니다

적용 기술

ESP32ESP-IDFFlutterDartVue.jsAWSAWS IoT CoreEC2RDSMQTT

관련 프로젝트