Flint-interactive로 대화형 데이터 시각화를 만들 수 있다

Flint-interactive는 AI 에이전트가 사용자가 직접 탐색할 수 있는 대화형 데이터 시각화를 만들도록 돕는 언어다. 차트에서 클릭·필터링·확대·강조를 하거나 차트끼리 연결할 수 있으며, 대시보드와 데이터 스토리에도 활용할 수 있다.

AI 에이전트는 데이터를 분석하고 시각화를 포함한 보고서를 만드는 데 유용하지만, 사용자가 데이터를 더 깊이 탐색하려면 정적인 차트만으로는 부족하다. 차트를 확대해 세부 내용을 보거나 여러 차트의 데이터를 비교하고, 차트에서 선택한 항목과 관련된 문서의 텍스트를 강조하는 상호작용이 필요할 수 있다. 사용자는 채팅에서 차트를 직접 조작하고 선택한 내용을 바탕으로 후속 질문을 하길 원할 수 있고, 개발자는 고객이 데이터를 살펴보고 이해하도록 에이전트가 대화형 시각화를 생성하게 할 수 있다.

이런 시각화를 만드는 일은 여전히 비용과 신뢰성 면에서 어렵다. 에이전트가 한 번의 요청으로 만족스러운 결과를 내는 경우는 드물어 추론과 코딩, 디버깅을 반복하는 데 토큰과 시간이 든다. 상호작용이 복잡한 차트는 레이아웃이나 기능이 쉽게 깨질 수 있고, 이를 고치는 과정에서 다른 문제가 생길 수도 있다. 일부 시각화 라이브러리에 내장된 상호작용 기능만으로는 맞춤형 차트를 충분히 표현하기 어렵다. Flint-interactive는 시각적 상호작용을 지정할 수 있는 표현력 있는 고수준 언어가 부족하다는 점을 해결하려 한다.

Flint-interactive의 작동 방식

Flint-interactive는 Flint를 기반으로 대화형 데이터 시각화를 만드는 언어다. 컴파일러가 사용자의 상호작용을 선택의 의미를 담은 시맨틱 이벤트(semantic event)로 바꾸고, 고수준 연산자를 적용해 시각화를 갱신한다. 개발자나 에이전트는 시각적 요소 사이의 복잡한 의존성을 직접 처리하는 대신, 원하는 상호작용을 고수준 명세로 표현할 수 있다.

Flint Canvas는 캔버스에서 일어나는 사용자 상호작용을 추적하고 시각적 렌더링 상태를 관리하는 상태 머신이다. Flint는 시각적 로직과 상호작용 로직을 분리한다. 시각적 로직은 컴파일러가 관리하고, 상호작용 로직은 사용자가 의미 수준에서 지정한다.

• 시각적 로직: 컴파일러는 클릭·드래그·키 입력 같은 원시 트리거를 차트 요소와 데이터를 식별하는 시맨틱 이벤트로 변환한다. 업데이트 연산자도 캔버스에 렌더링되는 변화로 바꾸며, 히트 테스트와 저수준 시각적 업데이트를 처리한다.
• 상호작용 로직: 사용자는 시맨틱 이벤트를 차트 업데이트 연산자에 연결한다. 예를 들어 set style로 데이터를 강조하고, set annotation으로 점에 설명을 붙이며, set viewport로 화면을 이동하거나 확대·축소할 수 있다. 같은 이벤트를 이용해 외부 표와 위젯, 애플리케이션 상태도 갱신할 수 있다.

이렇게 역할을 나누면 사용자는 렌더링 로직을 역으로 파악하거나 렌더러별 표시 요소를 직접 조작하지 않아도 된다. 이벤트 생성과 시각적 업데이트가 조합 가능하므로 차트와 표, 텍스트, 다른 차트, 위젯을 연결해 대화형 스토리와 대시보드를 만들 수 있다.

사용 방법

• 채팅에서 Flint 사용: Flint-MCP와 MCP Apps를 통해 채팅이나 캔버스 환경에서 Flint Interactive를 사용할 수 있다. MCP 설정 안내를 따라 설정한 뒤, 에이전트에게 차트에 담을 내용과 원하는 상호작용을 알려주면 된다. 최신 릴리스에서는 에이전트가 Flint 차트 명세와 함께 interaction_spec을 생성하고 대화 안에 대화형 차트를 표시할 수 있다. 사용자는 차트에서 항목을 선택해 그 맥락을 후속 대화에 전달할 수도 있다.
• Flint로 대화형 앱 만들기: Flint Interactive Canvas를 이용해 대시보드나 데이터 스토리, 다른 애플리케이션에 대화형 차트를 추가할 수 있다. 앱은 Flint Canvas가 내보내는 시맨틱 이벤트를 이벤트 핸들러로 처리해 표를 필터링하거나 다른 차트를 갱신하고 애플리케이션 상태를 바꿀 수 있다. 앱의 위젯이 차트 갱신 방식을 제어하게 하려면 업데이트 연산자를 Flint Canvas에 보낸다. 프로그래밍 API를 사용할 수 있다.
• 맞춤형 상호작용 만들기: 기본 제공 상호작용을 넘어서는 동작은 프로그래밍 API에서 트리거와 사용자 정의 핸들 함수를 지정해 구현한다. 핸들 함수는 시맨틱 이벤트를 맞춤형 차트 업데이트 순서에 연결한다. 예를 들어 국가를 클릭하면 해당 국가를 강조하고 이름을 표시할 수 있다. 이 동작은 렌더러별 표시 요소를 직접 조작하지 않고 set style과 set annotation을 함께 사용한다.

기본 상호작용 사례로는 한 시각화에서 사용자가 선택한 국가 집단을 다른 차트에서 강조하는 linked-brush가 있다. 또 다른 예에서는 표의 항목을 클릭해 차트의 점을 강조하고, 반대로 차트에서 선택한 점에 따라 표를 조작할 수 있다. DimpVis 사례에서는 사용자가 시간 경로를 따라 점을 드래그해 여러 도시의 기온과 강수량 변화를 살펴본다.

차트 사용자라면 채팅에서 Flint 설정하기를 참고해 에이전트에게 대화형 차트를 요청할 수 있다. 앱 개발자는 프로그래밍 API로 대시보드와 데이터 스토리, 연결된 뷰를 만들 수 있다. 상호작용 설계자는 맞춤형 상호작용 예제를 살펴보고 새 상호작용을 설계해 재사용 가능한 기본 동작으로 만들 수 있다.