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

01 / THE CHALLENGE

문제의 출발점.

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

02 / THE APPROACH

업무의 맥락부터, 설계에 담았습니다.

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

03 / THE PROCESS

작은 검증을 쌓아, 작동하는 시스템으로.

1. 01

   기존 CLI 워크플로우 분석과 핵심 시나리오 8가지 정의

2. 02

   지반·구조·시공 조건 단계별 파라미터 입력 위자드 설계

3. 03

   툴팁·유효 범위 검증 로직으로 입력 오류 방지 구현

4. 04

   D3.js 기반 단면도·변위도·응력 분포 시각화 개발

5. 05

   AI 엔진 REST API 비동기 연동과 다중 시뮬레이션 비교 대시보드 구축

6. 06

   프로토타입 사용성 테스트와 프리셋·PDF 내보내기 기능 반영

04 / THE OUTCOME

숫자와 업무 방식에 남은 결과.

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

05 / THE HANDOVER

인도 이후에도, 팀의 자산으로.

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