Microsoft, AI 에이전트용 시각화 언어 Flint 공개

• Flint는 AI 에이전트가 사람이 편집할 수 있는 짧은 명세로 표현력 있는 차트를 만들도록 돕는 시각화 중간 언어임
• 컴파일러가 데이터와 의미 타입, 차트 유형, 인코딩을 해석해 스케일·축·간격·레이아웃 같은 저수준 설정을 자동으로 채움
• 46개 차트 유형과 83개 갤러리 예제를 제공하며, Vega-Lite, ECharts, Chart.js 렌더링을 지원함
• TypeScript / JavaScript 환경에서는 npm으로 설치할 수 있고, 에이전트 워크플로에서는 MCP 서버를 사용할 수 있음
• 백엔드별 API 차이를 통합 인터페이스 뒤에 숨겨, 같은 명세에서 렌더러 전환이나 차트 설계 변경을 더 쉽게 처리함

Flint가 해결하려는 문제

• Flint는 Microsoft Research 프로젝트로, AI 에이전트가 간단하고 사람이 편집 가능한 차트 명세에서 차트를 생성하도록 설계된 시각화 중간 언어임
• 명세는 데이터, 의미 타입, 차트 명세로 구성됨
  • 예시 명세는 period를 YearMonth, totalUsers를 Quantity, gameType과 region을 Category로 지정함
  • Line Chart에서 region을 column, period를 x, totalUsers를 y, gameType을 color에 바인딩해 지역별 월간 활성 사용자 라인 차트를 만듦
• npm으로 TypeScript / JavaScript 환경에 설치할 수 있음
• 에이전트 워크플로에서는 MCP 서버를 사용할 수 있음
• gallery에서 46개 차트 유형과 83개 예제를 볼 수 있음

명세를 차트로 바꾸는 방식

• Flint는 압축된 명세에서 시작해 Vega-Lite 같은 백엔드 네이티브 명세를 생성하고, 필요한 저수준 세부 설정을 채워 차트를 렌더링함
• 의미 타입은 데이터 필드의 의미를 표현함
  • 예시는 Rank, YearMonth, Delta, Temperature 같은 타입을 포함함
  • Flint는 이를 바탕으로 파싱, 스케일, 축, 포매팅, 색상 체계 같은 차트 설정을 추론함
  • 순 신규 사용자를 게임과 월별로 보여주는 히트맵에서는 시간 값 파서, 축 포매팅, 발산 색상 체계와 중간점을 의미 타입 기반으로 결정함
• 자동 레이아웃 최적화는 탄력적 레이아웃 모델과 banking 원칙을 기반으로 함
  • 컴파일러가 크기, 간격, 배치를 동적으로 관리해 차트가 캔버스에 맞도록 조정함
  • 그룹 막대 차트 수가 늘어나면 캔버스를 늘리고 band width를 줄여 조밀한 버전도 캔버스에 맞춤
• 차트 설계 변경은 차트 유형 전환과 시각 인코딩 재바인딩으로 처리할 수 있음
  • 2000년 미국 인구조사의 성별·연령별 인구 분포 faceted bar chart를 pyramid chart로 바꿀 때, 사용자는 차트 유형만 바꾸고 나머지는 컴파일러가 처리함

렌더링 백엔드와 사용 가능 상태

• Flint는 Vega-Lite, ECharts, Chart.js 전반에서 46개 차트 유형을 지원함
  • 서로 다른 API와 프로그래밍 모델을 통합 인터페이스 뒤에 숨김
  • Vega-Lite에 네이티브 sunburst가 없을 때 ECharts로 전환할 수 있음
  • 지역 × gameType × game 계층 구조 시각화에는 그룹 막대 차트보다 sunburst chart가 더 나은 대안으로 제시됨
• Flint는 오픈소스이며 바로 사용할 수 있음
• 시작 지점으로 GitHub와 갤러리 예제가 제공됨
• Microsoft Research가 IDEAS Lab 및 Renmin University of China와 협력해 Flint를 구축함