드론 외벽 균열 점검 워크스페이스
드론 촬영 외벽 사진의 건물·구역 그룹 관리, 균열·파손 탐지 결과 목록, 파손 부위 오버레이와 원본 해상도 위치 확인, 엑셀 보고서 출력을 하나로 묶은 사내용 점검 워크스페이스를 React + Node.js 기반으로 설계합니다.
프로젝트 개요
드론 촬영 외벽 사진의 건물·구역 그룹 관리, 균열·파손 탐지 결과 목록, 파손 부위 오버레이와 원본 해상도 위치 확인, 엑셀 보고서 출력을 하나로 묶은 사내용 점검 워크스페이스를 React + Node.js 기반으로 설계합니다.
작업 범위
- 그룹별 탐지 결과 목록: 건물·점검 구역을 좌측에서 고르면 해당 구역의 탐지 사진을 썸네일 목록으로 훑어보고 심각도별로 필터할 수 있습니다
- 파손 오버레이·원본 위치 확인: 썸네일을 선택하면 원본 해상도 사진을 확대·이동하며 파손 부위의 박스와 색상 표시를 바로 확인할 수 있습니다
- 사진별 파손 항목 리스트: 한 장의 사진에서 탐지된 균열·파손 항목을 유형, 면적, 심각도 등급과 함께 리스트로 조회하고 검수 상태를 기록합니다
- 구역별 엑셀 보고서 출력: 건물·구역을 선택해 사진, 심각도, 촬영일, 점검자, 해상도, 점검 소요 시간이 담긴 엑셀 보고서를 내려받습니다
주요 업무
- 그룹별 탐지 결과 목록 화면: 건물·구역 트리와 썸네일 그리드, 선택 사진의 요약 패널을 한 화면에 구성하여 원본을 열기 전에 후보를 빠르게 추려냅니다
- 파손 오버레이·원본 위치 확인 화면: 타일 피라미드 기반 딥줌 뷰어 위에 탐지 영역 박스와 심각도 색상을 겹쳐 그립니다
- 사진별 파손 항목 리스트 화면: 탐지 결과를 항목 단위로 나열하고 규칙 기반 심각도 산정 결과와 점검자 검수 메모를 함께 관리합니다
- 구역별 엑셀 보고서 출력 화면: 구역 요약 시트와 사진별 상세 시트를 구성하고 오버레이가 반영된 사진을 셀에 삽입합니다
프로젝트 핵심 과제
드론 원본 사진의 고해상도
썸네일·타일 생성 시간이 길어질 수 있어 사전 생성 워커와 단계적 로드 전략 설계가 필요합니다
오픈소스 균열 탐지 모델의 품질이 실제 외벽 사진에서 달라질 수
샘플 사진 기반 임계값 보정 절차를 계획합니다
균열 실측 크기(mm) 표기는 촬영 거리와 카메라 정보가 있어야 산출되므로 메타데이터 확보 범위에 맞춘 단계적 적용이 필요합니다
구역 단위 엑셀 보고서에 사진을 삽입할 때 파일 크기가 커지는 문제에 대응하여 이미지 축소와 시트 분할 기준 설계가 필요합니다
핵심 기능 상세
그룹별 탐지 결과 목록
건물·점검 구역을 좌측에서 고르면 해당 구역의 탐지 사진을 썸네일 목록으로 훑어보고 심각도별로 필터할 수 있습니다.
- TanStack Virtual 기반 가상 스크롤로 구역당 수천 장 썸네일 목록 렌더링
- 썸네일 사전 생성 워커와 Cache-Control 설정으로 목록 이동 시 재요청 최소화
- 필터·정렬 조건을 URL 쿼리와 동기화하여 보던 목록 상태를 그대로 공유
건물 > 구역 > 사진의 계층 구조를 Prisma 관계 모델로 설계하고 커서 기반 페이지네이션으로 대량 사진 목록을 조회하는 구조를 구현합니다.
파손 오버레이·원본 위치 확인
썸네일을 선택하면 원본 해상도 사진을 확대·이동하며 파손 부위의 박스와 색상 표시를 바로 확인할 수 있습니다. 타일 피라미드 기반 딥줌 뷰어 위에 탐지 영역 박스와 심각도 색상을 겹쳐 그립니다.
- sharp로 원본을 타일 피라미드로 분할하고 OpenSeadragon으로 필요한 타일만 요청
- SVG 오버레이 레이어를 뷰어 좌표계와 동기화하여 확대 비율과 무관하게 박스 위치 유지
- 방향키 단축키로 이전·다음 탐지 영역으로 즉시 이동
수천만 화소 원본을 통째로 내려받지 않고 보이는 영역의 타일만 불러오는 딥줌 구조를 구현합니다.
사진별 파손 항목 리스트
한 장의 사진에서 탐지된 균열·파손 항목을 유형, 면적, 심각도 등급과 함께 리스트로 조회하고 검수 상태를 기록합니다.
- 탐지 면적·개수·길이를 입력으로 하는 규칙 테이블 기반 심각도 산정 모듈 설계
- 항목 단위 검수 상태(확인·제외·보류)를 낙관적 업데이트로 저장
- 탐지 신뢰도 임계값 슬라이더로 노출 항목을 즉시 재필터
심각도 규칙을 코드가 아닌 설정 테이블로 분리하여 현장 샘플에 맞춰 기준을 조정할 수 있는 구조를 구현합니다.
구역별 엑셀 보고서 출력
건물·구역을 선택해 사진, 심각도, 촬영일, 점검자, 해상도, 점검 소요 시간이 담긴 엑셀 보고서를 내려받습니다. 구역 요약 시트와 사진별 상세 시트를 구성하고 오버레이가 반영된 사진을 셀에 삽입합니다.
- ExcelJS 스트리밍 워크북으로 사진이 많은 구역도 메모리를 일정하게 유지하며 생성
- 오버레이 합성 이미지를 sharp로 축소해 셀 크기에 맞게 삽입
- 보고서 생성 작업을 비동기 작업으로 분리하고 완료 시 다운로드 링크 제공
요약 시트와 사진별 시트를 한 번의 작업으로 생성하는 보고서 파이프라인을 구현합니다.
프로젝트 진행 단계
사진 메타·건물 구역 데이터 모델 설계 · 2026.10
건물·구역·사진·탐지 항목 ERD 설계, EXIF 메타 컬럼과 심각도 규칙 테이블 정의
썸네일·타일 생성 파이프라인 구현 · 2026.10
sharp 기반 썸네일과 타일 피라미드 생성 워커, 파일 스토리지 접근 계층 구현
탐지 결과 연동 및 결과 화면 개발 · 2026.10
오픈소스 모델 추론 결과 적재 API, 목록·뷰어·항목 리스트 화면 구현
엑셀 보고서 및 인계 문서 작성 · 2026.10
ExcelJS 보고서 템플릿 구현, 사용 매뉴얼과 배포 패키지 구성
개발 결과
기술적 주안점
- 건물 > 구역 > 사진의 계층 구조를 Prisma 관계 모델로 설계하고 커서 기반 페이지네이션으로 대량 사진 목록을 조회하는 구조를 구현합니다
- 수천만 화소 원본을 통째로 내려받지 않고 보이는 영역의 타일만 불러오는 딥줌 구조를 구현합니다
- 심각도 규칙을 코드가 아닌 설정 테이블로 분리하여 현장 샘플에 맞춰 기준을 조정할 수 있는 구조를 구현합니다
