Smart surveillance · Frontend
A-EYE
카메라 피드·검색·리포트를 제공하는 Next.js 기반 스마트 관제 프론트엔드
프로젝트 소개
카메라 데이터와 검색 결과를 다루는 관제 UI
- 3인 팀 프로젝트에서 프론트엔드 담당
- 로그인·프로필·리포트·카메라 피드·검색 화면 구현
- Next.js App Router·공통 레이아웃·Recoil 전역 상태 구성, API 호출을 wrapper로 분리
- MUI와 Docker 기반 개발·배포 구성 적용
문제 상황
썸네일 생성 시 불필요한 원본 해상도 처리
- CCTV 검색 결과의 썸네일 생성 지연
- 작은 목록 이미지에도 원본 영상 해상도와 같은 크기의 canvas를 사용하는 처리 경로 확인
해결 과정
표시 용도에 맞춰 canvas 해상도 축소
- 썸네일 생성 경로의 canvas 가로·세로를 각각 1/4로 축소
- 처리 화소 수 93.75% 감소
- 원본 영상이 아닌 목록 표시용 썸네일에 한정해 적용
검증 및 성과
재현 실험으로 처리 시간 비교
- 동일 로직 재현 실험의 canvas 처리 중앙값: 13.7ms → 3.3ms, 75.9% 감소
- 12개 영상의 불러오기·탐색·canvas 처리를 포함한 전체 썸네일 생성 중앙값: 458.1ms → 346.6ms, 24.3% 감소
- 교과목 A+ 및 대한전자공학회 인공지능학부생 논문경진대회 장려상
화면 구성
페이지·상태·API의 역할 분리
- App Router 페이지 → 공통 UI 컴포넌트 → Recoil 상태·API wrapper → 백엔드
