Tab만 눌렀는데 개발이 끝났어요 | Cursor 사용해보기

안녕하세요, 구독자님. 요즘 주로 사용하시는 IDE는 무엇인가요? 많은 분들이 VSCode, IntelliJ, Visual Studio, vim 등을 사용하고 계실 것 같아요. 저도 VSCode를 자주 사용하곤 하는데요.

오늘은 이러한 IDE들 중에서도 'Cursor'라는 IDE를 소개드리려고 해요. Cursor는 VSCode를 기반으로 한 편집 도구인데, 여기에 AI 기능이 더해져서 큰 도움이 되더라고요.

Cursor의 가장 큰 장점은 기존 코드를 리팩토링하거나, 새로운 서비스를 개발하거나, 혹은 코드 실행 시 발생하는 에러를 AI의 도움을 받아 손쉽게 해결할 수 있다는 점이에요. 이번 글에서는 Cursor 설치부터 간단한 프로젝트 제작, 그리고 알아두면 좋은 기능들까지 단계별로 소개해 드릴게요.

1. Cursor 설치 및 기본 설정 🏭

1.1 Cursor 설치 방법

Step1

Cursor 메인 사이트에 "Download for Free"라는 버튼이 있어요. 이 버튼을 통해 구독자님 환경에 맞는 Cursor를 다운로드 받을 수 있답니다.

Step2

Mac 기준으로 설명을 드리면, 앞서 다운로드 받은 파일을 압축해제를 먼저 해요. 그 후 생성된 "Install Cursor.app"을 실행하면 알아서 설치가 됩니다. 🫢

Step3

설치가 완료되면 VSCode처럼 인터페이스를 확인할 수 있습니다. 🎉 (참 쉽죠잉?)

1.2 기본 설정 가이드

Step1

여느 다른 IDE와 동일하게 기본적인 셋팅 기능이 있어요. 특히나 눈에 띄는 기능은 "Rules for AI"와 "Privacy mode"인데요.

먼저, Rules for AI는 AI에게 기본적인 규칙을 입력하는 란이에요. 구독자님의 프로젝트에 맞도록 규칙을 설정할 수 있어요.

또한 Privacy mode는 구독자님의 코드가 외부 네트워크로 전송되는 것을 비활성화 하는 기능이에요. 상황에 맞게 사용하시면 되겠어요. (Default: disable)

Step2

Cursor에서 사용가능한 Model들은 다양해요. 기본적으로 Claude가 활성화되어 있고요. 그 외에 gpt-4o 이상의 기능들도 탑재가 되어 있어요. 단, 이러한 모델들은 ChatGPT를 통해 API Key를 발급하여 사용할 수 있을거에요 :)

Step3

이 외의 설정들은 구독자님의 개발 환경에 필요한 설정들을 해주시면 끝나요!

2. 코딩없이 '뉴스레터 랜딩 페이지' 만들기 🤖

순서대로 해보기에 앞서, 완성된 화면을 보여드릴게요. 아래의 결과는 코딩 작업 하나 없이 5분만에 생성된 웹 페이지에요.

물론, 디자인적인 부분과 기타 문구들은 추가로 AI에게 요청을 하면서 수정이 가능한데요. 샘플로 보여드리고자 부가적인 작업은 하지 않았어요.

어떻게 작업이 이루어졌는지 본격적으로 알아볼까요?