GitHub Copilot: 에이전트의 각성

GitHub 구독자 531,000명

요약

이 영상은 2025년 2월 Visual Studio Code 업데이트와 함께 강화된 GitHub Copilot의 새로운 기능들을 소개합니다. Copilot은 기존의 커서 기반 제안을 넘어서, 사용자가 진행 중인 코드 변경 내용을 분석해 후속 수정 사항을 제안합니다. 또한, 코드 에디터 내에서 UI 개선, 여러 파일에 걸친 복잡한 업데이트, 이미지 기반의 디자인 변경 반영, 그리고 프롬프트 파일을 통한 문맥 제공 등 다양한 생산성 향상 기능을 시연합니다. 이를 통해 개발자는 보다 효율적으로 코드를 작성하고, 프로젝트 전반에 걸쳐 통합적인 작업을 수행할 수 있게 됩니다.

주요 키워드

Copilot 다음 편집 제안 에이전트 모드 UI 개선 프롬프트 파일 Copilot Chat 비전 기능 Visual Studio Code GitHub

하이라이트

🔑 Copilot이 커서 위치 뿐만 아니라 최근 코드 변경을 기반으로 한 '다음 편집 제안' 기능을 도입하여 생산성을 크게 높였습니다.
🚀 에러 발생 시, 누락된 필드나 메소드 추가와 같은 코드 수정 제안을 자동으로 제공하여 개발자의 수동 작업을 줄입니다.
🌟 Copilot Chat이 이미지 인식 기능(비전 기능)을 통해 스크린샷 기반 UI 개선 작업도 지원합니다.
📌 에이전트 모드가 도입되어, 프로젝트 전반의 여러 파일(백엔드, UI, 테스트 파일)에 걸친 복잡한 변경 작업을 자동으로 처리합니다.
⚡️ 프롬프트 파일을 사용해 상세한 문맥 정보를 제공함으로써, Copilot이 보다 정교한 백엔드 서비스 코드를 생성할 수 있도록 지원합니다.

용어 설명

다음 편집 제안 (Next Edit Suggestions)

현재 사용자가 진행 중인 코드 변경을 분석하여, 이후에 필요할 코드 수정을 미리 제안하는 기능입니다.

Copilot Chat

Visual Studio Code 내에서 채팅 기능을 통해 Copilot과 상호작용하며, 코드나 UI 변경 사항에 대한 제안을 받을 수 있는 기능입니다.

에이전트 모드 (Agent Mode)

프로젝트 전체를 탐색하여 여러 파일에 걸친 복잡한 업데이트를 자동으로 수행하는 Copilot의 확장 기능입니다.

프롬프트 파일 (Prompt File)

Markdown 형식의 파일로, 데이터베이스 스키마나 코드 작성 선호도 등 구체적인 문맥 정보를 제공하여 Copilot이 보다 정밀한 코드를 생성할 수 있도록 돕습니다.

비전 기능 (Vision Capabilities)

스크린샷이나 이미지 상의 UI 변경 사항을 인식하고, 해당 변경 사항을 코드로 구현할 수 있도록 하는 Copilot의 이미지 인식 기능입니다.

영상 초반부에서는 Copilot이 커서 위치뿐만 아니라, 사용자의 최근 코드 수정 내용을 분석해 다음에 필요한 편집 사항을 제안하는 기능을 보여줍니다. 예제에서는 클래스 생성 시 누락된 필드 및 메소드 추가를 자동으로 감지 및 제안합니다.

[00:00] Visual Studio Code의 2025년 2월 업데이트로 Copilot이 더욱 강력한 AI 페어 프로그래머로 발전했으며, '다음 편집 제안' 기능이 추가되었습니다.

[00:21] Runner 클래스 생성 시 다음 편집 제안 기능을 통해 필요한 필드와 getInfo 메서드를 자동으로 제안하고 구현하는 과정을 보여줍니다.

[00:56] 신발 선호도 관련 기능을 추가하면서 Copilot이 인터페이스, 필드, 생성자, getInfo 메서드를 순차적으로 제안하고 구현합니다.

이어지는 부분에서는 웹사이트의 UI 개선 예시를 다룹니다. 버튼 스타일 변경, 페이지 행 수 조절과 같은 작업을 Copilot Chat과 모델 선택 기능을 통해 진행하며, 이미지 기반 스크린샷을 통한 수정 요청도 시연됩니다.

[01:20] RunnerTracks 웹사이트의 경주 결과 페이지에서 페이징 개선을 위해 Copilot 채팅과 OpenAI O3-mini 모델을 활용합니다.

[01:55] 사용자가 페이지당 행 수를 선택할 수 있는 기능을 추가하기 위해 Copilot Edit을 사용하여 여러 파일을 동시에 수정합니다.

[02:49] 새로운 Copilot Vision 기능을 통해 스크린샷의 손으로 그린 마크업을 인식하고 UI 변경사항을 자동으로 구현합니다.

영상 중반부에서는 Runner Tracks 웹사이트의 복잡한 기능 추가 작업을 설명합니다. Copilot의 에이전트 모드를 활용해 백엔드, UI, 테스트 파일 등 여러 파일을 동시에 업데이트하고, 테스트 실패 시 문제를 자동으로 해결하는 모습을 보여줍니다.

[03:20] 코파일럿의 에이전트 모드를 사용하여 러너 트랙스 웹사이트에 경주 이름 검색 기능을 추가하는 작업을 시작합니다.

[03:48] 코파일럿이 프로젝트를 분석하여 백엔드 서비스, UI, 테스트 등 필요한 모든 변경사항을 자동으로 적용합니다.

[04:12] 단위 테스트 실패를 감지하고 수정한 후, 엔드투엔드 테스트까지 성공적으로 완료하여 새로운 기능을 구현합니다.

마지막 부분에서는 Fundraiser 서비스와 같이 정교한 백엔드 코드를 생성하는 사례를 다룹니다. 초기에는 문맥 부족으로 문제를 겪었지만, 프롬프트 파일을 활용해 필요한 스키마와 구조 정보를 제공함으로써 Copilot이 정확한 코드를 제안합니다.

[04:50] 경주와 모금 활동을 연결하는 새로운 백엔드 서비스 개발을 위해 프롬프트 파일을 활용하여 더 정확한 구현을 진행합니다.

[00:00] 2025년 2월 Visual Studio Code 업데이트로

[00:02] Copilot이 더욱 강력한

[00:05] AI 페어 프로그래머로 거듭났습니다.

[00:08] 지금까지 VS Code의 GitHub Copilot은

[00:11] 커서 위치에서만 작동했지만

[00:14] '다음 편집 제안' 기능을 통해

[00:16] 사용자가 수행한 변경 사항을 기반으로

[00:19] 다음에 필요한 편집을 제안할 수 있게 되었습니다.

[00:21] Runner 클래스를 만들기 시작했는데

[00:23] 생성자를 만든 후

[00:26] 필드 설정을 잊어서 오류가 발생했습니다.

[00:27] 다음 편집 제안이 필요한 필드를 감지하고

[00:30] 그에 대한 제안을 합니다.

[00:32] 왼쪽의 아이콘을 사용하거나

[00:35] 탭을 선택하여 수동으로 수락하거나 거부할 수 있습니다.

[00:38] 탭을 눌러 작업을 완료할 수 있죠.

[00:41] 다음 편집 제안은

[00:43] Runner 데이터에 대한 읽기 액세스를 제공하는

[00:46] getInfo 메서드를 제안합니다.

[00:48] 탭을 선택하여 편집으로 이동하고

[00:51] 다시 탭을 눌러 수락해보겠습니다.

[00:53] 이제 신발 선호도를 추가할 차례입니다.

[00:56] Copilot이 브랜드와 사이즈를 제안하고

[00:59] 인터페이스를 생성한 후

[01:02] 다음 편집 제안이 Runner에

[01:04] 이를 추가하길 원한다고 판단합니다.

[01:07] 필드를 추가하고 생성자를 업데이트한 다음

[01:10] 마지막으로 getInfo 메서드까지 추가하여

[01:12] 모든 제안을 탭으로 이동하면서

[01:15] 더 빠르게 코딩할 수 있게 되었습니다.

[01:18] 더 큰 작업을 살펴보면

[01:20] RunnerTracks라는 웹사이트가 있는데

[01:22] 경주 결과를 보여주는 페이지가 있습니다.

[01:24] 테이블의 페이징을 개선하고 싶은데

[01:27] 참가자가 많을 수 있기 때문입니다.

[01:29] Copilot 채팅을 사용하여

[01:31] 현재 열려있는 스타일 파일을 변경할 수 있습니다.

[01:34] 모델 선택기를 사용하여

[01:37] 최신 옵션 중 하나인

[01:39] OpenAI O3-mini를 선택하겠습니다.

[01:41] Copilot 채팅에 버튼을 더 예쁘게 만들어달라고 요청하고

[01:46] 제안된 변경사항을 적용해보겠습니다.

[01:48] 확인해보니 파란색 버튼이

[01:50] 훨씬 더 보기 좋아졌네요.

[01:53] 변경사항을 수락하고

[01:55] 계속 진행해보겠습니다.

[01:57] 사용자가 각 페이지에 표시할

[02:00] 행의 수를 선택할 수 있게 하고 싶습니다.

[02:03] 이를 위해서는 여러 파일을 수정해야 합니다.

[02:07] Copilot Edit이 여러 파일에 대한

[02:09] 제안을 할 수 있습니다.

[02:11] Copilot이 변경할 파일을 찾도록 할 수 있지만

[02:14] 작업 세트에 몇 개의 파일을 추가하고

[02:17] 변경을 요청해보겠습니다.

[02:19] 이번에는 Claude 3.5 Sonnet을 사용하여

[02:21] 다양한 모델을 선택할 수 있는

[02:24] 기능을 보여드리겠습니다.

[02:27] Copilot Edit이 세 개의 파일 모두에 대한

[02:29] 변경 사항을 한 번에 제안했습니다.

[02:33] 변경 사항에 대한 요약도 제공합니다.

[02:36] 저장하고 사이트를 확인해보면

[02:38] 테이블에 표시할 행 수를 선택할 수 있는

[02:41] 드롭다운이 잘 작동하고 있습니다.

[02:43] 하지만 우리 팀은 UI에 대해

[02:46] 더 많은 제안을 가지고 있고

[02:49] 원하는 것을 설명하는 가장 일반적인 방법으로

[02:51] 손으로 그린 마크업이 있는 스크린샷을 사용합니다.

[02:53] 지금까지 Copilot 채팅은 텍스트로만 작업할 수 있었지만

[02:57] 이제 Copilot은 비전 기능을 갖추게 되었습니다.

[03:00] 이미지를 붙여넣어 첨부하고

[03:03] 이미지에 표시된 변경사항을 구현하도록 요청할 수 있습니다.

[03:06] 변경사항을 적용하고 파일을 저장한 뒤

[03:09] 웹사이트를 확인해보면

[03:12] 열 정렬이

[03:14] 제대로 수정되었음을 확인할 수 있습니다.

[03:16] 스크린샷만으로 수정이 완료되었네요. 이제

[03:19] 더 복잡한 작업에 집중해보겠습니다.

[03:20] 우리의 러너 트랙스 웹사이트에는 경주 목록 페이지가 있는데

[03:23] 경주 이름으로 검색할 수 있는 기능을

[03:26] 추가하고 싶습니다.

[03:28] 이를 위해서는 프로젝트의 여러 파일을

[03:31] 수정해야 합니다. 서비스, 서버 사이드 코드,

[03:34] UI, 그리고 테스트까지요. 코파일럿은 이제

[03:39] 에이전트 모드를 지원하여 복잡한 작업을 수행할 때

[03:42] 전체 프로젝트를 분석하고 반복적으로

[03:45] 작업을 수행할 수 있습니다.

[03:48] 코파일럿은 먼저 우리 프로젝트를 탐색하여

[03:51] 어떤 업데이트가 필요한지 파악합니다.

[03:53] 백엔드 서비스부터 시작해서

[03:56] UI까지 필요한 변경사항을

[03:59] 적용합니다.

[04:00] 이러한 작업이 완료되면

[04:02] 테스트에 주목합니다. 서비스와 페이지의 단위 테스트,

[04:05] 그리고 엔드투엔드 테스트까지 업데이트하고

[04:08] 테스트가 업데이트되면 단위 테스트를 실행하라는

[04:12] 메시지가 표시됩니다. 단위 테스트는 실패하는데,

[04:14] 기존 테스트가 새로운 기능과

[04:17] 맞지 않기 때문입니다.

[04:20] 코파일럿이 이 문제를 감지하고

[04:22] 수정사항을 적용한 뒤 테스트를

[04:25] 다시 실행하도록 안내합니다. 테스트가 성공하면

[04:27] 엔드투엔드 테스트를 실행하라는

[04:30] 메시지가 표시됩니다. 제가 포트를 사용 중인

[04:32] 다른 테스트 프로세스를 중지하는 것을

[04:35] 잊었네요. 다행히 코파일럿이

[04:37] 프로세스를 중지하고 테스트를 실행하는

[04:40] 명령어를 생성해 도와줍니다.

[04:43] 모든 테스트가 통과되고 웹사이트를

[04:45] 다시 확인해보면 새로운 기능이 잘 작동하는 것을

[04:47] 볼 수 있습니다. 이제 마지막으로

[04:50] 백엔드 서비스를 만들어보겠습니다. 러너 트랙스 웹사이트에

[04:52] 경주와 모금 활동을 연결할 수 있는

[04:55] 기능을 추가하고 싶습니다. 앱의 다른

[04:57] 서비스와 같은 모금 활동 서비스 모델이

[05:00] 필요합니다. 이를 위해서는

[05:02] 구조와 스키마를 이해해야 하는데,

[05:04] 우리가 코드베이스에서 사용하고 있는

[05:06] 스키마를 이해해야 합니다. 단순히 코파일럿에게

[05:10] 서비스를 만들어달라고 하면, 기본 스키마와

[05:12] 우리가 원하는 서비스 구조를 이해하는 데

[05:15] 필요한 컨텍스트가 부족합니다.

[05:17] AI와 작업할 때는 컨텍스트가 핵심입니다.

[05:20] 처음부터 다시 시작하되, 이번에는

[05:24] 프롬프트 파일을 참조하여

[05:26] 구현하고자 하는 방식에 대해 더 구체적인

[05:29] 정보를 제공하겠습니다. 프롬프트 파일은

[05:31] GitHub의 prompts 폴더에 저장된

[05:33] 마크다운 파일입니다.

[05:37] 다른 파일도 참조할 수 있는데, 이 경우에는

[05:39] 데이터베이스 구조를 설명하는

[05:42] Prisma 스키마를 참조합니다. 우리의 코드

[05:44] 선호도에 대한 노트도 있고,

[05:47] 서비스를 어떻게 구성하고 싶은지에 대한

[05:50] 템플릿도 포함되어 있습니다.

[05:52] 프롬프트를 다시 보내면, 이러한 추가 컨텍스트 덕분에

[05:55] 코파일럿이 훨씬 더 나은 결과를

[05:58] 제공하는 것을 볼 수 있습니다.

[06:00] 이것이 바로 우리가 원하는 것처럼 보입니다.

[06:03] 코파일럿과 프롬프트 파일 덕분에

[06:05] Visual Studio Code와 GitHub 코파일럿의

[06:08] 새로운 업데이트를 통해

[06:11] 더 많은 기능을 사용할 수 있게 되어

[06:12] 생산성을 훨씬 더 높일 수

[06:14] 있게 되었습니다.

[06:17] [음악]