[Copilot] 깃허브 코파일럿 VSCode 설치 및 사용법

깃허브 코파일럿 챗 기능을 알아보고 사용 방법을 둘러보겠습니다. 깃허브 코파일럿 챗(Copilot Chat) 이야기에 앞서 깃허브 코파일럿 X를 먼저 알아보겠습니다. 2023년에 발표된 코파일럿 X는 기존 주석 기반의 코파일럿 인터렉션을 넘어 개발자의 워크플로 곳곳에 스며들어 다양한 방면에서 개발자를 돕습니다. 그중에 하나가 코파일럿 챗으로, IDE 내에서도 마치 챗GPT에서 채팅하듯 사용합니다. 사용성 개선뿐만 아니라 GPT-4 모델을 활용해 더 정확하고 많은 컨텍스트를 고려할 수 있는 모델로 더 성장했습니다.

여기서 X는 개발자가 경험하는 모든 것을 의미합니다. 이제 이야기할 코파일럿 챗뿐만 아니라 CLI, 코파일럿 풀 리퀘스트(Copilot Pull request) 등 개발자 워크플로 어떠한 곳이든 필요한 곳이 있다면 코파일럿이 도울 수 있다는 포부가 담겨 있습니다.

깃허브 코파일럿은 다음과 같이 3가지 도구의 집합입니다.

• 깃허브 코파일럿(GitHub Copilot) : IDE에 자동 완성 스타일 제안을 제공하는 AI 도구입니다.
• 깃허브 코파일럿 챗(GitHub Copilot Chat) : IDE 내에서 코딩 관련 질문에 대한 답변을 요청하고 받을 수 있는 채팅 인터페이스입니다.
• 깃허브 코파일럿 인 더 CLI(GitHub Copilot in the CLI) : 명령줄에서 코파일럿 인터페이스입니다. 깃허브 코파일럿에 명령하거나 특정 명령을 설명하도록 요청할 수 있습니다.

깃허브 코파일럿은 젯브레인 IDE(JetBrains IDEs), 비주얼 스튜디오(Visual Studio), VSCode(Visual Studio Code IDE)를 지원합니다. <요즘 AI 페어 프로그래밍>에서는 VSCode를 사용합니다. VSCode에서 코파일럿을 제대로 사용하려면 깃허브 코파일럿과 깃허브 코파일럿 챗 익스텐션을 모두 설치해야 합니다.

차례대로 설치하고 함께 둘러보겠습니다.

1. VSCode에 설치하기

01 VSCode 익스텐션 ① 검색창에서 “copilot”을 입력하고 검색합니다. ② 검색된 목록에서 ‘GitHub Copilot’과 ‘GitHub Copilot Chat’을 차례대로 ③ 설치해주세요.

02 설치가 완료되면 좌측에 ① 깃허브 코파일럿 챗 아이콘이 보입니다. 해당 아이콘을 클릭하면 ② 환영 메시지가 보입니다. 저는 이미 깃허브 코파일럿 유료 계정이라서 환영 메시지가 나오지만, 아직 유료 결제를 하지 않은 분은 가입해야 쓸 수 있다는 안내를 받게 됩니다. ③에서는 기본 활용법을 알려줍니다. ④는 깃허브 코파일럿 챗에 요청을 하는 창입니다.

2. 코파일럿 채팅 종류

코파일럿은 ① 챗뷰 ② 인라인 챗, 그 외 (아래 그림에서는 안 보이는) 빠른 챗 채팅 영역에서 사용할 수 있습니다.

챗뷰(Chat View)는 코파일럿과 채팅을 나누는 영역입니다. Alt +Ctrl+I(윈도우) ^+⌘+I(맥)를 눌러 챗뷰를 호출합니다. 챗뷰에서 질문을 하면 ①~⑥순서로 답변이 이어집니다. 특히 소스 코드 영역 위에 마우스 커서가 위치하면 코드 복사, 코드를 커서에 삽입, 새 파일에 삽입, 터미널에 삽입을 원클릭으로 진행할 수 있습니다.

인라인 챗(Inline Chat)은 편집기 즉 소스 코드가 있는 영역에서 곧바로 불러 사용하는 기능입니다. 커서가 있는 곳, 또는 선택한 코드에 대한 요청을 할 수 있습니다. 작업 흐름을 유지하면서 코파일럿의 도움을 받을 수 있어 유용합니다. Ctrl+I , ⌘+I 를 눌러 호출합니다. 다음은 인라인 챗에 요청해 얻은 소스 코드가 미리보기되는 모습입니다. [수락]을 클릭해야 진짜로 코드에 반영됩니다. [취소]를 누르면 반영되지 않습니다. ①을 누르면 기존 코드와 제안 코드를 둘 다 보여줍니다.

퀵 챗 또는 빠른 챗(Quick Chat)은 전체 채팅 영역이나 인라인 채팅 영역을 사용하고 싶지 않지만, 코파일럿의 도움이 필요할 때 사용합니다. Ctrl+Shift+I, ⇧+⌘+I 단축키를 사용하면 됩니다. 를 클릭하면 챗뷰영역에서 열립니다.

3. 코파일럿 예약어 소개

챗GPT를 사용할 때는 질문의 컨텍스트를 이해시키려면 많은 정보를 입력해야 했습니다. 정보가 누락되면 제대로 된 답을 얻을 수 없기 때문에 귀찮은 작업이었습니다. 하지만 코파일럿은 예약어만 사용해도 충분한 의도를 전달해 원하는 대답을 얻을 수 있습니다.

3.1 /로 시작하는 예약어

코파일럿 예약어는 /help를 입력하면 얻을 수 있습니다.

• /help : 깃허브 코파일럿 도움말을 출력합니다. 예약어와 예약 변수, 대화를 나누는 방법을 출력합니다. 예약어와 예약 변수는 이제부터 차례로 다루겠습니다.
• /doc : 코드를 설명해줍니다. 다음은 버블 정렬 코드에 대한 /doc의 결과입니다.
• /clear : 새 채팅 세션을 시작합니다.

3.2 @로 시작하는 예약어

@로 시작하는 예약어도 제공합니다. 특정 영역을 범위로 지정할 때 사용합니다. @만 입력하면 입력 가능한 예약어가 추천되므로 간편히 입력할 수 있습니다.

• @workspace : 워크스페이스(작업공간)에 대해 묻습니다. 챗GPT에서는 토큰의 제약으로 인해 거대한 코드 전체에 대한 문맥을 넘기기 어려웠지만, 깃허브 코파일럿은 @workspace 사용만으로도 프로젝트 전체에 대한 문맥을 전달할 수 있습니다.

• • /explain : 선택한 코드의 동작 방식을 설명합니다. 다음은 @workspace /explain에 대한 답변입니다. /doc일 때보다 더 코드 수준으로 답변해줍니다.

• • /tests : 선택한 코드에 대한 단위 테스트를 생성합니다. 테스트 코드의 중요성은 다 알지만 막상 구현하기 귀찮습니다. 원하는 함수를 코드에서 선택하고 이 예약어를 쓰면 귀찮음에서 해방될 수 있습니다!
  • /fix : 선택한 코드의 문제에 대한 수정을 제안합니다.
  • /new : 새 작업 영역에 대한 스캐폴드 코드*를 제공합니다.
  • /newNotebook : 새 주피터 노트북을 만듭니다.

• @vscode : VSCode에 대해 문의할 수 있습니다. “@vscode 테마를 바꾸려면 어떻게 해야 하나요?”라고 질문해보세요.
  • /api : VSCode 확장 개발에 대해 문의합니다. “@vscode /api VSCode의 확장 프로그램을 만드는 방법을 알려줘”처럼 요청해보세요!

• @terminal : 디버깅할 때 VSCode 터미널에서 작업을 요청합니다. “@terminal 오류를 해결할 방법을 알려줘”처럼 요청하면 됩니다.

* scaffold code. 스캐폴드 코드란 기본적인 코드 구조를 제공하여 상세 기능을 추가할 수 있도록 도와는 초기 코드 틀입니다.

3.3 내장된 채팅 변수

@workspace 또는 @vscode 도메인별 컨텍스트를 제공하는 채팅 변수를 제공할 수 있습니다. 기호를 사용해 채팅 프롬프트에서 채팅 변수를 참조할 수 있습니다. 예를 들어 #selection 변수에는 활성 편집기에서 선택한 텍스트가 포함됩니다.

채팅 변수를 사용하면 채팅 프롬프트에 컨텍스트를 더욱 구체적으로 지정할 수 있습니다.

내장된 채팅 변수의 예는 다음과 같습니다.

• #selection : 활성화된 편집 화면의 선택된 코드입니다.
• #editor : 활성화된 편집 화면입니다. 편집 화면 내용은 채팅 뷰의 컨텍스트로 포함됩니다.
• #file : 채팅 프롬프트의 컨텍스트로 포함된 파일입니다.
• #terminalSelection : 활성 터미널에서 선택되어 있는 라인입니다.

• #terminalLastCommand : 활성 터미널의 마지막 실행 명령입니다.

4. 코파일럿 CLI 사용하기

코파일럿 X의 또 다른 제품인 코파일럿 CLI(Copilot CLI)도 설치하고 사용해봅시다. 이름에서 느껴지겠지만 CLI, 즉 커맨드라인에서 사용할 수 있는 코파일럿입니다. 코파일럿 챗이 IDE에서 채팅 기능을 제공했다면, 코파일럿 CLI는 커맨드라인에서 자연어 처리 및 명령어 제안 기능을 제공합니다. 코파일럿 CLI은 화면 전환 없이 터미널에서만 셸 스크립트를 짜거나 셸 스크립트설명을들을수있는편리한도구입니다.

4.1 설치하기

01 코파일럿 CLI는 깃허브 CLI(GitHub CLI)의 익스텐션입니다. 따라서 먼저 깃허브 CLI가 설치되어 있어야 합니다. 각자의 환경에 맞게 먼저 깃허브 CLI를 설치합니다.

윈도우에서는 WinGet을 사용하면 됩니다.

맥OS에 설치는 홈브로와 맥포트를 이용하면 편리합니다.

그외 더 자세한 사항은 https://github.com/cli/cli에서 확인하세요.

02 깃허브에 로그인 후 gh-copilot 익스텐션을 추가적으로 설치해줍니다.

# 깃허브 로그인
$ gh auth login

# github/gh-copilot 익스텐션 설치
gh extension install github/gh-copilot

4.2 제공하는 기능 알아보기

커맨드라인은 간단한 것들은 손에 익어서 금방 하지만 shell script 같은 경우 자주 사용하지 않다 보면 헷갈리기도 하는데요. 이 경우 코파일럿에게 자연어로 주문하면 바로 사용할 수 있는 셸 커맨드라인을 만들어줍니다. 자연어 요청을 셸 커맨드로 만들어주는 것이 suggest 기능입니다.

 $ gh copilot suggest

사실 그 반대 경우도 많을 텐데요. 따로 구글링으로 가지 않더라도 CLI에서 바로 자연어로, 그것도 커맨드라인과 옵션 값들 하나하나 설명을 받을 수 있는 explain 기능이 있습니다.

 $ gh copilot explain

4.3 실습해보기

이제 직접 실습을 하겠습니다.

01 다음과 같이 간단한 자바스크립트 코드를 사용하겠습니다.

02 자연어로 작성한 요구 사항을 코파일럿에 전달해 셸 스크립트를 수정해보겠습니다. gh copilot suggest 명령으로 깃허브 코파일럿에 들어가보겠습니다.

03 그러면 어떤 셸 스크립트를 만들지 물어봅니다. 위에서부터 일반 셸 스크립트, 깃허브 셸 스크립트, 깃 셸 스크립트입니다. 저는 일반적인 셸 스크립트를 만들거라 generic shell를 선택했습니다.

04 ① “이 폴더 내에 있는 js 파일 안에 aaaaa를 ccccc 로 바꿔주세요.”라고 요청해보겠습니다. 그러면 ② 요청을 명령어로 보여줍니다. ③ 결과를 클립보드에 복사할지, 설명을 더 요청할 것인지, 요청을 수정할 것인지 등을 선택할 수 있습니다.

저는 마음이 바뀌어서 Revise command를 선택했습니다.

05 다시 수정 요청을 해보겠습니다. “ddddd”로 바꿔달라 요청을 했습니다. 그랬더니 역시나 답변을 보여줍니다. 이번에는 Copy command to clipboard를 선택했습니다.

이제 클립보드에 코파일럿이 제안하는 명령어가 복사되어 있습니다. 터미널에 복사한 명령어를 실행해보겠습니다. 그랬더니 “aaaaa” 코드가 “ddddd”로 바뀌었습니다.

06 수정된 코드가 잘 동작하는지 ① gh copilot explain 명령을 입력한 후에 ② 복사했던 명령어를 제공하여 설명을 요청해보겠습니다.

다음과 같이 한 줄 한 줄 설명을 해주네요.

지금까지 깃허브 코파일럿 VSCode 설치 및 사용법, 코파일럿 CLI에 대해서도 간단히 알아보았습니다. 코파일럿과 함께 AI 페어 프로그래밍을 시작하세요.