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

프로젝트에 작은 기능을 추가했습니다. 더 큰 변경에는 더 체계적인 프로세스가 필요합니다. GitHub Copilot CLI는 조직의 기존 작업 흐름에 맞춰 동작하므로 올바른 방식으로 필요한 기능을 구현할 수 있습니다. 이 레슨은 이슈를 바탕으로 기능을 만들고 코드가 유효한지 확인하고 동작을 테스트한 뒤 성공적으로 병합하는 일반적인 에이전트 기반 개발 과정을 다룹니다.

기능 작업을 이어 가는 동안 동일한 대화와 브랜치를 사용합니다. 일반적으로 파일 유형에 따라 브랜치나 PR을 나누지만, 핵심 개념에 집중할 수 있도록 이 워크숍에서는 일부 단계를 간소화합니다.

이 레슨에서는 다음을 수행합니다.

GitHub 이슈에서 Copilot 대화를 시작합니다.
Plan 모드에서 요구 사항을 정합니다.
Autopilot 모드로 새 기능을 구현합니다.
코드를 검토합니다.
포워딩된 브라우저에서 기능을 직접 확인합니다.

이후 레슨에서는 리포지토리 지침을 업데이트하고 기존 quality-checks 스킬을 사용자 지정하고 MCP 검증을 추가하고 QA 에이전트를 만든 뒤 기능 PR을 엽니다.

시나리오

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

배경

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

수행할 작업을 설명하는 등록된 이슈에서 시작합니다.
구현할 작업을 계획합니다.
코드를 작성하고 검토합니다.
테스트를 실행해 코드를 검증합니다.
새 기능을 직접 확인합니다.
풀 리퀘스트(PR)를 만듭니다.
코드 검토를 마치고 지속적 통합 검사가 성공하면 코드를 병합합니다.

구체적인 절차는 팀과 조직에 따라 다를 수 있지만 대체로 위 과정과 비슷합니다.

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

대화 모드

대화 모드는 에이전트의 자율성 수준을 제어합니다. Shift+Tab을 눌러 모드를 전환합니다.

Interactive: 사용자와 에이전트가 함께 작업합니다. 에이전트는 변경을 제안하고 사용자의 입력을 기다립니다.
Plan: 에이전트가 먼저 계획을 작성하며 프로젝트 파일은 편집할 수 없습니다.
Autopilot: 에이전트가 코드를 작성하고 테스트를 실행하며 작업이 완료될 때까지 자율적으로 반복합니다.

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

이슈에서 시작하기

필터링 작업을 시작하기 전에 Codespace로 돌아가 리포지토리와 터미널이 준비되었는지 확인합니다.

Codespace로 돌아갑니다. 중지된 상태라면 다시 시작합니다.
별점 PR이 병합되었는지 확인합니다.
터미널이 열려 있지 않으면 Control+`(Mac) 또는 Ctrl+`(Windows/Linux)을 누릅니다.
main을 업데이트하고 필터링 작업을 위한 브랜치를 만듭니다.
Terminal window
```
git checkout main
git pull --ff-only
git checkout -b game-filters-cli
```
Copilot CLI를 시작합니다.
Terminal window
```
copilot --yolo
```
Tab을 두 번 눌러 Issues 탭을 엽니다.
A를 눌러 모든 이슈를 표시합니다.
화살표 키로 Allow users to filter games by category and publisher 이슈를 선택합니다.
C를 눌러 이슈를 프롬프트에 추가하고 Session 탭으로 돌아갑니다.

이제 프롬프트가 #7 또는 비슷한 번호로 시작합니다. #을 사용하면 GitHub의 이슈나 풀 리퀘스트(PR)를 컨텍스트에 포함할 수 있습니다.

필터링 기능 계획하기

계획을 세우면 Copilot에 넘기기 전에 기능 구현 또는 작업 수행 방식을 정할 수 있습니다. 복잡한 작업은 계획을 세우는 것이 좋습니다. Plan 모드로 전환한 뒤 Copilot에 계획을 요청합니다.

Shift+Tab을 눌러 Plan 모드로 전환합니다. 프롬프트 아래의 모드 표시기가 Plan인지 확인합니다.
이전 단계에서 추가한 이슈 참조 뒤에 다음 프롬프트를 입력합니다.
```
이 기능을 구현하기 위한 계획을 작성해 주세요.
```

Copilot은 프로젝트를 살펴본 다음 가장 적절한 접근 방식을 결정해 계획을 작성합니다.

필터링 기능의 동작 방식에 관한 질문을 받으면 원하는 방식으로 답합니다. 정답은 하나가 아닙니다.
계획이 완성되면 Control+E(Mac) 또는 Ctrl+E(Windows/Linux)를 눌러 계획을 펼칩니다.
계획을 위아래로 이동하며 검토합니다.
결정한 내용과 맞지 않는 부분이 있으면 Copilot에 계획을 수정하도록 요청합니다.

Autopilot 승인하기

계획을 작성하고 검토했으니 이제 구현합니다. Autopilot을 사용해 Copilot이 작업을 수행하도록 합니다.

Autopilot 모드에서는 Copilot이 작업을 완료했다고 판단할 때까지 반복합니다.

Accept plan and build on autopilot (recommended) 또는 설치된 버전에서 같은 의미로 표시되는 옵션을 선택합니다.
프롬프트 아래의 모드 표시기가 Autopilot인지 확인합니다.
Copilot이 계획에 따라 코드를 작성하고 테스트를 실행하며 작업을 반복하는 과정을 살펴봅니다.

계획을 승인하면 구현이 바로 시작될 수 있으므로 먼저 계획을 검토합니다. Copilot이 종속성 누락이나 포트 충돌을 보고하면 검사가 완료된 것으로 처리하기 전에 설정 문제를 해결합니다.

구현 검토 및 확인하기

코드를 병합하기 전에 다른 코드와 마찬가지로 검토해야 합니다. 코드를 검토하고 사이트를 실행해 모든 것이 제대로 표시되는지 확인합니다.

Shift+Tab을 눌러 Interactive 모드로 전환합니다. 모드 표시기에 Plan 또는 Autopilot이 표시되지 않는지 확인합니다.
/diff를 입력하고 필터링 구현과 테스트를 살펴봅니다.
결과를 이슈와 계획 중에 결정한 내용과 비교합니다.
코드를 검토한 뒤 Esc를 눌러 diff 보기를 닫습니다.
프로젝트 검사 결과를 검토하고 실패한 항목이 있으면 Copilot에 해결하도록 요청합니다.

새 기능 살펴보기

코드는 괜찮아 보입니다. 이제 앱을 시작하고 Codespaces 포워딩 포트로 사이트를 열어 동작을 확인합니다.

Copilot에 앱을 시작하도록 요청합니다.

브라우저에서 필터링 기능을 확인할 수 있도록 앱을 시작해 주세요. URL을 알려 주고 서버는 계속 실행 상태로 두세요.

Codespaces에서 포트 4321을 사용할 수 있다고 표시되면 Open in Browser를 선택합니다.
계획에서 합의한 카테고리 필터, 퍼블리셔 필터, 조합을 시험합니다.
초기화와 결과 없음 상태가 이슈 및 결정 내용에 맞게 동작하는지 확인합니다.
Codespace로 돌아가 Copilot에 시작한 개발 서버를 중지하도록 요청합니다.

요약 및 다음 단계

다양한 대화 모드를 사용하여 기능을 만들고 검토했습니다. 이 레슨에서는 다음을 수행했습니다.

GitHub 이슈에서 Copilot 대화를 시작했습니다.
Plan 모드에서 요구 사항을 정했습니다.
Autopilot 모드로 기능을 구현했습니다.
코드를 검토했습니다.
포워딩된 브라우저에서 기능을 직접 확인했습니다.

다음으로 사용자 지정 지침을 사용해 코드를 문서화된 방식으로 작성하도록 안내합니다.