[FIRECLIP AI] 간단한 클립 영상 화재 탐지 웹 서비스 수행 계획서 (+실제 진행) - 작성 중

 

 

 

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

 

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

웹, 프론트와 백엔드 부분은 전혀 다뤄본 적이 없었기에 삽질을 많이 하고 있다

 

프로젝트를 진행하면 2가지 문서가 나와야 한다. 바로 수행 계획서 (기획안) 및 결과 보고서

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

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

이 계획서와 진행하면서 남긴 기록들을 바탕으로 결과 보고서 (PPT 형태의 발표자료 or docx 문서) 를 정리해서 2번째 글로 올릴 예정이다

 

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

 

 

 

---

 

 

📌 프로젝트명

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
            }
    }
}

• 튜닝할 하이퍼파라미터 지정
• 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)
        })

 

 

 

 

 

 

 

 

 

성능 비교

성능지표	recall(B)	precision(B)	mAP50(B)	mAP50-95(B)
1차
2차

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

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

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

 

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

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

 

🛠️ 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)

🔹 주요 구성 요소

기능	설명
/upload	영상/이미지 업로드 API
/detect	YOLO 추론 요청 API (업로드 후 내부 호출 or 사용자 요청)
/results/<id>	탐지 결과 메타데이터 조회
/list	업로드한 이력 리스트 조회 API

 

🔹 주요 처리 흐름

1. 사용자가 영상 업로드 (POST /upload)
2. Flask 서버에서 GCS에 영상 저장
3. 저장된 영상 경로를 기반으로 YOLO 추론 실행
4. 추론 결과(프레임 + 박스 좌표 + 클래스)를 이미지/썸네일로 저장
5. MongoDB에 해당 영상/결과 메타데이터 기록 (파일 경로, 탐지결과 등)
6. 프론트에서 /list, /results/<id>를 통해 결과 조회

 

 

---

 

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

 

🔹 페이지 구성

페이지	기능
/upload.html	영상 업로드 UI, 업로드 진행 상태
/results.html	탐지 결과 썸네일 리스트
/details.html?id=...	선택된 결과 상세 보기 (탐지된 이미지, 결과 텍스트 등)

 

🔹 연동 API

• POST /upload: 영상 업로드
• GET /list: 결과 목록 불러오기
• GET /results/<id>: 결과 상세 조회

 

---

 

☁️ 클라우드 구성 (GCP 기반)

구성 요소	역할
Cloud Run	Flask 백엔드 배포용 컨테이너 실행
Cloud Storage	원본 영상 및 썸네일 이미지 저장
MongoDB Atlas	메타데이터 저장 (영상 ID, 시간, 탐지 클래스 등)
YOLOv8	모델 추론은 Cloud Run 내부 or 분리된 인스턴스에서 실행 가능 (리소스 고려)

 

 

---

 

✅ 추천 디렉터리 구조 (Flask 기준)

fireclip-backend/
├── app.py
├── routes/
│   ├── upload.py
│   ├── detect.py
│   └── results.py
├── services/
│   ├── storage.py       # GCS 저장 관련
│   ├── inference.py     # YOLO 추론 호출
│   └── database.py      # MongoDB 처리
├── static/              # 썸네일 등 정적 파일
├── templates/           # 프론트 HTML
├── requirements.txt
└── Dockerfile

 

 

---

 

🧩 기능 구현 순서 제안

1. 기본 Flask 라우터 및 API 구조 세팅
2. 영상 업로드 처리 + GCS 저장 연동
3. YOLO 추론 스크립트 테스트 및 Flask 연동
4. 결과 썸네일 생성 및 MongoDB 메타데이터 저장
5. /list, /results/<id> API 구현
6. 프론트 UI 연결

 

---

 

🗓️ 4. 개발 일정

2025.04.25 ~ 2025.05.09

일정	해야 할 일 (To-Do)	설명
4/25 (금)	✅ 프로젝트 기획 확정 및 기술스택 정리	주제, 문제 정의, 솔루션 흐름 정리 및 사용 스택 확정
4/26 (토)	📂 데이터 수집 및 크롤링 코드 정리	연기/불꽃 공개 데이터 수집 및 YOLO용 데이터 구조 정리
4/28~29 (월화)	🧪 YOLO 학습용 데이터 포맷팅 및 모델 학습 precision/recall 등 지표 확인하고 모델 튜닝	🎯 모델 성능 개선 및 결과 확인 YOLOv8용 학습 데이터 라벨링 및 모델 학습
4/30~ 5/1 (수목)	🧱 Flask 서버 기본 구조 설계	기본 라우팅, 요청 구조, API 스펙 설계 등
5/2 (금)	📤 영상 업로드 → 탐지 연동 구현	업로드된 영상을 프레임 분할하고 YOLO로 탐지 수행
5/3 (토)	🖼️ 결과 이미지 클라이언트 렌더링 구현	탐지된 이미지(프레임) 웹에서 확인할 수 있도록 구현
5/4 (일)	💾 MongoDB 연동 및 탐지 결과 저장	업로드 정보 및 탐지 결과 DB에 저장하는 기능 개발
5/5 (월)	☁️ GCP Cloud Storage 연동 및 영상 저장	영상 파일을 Cloud Storage에 저장하고 경로를 DB와 연결
5/6 (화)	🧪 전체 연동 테스트 및 오류 수정	end-to-end 테스트 및 오류, 예외 처리 진행
5/7 (수)	🧼 UX 개선 및 보완 작업	사용자 입장에서 업로드/결과 확인 흐름 정비
5/8 (목)	📝 발표자료 초안 작성 및 아키텍처 다이어그램 제작	시스템 구조 시각화, 기술 요약 포함
5/9 (금)	✅ 최종 발표 및 프로젝트 마무리	발표용 시나리오 정리 및 최종 정돈

 

 

 

---

 

📁 5. 산출물 목록

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