VS Code에서 GitHub Copilot 시작하기

GitHub Copilot은 Visual Studio Code에서 코드를 작성하는 방식을 혁신합니다. 이 실습 튜토리얼에서는 VS Code의 AI 기능인 지능형 인라인 제안, 에이전트를 사용한 자율 기능 개발, 인라인 채팅을 사용한 정밀 편집, 통합 스마트 액션, 강력한 사용자 지정 옵션을 탐색하면서 완전한 작업 관리 웹 애플리케이션을 구축합니다.

이 튜토리얼이 끝나면 작동하는 웹 애플리케이션과 개발 스타일에 맞춰 조정되는 개인 맞춤 AI 코딩 설정 모두를 갖게 될 것입니다.

전제 조건

컴퓨터에 설치된 VS Code. Visual Studio Code 웹사이트에서 다운로드하세요.
GitHub Copilot 액세스. VS Code에서 GitHub Copilot 설정의 단계를 따르세요.

팁
Copilot 구독이 없는 경우, VS Code 내에서 직접 무료로 Copilot을 사용하도록 가입할 수 있으며 월별 인라인 제안 및 채팅 상호 작용 제한을 받을 수 있습니다.

1단계: 인라인 제안 경험하기

AI 기반 인라인 제안은 입력하는 동안 나타나 코드를 더 빠르고 오류 없이 작성하는 데 도움이 됩니다. 작업 관리자의 기반을 구축하는 것부터 시작해 보겠습니다.

프로젝트를 위한 새 폴더를 만들고 VS Code에서 엽니다.
index.html이라는 새 파일을 만듭니다.
다음과 같이 입력하기 시작하면 VS Code에서 인라인 제안(고스트 텍스트)을 제공합니다.
```
<!DOCTYPE html>
```
대규모 언어 모델은 비결정적이므로 다른 제안이 표시될 수 있습니다.
제안을 수락하려면 Tab을 누릅니다.

축하합니다! AI 기반 인라인 제안을 처음으로 수락했습니다.
HTML 구조 구축을 계속합니다. <body> 태그 안에서 다음을 입력하기 시작합니다.
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
애플리케이션 구조를 구축하면서 VS Code가 관련 HTML 요소를 계속 제안하는 것을 확인합니다.
여러 제안이 표시되는 경우 고스트 텍스트에 마우스를 올려 탐색 컨트롤을 확인하거나, ⌥] (Windows, Linux Alt+]) 및 ⌥[ (Windows, Linux Alt+[)를 사용하여 옵션을 순환합니다.

인라인 제안은 입력하면서 자동으로 작동하며, 패턴과 프로젝트 컨텍스트에서 학습합니다. 특히 보일러플레이트 코드, HTML 구조 및 반복적인 패턴을 작성하는 데 유용합니다.

2단계: 에이전트를 사용하여 완전한 기능 빌드하기

에이전트는 VS Code에서 가장 강력한 AI 기능입니다. 자연어 프롬프트가 주어지면 여러 파일에 걸쳐 복잡한 기능을 자율적으로 계획하고 구현합니다. 이를 사용하여 작업 관리자의 핵심 기능을 만들어 보겠습니다.

⌃⌘I (Windows, Linux Ctrl+Alt+I)를 누르거나 VS Code 제목 표시줄의 채팅 아이콘을 선택하여 채팅 보기를 엽니다.

채팅 보기를 사용하면 AI와 지속적인 대화를 나눌 수 있으므로 요청을 더 쉽게 구체화하고 더 나은 결과를 얻을 수 있습니다.
채팅 보기 상단의 에이전트 선택기에서 **에이전트**를 선택하여 자율 코딩 모드로 전환합니다.
다음 프롬프트를 입력하고 Enter를 누릅니다. 에이전트는 요청을 분석하고 솔루션 구현을 시작합니다.
```
Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.
```
에이전트가 요청을 구현하는 데 필요한 파일과 코드를 생성하는 것을 지켜봅니다. index.html 파일을 업데이트하고 스타일링을 위한 styles.css 파일을, 기능을 위한 script.js 파일을 만드는 것을 볼 수 있습니다.

팁
다른 언어 모델은 서로 다른 강점을 가질 수 있습니다. 채팅 보기의 모델 드롭다운을 사용하여 언어 모델을 전환합니다.
생성된 파일을 검토하고 **유지**를 선택하여 모든 변경 사항을 적용합니다.
브라우저에서 index.html 파일을 열어 작업 관리자를 실행합니다. 작업을 추가하고, 완료로 표시하고, 삭제할 수 있습니다.

팁
Live Preview 확장을 사용하여 개발 중 실시간으로 VS Code에서 변경 사항을 확인합니다.
추가 기능을 추가해 보겠습니다. 채팅 입력 상자에 다음 프롬프트를 입력합니다.
```
Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.
```
에이전트가 이 기능을 완전히 구현하기 위해 여러 파일에 걸쳐 변경 사항을 조정하는 것을 확인합니다.

에이전트는 높은 수준의 요구 사항을 이해하고 이를 작동하는 코드로 변환하는 데 탁월합니다. 새 기능을 구현하거나, 코드의 큰 부분을 리팩토링하거나, 처음부터 전체 애플리케이션을 구축하는 데 완벽합니다.

3단계: 인라인 채팅으로 정밀한 조정하기

에이전트가 대규모 기능을 처리하는 동안 편집기 인라인 채팅은 파일 내 특정 코드 섹션에 대한 대상 개선에 완벽합니다. 이를 사용하여 작업 관리자 앱을 개선해 보겠습니다.

JavaScript 파일을 열고 새 작업을 추가하는 코드를 찾습니다.
코드 블록을 선택한 다음 ⌘I (Windows, Linux Ctrl+I)를 눌러 편집기 인라인 채팅을 엽니다.

참고
대규모 언어 모델은 비결정적이므로 정확한 코드는 다를 수 있습니다.
다음 프롬프트를 입력합니다.
```
Add input validation to prevent adding empty tasks and trim whitespace from task text.
```
인라인 채팅이 선택한 코드를 구체적으로 집중하고 대상 개선을 수행하는 것을 확인합니다.
변경 사항을 검토하고 **유지**를 선택하여 적용합니다.

편집기 인라인 채팅은 광범위한 코드베이스에 영향을 주지 않고 작고 집중적인 변경을 하는 데 이상적입니다. 예를 들어 오류 처리를 추가하거나, 개별 함수를 리팩토링하거나, 버그를 수정하는 것과 같습니다.

4단계: AI 경험 개인 맞춤 설정하기

채팅을 사용자 지정하면 특정 요구 사항과 코딩 스타일에 더 잘 맞게 작동합니다. 사용자 지정 지침을 설정하고 전문화된 사용자 지정 에이전트를 구축할 수 있습니다. 프로젝트에 대한 완전한 개인 맞춤 설정을 만들어 보겠습니다.

사용자 지정 지침 만들기

사용자 지정 지침은 AI에 코딩 기본 설정 및 표준에 대해 알려줍니다. 이는 모든 채팅 상호 작용에 자동으로 적용됩니다.

프로젝트 루트에 .github이라는 새 폴더를 만듭니다.
.github 폴더 안에 copilot-instructions.md라는 파일을 만듭니다.

다음 내용을 추가합니다.

# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful variable and function names that clearly describe their purpose
- Include helpful comments for complex logic
- Add error handling for user inputs and API calls

파일을 저장합니다. 이제 이 지침은 이 프로젝트의 모든 채팅 상호 작용에 적용됩니다.
에이전트에게 새 기능을 추가하라고 요청하여 사용자 지정 지침을 테스트합니다.
```
Add a dark mode toggle button to the task manager.
```
생성된 코드가 지정한 지침을 따르는 것을 확인합니다. VS Code는 특정 파일 형식에 대한 지침 적용과 같은 더 고급 사용자 지정 지침을 지원합니다.

코드 검토를 위한 사용자 지정 에이전트 만들기

사용자 지정 에이전트는 특정 작업을 위해 전문화된 AI 페르소나를 만듭니다. 코드 분석 및 피드백 제공에 초점을 맞춘 "코드 검토자" 에이전트를 만들어 보겠습니다. 사용자 지정 에이전트 정의에서 AI의 역할, 특정 지침 및 사용할 수 있는 도구를 정의할 수 있습니다.

명령 팔레트를 열고 **Chat: New Custom Agent** 명령을 실행합니다.
위치를 .github/agents로 선택합니다.

이 옵션은 사용자 지정 에이전트를 작업 영역에 추가하여 다른 팀 구성원이 프로젝트를 열 때 사용할 수 있도록 합니다.
사용자 지정 에이전트 이름을 "Code Reviewer"로 지정합니다. 이렇게 하면 .github/agents 폴더에 Code Reviewer.md라는 새 파일이 생성됩니다.

파일 내용을 다음 내용으로 바꿉니다. 이 사용자 지정 에이전트로는 코드 변경을 허용하지 않는다는 점에 유의하십시오.

---
description: 'Review code for quality and adherence to best practices.'
tools: ['usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search']
---
# Code Reviewer agent

You are an experienced senior developer conducting a thorough code review. Your role is to review the code for quality, best practices, and adherence to [project standards](../copilot-instructions.md) without making direct code changes.

When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.

## Analysis Focus
- Analyze code quality, structure, and best practices
- Identify potential bugs, security issues, or performance problems
- Evaluate accessibility and user experience considerations

## Important Guidelines
- Ask clarifying questions about design decisions when appropriate
- Focus on explaining what should be changed and why
- DO NOT write or suggest specific code changes directly

파일을 저장합니다. 이제 채팅 보기의 에이전트 선택기에서 이 사용자 지정 에이전트를 선택할 수 있습니다.
에이전트 선택기에서 **Code Reviewer**를 선택하고 다음 프롬프트를 입력하여 사용자 지정 에이전트를 테스트합니다.
```
Review my full project
```
AI가 이제 코드 검토자처럼 작동하여 분석 및 개선 제안을 제공하는 것을 확인합니다.

5단계: 미리 빌드된 AI 지원을 위한 스마트 액션 사용하기

스마트 액션은 VS Code 인터페이스에 직접 통합된 AI 기능을 제공하여 개발 워크플로에 원활하게 통합됩니다. 채팅 상호 작용과 달리 스마트 액션은 가장 필요한 컨텍스트에 나타납니다. 예로 커밋 메시지 생성을 살펴보겠습니다.

⌃⇧G (Windows, Linux Ctrl+Shift+G)를 누르거나 활동 표시줄에서 소스 제어 아이콘을 선택하여 **소스 제어** 보기를 엽니다.
아직 프로젝트에 Git 리포지토리를 초기화하지 않았다면 소스 제어 보기에서 **리포지토리 초기화**를 선택하여 초기화합니다.
커밋할 파일을 선택한 다음 **+** 버튼을 선택하여 변경 사항을 스테이징합니다.
스테이징된 변경 사항을 기반으로 커밋 메시지를 생성하려면 **반짝임 아이콘**을 선택합니다.

AI는 스테이징된 변경 사항을 분석하고 표준 커밋 관례를 따르는 설명적인 커밋 메시지를 생성합니다. AI는 다음을 고려합니다.
- 변경된 파일
- 변경의 성격 (추가된 기능, 버그 수정, 리팩토링)
- 수정 범위 및 영향
생성된 메시지를 검토합니다. 만족스러우면 커밋을 진행합니다. 다른 스타일이나 초점을 원하면 반짝임 아이콘을 다시 선택하여 대체 메시지를 생성합니다.

커밋 메시지 생성과 같은 스마트 액션은 채팅 인터페이스로 전환할 필요 없이 AI가 기존 워크플로에 자연스럽게 통합되는 방법을 보여줍니다. VS Code에는 디버깅, 테스트 등에 도움이 되는 다른 스마트 액션이 많이 있습니다.

다음 단계

축하합니다! 완전한 작업 관리 애플리케이션을 구축하고 VS Code의 핵심 기능을 통해 AI와 효과적으로 작업하는 방법을 배웠습니다.

다른 사용자 지정 옵션을 탐색하여 AI 기능을 더욱 향상시킬 수 있습니다.

계획, 디버깅 또는 문서 작성과 같은 다른 작업을 위한 더 전문화된 에이전트를 추가합니다.
특정 프로그래밍 언어나 프레임워크에 대한 사용자 지정 지침을 만듭니다.
MCP(Model Context Protocol) 서버 또는 VS Code 확장의 추가 도구를 사용하여 AI 기능을 확장합니다.