← 포트폴리오 목록

파이어체크 CAD 소방 법규 자동 검토 서비스

CAD 도면 이미지를 업로드하면 OpenAI Vision API로 배관·구조를 자동 분석하고, 소방 법규 거리 계산 알고리즘으로 내진 버팀대 위치를 Canvas 기반 뷰어에 자동 마킹하는 MVP를 React + Express + PostgreSQL 기반으로 설계·구현합니다.

서비스 타입Web
업종데이터 분석
기술 스택
React 18TypeScriptTailwind CSSFabric.jsRechartsReact QueryReact Hook FormNode.jsExpressPrismaPostgreSQLBull QueueAWS S3OpenAI Vision APIPuppeteer
주요 기능
  • CAD 도면 업로드 및 AI 분석
  • 버팀대 자동 마킹
  • 하중값 계산 및 적정성 검토
  • 법규 검토 리포트 생성

프로젝트 개요

범위: 개발, 디자인, 기획

CAD 도면 이미지를 업로드하면 OpenAI Vision API로 배관·구조를 자동 분석하고, 소방 법규 거리 계산 알고리즘으로 내진 버팀대 위치를 Canvas 기반 뷰어에 자동 마킹하는 MVP를 React + Express + PostgreSQL 기반으로 설계·구현합니다. 건축설계사무소·소방설비 설계 엔지니어가 수작업 검토 시간을 줄이고 법규 준수 리포트를 즉시 다운로드할 수 있는 플랫폼 구조를 구축합니다.

작업 범위

  • CAD 도면 업로드 및 AI 분석: CAD 도면 이미지(PNG/JPG/PDF)를 업로드하면 OpenAI Vision API가 배관 규격, 구조 요소, 공간 배치를 자동 인식하고 분석 결과를 구조화된 JSON으로 반환합니다
  • 버팀대 자동 마킹: 소방 법규 거리 계산 알고리즘이 분석된 배관 데이터를 기반으로 내진 버팀대 설치 위치를 자동 산출하고 Canvas 뷰어에 마킹을 오버레이합니다
  • 하중값 계산 및 적정성 검토: 배관 재질·직경·길이·지지 방식을 입력하면 하중 계산 알고리즘이 각 버팀대의 허용 하중 초과 여부를 검토하고 결과를 시각화합니다
  • 법규 검토 리포트 생성: 분석 완료된 도면의 버팀대 마킹·하중 검토 결과를 포함한 소방 법규 준수 리포트를 PDF로 자동 생성하고 다운로드합니다

주요 업무

  • CAD 도면 업로드 및 AI 분석 화면: Multer로 도면 파일을 AWS S3에 업로드하고, OpenAI Vision API에 도면 이미지와 소방 법규 컨텍스트 프롬프트를 전달하여 배관 직경·길이·연결부 위치를 추출합니다. 분석 결과는 PostgreSQL analysis 테이블에 저장됩니다
  • 버팀대 자동 마킹 화면: NFPA 13 기반 버팀대 설치 간격(수평 배관 3.7m 이내, 수직 배관 4.5m 이내) 규칙 엔진을 구현하고, Fabric.js Canvas 위에 도면 원본 이미지를 레이어로 표시하며 버팀대 위치를 색상·형태로 구분하여 마킹합니다
  • 하중값 계산 및 적정성 검토 화면: 배관 중량(단위 길이당 중량 × 길이) + 내용물 중량 + 수직 하중 성분을 산출하는 공식을 Express 서비스 레이어에 구현하고, Recharts BarChart로 버팀대별 계산 하중과 허용 하중을 비교하여 초과 항목을 경고 색상으로 강조합니다
  • 법규 검토 리포트 생성 화면: Puppeteer로 Canvas 마킹 스크린샷 + 하중 계산 테이블 + 적정성 판정 요약을 HTML 템플릿에 합성하여 PDF를 생성하고, AWS S3에 저장 후 presigned URL로 다운로드 링크를 제공합니다
파이어체크 CAD 소방 법규 자동 검토 서비스
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

OpenAI Vision API가 저해상도·저대비 CAD 도면에서 배관 좌표를 오인식할 수 있어

도면 전처리(대비 보정) 및 재분석 요청 플로우 설계 필요

Fabric.js Canvas에서 도면 원본 이미지 픽셀 좌표와 실제 설계 치수(mm) 간 스케일 변환 매핑 로직 설계 및 정밀도 보장 방안

배관 재질·설치 환경 조건이 복합 적용될 때 소방법규 규칙 우선순위 충돌을 처리하는 규칙 엔진 분기 로직 설계

대형 도면 파일(100MB 이상) 업로드 시 Multer 메모리 초과 없이 스트림 기반으로 S3에 직접 전송하는 파이프라인 구조 설계

Puppeteer PDF 렌더링 중 Fabric.js Canvas 마킹이 완전히 로드되기 전 캡처되는 타이밍 이슈 해결 및 waitForSelector 전략 설계

구현 내용

핵심 기능 상세

핵심 기능 1

CAD 도면 업로드 및 AI 분석

CAD 도면 이미지(PNG/JPG/PDF)를 업로드하면 OpenAI Vision API가 배관 규격, 구조 요소, 공간 배치를 자동 인식하고 분석 결과를 구조화된 JSON으로 반환합니다.

  • Multer + AWS S3 presigned URL로 도면 파일 업로드 처리, 파일 크기·형식 유효성 검증 미들웨어 설계
  • OpenAI Vision API에 소방법규 컨텍스트 system prompt + 도면 이미지를 구조화 JSON으로 요청하는 Function Calling 스키마 설계
  • React Query의 refetchInterval 폴링으로 AI 분석 진행률을 SSE로 실시간 수신하여 프로그레스 바 업데이트 구현

OpenAI Vision API Function Calling 스키마로 배관 직경·좌표·연결 타입을 구조화된 JSON으로 추출하고, Pydantic 모델 기반 응답 검증으로 파싱 정확도를 보장하는 분석 파이프라인을 설계합니다.

CAD 도면 업로드 및 AI 분석
CAD 도면 업로드 및 AI 분석 실제 화면
핵심 기능 2

버팀대 자동 마킹

소방 법규 거리 계산 알고리즘이 분석된 배관 데이터를 기반으로 내진 버팀대 설치 위치를 자동 산출하고 Canvas 뷰어에 마킹을 오버레이합니다.

  • 소방법규(NFPA 13 준용) 거리 조건을 Rule 클래스 배열로 정의하고, 배관 좌표 배열을 순회하며 버팀대 설치 필요 지점을 산출하는 알고리즘 구현
  • Fabric.js Canvas에 도면 이미지를 배경 레이어로 표시하고, 버팀대 마킹을 별도 오브젝트 레이어로 분리하여 독립 토글·수정 가능한 구조 설계
  • 마킹 결과 좌표·규칙 근거를 PostgreSQL markings 테이블에 저장, 버전 관리로 재검토 이력 추적 구조 구현

배관 좌표 배열을 순회하며 법규 거리 조건을 Rule 패턴으로 적용하는 버팀대 위치 산출 엔진을 구현하고, Fabric.js 오브젝트 레이어로 마킹을 렌더링하여 사용자가 마킹 위치를 직접 조정 가능한 대화형 뷰어 구조를 설계합니다.

버팀대 자동 마킹
버팀대 자동 마킹 실제 화면
핵심 기능 3

하중값 계산 및 적정성 검토

배관 재질·직경·길이·지지 방식을 입력하면 하중 계산 알고리즘이 각 버팀대의 허용 하중 초과 여부를 검토하고 결과를 시각화합니다.

  • 배관 재질 테이블(강관·동관·PVC)별 단위 중량 DB 설계, 배관 직경·길이·유체 비중 입력으로 총 하중을 산출하는 Express 계산 서비스 구현
  • Recharts ComposedChart로 계산 하중(Bar)과 허용 하중(ReferenceLine)을 오버레이하여 초과 항목을 동적 색상으로 시각화
  • React Hook Form + Zod로 직경·길이·재질 입력 유효성 검증, 실시간 계산 결과를 useWatch 기반 디바운스로 즉시 반영 구조 설계

배관 물성 데이터(재질·직경·허용 하중)를 PostgreSQL 참조 테이블로 관리하고, Express 계산 서비스 레이어에서 AISC 허용 응력 기준을 적용한 하중 적정성 판정 로직을 구현하여 검토 결과를 버팀대 단위로 추적 가능한 구조를 설계합니다.

하중값 계산 및 적정성 검토
하중값 계산 및 적정성 검토 실제 화면
핵심 기능 4

법규 검토 리포트 생성

분석 완료된 도면의 버팀대 마킹·하중 검토 결과를 포함한 소방 법규 준수 리포트를 PDF로 자동 생성하고 다운로드합니다.

  • Puppeteer headless Chrome으로 마킹 도면 스크린샷 + 결과 테이블을 A4 PDF로 렌더링, 페이지 분할 및 헤더·푸터 자동 삽입 로직 구현
  • AWS S3 presigned URL(만료 48h)로 생성된 PDF 보안 다운로드 링크 제공, Prisma reports 테이블에 생성 이력 저장
  • Bull Queue 워커로 PDF 생성 작업을 비동기 처리, 완료 시 Socket.io 이벤트로 다운로드 링크를 프론트엔드에 즉시 전달하는 구조 설계

Bull Queue 리포트 워커가 Puppeteer PDF 렌더링 → AWS S3 업로드 → presigned URL 발급을 순차 파이프라인으로 처리하고, 실패 시 3회 재시도 후 에러 상태를 Prisma에 기록하는 신뢰성 있는 리포트 생성 구조를 설계합니다.

법규 검토 리포트 생성
법규 검토 리포트 생성 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

소방법규 도메인 분석 및 DB 스키마 설계 · 2026.04

NFPA 13 기반 버팀대 설치 규칙 정리, 배관 물성·마킹·하중·리포트 도메인 PostgreSQL 테이블 12개 정의, Prisma 스키마 및 ERD 작성

STEP 2

AI 분석 파이프라인 및 Express API 개발 · 2026.04 / 법규 규칙 엔진 및 하중 계산 서비스 구현 · 2026.04

OpenAI Vision API 연동 도면 분석 모듈 구현, Multer + AWS S3 파일 업로드 처리, RESTful API 30개 엔드포인트 구현, JWT 인증 미들웨어 적용 버팀대 설치 간격 Rule 패턴 알고리즘 구현, 배관 재질별 단위 중량 참조 테이블 구축, 허용 하중 적정성 판정 계산 서비스 설계

STEP 3

React 프론트엔드 및 Canvas 뷰어 개발 · 2026.04

Fabric.js 기반 도면 뷰어·마킹 오버레이 구현, React 18 기반 18개 화면 구현, Recharts 하중 비교 차트, Bull Queue + Puppeteer PDF 파이프라인 연동

STEP 4

통합 검증 및 리포트 품질 점검 · 2026.04

법규 규칙 엔진 케이스 테스트 38개 작성, PDF 리포트 레이아웃·마킹 스크린샷 정합성 검증, API 통합 테스트 및 S3 업로드 파이프라인 엔드투엔드 검증

개발 결과

OpenAI Vision 기반 도면 분석 파이프라인 설계Vision API Function Calling 스키마 8종으로 배관 직경·좌표·연결 타입을 구조화 JSON 추출, Pydantic 응답 검증으로 파싱 신뢰성 보장 구조 구현
소방법규 거리 규칙 엔진 구현NFPA 13 버팀대 설치 간격 조건을 Rule 클래스 배열로 정의하고, 배관 좌표 순회 알고리즘으로 설치 필요 지점을 자동 산출하는 엔진 설계
Fabric.js 대화형 도면 마킹 뷰어 구현도면 이미지 배경 레이어와 버팀대 마킹 오브젝트 레이어를 분리하여 독립 토글·드래그 수정 가능한 Canvas 뷰어 구조 설계
Bull Queue + Puppeteer PDF 리포트 파이프라인 구축비동기 PDF 생성 워커와 AWS S3 업로드를 파이프라인으로 연결, 실패 재시도 정책과 Socket.io 완료 알림 구조 설계

기술적 주안점

  • OpenAI Vision API Function Calling 스키마로 배관 직경·좌표·연결 타입을 구조화된 JSON으로 추출하고, Pydantic 모델 기반 응답 검증으로 파싱 정확도를 보장하는 분석 파이프라인을 설계합니다
  • 배관 좌표 배열을 순회하며 법규 거리 조건을 Rule 패턴으로 적용하는 버팀대 위치 산출 엔진을 구현하고, Fabric.js 오브젝트 레이어로 마킹을 렌더링하여 사용자가 마킹 위치를 직접 조정 가능한 대화형 뷰어 구조를 설계합니다
  • 배관 물성 데이터(재질·직경·허용 하중)를 PostgreSQL 참조 테이블로 관리하고, Express 계산 서비스 레이어에서 AISC 허용 응력 기준을 적용한 하중 적정성 판정 로직을 구현하여 검토 결과를 버팀대 단위로 추적 가능한 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의