연습 5 - 에이전트 모니터링 및 관리

← 이전 레슨: 사용자 지정 에이전트

GitHub Copilot을 에이전트 모드로 사용하면 코드베이스를 살펴보고 변경을 제안하고 파일을 편집하고 명령을 실행하는 등의 작업을 자율적으로 수행합니다. VS Code의 Copilot Chat은 사용자의 컴퓨터에서 실시간으로 진행되는 모든 도구 호출과 파일 편집을 보여 줍니다. 편집 내용을 diff에서 검토하고 개별 변경 사항을 수락하거나 되돌릴 수 있습니다. 편집기를 벗어나지 않고 후속 프롬프트를 보내 대화를 안내하고 작업을 조정하거나 확장할 수 있습니다.

이 연습에서는 다음을 수행합니다.

접근성 에이전트의 작업을 실시간으로 모니터링합니다.
제안된 파일 편집을 검토하고 수락합니다.
세션 중간에 에이전트에 밝은 모드 토글을 추가하도록 요청합니다.

시나리오

연습 4에서 사용한 접근성 사용자 지정 에이전트가 고대비 모드를 구현하고 있습니다. 작업이 진행되는 동안 디자인 팀이 추가 요청을 했습니다. 기본 테마가 너무 어둡다고 느끼는 사용자를 위한 밝은 모드 토글도 원합니다. 새 대화를 시작하는 대신 진행 중인 세션에 지침을 보내 작업을 확장합니다.

Copilot의 진행 상황 모니터링하기

Copilot Chat 보기에는 에이전트가 살펴보는 파일, 실행하는 명령, 제안하는 편집 등 각 단계가 표시됩니다. 파일 편집은 diff와 Keep/Undo 컨트롤과 함께 채팅에 표시됩니다.

연습 4에서 사용한 Copilot Chat 보기로 돌아갑니다.
에이전트가 작업하는 동안 채팅을 스크롤해 도구 호출을 살펴봅니다. 파일 읽기, 파일 편집, 실행을 요청하는 터미널 명령이 표시됩니다.
에이전트가 파일 편집을 제안하면 diff가 채팅에 표시됩니다.
- 변경을 수락하려면 Keep을 선택합니다.
- 변경을 되돌리고 에이전트가 다시 작업하도록 하려면 Undo를 선택합니다.
Chat 위쪽의 Files changed 표시를 열어 이 세션에서 에이전트가 수정한 파일 전체를 살펴볼 수도 있습니다.

터미널 명령 실행 등 도구 사용 권한을 요청하면 에이전트가 멈추고 Allow 요청을 표시합니다. 허용하기 전에 명령을 검토합니다.

에이전트가 고대비 모드 구현을 마칠 때까지 기다립니다. 변경 사항을 요약하는 최종 메시지가 표시됩니다.

에이전트에 밝은 모드 추가 요청하기

고대비 모드가 완성되었으니 동일한 대화를 이어서 밝은 모드 토글을 추가합니다. 기존 구성 요소, 스타일링 방식, 로컬 스토리지 패턴 등 이전 작업의 컨텍스트를 유지합니다.

Copilot Chat 입력에 다음 후속 프롬프트를 보냅니다.

잘했습니다! 이제 고대비 토글과 함께 밝은 모드 토글도 추가해 주세요. 밝은 모드도 동일한 방식으로 로컬 스토리지에 설정을 유지하고 UI의 같은 영역에서 사용할 수 있어야 합니다. 사용자가 고대비 모드와 밝은 모드를 서로 독립적으로 활성화할 수 있어야 합니다.

에이전트가 이전 변경 사항을 살펴보고 밝은 모드 기능을 제안하는 과정을 확인합니다.
고대비 모드와 마찬가지로 새 편집 내용을 검토하고 각 diff에서 Keep 또는 Undo를 선택합니다.
에이전트가 원하는 방향과 다르게 작업하면 Chat 입력 옆의 Stop 버튼을 선택해 중지한 뒤 추가 설명을 보냅니다.

진행 중인 세션에 지침을 추가하면 처음부터 다시 시작하는 것보다 빠릅니다. 후속 프롬프트로 조정(예: “CSS를 단순화하고 선택자를 복제하는 대신 CSS 변수를 사용해 주세요”), 방향 수정(예: “세 번째 토글을 추가하지 말고 기존 설정 패널에 밝은 모드를 통합해 주세요”), 범위 확장(예: “두 토글 모두에 키보드 단축키도 추가해 주세요”)을 요청할 수 있습니다.

작업 집합 검토하기

커밋하기 전에 에이전트가 수정한 내용을 빠르게 확인합니다.

VS Code에서 Source Control 보기를 엽니다.
변경된 파일 전체 목록을 검토합니다. Astro 컴포넌트, 스타일, 관련 테스트 등이 표시되어야 합니다.
변경된 파일 몇 개를 열어 diff를 살펴봅니다. 사용자 지정 에이전트의 접근성 패턴인 ARIA 속성, 키보드 탐색, 의미 있는 HTML, 로컬 스토리지 저장 방식이 반영되었는지 확인합니다.
만족스러우면 Source Control 패널에서 변경 사항을 스테이징하고 커밋합니다. 다음 레슨에서 게시합니다.

요약 및 다음 단계

Copilot Chat 에이전트 모드를 사용해 진행 중인 세션을 모니터링하고 안내했습니다. 파일 편집을 검토하고 수락하거나 되돌리고 컨텍스트를 유지한 채 후속 프롬프트를 보내 작업을 확장했습니다.

이 레슨에서는 다음을 살펴봤습니다.

에이전트의 작업을 실시간으로 모니터링하는 방법
개별 파일 편집을 수락하거나 되돌리는 방법
후속 프롬프트로 세션 중간에 에이전트의 방향을 조정하는 방법

다음으로 Copilot이 만든 작업을 반복 개선하며 이 실습에서 사용자 지정 에이전트가 생성한 변경 사항을 검토합니다.

리소스

← 이전 레슨: 사용자 지정 에이전트	다음 레슨: Copilot 작업 반복 개선 →