Cursor이용자 다시 돌아온다. Cursor Agent에이전트

"Cursor"가 새로운 업데이트 "Agent(에이전트)"를 출시했습니다. 이번 업데이트로 AI의 기능이 크게 확장되었습니다. 그 동안 다른 뛰어난 Ai 툴의 등장으로 Cursor를 빠져나갔던 사람들이 많았는데요.  Cursor는  테스크 단위로 잘게 쪼갠다면 상당히 편리한 툴일 수 있습니다. 그런데 Agent 기능을 가지고 커서가 돌아왔습니다. 새로워진 Cursor에는 다음과 같은 일들이 가능해집니다. 

Agent는 어떤 작업을 수행할 수 있을까? 

1. 스스로 적합한 컨텍스트 선택하기 

2. 터미널 사용

3. 전체 작업 실행

4. 자동으로 버그 탐지

5. 코드베이스의 기반 검색

 

앞으로 에이전트가 일을 처리하는 동안, 사람들은 다른 작업에 집중할 수 있습니다. 내년 2025년에는 에이전트가 거의 모든 분야, 다양한 업무 영역에 스며들 것으로 보입니다. 에이전트의 특별한 점은 단순한 기술적 개선이 아닙니다. 새로운 기능을 살펴 보면, 이제 에이전트는 사람의 일을 "개선"하는 수준을 넘어, 아예 "대체"한다는 점에서 차별화 될 것 같습니다. 

"어떻게 해야하는지 모르겠다고요?" Cursor 안써본 사람이 꼭 봐야할 내용

 

이 내용을 저장해 두고 여러분만 보고, 따라하면 손쉽게 여러분들이 원하는 앱을 만들 수 있습니다. 

 

1. Claude 로 아이디어를 구체화하고 정리하기

 

우선, Claude에 여러분의 프로젝트 아이디어를 모두 꺼내놓으세요. 마치 친구와 대화하듯이, 프로젝트에 대해 생각나는 모든 것을 자유롭게 이야기해보세요. 왜냐 하면 AI가 여러분의 프로젝트를 잘 이해하려면 여러분의 아이디어의 배경을 아는 것이 정말 중요합니다. 어떤 맥락에서 아이디어가 나왔는지 Ai가 아는 것과 모르는 것은 결과물이 천지 차이입니다. 내 아이디어를 어떻게 말해야 AI가 잘 알아 들을까요? 대충 말해도 찰떡 같이 알아 듣는 AI지만 디테일은 퀄리티를 높이고 ai가 더 정확하고 효율적으로 빨리 결과물을 만들게 합니다. 다음의 기준으로 당신의 아이디어를 Ai에게 설명하세요. 

 

-어떤 서비스를 만들고 싶은지

-어떤 기능들이 필요한지

-화면 구성은 어떻게 할지

-어디서 영감을 받았는지

 

2. Claude나 GPT-4로 문서화하기

 

Claude는 여러분이 떠올린 생각들을 체계적으로 정리하는 데 뛰어나기 때문에 잘 정리해 줄거에요. 이렇게 정리된 내용을 동일하게 Claude나 ChatGPT GPT-4를 이용해 앱개발에 맞도록 체계적으로 정리하세요. 다음과 같은 기준으로 가지고 정리해달라고 하면 Ai가 다 해줍니다. 저는 개인적으로 Claude를 추천합니다. :))

 

-프로젝트 요구사항 정리

-사용할 기술과 패키지 목록

-데이터 구조 설계

-상세한 서비스 흐름도

 

3/10

 

3. 화면 만들기

 

이렇게 문서 작업이 끝났다면 이제 화면을 만들 차례예요. ! 여기엔 두 가지 방법이 있습니다: 화면 코드 만드는 법

 

-고퀄리티 UI를 원한다면: v0 활용

-일반적인 UI면 충분하다면: Claude 활용

 

-v0를 선택했다면: 지금까지 만든 문서들을 첨부하고 페이지별로 하나씩 만들어달라고 요청하세요.

-Claude로 작업한다면: 화면 디자인 코드를 'step by step'으로 만들어달라고 요청하세요.

 

4/10

 

4. 실제 프로젝트 코드 구성하기

 

자, 이제 문서와 화면 코드가 준비되었으니, 실제 프로젝트를 구성해볼 차례입니다.

 

여기도 두 가지 방법이 있습니다:

 

-빠르게 시작하고 싶다면: bolt.new사용

몇 번의 명령어로 Nextjs와 필요한 모든 것들을 상대적으로 빠른 시간안에 설치할 수 있어요.

 

-직접 하나하나 설정하고 싶다면: Cursor사용

Cursor를 사용한다면 Claude의 안내에 따라 하나씩 설정하면 됩니다.

 

 

5. 폴더 구조 만들기

 

Claude에게 "폴더 구조" 만들어달라고 요청하세요. AI와 작업할 때 가장 효율적이었던 폴더 구조는 이와 같습니다. 

 

이 구조를 복사해서 Claude에게 업로드하고, 여러분의 프로젝트에 맞게 구조를 만들어달라고 요청하세요.

 

 

6. 코드 실행 준비하기

 

만들어진 폴더 구조를 아래 두개 중 하나에 올려보세요:

 

- bolt (명령어 몇 번으로 폴더와 파일이 빠르게 생성 가능)

- Cursor( 먼저 모든 문서를 .md 형식으로 메인 폴더에 넣어서 사용)

 

그 다음 composer를 열고, Nextjs와 필요한 것들을 설치한 후 폴더 구조를 만들면 됩니다.

 

 

7. 화면 코드 넣기 

 

이제 만들어둔 화면 코드를 각각의 파일에 넣습니다. 이것도 Claude에게 물어 보면 잘 알려줍니다. Claude에게 이렇게 요청해보세요.

 

프롬프트: <지금까지 만든 코드와 요구사항을 가지고 페이지를 하나씩 만들어볼거야. 각 파일에 바로 붙여넣을 수 있는 완성된 코드를 알려줘>

 

그리고 Claude의 안내에 따라 코드를 알맞은 위치에 넣어주세요.

 

 

 

8. 서버 기능 구현하기

 

화면이 데모 데이터로 잘 동작하고 모든 기능이 잘 작동하는지 확인하세요. 확인이 되었다면, 이제 로그인/회원가입, 데이터베이스, 파일 저장소를 만듭니다. 가장 많이 사용되는 supabase를 저는 사용합니다. AI가 데이터베이스 query 작성을 도와줄 수 있거든요. 이 역시 Claude에게 물어봐서 알려주는 대로 따라가면서 Cursor에서 데이터 구조 파일을 참고해 작업하시면 됩니다. 이런 순서로 한번 해보세요. 

 

1. 로그인/회원가입

2. 데이터베이스 테이블

3. 파일 저장소

 

 

 

9. 마지막 오류 해결하기

 

이제 화면에서 서버로 데이터가 왔다 갔다 할 수 있습니다. 그러면 모든 기능을 꼼꼼히 테스트해봐야 합니다. 여기서 몇 가지 버그가 발견될 수 있는데, 이것도 Claude에게 물어 보면서 하면 생각보다 쉽게 해결할 수 있어요. 문제가 생기면: 새로운 커서의 composer 창을 열고, 문제가 있는 파일들을 보여 준다음 <여기서 어떤 오류가 났는지 설명해주세요.>라고 하면 알려줘요. 클로드가 코딩은 확실히 괜찮다고 생각합니다. 

 

저도 당장 써보고 싶네요.