YOLO 기반 자동 모자이크&blur 학습 사이트 제작 과정

"> AI 자동 블러 학습 사이트 제작 과정 | 양파고 "> AI 자동 블러 학습 사이트 제작 과정 | 양파고 ">

<head>
  <meta charset="UTF-8" />
  <title>AI 자동 블러 학습 사이트 제작 과정 | 양파고</title>
  <meta name="description" content="GPT-6 Astra를 활용해 YOLO 기반 자동 모자이크·블러 학습 사이트를 설계하고, 기능을 검증하며, GitHub와 Vercel로 배포한 제작 과정입니다." />
  <meta name="keywords" content="GPT-6 Astra, YOLO, 객체 탐지, 자동 블러, 모자이크, AI 교육, GitHub, Vercel, 양파고, Yang Phago, 노션, 양파고 노션, notion" />
  <meta property="og:title" content="AI 자동 블러 학습 사이트 제작 과정" />
  <meta property="og:description" content="설계, 디버깅·업그레이드, GitHub·Vercel 배포까지의 실제 제작 기록" />
  <meta property="og:image" content="" />
  <!-- 이 노션 페이지를 공개한 뒤 실제 주소와 대표 이미지 주소를 입력하기 -->
  <meta property="og:url" content="" />
  <meta property="og:type" content="article" />
</head>

목차(클릭하세요)

<aside> 💡

모든 작업은 GPT6-아스트라와 함께 1시간 컷
프로젝트: AI_Auto_Blur 실습 Lab
소스 저장소: roughkyo/Ai_Auto_blur </aside>

Ⅰ. 초기 설계명세서

1-1. 학습 목표와 화면 흐름 설계

처음 목표: 자동 블러의 결과만 보여 주는 페이지가 아니라, 학생이 탐지 과정을 직접 바꾸고 설명할 수 있는 학습 사이트를 만드는 일이었음
- 기존의 사이트들은 결과만 확인하고, 수정할 수 있었음
- 객체탐지에 대한 사이트로 울르라틱스 욜로가 존재
Ultralytics | Revolutionizing the World of Computer Vision
- 블러미 사이트는 객체탐지 후 자동 블러&모자이크 처리가 가능했던 사이트
블러는 블러미에서 - 동영상, 사진을 올리면 3초만에 자동 처리
학습 흐름은 사진 준비 → 입력 맞추기 → 후보 예측 → 임계값 실험 → 중복 정리 → 가리기 → 결과 확인의 7단계로 나누었음
- 사진 업로드와 노트북 카메라 촬영을 지원해 학생이 자신의 사진으로 실험할 수 있도록 설계함
- 각 단계에 ‘할 일’, ‘관찰하기’, ‘생각하기’를 두어 버튼 조작이 단순 체험으로 끝나지 않도록 구성함
- 예측 → 조작 → 관찰 → 설명의 순서를 수업 활동의 기본 구조로 삼았음
GPT-6 Astra와의 대화에서는 학습 목적을 먼저 정리하고, 각 버튼이 어떤 개념을 확인하게 하는지 설계 명세서에 기록했음

1-2. 기술 선택과 설명의 정확성

설치와 별도 API 키 없이 배포할 수 있도록 HTML·CSS·JavaScript와 Canvas 기반의 정적 웹사이트로 구현 방향 설정
- 사람 후보 탐지에는 브라우저에서 실행되는 YOLOv8n ONNX 모델을 사용함
- 얼굴 위치 탐지에는 BlazeFace 기반 모델을 사용함
- 블러와 모자이크는 탐지된 얼굴 영역의 픽셀을 바꾸는 후처리로 분리함
설계 단계에서는 다음 역할을 분명히 구분했음
- 사람 탐지는 ‘사람이 있을 법한 위치와 점수’를 예측함
- 얼굴 탐지는 사람 상자 안에서 가릴 얼굴 위치를 찾음
- 블러·모자이크는 선택된 얼굴 픽셀을 바꾸는 처리임
임계값은 AI 모델을 다시 학습시키는 값이 아니라, 이미 계산된 후보를 통과시킬지 정하는 기준으로 설명했음
- 후보 점수 ≥ 임계값이면 통과하도록 설계함
- 신뢰도 점수를 정답률이나 정확도와 같은 뜻으로 단정하지 않도록 안내함

Ⅱ. 디버깅 및 업그레이드 과정

2-1. 학습 기능 보완과 탐지 결과 검증

초기 결과에서 사람 전체 상자가 가려지는 방식은 학습 목표와 맞지 않아, 사람을 찾은 뒤 연결된 얼굴 영역만 가리도록 수정했음
- 얼굴 탐지 결과가 누락될 수 있으므로 학생이 드래그나 좌표 입력으로 가림 영역을 추가하는 수동 보정을 넣음
- 블러·모자이크 방식, 강도, 가림 상자 여유 폭을 조절하도록 구성함
후보 상자에 표시되는 #8554 같은 번호가 임의의 숫자나 인물 식별 정보로 오해되지 않도록 설명을 추가했음
- 번호는 YOLO 출력 배열에서 후보를 구분하기 위한 순번임
- 같은 사람에게 여러 후보 상자가 생길 수 있음을 실제 결과로 관찰하도록 함
NMS는 ‘같은 사람 주변의 겹친 후보 중 높은 점수 상자를 남기는 과정’으로 설명했음
- NMS는 Non-Maximum Suppression의 약자임
- IoU 기준과 신뢰도 임계값이 서로 다른 역할을 한다는 점을 분리해 실험하도록 구성함

Ⅰ. 초기 설계명세서

1-1. 학습 목표와 화면 흐름 설계

1-2. 기술 선택과 설명의 정확성

Ⅱ. 디버깅 및 업그레이드 과정

2-1. 학습 기능 보완과 탐지 결과 검증

2-2. 학습 경험과 모바일 화면 개선