<div id="readability-page-1" class="page"><div>
					지난 15일 <a href="https://msevents.microsoft.com/event?id=1595073679">Microsoft Ignite Spotlight on Korea</a>에서 GitHub Copilot에 관해 발표했다.

<img src="https://blog.outsider.ne.kr/attach/1/750x347x8338548608.jpg.pagespeed.ic.ScPcBWmlWl.jpg" width="750" height="347" alt="Microsoft Ignite Spotlight on Korea" title="" data-pagespeed-url-hash="1194133051" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)">

MS 쪽에 아시는 분 부탁으로 발표하게 됐는데 GitHub이나 Microsoft 내부의 내용은 잘 몰라서 MS의 최영락 님과 공동으로 발표하게 되었다. 발표하겠다고 할 때는 잘 몰랐는데 나중에 알고 보니 거의 Microsoft 내부의 행사였고 외부 발표자는 나밖에 없었다. 공동 발표를 해 본 적은 있는데 친한 사람과 시나리오 정해서 해 본 적은 있는데 이번에는 자주 만날 수는 없는 상황이어서 앞부분에서는 GitHub Copilot의 배경에 관해 설명하고 나는 데모를 하는 시나리오로 준비했다.

<img src="https://blog.outsider.ne.kr/attach/1/750x562x4881094317.jpg.pagespeed.ic.nC0Xfod-m8.jpg" width="750" height="562" alt="Microsoft Ignite Spotlight on Korea 아젠다" title="" data-pagespeed-url-hash="3426319629" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)">

이번 콘퍼런스는 지난 10월 미국에서 열린 <a href="https://news.microsoft.com/ignite-2022/">Microsoft Ignite</a>를 한국에서 요약해서 다시 한번 하는 콘퍼런스로 Microsoft의 Satya Nadella가 방문하는 행사였다. 미리 Satya Nadella가 오는걸 들었기 때문에 한번 볼 겸 해서 발표를 수락한 것도 있다.

<img src="https://blog.outsider.ne.kr/attach/1/750x562x8063592495.jpg.pagespeed.ic.4we4jZ1DYH.jpg" width="750" height="562" alt="키노트의 Satya Nadella" title="" data-pagespeed-url-hash="1241417941" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)">

Satya Nadella는 내가 좋아하는 CEO 중 한 명이다. 빌 게이츠이후 CEO가 된 스티브 발머 시절까지의 Microsoft는 오픈소스와 상업용 소프트웨어로 대립하던 시기였고 IE 때문에 Microsoft에 대한 감정도 좋지 않았었다. 닷넷을 하는 게 아니라면 개발자로서 Microsoft는 그다지 인상적이지 않았는데 스티브 발머 이후 Satya Nadella가 CEO가 된 이후로는 회사가 급격히 달라지었다. 그때도 이미 엄청나게 큰 글로벌 회사였고 그전에는 Satya Nadella가 누군지도 몰랐지만 이렇게 큰 회사도 CEO가 바뀐것 만으로 회사가 얼마나 달라질 수 있는지 보여준 CEO였다.

이후 Microsoft는 많은 기술을 발표하고 오픈소스에도 친화적으로 되어 이제는 Microsoft와 오픈소스가 어울리는 이미지가 되었고 많은 부분에서 기술을 주도하는 역할을 하고 있다.

<img src="https://blog.outsider.ne.kr/attach/1/750x280x5130792055.jpg.pagespeed.ic.Go0suJfHPS.jpg" width="750" height="280" alt="키노트의 Satya Nadella" title="" data-pagespeed-url-hash="605541367" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)">

발표 전에는 다른 발표는 잘 못 듣지만 Satya Nadella를 보러 키노트는 참석했고 평소와 달리 최대한 앞에 앉았다. 혹시 컨퍼런스 장에서 악수하거나 같이 사진이라도 찍을 수 있으려나 했지만 그럴 기회는 없었고 키노트에서 발표하는 모습을 멀리서 본 것으로 만족해야 했다.



다른 발표와 달리 Microsoft 주도적인 행사였기에 발표 준비도 좀 수동적인 되긴 했다. 뒷부분 Copilot을 보여주는 데 집중했기에 발표 자료도 앞부분은 제외하고 내가 작성한 부분만 올리고 MS 의도에 맞춰서 내가 만든 초안에 약간의 수정이 있긴 했다.

<a href="https://github.com/features/copilot">GitHub Copilot</a> 데모를 준비하는데 처음에 걱정했던 대로 어려운 부분이 좀 있었다. 단순한 자동 완성이 아닌 AI이기 때문에 데모 때 원하는 대로 동작할지가 의문이었고 실제로도 그러했다. 영상에 대해 고민도 했지만 발표 흐름이 자연스럽지 않을 것 같았고 대부분 GitHub Copilot을 쓴 사람은 만족하듯이 실제로 보여주는 게 중요하다고 생각했다. 발표 대부분이 데모였기 때문에 영상이 공개될지 모르지만, 데모 기록만 남겨둔다.

준비한 시나리오는 다음과 같았고 내가 JetBrains 계열이 익숙하기 때문에 VS Code가 아니라 WebStorm을 시연했고 JavaScript를 사용했다.

<ol>
<li>주석으로 <code>// get fibonacci number</code>를 입력하면 GitHub Copilot이 피보나치 함수를 완성해 주는 것을 보여준다.</li>
<li>피보나치 함수를 영어가 아닌 한글 주석으로도 완성되는 걸 보여준다.</li>
<li>GitHub Copilot 플러그인에서 다양한 제안 중에서 고를 수 있는 것을 보여준다. </li>
<li>완성된 피보나치 함수의 동작을 확인하기 위해 <code>console.log</code>를 입력하면 <code>fib()</code>함수를 인식해서 <code>console.log(fib(10))</code>로 완성하는걸 보여준다. 여러번 연습했는데 항상 10을 제안해 주고 여러번 하고 10, 20, 30 순으로 제안해 준다.</li>
</ol>

실제 코딩할 때는 주석만으로 코드를 작성한다는 것은 쉽지 않기 때문에 좀 더 다양한 사례를 보여주고 싶었다. 그래서 검색으로 Stackoverflow에 가거나 공식 문서를 찾아보는 대신 GitHub Copilot을 이용하는 방식을 보여주고 싶어서 다음과 같은 자동 완성을 보여주었다.

<pre><code>// 문자열에서 특정 문자열을 교체하는 함수
const replaceAll = (str, searchStr, replaceStr) =&gt; {
 return str.split(searchStr).join(replaceStr);
}

// 배열에서 5보다 작은 수의 배열을 반환
const getLessThanFive = (numbers) =&gt; {
 return numbers.filter(number =&gt; number &lt; 5);
}

// 배열에 포함된 문자열 찾기
const findString = (str, searchStr) =&gt; {
 return str.indexOf(searchStr);
}
</code></pre>

이건 꽤 잘 나온 결과이고 같은 맥북에서 작업을 해도 할 때마다 약간씩 다르게 나왔는데 라이브 시연하면서 그냥 그런 부분을 그대로 보여주기로 했다. 이 외에도 정규표현식을 작성할 때 GitHub Copilot을 이용하는 것도 보여주었다.

<pre><code>// URL을 검증한 정규표현식
var urlReg = /^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;

// 전화번호를 검증하는 정규표현식
var phoneReg = /^\d{3}-\d{3,4}-\d{4}$/;

const checkPhoneNumber = (phone) =&gt; {
 return phoneReg.test(phone);
}
</code></pre>

패턴을 주면 GitHub Copilot이 더욱 잘 인식하기 때문에 다음과 같은 코드에서 <code>err404: "Page not found"</code>만 작성하면 이후부터는 알아서 제안해주는데 어떨 땐 아주 잘 되고 어떨 때는 이상한 코드가 나오거나 503을 계속 반복해서 제안해주는 패턴을 보인다. 이때 첫 줄을 영어 대신 <code>err404: "페이지를 찾을 수 없습니다"</code>처럼 작성하면 이후 오류 메시지도 한국어로 잘 제안해 준다.

<pre><code>const erroCodes = {
 err404: "Page not found",
 err500: "Internal server error",
 err503: "Service unavailable",
}
</code></pre>

다음과 같이 국제화 코드도 <code>ko</code>부분은 완성해 놓으면 아래는 언어코드만 입력하면 아주 잘 완성해 준다. 이때는 패턴이 정해졌기 때문에 거의 실수 없이 잘 제안해 준다. 물론 난 일본어와 러시아어를 모르기 때문에 이 제안이 정확한지는 알 수 없다.

<pre><code>const i18n = {
 ko: {
 Button: "버튼",
 Login: "로그인",
 Logout: "로그아웃",
 "Login Failed": "로그인 실패",
 Settings: "설정",
 },
 ja: {
 Button: "ボタン",
 Login: "ログイン",
 Logout: "ログアウト",
 "Login Failed": "ログイン失敗",
 Settings: "設定",
 },
 ru: {
 Button: "Кнопка",
 Login: "Войти",
 Logout: "Выйти",
 "Login Failed": "Ошибка входа",
 Settings: "Настройки",
 }
}
</code></pre>

이런 식으로 라이브 데모를 했다. 일반적으로 코딩을 할 때는 많은 코드가 있고 의도를 가지고 작업을 계속하기 때문에 GitHub Copilot이 잘 제안해 주고 이런 걸 보여주고 싶었지만 복잡한 코드에서의 라이브 데모는 더 쉽지 않았고 라이브 데모로 만든 짧은 코드에서는 제안이 항상 맘처럼 되진 않았다.

이후에는 GitHub에서 Copilot으로 실험하는 프로젝트가 있어서 <a href="https://githubnext.com/projects/copilot-labs/">GitHub Copilot Labs</a>로 주어진 코드를 영어로 설명하게 하거나 다른 언어로 변환하는 것을 보여주고 발표 전주에 발표된 <a href="https://githubnext.com/projects/hey-github/">Hey, GitHub</a>도 간단히 소개했다.(아쉽게도 이 발표 이틀 뒤에 Hey, GitHub 베타 접근을 초대받아서 발표 때는 웹사이트 소개만 했다.)

GitHub 티에 GitHub 후디를 입고 GitHub 부스에서 놀고 있었더니 너무 직원처럼 보였지만 오랜만에 사람들도 만나고 재미있었다.

 </div></div>

Outsider's Dev Story

Outsider

지난 15일 Microsoft Ignite Spotlight on Korea에서 GitHub Copilot에 관해 발표했다.
MS 쪽에 아시는 분 부탁으로 발표하게 됐는데 GitHub이나 Microsoft 내부의 내용은 잘 몰라서 MS의 최영락 님과 공동으로 발표하게 되었다. 발표하겠다고 할 때는 잘 몰랐는데 나중에 알고 보니 거의 Microsoft 내부의 행사였고 외부 발표자는 나밖에 없었다. 공동 발표를 해 본 적은 있는데 친한 사람과 시나리오 정해서 해 본 적은 있는데 이번에는 자주 만날 수는 없는 상황이어서 앞부분에서는 GitHub Copilot의 배경에 관해 설명하고 나는 데모를 하는 시나리오로 준비했다.
이번 콘퍼런스는 지난 10월 미국에서 열린 Microsoft Ignite를 한국에서 요약해서 다시 한번 하는 콘퍼런스로 Microsoft의 Satya Nadella가 방문하는 행사였다. 미리 Satya Nadella가 오는걸 들었기 때문에 한번 볼 겸 해서 발표를 수락한 것도 있다.
Satya Nadella는 내가 좋아하는 CEO 중 한 명이다. 빌 게이츠이후 CEO가 된 스티브 발머 시절까지의 Microsoft는 오픈소스와 상업용 소프트웨어로 대립하던 시기였고 IE 때문에 Microsoft에 대한 감정도 좋지 않았었다. 닷넷을 하는 게 아니라면 개발자로서 Microsoft는 그다지 인상적이지 않았는데 스티브 발머 이후 Satya Nadella가 CEO가 된 이후로는 회사가 급격히 달라지었다. 그때도 이미 엄청나게 큰 글로벌 회사였고 그전에는 Satya Nadella가 누군지도 몰랐지만 이렇게 큰 회사도 CEO가 바뀐것 만으로 회사가 얼마나 달라질 수 있는지 보여준 CEO였다.
이후 Microsoft는 많은 기술을 발표하고 오픈소스에도 친화적으로 되어 이제는 Microsoft와 오픈소스가 어울리는 이미지가 되었고 많은 부분에서 기술을 주도하는 역할을 하고 있다.
발표 전에는 다른 발표는 잘 못 듣지만 Satya Nadella를 보러 키노트는 참석했고 평소와 달리 최대한 앞에 앉았다. 혹시 컨퍼런스 장에서 악수하거나 같이 사진이라도 찍을 수 있으려나 했지만 그럴 기회는 없었고 키노트에서 발표하는 모습을 멀리서 본 것으로 만족해야 했다.
다른 발표와 달리 Microsoft 주도적인 행사였기에 발표 준비도 좀 수동적인 되긴 했다. 뒷부분 Copilot을 보여주는 데 집중했기에 발표 자료도 앞부분은 제외하고 내가 작성한 부분만 올리고 MS 의도에 맞춰서 내가 만든 초안에 약간의 수정이 있긴 했다.
GitHub Copilot 데모를 준비하는데 처음에 걱정했던 대로 어려운 부분이 좀 있었다. 단순한 자동 완성이 아닌 AI이기 때문에 데모 때 원하는 대로 동작할지가 의문이었고 실제로도 그러했다. 영상에 대해 고민도 했지만 발표 흐름이 자연스럽지 않을 것 같았고 대부분 GitHub Copilot을 쓴 사람은 만족하듯이 실제로 보여주는 게 중요하다고 생각했다. 발표 대부분이 데모였기 때문에 영상이 공개될지 모르지만, 데모 기록만 남겨둔다.
준비한 시나리오는 다음과 같았고 내가 JetBrains 계열이 익숙하기 때문에 VS Code가 아니라 WebStorm을 시연했고 JavaScript를 사용했다.
주석으로 // get fibonacci number를 입력하면 GitHub Copilot이 피보나치 함수를 완성해 주는 것을 보여준다.
피보나치 함수를 영어가 아닌 한글 주석으로도 완성되는 걸 보여준다.
GitHub Copilot 플러그인에서 다양한 제안 중에서 고를 수 있는 것을 보여준다. 
완성된 피보나치 함수의 동작을 확인하기 위해 console.log를 입력하면 fib()함수를 인식해서 console.log(fib(10))로 완성하는걸 보여준다. 여러번 연습했는데 항상 10을 제안해 주고 여러번 하고 10, 20, 30 순으로 제안해 준다.
실제 코딩할 때는 주석만으로 코드를 작성한다는 것은 쉽지 않기 때문에 좀 더 다양한 사례를 보여주고 싶었다. 그래서 검색으로 Stackoverflow에 가거나 공식 문서를 찾아보는 대신 GitHub Copilot을 이용하는 방식을 보여주고 싶어서 다음과 같은 자동 완성을 보여주었다.
// 문자열에서 특정 문자열을 교체하는 함수
const replaceAll = (str, searchStr, replaceStr) => {
 return str.split(searchStr).join(replaceStr);
}
// 배열에서 5보다 작은 수의 배열을 반환
const getLessThanFive = (numbers) => {
 return numbers.filter(number => number < 5);
}
// 배열에 포함된 문자열 찾기
const findString = (str, searchStr) => {
 return str.indexOf(searchStr);
}
이건 꽤 잘 나온 결과이고 같은 맥북에서 작업을 해도 할 때마다 약간씩 다르게 나왔는데 라이브 시연하면서 그냥 그런 부분을 그대로 보여주기로 했다. 이 외에도 정규표현식을 작성할 때 GitHub Copilot을 이용하는 것도 보여주었다.
// URL을 검증한 정규표현식
var urlReg = /^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
// 전화번호를 검증하는 정규표현식
var phoneReg = /^\d{3}-\d{3,4}-\d{4}$/;
const checkPhoneNumber = (phone) => {
 return phoneReg.test(phone);
}
패턴을 주면 GitHub Copilot이 더욱 잘 인식하기 때문에 다음과 같은 코드에서 err404: "Page not found"만 작성하면 이후부터는 알아서 제안해주는데 어떨 땐 아주 잘 되고 어떨 때는 이상한 코드가 나오거나 503을 계속 반복해서 제안해주는 패턴을 보인다. 이때 첫 줄을 영어 대신 err404: "페이지를 찾을 수 없습니다"처럼 작성하면 이후 오류 메시지도 한국어로 잘 제안해 준다.
const erroCodes = {
 err404: "Page not found",
 err500: "Internal server error",
 err503: "Service unavailable",
}
다음과 같이 국제화 코드도 ko부분은 완성해 놓으면 아래는 언어코드만 입력하면 아주 잘 완성해 준다. 이때는 패턴이 정해졌기 때문에 거의 실수 없이 잘 제안해 준다. 물론 난 일본어와 러시아어를 모르기 때문에 이 제안이 정확한지는 알 수 없다.
const i18n = {
 ko: {
 Button: "버튼",
 Login: "로그인",
 Logout: "로그아웃",
 "Login Failed": "로그인 실패",
 Settings: "설정",
 },
 ja: {
 Button: "ボタン",
 Login: "ログイン",
 Logout: "ログアウト",
 "Login Failed": "ログイン失敗",
 Settings: "設定",
 },
 ru: {
 Button: "Кнопка",
 Login: "Войти",
 Logout: "Выйти",
 "Login Failed": "Ошибка входа",
 Settings: "Настройки",
 }
}
이런 식으로 라이브 데모를 했다. 일반적으로 코딩을 할 때는 많은 코드가 있고 의도를 가지고 작업을 계속하기 때문에 GitHub Copilot이 잘 제안해 주고 이런 걸 보여주고 싶었지만 복잡한 코드에서의 라이브 데모는 더 쉽지 않았고 라이브 데모로 만든 짧은 코드에서는 제안이 항상 맘처럼 되진 않았다.
이후에는 GitHub에서 Copilot으로 실험하는 프로젝트가 있어서 GitHub Copilot Labs로 주어진 코드를 영어로 설명하게 하거나 다른 언어로 변환하는 것을 보여주고 발표 전주에 발표된 Hey, GitHub도 간단히 소개했다.(아쉽게도 이 발표 이틀 뒤에 Hey, GitHub 베타 접근을 초대받아서 발표 때는 웹사이트 소개만 했다.)
GitHub 티에 GitHub 후디를 입고 GitHub 부스에서 놀고 있었더니 너무 직원처럼 보였지만 오랜만에 사람들도 만나고 재미있었다.
댓글 쓰기

Microsoft Ignite Spotlight on Korea의 GitHub Copilot 발표 자료

댓글