Cursor AI 코드 편집기

 

 

여러분, 저는 최근에 개발 환경을

VS Code에서 Cursor AI로 갈아타게 되었고, GitHub Copilot 구독도 취소하게 되었습니다.

 

이번 영상에서는 제가 왜 Cursor를 사용하게 되었는지 작은 튜토리얼을 진행하면서

Cursor의 특징과 장점들을 소개해드리도록 하겠습니다.

 

먼저 Cursor에서 Command+L 또는 Ctrl+L 키를 누르면 오른쪽에 채팅 인터페이스가 나타납니다.

사용할 수 있는 모델도 여러 가지가 있는데요. GPT-4.5 모델부터 Cursor Small 모델, GPT-3.5 모델, Claude 3.5 Sonnet, GPT-4.5 Mini 모델 등 다양한 모델들을 선택해서 채팅을 시작할 수 있습니다.

 

이번에는 Claude 3.5 Sonnet을 사용해서 프로젝트 세팅을 해보도록 하겠습니다.

ChatGPT와 비슷한 서비스를 만들어보면서 Cursor의 특징들을 설명해드리겠습니다.

 

 

프로젝트 세팅

Next.js와 TypeScript를 사용해서 ChatGPT와 같은 서비스를 만들어볼 건데요, 프로젝트 세팅 과정을 단계별로 진행해보겠습니다. Cursor AI에서 생성된 답변을 토대로 프로젝트를 세팅해보겠습니다.

1. 프로젝트 초기 설정
   • Next.js와 TypeScript를 사용해서 ChatGPT와 같은 서비스 개발 계획
   • Cursor AI에 프로젝트 세팅 과정을 단계별로 요청하는 프롬프트 작성
   • 채팅 인터페이스를 통해 Cursor AI의 답변 확인
2. Next.js 프로젝트 생성
   • Cursor의 특별한 기능인 Run 버튼 활용
   • Bash 스크립트 자동 복사 및 실행 기능 소개
   • 터미널에서 직접 실행하는 대신 Run 버튼으로 간편하게 프로젝트 생성
3. 패키지 설치 및 환경 설정
   • 프로젝트 폴더로 이동
   • 필요한 추가 패키지 설치
   • 패키지 설정 완료
4. 환경 변수 설정
   • .env.local 파일을 프로젝트 루트에 생성
   • OpenAI API 키 설정
5. API 라우트 생성
   • pages/api/chat/route.ts 생성
   • pages/index.ts 파일 생성
   • 프로젝트 실행 준비

 

 

에러 해결

• 프로젝트 실행했는데 에러났음
• Cursor한테 에러 메시지 복사해서 전달하고, 해결방법 알려달라고 함.
• 프로젝트에서 디렉토리 기반 라우팅을 사용하려면 특정 파일을 삭제하고,
  앱 기반 라우트로 전환하려면 다른 파일을 삭제하라고 알려줌
• 해결방안을 생각한 후, pages 디렉토리를 삭제하고 Next 서버 다시 실행했더니 해결되었음

UI 개선-Claude 활용

• ChatGPT UI 보고 비슷하게 만들기로 했음. UI개선을 요청함
• index.tsx 파일을 기반으로 수정하면서 프롬프트 작성했음
• ChatGPT의 UI를 스크린샷 찍어서 붙여넣고,  이 스크린샷을 기반으로 채팅 UI를 개선해달라고 프롬프트를 작성
• Claude 3.5를 기반으로 하고 있어서 이미지 인식이 가능함
• Claude의 Vision 기능을 사용해서 ChatGPT의 UI를 분석하고 코드를 업데이트 했음

Cursor 기능

• Apply 버튼으로 코드 변경 쉽게 할 수 있음. 코드 업데이트가 매우 편리해짐.
• 주석 처리 없이 바로 수정 가능했음
• 다만, CSS가 제대로 적용되지 않을 수 있음. 그래도 ChatGPT와 유사한 인터페이스 스타일로 적용되었음

 

특정 부분 스타일 수정

• 글자색이랑 배경색이 같아서 안 보이는 문제가 있어 스타일을 수정 해 보겠음
• 채팅 전송창 부분의 코드를 선택하고 Command+K를 누르면, 해당 코드 라인만 Cursor에게 수정을 요청할 수 있음
• 배경색과 텍스트 색이 같아서 보이지 않으니 글씨색을 검정색으로 변경해달라고 요청함
• Cursor가 해당 부분만 빠르게 변경해주었고, Tailwind CSS로 'text-black'이 적용됨
• Accept를 눌러 적용하고, 다시 확인해보니 이제 채팅 메시지가 잘 보임. 해결.

 

터미널 활용

• 터미널에서도 Command+K 쓸 수 있음
• 터미널 창을 열고 Command+K를 누르면 터미널에서도 프롬프트를 작성할 수 있는 창이 나타
• 여기에 자연어로 프롬프트를 작성하면 터미널 명령어를 자연어로 만들 수 있음
• 예를 들어, Git 저장소를 초기화하거나 디스크 사용량을 확인하는 등의 명령어를 쉽게 생성할 수 있
• Git 명령어나 디스크 확인 같은 거 쉽게 할 수 있음

 

터미널 활용

1. Run 기능: 터미널 명령어를 바로 실행할 수 있습니다.
2. Command+K 기능: 특정 코드 라인만 수정할 수 있습니다.
3. Composer 기능 (Ctrl+Shift+I): 여러 파일을 한 번에 수정할 수 있습니다.

 

Cursor Composer (최신 기능. 매우 유용함) 

Composer를 사용하려면 Ctrl+Shift+I 키를 눌러 활성화할 수 있음. 

주요 특징

• 여러 파일 동시에 수정 가능
• @ 버튼으로 파일, 폴더, 코드, 웹, 문서, GitHub, 코드베이스 등 참조 가능

구현 과정

1. 채팅 사이드바에 새로운 채팅방으로 이동할 수 있는 기능을 만들어 달라고 요청함.
2. @ 버튼 입력해서, 파일이나 폴더, 코드, 웹, 문서, GitHub, 코드베이스 등을 참고하라고 레퍼런스를 줄 수 있음
3. Cursor가 전체 코드베이스를 분석
   프롬프트에 코드베이스를 참조하라고 하면 현재 나의 코드베이스를 전부 다 읽어서 코드 구조를 파악하게 됨
    코드 구조 파악한 것을 바탕으로 해서 인덱스 파일을 수정해 줌
   
4. 코드 모듈화 작업 진행
   모듈화해서 코드를 작성하라고 했더니, 요청한대로 채팅방을 모듈화해서 chatroom이라는 컴포넌트로 생성해줌
5. 최종 구현 : index 파일 수정 및 chatroom 컴포넌트 생성

컴포저 활용

• Accept All 버튼으로 모든 변경사항 한 번에 적용
• 컴포넌트 폴더에 자동으로 파일 생성
• 채팅방 기능 테스트 및 확인

상태 관리 개선

• 채팅방 간 이동 시 상태 유지 문제 발견
• Ctrl+Shift+I로 컴포저 재활성화
• 코드 레퍼런스로 chatroom과 index 파일 두 개를 넣어주도록 햠(참조 설정)
• 각 채팅방마다 상태관리 할 수 있도록 업데이트 해 달라고 명령함. 각 채팅방별 독립적인 상태 관리 구현함
• 채팅 메시지 유지 기능 구현

이렇게 구현한 결과, 각 채팅방의 상태가 독립적으로 잘 유지되는 것을 확인할 수 있었습니다.

 

 

탭기능 : 코드라인 파악해서 다음에 작성할 코드를 예측하고, 탭버튼 누르면 자동으로 코딩해줌. 

 

 

요금제 안내

Cursor는 세 가지 요금제를 제공합니다:

• 2주 무료 체험
• 개인 사용자: 월 20달러
• API 키 직접 사용 옵션 (OpenAI, Anthropic, Google, Azure)

궁금한 점은 댓글이나 디스코드 채팅방에 남겨주시면 자세히 답변해드리도록 하겠습니다.

 

 

https://youtu.be/Gt40VneLdX4?si=UhPqwQ7-GGY99DPv