텍스트와 이미지, 영상과 음악까지. 이제는 생성형 AI가 무엇이든 만들어줄 수 있을 것만 같습니다. 개발자가 사용하는 코드 역시 AI의 생성 대상에서 예외가 아닌데요. 간단한 조작으로 원하는 코드를 뚝딱 만든다니 업무 효율을 높일 수 있겠다는 기대가 드는 만큼 정말로 AI가 내가 만족하는 수준의 코드를 만들어줄지 의문이 들기도 합니다.

가만히 앉아 있으면 궁금증은 해결되지 않기에, 피엑스디(pxd)의 개발 조직인 XE(eXperience Engineering) 그룹은 개발자를 위한 여러 AI 툴을 업무에 활용해 보기로 했습니다. 먼저 깃허브(GitHub)의 코파일럿(Copilot)을 사용해 봤죠. 이 글에는 코파일럿의 기본적인 사용법과 1년간 사용하며 느낀 점을 담았습니다. 참고로 제가 코파일럿을 사용한 환경은 맥(Mac) 운영 체제이며, 비주얼 스튜디오 코드(VSCode) 편집기를 활용했습니다.

 

코파일럿, 이렇게 씁니다

비주얼 스튜디오 코드에 확장 프로그램을 설치해 코파일럿을 곧바로 이용할 수 있었습니다. 저는 주로 두 가지 방식을 활용해 코파일럿을 사용했는데요. 여느 생성형 AI처럼 채팅하듯 내가 원하는 코드를 물어보고 코파일럿이 답해주는 ‘챗 뷰(Chat View)' 방식과 지금 작업하고 있는 파일에서 특정 코드를 드래그해 선택한 영역에 관해 코파일럿에 질문할 수 있는 ‘인라인 챗(Inline Chat)' 방식입니다. 다른 생성형 AI와 비슷한 점이 많아 접근이 쉽고 익숙해 사용이 편리했기 때문입니다.

 

반면, 드롭다운(Dropdown) 형태로 간단한 질문을 하기 용이한 ‘퀵 챗(Quick Chat)' 방식은 UI가 불편해 사용하지 않았습니다. 작성 중인 코드 상단에 질문의 답변이 놓이다 보니 답변이 길어지며 작업 내용을 가려버리기 일쑤였거든요.

 

코파일럿은 내 질문 외에도 지금 작성하고 있는 코드의 다음 내용을 유추해 자동으로 적절한 코드를 제시해 주기도 합니다. 텍스트를 인지하고 이어질 말을 완성해 주는 스마트폰의 ‘자동 완성 기능’과 유사합니다. 코파일럿이 제시해 준 코드를 그대로 적용할 수도, 마음에 들지 않으면 새로운 제안을 요청할 수도 있습니다. 간단한 작업에서 능률을 높이는 데 큰 도움이 됐죠.

 

코파일럿, 이런 일에 함께하기 좋습니다

단순하고 반복을 요하는 작업

앞으로도 저는 반복되거나 단순한 작업은 코파일럿과 함께할 예정입니다. 예를 들어 타입스크립트(TypeScript) 프로젝트에서 데이터 타입을 정의하거나 주석을 작성하는 간단한 작업 말이죠. 이런 작업의 효율을 높여주는 게 코파일럿의 가장 큰 장점이라고 느꼈기 때문입니다.

개발 과정에서 협업을 위해 API(Application Programming Interface) 데이터의 타입을 설명하고자 주석을 다는 경우가 많은데요. 이때, 원하는 데이터를 선택하고 ‘한글로 주석 작성해 줘'라는 직관적인 프롬프트를 입력하면 코파일럿은 적절한 키(Key)값을 유추해 주석을 작성해 줬습니다. 이제 개발자는 키값만 의미 있게 작성해 두면 번거로웠던 주석 달기에서 벗어날 수 있는 거죠.

 

정규식 작성

코파일럿은 복잡하고 규칙이 많아 외우기 어려운 정규식 코드를 작성할 때 유용했습니다. 단순히 패턴만 제공하는 것이 아니라, 그 패턴에 대한 설명까지 제공해 추후 수정이 필요할 때도 도움이 됐죠. 아래 이미지에서 코파일럿에 휴대전화 번호의 유효성을 검사할 수 있는 정규식을 작성해달라고 했을 때, 코파일럿이 정규식의 패턴과 그 설명을 제공하는 모습을 확인할 수 있습니다. 

공통 컴포넌트 제작

마지막으로 공통 컴포넌트 제작도 코파일럿 덕분에 한결 수월해졌습니다. 아코디언(Accordion)이나 드롭다운같이 우리에게 익숙한 컴포넌트를 코파일럿에 만들어달라고 하면, 코파일럿은 컴포넌트의 대략적인 틀을 잡아줍니다. 코파일럿이 제공한 틀에 원하는 기능을 더하며 생각했던 방향으로 컴포넌트를 만들어 나갈 수 있었죠. 기초 작업에 드는 에너지를 크게 줄여 업무 효율을 높이니 결과물의 품질이 만족스러웠습니다.

코파일럿이 우리에게 건네는 새로운 시각

계속해서 일하다 보면 코드 작성 시 익숙한 방법에만 의존하는 스스로를 발견하게 됩니다. 일종의 버릇처럼 말이죠. 이따금 코파일럿은 제가 생각하지 못했던 방식으로 코드를 만들어줄 때가 있었는데요. 코드를 바라보는 새로운 시각을 접하고 이를 통해 학습할 기회로 여겼습니다.

 

코파일럿, 더 잘 쓰기 위해

코파일럿을 사용하며 느꼈던 아쉬움도 물론 있습니다. 그만큼 사용자가 주의할 점을 알고 코파일럿을 이용한다면 원하는 결과에 더 가까워질 수 있다고 생각합니다.

 

한 번 더 요청하기

코파일럿은 우리에게 복잡한 코드를 제공하기도 합니다. 예를 들어 사용자에게 입력한 숫자 배열에서 짝수만 구하는 함수를 만들어달라고 요청한 적이 있는데요. 아래의 예시처럼 간결한 코드로 작성할 수 있음에도 코파일럿은 저에게 복잡한 코드를 만들어줬습니다. 이럴 때는 번거롭지만 단순하게 작성해달라는 요청을 한 번 더 해 원하던 결과물을 얻을 수 있죠.

• 코파일럿이 처음 제공한 복잡한 코드 전문

function filterEvenNumbers(numbers) {
	let evenNumbers = [];
	for (let i = 0; i < numbers.length; i++) {
		if (numbers[i] % 2 === 0) {
			evenNumbers.push(numbers[i]);
		}
	}
	return evenNumbers;
}

• 코파일럿에 코드 단순화를 요청한 후의 코드 전문

function filterEvenNumbers(numbers) {
	return numbers.filter(number => number % 2 === 0);
}

 

코파일럿을 이용할 때는 코파일럿이 준 답변을 한 번 더 검증해 보려는 자세가 필요합니다. 코파일럿이 요청 사항을 충분히 이해하지 못하면 코드를 거짓으로 작성해 구동되지 않는 코드를 제안하는 경우가 있기 때문이죠. 최신 라이브러리나 기술 스택을 사용할 때도 주의를 기울일 필요가 있습니다. 코파일럿의 업데이트 시기에 따라 최신 정보를 기반으로 한 제안을 받기 어려울 수 있거든요.

넥스트제이에스(Next.js) 프레임워크의 앱 라우터(App Router) 방식으로 프로젝트를 구성했던 적이 있는데요. 코파일럿에 필요한 코드를 요청했을 때 코파일럿은 앱 라우터 방식이 아닌 페이지 라우터(Page Router) 방식 기반으로 부정확한 정보를 제공했습니다. 아직 코파일럿이 앱 라우터 방식을 제대로 습득하지 못한 것이 원인이었죠. 결국 공식 문서를 찾아보며 맞는 정보인지 확인하는 데 더 많은 시간을 들였습니다.

 

영어가 익숙한 코파일럿

마지막으로 코파일럿은 아직 한국어가 익숙하지 않다는 사실을 알아두면 좋습니다. ‘리팩토링해 줘'라는 요청에 코파일럿이 제대로 작동하지 않아 당황했던 적이 있습니다. 곧바로 ‘refactoring please’라는 영어로 다시 요청해 보니 이해하고 다시 작동했죠.

 

 

AI 시대의 개발자

코파일럿의 속성을 잘 알고 나를 돕는 조력자로 함께한다면 생산성을 획기적으로 높일 수 있다고 생각합니다. 물론, 개발자의 판단과 코드를 검증하려는 노력이 함께해야겠죠.

주변을 둘러보면 이미 AI가 개발 환경에서 차지하는 비중이 커졌음을 느낍니다. AI와 함께 일하다 보면 가끔 ‘이게 없었을 때는 어떻게 모든 걸 직접 작업했던 걸까?’ 싶은 생각도 들죠. AI는 점점 발전할 테고 개발자로서 나의 역량과 역할에 대한 고민이 깊어지는 순간도 있습니다. 하지만 걱정만 한다고 나아지는 게 있던가요? 고민이 깊어질수록 가만히 있지 않고 AI를 주어진 도구라고 생각해 보기로 했습니다. 더 깊이 알아보고 도움을 받을 방안을 생각해 보려고 하죠. 그게 AI 시대의 개발자로서 제가 나아갈 수 있는 길이라고 생각하기 때문입니다.

글 김태용, 이혜준(프론트엔드 개발자)

편집 정우재(UX 라이터)

그래픽 김은정(그래픽 디자이너)

 

이 글은 pxd Insights에서도 보실 수 있습니다.