VS Code에서 채팅 시작하기

이 튜토리얼에서는 Visual Studio Code에서 채팅을 사용하는 방법을 안내합니다. AI 기반 채팅 대화를 사용하여 코드 리팩토링, 코드 이해도 향상, VS Code 구성 방법 찾기 등에 도움을 받을 수 있습니다.

VS Code에서 Copilot 사용이 처음이라면 Copilot 개요를 참조하거나 Copilot 빠른 시작에서 설정을 하고 주요 기능을 살펴보세요.

전제 조건

VS Code에서 GitHub Copilot을 사용하려면 다음이 필요합니다.

• GitHub Copilot 액세스 권한
• VS Code에 설치된 GitHub Copilot 확장

GitHub Copilot 액세스 권한을 얻고 VS Code에 Copilot 확장을 설치하려면 GitHub Copilot 설정 가이드의 단계를 따르세요.

첫 채팅 대화 시작하기

채팅을 사용하면 자연어를 사용하여 코딩 관련 질문을 하고 답변을 받는 방식으로 GitHub Copilot과 상호 작용할 수 있습니다.

이 튜토리얼에서는 간단한 Node.js 웹 애플리케이션을 만들 것입니다.

1. 새 VS Code 창을 엽니다. 다음 단계에서 새 작업 영역을 만들 것입니다.

2. 제목 표시줄의 채팅 메뉴에서 **채팅 열기**를 선택하거나 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 키보드 바로 가기를 사용하세요.

   

   채팅 보기가 보조 사이드바에 열리는 것을 확인합니다. 채팅 보기가 옆에 있으면 코드를 작업하면서 대화를 계속할 수 있습니다.

3. 채팅 보기에서 채팅 모드 드롭다운 메뉴의 **질문**을 선택합니다.

   질문 모드를 사용하여 코딩 및 기술 주제에 대해 질문하고, 코드를 설명하거나, 아이디어를 구상하세요.

   

4. 인기 있는 웹 프레임워크에 대해 질문해 보겠습니다. 채팅 입력 필드에 "가장 인기 있는 웹 프레임워크는 무엇인가요?"라고 입력하세요.

   VS Code에서 인기 있는 웹 프레임워크 목록이 반환됩니다. 특정 프레임워크에 대한 자세한 정보를 얻거나 프레임워크를 비교하기 위해 후속 질문을 해보세요. 예를 들어, "Express와 Fastify의 차이점은 무엇인가요?" 또는 "서버 측 렌더링은 어떻게 하나요?"라고 질문할 수 있습니다.

5. 새 웹 앱을 스캐폴딩하려면 채팅 입력 필드에 "typescript와 pug를 사용한 새 express 앱"이라고 입력하세요.

   VS Code에서 새 작업 영역 파일을 나타내는 파일 트리를 반환하는 것을 확인합니다. 파일 트리에서 파일을 선택하여 내용을 미리 볼 수 있습니다.

   

6. **작업 영역 만들기**를 선택하여 앱을 만들고, 작업 영역을 만들어야 할 디스크 폴더를 선택합니다.

   대화 상자에서 **열기**를 선택하여 새로 만든 작업 영역을 VS Code에서 엽니다.

   참고

   VS Code에서 새 작업 영역을 신뢰할지 묻는 메시지가 나타날 수 있습니다. 작업 영역을 신뢰하려면 **예, 내용을 신뢰합니다**를 선택하세요. 작업 영역 신뢰에 대한 자세한 정보를 확인하세요.

인라인 채팅으로 흐름 유지하기

채팅 보기는 대화를 계속하는 데 좋지만, *에디터 인라인 채팅*은 에디터에서 적극적으로 작업 중인 코드에 대해 Copilot에게 질문하려는 상황에 최적화되어 있습니다. 예를 들어, 특정 코드 조각을 리팩토링하거나 복잡한 알고리즘을 설명하는 데 사용할 수 있습니다.

코드 리팩토링에 에디터 인라인 채팅을 사용하는 방법을 살펴보겠습니다.

1. app.ts 파일을 열고 ⌘I (Windows, Linux Ctrl+I) 키보드 바로 가기를 사용하여 에디터 인라인 채팅을 불러옵니다. 또는 제목 표시줄의 채팅 메뉴에서 **인라인 채팅 열기**를 선택합니다.

   에디터에 채팅 입력 필드가 인라인으로 나타나며, 여기에 채팅 프롬프트를 입력하고 에디터의 코드에 대해 Copilot에게 질문할 수 있습니다.

   

2. "JSON 출력 지원 추가"를 채팅 입력 필드에 입력하고 Enter 키를 누릅니다.

   Copilot이 Express에 JSON 출력 지원을 추가하는 코드 제안을 제공하는 것을 확인합니다.

   

3. **수락** 또는 **닫기**를 선택하여 변경 사항을 적용하거나 무시합니다.

   제안된 코드 변경 사항이 마음에 들지 않으면 **다시 실행 요청** 컨트롤을 선택하거나 후속 질문을 하여 다른 제안을 받을 수 있습니다.

여러 파일에 걸쳐 수정하기

인라인 채팅을 사용하면 단일 파일에 변경 사항을 적용했습니다. 채팅 보기에서 *편집 모드*로 전환하여 Copilot을 사용하여 작업 영역의 여러 파일에 걸쳐 변경할 수도 있습니다.

웹 앱의 구성을 저장하기 위해 .env 파일을 사용하도록 편집 모드를 사용해 보겠습니다.

1. 채팅 보기를 열고 채팅 모드 드롭다운 메뉴의 **편집**을 선택합니다.

   

2. Copilot이 요청 범위를 이해하도록 package.json 및 app.ts를 프롬프트에 컨텍스트로 추가해 보겠습니다.

   1. 채팅 보기에서 **컨텍스트 추가**를 선택하고, 검색 필드에 package를 입력한 다음 파일 목록에서 package.json 파일을 선택합니다. 추가할 수 있는 컨텍스트가 여러 유형이 있음을 확인합니다.

   2. 에디터에서 app.ts 파일을 열고 Copilot이 활성 파일을 채팅 컨텍스트에 자동으로 추가하는 것을 확인합니다.

3. "설정으로 .env 파일 사용"을 채팅 입력 필드에 입력하고 Enter 키를 누릅니다.

4. Copilot이 여러 파일에 업데이트를 적용하고 작업 영역에 새 .env 파일을 추가하는 것을 확인합니다.

   채팅 보기에는 채팅 보기에서 굵은 텍스트로 표시된 변경된 파일이 표시됩니다.

   

5. 채팅 보기에서 **유지**를 선택하여 제안된 모든 변경 사항을 확인합니다.

   에디터의 오버레이 컨트롤을 사용하여 파일 전체의 개별 변경 사항을 쉽게 탐색하고 검토합니다.

에이전트 코딩 흐름 시작하기

더 복잡한 요청의 경우 *에이전트 모드*를 사용하여 Copilot이 요청을 완료하는 데 필요한 작업을 자율적으로 계획하고 실행하도록 할 수 있습니다. 이러한 작업에는 코드 편집뿐만 아니라 터미널에서 명령 실행도 포함될 수 있습니다. 에이전트 모드에서 Copilot은 작업을 완료하기 위해 다른 도구를 호출할 수 있습니다.

웹 앱을 여행 팁 공유 앱으로 만들고 테스트를 추가하기 위해 에이전트 모드를 사용해 보겠습니다.

1. 채팅 보기를 열고 채팅 모드 드롭다운 메뉴의 **에이전트**를 선택합니다.

   

2. "앱을 여행 블로그로 만들고 코드 회귀를 방지하기 위해 테스트를 추가하세요."를 채팅 입력 필드에 입력하고 Enter 키를 누릅니다.

   프롬프트에 컨텍스트를 추가할 필요가 없다는 점에 유의하세요. 에이전트 모드는 작업 영역의 코드를 자동으로 분석합니다.

3. Copilot은 코드 변경 사항을 적용하고 테스트 실행과 같은 명령을 실행하기 위해 반복합니다. 채팅 보기에서 **계속**을 선택하여 터미널 명령을 확인합니다.

   

   요청의 복잡성에 따라 Copilot이 모든 작업을 완료하는 데 몇 분이 걸릴 수 있습니다. 도중에 문제가 발생하면 이를 수정하기 위해 반복합니다.

4. Copilot이 작업을 완료하면 변경 사항을 검토하고 앱을 테스트합니다.

   "앱 실행" 또는 "서버 시작"과 같은 프롬프트를 제공하여 Copilot에게 앱을 실행하도록 요청할 수도 있습니다.

축하합니다.

축하합니다! VS Code에서 Copilot Chat을 성공적으로 사용하여 질문하고 작업 영역 전체에서 코드 편집을 수행했습니다. Copilot Chat을 최대한 활용하려면 다른 프롬프트와 채팅 모드를 계속 실험해 보세요.

추가 자료

• VS Code에서 Copilot Chat 개요 보기