← 포트폴리오 목록

액추에이터 선정·기술문서 의뢰 포털

고객사 PDF·엑셀 자료 접수, 규칙 기반 액추에이터 모델 자동 선정, 선정리스트와 데이터시트·도면 출력, 버전별 변경 이력 조회까지 이어지는 사용자 쪽 업무 화면을 React와 Node.js 기반으로 설계·구현하는 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaExcelJSpdf-lib
주요 기능
  • 의뢰 접수
  • 선정 결과
  • 기술문서 출력
  • 버전 이력

프로젝트 개요

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

고객사 PDF·엑셀 자료 접수, 규칙 기반 액추에이터 모델 자동 선정, 선정리스트와 데이터시트·도면 출력, 버전별 변경 이력 조회까지 이어지는 사용자 쪽 업무 화면을 React와 Node.js 기반으로 설계·구현하는 프로젝트입니다.

작업 범위

  • 의뢰 접수: 담당자가 프로젝트와 고객사를 고르고 고객사 PDF·엑셀 자료를 올리면 정해진 값만 불러와 표로 보여 주고, 누락·오류 항목을 표시합니다
  • 선정 결과: 사전 정의된 규칙으로 항목별 적합 모델을 고르고, 적용된 조건과 예외(조건 누락·선정 가능 모델 없음)를 근거와 함께 보여 줍니다. 고객사 데이터가 바뀌면 바뀐 조건만 반영해 재선정하고 결과가 달라진 항목을 표시합니다
  • 기술문서 출력: 선정리스트를 엑셀·PDF로 출력하고, 선정된 모델과 프로젝트 사양을 기존 데이터시트 양식에 반영한 미리보기를 확인합니다. 외형도·회로도는 조건에 맞는 도면을 골라 모델명·사양·리비전 정보를 같은 선정 결과 기준으로 맞춥니다
  • 버전 이력: 같은 프로젝트의 입력 데이터, 선정 결과, 생성 문서를 버전별로 묶어 보관하고, 두 버전을 나란히 비교하며 이전 버전 문서를 다시 내려받습니다

주요 업무

  • 의뢰 접수 화면: 양식별 매핑 정의로 텍스트 PDF·엑셀의 지정 위치 값을 추출하고 항목별 확인 상태를 기록합니다
  • 선정 결과 화면: 규칙 평가 엔진이 조건별 통과 여부를 기록하고, 담당자 수정은 변경 사유와 함께 저장합니다
  • 기술문서 출력 화면: 문서 생성 단계가 하나의 선정 결과 스냅샷을 공유해 세 종류 문서의 모델명·사양·리비전이 일치하도록 연결합니다
  • 버전 이력 화면: 버전마다 입력·결과·문서와 기준 규칙·제품 정보의 스냅샷 참조를 저장해 변경 이후에도 과거 근거를 재현합니다
액추에이터 선정·기술문서 의뢰 포털
요구사항 정의

프로젝트 핵심 과제

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

고객사별로 다른 PDF 양식에서 지정 값만 안정적으로 읽기 위한 양식 매핑 정의와 누락 검증 방식 설계

스캔본 PDF는 텍스트 추출이 어려워 별도 OCR 단계가 필요하며

범위를 분리해 협의할 계획

캐드 원본 도면은 변환 경로에 따라 자동 반영 난이도가 달라져 PDF 변환본 기준의 반영 방식 확인

규칙이 바뀐 뒤에도 과거 선정 근거를 재현하기 위한 기준 정보 스냅샷 저장 구조 설계

구현 내용

핵심 기능 상세

핵심 기능 1

의뢰 접수

담당자가 프로젝트와 고객사를 고르고 고객사 PDF·엑셀 자료를 올리면 정해진 값만 불러와 표로 보여 주고, 누락·오류 항목을 표시합니다.

  • ExcelJS와 PDF 텍스트 추출 라이브러리로 양식별 셀·좌표 매핑 규칙 적용
  • 추출 값과 필수 선정 변수를 대조해 누락·형식 오류 항목을 목록으로 표시하는 검증 단계 설계
  • Prisma 모델로 프로젝트·고객사·입력 항목을 연결하고 검색용 인덱스 구성

양식별 매핑 정의를 데이터로 분리해 새 고객사 양식을 코드 수정 없이 추가할 수 있는 구조를 설계합니다.

의뢰 접수
의뢰 접수 실제 화면
핵심 기능 2

선정 결과

사전 정의된 규칙으로 항목별 적합 모델을 고르고, 적용된 조건과 예외(조건 누락·선정 가능 모델 없음)를 근거와 함께 보여 줍니다.

  • 조건식을 데이터로 저장한 규칙 평가기로 항목별 후보 모델과 조건 통과 내역 산출
  • 변경된 입력 항목에 의존하는 규칙만 다시 평가하는 증분 재선정 구조 설계
  • 수동 변경 시 사유 입력을 필수로 두고 선정 이력 테이블에 함께 기록

조건별 통과·미통과 내역을 결과와 함께 저장해 선정 근거를 화면에서 바로 확인하도록 구현합니다.

선정 결과
선정 결과 실제 화면
핵심 기능 3

기술문서 출력

선정리스트를 엑셀·PDF로 출력하고, 선정된 모델과 프로젝트 사양을 기존 데이터시트 양식에 반영한 미리보기를 확인합니다.

  • PDF 양식 위에 값을 얹는 오버레이 방식으로 데이터시트 항목 자동 반영
  • PDF 도면은 지정 영역에 모델명·사양·리비전 문구를 반영하고 캐드 원본은 PDF 변환본을 사용하는 경로로 설계
  • ExcelJS로 선정리스트 시트를 생성하고 프로젝트 문서를 묶음 파일로 내려받는 기능 구현

선정 결과 스냅샷 하나를 모든 문서의 입력으로 삼아 문서 간 모델명·사양·리비전이 어긋나지 않는 구조를 구현합니다.

기술문서 출력
기술문서 출력 실제 화면
핵심 기능 4

버전 이력

같은 프로젝트의 입력 데이터, 선정 결과, 생성 문서를 버전별로 묶어 보관하고, 두 버전을 나란히 비교하며 이전 버전 문서를 다시 내려받습니다.

  • 버전 테이블이 입력 데이터·선정 결과·생성 파일을 한 묶음으로 참조하는 스키마 설계
  • 두 버전의 항목별 값을 비교해 바뀐 항목만 추려 보여 주는 차이 계산 모듈 구현
  • 최신 버전 표시와 이전 버전 읽기 전용 조회 구조 적용

버전별 기준 스냅샷을 함께 저장해 규칙이 바뀐 뒤에도 과거 선정 근거와 문서를 그대로 다시 열 수 있게 설계합니다.

버전 이력
버전 이력 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

선정 변수·양식 분석 및 데이터 모델 설계 · 2026.11

고객사 양식과 선정 변수를 분석하고 프로젝트·입력 항목·버전 테이블 관계를 PostgreSQL로 설계

STEP 2

자료 추출 및 규칙 평가 모듈 개발 · 2026.11

양식별 매핑 기반 값 추출과 조건식 규칙 평가기를 Node.js로 구현, React 접수·선정 결과 화면 개발

STEP 3

문서 생성 및 버전 연결 구현 · 2026.11

엑셀·PDF 출력과 데이터시트·도면 리비전 반영, 버전별 스냅샷 참조 구조 적용

STEP 4

골든 케이스 대조 및 통합 테스트 · 2026.11

기존 선정 결과와 대조하는 시나리오 테스트와 크로스 브라우저 검증 수행

개발 결과

양식별 값 추출 매핑 구조 설계고객사 양식마다 셀·좌표 매핑을 데이터로 정의하고 누락·형식 오류 검증 단계를 연결하는 추출 모듈 설계
증분 재선정 엔진 구현입력 항목 의존 관계를 추적해 바뀐 조건에 걸린 규칙만 다시 평가하고 결과 차이를 표시하는 구조 구현
문서 간 리비전 일치 구조 구축하나의 선정 결과 스냅샷을 데이터시트·외형도·회로도 생성의 공통 입력으로 삼는 연계 구조 구축
버전별 근거 재현 구조 설계버전마다 입력·결과·문서와 기준 스냅샷 참조를 묶어 과거 선정 근거를 그대로 다시 열도록 스키마 설계

기술적 주안점

  • 양식별 매핑 정의를 데이터로 분리해 새 고객사 양식을 코드 수정 없이 추가할 수 있는 구조를 설계합니다
  • 조건별 통과·미통과 내역을 결과와 함께 저장해 선정 근거를 화면에서 바로 확인하도록 구현합니다
  • 선정 결과 스냅샷 하나를 모든 문서의 입력으로 삼아 문서 간 모델명·사양·리비전이 어긋나지 않는 구조를 구현합니다

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

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

프로젝트 문의