[아티클 01] 깃허브 코파일럿으로 기업 소개 웹사이트 만들기
이제 깃허브 가입과 비주얼 스튜디오 코드를 설치하고 코파일럿 프로 플랜을 구독했으니 간단한 기업소개 웹사이트를 만들면서 비주얼 스튜디오와 깃허브 코파일럿의 사용 방법을 알아보겠습니다.
01 오른쪽 위를 보면 사이드바 버튼 3개가 보입니다. 각 사이드바 버튼을 모두 눌러 활성화하세요.
각 사이드바의 역할은 다음과 같습니다. 지금은 아무 작업도 하지 않았기 때문에 감이 잘 오지 않겠지만 우선 어떤 기능이 있는지 눈으로 읽어 익혀두면 도움이 될 겁니다.
왼쪽 사이드바 : 파일 탐색기/코드 관리/확장 도구 관리 창
오른쪽 사이드바 : 깃허브 코파일럿 채팅창
아래쪽 사이드바 : 터미널
가운데 화면: 코드를 입력하는 코드 편집 화면
사이드바로 둘러싸인 가운데 화면은 여러분이 코드를 입력하는 코드 편집 화면입니다. 물론 여러분이 직접 코드를 입력할 일은 거의 없습니다. 대부분의 코드 작업은 오른쪽 사이드바의 LLM 채팅창을 통해 이뤄집니다. 이것이 깃허브 코파일럿의 기본적인 구조입니다. 구체적인 기능은 앞으로 실습을 진행하며 차근차근 알아보겠습니다.
02 간단한 깃허브 코파일럿의 기능을 알아보기 위해 채팅창을 사용해보겠습니다. 오른쪽 사이드바에 위치한 채팅창에는 여러 버튼이 있는데 이 중 자주 쓰게 될 버튼은 [Add Context...], [Agent/Ask]입니다. 나머지 버튼은 거의 사용하지 않으며, 필요할 때 그때그때 설명하겠습니다.
[Add Context...]: 파일이나 폴더, 웹 문서를 여기에 포함시키는 기능입니다. 추가한 파일이나 폴더 등 해당 컨텍스트를 바탕으로 깃허브 코파일럿이 답변합니다. 챗GPT와 같은 서비스의 첨부 기능과 비슷하다고 생각하면 됩니다.
[Agent/Plan/Ask/Edit] : 네 가지 모드를 토글할 수 있는 버튼입니다. Agent 모드는 즉시 코드를 수정하거나 터미널을 조작하는 등의 명령을 내리는 모드입니다. Plan 모드는 계획을 세우게 하는 모드입니다. 이 모드를 써야 바이브 코딩의 완성도를 크게 높일 수 있습니다. Ask 모드는 말 그대로 깃허브 코파일럿과 논의를 할 때 쓰는 모드입니다. Edit 모드는 특정한 파일의 일부분을 직접 지정해 수정할 때 적합한 모드입니다.
03 기본적인 깃허브 코파일럿의 사용법을 알아봤으니, 이제 기업 소개 웹사이트를 만들어보겠습니다. 왼쪽 사이드바에서 [Open Folder]를 눌러 앞으로 실습할 폴더 copliotstudy를 원하는 위치에 만든 다음 [열기]를 눌러 해당 폴더를 여세요.
04 그런 다음 왼쪽 사이드바의 copliotstudy 폴더에서 마우스 오른쪽 클릭을 한 다음 [New File]을 눌러 test.html이라는 파일을 하나 만드세요.
파일이 생성되며, 중앙에 test.html 파일을 수정할 준비가 됩니다. 오른쪽 채팅창을 보면 [Add Context...]에 #test.html 파일이 포함된 것을 확인할 수 있습니다.
이 상태가 되면 채팅창에서 test.html의 파일 상태를 파악하고 다양한 작업을 할 수 있게 됩니다. 앞으로 [Add Context...]는 간단히 '컨텍스트'라고 부르겠습니다. 컨텍스트는 한글로 맥락이라는 뜻이죠? 깃허브 코파일럿이 우리의 대화를 이해하기 위해 참고하는 모든 것을 통틀어 컨텍스트라고 하겠습니다.
05 이제 컨텍스트에 test.html이 있으니 이것에 대해 물어보겠습니다. 코드를 작성할 것이 아니므로 [Ask] 모드로 토글하여 물어보기 바랍니다.
<프롬프트>
이 파일은 무엇을 할 때 쓰는 파일이야?
현재 test.html 파일은 비어 있는 상태입니다. HTML 파일은 웹페이지를 만들 때 사용하는 기본적인 파일 형식입니다. HTML 파일의 주요 용도는 다음과 같습니다:
웹페이지의 구조와 내용을 정의
텍스트, 이미지, 링크 등의 웹 콘텐츠를 표시
CSS와 JavaScript를 연결하여 웹페이지의 스타일과 동작을 제어 이 파일이 비어 있는 것을 보니 아직 사용되지 않았거나 새로 생성된 파일인 것 같습니다. 웹페이지를 만들고 싶으시다면, 기본적인 HTML 구조를 추가하는 것부터 시작할 수 있습니다. 필요하시다면 기본적인 HTML 템플릿을 만들어드릴 수 있습니다.
놀랍게도 깃허브 코파일럿은 현재 파일이 비어 있다는 것을 확인한 다음 파일의 확장자를 보고 어떤 용도인지도 설명해줍니다. 앞서 언급한 컨텍스트를 통해 깃허브 코파일럿이 이 파일의 구성을 파악하고 있는 것입니다.
06 깃허브 코파일럿의 컨텍스트를 이용해서 채팅창을 통해 간단한 작업을 시켜보겠습니다. [Agent] 모드로 토글해서 작업을 시켜보세요.
<프롬프트>
간단한 기업 소개 웹사이트를 원 페이지로 구성해줄래? 흔한 디자인이어도 상관없어.
요청한 작업을 토대로 깃허브 코파일럿이 파일을 추가하고 코드를 작성하기 시작합니다. 작성한 코드에 대해서도 자세히 설명해줍니다.
가운데 화면을 보면 임시로 코드가 입력되어 있고, 작은 창이 표시됩니다. 여기서 [Undo]를 누르면 현재 작성한 코드를 거절하는 것으로 파일에 반영되지 않으며, [Keep]을 누르면 현재 작성한 코드가 파일에 그대로 반영됩니다. [Keep]을 눌러서 허락해줍니다.
깃허브 코파일럿으로 작업을 하다 보면 짧은 시간에 여러 파일이 수정될 때가 있습니다. 그럴 때는 [Undo all] 또는 [Keep all]이라는 버튼이 수정된 파일 위에 보이며, 버튼 왼쪽에는 수정된 파일 개수가 표시됩니다. 각 버튼을 누르면 한 번에 '실행 취소' 또는 '반영'을 해줍니다.
이때 파일을 추가하여 새로 작성할 때마다 [Allow]를 요청할 겁니다. 매번 누르는 것은 불편한 일이므로 [Allow] 오른쪽의 작은 드롭다운 버튼을 눌러서 [Always Allow]를 눌러주세요.
3가지 옵션이 있습니다. 저는 [Allow in this Workspace]를 추천합니다.
[Allow in this Session]: 현재 대화 안에서만 항상 허용, 새 대화를 만들면 적용되지 않음
[Allow in this Workspace] : 현재 프로젝트 안에서 항상 허용. 새 대화를 만들어도 적용
[Always Allow]: 비주얼 스튜디오 코드를 쓰는 모든 경우에서 허용
07 이제 파일을 웹 브라우저에서 열어보세요. 어떤 화면이 나올까요?
놀랍게도 흔히 보는 기업 소개 페이지가 완성되었습니다. 하지만 조금 아쉬운 점이 있습니다. 배경에 기업 소개와 어울리는 적절한 이미지를 넣으면 좋을 것 같은데 단조로운 디자인으로 마무리되었네요. 이런 경우 어떻게 수정할 수 있을까요? 직접 코드를 수정해야 할까요? 아닙니다.
08 깃허브 코파일럿은 현재 화면의 코드를 모두 알고 있기 때문에 여러분이 원하는 수정을 요청하기만 하면 됩니다. 그러면 해당 파일의 상태에 맞춰 수정을 해줍니다. 이것이 바로 깃허브 코파일럿이 우리에게 의미 있는 이유입니다. 예전에는 이런 수정 작업을 전문 교육을 받은 개발자가 직접 해야 했습니다. 하지만 이제는 깃허브 코파일럿이 개발자의 역할을 대신해줍니다. 그것도 마치 여러분의 상태를 가장 잘 아는 개발자가 옆에서 고쳐주는 것처럼 말이죠.
예를 들어 구글에서 아무 이미지나 찾아 투명도를 50% 정도로 해서 기업 소개 이미지를 배경으로 깔아달라고 해봅시다. 배경으로 추가할 이미지에 마우스 오른쪽 클릭을 한 다음 [이미지 주소 복사]를 눌러 링크를 복사한 뒤 다음과 같이 부탁해보겠습니다.
<프롬프트>
https://img.hankyung.com/photo/201808/AA.17531310.1.jpg 이미지를 기업 이미지 배경으로 50% 투명도로 깔아줘.
히어로 섹션의 배경에 해당 이미지를 50% 투명도로 추가하겠습니다. test.html +2 -1 어떤 파일을 얼마나 수정했는지 보여줍니다. 2줄이 추가되고 1줄이 삭제되었습니다.
그러면 깃허브 코파일럿이 배경을 해당 이미지로 변경하고 투명도를 50%로 설정했다고 하네요.
09 [Keep]을 눌러 적용하고 다시 test.html을 웹 브라우저에서 열어봅시다.
(이미지 설명: 배경 이미지가 적용된 최종 웹사이트 화면) TechCorp 혁신적인 기술로 미래를 만들어갑니다. 투명도가 50%인 이미지가 배경으로 깔렸네요.
배경에 이미지가 깔렸고 화면의 텍스트가 보이도록 투명도가 50%로 잘 반영되어 정확하게 수정되었네요. 이렇게 깃허브 코파일럿을 활용하면 웹사이트도 손쉽게 만들 수 있습니다.