이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

Visual Studio Code 및 GitHub Copilot

2023년 3월 30일 Chris Dias 작성, @chrisdias

이 블로그 게시물은 AI가 작성한 것이 아니지만 개발 경험을 놀랍도록 향상시킬 것입니다.

참고: Visual Studio Code에서 최신 GitHub Copilot 환경에 대해 자세히 알아보고 싶다면 VS Code의 GitHub Copilot 토픽으로 이동하십시오. 여기에는 Copilot 편집기 통합 및 인라인 채팅, 전용 채팅 보기, 빠른 채팅과 같은 Copilot 채팅 기능에 대한 자세한 내용이 포함되어 있습니다.

오늘날 인공 지능을 둘러싼 많은 관심, 흥분, 그리고 일부 우려가 있습니다. 거의 매일 발전을 이루고 있어 따라잡기 어렵습니다. 하지만 한번 시도해보면, 백만 명 이상의 Copilot 사용자들이 매일 보고 있는 것처럼, 특히 OpenAI의 GPT-3.5/4와 같은 대규모 언어 모델(LLM)을 통해 이 기술이 실망시키지 않는다는 것을 금방 깨닫게 됩니다.

이 게시물에서는 VS Code의 AI에 대한 배경 지식을 제공하고, GitHub Copilot으로 구동되는 몇 가지 흥미로운 새로운 경험을 보여드리며, 앞으로 우리가 어떤 방향으로 나아갈지 엿볼 것입니다.

GitHub Copilot "V1"

Microsoft의 개발자 AI 서비스는 GitHub Copilot입니다. 아직 GitHub의 전체 개발 라이프사이클에 대한 비전을 보지 못했다면, 이 훌륭한 블로그 게시물을 확인해 보세요.

Copilot 확장 프로그램이 처음 출시된 지 1년이 넘었습니다. GitHub의 Oege De Moor와 그의 팀은 OpenAI와 협력하여 LLM을 개발에 사용하는 최초의 대규모 사례, 특히 OpenAI의 codex 모델을 선보였습니다.

Editor with Copilot generated ghost (faded) text suggestions

Copilot은 주변 코드의 맥락을 기반으로 "유령 텍스트"로 제안을 제공하여 작성 중인 코드에 대한 실시간 힌트를 제공합니다. 주석으로 의도를 작성하거나 설명적인 함수 이름을 사용하면 Copilot은 이러한 힌트를 사용하여 단어별, 줄별, 또는 블록별로 코드를 자동으로 생성할 수 있습니다.

이것은 놀라울 정도로 효과적인 경험이며, 종종 유령 텍스트가 그대로 작동하여 부드러운 "Tab-Tab-Tab" 개발 흐름으로 코드를 작성하게 됩니다.

알고 보니 이것은 시작에 불과했습니다.

편집기 내 채팅

AI가 개발 프로세스에 침투하는 것은 시간 문제라고 생각했습니다. Copilot과 Copilot Labs 확장 프로그램에 대해 GitHub Next 팀과 협력해 왔지만, 2022년 11월 ChatGPT의 출시로 일정이 크게 단축되었습니다.

VS Code 팀은 AI를 VS Code에 더 깊이 통합하는 방법을 탐색하기 위해 내부 해커톤을 개최했으며, 향상된 이름 바꾸기 및 리팩터링, 예제를 기반으로 한 코드 변환, 자연어를 사용하여 파일 glob 패턴 또는 정규식 생성을 위한 방법과 같은 많은 멋진 아이디어를 떠올렸습니다.

이러한 아이디어들이 흥미로웠지만, 우리는 계속해서 채팅 경험에 대해 이야기했습니다. 우리는 상당한 회의론을 가지고 있었습니다. 우리 삶에 또 다른 채팅 경험이 정말 필요했을까요? VS Code는 편집기이며, 우리의 임무는 다음 유니콘을 완성하는 동안 방해 요소를 제거하여 여러분을 "집중 모드"로 이끌고 유지하는 것입니다.

우리가 흥미롭게 발견한 한 가지 탐색은 편집기에 직접 채팅을 구축하는 것이었습니다. 다음은 최초의 프로토타입입니다.

Prototype of a chat input in the editor

디자인을 반복하면서 이 사용자 모델에 장점이 있다는 것을 깨달았습니다. 키보드에서 쉽게 호출할 수 있고, 코드에 머물러 있으며, 출력은 코드(코드뿐)입니다.

아래 예에서는 먼저 users 배열을 선택한 다음 macOS에서는 Cmd+I (또는 Windows/Linux에서는 Ctrl+I)를 눌러 채팅 입력을 불러왔습니다. 그런 다음 Copilot에게 username 필드를 firstName과 lastName으로 분할하도록 요청했으며, 마지막으로 **인라인 차이**를 클릭하여 Copilot이 만든 변경 사항을 보았습니다.

Inline change with preview of update

주석이나 과도하게 설명적인 함수 이름을 사용하여 Copilot에게 의도를 표현할 필요 없이 Cmd+I를 누르고 원하는 작업을 설명하세요. Copilot이 작업을 수행하는 동안 집중 모드를 유지하세요.

채팅 보기 수용

ChatGPT에 대한 흥분이 커짐에 따라 사용자 지정 채팅 보기를 가진 내부 및 외부 확장 프로그램의 수도 증가했습니다. 이것들이 확장 가능하지 않을까 걱정했습니다. 웹 보기에서 키 바인딩 및 테마와 같은 기본 사항을 지원하기 어렵고, 코드 블록에 Monaco 편집기를 사용하는 사람들에게는 수백 개의 인스턴스로 확장하기가 매우 어렵습니다. 말할 것도 없이 해당 편집기 인스턴스에는 확장 프로그램 지원이 없습니다. 결과적으로 우리는 GitHub Copilot 팀과 긴밀히 협력하여 VS Code 코어에 채팅 보기를 구축했습니다.

초기의 망설임에도 불구하고 시간이 지남에 따라 전체 채팅 보기 경험이 우리를 사로잡기 시작했습니다. 누가 이런 인사로 하루를 시작하고 싶어하지 않겠습니까?

A GitHub Copilot conversation within an extension's chat view

채팅 보기의 더 많은 이점을 점점 더 많이 깨닫기 시작했습니다.

브라우저 기반 채팅에 비해 통합된 경험의 가장 명확한 가치는 모델에 컨텍스트를 제공하여 대화를 기반으로 더 나은 답변을 제공할 수 있다는 것입니다. 예를 들어, 여러 파일에 걸쳐 있는 코드를 최적화하도록 브라우저 기반 ChatGPT에게 쉽게 요청할 수 없습니다. VS Code는 이미 작업 공간에 대해 많은 것을 알고 있습니다. 파일 간 리팩터링, **모든 참조 찾기**, **정의로 이동** 등을 수행할 수 있는 방식이기 때문입니다. 모델이 더 관련성 높은 답변을 제공할 수 있도록 핵심 정보가 프롬프트에 책임감 있게 포함될 수 있으며, 궁극적으로는 여러 파일에 걸쳐 종속성이 있는 코드를 최적화하거나 리팩터링하도록 Copilot에게 요청할 수 있습니다.

많은 프로그래밍 질문에 대한 답변에는 종종 여러 단계가 포함됩니다. 얼마나 많은 블로그 게시물이 프로세스를 안내하는지 생각해 보세요. 채팅 보기는 이러한 유형의 상호 작용에 적합합니다. 훌륭한 예는 디버깅입니다. 솔직히 말하면(그리고 우리는 솔직합니다), 디버깅을 위해 launch.json 및 tasks.json을 구성하는 것은 쉽지 않습니다. 더 많은 문서를 작성하거나 편집기에 대화 상자 및 마법사 기능을 추가하는 대신, "/vscode launch.json 및 tasks.json 추가"라고 물어보면 파일 생성 방법, 추가할 내용 등에 대한 지침을 제공하며, 브레이크포인트를 찍고 변수를 검사하는 것까지 마치 전문가처럼 할 수 있습니다.

A GitHub Copilot chat asking how to add debugging support

하지만 채팅을 통합하는 가장 중요한 이유는 양방향 대화를 통해 무엇이 옳고 그른지 결정하는 데 도움이 되기 때문일 것입니다. 대규모 언어 모델은 완벽하지 않으며 "생각"하지 않습니다. 단순히 응답할 다음 단어를 찾을 뿐입니다(물론 매우 잘합니다).

조종사로서 여러분은 항상 책임을 지고 Copilot의 제안 중 무엇을 수락하고 어떤 코드를 작업 공간에 가져올지 결정합니다. 명확한 질문을 하거나 추가 정보를 제공하는 능력은 이러한 핵심 결정을 내리는 데 도움이 됩니다.

Copilot 최대한 활용하기

이름 짓기는 어렵습니다(우리는 "Code"라고 부르는 제품이 있으니 잘 압니다). 하지만 "GitHub Copilot"은 훌륭한 이름입니다. "페어 프로그래머" 또는 "자동 조종 장치" 또는 단순히 "채팅" 대신 "Copilot"은 하나의 단어로 여러 가지 중요한 개념을 전달합니다.

따라서 자신을 VS Code의 조종사로 생각하고 GitHub Copilot을 ... 글쎄요, 조종사로 생각한다면, 서비스에 대해 어떻게 생각하고 좌석 동료로부터 최대한의 이점을 얻기 위해 상호 작용하는 방법에 대한 감을 잡을 수 있습니다.

  • 이것을 아무리 강조해도 지나치지 않습니다. 조종사로서 여러분이 책임을 지고 있습니다. 어떤 제안을 수락하고 어떤 코드를 작업 공간에 통합할지 결정합니다.
  • Copilot의 주요 역할은 반복적이거나 지루한 작업을 처리하여 여러분을 지원하는 것입니다. 테스트 케이스를 작성하거나, 샘플 데이터를 만들거나, 기존 패턴을 기반으로 코드를 스캐폴드하도록 하세요.
  • Copilot은 더 많은 컨텍스트를 통해 더 많은 작업을 수행할 수 있습니다. 우리는 모두 키워드 기반 웹 검색에 익숙하지만, 더 자세한 정보를 제공할수록 더 나은 결과를 얻을 수 있습니다. 예를 들어, "Node Express TypeScript" 대신 Copilot에게 "TypeScript를 사용하여 Express.js 프레임워크를 사용하는 Node.js 웹사이트 스캐폴딩"이라고 요청한 다음 반복하세요!
  • 채팅 입력 필드에서 /를 눌러 특정 주제로 상호 작용을 범위 지정할 수 있습니다. 예를 들어, 편집기에서 브레드크럼을 켜거나 끄는 방법을 알아보려면 /vscode 브레드크럼 끄기를 입력하세요.

Asking Copilot how to turn off VS Code breadcrumbs in the editor

  • 주제를 바로 가기로 사용할 수도 있습니다. 인라인 채팅에 "이 코드 설명"이라고 입력하는 대신, "/" + Tab (/explain 바로 가기)을 입력하고 Enter를 누릅니다. 선택한 코드에 대한 설명이 포함된 채팅 보기가 열립니다.
  • Copilot이 완벽하지 않고 잘못된 답변을 제공할 수 있다는 것을 알아두세요. 어떤 것이 맞고 틀린지 결정하는 데 도움이 되는 명확한 질문을 하고, **위/아래** 투표 버튼을 사용하여 경험을 개선하도록 도와주세요.
  • 마지막으로, 첫 번째 팁만큼 거의 중요하지만, 항상 친근하게 "안녕하세요" 또는 "좋은 아침입니다"라고 Copilot에게 인사하세요. 그러면 여러분 모두 더 나은 기분이 될 것입니다.

지금 바로 시작하기

Copilot을 작동하는 모습을 보고 Copilot을 최대한 활용하는 방법에 대한 더 많은 팁을 얻으려면 이 멋진 소개 비디오를 확인하거나 YouTube의 전체 VS Code Copilot 시리즈를 살펴보세요.

앞서 논의된 인라인 완성 기능은 오늘부터 사용할 수 있습니다. 조직을 통해 Copilot을 사용할 수 없다면, 여기에서 가입하고 무료 평가판을 시작할 수 있습니다. 거기서부터

  • VS Code를 엽니다(더 좋게는 Insiders를 사용하세요).
  • 확장 프로그램 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))를 열고 GitHub Copilot을 검색하여 확장 프로그램을 설치합니다.
  • 프롬프트가 표시되면 GitHub ID로 인증합니다.
  • 코드 파일을 열고 마법이 일어나게 하세요!

채팅 경험(인라인 채팅, 채팅 보기, 빠른 채팅)에 액세스하려면 GitHub Copilot Chat 확장 프로그램을 설치해야 합니다.

  • 확장 프로그램 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))를 열고 GitHub Copilot Chat 확장 프로그램을 검색합니다.
  • 프롬프트가 표시되면 GitHub ID로 인증합니다.
  • 인라인 채팅을 열려면 선택적으로 코드 블록을 선택하고 macOS에서는 ⌘I (Windows, Linux Ctrl+I), Windows/Linux에서는 Ctrl+I를 누릅니다. Copilot에게 퀵 정렬 함수를 작성하도록 요청하세요.
  • 활동 표시줄에 "채팅" 아이콘이 나타납니다. 이 아이콘을 클릭하여 채팅 보기를 엽니다. "무인 제비의 비행 속도를 계산하는 프로그램 작성"이라고 Copilot에게 물어보세요.
  • 빠른 채팅을 사용하려면 채팅: 빠른 채팅 열기를 실행하거나 ⇧⌥⌘L (Windows, Linux Ctrl+Shift+Alt+L) 키보드 단축키를 사용하세요.

GitHub Copilot 및 Copilot Chat 확장 프로그램에 대한 자세한 내용은 VS Code의 GitHub Copilot 토픽에서 확인할 수 있습니다.

책임 있는 AI

이와 같은 기술의 기념비적인 발전은 드물고 찾기 어렵습니다. 우리도 AI가 개발 도구를 생각하고, 구축하고, 사용하는 방식을 변화시킬 다음의 큰 변화라고 믿습니다. 궁극적으로 오늘날 우리가 꿈꿀 수 있는 것 이상의 방식으로 개발 프로세스의 모든 측면을 향상시킬 것입니다. 우리는 이 말을 처음으로 하는 것은 아니라고 주장하지 않지만, 곧 AI 기반 도구 없이 어떻게 애플리케이션과 시스템을 구축, 디버그, 배포 및 유지 관리했는지 궁금해할 것입니다.

AI는 완벽하지 않으며(우리도 마찬가지입니다!) 시간이 지남에 따라 개선될 것입니다. Microsoft와 GitHub Copilot은 책임 있는 AI 원칙을 따르며 서비스와의 경험이 적절하고 즐겁고 유용하도록 보장하는 제어를 사용합니다. 우리는 AI 기능의 급속한 확장에 대한 망설임과 우려가 있다는 것을 이해하며, Copilot을 사용하고 싶지 않거나 사용할 수 없는 사람들을 전적으로 존중합니다.

점 연결

채팅 도우미, 인라인 채팅, 인라인 완성의 조합을 통해 어떤 코딩 "집중 모드"에 있든 Copilot의 강력한 기능을 활용할 수 있습니다. 막 시작했거나 질문이 있나요? 채팅 보기를 사용하세요. 코드를 열심히 작성하고 리팩터링, 업데이트 또는 스캐폴딩을 하고 싶으신가요? Ctrl+I를 누르고 Copilot에게 처리하도록 요청하세요. 단계별로 문제를 해결하는 중인가요? 인라인 완성을 사용하여 Tab-Tab-Tab으로 성공을 향해 나아가세요.

GitHub Copilot으로 구동되는 VS Code에 채팅을 통합하는 것은 여정의 한 단계일 뿐입니다. 자연어를 사용하여 검색 패턴이나 코드 생성을 설명하거나, 커밋 메시지 및 풀 리퀘스트 설명을 자동으로 생성하거나, 더 스마트한 코드 이름 바꾸기, 리팩터링, 변환 등을 포함한 추가 "내부 루프" 시나리오를 계속 탐색할 것입니다.

GitHub, Twitter, YouTube에서 따라오세요. 여러분의 생각을 알려주시고 VS Code의 AI에 대한 아이디어를 공유해 주세요.

감사합니다.

Chris와 VS Code 팀

스마트 코딩하세요!

English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.