DWG 도면 기반 비계·동바리 개략 물량 산출 웹 프로그램
DWG 도면 업로드, 레이어 규칙 기반 도면 자동 인식, 시스템비계 설치면적(㎡)과 시스템동바리 RC·DECK 체적(㎥) 개략 물량 산출, 수동 보정, 엑셀 출력, 견적 요청까지 이어지는 고객용 웹 흐름을 Node.js와 React 기반으로 구현합니다.
프로젝트 개요
DWG 도면 업로드, 레이어 규칙 기반 도면 자동 인식, 시스템비계 설치면적(㎡)과 시스템동바리 RC·DECK 체적(㎥) 개략 물량 산출, 수동 보정, 엑셀 출력, 견적 요청까지 이어지는 고객용 웹 흐름을 Node.js와 React 기반으로 구현합니다. 자동 인식 결과를 사용자가 직접 바로잡는 수동 보정 단계를 포함하며, 기존 홈페이지에 임베드할 수 있는 구조로 설계합니다.
작업 범위
- DWG 도면 업로드·변환: 건축·구조 DWG 파일을 업로드하면 서버에서 DXF로 변환하고 레이어별 도형을 읽어 도면 자동 인식 결과를 보여줍니다
- 비계·동바리 개략 물량 산출: 인식된 외벽 길이와 층고로 시스템비계 설치면적(㎡)을, 슬래브 면적과 내부 높이로 시스템동바리 RC·DECK 체적(㎥)을 개략 산출합니다
- 도면 뷰어·수동 보정: 줌·팬·레이어 토글이 가능한 웹 뷰어에서 인식 구간을 확인하고, 인식이 어려운 구간의 높이·면적을 직접 지정하거나 산출값을 수정합니다
- 엑셀 출력·견적 요청: 산출 결과를 엑셀로 내려받고, 업체명·현장명·연락처를 입력하여 견적 요청을 제출합니다
주요 업무
- DWG 도면 업로드·변환 화면: 변환기를 별도 프로세스로 호출하고 ezdxf 계열 파서로 레이어·폴리라인·블록을 추출하는 비동기 처리 구조로 설계합니다
- 비계·동바리 개략 물량 산출 화면: 산출 기준을 규칙 모듈로 분리하고 층별 합계와 산식을 함께 보여주는 개략 산출 엔진으로 구현합니다
- 도면 뷰어·수동 보정 화면: Canvas 기반 벡터 렌더러와 구간 지정 도구, 수정 이력 저장 구조로 수동 보정 단계를 구현합니다
- 엑셀 출력·견적 요청 화면: ExcelJS 템플릿 기반 시트 생성과 요청 폼 검증, 제출 이력 조회 화면으로 구성합니다
프로젝트 핵심 과제
도면마다 다른 레이어 명명 규칙과 층고 표기 방식을 규칙 테이블과 사용자 매핑 단계로 흡수하는 인식 구조 설계
DWG 변환기의 라이선스 조건에 맞춰 별도 프로세스 호출 구조와 대체 변환기 교체 지점 설계
자동 인식 결과와 수동 보정 값이 섞인 산출 합계의 출처를 구분하여 보여주는 데이터 모델 설계
대형 도면 파일의 업로드·변환 대기 시간을 사용자에게 단계별로 안내하는 비동기 작업 흐름 설계
핵심 기능 상세
DWG 도면 업로드·변환
건축·구조 DWG 파일을 업로드하면 서버에서 DXF로 변환하고 레이어별 도형을 읽어 도면 자동 인식 결과를 보여줍니다.
- Multer 스트리밍 업로드와 확장자·용량 검증 미들웨어 적용
- LibreDWG 변환기를 별도 프로세스로 호출하고 작업 상태를 큐로 관리
- DXF 레이어·폴리라인·TEXT 엔티티를 규칙 테이블로 분류하는 파서 설계
변환 프로세스를 API 서버와 분리하여 라이선스 경계를 명확히 하고, 변환 결과를 레이어 규칙 단위로 캐싱하는 구조를 설계합니다.
비계·동바리 개략 물량 산출
인식된 외벽 길이와 층고로 시스템비계 설치면적(㎡)을, 슬래브 면적과 내부 높이로 시스템동바리 RC·DECK 체적(㎥)을 개략 산출합니다.
- Strategy 패턴으로 비계·동바리 산출 규칙을 모듈화
- 폴리곤 면적·둘레 계산을 서버 유틸로 분리하고 단위 테스트 작성
- 층별 산출 근거(도형 ID·산식)를 JSONB로 저장하여 추적 가능하게 설계
산출 결과에 근거 도형과 산식을 함께 저장하여 개략 산출임을 명확히 하고 수치 검토를 쉽게 하는 구조를 설계합니다.
도면 뷰어·수동 보정
줌·팬·레이어 토글이 가능한 웹 뷰어에서 인식 구간을 확인하고, 인식이 어려운 구간의 높이·면적을 직접 지정하거나 산출값을 수정합니다.
- Canvas 2D 벡터 렌더링과 뷰포트 행렬 기반 줌·팬 구현
- 구간 폴리곤 지정 도구와 높이 입력 폼의 양방향 상태 동기화
- 수정 전후 값을 이력 테이블에 저장하는 감사 로그 설계
대형 도면을 레이어별 오프스크린 캔버스로 나누어 그려 토글과 확대 시 재렌더 범위를 줄이는 구조를 설계합니다.
엑셀 출력·견적 요청
산출 결과를 엑셀로 내려받고, 업체명·현장명·연락처를 입력하여 견적 요청을 제출합니다. ExcelJS 템플릿 기반 시트 생성과 요청 폼 검증, 제출 이력 조회 화면으로 구성합니다.
- ExcelJS로 층별 요약·상세 산식 시트를 템플릿에서 생성
- React Hook Form과 Zod 스키마로 연락처·사업자 정보 검증
- 임베드용 iframe 모드와 postMessage 기반 부모 페이지 연동 설계
기존 홈페이지에 iframe으로 삽입해도 높이 자동 조절과 도메인 허용 목록이 동작하는 임베드 구조를 설계합니다.
프로젝트 진행 단계
도면 변환·파싱 파이프라인 설계 · 2026.10
DWG→DXF 변환 프로세스 분리, 레이어 규칙 테이블과 도형 추출 파서 설계
산출 규칙 엔진 개발 · 2026.10
비계 면적·동바리 체적 산출 모듈, 층별 합계와 근거 저장 구조 구현
도면 뷰어와 보정 UI 개발 · 2026.10
Canvas 뷰어, 레이어 토글, 구간 지정·수정 화면과 이력 저장 구현
엑셀 출력·견적 요청·임베드 연동 · 2026.10
ExcelJS 시트 생성, 견적 요청 폼과 iframe 임베드 인터페이스 구현
개발 결과
기술적 주안점
- 변환 프로세스를 API 서버와 분리하여 라이선스 경계를 명확히 하고, 변환 결과를 레이어 규칙 단위로 캐싱하는 구조를 설계합니다
- 산출 결과에 근거 도형과 산식을 함께 저장하여 개략 산출임을 명확히 하고 수치 검토를 쉽게 하는 구조를 설계합니다
- 대형 도면을 레이어별 오프스크린 캔버스로 나누어 그려 토글과 확대 시 재렌더 범위를 줄이는 구조를 설계합니다
