Microsoft Flint-interactive, AI 차트를 클릭하고 연결하는 시각화 기술

마이크로소프트 리서치가 10월 22일 Flint-interactive를 소개했다. AI가 만든 차트에서 원하는 구간을 선택하거나, 한 차트의 선택을 다른 차트와 표에 연결하는 기술이다. 기존 시각화 언어 Flint에 상호작용을 기술하는 방식을 더해, AI 에이전트가 독자가 직접 탐색할 수 있는 보고서와 대시보드를 만들도록 돕는다. 공식 저장소에는 10월 19일 Flint 1.0의 새 기능으로 기록돼 있다. 공식 소개 · 프로젝트와 업데이트

공식 예시 화면에는 독일이 검은 윤곽으로 선택돼 있고, 아래에는 Germany라는 이름과 기온 변화가 함께 표시돼 있다. 지구본에서 관심 있는 국가를 골라 상세 정보로 이어가는 구성을 보여준다.

차트를 보고 다시 질문하는 대신 직접 선택한다

Flint는 대화형 AI 모델이 아니라, 데이터와 차트의 형태를 적은 명세를 실제 그림으로 바꾸는 시각화 도구다. AI가 “월별 매출을 선그래프로 보여달라”는 요청을 해석해 명세를 쓰면 Flint가 이를 그린다. 여기에 Flint-interactive를 사용하면 클릭한 항목을 강조하거나, 범위를 드래그해 선택하고 확대하는 동작까지 지정할 수 있다. Flint의 구성 · 상호작용 명세

예를 들어 매장별 매출과 반품률을 함께 보는 대시보드라면, 매출 차트에서 고른 매장을 반품률 차트에서도 강조하도록 만들 수 있다. 표의 행을 눌러 해당 점을 찾거나, 특정 기간만 골라 상세 데이터를 살펴보는 구성도 가능하다. 보고서를 만든 사람이 처음 정한 화면에서 독자가 관심 있는 부분으로 탐색을 이어가는 것이다. 이는 공식 문서의 차트 연결과 외부 표 연동 방식을 매장 분석에 적용한 활용 예다. 화면 간 연결 방식

클릭 좌표를 데이터의 의미로 바꾸는 원리

보통 차트에 동작을 붙이려면 개발자가 어느 점을 눌렀는지 알아내고, 그 점이 어떤 데이터인지 찾아 화면을 다시 그리는 코드를 작성해야 한다. Flint는 이 과정에서 화면을 그리는 일과 선택 뒤 무엇을 할지 정하는 일을 나눈다. 컴파일러가 클릭·드래그를 데이터 항목과 연결하고, 앱은 전달받은 항목에 강조나 주석 같은 갱신 명령을 지정한다. 컴파일러는 간결한 명세를 차트 라이브러리가 실행할 구체적인 설정으로 번역하는 부분이다. 의미 기반 이벤트와 화면 갱신

예를 들어 ‘독일’에 해당하는 점을 누르면 앱은 복잡한 그림 내부의 도형 번호 대신 국가 정보를 받는다. 앱은 그 국가를 강조하고 이름을 붙이도록 요청할 수 있다. 표에서 국가를 선택했을 때 같은 갱신을 보내는 것도 가능하다. 이 연결을 앱이 한 번 구현하면, 독자가 클릭할 때마다 AI에 새 코드를 작성해달라고 할 필요 없이 정해진 동작이 실행된다.

자주 쓰는 동작은 프리셋으로 준비돼 있다. 클릭 강조, 범례를 눌러 계열 숨기기, 구간 선택, 차트 간 선택 연결 등을 명세에 추가하는 방식이다. 더 복잡한 반응은 개발자가 맞춤 함수를 작성한다. 지원하지 않는 동작은 경고와 함께 제외될 수 있으므로, 차트가 그려졌는지와 요청한 상호작용이 작동하는지는 각각 확인해야 한다. 프리셋과 지원 조건

여러 차트로 출력하는 것과 상호작용 지원은 다르다

Flint 전체는 Vega-Lite, ECharts, Chart.js, Plotly와 Excel 차트 등 여러 출력 방식을 지원한다. 그러나 현재 상호작용 문서는 Flint의 상호작용 프리셋이 Vega-Lite 화면에서 동작한다고 명시한다. 다른 방식으로 출력하면 정적인 차트가 되고 상호작용을 무시했다는 경고가 나올 수 있다. PNG나 SVG 파일로 저장한 결과에도 클릭 동작이 그대로 따라가는 것은 아니다. 출력 방식 · 현재 지원 범위

기대 효과는 AI가 낮은 수준의 화면 코드를 반복해서 고치느라 쓰는 시간과 노력을 줄이는 데 있다. 다만 10월 22일 소개에는 이번 상호작용 기능이 오류나 생성 비용을 몇 퍼센트 줄였는지 비교한 수치가 제시되지 않았다. 따라서 기능의 구조와 공개 예시는 확인할 수 있어도, 모든 대시보드에서 개발 속도가 같은 비율로 빨라진다고 해석할 근거는 없다. 개발 목표와 설명

지금 사용하려면 무엇이 필요한가?

코드는 MIT 라이선스로 공개돼 있다. 개발자는 flint-chart 라이브러리를 웹앱에 넣거나, Flint MCP 서버를 지원하는 AI 도구에 연결해 사용할 수 있다. MCP는 AI 도구가 외부 기능을 호출하는 연결 규격이다. 로컬 서버 방식은 Node.js와 npm, 해당 서버를 실행할 수 있는 MCP 클라이언트가 필요하다. 대화 안에서 조작 가능한 차트를 보려면 클라이언트의 MCP Apps 지원도 확인해야 한다. 공개 코드와 라이선스 · 설치와 실행 조건

로컬 렌더링은 차트를 그리기 위해 원자료를 별도 원격 렌더링 서비스에 올리지 않는다. 다만 함께 사용하는 AI 서비스가 어떤 데이터를 받는지는 그 서비스의 연결 방식에 달려 있다. 원격 HTTP 방식의 공개 MCP 서버도 안내되며, 이 경로는 도구 호출에 포함한 데이터를 서버로 보낸다. 자료의 위치에 맞춰 실행 방식을 고를 수 있다. 로컬·원격 실행의 차이

Flint가 맡는 일은 준비된 데이터를 차트로 표현하는 것이다. 서로 다른 표를 합치거나 집계하고 계산하는 작업은 먼저 처리해야 한다. 매출의 통화와 기간을 맞추지 않은 채 차트만 그리면 상호작용이 정확해도 해석은 틀릴 수 있다. 실제 업무에서는 원자료와 계산을 확인한 뒤, 독자가 어떤 항목을 선택하고 무엇을 비교해야 하는지부터 정해 연결하는 도구로 활용할 수 있다. 데이터 준비 범위