인공지능을 활용해서 코딩을 한다는 새로운 개념인 바이브 코딩에서 떠오르는 AI 코드 에디터인 커서 Cursor를 직접 사용해보고 겪은 놀라운 체험과 함께 일반인이 사용하기에는 부담이 갈 수 밖에 없는 유료 요금제까지 소개한다.
기본적으로 바이브 코딩은 텍스트를 입력하지 않고 음성으로 할 수 있는 기술까지 적용되어 있지만, 그래도 여전히 코드를 작성하듯이 문장으로 명령하면 AI가 이에 맞춰 코드를 자동으로 작성해주는 기술이 일반적으로 통용되고 있다. 이를 가능하게 해주는 많은 AI 코딩 툴이 존재하는데 2025년 기준으로 가장 인기 있다는 바이브코딩 툴인 커서 Cursor로 실제로 간단한 프로그램을 제작해 봤는데, 그 결과는 상상을 초월할 만큼 혁명적이었다.
비주얼 스튜디오 코드 기반 AI 코드 에디터, Cursor
커서 Cursor는 기본적으로 코드 작성 시 많이 활용되는 에디터인 비주얼 스튜디오 코드를 포크해서 만들어져 있어서 기존에 코딩 경험이 있는 사람들에겐 매우 익숙한 UI 그대로 사용할 수 있다.
단지 UI가 익숙할 뿐만 아니라 최신 AI 모델들을 다수 탑재하고 있어서 원하는 AI 모델을 선택적 또는 통합적으로 할용할 수 있을 뿐만 아니라, 커서 UI에서 코드가 바로 작성되며 미리보기 그리고 수정까지 일사천리로 진행할 수 있다보니, 기존에 비주얼 스튜디오 코드를 사용했던 사람이라면 더 이상 나무랄 데 없는 AI 코드 에디터이다.
하지만 문제는 비용이다. 처음에 무료 버전을 제공하므로 해당 커서 Cursor를 활용해서 간단한 프로그램 정도는 만들면서 체험할 수 있지만, 무료 버전이 종료되면 이후에는 유료 버전을 선택해야 하는데 이때 가격이 정액제처럼 보이지만 실상은 사용량을 기반으로 한 정액제이다보니, 정액제로 생각하고 마음대로 사용하다가는 요금 폭탄을 맞을 수도 있다는 점이다.
우선, 컴퓨터 또는 모바일에서 URL 접속 방식으로 접속하거나 상기 커서 홈페이지 버튼을 누르면 해당 커서 홈페이지에서 바로 비주얼 스튜디오 코드를 기반으로 만들어진 The AI Code Editor인 Cursor를 무료로 다운로드해서 설치할 수 있다.
단, 사전에 회원 가입 후에 로그인을 해야 하는데 이 과정은 무료이므로 부담없이 커서를 다운로드해서 설치하면 된다. 이때 비주얼 스튜디오 코드를 포크해서 해당 커서가 제작되었으므로 사전에 비주얼 스튜디오 코드가 설치되어 있어야 한다.
참고로, 비주얼 스튜디오 코드는 무료 버전만으로도 충분히 사용이 가능하므로 상기에 추가한 비주얼 스튜디오 코드 홈페이지에서 무료 버전을 설치하면 된다.
즉, 커서 Cursor는 비주얼 스튜디오 코드를 기반으로 포크해서 제작된 소프트웨어이므로 실제 바이브 코딩은 커서 Cursor 프로그램만 실행해서 해당 Cursor에서 AI에게 명령을 하는 방식으로 코드를 작성하고 수정하는 방식으로 원하는 프로그램을 만들 수 있다.
커서 Cursor 무료 버전 체험하기
커서를 활용한 바이브 코딩을 체험하려면 앞에서 언급했듯이 비주얼 스튜디오 코드와 Cursor 프로그램을 설치해야 한다. 더불어 nodejs도 설치해야 하는데 자바스크립트 코드를 브라우저 밖에서 실행할 수 있도록 지원하는 런타임 환경인 일명 노드도 무료로 제공하므로 그냥 아래에 추가한 Nodejs 홈페이지에서 간단히 다운로드해서 설치하면 된다.
즉, 무료로 제공하는 비주얼 스튜디오 코드, Cursor 그리고 노드js까지 설치했다면 본격적으로 바이브 코딩을 체험할 수 있는데, 이때 Cursor 프로그램만 실행하면 된다.
더불어 Cursor 프로그램을 실행한 후에 아래와 같이 상단 아이콘 모양에서 마지막에 있는 확장프로그램인 플러그인을 추가할 수 있는 블록 형태의 모양을 누른 다음에 LiveServer를 기재 후에 나온 해당 플러그인을 설치하면 Cursor에서 작성된 코드를 미리보기 형태로 브라우저에서 바로 볼 수 있어서 편의적이다.
기존에 비주얼 스튜디오 코드를 사용해 봤다면 해당 LiveServer에 익숙하겠지만, 해당 기능을 모른다면 쉽게 미리보기라고 생각하면 된다. 조금 더 부연하면 Cursor에서 AI가 작성한 코드를 실행하려면 index.html 파일을 선택해야 하는데, 해당 과정을 할 필요없이 아래와 같이 Cursor 프로그램 우측 하단에 있는 Go Live라는 항목만 누르면 바로 브라우저에서 작성한 코드를 실행해주므로 코딩 작업 시 필수로 설치하는 유틸리티 개념이다.
이후 작업할 폴더를 지정한 후에 AI에게 텍스트를 입력해서 명령하는 방식으로 원하는 코드를 작성하게 하면 되는데, 이전에 비주얼 스튜디오 코드를 사용하지 않았다면 해당 Cursor 프로그램이 낯설수 밖에 없으므로 아래에서 시작하는 방법부터 실제로 AI에 텍스트를 기재해서 코드를 작성하고 해당 코드를 실행하는 과정까지 자세히 소개한다.
즉, 아래에 기술하는 내용은 기존에 비주얼 스튜디오 코드를 이용해 본 사람이라면 굳이 볼 필요 없이 마지막 단락인 커서 유료 요금제로 넘어가면 된다.
커서 Cursor 사용하는 방법
앞에서 언급한 3가지 프로그램인 비주얼 스튜디오 코드, Cursor, 노드js를 모두 설치한 상태에서 Cursor 프로그램을 실행했다면, 우선 작업할 폴더를 지정해야 한다.
이때 컴퓨터에서 코드를 저장할 폴더를 만들어 놓은 후에 Cursor에서 불러오는 식으로 이용하는게 편의적이다. 물론 깃허브를 사용한다면 해당 깃허브에 파일이 순차적으로 기록될 수 있도록 연계하면 더욱 효율적이지만, 해당 깃허브 이용 방법은 별도로 학습해야 할 만큼 내용이 상당하며 필수가 아니라 옵션이므로 깃허브 연계까지는 하지 않아도 무방하다.
누구에게는 너무 쉬울 수 있지만 때론 누군가에는 생소할 수밖에 없는데, 처음에 상단 메뉴 중 File를 누른 다음에 펼쳐지는 목록 중에서 Open Folder 또는 Add Folder to Workspace 항목을 선택한 후에 코드를 저장할 폴더를 지정해주면 된다.
이것으로 커서를 활용해서 바이브 코딩을 할 준비는 다 끝난 셈이다. 이후에는 어떤 프로그램 또는 앱을 만들어볼 지 구상한 후에 이를 AI에게 만들어달라고 요청하기만 하면 된다.
해당 커서 UI는 크게 좌측에 작업할 폴더가 나오고 중앙에 코드 창 그리고 우측에 AI와 대화할 수 있는 소통 창으로 구성된다.
즉, 우측에 있는 채팅창에 한국어로 만들고 싶은 프로그램을 최대한 자세하게 설명해주면 되는데, 이때 코딩적 사고방식에 따라 질문을 해야만 더욱 효율적으로 작업이 진행된다. 즉, UI라고 불리는 프론트엔드 관점에서 먼저 질문을 해서 생성하려는 프로그램의 UI를 제작한 후에 이후 데이터 및 기능 등을 추가하는 백엔드 관점의 질문을 추가하는 식으로 하면 더욱 효과적으로 원하는 결과물을 창출할 수 있다.
실제로 코딩 연습 시 많이 하는 메모장 프로그램을 생성해달라고 요청했는데 말도 안 되게 2분만에 거의 완성품에 가까운 프로그램을 제작했다. 물론 일부 디자인을 수정하는 요청을 추가하면서 프론트엔드에 해당하는 UI 부분을 완성했다.
더불어 데이터를 저장하고 수정하고 삭제하는 DB부터 다른 사람과 공유할 수 있도록 도메인 즉, URL로 배포하는 과정까지 진행했다. 해당 과정은 기존에 Cursor가 작성해준 코드를 토대로 다른 무료 사이트에서 제공하는 DB 기능과 배포 기능을 소스에 추가하는 방식으로 진행했다.
이중 데이터베이스를 이용하는 부분은 상기에 추가한 파이어베이스에서 제공하는 무료 프로젝트를 활용했는데, DB는 무료로 일정 용량을 제공하는 사이트가 많으므로 이를 활용하면 된다. 해당 파이어베이스를 이용하려면 회원가입 후에 프로젝트를 생성해서 원하는 프로그램 형태를 선택하는 방식으로 사용하면 되는데, 워낙 빨리 파이어베이스 UI가 바뀌다보니 모든 과정을 설명하기에는 한계가 있다.
이때 대부분의 작업은 프로젝트 내 설정에서 진행된다는 점만 주지하면 이후에는 주어진 순서대로 따라하면서 여기에서 생성된 코드 및 링크를 Cursor가 생성한 js 파일에 추가하는 방식으로 이용하면 된다.
참고로, Cursor로 제작한 메모장 프로그램을 다른 사람과 공유할 수 있도록 배포하는 기능은 상기에 추가한 버셀을 활용했다. 해당 버셀도 회원가입 후에 일정 기능은 무료로 사용할 수 있으므로 이를 활용해서 상당히 긴 형태의 요상한 URL를 지닌 형태의 도메인으로 배포했다. 이때 Cursor 내 터미널 기능에서 사전에 설치한 Nodejs에서 제공하는 npm 명령어를 이용해야 하는데, 해당 부분은 별도의 내용이므로 여기에서는 패스한다.
커서 Cursor 바이브 코딩을 넘어 소스 관리까지
해당 커서를 활용해서 정말 말도 안 되게 빠르게 원하는 프로그램을 생성하는 바이브 코딩을 체험하면서 놀라운 점은 따로 있었다.
처음 Cursor를 활용해서 메모장 프로그램을 만들었는데 Cursor에게 html, css, 자바스크립트를 활용해서 메모장을 만들어줘라고 한글로 텍스트를 입력하지 2분만에 빠르게 거의 완성된 코드를 보여졌다. 이후 디자인에서 수정 및 삭제 기능 그리고 메모 추가 시 순서대로 쌓이고 마우스 드래그에 메모 칼럼을 이동할 수 있도록 하나씩 차례대로 질문하면서 코드를 수정시켜서 빠르게 완성했다.
하지만 앞에서 언급한 백엔드 부분인 DB 연결과 배포 부분은 Cursor가 작성한 코드를 기반으로 직접 일부 코드를 추가하는 식으로 수동으로 작업해야 했다.
이후 백엔드를 처음 배울 시에 빼놓을 수 없는 투두리스트 프로그램도 Cursor에게 만들라고 요청하니 역시 빠르게 코드를 완성했다. 이때 html, css, javaScript를 하나의 통합파일로 생성해서 각각 분리해달라고 추가로 요청했다.
여기까지는 Cursor에게 기대할 수 있는 빠른 코딩 작업인데 혹시나 해서 추가로 다른 작업을 진행했는데, 그 결과가 가히 혁신적이었다. 실제로 이전에 Cursor가 짜준 코드에 DB 연결하고 배포까지 마친 메모장 프로그램에 새롭게 만든 투드리스트를 합쳐달라고 요청했더니, 원하는 대로 결과물을 창출했다.
더욱 더 놀라운 건, 이건 안 되겠지라고 생각하며, 새롭게 만든 투드리스트에 메모지 프로그램과 같이 데이터가 DB에 연계될 수 있도록 요청했는데, 해당 작업도 완벽히 완수했다. 더불어 기존에 배포된 프로그램과 아직 배포되지 않는 프로그램을 병합한 새로운 프로그램을 배포해달라고, 기존에 터미널에서 npm을 이용하는 게 아니라 AI에게 텍스트로만 요청했더니 해당 작업까지 완수했다.
커서 Cursor 유료 요금제 주의사항
상기에 소개한 작업 과정으로 완성해 프로그램이 아래에 있는 메모 투드 앱으로 실제로 버셀에서 제공한 도메인으로 접속 시 모든 플랫폼에서 이용이 가능하면, 파이어베이스와 연계된 DB로 데이터 관리까지 문제 없이 작동한다.
물론 무료 DB와 무료 배포 서비스를 이용했으므로 실제 상용화 서비스는 불가능하지만, 유료 기능을 활용하면 충분히 상용화 가능한 웹 또는 앱 제작이 가능하다는 점을 확인할 수 있었다.
하지만 문제는 이후에 추가로 브라우저에서 제공하는 웹 방식이 아니라 모바일에서 작동하는 앱을 구현해보려고 새로운 요청을 Cursor에게 했는데, 아래와 같이 더 이상 무료 버전을 사용할 수 없고 유료 버전으로 업그레이드해야 한다는 알림이 나온다는 점이다.
해당 Cursor는 런칭 시에는 무료 버전으로도 속도가 느린 결과물을 보는 방식으로 무제한 사용이 가능했지만, 현재는 일정 요청량을 넘으면 더 이상 무료 버전을 사용할 수 없는 방식으로 변경됐다.
그래서 유료 버전을 알아보니 상기에 나오듯이 월 20달러 그러니까 고환율을 감안하더라도 월에 3만원 정도인 프로 요금제라면 충분히 사용할 가치가 있다고 판단했다. 하지만 문제는 해당 20달러가 정액제가 아니라는 데 있다. 바로 요금 폭탄이 가능하므로 유료 요금제 선택 시 시중히 알아보고 결정해야 한다.
즉, 해당 유료 요금제는 기본 사용량을 토대로 제공하며 사용량을 넘어가거나 추가로 비용이 증가하는 방식이다. 특히 Max 모드를 이용 시에 요금 폭탄을 맞을 수 있으므로 가급적 Max 모드 사용은 배제해야 한다. 물론 Cursor 대시보드에 사용량을 확인할 수 있으므로 수시로 해당 대시보드를 체크하면서 활용하면 요금 폭탄은 사전에 방지할 수 있으니, 커서 유료 요금제를 사용한다면 해당 부분은 반드시 주지할 필요가 있다.