<div id="readability-page-1" class="page"><div>
					작년 <a href="https://blog.outsider.ne.kr/1696">GitHub Universe 콘퍼런스</a>에서 키노트를 다 끝내고 One more thing..이라고 하며 살짝 공개했었는데 올해 4월 공식적으로 <a href="https://github.blog/2024-04-29-github-copilot-workspace/">GitHub Copilot Workspace를 공개</a>하면 <a href="https://githubnext.com/projects/copilot-workspace">테크니컬 프리뷰</a>를 시작했다.(현재는 신청하고 허가받아야 사용할 수 있다.)

<img src="https://blog.outsider.ne.kr/attach/1/4939101341.jpg" width="750" height="350" alt="사용자 삽입 이미지" title="">

<div>사용 권한은 바로 받았지만 요즘 코딩을 많이 못 하고 있기도 했고 개인적인 의도로 업무용 GitHub 계정과 개인 계정을 분리해서 쓰고 있는데 권한을 받은 것은 개인 계정 쪽이기 때문에 가장 써보기 좋은 업무에서 사용하지 못하는 제약도 있었던 터라 이제야 제대로 테스트를 해보게 되었다.</div>

<h2>GitHub Copilot Workspace</h2>

작년 GitHub Universe에서 GitHub은 원래 Git을 기반으로 설립되었지만, 이제는 Copilot을 기반으로 다시 설립되었다며 Copilot 중심으로 한 개발자를 위한 AI 플랫폼이 될 것임을 선포했는데 그 연장선에 있는 기능이라고 할 수 있다.

<div>GitHub Copilot Workspace가 무엇이냐고 한다면 우리가 보통 일을 할 때 테스크 중심으로 일을 시작하게 되는데(이슈, 티켓 등 뭐라고 부르던) GitHub Issues에 적은 내용을 바탕으로 워크스페이스에서 계획을 세우고 코드를 제안받은 뒤에 Pull Request까지 만들 수 있는 환경을 의미한다.</div>

<h2>예시: 프로젝트 초기화하기</h2>

<img src="https://blog.outsider.ne.kr/attach/1/4064645727.jpg" width="750" height="135" alt="사용자 삽입 이미지" title="">

AI는 보통 다양한 사례에서 어느 정도 사용해 봐야 퀄리티에 대한 느낌을 알 수 있지만 동작 방식을 이해하기 위해 <code>README.md</code>만 있는 저장소를 새로 만들었다.

<img src="https://blog.outsider.ne.kr/attach/1/5019196826.jpg" width="750" height="363" alt="사용자 삽입 이미지" title="">

아무것도 없는 저장소이니 첫 작업부터 Copilot Workspace 기능을 사용하기 위해 프로젝트를 <a href="https://nextjs.org/">Next.js</a>로 만들기 위해서 Next.js 프로젝트를 초기화하는 이슈를 만들었다. 가볍게 테스트해 보니 한국어로 써도 이해는 하는 거 같은데 아직 퀄리티를 정확히는 몰라서 일단 간단한 영어로 테스트했다. GitHub Issues 화면에서 나는 사용 권한을 얻었기 때문에 <code>Open in Workspace</code> 버튼이 있는 것을 볼 수 있다.

이 <code>Open in Workspace</code> 버튼을 누르면 아직 테크니컬 프리뷰로만 공개된 상태라 GitHub에서 다양한 실험을 진행하는 조직인 <a href="https://githubnext.com/">GitHub Next</a>에서 관리되고 있기 때문에 <code>copilot-workspace.githubnext.com</code> 도메인으로 이동하고 Workspace용 새로운 세션이 생성된다.

<img src="https://blog.outsider.ne.kr/attach/1/8629752486.jpg" width="750" height="362" alt="사용자 삽입 이미지" title="">

Workspace는 이슈 기반으로 작업을 진행하기 위해서 <code>Issue</code> - <code>Specification</code> - <code>Plan</code> - <code>Implementation</code> 4가지 단계로 진행된다. Issue는 기존에 작성된 이슈의 내용을 분석하는 과정이고 이를 바탕으로 명세서(Specification)을 작성하고 명세에 따라 구체적인 계획을 세우고 그에 따라 실제 구현하는 과정을 거치게 된다.

<img src="https://blog.outsider.ne.kr/attach/1/9233196709.jpg" width="750" height="806" alt="사용자 삽입 이미지" title="">

위는 Copilot이 제시한 Specification이다. 현재 저장소의 상황이 Next.js 코드가 없고 <code>README.md</code>만 있다는 것을 파악하고 이를 기반으로 기본 Next.js 프로젝트 구조를 만들기 위해 어떤 파일을 만들어야 할지 명세를 제시한다.

<img src="https://blog.outsider.ne.kr/attach/1/4903371668.jpg" width="750" height="372" alt="사용자 삽입 이미지" title="">

이 명세서는 AI가 기본적으로 제공해 준 것이지만 사람이 수정할 수 있다. 아이템을 추가하거나 기존 내용을 변경해서 부족하다고 생각하는 부분을 채워 넣을 수 있다. Next.js를 아주 잘 알진 못하지만, 명세에 큰 문제는 없기 때문에 <code>Generate plan</code> 버튼을 누르면 다음 단계로 넘어간다.

<img src="https://blog.outsider.ne.kr/attach/1/2348311950.jpg" width="750" height="1243" alt="사용자 삽입 이미지" title="">

명세를 기준으로 구체적인 계획을 만들어주었다. 계획에는 구체적인 파일을 명시하고 각 파일의 내용에 대한 설명이 포함되어 있다. 내용을 보면 꽤 구체적으로 계획을 잘 세워주었음을 알 수가 있고 각 파일에는 체크박스가 있어서 구현하지 않을 파일은 제외할 수 있다. <code>Implement selected files</code> 버튼을 눌러서 구현을 어떻게 하는지 살펴보자.

<img src="https://blog.outsider.ne.kr/attach/1/3072079746.jpg" width="750" height="663" alt="사용자 삽입 이미지" title="">

계획에 맞게 실제 파일을 생성하고 내용을 작성해 준다. 복잡한 기능이 아니라 그런지 잘 작성해 주었다.

<img src="https://blog.outsider.ne.kr/attach/1/6205428078.jpg" width="750" height="440" alt="사용자 삽입 이미지" title="">

<code>package.json</code>의 의존성에서 <code>latest</code>로 명시한 게 맘에 들지 않아서 구체적인 현재 최신 버전을 적어달라고 요청했다. 물론 왼쪽 메뉴에서 보듯이 이 파일들을 file explorer를 열어서 코드를 수정할 수 있는 모달이 뜨기 때문에 직접 수정하는 것도 가능하다.

<img src="https://blog.outsider.ne.kr/attach/1/1390053532.jpg" width="750" height="394" alt="사용자 삽입 이미지" title="">

인터넷에서 정보가 찾기는 어려운지 현재 최신 버전은 아니지만 테스트기도 해서 이대로 넘어가도록 하자.

<img src="https://blog.outsider.ne.kr/attach/1/1907564035.jpg" width="750" height="202" alt="사용자 삽입 이미지" title="">

이제 이 변경 사항으로 Pull Request를 만들 수 있는데 그 외에도 일단 Draft로 만들거나 아예 브랜치에 직접 푸시하는 것도 가능하다. 여기서는 Pull Request로 만들어 보자.

<img src="https://blog.outsider.ne.kr/attach/1/7568155943.jpg" width="750" height="486" alt="사용자 삽입 이미지" title="">

이번에도 사람이 한번 수정할 수 있도록 Pull Request의 제목과 내용을 AI가 알아서 채워준다.

<img src="https://blog.outsider.ne.kr/attach/1/1313282155.jpg" width="750" height="173" alt="사용자 삽입 이미지" title="">

그대로 생성하면 Pull Request를 등록해 주고 해당 Workspace 세션은 완료로 처리한다.

<img src="https://blog.outsider.ne.kr/attach/1/1975492558.jpg" width="750" height="363" alt="사용자 삽입 이미지" title="">

깔끔하게 변경 사항을 정리해서 관련 이슈까지 연결해 준 Pull Request를 올려준다.(이슈를 연결할 때 <code>Fix</code>나 <code>Close</code>로 해주지 않아서 Pull Request를 닫을 때 자동으로 닫히지 않는 점은 아쉽다.) AI는 그대로 믿을 수 없으니 다운받아서 돌려보면 <code>pages/_app.js</code>에서 파일명은 JS이지만 코드는 TypeScript와 섞어놔서 제대로 동작하지 않는다.

<pre><code>import { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
 return &lt;Component {...pageProps} /&gt;;
}

export default MyApp;
</code></pre>

이 부분만 수정하면 잘 동작하는 것을 볼 수 있다.

<img src="https://blog.outsider.ne.kr/attach/1/2439380142.jpg" width="600" height="123" alt="사용자 삽입 이미지" title="">

<div>물론 동작 문제가 생길 정도로 별 코드가 없긴 하다.</div>

<h2>예시: <code>.gitignore</code> 추가하기</h2>

테스트라서 추가로 필요한 작업을 계속 Workspace를 이용해 보자.

<img src="https://blog.outsider.ne.kr/attach/1/6101868504.jpg" width="750" height="169" alt="사용자 삽입 이미지" title="">

프로젝트에서 <code>node_modules</code>와 <code>.next</code> 폴더가 <code>git status</code> 할 때 나와서 <code>.gitignore</code>를 추가하는 이슈를 만들었다.

<img src="https://blog.outsider.ne.kr/attach/1/6557296639.jpg" width="700" height="688" alt="사용자 삽입 이미지" title="">

이슈를 바탕으로 필요한 명세를 만들어 준다.

<img src="https://blog.outsider.ne.kr/attach/1/1769258283.jpg" width="700" height="571" alt="사용자 삽입 이미지" title="">

계획에서 이슈에 없던 로그파일이나 환경 변수 파일도 추가해 주었지만, 큰 상관은 없다.

<img src="https://blog.outsider.ne.kr/attach/1/1481416666.jpg" width="750" height="521" alt="사용자 삽입 이미지" title="">



<h2>예시: 헬스 체크용 엔드포인트 추가하기</h2>

<img src="https://blog.outsider.ne.kr/attach/1/4389672819.jpg" width="750" height="222" alt="사용자 삽입 이미지" title="">

테스트를 좀 더 해보고자 간단한 헬스 체크용 API 엔드포인트를 추가하는 이슈를 만들었다.

<img src="https://blog.outsider.ne.kr/attach/1/6998810908.jpg" width="750" height="697" alt="사용자 삽입 이미지" title="">

이슈를 바탕으로 명세서를 작성해 준다.

<img src="https://blog.outsider.ne.kr/attach/1/8729740046.jpg" width="750" height="723" alt="사용자 삽입 이미지" title="">

구체적인 코드에 대한 계획을 보여준다. 이 계획에서 보듯이 여기선 JavaScript이므로 <code>NextApiRequest</code>와 <code>NextApiResponse</code>를 임포트할 필요는 없지만 Copilot은 TypeScript랑 혼동해서 이를 추가하려고 계획을 세운다. 계획이 잘못되었으므로 <code>NextApiRequest</code>와 <code>NextApiResponse</code>를 임포트하는 부분을 계획에서 없애준다.

<img src="https://blog.outsider.ne.kr/attach/1/4334090340.jpg" width="750" height="532" alt="사용자 삽입 이미지" title="">

계획에 맞게 간단하지만, 적절한 코드를 작성해 준다.

<img src="https://blog.outsider.ne.kr/attach/1/9849038835.jpg" width="750" height="548" alt="사용자 삽입 이미지" title="">

<div>그리고 구현이 끝나면 터미널을 열어서 서버를 직접 실행하는 것도 가능하다. 서버가 실행되어서 포트가 열리면 Workspace가 자동으로 탐지해서 Live Preview 버튼이 활성화되고 여기에 접속해서 Workspace가 구현한 코드를 직접 테스트해 보면서 코드 리뷰를 하거나 수정하는 것도 가능하다.</div>

<h2>정리</h2>

GitHub Copilot Workspace가 어떻게 동작하는지 설명하기 위해 간단한 테스트를 했다. 물론 실제 프로젝트는 이것보다 더 복잡할 것이지만 그러면 명세와 계획에 대한 설명이 너무 복잡해질 것이기 때문에 동작 방식을 설명하기 위한 정도로 간단한 테스트만 했다.

이미 GitHub Copilot을 겪어봤겠지만, 코드 작성에 대한 능력은 Copilot과 당연히 비슷할 것으로 생각하고 프롬프트(여기서는 Plan)가 자세할수록 더 잘 작성하기 때문에 얼마나 어려운 코드를 잘 작성하는지까지 테스트하지 않았다.

AI를 사용할 때 내가 못 하는 건 AI로도 할 수 없다고 생각하는 편이지만 GitHub Copilot과는 또 다른 느낌으로 이슈에서 출발해서 작업의 뼈대를 만들고 동료와 같이 협업하듯이 계획을 세우고 코드를 검토한다는 부분이 상당히 재미있는 부분이고 아직 테크니컬 프리뷰임에도 전체적인 기능의 완성도가 상당히 좋다고 느껴졌다.

 </div></div>

Outsider's Dev Story

Outsider

작년 GitHub Universe 콘퍼런스에서 키노트를 다 끝내고 One more thing..이라고 하며 살짝 공개했었는데 올해 4월 공식적으로 GitHub Copilot Workspace를 공개하면 테크니컬 프리뷰를 시작했다.(현재는 신청하고 허가받아야 사용할 수 있다.)
사용 권한은 바로 받았지만 요즘 코딩을 많이 못 하고 있기도 했고 개인적인 의도로 업무용 GitHub 계정과 개인 계정을 분리해서 쓰고 있는데 권한을 받은 것은 개인 계정 쪽이기 때문에 가장 써보기 좋은 업무에서 사용하지 못하는 제약도 있었던 터라 이제야 제대로 테스트를 해보게 되었다.
GitHub Copilot Workspace
작년 GitHub Universe에서 GitHub은 원래 Git을 기반으로 설립되었지만, 이제는 Copilot을 기반으로 다시 설립되었다며 Copilot 중심으로 한 개발자를 위한 AI 플랫폼이 될 것임을 선포했는데 그 연장선에 있는 기능이라고 할 수 있다.
GitHub Copilot Workspace가 무엇이냐고 한다면 우리가 보통 일을 할 때 테스크 중심으로 일을 시작하게 되는데(이슈, 티켓 등 뭐라고 부르던) GitHub Issues에 적은 내용을 바탕으로 워크스페이스에서 계획을 세우고 코드를 제안받은 뒤에 Pull Request까지 만들 수 있는 환경을 의미한다.
예시: 프로젝트 초기화하기
AI는 보통 다양한 사례에서 어느 정도 사용해 봐야 퀄리티에 대한 느낌을 알 수 있지만 동작 방식을 이해하기 위해 README.md만 있는 저장소를 새로 만들었다.
아무것도 없는 저장소이니 첫 작업부터 Copilot Workspace 기능을 사용하기 위해 프로젝트를 Next.js로 만들기 위해서 Next.js 프로젝트를 초기화하는 이슈를 만들었다. 가볍게 테스트해 보니 한국어로 써도 이해는 하는 거 같은데 아직 퀄리티를 정확히는 몰라서 일단 간단한 영어로 테스트했다. GitHub Issues 화면에서 나는 사용 권한을 얻었기 때문에 Open in Workspace 버튼이 있는 것을 볼 수 있다.
이 Open in Workspace 버튼을 누르면 아직 테크니컬 프리뷰로만 공개된 상태라 GitHub에서 다양한 실험을 진행하는 조직인 GitHub Next에서 관리되고 있기 때문에 copilot-workspace.githubnext.com 도메인으로 이동하고 Workspace용 새로운 세션이 생성된다.
Workspace는 이슈 기반으로 작업을 진행하기 위해서 Issue - Specification - Plan - Implementation 4가지 단계로 진행된다. Issue는 기존에 작성된 이슈의 내용을 분석하는 과정이고 이를 바탕으로 명세서(Specification)을 작성하고 명세에 따라 구체적인 계획을 세우고 그에 따라 실제 구현하는 과정을 거치게 된다.
위는 Copilot이 제시한 Specification이다. 현재 저장소의 상황이 Next.js 코드가 없고 README.md만 있다는 것을 파악하고 이를 기반으로 기본 Next.js 프로젝트 구조를 만들기 위해 어떤 파일을 만들어야 할지 명세를 제시한다.
이 명세서는 AI가 기본적으로 제공해 준 것이지만 사람이 수정할 수 있다. 아이템을 추가하거나 기존 내용을 변경해서 부족하다고 생각하는 부분을 채워 넣을 수 있다. Next.js를 아주 잘 알진 못하지만, 명세에 큰 문제는 없기 때문에 Generate plan 버튼을 누르면 다음 단계로 넘어간다.
명세를 기준으로 구체적인 계획을 만들어주었다. 계획에는 구체적인 파일을 명시하고 각 파일의 내용에 대한 설명이 포함되어 있다. 내용을 보면 꽤 구체적으로 계획을 잘 세워주었음을 알 수가 있고 각 파일에는 체크박스가 있어서 구현하지 않을 파일은 제외할 수 있다. Implement selected files 버튼을 눌러서 구현을 어떻게 하는지 살펴보자.
계획에 맞게 실제 파일을 생성하고 내용을 작성해 준다. 복잡한 기능이 아니라 그런지 잘 작성해 주었다.
package.json의 의존성에서 latest로 명시한 게 맘에 들지 않아서 구체적인 현재 최신 버전을 적어달라고 요청했다. 물론 왼쪽 메뉴에서 보듯이 이 파일들을 file explorer를 열어서 코드를 수정할 수 있는 모달이 뜨기 때문에 직접 수정하는 것도 가능하다.
인터넷에서 정보가 찾기는 어려운지 현재 최신 버전은 아니지만 테스트기도 해서 이대로 넘어가도록 하자.
이제 이 변경 사항으로 Pull Request를 만들 수 있는데 그 외에도 일단 Draft로 만들거나 아예 브랜치에 직접 푸시하는 것도 가능하다. 여기서는 Pull Request로 만들어 보자.
이번에도 사람이 한번 수정할 수 있도록 Pull Request의 제목과 내용을 AI가 알아서 채워준다.
그대로 생성하면 Pull Request를 등록해 주고 해당 Workspace 세션은 완료로 처리한다.
깔끔하게 변경 사항을 정리해서 관련 이슈까지 연결해 준 Pull Request를 올려준다.(이슈를 연결할 때 Fix나 Close로 해주지 않아서 Pull Request를 닫을 때 자동으로 닫히지 않는 점은 아쉽다.) AI는 그대로 믿을 수 없으니 다운받아서 돌려보면 pages/_app.js에서 파일명은 JS이지만 코드는 TypeScript와 섞어놔서 제대로 동작하지 않는다.
import { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
 return <Component {...pageProps} />;
}
export default MyApp;
이 부분만 수정하면 잘 동작하는 것을 볼 수 있다.
물론 동작 문제가 생길 정도로 별 코드가 없긴 하다.
예시: .gitignore 추가하기
테스트라서 추가로 필요한 작업을 계속 Workspace를 이용해 보자.
프로젝트에서 node_modules와 .next 폴더가 git status 할 때 나와서 .gitignore를 추가하는 이슈를 만들었다.
이슈를 바탕으로 필요한 명세를 만들어 준다.
계획에서 이슈에 없던 로그파일이나 환경 변수 파일도 추가해 주었지만, 큰 상관은 없다.
간단한 파일이라 잘 만들어 주었다.
예시: 헬스 체크용 엔드포인트 추가하기
테스트를 좀 더 해보고자 간단한 헬스 체크용 API 엔드포인트를 추가하는 이슈를 만들었다.
이슈를 바탕으로 명세서를 작성해 준다.
구체적인 코드에 대한 계획을 보여준다. 이 계획에서 보듯이 여기선 JavaScript이므로 NextApiRequest와 NextApiResponse를 임포트할 필요는 없지만 Copilot은 TypeScript랑 혼동해서 이를 추가하려고 계획을 세운다. 계획이 잘못되었으므로 NextApiRequest와 NextApiResponse를 임포트하는 부분을 계획에서 없애준다.
계획에 맞게 간단하지만, 적절한 코드를 작성해 준다.
그리고 구현이 끝나면 터미널을 열어서 서버를 직접 실행하는 것도 가능하다. 서버가 실행되어서 포트가 열리면 Workspace가 자동으로 탐지해서 Live Preview 버튼이 활성화되고 여기에 접속해서 Workspace가 구현한 코드를 직접 테스트해 보면서 코드 리뷰를 하거나 수정하는 것도 가능하다.
정리
GitHub Copilot Workspace가 어떻게 동작하는지 설명하기 위해 간단한 테스트를 했다. 물론 실제 프로젝트는 이것보다 더 복잡할 것이지만 그러면 명세와 계획에 대한 설명이 너무 복잡해질 것이기 때문에 동작 방식을 설명하기 위한 정도로 간단한 테스트만 했다.
이미 GitHub Copilot을 겪어봤겠지만, 코드 작성에 대한 능력은 Copilot과 당연히 비슷할 것으로 생각하고 프롬프트(여기서는 Plan)가 자세할수록 더 잘 작성하기 때문에 얼마나 어려운 코드를 잘 작성하는지까지 테스트하지 않았다.
AI를 사용할 때 내가 못 하는 건 AI로도 할 수 없다고 생각하는 편이지만 GitHub Copilot과는 또 다른 느낌으로 이슈에서 출발해서 작업의 뼈대를 만들고 동료와 같이 협업하듯이 계획을 세우고 코드를 검토한다는 부분이 상당히 재미있는 부분이고 아직 테크니컬 프리뷰임에도 전체적인 기능의 완성도가 상당히 좋다고 느껴졌다.
댓글 쓰기

GitHub Copilot Workspace: 이슈에서 시작하는 Copilot 네이티브 개발 환경

댓글