Study Portal캔들시스터 스터디(CandleSister Study) 공식 연계 강좌
study.candlesister.com
VS Code×Gemini
STEP 01 • EXTENSIONS

1단계: VS Code 확장 프로그램 설치하기

VS Code 내부 마켓플레이스에서 Gemini 지원 확장을 검색하고 설치하는 방법입니다.

💡 팁: 이미 VS Code가 실행 중이라면 단축키 Ctrl+Shift+X (Mac은 Cmd+Shift+X)를 누르면 바로 확장 마켓플레이스가 열립니다.

VS Code 설치 인터랙티브 시뮬레이터

실제 에디터를 열기 전에 마우스로 직접 클릭해보며 위치를 미리 익혀보세요.

👇 아래 시뮬레이터에서 파란색 [Install] 버튼을 눌러 설치 과정을 체험해 보세요!
Visual Studio Code - workspace [Simulated]
EXTENSIONSMarketplace
Gemini Code Assist
Google Cloud (공식)

AI 기반 코드 완성, 인라인 에러 디버깅 및 실시간 채팅 지원

1.2M+ 다운로드
Roo Code (Autonomous AI)
Gemini 2.5 Flash / Pro API 연동 지원
main.py●
1def calculate_discount(price, rate):
2 # Calculate discounted price
3 if rate < 0 or rate > 1:
4 raise ValueError("Invalid discount rate")
5 return price * (1 - rate)
Python 3.12UTF-8
Gemini: Not Installed

초보자를 위한 상세 설치 절차 (Step-by-Step)

1

1. VS Code 좌측 액티비티 바에서 [확장(Extensions)] 아이콘 클릭

왼쪽 사이드바에서 블록 모양 아이콘(사각 타일 4개 모양)을 클릭합니다.

단축키: Windows/Linux는 Ctrl+Shift+X, macOS는 Cmd+Shift+X
[스크린샷 안내] VS Code 왼쪽 가장자리 바(Activity Bar)

탐색기(Explorer), 검색(Search), 소스 제어(Git) 밑에 있는 네모 블록 4개 모양의 아이콘을 클릭합니다.

2

2. 검색창에 "Gemini Code Assist" 또는 "Roo Code" 입력

상단 검색창에 검색어를 입력합니다. Google 공식 지원 플러그인은 "Gemini Code Assist"이며, 자유로운 프롬프트와 에이전트 기능을 선호한다면 "Roo Code" 또는 "Cline"도 추천합니다.

Gemini Code AssistMarketplace Search
3

3. 파란색 [Install (설치)] 버튼 클릭

제작자가 "Google Cloud" 또는 검증된 배포자인지 확인 후 [Install] 버튼을 누르면 몇 초 내에 설치가 완료됩니다.

어떤 확장을 골라야 할지 고민되시나요?

옵션 A: Google 공식 Gemini Code Assist초보자 추천

구글이 공식 지원하여 가장 안정적이며 인라인 코드 자동완성과 채팅 탭을 기본 제공합니다.

옵션 B: Roo Code / Cline (Google Gemini API 연동 모드)자율 에이전트

Google AI Studio에서 발급받은 Gemini 2.5 Flash/Pro 키를 직접 입력하여 자율 코딩 에이전트로 활용할 수 있습니다.

4

4. 설치 완료 확인

설치가 끝나면 좌측 사이드바에 별 모양(✦) 또는 반짝이는 Gemini 아이콘 탭이 새로 생성됩니다.

설치 중 오류가 발생할 때 대처법

VS Code 버전이 너무 오래된 경우 설치되지 않을 수 있습니다. 상단 메뉴 [도움말(Help)] > [업데이트 확인(Check for Updates)]을 눌러 최신 버전으로 업데이트하세요.