Cursor

Cursor는 VS Code 기반으로 AI 기능을 갖춘 코드 에디터입니다. Cursor이전에 Github Copilot이 먼저 시장에 나왔었고, Copilot이 출시하고 1년가랑 pro를 결제하고 사용해보며, tabnine과 같은 AI 도구들도 사용해봣지만, 당시까지만 해도 AI 에디터들은 단순히 코드를 작성하는데에 지원을 해주는 정도 였죠.

Cursor는 OpenAI가 대부분이였던 시기에 Claude를 탑재하여 여러 파일을 읽고 프로젝트에 대해 이해하며 코드를 작성해주는 기능이 출시했었고, 이건 이전까지 AI 에디터들이 개발자를 코딩을 할때 지원하는 정도에서 개발자는 지시만해도 코드를 작성해주는 수준이 되었습니다.

이후에 MS에서 인수한 WindSurf나 Github Copilot등에도 비슷한 기능들을 제공하고, 더 저렴한 유료 플랜 (Windsurf $15, Copilot Pro $10)을 제공하고는 있지만, 획기적인 기능이 없다면 굳이 이동할 필요는 못느꼇습니다.

3일전 Cursor에서 1.0 버전을 출시하면서 BugBot, BackgroundAgent, Memories, 확장된 MCP 지원 기능들이 출시되면서, 아직까지는 Cursor가 AI 에디터 중에서 시장에서 선도하고 있는 것 같습니다.

cursor 기능

• Role

  기본적으로 다른 AI 처럼 Role을 지정할수 있습니다. 어떤 개발을하는지, 어떤 라이브러리들을 쓰는지, 코딩 컨벤션 등을 지정하여 원래 사용하던 스타일대로 코딩을 할 수 있습니다. Form을 작성하고, 유효성 검사에 대한 코드 작성을 지시할때, Role에 react-hook-form과 zod를 지정해두면 해당라이브러리들을 직접 설치해서 코드를 완성 시켜줍니다. 또 프로젝트별로 따로 Role을 지정을 할수 있어서, 프로젝트의 전체적인 구조들을 추가하여 프로젝트에 대해 이해하고 코드를 작성할수 있습니다.

• 탭 자동완성

  대부분의 AI 에디터들이 기본적으로 지원하는 기능들로, 반복적인 작업을 할때 탭 자동완성을 통해 빠르게 코드를 작성할 수 있습니다.

• 커서 에이전트

  채팅 형식으로 프로젝트전체의 코드를 읽고 흐름일 기억하여, 기존의 코드 베이스 기반으로 작성할 수 있습니다. GPT와 같이 외부 AI 도구의 경우 다른 코드를 모르기 떄문에 이미 만들어둔 유틸 함수들을 사용하지 않고 코드를 구성하다보니 일일이 수정을 거쳐야하는데, Cursor는 프로젝트를 읽으면서 오류가 나면 오류까지 모두 해결된채로 코드를 작성해줍니다.

  

  또 Max Mode라는 기능이 있는데, 토큰 제한이 없이 더 많은 코드를 일고 작성합니다. Max Mode로 코드를 작성했을떄의 경험은 생각보다 놀라웠는데, 특정 기능의 UI, 데이터패칭, 상태관리등을 기존의 파일 구조대로 3~4개의 파일을 생성하면서 한번에 완벽히 작성해주었습니다.

  다만, 기본 프로 요금제의 500회의 빠른 요청을 제공하고, 초과시 추가금이 발생하는데, Max Mode를 사용하면 한번에 10~20회의 요청이 소모되기도 합니다.

MCP

MCP(Model Context Protocol)는 Claude를 만든 Anthropic에서 만든 AI 컨텍스트를 제공하는 방식을 표준화하는 프로토콜입니다. 구글에서 A2A(https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/) 프로젝트를 발표했지만, 현재는 MCP가 표준처럼 자리잡고 있습니다.

이미 다양한 MCP들이 있고, https://smithery.ai/ 와 같은 곳에서 다양한 MCP들을 찾아서 사용할 수 있습니다.

MCP 사용 후기

Figma MCP를 사용하여 디자인을 cursor로 옮기는 작업에 사용해봤습니다.

Cursor에서 MCP를 사용하기는 매우 쉽습니다.

1. 사용할 MCP를 선택하고 clone합니다. (https://github.com/GLips/Figma-Context-MCP)

2. 사용하려는 MCP의 설명서대로 cursor에 MCP.json 파일에 설정을 추가합니다.

3. Figma MCP의 경우 KEY를 발급 받습니다.

4. 클론으로 받은 Figma MCP의 .env 파일에 발급받은 KEY를 추가합니다.

FIGMA_API_KEY= <FIGMA_KEY>

그런 후 다음과 같이 실행합니다.

npx figma-developer-mcp --figma-api-key=<FIGMA_KEY>

5. 이제 Cursor Agent에서 Figma 디자일의 링크를 복사해서 붙여 넣기하면 Cursor가 디자인을 읽고 코드를 작성해줍니다.

생각보다 빠르게 작성했고, 해당 디자인에 레이아웃은 이미 다른 컴포넌트들이 있다는것을 명시하니, 해당 컴포넌트들또한 사용하여 디자인을 만들었습니다.

다만, 디자인 자체가 완성도가 높은 디자인이 아니여서 생기는 문제도 있었습니다. 예를들어 텍스트의 영역이 잡혀있지 않고, 그냥 덩그러니 있었는데 실제 코드를 만들때 이러한 점들때문에 디자인과 다르게 제작되었습니다.

만약 디자인이 완성도가 높을 경우에는 단순 UI 작업의 경우에는 완전히 대체가 가능한 수준이 된거 같습니다. 노코드툴로 디자이너가 단순 UI 개발자를 대체한다고 했을때는, 제한사항들이 많았기에 불가능하다고 생각했지만 디자이너는 그냥 디자인툴을 사용하고 개발자는 개발자툴을 사용하면서 MCP를 통해서 이 사이의 모든 작업을 해결하면서 이제는 UI를 만드는 작업의 경우 대체가 가능해질 수준은 된거 같습니다.