본문 바로가기
IT와 AI 인공지능

비주얼 스튜디오 코드(VS Code, Visual Studio Code)에서 무료로 AI "Gemini Code Assist"을 사용하는 방법, Gemini + Google Cloud Code 확장 프로그램

by 새콤달콤심쿵 2024. 4. 13.
반응형

개발자를 위한 구글의 AI "Gemini Code Assist" 확장 프로그램 제공

구글이 최근 라스베이거스에서 열린 Cloud Next 컨퍼런스에서 기업과 개발자를 위한 AI 코드 완성 및 지원 도구인 "Gemini Code Assist"를 출시했습니다. 출시와 동시에 개발자 커뮤니티에 큰 관심을 일으키고 있습니다. 이 혁신적인 AI 기반 도구는 개발자들이 코드를 더 빠르고, 더 정확하며, 더 효율적으로 작성할 수 있도록 지원합니다.

Cloud Next 컨퍼런스
Cloud Next 컨퍼런스

그렇다면 Gemini Code Assist는 정확히 무엇을 제공하며, 개발자들에게 어떤 이점을 가져다줄지 알아보겠습니다. 

 

Gemini Code Assist이란?

Gemini Code Assist는 구글 클라우드의 일부로, 개발 팀이 소프트웨어 개발 생명주기 전반에 걸쳐 어플리케이션을 구축, 배포 및 운영하는 데 도움을 주는 AI 기반 지원을 제공합니다. 이 도구는 IDE(예: VS Code, IntelliJ, Cloud Workstations 또는 Cloud Shell Editor)에서 사용할 수 있으며, 다양한 인기 있는 프로그래밍 언어로 AI 기반의 코딩 지원을 받을 수 있습니다.

구글 클라우드의 제미나이
구글 클라우드의 제미나이

코드 완성, 주석에서 전체 함수나 코드 블록 생성, 유닛 테스트 생성, 디버깅, 코드 이해 및 문서화에 대한 도움을 제공합니다. 또한, Gemini Code Assist는 사용자의 작업 맥락에 맞는 응답을 제공하며, Gemini가 응답을 생성하는 데 사용한 문서와 코드 샘플에 대한 출처 인용을 포함합니다.

 

구글 클라우드 콘솔에서 Gemini Code Assist를 사용할 때는 구글 클라우드에 대한 자연어 질문을 할 수 있으며, 대화를 시작하는 데 도움이 되는 프롬프트를 제안하고, 여러 차례의 프롬프트와 응답을 지원합니다. Gemini Code Assist는 대규모 언어 모델(LLMs)을 사용하며, 이 모델들은 수십억 줄의 오픈 소스 코드, 보안 데이터 및 구글 클라우드 특정 콘텐츠(예: 문서 및 샘플 코드)로 미세 조정되었습니다. 초기 단계 기술인 Gemini는 사실적으로 보이지만 사실과 다른 출력을 생성할 수 있으므로, Gemini의 모든 출력을 사용하기 전에 검증하는 것을 추천하고 있습니다. 

 

Code Assist는 모든 모델이 제공하는 가장 큰 컨텍스트 창인 100만 개의 컨텍스트 창이 있는 Gemini 1.5 Pro를 사용하며, 2024년 7월 11일까지 Gemini Code Assist를 무료로 사용해 볼 수 있으며 결제 계정당 사용자 한 명으로 제한됩니다.  

 

VS Code로 Gemini Code Assist 설정

비주얼 스튜디오 코드(VS Code, Visual Studio Code)에서 AI "Gemini Code Assist"을 사용하려면 다음 단계에 따라 설치와 설정을 해야 합니다.

 

확장 프로그램 설치

VS Code에서 "Gemini Code Assist"을 사용하려면 먼저 확장 프로그램을 설치해야 합니다.

 

1. VS Code(비주얼 스튜디오 코드)를 실행합니다. 

2. 왼쪽 메뉴에서 '확장 프로그램' 탭으로 이동합니다. 

3. 검색창에 전체 이름 'Gemini + Google Cloud Code' 또는 'Google Cloud Code'를 검색합니다. 

• 검색 결과 중 첫 번째 'Gemini + Google Cloud Code'를 클릭합니다. 

4. '설치' 버튼을 클릭하여 확장 프로그램을 설치합니다. 

비주얼 스튜디오 코드(VS Code, Visual Studio Code)
비주얼 스튜디오 코드(VS Code, Visual Studio Code)

이제 'Gemini + Google Cloud Code' 확장 프로그램이 설치되며, 아래와 같은 개발 언어에서 가장 잘 작동합니다. 

• NodeJS
• Go
• Python
• Java
• .NET

 

NodeJS에는 VS Code가 기본적으로 지원되며 추가 작업이 필요하지 않지만, 다른 언어를 사용하려면 다른 언어를 설치해야 합니다. Cloud Code 확장 프로그램을 설치한 것과 동일한 방법으로 이러한 언어를 설치할 수 있습니다. 
선택적으로 샘플을 PC나 Mac에 복사하려면 Git도 설치해야 합니다. 

 

Google 클라우드에 연결

VS Code에 'Gemini + Google Cloud Code' 확장 프로그램이 설치됐다면, Google Cloud에 연결합니다. 

 

1. 확장 프로그램이 설치되면 'open walkthrough' 버튼을 클릭합니다. 

'open walkthrough' 버튼 클릭
'open walkthrough' 버튼 클릭

2. 'Connet with Google Cloud'에 'Connet' 버튼을 클릭합니다. 

'Connet' 버튼 클릭
'Connet' 버튼 클릭

3. VS Code가 웹사이트가 열리며 진행한다고 메시지가 나타납니다. 계속하려면 '열기'를 클릭합니다. 

웹사이트로 연결 진행
웹사이트로 연결 진행

4. 구글 계정으로 로그인합니다. 

5. 구글 계정으로 'Cloud Code' 가입 승인을 진행합니다. 

구글 계정으로 사용 승인을 받습니다.
구글 계정으로 사용 승인을 받습니다.

6. 이제 구글 계정이 'Cloud Code'가 사용 승인이 되고, 연결되었습니다. 

7. 마지막으로 사용할 Gemini 옵션을 모두 선택합니다. 

사용할 Gemini 옵션을 모두 선택합니다.
사용할 Gemini 옵션을 모두 선택합니다.

8. 이제 VS Code에서 AI Gemini 기능을 사용하여 코드 작성에 도움을 받을 수 있습니다. 

• Gemini는 좌측 아이콘 메뉴, 우측 상단의 버튼, 코드 화면 내 우클릭 메뉴의 Gemini 등에서 제공됩니다. 

• 'Gemini + Google Cloud Code' 확장 프로그램을 사용하면 VS Code에서 단독으로 사용도 가능하지만, Google Cloud와 사용하면 프로젝트 관리와 배포까지 할 수 있는 장점이 있습니다. 

AI Gemini 기능을 사용하여 코드 작성
AI Gemini 기능을 사용하여 코드 작성

 

Google Cloud에 가입하기

VS Code(Visual Studio Code)에서 Google Cloud를 함께 사용하면 프로젝트를 저장, 관리 및 배포하는 것은 개발자들에게 매우 편리한 옵션을 제공합니다. 이를 통해 사용자는 코드를 쉽게 클라우드에 백업하고, 어디서나 접근할 수 있는 유연성을 갖게 됩니다.

 

Google Cloud는 사용자들이 서비스를 무료로 시험해 볼 수 있는 $300 크레딧(3개월 총 90일)를 제공합니다. 이 기간 동안 Google Cloud의 다양한 기능과 서비스를 충분히 체험할 수 있으며, 크레딧을 활용해 예상 비용을 평가하고 프로젝트 요구에 맞는 유료 서비스로 전환을 고려해 볼 수 있습니다. 이 프로모션은 클라우드 기반 개발 환경에 대한 이해를 심화시키고 필요한 리소스를 효과적으로 관리하는 데 도움이 됩니다. 

 

1. https://cloud.google.com/으로 이동하여 '무료로 시작하기'를 클릭합니다. 

구글 클라우드 서비스
구글 클라우드 서비스

2. 구글 클라우드 회원가입 단계를 진행하여 가입을 완료합니다. 

3. 신규 계정인 경우 $300 무료 크리딧을 제공하며 90일 동안 무료로 사용할 수 있습니다. 무료 체험 후 자동 청구되지 않으니 편하게 사용해 볼 수 있습니다. 

회원가입 화면
회원가입 화면

4. Google Cloud가 있으면 해당 프로젝트를 사용하여 VS Code에서 Gemini를 사용할 수 있습니다. 

 

VS Code에서 Gemini 활성화하기

1. 이제 VS Code로 돌아가 'Google Cloud 프로젝트 선택'을 클릭하여 Gemini를 활성화하세요. 

Gemini를 활성화
Gemini를 활성화

2. Google Cloud 프로젝트를 선택하는 옵션이 상단에 표시됩니다. Cloud API가 활성화된 Google Cloud 프로젝트를 선택합니다. 새로운 Google Cloud 프로젝트를 만들 수도 있습니다. 

• 기존 가입된 상태라면 Google Cloud 프로젝트를 불러와 작업을 진행할 수 있습니다. 

Google Cloud 프로젝트 선택
Google Cloud 프로젝트 선택

3. 선택한 프로젝트에 Cloud API가 활성화되어 있지 않으면 VS Code 창에 오류가 표시됩니다. 문제를 해결하려면 'API 활성화'를 클릭하세요. 

'API 활성화' 클릭
'API 활성화' 클릭

4. VS Code에서 사용할 수 있도록 Gemini가 활성화됩니다. 이전에 비활성화된 Gemini 아이콘이 이제 활성화된 Gemini가 표시되는 상태 표시줄에서 언제든지 사용 할 수 있습니다. 

• 좌측 메뉴에 Gemini 아이콘이 추가됩니다. 

• 하단 바에 Gemini 아이콘이 추가됩니다. 

• 우측 상단 메뉴에 Gemini:Smart Action 아이콘이 추가됩니다. 

Gemini 활성화 확인
Gemini 활성화 확인

5. 이제 VS Code에서 제미나이(Gemini)를 사용하여 코드 생성에 대한 도움을 받거나 채팅을 할 수 있습니다. 

 

Gemini로 프로젝트 만드기

VS Code에서 Gemini를 사용하려면 프롬프트가 포함된 새 코드를 생성하거나, 코딩 제안을 받거나, 인라인 제안을 받을 수 있습니다. 

 

1. 샘플 애플리케이션을 생성하려면 Ctrl+ Shift+ P(Windows/Linux) 또는 Cmd+ Shift+ P(Mac)를 눌러 VS Code에서 명령 팔레트를 엽니다.
2. 그런 다음 'cloud code:new Application'을 입력하고 엔터(Enter) 키를 누릅니다.

새 프로젝트 만들기
새 프로젝트 만들기

3. 옵션에서 'Kubernetes Application'을 선택하세요. 

'Kubernetes Application' 선택
'Kubernetes  Application' 선택

4. 그런 다음 'Python(Flask): Guestbook'과 같은 옵션에서 어플리케이션을 선택합니다. 아직 설치하지 않은 경우 샘플 어플리케이션을 설치할 언어를 설치해야 합니다. 

'Python(Flask): Guestbook' 선택
'Python(Flask): Guestbook' 선택

5. 원하는 위치에 애플리케이션을 저장하면 애플리케이션이 생성됩니다. 

• 우측 상단 메뉴에 Gemini:Smart Action 아이콘을 클릭하여 코드를 생성하거나 도움을 받습니다. 

프로젝트 생성되고, Gemini로 코드 제안을 받을 수 있습니다.
프로젝트 생성되고, Gemini로 코드 제안을 받을 수 있습니다.

애플리케이션이 생성되면 새 코드 파일을 생성하거나 기존 코드 파일을 열어 Gemini를 사용하세요.

참고: Gemini는 그럴듯해 보이는 잘못된 코드를 생성할 수 있습니다. 사용하기 전에 Gemini의 모든 출력을 확인하세요.

 

코드 인라인 제안받기

제미나이(Gemini)가 코드 생성에 도움을 줄 수 있는 모든 방법은 다음과 같습니다. 

 

1. VS Code를 실행한 상태에서 인라인 제안을 받으려면 코드 입력을 시작하세요. 

2. Gemini는 사용자가 작성하는 동안 코드에 대한 자동 완성 제안을 제공합니다.
3. Tab을 눌러 제안을 수락할 수 있습니다. 제안을 무시하려면 키를 누르 Esc 거나 코드를 계속 작성하세요.

4. Gemini는 또한 새로운 코드를 생성할 수도 있습니다. VS Code IDE 창에서 우측 상단의 'Gemini: Smart Actions' 아이콘을 클릭하세요. 

우측 상단의 'Gemini: Smart Actions' 아이콘
우측 상단의 'Gemini: Smart Actions' 아이콘

5. 그런 다음 옵션에서 'Generate Code(코드 생성)'를 클릭하세요.

'Generate Code(코드 생성)'을 클릭
'Generate Code(코드 생성)'을 클릭

 

Gemini와 대화하기

제미나이(Gemini)는 VS Code에서 채팅할 수도 있습니다. 질문에 답하고, 코드를 설명하거나, 선택한 코드에 대해 도움을 줄 수 있습니다. 

 

1. Gemini와 채팅하려면 왼쪽 활동 표시줄에서 'Gemini' 아이콘을 클릭하세요. Gemini 채팅 패널이 왼쪽에 열립니다. 

2. 프롬프트 표시줄에 프롬프트를 입력하고 AI로 보냅니다(이를 위해서는 코드 파일이 열려 있어야 합니다). 예를 들어 이라고 말할 수 있습니다 'Gemini:Explain this'는 파일의 코드를 참조로 사용하고 설명을 제공합니다. 

Gemini로 코드에 대한 대화
Gemini로 코드에 대한 대화

3. 파일에서 코드를 선택한 다음 Gemini에 메시지를 보내 코드를 'explain this(설명하다)' 할 수 있으며, 그러면 사용자의 질문에 응답하는 동안 선택한 코드만 참조로 사용됩니다.

'explain this(설명하다)'
' explain this( 설명하다)'

4. 또한 Gemini에게 전체 코드 또는 채팅 패널에서 선택한 코드에 대한 단위 테스트를 생성하도록 요청할 수도 있습니다. Generate unit tests채팅 패널에 입력하면 Gemini는 전체 코드 또는 선택한 기능(선택 사항에 따라)에 대한 단위 테스트를 생성합니다. 

5. 마찬가지로 Gemini에게 채팅 패널에서 요청 Help debug the code 하거나 Make the code more readable채팅 패널에서 요청할 수 있습니다. 메시지를 표시하기 전에 코드의 일부를 선택했는지 여부에 따라 코드 일부/전체 코드 파일에 대해 원하는 응답이 표시됩니다. 

 

마치며

Gemini Code Assist는 특히 100만 개의 컨텍스트 창을 통해 GitHub Copilot의 강력한 경쟁자가 되려고 합니다. 이제 남은 유일한 것은 Gemini Code Assist가 실제로 유용한 도구가 될 만큼 코딩에 효율적일지 여부입니다. 

 

함께 보면 도움이 되는 콘텐츠 보기

▶ 파워토이즈(PowerToys) v0.80.0 출시, 미리보기(Peek) 기능에 WebP/WebM, 오디오 파일 지원이 추가됩니다.

 

파워토이즈(PowerToys) v0.80.0 출시, 미리보기(Peek) 기능에 WebP/WebM, 오디오 파일 지원이 추가됩니다.

파워토이즈(PowerToys) v0.80.0 업데이트 출시 "파워토이즈(PowerToys)"는 윈도우 10과 11 환경을 최적화하고 개인화하기 위한 다양한 편리한 기능을 제공하는 강력한 도구로, 안정성 향상, 새로운 기능

bizstoryway.tistory.com

▶ 윈도우, 그림판에서 배경제거(누끼따기) 후 레이어의 '배경색' 설정하고 숨기는 방법

 

윈도우, 그림판에서 배경제거(누끼따기) 후 레이어의 '배경색' 설정하고 숨기는 방법

그림판 '배경색' 기능 출시 윈도우에서 최근 업데이트로 '그림판'이 "배경"이라는 새로운 기능을 탑재하여 더욱 스마트해졌습니다. 이는 첫 번째로 '배경 제거' 기능을 시작으로 두 번째 '레이어'

bizstoryway.tistory.com

▶ 모든 웹사이트 링크를 미리 볼 수 있는 크롬, 엣지 브라우저 확장 프로그램(MaxFocus: Link Preview)

 

모든 웹사이트 링크를 미리 볼 수 있는 크롬, 엣지 브라우저 확장 프로그램(MaxFocus: Link Preview)

이 새로운 확장 프로그램을 사용하면 모든 웹사이트의 링크를 미리 볼 수 있습니다. 크롬(Chrome), 엣지(Edge) 등의 웹 브라우징 경험을 개선하는 데 확장 프로그램은 중요한 역할을 합니다. 현재 탭

bizstoryway.tistory.com

▶ 갤럭시 S24 One UI 6.1에 적용된 'AI 카메라' 기능이 기존 폰에도 적용되는 모델은 다음과 같습니다.

 

갤럭시 S24 One UI 6.1에 적용된 'AI 카메라' 기능이 기존 폰에도 적용되는 모델은 다음과 같습니다.

기존 모델에도 갤럭시 S24 One UI 6.1 AI 카메라 기능 제공 갤럭시 S24 울트라와 시리즈 모델의 출시와 함께 One UI 6.1 업데이트가 주목을 받고 있습니다. 이 업데이트는 특히 AI 카메라 기능에 많은 AI

bizstoryway.tistory.com

 

※ 포스팅이 도움이 되셨다면 💓공감, 댓글, 응원하기👍, 광고 부탁 드립니다. ~ 🎉👍🙏

 

반응형