AI 컨텍스트 관리

올바른 컨텍스트를 제공하면 VS Code에서 AI로부터 더 관련성 높고 정확한 응답을 얻을 수 있습니다. 이 문서에서는 채팅에서 컨텍스트를 관리하는 방법, #-멘션을 사용하여 파일, 폴더 및 기호를 참조하는 방법, 웹 콘텐츠를 참조하는 방법 또는 사용자 지정 지침을 사용하여 AI의 응답을 안내하는 방법을 배웁니다.

작업 공간 인덱싱

VS Code는 인덱스를 사용하여 관련 코드 조각을 코드베이스에서 빠르고 정확하게 검색합니다. 이 인덱스는 GitHub에서 유지 관리하거나 로컬 컴퓨터에 저장할 수 있습니다.

다음과 같은 작업 영역 인덱싱 옵션을 사용할 수 있습니다.

• 원격 인덱스: 코드가 GitHub 리포지토리에 호스팅되어 있는 경우 원격 인덱스를 빌드하여 대규모 코드베이스의 코드베이스를 빠르게 검색할 수 있습니다.
• 로컬 인덱스: 로컬 컴퓨터에 저장된 고급 의미 체계 인덱스를 사용하여 코드베이스에 대한 빠르고 정확한 검색 결과를 제공합니다.
• 기본 인덱스: 로컬 인덱싱을 사용할 수 없는 경우 더 큰 코드베이스에 대해 로컬에서 작동하도록 최적화된 더 간단한 알고리즘을 사용할 수 있습니다.

작업 영역 인덱싱에 대해 자세히 알아보기.

암시적 컨텍스트

VS Code는 현재 활동을 기반으로 채팅 프롬프트에 컨텍스트를 자동으로 제공합니다. 다음 정보는 암시적으로 채팅 컨텍스트에 포함됩니다.

• 활성 편집기에서 현재 선택된 텍스트입니다.
• 활성 편집기의 파일 이름 또는 노트북 이름입니다.
• Ask 또는 Edit를 사용하는 경우 활성 파일이 자동으로 컨텍스트로 포함됩니다.
• 에이전트를 사용할 때 에이전트는 프롬프트에 따라 활성 파일이 채팅 컨텍스트에 추가해야 하는지 여부를 자율적으로 결정합니다.

#-멘션

#을 입력한 다음 멘션하려는 컨텍스트 항목을 입력하여 프롬프트에 컨텍스트를 명시적으로 추가할 수 있습니다. VS Code는 파일, 폴더, 코드 기호, 도구, 터미널 출력, 소스 제어 변경 등 다양한 유형의 컨텍스트 항목을 지원합니다.

채팅 입력 필드에 # 기호를 입력하여 사용 가능한 컨텍스트 항목 목록을 보거나 채팅 보기에서 **컨텍스트 추가**를 선택하여 컨텍스트 선택기를 엽니다.

지원되는 컨텍스트 항목 전체 목록을 봅니다.

파일을 컨텍스트로 추가

특정 파일, 폴더 또는 기호를 컨텍스트로 제공하려면 다음 방법을 사용하여 채팅에 추가합니다.

• 채팅 메시지에 # 다음에 파일, 폴더 또는 기호 이름을 입력하여 해당 항목을 #-멘션합니다. 기호를 참조하려면 먼저 편집기에서 해당 기호가 포함된 파일을 열어야 합니다.

• 탐색기 보기, 검색 보기 또는 편집기 탭에서 파일 또는 폴더를 채팅 보기로 드래그 앤 드롭하여 컨텍스트로 추가합니다.

• 채팅 보기에서 **컨텍스트 추가**를 선택하고 빠른 선택에서 **파일 및 폴더** 또는 **기호**를 선택합니다.

코드베이스 검색 수행

개별 파일을 수동으로 추가하는 대신 VS Code가 코드베이스에서 올바른 파일을 자동으로 찾도록 할 수 있습니다. 질문과 관련성이 있는 파일을 모르는 경우 유용할 수 있습니다.

프롬프트에 #codebase를 추가하거나 **컨텍스트 추가** > **도구** > **codebase**를 선택하여 작업 영역에 대한 코드 검색을 활성화합니다.

다음 프롬프트 예시는 코드베이스 검색을 사용하는 방법을 보여줍니다.

• "#codebase에서 인증이 작동하는 방식 설명"
• "데이터베이스 연결 문자열은 어디에 구성되어 있습니까? #codebase"
• "주소 업데이트를 위한 새 API 경로 추가 #codebase"

에이전트를 사용하는 경우 에이전트는 질문에 답변하는 데 추가 컨텍스트가 필요하다고 판단하면 코드베이스 검색을 자동으로 사용합니다. 질문이 여러 방식으로 해석될 수 있고 에이전트가 코드베이스 검색을 사용하도록 확실히 하려면 여전히 #codebase를 추가할 수 있습니다.

웹에서 콘텐츠 참조

최신 API 참조 또는 코드 예제를 얻기 위해 채팅 프롬프트에서 웹의 콘텐츠를 참조할 수 있습니다.

• #fetch <URL>

  fetch 도구를 사용하여 특정 웹 페이지의 콘텐츠를 검색합니다. 이 도구를 사용하려면 #fetch 다음에 참조하려는 페이지의 URL을 입력합니다.

  fetch 도구는 성능 향상을 위해 웹 페이지의 콘텐츠를 제한된 시간 동안 캐시합니다. 페이지의 콘텐츠가 변경되면 VS Code를 다시 시작하여 새로 고침을 강제할 수 있습니다. 페이지에 액세스할 수 없는 경우 캐시는 짧은 시간(약 5분) 후에 만료됩니다.

  VS Code는 개인 정보 보호 및 보안을 위해 외부 URL에 액세스하기 전에 확인을 요청합니다. URL 자동 승인 구성에 대해 자세히 알아봅니다.

  fetch 도구를 사용한 예제 프롬프트

  • "VS Code 1.100의 주요 내용은 무엇인가요? #fetch https://vscode.gisul.kr/updates/v1_100"
  • "asp.net 앱을 .net 9로 업데이트 #fetch https://learn.microsoft.com/en-us/aspnet/core/migration/80-90"

• #githubRepo <repo 이름>

  githubRepo 도구를 사용하여 GitHub 리포지토리 내에서 코드 검색을 수행합니다. #githubRepo 다음에 리포지토리 이름을 입력합니다.

  githubRepo 도구를 사용한 예제 프롬프트

  • "next.js에서 라우팅은 어떻게 작동하나요? #githubRepo vercel/next.js"
  • "코드 검토를 수행하여 #githubRepo microsoft/typescript와 일관되는지 확인"

도구 참조

에이전트를 사용할 때 에이전트는 특정 작업을 수행하기 위해 도구를 사용할지 자율적으로 결정합니다. 채팅 프롬프트에서 도구를 명시적으로 참조하려면 #-멘션을 사용할 수 있습니다. # 다음에 도구 이름과 선택적 매개변수를 입력합니다.

• "#fetch https://vscode.gisul.kr/updates 요약"
• "라우팅은 어떻게 작동하나요? #githubRepo vercel/next.js"
• "내 열린 문제는 무엇인가요? #github-mcp" (GitHub MCP 서버의 도구 사용)

도구 세트 또는 MCP 서버를 이름으로 참조하는 경우 해당 세트 또는 서버의 모든 도구가 현재 프롬프트에 대해 에이전트에서 사용할 수 있습니다.

채팅에서 도구를 추가하고 사용하는 방법에 대해 자세히 알아봅니다.

@-멘션

채팅 참가자는 채팅에서 도메인별 질문을 할 수 있는 전문화된 도우미입니다. 채팅 참가자는 채팅 요청을 전달하고 나머지는 처리하는 도메인 전문가로 생각할 수 있습니다.

채팅 참가자는 에이전트 흐름의 일부로 특정 작업을 수행하는 데 사용되는 도구와 다릅니다.

@ 다음에 참가자 이름을 입력하여 채팅 참가자를 호출할 수 있습니다. VS Code에는 @vscode, @terminal 또는 @workspace와 같은 여러 내장 채팅 참가자가 있습니다. 해당 도메인에 대한 질문에 답변하도록 최적화되어 있습니다.

다음 예시는 채팅 프롬프트에서 @-멘션을 사용하는 방법을 보여줍니다.

• "@vscode 단어 줄 바꿈을 활성화하는 방법"
• "@terminal 현재 디렉터리에서 가장 큰 파일 5개는 무엇인가요?"

채팅 입력 필드에 @를 입력하여 사용 가능한 채팅 참가자 목록을 봅니다.

확장 프로그램은 자체 채팅 참가자를 제공할 수도 있습니다.

비전

채팅은 비전 기능을 지원하므로 이미지을 채팅 프롬프트에 컨텍스트로 첨부하고 해당 이미지에 대해 질문할 수 있습니다. 예를 들어 코드 블록의 스크린샷을 첨부하고 설명을 요청하거나 UI 스케치를 첨부하고 에이전트에게 구현을 요청할 수 있습니다.

브라우저 요소 추가 (실험적)

VS Code에는 VS Code 내에서 웹 페이지를 미리 보고 상호 작용할 수 있는 내장 브라우저가 있습니다. 예를 들어 웹 애플리케이션의 빠른 테스트 및 디버깅을 수행하는 데 사용할 수 있습니다.

Simple Browser 창의 요소를 채팅 프롬프트에 컨텍스트로 추가할 수 있습니다. HTML 요소, CSS 스타일 또는 JavaScript 코드와 같은 웹 페이지의 특정 부분에 대한 도움을 받고 싶을 때 유용합니다.

Simple Browser의 요소를 채팅 프롬프트에 추가하려면

1. chat.sendElementsToChat.enabled 설정을 사용하여 Simple Browser에서 선택을 활성화합니다. chat.sendElementsToChat.enabled.

2. 웹 애플리케이션을 시작합니다.

3. 명령 팔레트에서 **Simple Browser: Show** 명령을 실행하여 Simple Browser 보기을 엽니다.

4. **시작** 버튼을 선택하여 현재 페이지의 요소를 선택합니다.

5. 웹 페이지의 요소를 마우스로 가리키고 클릭하여 채팅 프롬프트에 추가합니다.

   선택한 요소가 현재 채팅 프롬프트에 컨텍스트로 추가됩니다.

컨텍스트에 포함되는 정보를 구성할 수 있습니다.

• CSS 첨부 - chat.sendElementsToChat.attachCSS 설정을 사용하여 활성화합니다. chat.sendElementsToChat.attachCSS.
• 이미지 첨부 - chat.sendElementsToChat.attachImages 설정을 사용하여 활성화합니다. chat.sendElementsToChat.attachImages.