CLI로만 쓰던 흙막이 AI 설계 엔진에 시각화 UI를 입혀 비교 효율 3배

AI 기반 흙막이 설계 알고리즘을 자체 개발해 우수한 연구 성과를 보유한 건설 연구기관. 그러나 알고리즘이 CLI(명령줄 인터페이스) 기반이라 소수의 숙련 연구원만 활용할 수 있었고, 파라미터 입력이 복잡하고 오류 원인 파악이 어려워 활용도가 제한적이었다. 연구 성과 확산과 실무 적용을 위해 비전문가도 쓸 수 있는 웹 UI가 시급했다. 토압 계수, 지하수위, 지층 구성, 앵커 간격 등 15개 이상의 전문 파라미터 입력을 사용자 친화적으로 설계하면서 전문가용 고급 설정도 제공하는 이중 구조가 관건이었다. 다수의 시뮬레이션 결과를 비용, 안전성, 시공성 측면에서 동시에 비교 분석하는 기능과 기존 AI 엔진 백엔드와의 안정적인 비동기 연동도 해결해야 했다.

연구원들의 기존 CLI 워크플로우를 분석해 핵심 사용 시나리오 8가지를 정의하고 우선순위를 설정했다. 복잡한 파라미터 입력을 지반 조건, 구조 조건, 시공 조건 등 단계별 위자드로 구성해 입력 부담을 줄이고, 각 파라미터의 설명 툴팁과 유효 범위 검증 로직으로 입력 오류를 사전에 방지했다. 결과물은 D3.js 기반 인터랙티브 차트로 단면도, 변위도, 응력 분포를 직관적으로 파악할 수 있게 시각화했다. AI 엔진과 REST API로 연동해 비동기 시뮬레이션 실행과 진행 상태 실시간 확인이 가능하며, 최대 5개 시뮬레이션 결과를 나란히 비교하는 대시보드를 제공한다. 초기 프로토타입 사용성 테스트로 UI 흐름을 검증하고, 자주 쓰는 파라미터 조합의 프리셋 저장과 PDF 보고서 내보내기 기능도 구현했다.

• 파라미터 입력 위자드, 결과 시각화, 시뮬레이션 비교 UI를 개발해 연구기관에 납품
• 기존 CLI 대비 시뮬레이션 비교 효율 3배 향상, 설계 검토 시간 단축
• 비전문가도 위자드를 따라 사용할 수 있어 AI 설계 알고리즘의 활용 범위 확대
• 더 많은 설계 대안을 빠르게 탐색해 최적안 도출 가능
• 연구기관 내 유사 연구 도구 UI 개발의 레퍼런스 사례로 활용

React 기반 파라미터 입력 위자드, D3.js 결과 시각화, 최대 5개 시뮬레이션 비교 대시보드, PDF 보고서 내보내기 기능. AI 엔진 REST API 연동 포함.