LLM Wiki

Flint, 시맨틱 스펙으로 차트를 만드는 AI 시대의 시각화 언어

Properties2
descriptionFlint는 데이터 의미와 차트 의도를 분리한 중간 언어로, 하나의 입력을 여러 차트 백엔드의 네이티브 스펙으로 컴파일한다.
tagsdev-tools, ai-agents, typescript, open-source, microsoft

5 min read

개요

Flint는 AI 에이전트가 간결하고 사람이 수정할 수 있는 차트 스펙을 작성하도록 설계된 시각화 중간 언어다. 게시글은 Flint가 데이터 필드의 의미와 차트 의도를 입력받아 축, 색상, 포맷, 크기, 레이아웃 같은 저수준 결정을 컴파일러가 유도하는 방식으로 설명한다. 입력은 원시 데이터, semantic_types, chart_spec으로 구성되며 같은 입력을 Vega-Lite, ECharts, Chart.js의 네이티브 스펙으로 변환할 수 있다. Flint는 Microsoft Research와 Renmin University IDEAS Lab이 개발한 MIT 라이선스 오픈소스로 소개되며, JavaScript/TypeScript 라이브러리와 에이전트용 MCP 서버를 제공한다.

핵심 포인트

  • 저장 형식과 의미가 어긋나는 시각화 문제를 다룬다. 예를 들어 202001을 단순한 정수가 아닌 YearMonth로 해석하고, 온도·비율 같은 비가산 측정값의 누적이나 음수·양수 필드의 단방향 색상 매핑을 피하도록 설계한다.
  • dataSpec은 semantic_types로 필드의 의미를 설명하고, chartSpec은 chart_spec으로 차트 종류와 채널 바인딩을 지정한다. 데이터 의미를 한 번 정한 뒤 차트 종류와 인코딩만 바꿔 여러 시각화를 탐색할 수 있다.
  • 컴파일러는 프론트엔드, 옵티마이저, 코드 생성기의 3단계로 구성된다. 프론트엔드는 채널별 시맨틱을 해석하고, 옵티마이저는 캔버스 크기와 축 카디널리티를 고려해 레이아웃을 계산하며, 백엔드별 생성기가 Vega-Lite·ECharts·Chart.js 스펙을 만든다.
  • 자동 레이아웃에서 공간이 부족하면 차트를 조용히 망가뜨리기보다 데이터를 필터링하고 ChartWarning 메타데이터를 붙이는 방식을 취한다. Named View는 전체 스펙을 다시 쓰지 않고 축 뒤집기, 채널 교환, 계열의 패싯 이동, 형제 차트 타입 전환을 상태 ID로 표현한다.
  • 70종 이상의 시맨틱 타입과 30종 이상의 차트 타입이 소개된다. Price, Amount, Temperature, Correlation, Rank처럼 구체적인 타입을 지정하면 포맷, 기준선, 색상 스킴, 도메인, 축 방향 같은 기본값이 달라진다.
  • flint-chart-mcp는 create_chart_view, validate_chart, render_chart, compile_chart, list_chart_types의 다섯 도구를 제공하는 것으로 설명된다. 렌더링은 로컬 인프로세스로 수행하며, 원격 URL을 가져오지 않고 로컬 파일 참조 비활성화, 백엔드 제한, 행·파일·캔버스 크기 상한 같은 설정을 제공한다.

왜 중요한가

LLM이 Vega-Lite나 ECharts의 긴 저수준 설정을 직접 만들면 필드 하나를 교체하거나 차트 형태를 바꿀 때 전체 스펙의 일관성을 다시 맞춰야 한다. Flint는 에이전트가 의미와 의도 수준의 ChartAssemblyInput을 작성하고, 호스트 제품이 데이터 변환·검증·정책·상태를 관리하며, 컴파일러가 백엔드별 스펙을 생성하는 식으로 책임을 나눈다. 따라서 차트 생성의 정본을 특정 렌더러 스펙이 아니라 백엔드 중립적인 입력에 둘 수 있다는 점이 게시글의 핵심 설계 포인트다.

후속으로 볼 링크와 키워드

백링크