VS Code에서 '똑똑한' 기능 추구

2023년 11월 13일, Chris Dias 작성, @chrisdias

지난주 GitHub Universe에 참여하셨다면, 개발자 워크플로우 전반에 걸친 인공지능의 놀라운 발전, 혁신, 비전을 보셨을 것입니다. 이 블로그 게시물에서는 이러한 광범위한 비전을 실현하는 데 도움이 되는 지난 몇 달간 Visual Studio Code의 발전에 초점을 맞출 것입니다.

"매우 똑똑한"

Matt Damon과 Ben Affleck의 명작 영화 "굿 윌 헌팅"에서 제가 가장 좋아하는 대사 중 하나는 Morgan(Casey Affleck, Ben의 동생)이 Will(Matt Damon)이 Chuckie(Ben Affleck)와 지나치게 자신감 넘치는 "1학년 대학원생" 사이의 대결을 중재하면서 미국 역사에 대한 사실을 페이지별로, 단어별로 암기하여 말하는 장면에서 나오는 "내 아들이 아주 똑똑하다"입니다.

이 대사는 Will(Matt Damon)이 읽었던 모든 책으로 훈련받았고 대화에 기반하여 그것들을 기억해낼 수 있었다고 말할 수 있습니다.

AI는 Will과 비슷합니다. 텍스트에 대해 많은 것을 알고 있습니다. 하지만 AI에 빠져있는 것, 즉 인간이 가지고 있지만 AI는 가지고 있지 않은 것은 최고의 답변을 제공하기 위해 특정 상호작용의 맥락입니다. Will의 경우, 그는 "방의 분위기를 읽을" 수 있기 때문에 자신의 책 지식을 활용하여 신중하게 만들어진 답변을 반박할 수 있습니다.

대규모 언어 모델(LLM)은 특정 시점의 공개 리포지토리 데이터로 훈련됩니다. 즉, 현재 코드에 대해서는 아무것도 모른다는 뜻입니다. 코드를 일반적으로는 알지만, 코드에 대한 질문에 정확하게 답변하거나 작업 공간의 형식과 기능을 따르는 새 코드를 제안하는 데 필요한 맥락이 없습니다.

이를 해결하기 위해 GitHub Copilot Chat은 모델이 질문에 더 잘 답변하는 데 도움이 되는 코드 조각을 보냅니다 (이를 검색 증강 생성, "RAG"라고 합니다). 가장 관련성이 높은 코드를 보면 답변이 향상됩니다. 하지만 LLM에 보낼 수 있는 코드 양(및 프롬프트를 통한 안내)에는 제한이 있습니다. 작은 프로젝트의 경우 이는 일반적으로 문제가 되지 않습니다. 하지만 대규모 소스 코드 리포지토리를 생각해 보면, 모든 파일의 내용을 모델에 보내는 것은 불가능하다는 것을 빠르게 깨달을 것입니다. 더 나은 답변을 얻기 위한 해결책은 합리적인 시간 내에 올바른 양의 리소스를 사용하여 관련 맥락을 보내는 것입니다. 이를 돕고 다른 많은 시나리오를 잠금 해제하기 위해 Copilot Chat에 **참여자**라는 개념을 추가했습니다.

참여자

채팅 참여자는 사용자의 쿼리를 원하는 방식으로 답변할 수 있는 도메인 전문가입니다. 쿼리 처리에서 AI를 완전히 사용하거나 백엔드 서비스로 전달하는 기존 방식을 사용할 수 있습니다. 참여자는 대규모 언어 모델에 도메인별 도구에 대한 액세스 권한을 제공할 수도 있습니다. LLM의 도움으로 참여자는 도구를 선택하고 호출 방법을 정의할 수 있습니다. 이러한 채팅 참여자의 한 가지 예는 @workspace입니다. @workspace 참여자는 작업 공간에 대해 알고 있으며 해당 작업 공간에 대한 질문에 답변할 수 있습니다. 내부적으로 참여자는 GitHub의 지식 그래프와 의미론적 검색, 로컬 코드 인덱스, VS Code의 언어 서비스를 결합한 다양한 도구로 구동됩니다.

채팅 참여자는 클라이언트 또는 서비스에서 제공할 수 있습니다. GitHub Universe에서는 github.com 채팅 경험에서 "Docs Agent"라는 서비스 측 참여자에 대한 데모가 있었습니다. 이 에이전트는 리포지토리에서 찾은 문서를 검색하는 방법을 알고 있습니다(곧 VS Code에 제공될 예정).

클라이언트 측 참여자는 기존 VS Code 확장을 통해 제공될 수 있습니다. 이에 대한 자세한 내용은 확장성 섹션에서 다루겠지만, 현재 VS Code에서 사용할 수 있는 두 가지 채팅 참여자인 @workspace와 @vscode를 살펴보겠습니다.

@workspace

@workspace 참여자는 작업 공간에 있는 코드에 대한 맥락을 수집하는 방법을 알고 있으며, 코드 탐색, 관련 클래스, 파일 찾기 등을 도울 수 있습니다. VS Code 리포지토리에서 현재 ICodeEditor를 담당하는 서비스에 대해 자세히 알아보고 싶다고 가정해 보겠습니다. 참여자를 다음과 같이 사용할 수 있습니다.

@workspace 참여자에게 "현재 ICodeEditor를 얻으려면 어떤 서비스 클래스를 사용해야 하나요?"라고 질문하는 데 자연어가 사용됩니다. 거기서부터 참여자는 LLM에 보낼 정확한 양의 맥락을 얻기 위해 다음을 수행합니다.

• vscode 리포지토리는 GitHub Search Blackbird 서비스에 의해 인덱싱되었습니다. @workspace 참여자는 이 인덱스를 도구로 사용하여 리포지토리 지식 그래프에 액세스합니다. @workspace 참여자는 의미론적 검색을 실행하여 관련 코드 조각과 메타데이터를 반환합니다. GitHub 검색 서비스는 상위 10,000개의 GitHub 리포지토리를 인덱싱했으며, 더 많은 리포지토리를 추가할 계획입니다.

• @workspace 참여자가 사용하는 다음 도구는 로컬 인덱스에 대한 어휘 텍스트 검색으로, 로컬, 커밋되지 않은 변경 사항 및 Copilot 대화 기록과 같은 추가 코드를 찾습니다.

• 그런 다음 @workspace는 최종 도구인 VS Code의 언어 지능을 사용하여 함수 시그니처, 매개변수 및 인라인 문서와 같은 중요한 세부 정보를 추가합니다.

이러한 맥락 조각은 모두 @workspace 참여자에 의해 순위가 매겨지고, 분할되고, 요약된 다음 LLM으로 보내져 질문에 답변합니다.

필요한 모든 맥락을 가지고 있기 때문에 @workspace 참여자는 개발자가 훨씬 더 많이 질문할 가능성이 있는 종류의 질문에 답변할 수 있습니다. 예를 들어, 코드의 다른 부분이 어떻게 상호 작용하는지에 대한 질문입니다.

• "@workspace 알림은 어떻게 예약되나요?"

또는 관련 코드, 종속성 및 디자인 패턴에 대한 지식이 필요한 질문입니다.

• "@workspace 뉴스레터 페이지와 유사하게 양식 유효성 검사를 추가합니다."

@vscode

VS Code는 매우 다양한 방식으로 사용자 지정할 수 있어 VS Code 팀원조차도 숨겨진 기능을 발견할 때 즐겁게 놀라곤 합니다. 사용자와 팀원 모두 VS Code의 전체 기능을 활용하도록 돕기 위해 @vscode 참여자를 만들었습니다.

이 참여자는 VS Code에 대해 모든 것을 알고 있으며 자연어와 VS Code 명령 및 사용자 지정 간의 격차를 해소하는 데 도움을 줄 수 있습니다. @vscode 참여자는 내부적으로 모든 설정과 명령의 인덱스에 액세스할 수 있는 도구를 사용하며, 곧 VS Code 문서를 사용할 수 있도록 도구를 추가하고 있습니다. 이제 "@vscode vscode가 파일을 가짜로 열 때 그 기능의 이름은 무엇인가요? 그리고 그것을 비활성화하는 방법은요?"와 같이 모호한 질문을 할 수 있습니다.

응답에 **설정 편집기에서 보기** 버튼이 있다는 점에 유의하십시오. 이는 @vscode 참여자가 VS Code가 작동하는 방식에 대해 알 뿐만 아니라 설정 편집기 또는 명령 팔레트를 호출하는 도구를 가지고 있기 때문입니다.

또한 명령 팔레트가 이제 유사성 검색을 지원하므로 명령을 검색할 때 정확한 이름을 알 필요가 없습니다. 팀이 매월 릴리스하는 모든 좋은 기능을 활용하기 위해 더 이상 고유한 VS Code 용어를 사용할 필요가 없습니다.

이것은 @vscode 참여자의 시작일 뿐입니다. 사용자가 VS Code를 더 잘 이해하고 완전히 제어할 수 있도록 더 많은 시나리오를 지원할 계획입니다.

슬래시 명령어

채팅 참여자는 참여자가 제공하는 특정 기능에 대한 바로 가기인 **슬래시 명령어**를 제공할 수도 있습니다. 질문에 답변할 때 작업 중 하나는 의도를 결정하고 사용자가 무엇을 하고 싶은지 이해하는 것입니다.

"Node.js Express Pug TypeScript로 새 작업 공간 만들기"는 새 프로젝트를 원한다는 것을 의미하지만, "@workspace /new Node.js Express Pug TypeScript"는 명확하고 간결하며 입력 시간을 절약합니다.

의도가 명확해지면 @workspace 참여자는 자연어의 고유한 모호성에도 불구하고 사용자의 요구를 충족시킬 가능성이 훨씬 높아집니다. @workspace는 디렉터리 구조를 제안할 수 있으며 사용자는 제안된 파일을 클릭하여 미리 볼 수 있습니다. 새 파일을 생성하여 새 폴더에 만들 **작업 공간 만들기** 버튼이 있습니다.

확장성

"VS Code는 단순히 껍데기일 뿐입니다. 빛나게 하려면 확장 프로그램이 필요합니다!" - VS Code 확장에 대해 작업하는 Microsoft 팀의 일반적인 회의 구호로, VS Code 성공에서의 역할을 자랑스럽게 선보입니다. VS Code 핵심 팀으로서 우리도 이에 전적으로 동의합니다. 풍부한 확장 생태계 없이는 VS Code가 오늘날의 제품이 되지 못했을 것입니다! AI도 다르지 않으며, 핵심 AI 경험이 Copilot으로 빛을 발하지만, 모든 확장 프로그램이 참여하여 LLM 모델이 가능한 최고의 맥락과 기반을 갖도록 하는 것이 우리의 비전입니다. 오늘날 우리는 제안된 상태에 **채팅 참여자 API**를 추가함으로써 이러한 비전의 기반을 마련합니다.

채팅 참여자 API를 사용하면 확장에서 사용자가 특정 질문에 답변할 수 있는 참여자를 제공할 수 있습니다. @workspace 및 @vscode 참여자는 모두 이 API를 사용하여 구현됩니다. 채팅 참여자를 통해 사용자는 편집기 흐름을 유지하면서 내부 및 외부 루프 도구의 풍부하고 최신 정보를 AI 대화에 가져올 수 있습니다. 참여자는 특정 영역의 전문가와 같으며, 사용자가 프롬프트에서 @참여자를 명시적으로 언급하면 해당 프롬프트는 해당 특정 참여자를 제공한 확장 프로그램으로 전달됩니다.

참여자는 간단한 텍스트 및 이미지 응답을 위해 Markdown을 사용하거나 파일 트리 또는 버튼을 사용하여 더 상호 작용적인 경험을 제공할 수 있습니다. 예를 들어, 참여자가 사용자에게 새 작업 공간을 생성하도록 제안할 때 파일 트리를 미리 보기로 사용할 수 있습니다. 참여자는 각 응답에 대해 후속 조치를 제공할 수 있으며, 대화를 더 발전시키는 방법에 대한 제안으로 상상할 수 있습니다. 원활한 사용자 경험을 제공하기 위해 전체 API는 스트리밍 기반입니다. 이미 언급했듯이 참여자는 슬래시 명령어, 즉 특정 기능에 대한 바로 가기를 제공할 수 있습니다. 예를 들어, @docker 참여자는 /generate 슬래시 명령어를 제공하여 "@docker /generate 작업 공간에 대한 DOCKERFILE"과 같은 사용자 프롬프트를 생성할 수 있습니다. 현재 명확하고 간결한 구문은 편리한 시간 절약이 될 수 있습니다. 그럼에도 불구하고, VS Code 핵심에서 사용자의 자연어 프롬프트를 기반으로 올바른 참여자와 슬래시 명령어를 자동으로 선택할 수 있도록 의도 감지를 위해 노력하고 있습니다.

VS Code에 Azure 또는 Docker에 대해 알고 있는 채팅 참여자를 설치한다고 상상해 보세요. 또는 당신이 잘하고 있다는 것을 확인시켜주는 귀여운 동물을 보여주기 위해 이미지 생성을 도구로 사용하는 DALL-E 참여자가 필요할 수도 있습니다.

참여자는 해당 도메인에 대한 도구에 액세스하면서 모든 도메인별 콘텐츠를 가져올 수 있습니다. 예를 들어, 1ES는 One Engineering System의 약자로 Microsoft의 내부 엔지니어링 시스템입니다. 1ES VS Code 확장은 내부 Microsoft 엔지니어를 위한 특정 질문에 답변할 수 있는 @1es 참여자를 제공합니다. @1es 참여자는 실제로 무엇을 하고 있는지 동적으로 계획하고 보여줍니다. LLM 모델에서 사용 가능한 일부 공개 데이터를 사용하지만, Microsoft 내부의 특정 사항도 인식하고 둘을 결합하여 최상의 답변을 제공합니다.

그리고 참여자는 현재 맥락을 가지고 있으므로 토론을 계속할 수 있습니다.

또한 확장이 LLM에 액세스할 수 있도록 하는 API를 추가하고 있으며, LLM을 사용하여 사용자 쿼리를 처리하고 답변할 수 있습니다. 현재 이 API는 참여자를 구현하는 확장에만 제한됩니다. 채팅 참여자 API는 정확한 사용자 프롬프트를 제공된 참여자에게 전달하며, LLM 액세스를 통해 참여자는 이러한 언어 프롬프트를 특정 백엔드 API 호출로 편리하게 전환할 수 있습니다. 이 API의 사용은 신중하고 투명하게 처리하여 사용자가 참여자에 의해 사용된 요청 및 토큰 수를 알 수 있도록 할 것입니다.

채팅 참여자 API는 여전히 제안된 상태이며, API를 개선하기 위한 피드백을 찾고 있으며, 가까운 시일 내에 API를 최종 확정하는 것을 목표로 합니다. 이미 오늘날 시도해 볼 수 있으며, 시작하기에 가장 좋은 방법은 채팅 참여자 확장성 샘플입니다. 여러분이 만드는 개발자를 위한 AI 기반 혁신을 볼 수 있기를 기대합니다.

편의성

참여자들과 그것이 가져다주는 무한한 가능성에 대해 매우 기대하고 있지만, 일반적인 작업 흐름에서 VS Code에 바로 추가하는 편리한 Copilot 기반 상호 작용에 대해서도 이야기하고 싶습니다. AI의 이점을 활용하기 위해 편집기를 다시 배울 필요는 없습니다.

스마트 액션

스마트 액션은 VS Code 흐름에 원활하게 통합되어 있으며(예: 빠른 수정 및 컨텍스트 메뉴), 프롬프트를 전혀 작성할 필요가 없습니다. 가장 강력한 스마트 액션은 /fix입니다. 다음은 "숫자 타입은 'never' 타입에 할당할 수 없습니다."라는 오류가 표시되는 비교적 간단한 TypeScript 퀵 정렬 알고리즘입니다. 전구 아이콘을 클릭하고 **Copilot으로 수정**을 선택합니다.

이 옵션은 /fix와 오류 메시지가 포함된 인라인 채팅을 엽니다. 백엔드에서는 추가 VS Code 진단 컨텍스트를 가져와 Copilot이 left 및 right 배열을 올바른 타입 선언을 사용하도록 업데이트하는 수정 사항을 제공할 수 있습니다.

/fix는 전통적인 도구가 때때로 부족한 셸과 같은 언어에 특히 유용하다는 것을 알게 되었습니다.

제안을 더 명확하게 하기 위해 Copilot은 특정 수정 사항을 제안한 이유를 설명하려고 시도합니다. 사용자가 제안된 Copilot 수정 사항을 약 60%의 시간 동안 수락한다는 것을 알게 되어 기쁩니다. 때로는 수정 사항이 전구 근처의 소스 코드와 관련이 없을 수 있으며, 누락된 종속성을 설치해야 하는 경우 /fix는 통합 터미널에서 실행할 수 있는 명령을 제안합니다.

/fix와 유사하게 /doc 스마트 액션도 사용자들 사이에서 인기가 있습니다. /doc을 사용하려면 코드 블록을 선택하고 마우스 오른쪽 버튼을 클릭한 후 **Copilot** > **문서 생성**을 선택합니다. Copilot은 코드에 대한 문서 주석을 생성할 것이며, 문서 품질에 놀랄 것이라고 생각합니다.

커밋 및 풀 요청 메시지 생성

때로는 의도가 명확합니다. 그런 경우 AI와의 경험은 거의 마법처럼 느껴질 수 있습니다. 제가 현재 가장 좋아하는 것은 Copilot이 커밋 메시지를 자동으로 생성할 수 있다는 것입니다. Copilot이 설치된 소스 코드 보기에서 커밋 메시지 필드 옆에 새로운 반짝이 아이콘이 보입니다. 반짝이를 선택하면 Copilot이 메시지를 채웁니다!

이 경험에 대해 너무 기대되어, VS Code의 Markdown을 편집하면서 vscode.dev/github를 사용하여 얼마 전 이 커밋을 했습니다. Copilot 확장은 아직 웹 지원이 되지 않기 때문입니다.

흐름으로 돌아가서 계속 진행하고 풀 요청을 만들어 보겠습니다. GitHub Pull Requests and Issues 확장이 설치되어 있으며, 이 확장은 Copilot Chat 확장의 존재를 알고 있습니다. PR을 만들 때 제목 및 설명 옆에 또 다른 반짝이 아이콘이 있습니다. 선택하면 Copilot이 자동으로 좋은 설명을 작성합니다!

이것은 AI가 매주 10번 또는 100번씩 수행하는 간단하지만 지루한 작업을 자동으로 처리하여 생산성을 높이는 데 도움이 되는 또 다른 영역입니다.

뭐라고?!

그리고 마지막으로, 진정한 스마트 AI를 만드는 것은 상호 작용을 최대한 쉽게 만드는 것입니다.

지난 몇 년 동안 업계는 음성 인식 기술에서 매우 발전했습니다. 우리는 많은 사람들이 음성 비서와 고급 LLM의 조합을 오랫동안 바라왔다는 것을 알고 있습니다. 이제 VS Code에서 두 가지를 함께 사용할 수 있습니다.

새로운 VS Code Speech 확장은 VS Code에 음성을 텍스트로 변환하는 지원을 제공합니다. 설치하면 모든 자연어 입력 대화 상자에 마이크 아이콘이 표시됩니다. 선택하고 Copilot에게 질문하고 마법을 즐기세요.

어때요!? 내가 당신의 아들이 매우 똑똑하다고 말했잖아!

이 확장은 아직 미리 보기 상태이며 현재 영어만 지원하지만, 앞으로 몇 달 동안 새로운 언어와 기능으로 계속 업데이트할 것입니다.

더 열심히 일하기보다 더 똑똑하게 일하세요

위에서 언급한 모든 것과 그 이상이 오늘날 VS Code에서 사용할 수 있습니다! GitHub Copilot 확장을 설치하기만 하면 됩니다. 그리고 Copilot Chat 기능에 대한 자세한 내용은 문서에서 확인할 수 있습니다.

감사합니다!

Chris와 VS Code 팀

행복한 **스마트** 코딩!