How to build interactive experiences with canvases

개요

GitHub Copilot 앱의 캔버스(Canvases)는 개발자와 AI 에이전트가 실시간으로 협업할 수 있는 공유되고 상호작용 가능한 인터페이스를 제공하여, 복잡한 작업을 시각화하고 정보 탐색 및 실행을 지원한다.

주요 내용

* 캔버스란? GitHub Copilot 앱의 확장 기능으로, AI 에이전트가 작업을 수행하며 실시간으로 업데이트하고 사용자는 클릭, 편집 등을 통해 직접 상호작용할 수 있는 시각적 작업 공간이다.
* 캔버스 생성 방법: GitHub Copilot 앱의 에이전트 세션에서 /create-canvas 명령어를 사용하고 원하는 기능과 지원 역량을 설명하여 생성한다.
* 캔버스 활용 사례:
* 이슈 트리아지 도우미 (Issue triage helper): GitHub 이슈를 카드 형식으로 빠르게 훑어보고 오른쪽으로 스와이프하여 승인, 왼쪽으로 스와이프하여 거절하는 인터페이스를 제공한다.
* 인터랙티브 코드베이스 다이어그램 (Interactive codebase diagram): 프로젝트의 구조와 구성 요소 간의 관계를 시각화하는 동적 다이어그램을 생성하며, 각 노드는 시스템의 다른 부분을 나타내고 호버, 드래그, 필터링을 통해 탐색할 수 있다.
* 세션 워크트리 뷰 (Sessions worktree view): 활성화된 GitHub Copilot 앱 세션과 연결된 git worktree를 시각화하고, 활성 상태와 오래된 상태를 명확하게 표시하며 필요시 쉽게 정리할 수 있는 기능을 제공한다.
* 에이전트 프롬프트 코치 (Agent prompt coach): 이전 상호작용을 검토하고 철자 오류, 구문 오류 등을 지적하며 더 명확하고 효과적인 프롬프트 사용 방법을 제안하여 프롬프트 품질을 개선한다.
* 지식 검색기 (Knowledge finder): Slack, Teams, 이메일, 문서를 검색하여 특정 파일이나 주제에 대한 컨텍스트를 가진 사람을 찾는 기능을 제공하며, 검색 결과로 가장 관련성이 높은 사람과 연결된 정보 소스를 표시한다.
* 캔버스의 장점: 캔버스는 대화형 도구로서의 AI를 정보 시각화, 워크플로우 탐색, 지루한 작업을 재미있는 경험으로 전환하는 공간으로 발전시킨다.

시사점

캔버스는 AI를 단순한 대화형 도구를 넘어, 사용자가 정보를 시각화하고, 다양한 워크플로우를 탐색하며, 에이전트와 함께 생각하고, 탐색하고, 행동할 수 있는 공유된 재미있는 작업 공간으로 전환시킴으로써 개발 경험을 향상시킨다.