요즘 바이브 코딩이 대세잖아요? 해보려면 깃허브 코파일럿이나 커서 같은 유료 서비스를 이용해야 하는데, 매달 구독비를 내기는 좀 부담스럽습니다.
그런데 VS Code에서 완전 무료로 바이브 코딩할 수 있는 방법이 있다는 거 알고 계셨나요? 오늘은 Cline extension과 제미나이 API를 활용해 돈 한 푼 들이지 않고 AI와 함께 코딩하는 방법을 공유합니다. 정말 간단하면서도 강력한 방법이니까 끝까지 한 번 따라해보세요.
Cline Extension
Cline은 VS Code에서 사용할 수 있는 AI 코딩 어시스턴트 확장 프로그램입니다. 이전에는 Claude Dev라는 이름으로 알려졌는데, 지금은 Cline으로 이름이 바꼈습니다. 이 프로그램의 가장 큰 매력은 코드 제안을 넘어서, 실제로 파일을 생성하고 수정하며 심지어 터미널 명령어까지 실행할 수 있다는 점입니다.
Cline을 사용하면 “로그인 페이지 만들어줘”라고 말하는 것만으로도 HTML, CSS, JavaScript 파일을 자동으로 생성해주고, 필요한 라이브러리까지 설치해줍니다. 마치 옆에 실력 좋은 개발자가 앉아서 도와주는 느낌이랄까요? 게다가 코드를 작성하면서 발생하는 오류들도 스스로 디버깅하고 수정해주니까, 정말 든든합니다.
제미나이 API를 무료로 활용하는 방법
구글에서 제공하는 제미나이 API는 정말 강력한 AI 모델인데요. 놀랍게도 무료로 API를 사용할 수 있는 모델이 있습니다. 바로 제미나이 Flash인데요.
대신 분당 요청 수(RPM)가 10~30회로 제한됩니다. 하지만 개인 프로젝트나 학습 목적으로 사용하는기에는 충분합니다. 횟수를 넘기면 사용제한에 걸리고, 좀 기다렸다 사용하면 됩니다.
VS Code에서 바이브 코딩 환경 구축하기
먼저 VS Code Extensions 마켓플레이스에서 “Cline”을 검색해서 설치해주세요. 설치가 완료되면, 아래와 같이 사이드바에 Cline 아이콘이 나타납니다.
다음 Google AI Studio에 접속해서 API키를 발급 받습니다. 상단 메뉴에 ‘Get API key’ 버튼을 클릭하면 됩니다.
API 키를 받았다면 Cline에서 ‘Use your own API key를 클릭하세요. 다음 AI Provider를 “Google Gemini”로 선택하고, 발급받은 API 키를 입력합니다. 모델은 “gemini-2.0-flash”나 “gemini-1.5-flash”를 선택하세요. flash 모델도 성능이 괜찮습니다.
첫 화면을 닫았다면 Cline 설정 메뉴에서 API 정보를 입력하거나 수정할 수 있습니다.
사용해보고 더 뛰어난 모델이 필요하다면, 제미나이 프로나 클로드를 이용해보세요. 클로드가 코딩에는 가장 뛰어나다고 알려져 있습니다.
사용 방법
실제로 어떻게 사용하는지 몇 가지 예시를 들어볼게요. “React로 할 일 관리 앱 만들어줘”라고 요청하면, Cline이 자동으로 프로젝트 구조를 잡고 필요한 컴포넌트들을 생성합니다.
또 다른 예로 “이 API 연동 코드에서 에러 처리 추가해줘”라고 하면, 기존 코드를 분석해서 try-catch문을 적절한 위치에 추가하고 사용자 친화적인 에러 메시지까지 구현합니다. “코드 리팩토링해줘”라고 하면, 성능 최적화와 가독성 개선을 동시에 해줍니다.
마치 베테랑 개발자의 코드 리뷰를 받는 느낌이랄까요?
저는 ‘python flask로 테트리스 게임 만들어 줘.’라고 요청해 봤는데요. 알아서 코드도 작성하고 터미널 명령을 실행해서, 아래와 같이 웹페이지를 띄웠습니다.
재밌는 건 웹페이지 실행 결과도 참조해서, 계속 수정한다는 점입니다. 처음에는 버튼 기능이 안 됐는데, 계속 수정하면서 더 완성도가 높아갔습니다.
VS Code에서 Cline과 Gemini API를 활용한 바이브 코딩, 어떠셨나요? 유료 서비스 못지 않은 퀄리티를 무료로 경험할 수 있습니다. 특히 개발 초보자분들에게는 정말 좋은 학습 도구입니다. 코드를 작성하면서 동시에 AI의 도움을 받으니 실력도 늘고 프로젝트도 빨리 완성할 수 있습니다.
처음에는 단순히 궁금하거나 필요한 사항만 요청해도, 충분히 쓸만합니다. 하지만 더 복잡하고 어려운 작업에도 활용이 가능한데요. 이에 대해서도 더 많이 활용해보고 내용 공유해보겠습니다.
Recommended Posts
- 클로드 AI로 주식 MCP 사용하기
- 커서 IDE MCP 연결 및 오류 해결 방법
- AI와 다른 프로그램을 연결하는 클로드 MCP 설정 및 시작 방법
- 앤트로픽 주가 확인 및 투자하는 방법
- 일론머스크 AI 그록3 데스크탑 다운로드 하는 방법