DWG 도면 기반 시스템비계 개략 물량 산출·3D 외관 뷰어
DWG 도면 업로드와 DXF 변환, 외곽선·층 정보 자동 인식, 시스템비계 설치면적(㎡) 개략 산출, three.js 외곽선 압출 기반 3D 외관 표시, 구간·높이·면적 수동 보정, 엑셀 출력, 견적 요청까지 이어지는 고객용 웹 흐름을 React와 Node.js 기반으로 구현합니다.
프로젝트 개요
DWG 도면 업로드와 DXF 변환, 외곽선·층 정보 자동 인식, 시스템비계 설치면적(㎡) 개략 산출, three.js 외곽선 압출 기반 3D 외관 표시, 구간·높이·면적 수동 보정, 엑셀 출력, 견적 요청까지 이어지는 고객용 웹 흐름을 React와 Node.js 기반으로 구현합니다. 자동 인식 결과를 사용자가 바로잡는 단계형 구조로 설계하며, 기존 홈페이지에 임베드할 수 있도록 구성합니다.
작업 범위
- DWG 도면 업로드·DXF 변환: 현장별 작업 공간에서 DWG 파일을 올리면 서버가 DXF로 변환하고 외곽선과 층 정보를 읽어 인식 결과를 도면 목록 옆 상세 패널에 보여줍니다
- 3D 외관 뷰어: 도면 외곽선에 층고를 적용해 건물 외관을 대략적인 3D 덩어리로 보여주며 회전·확대로 확인할 수 있습니다. 내부 구조는 표시하지 않습니다
- 개략 물량 산출·수동 보정: 인식된 외곽선 길이와 층고로 시스템비계 설치면적(㎡)을 층별로 산출하고, 인식이 어려운 구간은 구간·높이·면적을 직접 지정하거나 수정합니다
- 엑셀 출력·견적 요청: 산출 결과를 엑셀로 내려받고, 업체명·현장명·연락처를 입력해 견적 요청을 제출합니다. 기존 홈페이지에 임베드해 같은 화면을 쓸 수 있습니다
주요 업무
- DWG 도면 업로드·DXF 변환 화면: 변환기를 별도 프로세스로 호출하고 Python ezdxf 워커가 레이어·폴리라인·TEXT를 추출하는 비동기 작업 구조로 설계합니다
- 3D 외관 뷰어 화면: three.js ExtrudeGeometry로 외곽 폴리곤을 층 단위로 압출하고 비계 설치 구간을 색 띠로 겹쳐 표시합니다
- 개략 물량 산출·수동 보정 화면: 산출 규칙을 모듈로 분리하고 자동값과 수정값을 구분 저장하는 단계형 보정 구조로 구현합니다
- 엑셀 출력·견적 요청 화면: ExcelJS 템플릿 시트 생성, 입력 검증 폼, iframe 임베드 모드로 구성합니다



프로젝트 핵심 과제
도면마다 레이어 규칙과 층고 표기가 달라 외곽선 인식 규칙을 일반화하기 어려우며
규칙 테이블과 수동 지정 경로로 대응합니다
DWG 변환기의 라이선스 조건이 달라 별도 프로세스 분리와 어댑터 구조로 선택 가능성을 열어 둘 계획입니다
대형 도면의 외곽선 좌표를 3D로 변환할 때 단위·원점 차이로 형상이 어긋날 수
정규화 단계를 두고 검증합니다
자동 산출값과 사용자 수정값이 섞이면 근거 추적이 어려워 이중 저장과 변경 이력으로 구분할 계획입니다
핵심 기능 상세
DWG 도면 업로드·DXF 변환
현장별 작업 공간에서 DWG 파일을 올리면 서버가 DXF로 변환하고 외곽선과 층 정보를 읽어 인식 결과를 도면 목록 옆 상세 패널에 보여줍니다.
- Multer 스트리밍 업로드와 확장자·용량 검증 미들웨어 적용
- LibreDWG 변환기를 별도 프로세스로 호출하고 변환 작업 상태를 큐 테이블로 관리
- Python ezdxf 워커로 외곽선 폴리라인과 층고 TEXT 엔티티를 규칙 테이블 기준으로 분류
변환기를 API 서버와 분리한 별도 프로세스로 두어 라이선스 경계를 명확히 하고, 변환기를 교체할 수 있는 어댑터 구조를 설계합니다. Autodesk APS는 선택 가능한 대안 경로로 어댑터에 포함합니다.


3D 외관 뷰어
도면 외곽선에 층고를 적용해 건물 외관을 대략적인 3D 덩어리로 보여주며 회전·확대로 확인할 수 있습니다. 내부 구조는 표시하지 않습니다.
- three.js ExtrudeGeometry로 외곽선 폴리곤을 층고만큼 압출
- OrbitControls 기반 회전·확대와 층별 표시 토글 구현
- 외곽선 좌표 정규화로 서로 다른 도면 단위(mm·m)를 동일 스케일로 변환
정밀 모델링이 아닌 개략 외관 표시로 범위를 한정하고, 수동 보정값이 바뀌면 3D 형상이 즉시 갱신되는 구조를 설계합니다.


개략 물량 산출·수동 보정
인식된 외곽선 길이와 층고로 시스템비계 설치면적(㎡)을 층별로 산출하고, 인식이 어려운 구간은 구간·높이·면적을 직접 지정하거나 수정합니다.
- Strategy 패턴으로 설치면적 산출 규칙을 모듈화하고 단위 테스트 작성
- 폴리곤 면적·둘레 계산 유틸과 구간 선택 도구의 양방향 상태 동기화
- 수정 전후 값과 근거 도형을 JSONB 이력으로 저장
산식과 근거 도형을 결과와 함께 보여주어 개략 산출임을 명확히 하고, 자동 인식이 실패해도 수동 지정만으로 산출을 끝낼 수 있는 경로를 설계합니다.


엑셀 출력·견적 요청
산출 결과를 엑셀로 내려받고, 업체명·현장명·연락처를 입력해 견적 요청을 제출합니다. 기존 홈페이지에 임베드해 같은 화면을 쓸 수 있습니다.
- ExcelJS로 층별 요약·상세 산식 시트를 템플릿에서 생성
- React Hook Form과 Zod 스키마로 업체명·연락처 입력 검증
- iframe 임베드 모드와 postMessage 기반 부모 페이지 높이 조절 설계
기존 홈페이지에 iframe으로 삽입해도 높이 자동 조절과 허용 도메인 목록이 동작하는 임베드 구조를 설계합니다.


프로젝트 진행 단계
DWG 변환 어댑터와 도면 모델 설계 · 2026.10
LibreDWG 변환 프로세스 연동, ezdxf 워커 입출력 규격, 도면·층·구간 테이블 설계
외곽선 인식 규칙과 물량 산출 엔진 · 2026.10
레이어 규칙 테이블, 폴리곤 면적 유틸, 층별 설치면적 산출 모듈과 단위 테스트 구현
three.js 3D 외관 뷰어 구현 · 2026.10
외곽선 압출 지오메트리, 층별 토글, 보정값 연동 갱신 구조 구현
수동 보정 UI·엑셀·견적 요청·임베드 · 2026.10
구간 지정 도구, 수정 이력, ExcelJS 출력, 견적 요청 폼, iframe 임베드 모드 구현
개발 결과
기술적 주안점
- 변환기를 API 서버와 분리한 별도 프로세스로 두어 라이선스 경계를 명확히 하고, 변환기를 교체할 수 있는 어댑터 구조를 설계합니다. Autodesk APS는 선택 가능한 대안 경로로 어댑터에 포함합니다
- 정밀 모델링이 아닌 개략 외관 표시로 범위를 한정하고, 수동 보정값이 바뀌면 3D 형상이 즉시 갱신되는 구조를 설계합니다
- 산식과 근거 도형을 결과와 함께 보여주어 개략 산출임을 명확히 하고, 자동 인식이 실패해도 수동 지정만으로 산출을 끝낼 수 있는 경로를 설계합니다