VSCode(Visual Studio Code)의 GitHub Copilot를 활용하는 6가지 방법

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

VSCode의 GitHub Copilot사용할 때 체크 리스트

1. 적절한 AI모델을 선택 : 신속한 코딩 혹은 계획/추론을 위한 모델 중 선택
2. 적절한 모드를 선택 : 편집, 질문 혹은 코드를 계속 작성하기 위한 적절한 툴을 사용
3. 지시(룰) 설정 : 커스텀 지시(즉, 룰)을 사용해서 코딩 및 구조의 표준의 표준에 준거한 코드를 제안하도록 설정
4. 프롬프트 엔지니어링 : 효과적인 프롬프트를 작성해, 최적의 답변을 얻기 위한 컨택스트를 제공
5. 워크스페이스 인덱스 : Codebase에 대한 질문에 대해 정확한 답변을 획득
6. 프롬프트의 재이용 : 프로젝트내의 태스크에 특화시킨 프롬프트를 저장후 재이용

 

 

1. 적절한 AI모델을 선택

---

Copilot는 특정 니즈에 맞춰 선택할 수 있는 AI를 제공하고 있다 :

1) 신속한 코딩을 위한 모델 : 간단하고 복잡하지 않은 코드 작성 태스크에 적절

• GPT-4o
• GPT-4.1 (base의 Github Copilot)
• 제미나이2.0

2) 추론/계획 : 복잡한 추론이나 계획에 필요한 태스크에 적절

• Claude Sonnet 3.7
• Claude Sonnet 4.0
• Claude Opus 4.0
• 제미나이 2.5 프로

 

 

2. 적절한 모드를 선택

---

Mode	Use Case
코드 보완	코딩중에 직접 인라인 제안을 받거나, 컨택스트를 작성해 직접 코드를 생성할 때 사용(파일 내에서 여러 가지 탭을 사용할 때는 설정으로 NES를 유효할 것)
채팅	특정 업무에 대해서 채팅 대화를 작성해 디자인 아이디어를 브레인스토밍하거나 계획을 세우거나, 더욱 정확한 코드를 제안받을 때 사용
편집	자연 언어를 사용하여 코드 편집 세션을 시작. 워크 스페이스내의 여러 파일에 대해 대규모 변경을 자동적으로 할 때 적합
에이전트	고레벨의 요구를 실행하기 위한 에이전트 코딩 플로우를 시작. Copilot는 계획을 세우고, 필요한 코드 변경이나 태스크를 실행하기 위해 많은 툴을 자동으로 호출하게 된다.

2.1 각 모드의 사용 방법 상세

2.1.1 채팅모드

사용예

• 복잡한 코드의 설명이 필요
• 새로운 혹은 모르는 개념이나 지식을 학습
• 디버그, 원인 검색 

장점

• 신속한 답변
• 현재 코드 파일을 Copilot이 편집하지 않음
• 에이전트 모드보다는 리스크가 적음

2.1.2 편집모드

사용예

• 코드의 형식/구조를 변경 (리팩토링 코드)
• 여러 파일에 걸처 자그마한 변경을 실행
• 툴이나 에이전트의 제안을 사용하지 않고 심플한 기능을 만듦

장점

• 특정 부분의 변경에 집중할 수 있음
• 제안된 코드를 수용하기 전 프리뷰할 수 있음
• 에이전트모드보다 리스크가 적음

2.1.3 에이전트 모드

사용예

• 복잡힌 기능을 여러 파일에 걸쳐 작성할 때 + 구조 룰이나 규정에 의해 상세 내용에 맞는 코드 작성이 필요할 때
• 복잡한 비즈니스 로직을 리팩토링할 때
• 외부 소스부터의 코딩 데이터를 제공할 필요가 있을 때 

장점

• 외부 툴을 최대한 활용한 많은 스탭이 실행됨
• 문맥 전체적인 이해
• 자동 승인을 설정한 경우, 보다 빠른 자동화가 가능

 

 

3. 인스트럭션(룰) 설정 

---

Copilot이 코드를 생성하거나 질문에 답변할 때 최대한 노력을 하지만 현재의 소스 코드에 적합하게 (예를 들면 사용하는 라이브러리나 변수의 명명 방법 등, …. ) 작성하기 위한 충분한 콘텍스트가 있다고는 할 수 없다. 따라서 특정 프레임워크(또는 라이브러리) 버전으로 작업할 경우 프롬프트에 추가 컨텍스트를 제공하는 것이 좋다.

 이럴 때 사용할 수 있는 기능이 룰의 설정이며, AI의 피드백을 향상시키기 위해 instructions files를 사용하여 코딩 인벤션, 도구 또는 세부 사양에 대한 맥락을 제공할 수 있다. 그리고 이러한 룰은 채팅 프롬프트에 첨부하거나 자동으로 적용할 수 있다.  적용하는 방법은 프로젝트(워크스페이스)를 위한 글로벌 인스트럭션(규칙)을 파일을 추가하는 것이며 파일 경로로 .github/copilot-instructions.md을 지정하면 자동으로 적용되게 할 수 있다.

3.1 새로운 인스트럭션(룰)을 작성하기 위해서는

Chat: New Instructions File 명령어 팔레트에서 (Ctrl/Cmd + Shift + P)에서 인스트럭션 파일을 추가한다. 파일의 확장자는 마크다운 형식을 추가하는 것을 추천하며 형식의 예는 다음과 같다.

# Custom instructions for Copilot

## Project context

This project is a web application built with React and Node.js.

## Indentation

We use tabs, not spaces.

## Coding style

Use camelCase for variable names and prefer arrow functions over traditional function expressions.

## Testing

We use Jest for unit testing and Playwright for end-to-end testing.

 그리고 옵션, 메타데이터 필드에 글로브 패턴을 추가한다. 또한 applyTo 어떤 파일에 지시를 적용할지 지정한다.

—
applyTo: “**/*.ts”
—
Coding practices for TypeScript files.
…

3.2 채팅내에서 인스트럭션(룰)의 사용

채팅에서 

• 선택 Add Context
• 선택 Instructions..

 

 

4. 프롬프트 엔지니어링

---

Copilot 응답의 질을 향상시키기 위해 효과적인 프롬프트를 사용하는 게 좋다. 잘 쓰여진 프롬프트는 Copilot이 요청을 더 잘 이해하고 더 적절한 코드 제안을 생성하는 데 도움이 된다.

4.1 일반 채팅으로 시작한 후에 구체화하는 방법

Generate a Calculator class.

Add methods for addition, subtraction, multiplication, division, and factorial.

Don‘t use any external libraries and don’t use recursion.

4.2 프롬프트에 예시를 제공하는 방법

Generate a function that takes a string and returns the number of vowels in it.

Example:

findVowels(“hello”) returns 2

findVowels(“sky”) returns 0

4.3 복잡한 작업을 보다 간단한 작업을 분할하여 제공하는 방법

(예) "식사 계획 프로젝트"라는 작업이 존재하는데 이를 아래와 같이 세분화하여 지시
1. 재료 목록을 받아 레시피 목록을 반환하는 함수를 생성합니다.
2. 함수를 생성하여 레시피 목록을 받고 쇼핑 목록을 반환합니다.
3.주 식사 계획을 반환하는 레시피 목록을 받는 함수를 생성합니다.

4.4 적절한 문맥과 도구를 제공하는 방법

 에이전트 모드, 버튼을 선택한 경우, Select Tools…를 사용하여 확실하게 사용할 필요가 있는 툴을 제공하거나, #+ {tool}
사용하는 #codebase는 Copilot이 코드 검색을 수행함으로써 적절한 파일을 자동으로 찾을 수 있도록 허용해준다(어디에 있는지 모르는 경우 AI가 코드를 찾도록 하기 위해 사용하고 확실하게 알고 있는 경우 직접 코드스코프를 타겟으로 해야한다)
 툴을 사용하도록 하게 할 경우 #fetch(커서 옆에 웹사이트 링크를 넣기만 하면 된다) 또는 @web을 사용하여 웹페이지에서 콘텐츠를 가져오거나 #githubRepo를 사용하여 GitHub 저장소에서 코드를 검색하도록 한다.
프롬프트에 파일, 폴더 또는 심볼을 참조로 추가하려면 #, # 또는 (예: #sym: handleCreateXXX). 파일, 폴더 또는 편집중인 탭을 채팅 프롬프트에 드래그 앤 드롭하여 수정과 관련된 부분이나 질문에 대한 설명을 제공할 수 있다. 

 또한 적절히 문제, 테스트 실패 또는 터미널 출력을 채팅 프롬프트에 추가하여 오류가 발생하고 있는 시나리오의 구체적인 컨텍스트를 제공하는 것이 좋다.

 프롬프트에 이미지 혹은 스크린샷을 추가하고, Copilot에 이미지 분석을 시킬 수도 있다.

 에이전트 모드, 프롬프트 미리보기 프로젝트를 직접 열기 위해 vscode에 내장된 브라우저를 사용하는 것도 좋은 방법이다. 사용할 경우 에이전트 모드, Copilot은 자동으로 적절한 파일과 컨텍스트를 검색한다(이 방법은 연구 시간의 최적화를 위한 것으로, 대상이 일정 범위에 도달하면 정확한 결과를 얻기 위해 새로운 채팅 세션에서 적절한 컨텍스트를 타겟으로 지정해야한다 – 팁: 미리 조사하여 내용을 파일 md에 올린 후 다른 채팅 세션에서 에이전트에게 분석 및 수정을 요청할 수 있다(커서는 다른 채팅에서 컨텍스트 @PastChats를 추가할 수 있다).

4.4.1 코드베이스 (워크스페이스) 컨텍스트의 팁

질문 표현 방법은 컨텍스트와 답변의 정확성에 큰 영향을 끼친다. 결과를 최적화하기 위해 아래 팁을 사용하는 것을 추천한다:

• 관련 문맥을 명확하게 포함하려면 코드를 선택하거나 다음과 같은 채팅 변수를 언급하라 : #editor #selection 혹은 #<file name>
• 답변은 여러 참조로 획득하도록 할 수 있도록 할 수 있다 : 예를 들면, 다음의 문구를 추가한다.
  • find exceptions without a catch block
  • provide examples of how handle Error is called 하지만, 코드 전체 분석을 기대하지 않는 것이 좋다. 예를 들어 how many times is this function invoked? 이나 rectify all bugs in this project와 같은 건 큰 효과가 없다.
  •  
• 코드과 관계 없는 정보를 제공하는 것 요청하지 않도록 한다 : 예를 들어 who contributed to this file?,  summarize review comments for this folder는 정확히 답변해주지 않느다.

4.4.2 변수 사용 #codebase를 사용하여 전체 소스 코드를 참조하도록 한다(커서 내의 /path-base-folder와 같음)

Where is the database connection string used in #codebase?

4.4.3 심볼을 사용하여 컨텍스트에 코드 선택을 제공한다

use function #sym:handleCreateXXX for refactor #create-xxx.ts

코드의 범위를 심볼로 타겟하는 방법(심볼은 변수, 함수, 클래스, 메서드 또는 워크스페이스 내의 다른 명명된 요소가 될 수 있습니다)

• 방법 1: # + {symbol}을 사용하고 그 후 tab을 누른다. 예: #handleCreateXXX , #DEFAULT_HEIGHT
• 방법 2: Add context → Symbols… → 변수명, 함수명 등을 입력 → enter

커서 IDE

• 방법 1 : @ + {symbol} (타깃을 각 심볼 1개씩 지정)
• 방법 2: 클릭 Add context → Code → 변수명, 함수명, …을 입력 → 체크박스(복수 심볼 선택 가능)

4.5 원하는대로 될 때까지 프롬프트 작성을 반복

기타 프롬프트를 추가하여 답변을 조정(refine) 또는 수정(modify)한다. 예를 들어:

• 채팅 프롬프트 1: "수의 층승을 계산하는 함수를 쓴다" → 답변
• 채팅 프롬프트 2: "재귀를 사용하지 않고, 캐싱을 사용하여 최적화한다" → 답변
• 채팅 프롬프트 3: "의미있는 변수명을 사용한다" → 답변

4.6 채팅 이력을 유지

Copilot은 동일한 채팅 대화 내의 이력을 사용하여 문맥을 제공한다. 이를 context Windows라고 한다. 따라서 관련이 없는 경우에는 이력에서 이전 질문이나 답변을 삭제하여 애매한 응답이 생성되거나 문맥을 벗어나는 것을 방지한다. 즉, 기존 문맥을 짧게 만들어야 한다.

새로운 작업이나 새로운 질문의 컨텍스트를 변경하려면 새로운 채팅 대화를 작성하는 것을 추천한다.

 

 

5. 워크스페이스 인덱스

---

Copilot은 소스 코드 내에서 빠르고 정확하게 검색하기 위해 인덱스를 사용한다(제알기로는 Cursor IDE나 다른 AI 코드도 마찬가지). 두 가지 인덱스가 존재한다.

• 리모트 인덱스: GitHub의 저장소를 위해 (vscode에 github 계정으로 로그인한 경우) GitHub의 코드를 사용하여 코드베이스 전체의 인덱스를 작성하여 Copilot이 규모가 큰 소스 코드에서도 신속하게 검색할 수 있도록 한다.
• 로컬 인덱스: GitHub 이외의 저장소용(vscode에서 github 계정에 로그인하지 않았거나 gitlab에 코드가 있는 경우…), Copilot은 로컬에서 인덱스를 만들어 효과적인 코드 검색을 지원한다(대량의 코드는 지원하지 않습니다).

5.1 Indexing 세부 정보 (Codebase indexing)

Codebase 기능은 언어 모델(LLM)의 컨텍스트에 전체 코드를 전달하지 않는다. 대신 스마트 검색 메커니즘을 사용하여 codebase에서 검색한 후 정보를 추출하여 효율적으로 사용한다.

5.1.1 Codebase의 VSCode Copilot이나 Cursor IDE에서의 동작 방법

5.1.1.1 인덱스 작성 및 삽입

프로젝트를 열면 Cursor는 코드베이스 전체를 인덱스화하고 소스 코드를 작은 섹션으로 분할하여 각각의 섹션의 임베딩을 계산한다. Cursor는 인덱스화 과정을 사용하여 프로젝트의 구조를 분석하고 이해한다.

여기에는 다음의 내용이 포함됩니다:

1. 파일 구조

2. 함수와 클래스의 정의

3. 변수선언

4. 소스코드 각 부분의 관계

 이러한 임베딩은 행의 위치와 파일의 상대 경로에 대한 정보와 함께 클라우드 상의 벡터 데이터베이스에 저장된다.

5.1.1.2 컨텍스트에 기반한 정보 취득

질문이나 소스 코드에 대한 요청을 하면 Cursor는 저장된 임베딩을 사용하여 관련된 코드 스니펫을 얻고 언어 모델의 컨텍스트에 필요한 부분만 제공하게 된다.

5.1.1.3 컨텍스트 제한

 앞서 말했듯, 대규모 언어 모델(LLMs)에는 콘텍스트의 사이즈에 제한이 있기 때문에 전체 코드 베이스를 송신하는 것은 불가능하다.  대신 Cursor는 프롬프트의 요청과 직접 관련된 코드 부분만을 컨텍스트에 추가한다.

 

6. 프롬프트의 재이용

---

파일 프롬프트는 특정 작업의 컨텍스트와 지시를 포함하는 프롬프트를 Markdown 파일에 저장하는 것을 가능하게 해준다. 그 프롬프트는 채팅 내에서 첨부 및 재사용할 수 있다. 작업 공간에 프롬프트를 저장하면 그것을 팀과 공유할 수도 있다.

6.1 재사용 가능한 프롬프트 만들기 (프롬프트 템플릿)

• 프롬프트 파일을 만들려면 Chat: New Prompt File을 명령 팔레트에서 선택합니다 (Ctrl/Cmd + Shift + P)
• 명령어는 파일 prompt.md에 작성한다 .github/prompts 디렉토리내의 루트 워크스페이스에서 프롬프트와 관련된 컨텍스트를 Markdown 형식으로 작성한다.

(예) 새로운 React 폼 컴포넌트를 만드는 예.

Your goal is to generate a new React form component.
Ask for the form name and fields if not provided.
Requirements for the form:
– Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
– Use `react-hook-form` for form state management:
– Always define TypeScript types for your form data
– Prefer _uncontrolled_ components using register
– Use `defaultValues` to prevent unnecessary rerenders
– Use `yup` for validation:
– Create reusable validation schemas in separate files
– Use TypeScript types to ensure type safety
– Customize UX-friendly validation rules

옵션으로 채팅에서 프롬프트 실행 방법에 대한 메타데이터를 추가할 수 있다. 필드 mode를 사용하여 채팅 모드를 지정하고 필드 tools를 사용하여 에이전트 모드의 툴을 지정하는 예는 다음과 같다.

—

mode: “agent”

tools: [“githubRepo”, “codebase”]

description: “Generate a new React form component”

—

Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.

Requirements for the form:

– Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)

– Use `react-hook-form` for form state management:

– Always define TypeScript types for your form data

6.2 채팅에서 프롬프트 템플릿 사용하기

타이핑해서 사용한다 / + {prompt file name}

예를 들어, 입력하는 /new-react-form은 이름이 붙여진 프롬프트 템플릿을 실행한다 .

github/prompts/new-react-form.prompt.md

---

참고자료

https://hblab.co.jp/blog/vscode-copilot/