캔버스로 인터랙티브한 경험을 만드는 방법

캔버스 확장은 GitHub Copilot을 단순한 대화형 도구에서 시각적이고 상호작용 가능한 작업 공간으로 확장한다. 사용자는 정보를 직접 보고 클릭·편집하며 작업할 수 있고, 에이전트는 같은 캔버스를 실시간으로 갱신한다. 따라서 이슈 분류, 코드 구조 탐색, 워크트리 정리처럼 대화만으로 처리하기 어려운 작업을 더 직관적으로 수행할 수 있다.

캔버스의 작동 방식

• 캔버스는 GitHub Copilot 앱 안에서 에이전트와 개발자가 함께 사용하는 공유 인터페이스다.
• 에이전트는 작업 과정에서 캔버스를 업데이트하고, 사용자는 클릭·편집·필터링 등으로 정보를 직접 조작할 수 있다.
• 사용자의 상호작용은 에이전트에 전달되거나 캔버스 내부에서 로컬로 처리된다.
• Copilot에 추가 기능이나 개선 사항을 요청하면서 캔버스를 작업 흐름에 맞게 계속 발전시킬 수 있다.
• GitHub Copilot 앱의 에이전트 세션에서 /create-canvas를 입력한 뒤 원하는 인터페이스와 기능을 설명하면 생성할 수 있다.

시각적 이슈 트리아지

• 저장소의 GitHub Issue를 카드 형식으로 하나씩 보여준다.
• 오른쪽으로 스와이프하면 처리할 이슈로, 왼쪽으로 스와이프하면 거절할 이슈로 분류할 수 있다.
• 사용자의 선택에 따라 캔버스가 실시간으로 이슈를 적절한 그룹으로 이동시킨다.
• 긴 대화나 명령 대신 빠른 제스처로 많은 이슈를 검토할 수 있다.

인터랙티브 코드베이스 다이어그램

• 프로젝트의 각 구성 요소를 노드로 표현하고, 컴포넌트 간 관계를 시각화한다.
• 노드를 마우스로 이동하거나 마우스를 올려 세부 정보를 확인할 수 있다.
• 필터를 사용해 코드베이스의 특정 계층이나 영역만 탐색할 수 있다.
• 정적인 문서나 설명을 읽는 대신 아키텍처를 직접 탐색하면서 시스템 구조를 이해할 수 있다.

세션과 Git worktree 관리

• GitHub Copilot 앱의 활성 세션과 연결된 worktree를 한 화면에 표시한다.
• 현재 사용 중인 worktree와 오래되었거나 고립된(orphaned) worktree를 구분한다.
• 필요하지 않은 stale worktree를 버튼 클릭 몇 번으로 정리할 수 있다.
• 여러 에이전트 세션을 동시에 사용하는 개발자에게 세션 상태와 작업 공간을 관리하는 시각적 제어판 역할을 한다.

에이전트 프롬프트 코치

• 과거 에이전트 세션의 프롬프트를 분석해 개선점을 제안한다.
• 부족한 맥락, 맞춤법 오류, 문법·구문 문제 등을 찾아낸다.
• 각 프롬프트를 더 명확하고 효과적으로 작성하는 방법을 안내한다.
• 반복적인 피드백을 통해 에이전트가 더 일관된 결과를 내도록 프롬프트 작성 능력을 높일 수 있다.

여러 도구를 연결하는 지식 탐색

• Slack, Teams, 이메일, 문서 등 여러 업무 도구를 검색한다.
• 특정 파일이나 주제와 관련된 지식이 있는 사람을 찾아준다.
• 해당 인물과 주제의 연결 근거가 어디에서 발견되었는지도 함께 보여준다.
• 조직 내 담당자나 관련 전문가를 빠르게 파악해 추가 질문과 협업으로 이어갈 수 있다.

활용 시사점

캔버스 확장은 AI와의 상호작용을 프롬프트와 응답의 연속에서 시각적 탐색·편집·실행 과정으로 바꾼다. 정보를 한눈에 비교하거나 직접 조작해야 하는 작업이라면 /create-canvas로 원하는 화면과 동작을 구체적으로 요청해 보는 것이 효과적이다.