목차(클릭하세요)
Ⅰ. 초기 설계명세서
1-1. 학습 목표와 화면 흐름 설계
•
처음 목표: 자동 블러의 결과만 보여 주는 페이지가 아니라, 학생이 탐지 과정을 직접 바꾸고 설명할 수 있는 학습 사이트를 만드는 일이었음
◦
기존의 사이트들은 결과만 확인하고, 수정할 수 있었음
◦
객체탐지에 대한 사이트로 울르라틱스 욜로가 존재
◦
블러미 사이트는 객체탐지 후 자동 블러&모자이크 처리가 가능했던 사이트
•
학습 흐름은 사진 준비 → 입력 맞추기 → 후보 예측 → 임계값 실험 → 중복 정리 → 가리기 → 결과 확인의 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 기준과 신뢰도 임계값이 서로 다른 역할을 한다는 점을 분리해 실험하도록 구성함
2-2. 학습 경험과 모바일 화면 개선
•
‘후보 예측’ 단계에는 실제 탐지 후 계산된 후보를 점수순으로 펼쳐 보는 느린 관찰 기능을 추가했음
◦
이 기능은 모델 내부의 실제 연산 시간을 재생하는 것이 아니라, 결과를 학습 순서에 맞춰 보여 주는 설명 기능임
•
핵심 개념 문제는 5지선다형 3문항과 주관식 토론 1문항으로 조정
◦
주관식 질문은 초해상도 AI와 블러·모자이크의 관계를 생각하게 하는 발문으로 구성함
◦
‘역함수와 비슷하긴 하지만 엄밀한 역함수 관계는 아니다’라는 힌트와 수업 안내만 제공하도록 정함
•
모바일 점검에서 가장 중요한 ‘내 사진에서 AI 탐지 실행’ 버튼이 화면 아래로 밀리는 문제를 발견했음
◦
320px, 390px, 760px 폭에서 버튼이 화면에 보이고 눌리는지 점검함
◦
모바일에서는 실행 버튼을 하단에 고정하고, 카메라 미리보기 중에는 촬영 화면을 가리지 않도록 숨기게 수정함
◦
데스크톱 배치와 샘플 사진의 얼굴 5개 탐지, 가상 카메라 촬영, 가로 넘침 여부를 함께 확인함
Ⅲ. GitHub 및 Vercel 연동 배포 과정
3-1. 공개 저장소 준비와 커밋 관리
•
GitHub 저장소를 초기화한 뒤 .gitignore와 README.md를 준비했음
•
.gitignore는 검토된 사이트 파일과 문서만 포함하도록 구성함
•
비밀키·인증서·환경 변수·로컬 설정·개인 사진이 커밋 대상에 들어가지 않는지 점검함
3-2. Vercel 연결과 실제 배포 확인
•
Vercel에서 GitHub 저장소를 연결하고 main 브랜치를 프로덕션 배포 브랜치로 설정했음
•
깃허브로 버셀을 로그인하는 것이 가장 중요한 Point
•
정적 사이트이므로 Framework는 Other, 별도 Install Command·Build Command는 사용하지 않음
•
모바일 버튼 수정과 문구 수정을 GitHub main에 커밋·푸시한 뒤 Vercel이 자동으로 새 프로덕션 배포를 생성하는 것을 확인
◦
코드 변경 → GitHub 푸시 → Vercel 자동 배포 → 공개 주소 재검증의 흐름을 실제로 확인함
◦
배포 뒤에도 사이트의 실제 화면과 기능을 다시 확인하는 과정을 유지함
