레슨 3 - 에이전트 모드: Plan 및 Autopilot

프로젝트에 작은 기능을 추가하는 것으로 시작했습니다. 하지만 더 큰 변경에는 더 견고한 프로세스가 필요합니다. 다행히 GitHub Copilot app은 조직의 기존 흐름에 맞춰 올바른 대상을 올바른 방식으로 구축하도록 설계되어 있습니다. 이 레슨부터 여러 레슨에 걸쳐 일반적인 에이전트 기반 개발 프로세스를 따릅니다. 이슈를 바탕으로 새 기능을 생성하고, 코드가 유효하며 기능이 예상대로 동작하는지 확인한 뒤, 최종적으로 프로젝트에 성공적으로 병합합니다.

기능 워크플로를 계속 진행하는 동안 동일한 세션을 사용합니다. 일반적으로는 작업하는 파일 유형에 따라 서로 다른 세션이나 PR을 사용하지만, 여기서는 핵심 개념에 집중할 수 있도록 단계를 간소화합니다.

먼저 이 레슨에서는 다음 작업을 수행합니다.

GitHub 이슈에서 새 에이전트 세션을 시작합니다.
Plan 모드에서 요구 사항을 정의합니다.
Autopilot 모드로 새 기능을 구현합니다.
코드를 검토합니다.
브라우저 캔버스에서 기능을 수동으로 검증합니다.

이 기능을 계속 개발하면서 리포지토리 지침을 업데이트하고, 기존 quality-checks 스킬을 사용자 지정하고, MCP 검증을 추가하고, QA 에이전트를 만든 다음 기능 PR을 엽니다.

시나리오

Tailspin Toys의 카탈로그가 커지면서 방문자가 카테고리와 퍼블리셔로 게임을 좁혀 볼 수 있어야 합니다. 백로그 이슈에 기능이 설명되어 있지만 카테고리 조합 방식 같은 세부 사항은 코딩 전에 합의해야 합니다. Plan 모드로 결정을 정리한 다음 Autopilot으로 범위가 정해진 구현을 승인합니다.

배경

AI 코딩 에이전트를 개발 흐름에 도입해도 기본 원칙은 달라지지 않습니다. 오히려 더 중요해집니다. 대부분의 개발자는 다음과 비슷한 흐름을 따릅니다.

수행할 작업의 세부 정보가 담긴 이슈를 엽니다.
구축할 항목을 계획합니다.
코드를 구축하고 검토합니다.
테스트를 실행하여 코드를 검증합니다.
새 기능을 수동으로 검증합니다.
끌어오기 요청(PR)을 만듭니다.
코드를 검토하고 지속적 통합 프로세스가 성공하면 코드를 병합합니다.

정확한 세부 사항은 팀과 조직에 따라 다르지만 대부분 위 흐름의 변형입니다.

이 표준 접근 방식을 따르면 AI가 생성한 코드가 요구 사항을 충족하고 사람이 작성한 코드와 동일한 검증 과정을 거치게 할 수 있습니다.

세션 모드

세션 모드는 에이전트의 자율성 수준을 제어합니다. 프롬프트 필드 아래의 드롭다운에서 설정하고 언제든지 변경할 수 있습니다.

Interactive: 사용자와 에이전트가 함께 작업합니다. 에이전트는 변경을 제안하고 진행하기 전에 사용자의 입력을 기다립니다.
Plan: 에이전트가 먼저 계획을 만듭니다. 에이전트가 실행하기 전에 계획을 검토하고 승인합니다.
Autopilot: 에이전트가 입력을 기다리지 않고 코드 작성, 테스트 실행, 반복 작업을 완전히 자율적으로 수행합니다.

Plan 모드에서 시작하여 계획을 검토한 다음 Autopilot으로 구현합니다.

이슈에서 세션 시작

시작하기 전에 별점 PR이 병합되었고 로컬 main이 최신 상태인지 확인합니다.

Issues를 선택하고 Allow users to filter games by category and publisher를 엽니다.
New session을 선택하고 업데이트된 main을 기반으로 하는 new working tree를 선택합니다.
세션에 이슈가 첨부되었는지 확인하고 모드 선택기에서 Plan을 선택합니다.

필터링 기능 계획

계획을 세우면 Copilot이 코드를 작성하기 전에 접근 방식을 검토할 수 있습니다. 이슈에서 시작했으므로 Copilot은 이미 기능 요청을 컨텍스트로 갖고 있습니다. 다음 프롬프트를 보냅니다.

Build this feature.

Copilot의 질문에 답하고 계획을 이슈의 수락 기준과 비교합니다. 카테고리 및 퍼블리셔 필터링, 접근성 있는 컨트롤, 데이터 액세스 변경, 테스트가 포함되었는지 확인합니다. 여러 카테고리를 조합하는 방식이나 일치하는 게임이 없을 때의 동작처럼 불명확한 부분을 논의합니다.

계획에는 프로젝트의 기존 도구를 사용하는 린트, 단위 테스트, E2E 테스트, 타입 검사가 포함되어야 합니다. 필터링 구현과 테스트에 집중합니다. 품질 워크플로를 완료한 후 PR을 만듭니다. 승인 전에 필요한 계획 수정을 요청하고, 이후 검증에서 사용할 이슈 URL과 합의한 추가 사항을 보관합니다.

Autopilot 명시적 승인

계획이 만족스러우면 Approve and implement with autopilot 또는 사용 중인 버전의 동등한 옵션을 선택합니다. 모드 표시가 Autopilot인지 확인합니다.

Copilot이 구현을 시작합니다. 수립한 계획을 따라 코드를 생성하고 테스트까지 실행하며 작업을 반복하는 모습을 확인할 수 있습니다.

승인 즉시 구현이 시작될 수 있으므로 먼저 계획을 검토합니다. Copilot이 누락된 종속성이나 포트 충돌을 보고하면 검사가 완료되었다고 판단하기 전에 설정 문제를 해결합니다. 직접 시작한 서버만 중지합니다.

구현 검토 및 검증

생성한 코드도 다른 코드와 마찬가지로 병합 전에 검토해야 합니다. 코드와 사이트를 모두 확인하여 문제가 없는지 검증합니다.

Changes를 열고 필터링 구현과 테스트를 살펴봅니다.
여러 카테고리와 퍼블리셔 조합을 포함하여 결과를 이슈 및 승인한 추가 합의 사항과 비교합니다. 변경 내용이 기존 리포지토리 지침을 따르는지 확인합니다.
린트, 단위 테스트, E2E 테스트, 타입 검사 출력을 확인합니다. 건너뛴 검사는 통과가 아닙니다.
구현을 수락하기 전에 실패를 해결하고 관련 검사를 다시 실행합니다. Playwright E2E 구성은 빌드하고 미리 보기를 제공하며 로컬 서버를 재사용할 수 있습니다. 테스트한 서버가 이전 레슨이 아니라 이 워크트리의 서버인지 확인합니다.

새 기능 살펴보기

코드는 괜찮아 보이지만 실제로 실행되는지도 확인해야 합니다. 이전과 마찬가지로 사이트를 시작하고 브라우저 캔버스에서 엽니다.

다음 프롬프트를 사용하여 Copilot에 앱을 시작하고 브라우저 캔버스에서 페이지를 열도록 요청합니다.
```
Start the app and open it in the browser canvas.
```
잠시 후 앱이 시작되고 Copilot app 안에 브라우저 창이 열립니다.
별점이 있는 게임 카드에 5점 만점의 값이 표시되는지 확인합니다.
완료하면 다음 프롬프트로 이 세션에서 시작한 개발 서버를 중지하도록 Copilot에 요청합니다.
```
Stop the dev server and close the browser canvas.
```

요약 및 다음 단계

서로 다른 에이전트 모드를 사용하여 기능을 구축하고 검토했습니다. 이 레슨에서는 다음 작업을 수행했습니다.

GitHub 이슈에서 새 에이전트 세션을 시작했습니다.
Plan 모드에서 요구 사항을 정의했습니다.
Autopilot 모드로 새 기능을 구현했습니다.
코드를 검토했습니다.
브라우저 캔버스에서 기능을 수동으로 검증했습니다.

다음으로 사용자 지정 지침을 사용하여 코드가 문서화된 관행을 따르도록 코드 생성 방식을 더 자세히 살펴봅니다.

리소스

GitHub Copilot app에서 에이전트 세션 사용