GitHub Copilot를 사용하여 바이브 코딩

소개

Copilot를 사용하면 코드 줄을 직접 작성하지 않고도 처음부터 완전히 새로운 애플리케이션을 만들거나 기능을 추가하거나 사용자 인터페이스를 변경할 수 있습니다. Copilot을 사용하여 채팅 보기에 프롬프트를 입력하고 AI를 코딩 파트너로 활용하여 실제 코딩 작업은 모두 Copilot에 맡길 수 있습니다.

이 튜토리얼에서는 VS Code 또는 JetBrains IDE를 사용하여 개인 시간 추적 웹 앱을 만드는 방법을 설명합니다.

이 방법은 개념 증명을 개발하거나, 소프트웨어 개발에 대한 보다 일반적인 접근 방식을 사용하여 추가로 개발할 애플리케이션 초안을 만들거나, 고유한 개인 용도로 애플리케이션을 만드는 데 적합합니다.

이 자습서는 누구를 위한 것인가요?

•         **학습자:** 소프트웨어 애플리케이션을 만드는 방법을 배우고 있습니다. Copilot을 사용하면서 요청이 구현되는 방식을 살펴보면 많은 것을 배울 수 있습니다.
  

•         **비 개발자:** 여러분은 제품 관리자이거나 엔지니어링 팀 외부의 다른 역할에서 일하고 있습니다. 몇 가지 특정 기능을 보여 주는 개념 증명 애플리케이션을 빠르게 만들려고 합니다. 코드의 세부 정보보다는 사용자 환경에 주로 관심이 있습니다.
  

•         **개인:** 일상 업무 또는 가정 생활에 도움이 되는 몇 가지 유용한 기능을 제공하는 애플리케이션을 만들려고 합니다. 애플리케이션은 컴퓨터에서 로컬로 실행되며 사용자만 사용할 것이므로 코드가 어떻게 결합되었는지에 대해 지나치게 걱정하지 않습니다.
  

이 자습서는 편집기에서 코드를 작성하는 확립된 사례를 가진 숙련된 개발자를 위한 것이 아닙니다. 숙련된 개발자는 문제 해결 및 생산성 향상을 위한 도구로 Copilot를 다른 방식으로 사용합니다. 이 튜토리얼에서는 채팅 내에서 작업을 진행하며, 편집기에서는 Copilot이 모든 작업을 처리하도록 합니다.

이 작업은 얼마나 걸리나요?

이 자습서를 완료하는 데 걸리는 시간에 영향을 줄 수 있는 많은 변수가 있습니다. 그러나 2시간 이상 허용해야 합니다. 부조종사 채팅에서는 언제든지 중단했던 대화부터 다시 시작하여 나중에 돌아올 수 있습니다.

필수 조건

시작하기 전에 다음 사항들을 확인해야 합니다. * GitHub Copilot 구독 플랜.

• 다음 IDE 중 하나:
  • Visual Studio Code
  • Copilot을 지원하는 모든 JetBrains IDE에는 JetBrains용 GitHub Copilot 확장 프로그램이 설치되어 있습니다. 환경에 GitHub Copilot 확장 기능 설치하기.을(를) 참조하세요.
• Visual Studio Code 또는 JetBrains에서 부조종사 채팅를 사용해 본 적이 있습니다. 부조종사 채팅를 사용한 적이 없으면 IDE에서 GitHub Copilot에 질문하기을 참조하세요.

준비

새 GitHub 리포지토리에 시간 추적 앱을 만듭니다.

1. GitHub 웹 사이트에서 초기 추가 정보 파일을 포함하여 애플리케이션에 대한 새 프라이빗 리포지토리를 만듭니다. 새 리포지토리 만들기를 참조하세요.

2. 리포지토리의 복사본을 로컬 컴퓨터에 복제합니다. 리포지토리 복제를 참조하세요.

3. 리포지토리의 로컬 복사본에서 작업할 새 분기를 만듭니다.

   예를 들어 터미널에서 다음 명령을 사용합니다.

   Bash

   git checkout -b BRANCH-NAME
   

Copilot을(를) 활용한 조사 작업

1. VS Code 또는 JetBrains IDE에서 리포지토리 디렉터리를 열어 새 프로젝트 또는 작업 영역으로 시작하세요.

2. 현재 열려 있는 편집기 탭을 닫습니다.

   편집기 탭이 열려 있지 않은 빈 프로젝트 또는 작업 영역에서 작업하면 Copilot이(가) 해당 탭의 코드나 정보의 영향을 받지 않습니다.

3. IDE에서 터미널 창을 엽니다.

4. 부조종사 채팅을(를) 열고 채팅 보기 아래쪽에서 Ask 가 현재 선택된 채팅 모드인지 확인합니다. 그렇지 않은 경우 채팅 모드 드롭다운에서 Ask 를 선택합니다.

   

5. 모델 드롭다운에서 모델을 선택합니다.

   참고 항목

   이 자습서에서 언급한 응답은 Claude Sonnet 4.5를 사용하는 동안 수신되었습니다. 다른 모델은 다르게 응답하지만 거의 비슷한 결과를 얻을 수 있습니다. Claude Sonnet 4.5는 채팅 보기에서 유용한 해설을 제공하고, 무엇을 하고 있는지 설명하고, 코딩을 마쳤을 때 자세한 요약을 제공하므로 사용할 수 있는 경우 좋은 선택입니다.

   Claude Sonnet 4.5를 사용할 수 없는 경우 모델을 Auto 로 설정하거나 선택한 모델을 선택합니다.

6. 채팅에서 다음 프롬프트를 입력합니다.

   Copilot prompt

   I need to keep a daily log of what I've spent my time on. I want to build a time-tracking application to help me do this. Throughout the day I want to use the app to record what I'm working on as I move between tasks. At the end of the day it should show me the total time I've spent on each item.
   
   What are the typical features of such an app?
   
   What do I need to consider when building this app?
   

   Copilot은 질문에 답변하기 위해 자세한 내용을 제공합니다.

7. Copilot의 응답을 검토하고, 필요하다면 추가 정보를 요청하여 애플리케이션에 대한 구상을 명확히 하세요.

   예를 들어, 다음과 같이 질문할 수 있습니다.

   Copilot prompt

   Data storage: the application will run locally on my laptop. What's the best way to persistently store data so that I'll have access to historic time-tracking data?
   
   Data structure: How should I structure the data for this application? There will be tasks and projects. Each chunk of time will be associated with a task and some, but not all, tasks will be associated with projects. I will want to see totals for: each task, each project, each task per project.
   

8. 동일한 채팅 대화에서 계속해서 질문을 하여 빌드하려는 애플리케이션에 대한 명확한 아이디어를 작성합니다.

   Copilot은 다음 단계를 수행하는 동안 채팅 대화가 필요하므로 열어 두세요.

구현 계획

이제 애플리케이션의 초기 구현 계획을 시작할 수 있습니다. 반복할 수 있는 애플리케이션의 기본 버전으로 시작하는 것이 좋습니다. 이렇게 하면 기능을 추가하기 전에 기본 기능이 더 쉽게 작동할 수 있습니다.

1. 이전 섹션에서 사용한 것과 동일한 부조종사 채팅 대화에서 채팅 창 하단에 있는 채팅 모드 드롭다운에서 계획 모드를 선택하여 문의 모드에서 계획 모드로 전환합니다.

2. 다음 프롬프트를 입력합니다.

   Copilot prompt

   I want to build a time-tracking application that allows me to keep track of how much time I spend on tasks during my working day. This should be a web app that runs locally on my computer. Plan the implementation of a basic, initial version of this application. This first version should allow me to:
   
   - Add, edit and delete projects and tasks - each a name with a maximum of about 50 characters
   - Quickly click to select a project and task and record the start time
   - Click another task to stop the current timer, recording the stop time, and recording the start time for the new task
   - Pause/resume/end the current task
   - Display the totals of times I have spent on each: task, project, and task per project.
   
   Time is always recorded for a specific task. A task can optionally be associated with a project.
   
   Store data for each day, but for this version do not include any user interface or functionality for looking at historical data, or compiling statistics. The initial version of the application should be limited to today's time tracking.
   
   Notes:
   - Tasks never overlap
   - Time should be accurate to the minute by recording the day, hour, minute tasks are started and stopped and calculating the duration from this
   - Design the web UI for display on a desktop monitor
   - Keep things very simple for the initial version. Do not add any other features not mentioned in this prompt
   

   코필로트는 다음과 같이 회신합니다.

   계획: 시간 추적 웹 애플리케이션 구축

   localStorage와 함께 바닐라 HTML/CSS/JavaScript를 사용하여 매일 작업 시간을 추적하기 위한 단일 페이지 웹 애플리케이션입니다. 앱은 사이드바에 프로젝트/작업을 표시하고, 활성 타이머를 표시하며, 작업 및 프로젝트별로 일일 합계를 계산합니다.

   Steps

          **자체 포함된 Vanilla JavaScript 애플리케이션을 사용하여 **, `index.html`, `styles.css`, `app.js` 및 `storage.js`으로 프로젝트 구조를 만듭니다.
   

          **
   

          **, `storage.js` 및 `projects`을 대상으로 한 `tasks` localStorage를 사용하여 컬렉션의 CRUD 작업과 ID 생성을 포함하는 `timeEntries`.
   

   3. 프로젝트/작업 관리를 위한 왼쪽 사이드바, 활성 타이머 및 컨트롤의 가운데 패널(시작/일시 중지/다시 시작/중지) 및 일일 합계에 대한 오른쪽 패널의 세 가지 주요 섹션으로 HTML 구조를index.html 빌드합니다. 4. 작업 선택(이전 자동 중지, 새 자동 시작), 일시 중지/다시 시작/중지 작업 및 분정밀도 시간 계산 저장을 처리하는 핵심 타이머 논리app.js 구현{ taskId, startTime, endTime, duration } 5. UI 렌더링 함수를 만들어 app.js 프로젝트/작업 목록에 인라인 편집/삭제 기능, 실시간 업데이트가 포함된 활성 타이머 표시 기능, 그리고 작업, 프로젝트 및 프로젝트별 작업에 대한 총계를 집계하는 총계 패널을 구현하세요. 6. 데스크톱에 최적화된 3열 레이아웃, 활성/일시 중지된 타이머에 대한 명확한 시각적 상태, 프로젝트 및 작업 추가/편집을 위한 간단한 양식으로 인터페이스styles.css 스타일 지정

   추가 고려 사항

          **날짜 처리** - 모든 시간을 ISO 문자열로 저장하고 오늘 날짜(`YYYY-MM-DD`)까지 항목을 필터링합니다. 요일 경계는 자정 또는 사용자 지정 시간(예: 심야 근로자의 경우 오전 4시)이어야 하나요?
   

          **타이머 표시 형식** - 경과된 시간을 그대로 `HH:MM` 표시하거나 `H hours M minutes`? 1초 또는 1분마다 업데이트하시겠습니까?
   

             **할당되지 않은 작업** - UI에 프로젝트 없이 작업을 표시하는 방법 사이드바의 위쪽/아래쪽에 "프로젝트 없음" 섹션을 구분하거나 사전순으로 혼합하시겠습니까?
   

1. Copilot 관련 ‘추가 고려 사항’ 질문에 답변해 주세요. 예를 들어 다음 프롬프트로 응답할 수 있습니다.

   Copilot prompt

   - Date handling: only consider the local date. This app is only going to be used by one person in one timezone. Set the day boundary to 4 am.
   - Time display: Show elapsed time as HH:MM. Don't track seconds.
   - Unassigned tasks: I've changed my mind. All tasks should be associated with a project, but there should be a built-in project called "No Project" (which the user can't delete or rename). All tasks should be associated with this project until the user chooses another project.
   
   If the user is changing tasks for the same project then they should be able to do this with one click (assuming the new task has already been defined). If they are doing the same task but for a different project, this should also be possible to change with one click (assuming the new project is already defined). If they want to track time for a different task in a different project then they should be able to do this with 2 clicks.
   

   Copilot은 추가 고려 사항에 대한 질문을 포함하여 답변할 수 있습니다.

2. 일부 또는 모든 질문에 대답하거나 계획에 세부 정보가 충분하다고 생각되면 다음 단계로 건너뛸 수 있습니다.

   Copilot의 응답은 비결정적이므로 질문하는 질문은 다양하지만 응답에 다음 질문이 포함되어 있다고 가정해 보겠습니다.

          **새 작업 기본 프로젝트 - 프로젝트를** 지정하지 않고 새 작업을 추가할 때 "프로젝트 없음" 또는 현재 활성/선택한 프로젝트에 할당하시겠습니까? 권장 사항: 현재 선택되거나 활성화된 프로젝트는 ‘프로젝트 없음’입니다.
   

          **타이머 정밀도 경계 사례** - 사용자가 같은 분 내에 작업을 전환하는 경우(예: 10:30:15 ~ 10:30:45) 0분짜리 기록을 만들거나 무시해야 하나요? 권장 사항: 기록하지 않고 즉시 전환으로 무시하고 처리합니다.
   

   프롬프트를 입력하여 이러한 질문에 응답하도록 결정할 수 있습니다.

   Copilot prompt

   New task default project - When adding a new task without actively specifying a project, use the currently selected/active project with "No Project" as the default when the user has not actively selected any other project.
   
   Timer precision edge case - If user switches or ends tasks within the same minute as the start time then delete this entry. Only time entries of more than one minute should be recorded.
   

3. 답변이 필요한 추가 질문이 있는 경우 계속 반복합니다.

4. Copilot은 다음 단계를 수행하는 동안 채팅 대화가 필요하므로 열어 두세요.

애플리케이션을 구축할 때 Copilot 코딩 에이전트을 사용하세요.

계획에 충분한 세부 정보가 포함되어 있다고 생각되는 경우:

1. 부조종사 채팅 보기에서 실행 시작 을 클릭하세요.

   IDE에 따라 에이전트가 즉시 시작되거나 프롬프트로 "구현 시작"이 추가되므로 제출해야 합니다.

   채팅 모드가 "플랜"에서 "에이전트"로 전환됩니다.

2. Copilot는 중요한 파일 편집, 명령 실행 또는 Git에 파일 추가와 같은 작업을 수행할 수 있는 권한을 요청합니다.

   •      **VS Code:에서**허용**을 클릭합니다**.
     

     

     또는 허용 단추의 화살표를 클릭하고 드롭다운 메뉴에서 이 세션에서 허용 을 클릭합니다.

   •      **JetBrains에서:**
     

     • Git에 파일을 추가할 것인지 묻는 메시지가 표시되면 다시 묻지 않음 확인란을 선택한 다음 추가를 클릭합니다.

     • 명령 실행에 대해 묻는 메시지가 표시되면 [계속]을 클릭합니다.

       

   Copilot은(는) 애플리케이션의 초기 버전을 구현하기 시작합니다.

3. Copilot이(가) 설치를 완료하지 않고 응답을 완료하거나 Copilot가 중단된 것으로 표시되는 경우 필요에 따라 다음 수정 작업을 수행합니다.

   •      **누락된 구성 요소**
     

     Copilot에 필요한 구성 요소를 설치해야 하기 때문에(예: Node.js) 계속 진행할 수 없다고 표시되면 Copilot에게 누락된 구성 요소를 다운로드하고 설치하라는 프롬프트를 입력할 수 있습니다.

   •      **프로세스가 오래 걸리고 있습니다.**
     

     일부 단계를 완료하는 데 몇 분 정도 걸릴 수 있습니다. 인내심을 갖고 에이전트가 프로세스의 각 부분을 완료하도록 허용합니다. 애니메이션 회전자 아이콘은 에이전트가 현재 명령에서 작업 중임을 나타냅니다.

     예를 들어 JetBrains IDE에서 다음을 수행합니다.

     

   •      **입력 필요**
     

     경우에 따라 Copilot에서 수동 입력이 필요한 명령을 실행해야 할 수도 있습니다.

     Copilot이(가) 중단된 것으로 보이면 IDE의 터미널 창을 확인하여 명령어가 사용자의 작업을 요구하는지 여부를 확인합니다. Copilot은 터미널에 응답을 입력해야 다음 단계로 넘어갑니다.

   •      **오류 메시지**
     

     애플리케이션을 개발하는 동안 오류 메시지가 표시되면 오류 메시지를 채팅 프롬프트 상자에 복사하고 Copilot에게 문제를 해결하도록 요청합니다.

     참고 항목

     브라우저에서 볼 수 있는 작동하는 애플리케이션이 나올 때까지 Copilot와 반복적으로 상호 작용하면서 문제점을 디버깅하고 수정해야 할 수 있습니다.

   •      **Copilot의 응답이 중단된 것으로 보입니다.**
     

     회신 아이콘이 응답에 표시되지만 몇 분 동안 기다린 후 터미널에서 입력이 필요하지 않은지 확인한 후에 아무 일도 발생하지 않으면 대화를 중지하고 다시 시작할 수 있습니다.

     채팅 보기 아래쪽의 취소 단추를 클릭합니다. 예를 들어 VS Code:

     

     그런 다음 프롬프트를 입력합니다.

     Copilot prompt

     Your previous response stalled. Try again, picking up from where you left off.
     

4. 일반적으로 코딩 프로세스가 끝날 무렵, Copilot는 애플리케이션에서 신뢰할 수 없는 웹 페이지를 열기 위한 귀하의 권한을 요청할 것입니다.

   

   이에 대한 사용 권한을 부여합니다.

5. 에이전트가 애플리케이션에 대한 작업을 마치면 채팅 패널에서 빌드한 내용에 대한 요약이 표시됩니다. 일반적으로 실행 중인 애플리케이션에 대한 링크를 제공합니다.

   시간 추적기 애플리케이션은 IDE의 브라우저 탭에도 표시될 수 있습니다. 이는 페이지를 사용할 수 있는지 확인하는 데 유용할 수 있습니다. 그러나 항상 기본 브라우저에서 애플리케이션을 확인하여 실제 사용자 환경을 확인해야 합니다.

   채팅 패널의 링크를 클릭하여 기본 브라우저에서 애플리케이션을 엽니다.

   Copilot 채팅 응답에서 링크가 보이지 않는다면, 에이전트가 애플리케이션을 배포하는 데 시간이 걸릴 수 있으니 잠시 기다려 주세요. 링크가 아직 표시되지 않는 경우, Copilot에 링크 표시를 요청할 수 있습니다.

   Copilot prompt

   Confirm the implementation is complete. If so, give me a link to the running application.
   

6. Copilot의 최종 메시지가 실행 중인 애플리케이션에 대한 링크를 제공하는 대신 애플리케이션 시작 지침(예: 실행 npm start)을 제공하는 경우 Copilot에게 명령을 실행하고 성공적으로 완료되었는지 확인할 수 있습니다. 다음은 그 예입니다.

   Copilot prompt

   Run npm start for me and confirm everything is working
   

   Copilot이(가) 모든 명령 자체를 실행할 수 없는 경우 복사하여 터미널에 붙여넣을 수 있는 명령을 제공합니다.

애플리케이션 테스트

1. 애플리케이션의 웹 페이지를 봅니다.

   다음은 Copilot에서 만든 시간 추적 애플리케이션의 예시 몇 가지입니다.

   
   

   참고 항목

   Copilot에서 생성하는 애플리케이션은 위에 제시된 예시와 상당히 다를 수 있습니다.

2. 애플리케이션을 사용해 보세요. 프로젝트 몇 개와 작업 선택 항목을 추가한 다음 작업에서 시간 추적을 시작합니다.

3. 이 애플리케이션의 첫 번째 초안을 사용해 볼 때 변경해야 하는 가장 중요한 두 가지 또는 세 가지 사항을 기록해 둡다. 이후 단계에서는 이러한 문제를 해결하는 작업을 수행합니다. 지금은 변경하려는 모든 것을 적어 두는 데 시간을 할애하지 마십시오. 먼저 해결해야 하는 가장 시급한 항목을 식별하기만 하면 됩니다. 일단 모든 작업을 마치고 나면, 프로세스의 뒷부분에서 원하는 방식으로 검토할 시간이 주어집니다.

4. 애플리케이션이 로드되지 않거나 오류가 표시되는 경우 채팅 프롬프트 상자에 문제를 설명하고 오류 메시지를 복사 및 붙여넣고 Copilot에게 문제를 디버그하고 해결하도록 요청합니다.

5. 애플리케이션의 초기 초안을 검토하고 최소한 기본적인 방식으로 실행되도록 설정한 후 IDE로 돌아갑니다.

6.        _
          **선택 사항**: Copilot가 작성하는 코드의 유형에 익숙한 경우, 사용자를 대신하여 작성합니다._ Copilot이 변경한 파일을 편집기에 표시하여 변경 사항을 검토합니다. 필요한 경우 직접 변경할 수 있습니다.
   

7. 변경 내용을 적용하고 편집기에서 diff 줄을 제거하려면 VS Code에서 유지 를 클릭하거나 부조종사 채팅 보기에서 모두 적용 (JetBrains IDE)을 클릭하세요.

   이제 기능 및 사용자 인터페이스를 개선하고 확장하기 위해 반복할 수 있는 기본 버전의 애플리케이션이 있습니다.

8. Git에 변경 내용을 커밋합니다.

   Copilot에서 변경한 내용이 마음에 들지 않을 경우, 이전 버전으로 쉽게 되돌릴 수 있도록 변경 사항을 성공적으로 반복할 때마다 커밋하는 것이 좋습니다.

9. 열려 있는 편집기 탭을 닫고, 부조종사 채팅 보기를 열어 둔 채로 동일한 채팅 대화를 계속 진행하세요.

변경 내용 반복

1. 초기 버전을 git에 커밋한 후에는 사이트를 검토할 때 적어 두는 항목 중 하나를 수정하여 애플리케이션을 변경할 수 있습니다.

   예를 들어 한 프로젝트에 대해 만든 작업이 다른 프로젝트를 선택할 때 표시되지 않도록 구현에 태스크가 프로젝트에 연결되었을 수 있습니다. 이를 변경하여 모든 프로젝트에 사용할 수 있는 작업을 생성하려면 Copilot의 에이전트 모드에서 동일한 대화에 다른 프롬프트를 입력하세요. 다음과 같은 프롬프트를 사용할 수 있습니다.

   Copilot prompt

   Tasks should not be tied to projects in the user interface, as they currently are. When the user selects a project, allow them to choose any currently defined task. There should be a many-to-many relationship between projects and tasks.
   

2. 다시 말해 Copilot에게 코드 변경 사항 승인을 요청할 수 있습니다. 승인 또는 계속을 클릭합니다.

3. Copilot이(가) 변경 내용을 완료하면 브라우저로 돌아가 페이지를 새로 고칩니다.

4. 수정된 애플리케이션을 검토하고 변경 사항이 올바르게 구현되지 않았을 경우이를 Copilot에게 알려주십시오.

   수정해야 하는 항목을 둘 이상 발견할 수 있지만 Copilot에서 한 번에 한 가지에 집중할 수 있도록 하려면, 프롬프트마다 단일 작업이 포함되도록 제한해야 하며, 문제가 해결될 때까지 필요에 따라 프롬프트와 응답을 반복하여 작업을 진행해야 합니다. 그런 다음 변경하려는 다음 항목으로 이동합니다.

5. 웹 페이지의 레이아웃(예: 겹치거나 잘못 정렬된 요소)에 문제가 있는 경우 스크린샷을 찍어 채팅에 붙여넣고 다음과 같은 프롬프트를 입력할 수 있습니다.

   Copilot prompt

   This part of the web page looks bad. Fix it.
   

6. 변경 내용이 만족스럽게 구현된 후 모두 유지 또는 적용 을 클릭하고 변경 내용을 커밋합니다.

7.        _
          **선택 사항**:_ 작업 사례(예: 개발 팀에서 작업하는 경우)에 따라 이 시점과 중요한 변경이 있을 때마다 끌어오기 요청을 발생하도록 결정할 수 있습니다. 이렇게 하면 다른 사용자가 코드를 작업할 수 있도록 변경 내용을 검토하고 리포지토리의 기본 분기에 병합할 수 있습니다.
   

8. 애플리케이션에서 계속 반복합니다.

   예를 들어 앱에 다른 스타일의 사용자 인터페이스를 제공할 수 있습니다. 에이전트 모드를 사용하는 경우, Copilot이 표시될 수 있습니다.

   Copilot prompt

   I don't like the look of the user interface. Suggest some alternative web UI libraries I could choose to give the app a more formal, business-like appearance.
   

   Copilot에는 일부 UI 라이브러리가 나열됩니다.

9. 라이브러리 중 하나를 선택한 후 Copilot에게 그 라이브러리를 사용하라고 요청하세요. 다음은 그 예입니다.

   Copilot prompt

   Alter the user interface to use Bootstrap 5. I want the app to look like a professionally designed business application.
   

   Copilot는 선택한 사용자 인터페이스 라이브러리를 사용하도록 애플리케이션을 다시 작업합니다.

10. 애플리케이션의 수정된 모양에 만족하는 경우 결과를 확인하고 변경 내용을 커밋합니다.

11. 시간 추적기 애플리케이션에 대한 일반적인 요구 사항은 작업표를 출력하는 기능입니다. 예를 들어 계약자인 경우 청구서와 함께 작업표를 제출해야 할 수 있습니다. 따라서 PDF를 생성하는 기능을 추가해 보겠습니다.

    다음 프롬프트를 사용합니다.

    Copilot prompt

    Add a button to the user interface which generates a PDF timesheet for the work the user has tracked today. The timesheet should show the total time spent on task for each of the defined project for which data has been recorded today. Under this show the total time spent on each project. Then show the total time spent on each task irrespective of projects. Finally show a chronological lists of tasks performed during the day with the time spent on each.
    

예제 애플리케이션

Copilot으로 시간 추적기를 만들고 기능을 확장하며 개선한 결과, 애플리케이션은 다음 모습과 같이 완성될 수 있습니다.

소프트웨어 프로젝트 개선

1. Copilot으로 테스트를 추가하고 실행하여 프로젝트를 더욱 견고하게 만들 수 있습니다. 테스트는 버그가 코드베이스로 들어오는 것을 방지하는 데 도움이 됩니다. 에이전트 모드에서 Copilot을(를) 프롬프트할 수 있습니다.

   Copilot prompt

   Add a comprehensive suite of tests for this application. These should include unit tests, integration tests, component tests, database tests, and end-to-end tests. Locate the tests in a `tests` directory. Run the tests and fix any problems that are identified.
   

2. 프로젝트에 README 파일을 항상 포함하는 것이 좋습니다. 추가 정보에서는 프로젝트에 대한 개요를 제공하고 애플리케이션 사용에 대한 지침을 제공해야 합니다. Copilot에게 README 파일을 만들거나 업데이트하도록 요청할 수 있습니다.

   Copilot prompt

   Add or update a README.md file. This should provide an introduction to the application, describing its primary use and highlighting its features. It should give easy to follow user instructions for using the application in the browser. It should provide admin instructions, explaining how to deploy the application. Finally it should give an overview of the technologies used to build the application and some basic information for developers on how to maintain the code and extend the application.
   

3. 이제 애플리케이션의 초기 코드를 리포지토리에 추가했으므로 Copilot에 대한 사용자 지정 지침 파일을 추가해야 합니다. 사용자 지정 지침 파일은 리포지토리별 지침 및 구현 기본 설정을 제공하여 리포지토리에서 Copilot의 응답을 향상시킵니다. 사용자 지정 지침 파일을 추가하려면 다음을 수행합니다.

   •      **VS Code:** 채팅 보기 맨 위에 있는 "채팅 구성" 코그 아이콘을 클릭하고 **채팅 지침 생성을** 클릭합니다.
     

   •      **JetBrains IDE:** 부조종사 채팅의 에이전트 모드에서 다음 프롬프트를 제출하세요.
     

     Copilot prompt

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI coding agents.
     
     Discover essential knowledge for immediate productivity:
     - Architecture: major components, service boundaries, data flows, and structural decisions
     - Developer workflows: builds, tests, debugging commands
     - Project conventions that differ from common practices
     - Integration points and cross-component communication
     
     Guidelines:
     - Merge intelligently if file exists
     - Write ~20-50 concise lines with markdown structure
     - Include specific codebase examples
     - Focus on THIS project's approaches, not generic advice
     - Document discoverable patterns, not aspirational patterns
     - Reference key files/directories that exemplify important patterns
     

4. 지침 파일을 검토합니다. 지침에 몇 가지 세부 정보가 필요하다고 생각되면 파일에 수동으로 추가하고 저장할 수 있습니다. 예를 들어 파일에 이에 대한 지침이 아직 포함되어 있지 않은 경우 테스트 실행에 대한 지침을 추가할 수 있습니다.

   Text

   ## Running tests
   
   Always run the complete test suite after completing a batch of code changes, to ensure the changes do not break or adversely affect any part of the application. Fix any test failures and then run the tests again to verify the fix.
   

다음 단계

• 이 프로젝트를 계속 반복하여 시간 추적기를 개선합니다.
• 동일한 방법론을 사용하여 다른 애플리케이션을 만듭니다.
• 코드를 직접 작성하지 않고 애플리케이션을 만들 수 있는 다른 방법을 알아봅니다. GitHub Spark 정보을(를) 참조하세요.