안강 섬김 노인복지센터

실제 고객 의뢰로 구축한 공식 홈페이지 및 운영자 CMS. 공지·사진 게시판·상담문의·구인 안내를 관리하는 실서비스로, 사진 업로드 시 얼굴을 자동 감지해 블러 처리하는 개인정보 보호 파이프라인을 구현했습니다.

ROLE: 기획 · 설계 · 개발 · 배포 · 운영
PERIOD: 2026.05 — 운영 중
STACK: Next.js · TypeScript · Supabase · R2 · Sharp · face-api.js · Tailwind v4
LINKS: repo ↗ · live ↗

## 문제

복지센터는 활동 사진으로 홍보해야 하지만, 게시 사진에 어르신·이용자의 얼굴이 노출되면 개인정보 문제가 됩니다. 사진 홍보와 개인정보 보호를 동시에 — 이 요구를 업로드 파이프라인 자체에서 자동으로 해결했습니다.

클라이언트 감지 + 서버 블러 분리

브라우저에서 face-api.js(TinyFaceDetector)로 얼굴 좌표를 감지하고, 서버(sharp)에서 해당 영역만 추출 → 강블러(blur 28) → 원위치 합성. EXIF 회전·리사이즈 스케일을 보정해 좌표를 정확히 매핑.

2-Phase 업로드 파이프라인

TF.js WebGL 백엔드가 단일 스레드라 얼굴 감지는 순차, R2 업로드는 병렬(Promise.all)로 분리해 다중 업로드 성능 확보. Server Action 직렬화를 피하려 업로드만 API Route로 분리.

원본/블러 이중 저장 + 토글

original/·blurred/ 두 버전을 보관해 사진별 블러 on/off와 수동 블러 영역 편집(fallback)까지 지원.

메모리 안정화

TF.js 텐서 메모리 누수를 objectURL 해제 + GC yield로 완화.

고객 만족과 소개를 통해 후속 프로젝트(영천중앙교회 홈페이지)로 이어졌습니다.