질문 하나로 화면이 조립되는 생성형 UI
업무 질문을 하면 답이 문장이 아니라 컴포넌트로 옵니다. 조회 폼 · 데이터그리드 · 차트 · 입력 폼이 질문에 맞춰 골라지고 크기까지 정해진 채로 배치됩니다. 같은 엔진 위에 세 가지 표현 방식을 올려 비교할 수 있게 만든 데모입니다.
동작 구조
질문
업무 자연어 입력
규칙 기반 라우터
인텐트 매칭 + 슬롯 추출
UISpec
블록 타입·크기·데이터소스
목업 API
faker 시드 고정 데이터
세 화면은 모두 /api/chat 이 NDJSON 으로 흘려보내는 동일한 UISpec 을 소비합니다. 다른 것은 “받은 블록을 어떻게 배치하고 상호작용시키는가” 뿐입니다.
3가지 샘플 화면
지원 컴포넌트
지표 카드
kpi · 1×1
데이터 그리드
dataGrid · 3×2
차트
chart · 2×2
조회 폼
filterForm · 1×2
입력 폼
entryForm · 2×2
타임라인
timeline · 1×3
결재 카드
approvalList · 1×2
진척 리스트
progressList · 1×2
선로도
lineGraph · 3×2
상황판 요약
statusSummary · 2×1
설비 집계
statusEquipment · 1×2
이용자 · 작업고장
statusUsers · 1×1
상황판 피벗 표
statusPivot · 2×2
GIS 알람 패널
gisAlarmPanel · 1×2
GIS 망 지표
gisNetworkKpi · 2×1
GIS 전국 지도
gisNationMap · 1×1
GIS 자치구 지도
gisDistrictMap · 2×2
텍스트
note · 1×1
기본 크기는 3×3 캔버스 기준이며, 캔버스가 부족하면 자동으로 축소되거나 다음 캔버스로 넘어갑니다.
동작하는 질문 목록
이번 분기 매출 현황 보여줘
sales.overview → 지표 3 + 추이 차트 + 지역 진척 + 그리드
지난달 미납 주문 조회해줘
orders.search → 조회 폼 + 지표 2 + 그리드
지역별 매출 추이 보여줘
sales.byRegion → 가로 막대 + 라인 + 도넛 + 진척
재고 부족 품목 보여줘
inventory.low → 지표 2 + 막대 차트 + 그리드
GIS 감시 지도 보여줘
access.gisMonitor → 알람 패널 + 망 지표 + 자치구 지도 + 전국 지도 (4블록 연동)
GIS 자치구 지도만 보여줘
access.gisMonitor → 자치구 지도 1블록 (나머지 3블록은 카드의 "관련" 에서)
Access군 시스템 상황판 보여줘
access.statusBoard → 요약 + 설비 집계 + 피벗 표 + 이용자/작업고장 (4블록 연동)
E2E 선로 조회해줘
network.e2e → 선로도(국사·장비·구간 편집) + 회선 목록
휴가 신청서 작성해줘
hr.leaveRequest → 입력 폼 + 결재선 + 안내 + 결재 카드
결재 대기 목록 보여줘
approval.pending → 결재 카드 + 지표 2 + 그리드
이번 주 미처리 문의 보여줘
support.tickets → 지표 2 + 도넛 + 막대 + 그리드
영업1팀 직원 목록 보여줘
hr.employee → 지표 + 막대 + 조회 폼 + 그리드
라우터는 키워드 가중치와 정규식만 사용하므로 API 키 없이 100% 결정적으로 재현됩니다. 데이터는faker.seed(20260903)으로 고정되어 매번 같은 값이 나옵니다.