AI 에이전트용 시각화 중간 언어 Flint를 공개했다

AI에게 데이터 시각화를 시키면 축 이름이 서로 겹치거나 레이아웃이 어긋나 결국 사람이 코드를 일일이 수정해야 하는 경우가 많다. 이런 번거로움을 해결하려고 Microsoft Research가 IDEAS Lab, Renmin University of China와 협력해 시각화 중간 언어 Flint를 내놓았다. Flint는 AI 에이전트가 사람이 직접 편집할 수 있는 짧은 명세로 표현력이 풍부한 차트를 생성하도록 돕는 도구다. AI가 복잡한 전체 코드를 한 번에 짜는 대신, 사람이 읽고 고치기 쉬운 핵심 설정값 위주로 소통하게 만들어 수정 작업의 피로도를 낮춘 것이 특징이다.

실제 개발 환경에 적용하는 방법은 사용 목적에 따라 두 가지 경로로 나뉜다. TypeScript나 JavaScript 환경을 사용하는 개발자는 npm(자바스크립트 패키지 관리 도구)을 통해 패키지를 설치해 즉시 사용할 수 있다. 개별 개발 도구를 넘어 AI 에이전트의 자동화된 작업 흐름 속에 시각화 기능을 통합하고 싶다면 MCP(모델 컨텍스트 프로토콜, AI 모델과 외부 도구를 연결하는 표준) 서버를 활용하는 방식을 쓴다.

이를 통해 AI 에이전트가 생성한 결과물을 사람이 빠르게 검토하고 세밀하게 조정할 수 있다. 단순한 코드 생성을 넘어 사람이 편집 가능한 명세라는 중간 단계를 둠으로써, AI의 생성 능력과 사람의 세밀한 편집 능력을 동시에 활용해 완성도 높은 차트를 만든다.

기술이 실제로 작동하는 방식

Flint는 컴파일러(코드를 실행 가능한 형태로 바꾸는 프로그램)가 데이터의 의미 타입을 해석해 저수준 설정을 자동으로 채운다. Rank, YearMonth, Delta, Temperature 같은 의미 타입은 데이터 필드가 구체적으로 무엇을 뜻하는지 정의한 값이다. 컴파일러는 데이터와 의미 타입, 차트 유형, 인코딩(데이터를 시각적 요소로 변환하는 규칙)을 종합적으로 해석해 스케일, 축, 간격, 레이아웃 같은 세부 설정을 자동으로 결정한다. 데이터 파싱(데이터를 분석해 의미 있는 단위로 나누는 과정)과 포매팅, 색상 체계까지 스스로 추론해 적용하므로 사람이 일일이 좌표와 색상을 지정할 필요가 없다.

차트를 실제로 화면에 그려내는 도구인 렌더링 백엔드 Vega-Lite, ECharts, Chart.js를 모두 지원하며 통합 인터페이스를 제공한다. 각 도구마다 서로 다른 API(소프트웨어 간 소통 규칙)의 차이를 인터페이스 뒤로 숨겨, 사용자는 동일한 명세만으로 렌더러를 바꾸거나 차트 설계를 변경할 수 있다. 예를 들어 Vega-Lite에 네이티브 sunburst(원형 계층 구조 차트) 기능이 없을 때, 명세를 새로 짤 필요 없이 ECharts로 즉시 전환해 구현하는 방식이다.

46개의 차트 유형과 83개의 갤러리 예제를 제공하는 오픈소스

Flint는 46개의 차트 유형과 83개의 갤러리 예제를 미리 준비해 사용자의 수고를 덜어냈다. 누구나 바로 가져다 쓸 수 있도록 GitHub(소프트웨어 소스 코드를 저장하고 공유하는 플랫폼)에 오픈소스로 공개한 상태다. 사용자는 제공되는 갤러리 예제들을 살펴보며 자신의 데이터에 가장 적합한 시각화 방식을 빠르게 선택하고 작업의 시작 지점을 잡을 수 있다.

차트 내용이 늘어날 때마다 레이아웃이 깨지는 문제는 탄력적 레이아웃 모델과 banking 원칙(요소 간의 공간 배분을 효율적으로 관리하는 규칙)을 통해 해결한다. 컴파일러가 차트의 크기와 간격, 배치를 동적으로 관리해 캔버스 크기에 딱 맞도록 조정하는 방식이다. 그룹 막대 차트의 개수가 갑자기 늘어나면 캔버스 전체 크기를 늘리거나 막대 너비인 band width를 줄여 조밀한 버전으로 맞춤 조정한다. 데이터의 양이 변해도 컴파일러가 실시간으로 최적의 배치를 계산해 시각적 완성도를 유지한다.

이제 특정 렌더링 도구에 종속되지 않고 동일한 명세로 차트를 생성하고 교체할 수 있는 유연성을 확보했다. 83개의 갤러리 예제를 통해 내 데이터에 맞는 최적의 명세를 적용해 보자.