이제 Cursor는 정보를 시각적으로 표현하는 캔버스를 만들어 응답할 수 있습니다. 이를 통해 이해하기 어려울 수 있는 채팅이나 Markdown 파일의 장문 텍스트를 읽는 대신, 맞춤형 인터페이스를 살펴보고 상호작용할 수 있습니다.

캔버스를 사용하면 에이전트는 실제 데이터를 보여주는 대시보드뿐 아니라, 요청에 맞는 로직과 상호작용을 갖춘 맞춤형 인터페이스도 만들 수 있습니다. 에이전트는 이를 활용해 PR 검토, 새로운 라이브러리 학습, 심지어 Cursor에서 다른 에이전트를 관리하는 일까지 도와줄 수 있습니다. Agents Window에서 캔버스는 터미널, 브라우저, 소스 제어 같은 다른 도구와 함께 유지되는 지속형 아티팩트입니다.

#빌딩 블록으로 쓰이는 컴포넌트

Cursor는 표, 박스, 다이어그램, 차트 같은 기본 제공 컴포넌트를 갖춘 React 기반 UI 라이브러리로 캔버스를 렌더링합니다. 또한 에이전트가 diff와 할 일 목록처럼 Cursor에 이미 있는 컴포넌트에 접근할 수 있게 했고, 데이터 시각화 권장 사항도 따르도록 했습니다.

에이전트가 다양한 종류의 캔버스를 만드는 방법을 익히도록 스킬을 만들 수 있습니다. 예를 들어 Docs Canvas 스킬을 사용하면 Cursor가 repo의 대화형 아키텍처 다이어그램을 생성할 수 있습니다.

#Cursor에서 캔버스를 활용하는 방법

저희는 캔버스가 데이터 집약적인 작업에 특히 유용하다는 점을 확인했습니다. 캔버스를 사용하면 에이전트가 일반 텍스트보다 더 비선형적이고 훨씬 더 이해하기 쉬운 방식으로 정보를 정리할 수 있습니다.

#인시던트 대응 대시보드

Cursor의 Datadog, Databricks, Sentry MCP 덕분에 에이전트로 관측성 데이터를 더 깊이 들여다볼 수 있게 되었고, 그 과정에서 우리가 직접 살펴봤다면 놓쳤을 법한 인사이트를 에이전트가 찾아내곤 했습니다. 캔버스가 도입되기 전에는 에이전트가 시계열 데이터를 Markdown 표로 표현했는데, 이를 해석하기가 어려웠고 시각화하려면 추가 단계가 필요했습니다.

이제 에이전트는 캔버스에서 시각화를 만들어 로컬 디버그 파일을 포함한 여러 소스의 데이터를 하나의 차트로 결합할 수 있습니다.

#PR 검토 인터페이스

이전보다 훨씬 더 큰 diff를 검토하고 있습니다. 기존 도구는 모든 변경 사항을 똑같은 비중으로 보여주기 때문에, diff에서 어떤 부분이 가장 중요한지 직접 가려내야 합니다.

캔버스를 사용하면 Cursor가 관련 변경 사항을 논리적으로 묶고, 먼저 검토해야 할 핵심 부분의 우선순위를 정해 주며, 변경 집합을 더 풍부한 인터페이스에서 살펴볼 수 있게 해줍니다. 까다로운 알고리즘은 의사코드로 표현해 주기도 합니다.

#Eval 분석

Cursor에서는 하네스를 변경하고 제품에 새 모델을 출시할 때 eval 결과를 분석하는 데 많은 시간을 들입니다. 이전에는 엔지니어가 패턴을 식별하기 위해 요청 ID를 하나씩 확인해야 했습니다. 이 과정을 자동화하기 위해 Web 앱을 만들고 배포하는 방안도 검토했지만, 대신 Cursor에서 스킬로 직접 운영할 수 있게 했습니다.

이 스킬을 통해 에이전트는 eval의 모든 롤아웃을 읽고, 실패를 그룹화하고, eval 실패를 조사하며 실패 모드를 군집화할 수 있는 캔버스를 만들 수 있습니다. 그 결과 이전에는 숨겨져 있던 하네스 bug를 식별할 수 있었고, 최근에는 훨씬 적은 노력으로 Cursor에 새 모델 두 개를 출시하는 데 도움이 되었습니다.

#Autoresearch 실험

저희는 autoresearch의 아이디어를 바탕으로, 에이전트가 클라이언트 성능과 관련된 복잡한 최적화 과제를 다룰 수 있도록 하고 있습니다. 캔버스를 사용하면 에이전트가 실험을 진행하는 동안 조사 진행 상황을 시각화할 수 있어, 사용자는 진행 상황을 확인하고 에이전트가 현재 Testing 중인 가설도 볼 수 있습니다.

#정보 대역폭 높이기

Design Mode와 개선된 음성 입력 같은 최근 개선 사항은 모두 정보 대역폭을 높이기 위한 노력의 일환입니다. 저희는 사람과 에이전트의 협업에서 마찰을 줄이고, 단순한 텍스트를 넘어 의도를 더 쉽게 표현할 수 있도록 돕고자 합니다.

Cursor 3.1에서 캔버스를 사용해 보거나, 문서에서 자세히 알아보세요.