[토이프로젝트] 간단한 클립 영상 화재 탐지 웹 서비스 만들어보기

 

 

 

올해 3월부터 5월까지 듣는 ICT 이노베이션 스퀘어 인공지능 비전컴퓨팅 과정에서 마지막 2주간 개인 프로젝트를 진행하는 시간이 있다

 

어떤걸 해보면 좋을까 고민하다가 이전 업무에서 맡았던 화재 탐지를 웹에 올려보고 웹의 전체적인 흐름을 한번 경험해보면 좋겠다 싶어서 웹에 짧은 화재 클립 영상을 업로드하면 탐지하여 결과를 알려주는 간단한 AI를 올린 웹사이트를 만들어보기로 하였다

웹, 프론트와 백엔드 부분은 전혀 다뤄본 적이 없었기에 모든 내용들이 새로웠다

 

먼저 전체적인 계획을 먼저 세워보고 실제로 계획대로 진행되었는지, 진행하면서 어느 부분이 막혔고 어떤 이슈들이 발생했는지, 계획을 조정하여 어디까지 구현하기로 했는지 등 계획과 실제 진행 내용을 비교한 내용을 정리해보았다

수업 내용 및 자료들을 베이스로 하여 기준 삼고 원하는 방향성에 맞게 커스텀하는 식으로 진행하였다

 

지금 적은 계획들은 거창했으나..(내 기준) 막상 해보니 모르는 부분들이 정말 많았다

 

 

 

---

 

 

📌 프로젝트명

FireClip AI: 클립 영상 기반 화재 탐지 웹서비스

 

 

🎯 1. 프로젝트 개요

항목	내용
목표	사용자가 업로드한 실내 CCTV 클립 영상에서 연기 또는 불꽃을 자동 탐지하고, 탐지된 결과(바운딩박스)를 그린 영상으로 웹페이지에 표시하는 경량 웹서비스 구현
기술 스택	GCP, Flask, MongoDB, YOLO, OpenCV

 

 

 

---

🧱 2. 데이터 구축 및 모델 학습 

 

항목	내용
사용 데이터 형식	CCTV 형식의 클립 영상 및 이미지
라벨 항목 수	연기/불꽃 2개 클래스 포함
구축 전략 (수집 경로)	✅ 공개 화재/연기 이미지 데이터셋 활용 (AIhub, kaggle, Roboflow) ✅ 필요시 크롤링 또는 YouTube 클립으로 보완 ✅ 데이터 전처리 및 YOLO 포맷으로 라벨링
수집량	최소 1000장 이미지 (라벨 포함)
이미지 해상도	640×480 ~ 1920×1280 (1280x1080 이상 권장)
데이터당 평균 용량	약 500 ~ 1,000KB
라벨링 도구	Roboflow
모델 사용 전략	📌 상황에 따라 선택 ① 사전 학습된 YOLOv8 불꽃/연기 모델 그대로 사용 ② 경량 커스텀 데이터로 파인튜닝

 

 

🧱 2-1. 라벨링 기준 및 품질 관리

항목	기준
바운딩 박스	최소 포함 영역, 클래스명 포함
분류 라벨	고유 클래스 ID + 설명
검수	샘플 검수 20%

• 저장 및 관리
  • 형식: YOLO TXT
  • 저장소: Google Drive
  • 관리툴: Roboflow
• 데이터 증강 계획
  • Noise, saturation, hue, hori flip, brightness

 

💻 일반화 성능 검토

• 학습데이터에 포함되지 않은 탐지 대상 데이터 20장 이상에 대한 탐지능력 평가
• mAP 성능을 산출하여 0.7 이상이 되도록 학습 데이터 조정

 

 

 

 

🧱 2-2. 데이터 구축 진행

사용 데이터	Roboflow,  AI허브,  Kaggle
라벨링 툴	Roboflow

 

실제 CCTV와 유사한 720p (1280 x 720) / 1080p(1920 x 1080 ) 크기를 가진 실내의 이미지를 구하기는 쉽지 않음

• 특히 CCTV 화재 이미지는 더더욱 구하기 어렵다 (보안 관련 이슈 등 공유 되지 않는 경우가 대다수)
• Roboflow Kaggle 에서 구한 이미지들은 화질이 낮은 카메라로 찍힌 영상들을 640x640 크기로 리사이즈했기 때문에 대부분 이미지의 퀄리티가 많이 떨어짐
• AIHub의 경우 1920x1080 크기의 고화질 이미지이지만 야외 촬영 이미지

 

1차 데이터셋 

원본 730장 라벨링 및 이미지 증강 적용 후 총 1810장

 

클래스별 객체 개수

• fire : 894 개
• smoke : 250 개

Preprocessing

• Auto-Orient: Applied
• Resize: Stretch to 640x640

Augmentations

• Outputs per training example: 3
• 90° Rotate: Clockwise, Counter-Clockwise, Upside Down
• Saturation: Between -25% and +25%
• Brightness: Between -15% and +15%
• Blur: Up to 2.5px
• Noise: Up to 0.1% of pixels

데이터셋 구성

• Train Set : 90%, 1620 장
• Valid Set : 8%, 146장
• Test Set : 2%, 44장

 

---

 

 

 

2차 데이터셋 

280장 추가 라벨링 및 이미지 증강 적용 후 총 2524장

 

클래스별 객체 개수

• fire : 1,134 개
• smoke : 518 개

Preprocessing

• Auto-Orient: Applied
• Resize: Stretch to 640x640

Augmentations

• Outputs per training example: 3
• 90° Rotate: Clockwise, Counter-Clockwise, Upside Down
• Saturation: Between -25% and +25%
• Brightness: Between -15% and +15%
• Blur: Up to 2.5px
• Noise: Up to 0.1% of pixels
• Shear: ±10° Horizontal, ±10° Vertical

데이터셋 구성

• Train Set : 91%, 2286 장
• Valid Set : 7%, 187장
• Test Set : 2%, 51장

 

 

데이터 출처

• [Roboflow] Indoor Fire Detection Dataset
• [AI-Hub] 화재 발생 예측 영상 샘플 데이터
• [Kaggle] Fire Detection from CCTV
• [Roboflow] Fire-indoor Object Detection Dataset

 

 

 

---

 

 

🧱 2-3. 모델 학습 결과

 

학습 스크립트 및 모델 튜닝

환경 : Colab 

 

 

일반 학습 스크립트

from ultralytics import YOLO

# 모델 초기화 (가볍게 시작: yolov8n.pt)
model = YOLO('yolov8n.pt')  # 또는 yolov8s.pt, yolov8m.pt 등

# 학습 시작
model.train(
    data='/content/data/data.yaml',
    epochs=50,
    imgsz=640,
    batch=16,
    project='yolov8_fire_detection',
    name='exp',
    exist_ok=True
)

 

• 1,2차 기본값으로 학습
• 더 다양한 파라미터 값으로 자동으로 최적의 조합 찾도록 wandb의 sweep 기능 사용 

 

 

 

 

Wandb Sweep로 모델 자동 튜닝

!pip install -U ultralytics
!wandb login <api key>
!yolo settings wandb=True

import wandb
from wandb.integration.ultralytics import add_wandb_callback
from ultralytics import YOLO

# 프로젝트명 지정 (자동 생성도 가능)
wandb.init(project="fire_clip_project", job_type='training')

• wandb 연결 및 sweep 설정

 

sweep_config = {
    'method': 'random',
    'metric': {'goal': 'maximize', 'name': 'metrics/mAP50-95(B)'},
    'parameters': {
        'batch_size': {'values': [16, 32, 64]},
        'learning_rate': {
            'distribution': 'uniform',
            'min':0.0001,
            'max':0.001
            }
    }
}


sweep_config = {
    'method': 'bayes',
    'metric': {'goal': 'maximize', 'name': 'metrics/mAP50-95(B)'},
    'parameters': {
        'batch_size': {'values': [16, 32]},
        'learning_rate': {'distribution': 'uniform', 'min': 0.0001, 'max': 0.001},
        'optimizer': {'values': ['SGD', 'Adam', 'AdamW']},
        'label_smoothing': {'distribution': 'uniform', 'min': 0.0, 'max': 0.1}
    }
}

• 튜닝할 하이퍼파라미터 지정
• mAP50-95가 최대화되는 것을 기준으로 삼음
• 배치 사이즈와 학습률을 여러 조합별로 학습 진행
• 이 외에도 더 많은 파라미터들 추가 가능
• sweep config 설정 후 학습 돌리면 조합들을 자동으로 학습 및 wandb에 성능 로깅

 

 

sweep_id = wandb.sweep(sweep=sweep_config, project='fire_clip_project')

def yolo_train():
    with wandb.init() as run:
        config = wandb.config

        # 모델 정의 및 하이퍼파라미터 사용
        model = YOLO('yolov8n.pt')
        add_wandb_callback(model, enable_model_checkpointing=True)
        results = model.train(
            data='/content/data/data.yaml',
            name='exp3',
            plots=True,
            batch=config.batch_size,
            epochs=50,
            imgsz=640,
            cos_lr=True,
            lrf=0.01,
            lr0=config.learning_rate,
            project='yolov8_fire_detection'
        )

        metrics = results.metrics

        wandb.log({
            'epoch': 50,  # 또는 run.step 등 사용 가능
            'val_loss': results.loss,  # 또는 다른 적절한 loss 사용
            'metrics/mAP50': metrics.get('metrics/mAP50(B)', None),
            'metrics/mAP50-95': metrics.get('metrics/mAP50-95(B)', None)
        })

 

 

 

 

 

 

 

---

 

 

 

🛠️ 3. 구현 범위 및 기능 정의

분류	기능	설명
🎥 영상 입력	10~30초 영상 클립 업로드 (mp4)	웹 UI에서 사용자가 직접 업로드
🧠 화재 탐지	YOLOv8 기반 연기/불꽃 탐지	Flask API 내부에서 프레임 추출 후 탐지 수행
🖼️ 결과 표시	탐지된 프레임 썸네일 + 시간정보 표시	MongoDB에 결과 저장
📁 결과 저장	탐지 결과 영상과 메타데이터 저장	탐지 영상 파일 : GCP VM Server 메타 데이터 : MongoDB

 

🛠️ 3-1. 사용 기술 스택

파트	기술
웹 서버	Flask (GCP Cloud Run 배포)
DB	MongoDB
클라이언트	HTML (+CSS)
영상 처리	OpenCV, FFmpeg
탐지 모델	YOLOv8s/n

 

🛠️ 3-2. 전체 구조

 

FireClip AI 프로젝트 최종 기획서를 기준으로, 웹서비스의 전체 흐름을 고려한 백엔드 및 웹 구조(시스템 아키텍처)

GCP + Flask + MongoDB + YOLO 기반으로 작동

 

 

 

 

사용자(브라우저)
      │
      ▼
[Frontend] (HTML+CSS)
  - 영상 업로드
  - 탐지 결과 확인
      │
      ▼
[Flask Backend API Server] (GCP Cloud Run)
  - 요청 처리 (REST API)
  - YOLOv8 추론 연동
  - Cloud Storage & MongoDB 연동
      │
      ├────────────────┬────────────────┐
      ▼                ▼                ▼
[YOLOv8 Inference]   [GCS]           [MongoDB]
(로컬 or Cloud)    (영상 저장)    (메타데이터 저장)

 

 

➡️ 원래는 업로드한 영상, 탐지 결과 영상을 구글 클라우드 버켓에 저장하려 했으나 이 부분까지는 구현하지 못했다

 

 

---

 

 

🔙 백엔드 구조 (Flask)

 

🔹 주요 처리 흐름

1. 사용자가 영상 업로드 
2. Flask 서버에서 영상 임시 저장
3. 저장된 영상 경로 기반으로 OpenCV를 통해 프레임 단위로 YOLO 추론 실행
4. 추론 결과(프레임 + 박스 좌표 + 클래스)를 영상으로 만들고 저장 및 웹 페이지에 원본과 같이 띄우기
5. MongoDB에 해당 영상/결과 메타데이터 기록 (파일 경로, 탐지결과 등)

 

 

---

 

🌐 프론트엔드 구조 (HTML + CSS)

 

🔹 웹페이지 화면

 

클립 영상을 업로드 하기 전에 이미지로 간단하게 진행해보았다

 

초기 화면. 이미지를 업로드해서 원본과 탐지 결과를 띄어주는 정말 간단한 형태이다

보면 결과가 BGR형식에 시간도 UTC 타임으로 되어있는 등 소소한 이슈들이 있었다

 

 

그 다음엔 간단한 클립 영상을 업로드 및 웹에서 스트리밍 되는지까지 진행, 아래처럼 나온다

 

 

 

 

 

 

🔹 이슈 사항

 

탐지 결과 영상이 웹에서 실행이 안되는 문제 발생

 

• 원본 영상 업로드 및 탐지 후 바운딩박스를 프레임에 그려서 영상으로 만드는 것도 정상적으로 동작
• 만들어진 탐지 결과 영상에 문제가 있나 다운받아 확인해보니 문제 없음
• 영상과 html, 웹 부분에 문제가 있는 것 같다고 유추

➡️ 만들어진 영상과 브라우저 간의 호환성 문제로 웹에서 영상 재생이 안됨

 

 

코드 중 OpenCV를 통해 mp4 파일을 생성하는 부분이 있다

fourcc = cv2.VideoWriter_fourcc(*'mp4v')

 

이렇게 OpenCV로 mp4, 영상 파일을 만들때 이렇게 생성된 mp4 파일은 브라우저에서 호환되지 않는 코덱일 수도 있다

mp4는 파일, 영상을 담은 컨테이너이며 같은 mp4라도 내부 인코딩 방법, 코덱은 서로 다를 수 있다

아래 블로그에서 비슷한 이슈 및 해결 방법을 잘 다루고 있다

 

https://omoknooni.tistory.com/134

[GAMST] VideoWriter와 fourCC, 코덱

 

 

➡️ ffmpeg를 통해 브라우저에서 호환하는 코덱으로 영상을 변환

• opencv로 mp4 영상 생성 -> ffmpeg로 코덱 변환 및 저장하는 일련의 과정은 변환하는 시간 때문에 실시간으로 영상 처리를 하기에는 적합하지 않다
• 이 웹페이지는 실시간 영상은 아니기에 ffmpeg를 이용했으나 더 고도화한다면 이 부분은 생략할 것이다

 

원본 및 탐지 결과 영상

 

 

 

☁️ MongoDB 구성

 

 

필드명	데이터 타입	설명
_id	ObjectId	MongoDB가 자동 생성하는 고유 ID
original_filename	String	업로드된 원본 영상의 파일명 (UUID 등으로 관리)
uploaded_at	String	영상 업로드 시간 (예: "2025-05-07 23:41:39"). KST 기준 시간으로 기록
video_length_sec	Float	영상의 총 길이 (초 단위, 예: 29.91)
fps	Float	초당 프레임 수 (Frames Per Second)
resolution	Object	영상 해상도 정보. width와 height를 포함
├─ width	Integer	영상 가로 해상도
└─ height	Integer	영상 세로 해상도
summary	Object	감지 결과 요약 정보
├─ fire_count	Integer	총 Fire 객체 감지 횟수
├─ smoke_count	Integer	총 Smoke 객체 감지 횟수
├─ fire_segments	Array[String]	Fire가 감지된 주요 구간. 지속 감지 또는 단발 감지 포함
├─ smoke_segments	Array[String]	Smoke가 감지된 주요 구간. 지속 감지 또는 단발 감지 포함
├─ avg_confidence	Float	전체 감지의 평균 신뢰도 (0 ~ 1)
└─ max_confidence	Float	감지된 객체 중 가장 높은 신뢰도
detection_details	Array[Object]	각 감지 객체의 상세 정보 목록
├─ label	String	감지된 객체 클래스 (예: "fire", "smoke")
├─ timestamp	String	감지된 시점 (예: "00:29" 형식의 타임코드)
├─ confidence	Float	해당 객체 감지의 신뢰도 (0~1)
└─ bbox	Array[Int]	바운딩 박스 좌표: [x1, y1, x2, y2] (왼쪽 위, 오른쪽 아래)
result_video_path	String	감지 결과가 적용된 영상 파일 경로
original_video_path	String	원본 업로드 영상의 경로
processed	Boolean	해당 영상이 탐지 후 저장되었는지 여부 (True = 처리 완료)

 

 

fireclip_db> db.video_detections.find()
[
  {
    _id: ObjectId('681b71234ca3e6db95f8500c'),
    original_filename: '9dd8a6ff3c05414687bc8724e539015d.mp4',
    uploaded_at: '2025-05-07 23:41:39',
    video_length_sec: 29.91,
    fps: 29.985945703568117,
    resolution: { width: 854, height: 480 },
    summary: {
      fire_count: 583,
      smoke_count: 72,
      fire_segments: [
        '00:06–00:13 (지속적으로 감지)',
        '00:19–00:25 (지속적으로 감지)',
        '00:27–00:29 (지속적으로 감지)',
        '단발성 감지: 00:15, 00:16'
      ],
      smoke_segments: [
        '00:00–00:04 (지속적으로 감지)',
        '단발성 감지: 00:10, 00:18, 00:19, 00:22, 00:28'
      ],
      avg_confidence: 0.5914,
      max_confidence: 0.9154
    },
    detection_details: [
      {
        label: 'smoke',
        timestamp: '00:00',
        confidence: 0.6521,
        bbox: [ 0, 75, 79, 470 ]
      },
      ...
      ...
      {
        label: 'fire',
        timestamp: '00:29',
        confidence: 0.8521,
        bbox: [ 314, 103, 563, 325 ]
      },
      {
        label: 'fire',
        timestamp: '00:29',
        confidence: 0.8308,
        bbox: [ 309, 86, 561, 330 ]
      },
      {
        label: 'fire',
        timestamp: '00:29',
        confidence: 0.8217,
        bbox: [ 309, 136, 561, 329 ]
      },
      {
        label: 'fire',
        timestamp: '00:29',
        confidence: 0.7908,
        bbox: [ 305, 155, 581, 328 ]
      }
    ],
    result_video_path: 'static/results/result_9dd8a6ff3c05414687bc8724e539015d.mp4',
    original_video_path: 'static/uploads/9dd8a6ff3c05414687bc8724e539015d.mp4',
    processed: true
  }
]

 

 

 

 

 

 

---

 

📑 4. 결과물

• 예상 산출물
  • Flask 기반 서버 코드
  • YOLOv8 탐지 스크립트 (커스텀 or 기존)
  • MongoDB 결과 스키마 및 샘플 데이터
  • 탐지 결과 이미지 및 메타데이터 샘플
  • 발표용 슬라이드 및 시연 영상

 

 

📑 4-1. 웹페이지 화면 및 결과

 

클립 영상 업로드 및 탐지 결과 출력

 

 

📑 4-2. 구현 여부 정리 및 마무리

구현 항목	실제 진행
웹 영상 입력 및 업로드	✅
Yolo 화재 탐지	✅
결과 표시 및 DB 저장	✅
구글 클라우드 버켓 연동	❌
탐지 결과 조회 기능 웹에 추가	❌
코드 리팩토링 및 고도화	❌

 

 

계획 상으로는 업로드한 영상에 대해 탐지 후 원본과 탐지 결과 영상을 구글 클라우드에 저장하고 메타 데이터는 MongoDB에 저장한다

웹에는 조회 리스트 기능을 추가하여 이런 탐지 결과를 조회할 수 있도록 한다

코드도 플라스크 동작 코드인 app.py에서 모델 추론, 이미지 전후처리, 메타 데이터 저장 등 여러 기능들을 하나의 py에 넣는 것이 아니라 여러 개의 라우트로 구성하여 기능별로 관리할 수 있도록 코드를 리팩토링한다

최종적으로는 카메라의 RTSP를 받아와 실시간 추론을 할 수 있게끔 만드는 것을 생각했었다

앱이나 캠 등으로 실시간 영상에 AI 추론을 추가하고 노티를 주는 등의 다양한 형태가 될 수 있을 것이다

 

이번에는 많은 부분들까지 다루고 구현해보진 못했으나 플라스크를 이용해 웹의 전반적인 흐름을 볼 수 있어서 정말 유익했다

다음에는 이 경험들을 바탕으로 더 많은 부분들을 빠르게 만들어봐야겠다