[바이브코딩] Cursor 간단 사용법 알아보기

안녕하세요. 

오늘은 바이브 코딩을 할때 사용할 수 있는 툴 중 하나인 Cursor를 사용하는 방법을 알아보도록 하겠습니다.

 

Cursor란?

Cursor는 AI가 내장된 코드 편집기입니다.

일반 편집기는 코드를 작성하는 도구라고 한다면,

Cursor는 거기에 AI가 붙어서 코드를 같이 써주는 도구입니다.

옆에 개발자가 앉아서 "이렇게 하면 되지 않을까요?" 하고 제안해주는 느낌이라고 보면 됩니다.

VS Code라는 코드 편집기를 기반으로 만들어져서 구조가 거의 같습니다.

때문에 여러분 중 VS Code를 써보신 분이 있다면 더 빨리 사용법을 익히실 수 있을 겁니다.

처음 사용하더라도 UI가 직관적이라 금방 따라올 수 있습니다.

 

설치하기 & 프로젝트 시작

cursor.com

The best way to code with AI

위의 사이트에 들어가면 바로 아래처럼 다운로드 버튼이 보일 것입니다.

저는 맥북을 사용하고 있어 macOS용 다운로드가 나왔지만 Windows를 쓰시는 분들은 윈도우 버전에 맞추어 다운로드 가능합니다.

다운로드 버튼을 클릭하여 다운로드 해 주세요.

그 후 설치 파일을 실행하여 설치를 진행 해주시면 간단히 설치는 완료됩니다.

저는 이미 설치가 되어 있지만 아마 처음 여시는 분들은 로그인 화면이 나올 것입니다.

Cursor에는 Github이나 Google 계정으로 로그인이 가능합니다.

로그인을 하면 처음에 무료 플랜으로 시작하게 되는데요, 처음에 몇번 사용하는거는 충분하다고 봅니다.

나중에 사용량이 늘어나면 그때 Pro 플랜으로 전환하시면 됩니다.

그 후 아래와 같은 화면이 나올 텐데요,

Cursor 실행 화면

맨 왼쪽에 있는 Open project를 클릭해서 프로젝트를 시작할 폴더를 열거나 새로 폴더를 만들어서 들어가 줍니다.

저는 cursor-example 이라는 폴더를 만들어 열었습니다.

Cursor 작업 창

그럼 이렇게 화면이 나올 텐데요,

간단하게 설명하면, 맨 왼쪽 부분은 파일 탐색하는 부분, 가운데는 파일 상세보기를 할 수 있는 부분, 맨 오른쪽은 AI와 대화하면서 바이브 코딩을 하는 부분입니다.

 

핵심 기능

1. Tab 키로 코드 자동완성 기능

저희는 바이브 코딩을 주로 할 거라 사용할 일이 많이 없을 수 있지만,

코드를 작성하시는 분들은 이 기능을 활용할 수 있습니다.

아래처럼 왼쪽 파일 탐색기에 파일 추가 버튼 클릭 후 아무 코드 파일이나 만들어서

코드를 타이핑하다 보면 AI가 다음에 올 코드를 예상해서 아래처럼 회색으로 미리 보여줍니다.

여기서 Tab 키를 누루면 AI가 제시한 대로 코드가 작성됩니다.

지금은 예시로 아무거나 나왔지만 직접 코드를 작성하다보면 AI가 맥락을 읽고 제안하기 때문에 대부분 의도한 방향과 일치할 것입니다.

그럼 그 때 tab 키를 눌러 자동완성 기능을 편하게 사용하시면 됩니다.

 

2. AI와 대화하기( 계획, 실행, 디버그, 질문)

다음으로 AI와 대화하며 작업하는 방법입니다.

command+L 을 누르면 오른쪽의 에이전트 대화창을 열고 닫을 수 있습니다.

참고로 윈도우 쓰시는 분들은 control+L 입니다.

아래  왼쪽 단축키 표를 참고해서  다른 단축키들도 참고하시길 바랍니다.

에이전트 대화창은 오른쪽과 같이 나타납니다.

여기서 Agent 쪽을 클릭하면 4가지 모드가 나옵니다.

간단하게 설명하면,

- Agent: 계획, 검색, 코드실행 등 여러가지를 다 할 수 있는 모드입니다.

- Plan: 작업을 완료하기 위한 상세 계획을 생성할 수 있는 모드입니다.

- Debug: 버그를 진단하고 고치는 디버그가 가능한 모드입니다.

- Ask: 별도로 코드 실행은 자동으로 하지 않고 질문에 답을 주는 모드입니다.

보통 바이브 코딩으로 어떤 것을 만들 때 Agent를 주로 씁니다.

하지만 보통 실행이 필요하지 않는 작업(오류를 물어본다거나 일반적인 질문에 대한 답만을 원할 때)을 할 때는 Ask 모드를 쓰고,

계획할 일이 있을 때 Plan 모드를 사용하면 더 효율적일 것입니다.

 

3. Agents Window - AI agent를 관리하는 공간

이 기능은 2026년 4월 Cursor3 업데이트와 함께 추가된 기능입니다.

화면 우측 상단의 Agents Window를 클릭하면 아래처럼 새 창이 기존 커서 창 위에 뜹니다.

Cursor Agents Window

Agents Window는 여러 작업을 동시에 AI 에이전트들에게 맡기고 한눈에 관리하는 공간입니다.

예를 들어 이런 상황에서 유용합니다.

• 로그인 기능을 AI 에이전트 A에게 맡기는 동안, 디자인 수정은 에이전트 B에게 맡기고 싶을 때
• 작업이 길어져서 "일단 클라우드에서 계속 돌려놓고 나는 다른 일 하고 싶을 때"

간단하게, 기획자AI, 디자이너AI, 개발자AI 등을 만들어 각각 일을 시킨다고 보시면 됩니다.

처음에는 2번 기능 만으로도 충분합니다.

이 기능은 프로젝트 규모가 커지고 여러 작업을 동시에 진행하게 되는 시점에 유용할 것입니다.

 

Cursor로 바이브 코딩하기

예시로 간단한 웹페이지 하나 만들어 보도록 하겠습니다.

참고로 저는 일반 Auto 모드를 사용했는데요, 아마 Free 플랜에서는 자동으로 설정되어 있을 것이라고 생각합니다.

Pro 쓰시는 분들은 아래처럼 Auto 토글 해제하면 오른쪽과 같은 더 많은 모델을 쓸 수 있습니다.

하지만 사용량이 Auto보다는 빨리 찬다는 점 참고하세요.

그리고 아래의 명령어를 입력해 보세요.

이름을 입력하면 그 이름으로 된 간단한 포트폴리오 페이지 하나 만들어줘. 
HTML 파일 하나로만 만들어줘.

그러면 금방 html 파일을 하나 만들어 줄 것입니다.

간단 웹페이지 만들기 결과

저는 portfolio.html이라는 파일이 하나 만들어 졌습니다.

위 사진에 가운데 섹션에 Keep File을 누르면 최종적으로 AI가 작성한 것이 저장이 됩니다.

취소 하고 싶으시면 그 옆의 Undo File을 눌러서 취소하면 됩니다.

여기서 파일을 확인해 보고 싶으시다면, html 파일을 열거나, 

아니면 저처럼 확장 프로그램을 설치해서 실행하면 쉽게 확인 가능합니다.

저는 Live Server를 설치하였습니다. 로컬 서버를 실행해서 웹페이지를 보여주는 확장자입니다.

extensions 다운로드

설치가 완료 되었으면 위처럼 html파일 우클릭 > Open with Live Server를 클릭하면 html을 볼 수 있을 것입니다.

간단 결과물

저는 위처럼 결과가 나왔습니다. 맨 위 칸에 본인 이름을 입력하고 포트폴리오 만들기 버튼을 클릭하면 그 이름으로 바꾸어 줍니다.

여러분들은 PRD.md 등 파일이 있으면 폴더에 추가 후 PRD.md기반으로 작업을 실행해 달라고 하면 더 완성도 있는 결과물을 생성해 줄 것입니다.

PRD.md 작성하는 방법은 아래의 게시글 들을 참고해 주세요.

https://wonhwa.tistory.com/79

[바이브코딩] AI를 활용하여 기획 아이디어 발굴하기

https://wonhwa.tistory.com/80

[바이브코딩] AI를 활용하여 PRD 완성하기

 

바이브 코딩 시 참고사항

1. 바이브 코딩을 시작할 때 프롬프트는 구체적으로 말할 수록 결과가 좋습니다.(PRD.md 같은 문서를 추가해서 작업해 보세요.)

2. 바이브 코딩 중 오류가 났을 때는 오류 메세지를 그대로 붙여서 대화 창에 붙여 넣으면 AI가 알아서 해결해 줄 것입니다.

이런 오류가 났어: [오류 내용 붙여넣기]

이런 식으로 작성해 주시면 됩니다.

 

마무리

오늘은 간단하게 Cursor 사용법을 알아 보았습니다.

조만간 PRD.md를 활용해서 cursor로 개발하는 방법도 글을 작성해 보도록 하겠습니다.

질문이 있으시다면 댓글 남겨 주세요.

+ 다음 포스트로는 요즘에 핫한  Claude Code 세팅 하는 방법을 알아볼 예정입니다.