0. 들어가기

Cursor Agent 기능이 추가되면서 AI를 활용한 코드 작성 및 생산성이 크게 향상되었습니다. 이 기능을 잘 쓰고 싶다는 생각과 어떻게 더 활용할 수 있는 지 많은 고민이 있는데요. 간단한 Cursor Agent 소개, 활용 예시를 남겨 보고자 합니다.

1. Cursor Agent 모드란?

• Cursor Agent 모드는 Cursor IDE에서 제공하는 AI 기반 개발 지원 기능입니다.
• 기존 Composer 기능이 확장된 형태로, 단순히 코드를 생성하는 것을 넘어서 다음과 같은 역할까지 수행합니다:

2. Cursor Agent 2가지 접근법

• Cursor의 Composer 기능이 Agent 기능으로 확장되면서 지정한 작업 실행에서 끝나지 않고, 오류를 수정해주는 단계까지로 AI의 역할이 확장되었습니다.
• 여기에서 제가 생각하는 Cursor Agent 모드를 대하는 2가지 접근법이 있습니다.

2.1. 페어프로그래밍의 도구로써 사용하는 방법

• MS의 Copilot이 함께 코딩하는 AI라는 의미로 이름을 지었던 것처럼, Agent라고는 하지만, 페어프로그래밍의 도구로 사용하는 방법입니다.
• Agent가 진행 되는 동안 과정을 지켜보고, 틀린 곳이 있으면 바로 Agent 모드를 중단하여 추가 프롬프트 및 컨텍스트를 주입하여 결론을 도출해 내는 방법입니다.
• 장점
  • 실시간으로 코드를 확인하고 있기 때문에 AI가 작성하는 코드의 컨텍스트를 따라가기 쉽습니다.
  • 컨텍스트가 커지거나 Agent 동작 시간이 길어지는 경우 의도와 다른 방향으로 진행 되는 경우가 있는데, 원하는 방향과 다른 경우 빠르게 바로 잡을 수 있습니다.
• 단점
  • AI 작성 코드를 계속 살펴보고 컨텍스트를 파악해야 하기 때문에 시간이 오래 걸립니다.

2.2. 명령으로만 사용하는 방법

• 팀 리더나 사수 역할을 하고 있다면 다른 주니어 개발자에게 지시나 작업을 요청하는 경험이 있을 겁니다.
• 그런 것처럼, Agent에게 개발에 필요한 컨텍스트를 최대한 주입 후 아키텍처, 방향을 제시하여 기능 개발을 마무리하도록 지시하는 방법이 있습니다.
• 장점
  • 맡겨놓고 다른 작업을 이어서 할 수 있습니다. (동시에 4개, 5개 작업도 가능합니다.)
  • 프롬프트 작성 시 정확하지 않은 내용이 있으면 Agent가 오동작할 가능성이 있기 때문에 구현에 필요한 스펙 및 아키텍처 구조를 설계하는데 더 집중하게 됩니다.
• 단점
  • 기능 개발이 끝난 후 코드에 대한 파악이 어려울 수 있습니다. (하지만 미래에는 이 과정이 필요 없을 수도 있습니다.)
  • 테스트 코드를 잘 작성하지 않는다면 기능 구현이 제대로 되었는지 확인하는데 시간이 더 소요될 수도 있습니다.

2.3. 2가지 방법을 적절하게 활용

• 개인적으로는 컨텍스트가 많이 낮은 부분을 개선할 때는 페어프로그래밍, 그 외의 케이스는 명령으로 지시하고 추후 확인하는 방법이 좋았던 것 같습니다.

3. Cursor Agent 세팅

3.1. Agent 모드

• Mac 기준으로 CMD + I 눌러서 접근 가능한 모드입니다.
• 이전에는 Composer 라는 기능으로 제공했었고, Agent가 옵션이었으나 이제 Composer 대신 Agent 모드만 남아 있도록 업데이트되었습니다.
• 프롬프트에 명령을 남기면, 코드 수정을 진행하고 lint 에러, 타입 에러가 발생했을 때, 오류를 파악하고 자동으로 수정까지 해주는 모드입니다.
• Agent모드는 터미널에 접속해서 작업자의 컴퓨터 파일을 변경하거나 CLI로 프로그램을 실행할 수도 있습니다.
• 터미널 명령 실행 전에 정말 실행할 것인지 물어보는 화면이 있는데, 거기에서 Yolo 모드를 선택하면, CLI 명령도 물어보지 않고 스스로 진행하게 됩니다.

3.2. LLM 모델

• Claude 3.7 sonnet 모델을 사용했을 때 긴 문맥 이해나, 코드 작성, 디버깅 능력등 전반적으로 좋다고 느꼈습니다.
• 또한, 프로 요금제 기준으로 조금 기다리면 추가 요금 없이 요청을 보낼 수 있다는 점도 장점이라고 생각합니다.
• 토글로 thinking 모드를 지원하고 있어 추론 기능도 제공하고 있으며, 적절한 속도에 뛰어난 결과, 프로 요금제 기준 사용량 제한 없이 계속 프롬프트를 요청할 수 있어서 현재 시점에서는 사용하기 가장 좋은 모델이라고 생각합니다.

3.3. MCP (Model Context Protocol)

• Anthropic에서 만든 LLM용 Context 통신 프로토콜입니다.

• Claude 서비스에서 사용하기 위해서 만들어진 프로토콜이지만 오픈소스로 공개되면서 현재는 Cursor, Windsuff, Cline 처럼 LLM 기반 IDE에서 모두 해당 프로토콜을 지원하고 있습니다.

• LLM을 위한 플러그인이나 익스텐션이라고 생각하면 간단할 것 같습니다.

• 설정은 JSON 파일로 되어 있고, 아래 예시처럼 mcpServers 프로퍼티 안에 추가하는 방식입니다.

  copy{
    "mcpServers": {
      "Framelink Figma MCP": {
        "command": "npx",
        "args": ["-y", "figma-developer-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
      }
    }
  }
  
  

  • ex) FIGMA MCP

• Cursor는 설정 → MCP → add new global MCP Server 버튼 으로 추가할 수 있습니다.

4. 활용 예시

4.1. Console Ninja + MCP + Agent

4.1.1. Console Ninja

• Link : https://console-ninja.com/
• cursor(vscode)에서 react, next.js의 Dev 모드 실행 시 작업 화면에서 console.log 코드 바로 옆에 찍히는 콘솔 내용을 볼 수 있는 익스텐션입니다.
• Agent 모드에서 MCP가 콘솔 내용을 보고 결과를 디버깅하거나, 콘솔 내용을 토대로 다른 작업을 요청할 수 있습니다.

4.1.2. Console Ninja MCP

• 아래와 같이 설정하면 됩니다.

  copy{
    "mcpServers": {
      "console-ninja": {
        "command": "node",
        "args": ["~/.console-ninja/mcp/"]
      }
    }
  }
  

• Console Ninja Repository readme Link : https://github.com/wallabyjs/console-ninja?tab=readme-ov-file#mcp-server

4.1.3. 활용 예시

• 동작 확인을 위한 콘솔을 중간 중간에 추가하도록 프롬프트 작성하여 Agent에 작업 명령
• 작업 종료
• dev 서버 실행
• 콘솔 찍힌 내용이 있는지 cursor에서 console ninja log를 통해 확인
• 수정이 필요한 콘솔이 찍혔다면 Agent에게 console ninja log를 기반으로 다시 수정하라고 명령

4.2. Figma + MCP + Agent

4.2.1. Figma MCP

copy{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

• MCP 동작에 필요한 Figma 토큰 발급받는 방법은 아래 페이지에서 확인 가능합니다.
  • https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens

4.2.2. 활용 예시

• Figma에서 구현하고자 하는 컴포넌트 우클릭

  

• Copy Link to selection을 눌러 컴포넌트 링크를 클립보드에 복사

• Agent에게 요청 시 복사한 링크를 포함해서 요청하면 자동으로 MCP와 통신하여 구현

• (주로 토큰 기반 디자인 시스템을 구현할 때 효과가 큽니다.)

4.3. Notepad + Agent

• Agent의 동작이 많아지거나, 프롬프트를 추가로 요청하는 횟수가 많아질 수록 기존 Context에서 벗어난 결과를 도출하는 경우가 많습니다. (환각 현상)
• 이 현상을 방지하기 위해서 프롬프트는 Notepad로 고정해 놓고, Agent가 중단되었을 때 새로운 Agent를 열어서 Notepad에 작성된 프롬프트를 기반으로 컨텍스트를 유지시키는 방법입니다.

4.3.1. Notepad

• 파일 목록 하단에 Notepad라는 항목이 있고, Create New Notepad를 눌러 추가할 수 있습니다.
• Agent에서 사용할 때는 @notepad 입력 후 Notepad 리스트에서 원하는 항목을 선택하면 됩니다.

4.3.2. 활용 예시

• 특정 디렉토리에 있는 파일들의 Type 오류를 모두 수정하라는 프롬프트를 Notepad에 작성
• Agent를 열어서 해당 Note를 첨부하여 실행
• 중간에 중단되는 경우 Agent화면에서 CMD + N을 눌러서 새로운 Agent를 열고 다시 Notepad 첨부하여 실행

4.4. Prompt Doc File + Agent

• Notepad + Agent의 확장 버전입니다.
• Notepad는 Agent가 접근할 수 없기 때문에 중간에 원치 않은 결과로 인해 프롬프트를 수정해야 할 때 Notepad 기반으로 명령을 하고 있었다면 Notepad는 수동으로 다시 작성해야 합니다.
• 그런 번거로움을 해결하기 위해서 특정 폴더에 프롬프트 파일을 만들고 (예: refactor.md) Agent가 원핮 않은 방향을 도출하고 있을 때 프롬프트 파일을 수정하라고 명령한 후 새로운 Agent를 열어서 다시 코드 작성을 요청할 수 있습니다.

4.4.1. 활용 예시

• Agent에게 특정 위치에 프롬프트 파일 만들라고 요청
• 원하는 프롬프트 초안을 파일에 입력
• 새로운 Agent을 열어서 해당 파일 첨부하여 코드 작성 지시
• Agent 동작 중 수정이 필요한 경우 프롬프트 파일 수정 (Agent에게 요청해도 되고, 직접 수정해도 됩니다.)
• 새로운 Agent 열어서 해당 파일 재첨부 후 코드 작성 다시 지시

4.5. Cursor Rule + Agent

• 프로젝트에서 모든 구성원이 cursor를 사용하고 있다면, cursor rule을 통해서 비슷한 퀄리티의 프롬프트를 요청할 수 있습니다.

4.5.1. Cursor Rule

• 이전에는 .cursorrules 라는 파일을 root에 두면, 질문할 때 해당 프롬프트를 포함하는 방식이었습니다.

  

• 현재는 Project Rule을 추가하는 항목이 설정에 생겼고, 해당 기능에서 Rule을 추가하는 경우 .mdc 파일이 생성됩니다.

• Project Rule은 디렉토리, 파일 확장자를 지정할 수 있기 때문에 특정 조건에서만 Rule을 공통으로 적용할 때 유리합니다.

4.5.2. 활용 예시

• 테스트 코드 룰 생성
  • 설정 → Rules → Project Rule → Add new rule 경로로 들어가 테스트용 규칙을 생성합니다.
  • 테스트 코드 작성 Agent를 실행할 때 @rule 로 시작하여 테스트용 규칙을 찾아 선택합니다.
  • 혹은 Rule 생성 시 경로 및 조건을 추가했다면, Agent에게 그냥 생성을 요청해도 괜찮습니다.

4.6. Agent + PlayWeight (Cypress) + (MCP)

• 프론트엔드의 클라이언트 개발에서 정상적으로 개발된게 맞는지 Agent가 확인할 수 있는 방법이 없습니다.
  • (직접 브라우저를 접근하지 않기 때문에)
• 이때 활용할 수 있는 도구가 E2E 테스트 도구입니다.
• 선호하는 도구를 사용하시면 되고, 프롬프트 작성 시 원하는 타이밍에 테스트 코드 작성 및 마지막에는 테스트 코드를 실행시키라는 명령을 넣으면 cursor 작업 영역에 별다른 에러 메시지가 없더라도, 실제 요구사항에 맞게 개발되지 않은 부분에서 자동으로 다시 구현을 시도합니다.

4.6.1. 활용 예시

• 프로젝트에 PlayWeight 설치
• Package.json에 PlayWeight Test 실행 스크립트 추가
• 프롬프트에 test 실행 명령어 기입, E2E 테스트 도구 이름 입력, 테스트 코드 작성 시점 입력, 요구사항 입력, 마지막에 테스트 코드 실행하고 결과가 실패로 나올 때 다시 작성하는 명령도 추가
• 위처럼 작성하고 실행합니다.

5. 마무리

간단하게 Cursor Agent 모드 소개와 MCP를 활용해서 사용하는 예시를 작성했는데요. 최근에는 AI를 이용해서 대화하는 것만으로 코딩을 한다는 바이브 코딩 이라는 단어가 등장할 정도 개발 환경이 크게 변화하고 있다고 느낍니다. 점점 AI 기반 개발 환경이 개발자 생산성을 높여주는 파트너로 진화하고 있는데요. 한편으로는 이러다가 일자리를 잃지 않을까 하는 걱정도 있지만, 잘 활용하는 방법을 더 연구하여 작업 속도와 코드 품질을 모두 끌어 올려 대체 불가능한 개발자가 되는 것도 좋은 방법이 아닐까 생각이 듭니다. 앞으로도 열심히 활용하면서 더 좋은 방안이 있다면 블로그에 남겨 보겠습니다.