Skip to main content

AI 앱 빌더

CSV 데이터를 활용해 웹 애플리케이션과 데이터 시각화를 자동으로 생성하는 노드입니다.

설명​

AI 앱 빌더 노드는 업로드된 CSV(또는 입력 데이터셋)를 바탕으로 HTML, CSS, JavaScript로 이루어진 대화형 웹 앱과 차트 시각화를 생성합니다.

데이터 전처리 노드처럼 한 번 실행으로 끝나는 1회성 동작이 아닙니다. 노드에서 샌드박스 편집을 열면, 그 안에서 채팅 형태로 AI와 대화하면서 "이렇게 바꿔줘", "필터 추가해줘"처럼 요청을 주고받을 수 있고, AI가 그에 맞게 코드를 생성·수정해 줍니다. 앱 빌더는 편집 화면 안의 채팅을 통해 생성된 웹 앱(HTML/CSS/JS)을 단계적으로 다듬을 수 있습니다.

생성되는 앱은 다음을 만족합니다.

  • 시각화 필수: 최소 하나의 차트가 포함되며, <canvas> 위에 렌더링됩니다. 표만 있는 결과는 허용되지 않습니다.
  • Chart.js 사용: 차트는 Chart.js를 사용하며, 메인 차트는 <canvas id="mainChart"> 하나를 공유해 한 번만 생성하고, 이벤트 핸들러 안에서 매번 new Chart()를 호출하지 않습니다.
  • 샌드박스 API 사용: 실행 환경은 샌드박스와 동일한 JS API를 제공합니다. 데이터는 getAllDataset, getDataset으로 가져오고, 필요 시 getUserInfo, sendDataToOutput 등을 사용할 수 있습니다.
  • 반복 실행 대비: 같은 스크립트가 여러 번 실행될 수 있으므로, 이벤트 리스너 중복 등록 없이 동작하고, 차트는 기존 인스턴스를 제거한 뒤 다시 만드는 방식으로 동작합니다.

포트 구성​

입력 포트​

  • 데이터셋: 시각화·앱에 사용할 데이터(CSV 등). 한 개의 CSV/데이터셋이 노드에 연결됩니다.

출력 포트​

  • 데이터셋

속성​

프롬프트 요청​

처음 앱을 생성할 때 AI에게 전달할 자연어 요청을 입력합니다.

예: "월별 매출 막대 차트와 지점별 필터를 넣어줘", "이 데이터로 파이 차트를 만들어줘"

모델 선택​

앱 생성·수정 시 사용할 AI 모델을 선택합니다.

  • gpt-4o
  • gpt-5

프롬프트 표시​

노드 UI에 프롬프트(사용자 요청)를 노출할지 여부를 설정하는 토글입니다.

  • 켜짐: 노드에서 프롬프트가 보입니다
  • 꺼짐: 노드에서 프롬프트가 보이지 않습니다

사용 방법​

  1. 노드를 캔버스에 추가합니다.
  2. 시각화에 사용할 데이터셋(CSV 등)을 입력 포트에 연결합니다.
  3. 노드 안에서 프롬프트를 입력합니다. (원하는 앱/시각화에 대한 요청을 자연어로 작성)
  4. 반영된 결과를 확인합니다.
  5. 결과를 수정하고 싶을 때는 노드를 우클릭한 뒤 샌드박스 편집을 누르고, 열린 편집 화면 안의 채팅창에서 수정 사항을 입력합니다. AI가 코드를 수정해 주며, 필요하면 대화를 이어가며 반복 수정할 수 있습니다.
  6. 완료 후 편집을 닫고, 캔버스에서 노드를 실행해 워크플로우 안에서 앱 동작을 확인합니다.

참고​

  • 샌드박스에서 사용하는 JS API(getDataset, getAllDataset, getUserInfo, sendDataToOutput 등)는 AI 앱 빌더로 생성된 앱에서도 동일하게 사용할 수 있습니다.
  • 데이터 전처리처럼 "한 번 실행하면 끝"이 아니라, 편집 → 채팅으로 수정 → 반복하는 워크플로우입니다.