GitHub Copilot 앱 세션을 VS Code에서 이어가는 방법

에이전트가 변경 작업의 대부분을 마쳤습니다. 이제 하나의 구현 세부 사항을 검토하고, 몇 줄을 직접 수정하고, 배포하기 전에 프로젝트를 로컬에서 실행해 보려고 합니다.

하지만 그 작업은 GitHub Copilot 앱에 남아 있습니다… 그리고 여러분의 에디터는 diff를 검토하고, 코드를 디버그하고, 최종 조정을 하는 곳입니다. 세션에 머무는 것과 Visual Studio Code에서 다시 시작하는 것 사이에서 선택해야 할까요?

아닙니다. Copilot 앱 세션을 VS Code에서 직접 열어 대화, 코드 변경 사항, 작업 컨텍스트를 그대로 유지한 채 계속할 수 있습니다. 즉, Copilot이 반복적이거나 시간이 많이 걸리는 작업을 처리한 다음, 더 자세한 검토, 직접 편집, 로컬 테스트를 위해 컨트롤을 여러분에게 다시 넘길 수 있습니다.

이 튜토리얼에서 배울 내용:

• VS Code에서 Copilot 앱 세션 열기.
• 에이전트의 변경 사항을 한 줄씩 검토하기.
• 에디터에서 동일한 대화 이어가기.
• 코드를 로컬에서 수정하고 테스트하기.
• 세션과 연결된 풀 리퀘스트에 업데이트 푸시하기.

1. Copilot 앱에서 세션 시작

이어가려는 세션을 엽니다. 넘겨주기 전에 잠시 시간을 내어 작업과 Copilot이 완료한 작업을 검토하세요.

세션은 수정된 파일들의 모음 그 이상을 포함합니다. 작업, 계획, 그리고 그 변경 사항을 만들어낸 대화도 기록합니다. 이 컨텍스트는 Copilot이 특정 구현을 선택한 이유를 이해하거나 작업의 일부를 수정해 달라고 요청할 때 중요합니다.

VS Code로 이동하기 전에 그 기록을 요약하거나 새 채팅에 복사할 필요는 없습니다.

2. VS Code에서 세션 열기

세션에서 Open in VS Code을 선택합니다. 앱이 지원되는 에디터나 VS Code 설치를 두 개 이상 표시하는 경우, 사용하려는 것을 선택하세요.

VS Code는 세션과 연결된 worktree를 사용하여 프로젝트를 엽니다. 또한 Copilot 사이드바에 기존 세션을 표시합니다.

이를 통해 원래 작업의 연결된 세 가지 요소를 얻게 됩니다:

• 세션 컨텍스트: 작업, 계획, 대화가 계속 사용 가능합니다.
• diff: 에이전트가 변경한 파일과 줄이 검토 준비 상태입니다.
• worktree: VS Code는 세션이 사용한 동일한 격리된 작업 트리를 엽니다.

여러분은 새 에디터 창에서 세션을 재구성하는 것이 아니라 기존 세션을 이어가는 것입니다.

3. 에이전트의 변경 사항 검토

편집하기 전에 VS Code에서 diff를 검토하세요. 소스 제어(Source Control) 보기를 열어 변경된 파일을 확인한 다음, 파일을 선택하여 변경 사항을 한 줄씩 검토하세요.

다른 제안된 변경 사항을 검토하듯이 구현을 검토하세요. 특히 다음 사항을 확인하세요:

• 코드가 요청된 문제를 해결하는지.
• 구현이 저장소의 컨벤션을 따르는지.
• 오류 상태와 엣지 케이스가 적절히 처리되는지.
• 테스트가 변경된 동작을 다루는지.
• 관련 없는 파일이나 동작이 수정되지 않았는지.

저장된 대화는 Copilot이 해당 구현에 어떻게 도달했는지 설명하는 데 도움이 됩니다. 명확하지 않은 부분이 있다면 사이드바에서 Copilot에게 계속 프롬프트를 입력하세요. 예를 들어:

Explain why you changed this function instead of adding a new helper. Identify any behavior this could affect.

Copilot에게 다른 변경을 요청할 수도 있습니다. 세션과 작업 트리가 계속 연결되어 있으므로 작업을 처음부터 다시 설명할 필요가 없습니다.

4. 직접 편집하기

제안된 변경 사항을 이해한 후에는 VS Code에서 파일을 직접 편집할 수 있습니다.

이는 다음과 같이 직접 손으로 하는 것이 더 빠르거나 쉬운 조정에 유용합니다:

• 레이블이나 오류 메시지 다듬기.
• 명확성을 위해 변수 이름 바꾸기.
• 레이아웃이나 스타일 조정.
• 누락된 테스트 케이스 추가.
• 저장소별 규칙 적용.

세션의 기존 작업 트리를 편집하는 것이므로, 수동 변경 사항이 에이전트의 작업 위에 바로 쌓입니다. 디렉터리 간에 파일을 복사하거나 브랜치를 수동으로 다시 만들 필요가 없습니다.

5. 로컬에서 프로젝트 실행 및 검증

VS Code 통합 터미널을 사용하여 프로젝트의 일반적인 검증 워크플로를 실행하세요. 정확한 명령은 저장소에 따라 다르지만, 일부 웹 앱 예제에는 다음이 포함될 수 있습니다:

• npm install
• npm test
• npm run lint
• npm run dev

에이전트가 생성한 변경 사항은 사람이 작성한 코드와 동일하게 취급하세요. 관련 테스트를 실행하고, 실패를 검토하고, 동작을 직접 확인하세요.

개발 서버가 localhost URL을 출력하면 브라우저에서 열어 변경 사항을 테스트하세요. VS Code 설정이 지원하는 경우 VS Code의 통합 브라우저에서 URL을 열어 편집기를 떠나지 않고 결과를 확인할 수 있습니다.

사용자 인터페이스 변경의 경우 요청된 동작과 주변 상태를 모두 확인하세요. 예를 들어, 수정된 컴포넌트를 다양한 뷰포트 크기에서 확인하고 로딩, 빈 상태, 오류 상태가 여전히 정상적으로 작동하는지 확인하세요.

6. Copilot으로 계속하거나 직접 편집

언제든지 다음 단계에 가장 적합한 상호 작용 방식을 선택할 수 있습니다:

• 변경에 저장소 전체 분석이나 반복적인 편집이 필요할 때는 Copilot에게 프롬프트를 입력하세요.
• 원하는 정확한 변경을 알고 있을 때는 직접 편집하세요.
• 구현을 테스트하고 다듬는 과정에서 두 가지 접근 방식을 반복적으로 함께 사용하세요.

예를 들어, 수동으로 UI를 조정한 후 Copilot에게 다음과 같이 물어볼 수 있습니다:

업데이트된 레이블에 대한 테스트를 추가하고 관련 테스트 파일을 실행하세요. 관련 없는 컴포넌트는 수정하지 마세요.

아직 원래 세션에 있으므로 Copilot은 "업데이트된 레이블"을 해석하는 데 필요한 컨텍스트를 유지하고 있습니다.

7. 완성된 변경 사항 커밋 및 푸시

구현이 완료되면 최종 diff를 한 번 더 검토하세요. 그런 다음 소스 제어 뷰나 통합 터미널을 사용하여 변경 사항을 커밋하고 푸시하세요:

• git status
• git add
• git commit -m "Refine session changes"
• git push

리포지토리의 일반적인 브랜치, 커밋, 리뷰 및 승인 관행을 그대로 사용하세요. VS Code가 세션과 연관된 worktree와 브랜치를 열어주기 때문에, 브랜치를 푸시하면 해당 작업을 추적 중이던 풀 리퀘스트가 자동으로 업데이트됩니다.

완성된 파일을 다른 체크아웃에 복사하거나 작업을 풀 리퀘스트에 수동으로 다시 연결할 필요가 없습니다.

에이전트에서 편집기로 이어지는 연속 워크플로

VS Code에서 Copilot 앱 세션을 열면 작업 자체를 분리하지 않고도 깔끔한 역할 분담이 가능합니다. Copilot이 더 큰 구현이나 반복적인 작업을 맡는 동안, 여러분은 편집기로 옮겨가 상세한 리뷰, 대상 지정 변경, 로컬 테스트 및 최종 마무리를 진행할 수 있습니다.

세션, diff, worktree는 여러분과 함께 이동합니다. Copilot 앱에서 작업을 지시하는 것으로 시작하고, 직접 제어가 필요할 때는 VS Code로 전환한 뒤, 완성된 결과를 동일한 풀 리퀘스트 워크플로를 통해 푸시하세요.

사용해 볼 준비가 되셨나요? GitHub Copilot 앱을 다운로드하고, 세션을 시작한 뒤, 코딩을 계속할 준비가 되면 VS Code에서 열어 보세요.

이 글 How to continue a GitHub Copilot app session in VS Code 은 다음에서 처음 게시되었습니다 The GitHub Blog.