웹 개발은 빠른 반복과 Cursor와 Figma나 브라우저 같은 외부 도구 간의 긴밀한 피드백 루프를 포함합니다. Cursor에서는 이러한 루프를 단축하는 워크플로우를 발견했습니다. 명확한 작업 범위 설정, 컴포넌트 재사용, 그리고 디자인 시스템 활용은 작업을 빠르고 일관성 있게 유지하는 데 도움이 됩니다. 이 가이드는 웹 개발을 지원하고 피드백 루프를 단축하기 위한 Cursor 설정 방법을 다룹니다.

​
Cursor에서 오케스트레이션 시작하기

Chat은 변경 사항을 부트스트래핑하는 데 훌륭합니다. 주요 구성 요소가 준비되면 Inline Edit과 Tab으로 전환하여 플로우 상태를 유지할 수 있습니다. Cursor를 설정한 후에는 다양한 도구 간의 워크플로우를 오케스트레이션할 수 있습니다. 아래는 가능한 것들의 데모입니다: Linear, Figma, 브라우저 도구를 결합하여 만든 스네이크 게임입니다. 실제 프로젝트는 일반적으로 더 복잡하지만, 이 예제는 이러한 통합 워크플로우의 잠재력을 보여줍니다.

​
프로젝트 관리 도구에 연결하기

다양한 도구를 사용하여 Cursor를 기존 프로젝트 관리 소프트웨어에 통합할 수 있습니다. 이 가이드에서는 Linear의 MCP 서버를 사용하여 Linear를 통합하는 방법을 살펴보겠습니다.

​
설치

또는 mcp.json에 Linear MCP 서버를 수동으로 추가하세요: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
그런 다음:
  1. MCP 설정에서 Linear를 활성화했는지 확인하세요
  2. 웹 브라우저가 열리고 Linear로 인증하라는 메시지가 표시됩니다
    현재 MCP의 상태로 인해 설정에 여러 번의 시도가 필요할 수 있습니다. 통합이 작동하지 않는 경우 Cursor 설정에서 서버를 “Reload”해 보세요.

​
Cursor에서 Linear 사용하기

Linear MCP 서버는 Cursor가 이슈를 읽고 관리하는 데 사용할 수 있는 다양한 도구를 제공합니다. MCP 설정으로 이동하여 Linear 서버를 찾아 모든 도구 목록을 확인하세요. 확인하려면 Chat에서 다음 프롬프트를 시도해 보세요: 
list all issues related to this project
linear.png
통합이 올바르게 설정되었다면 이슈 목록이 반환되어야 합니다.

​
Figma 디자인 가져오기

디자인과 목업은 웹 개발의 핵심입니다. Figma용 공식 MCP 서버를 사용하면 Cursor에서 디자인 파일에 직접 액세스하고 작업할 수 있습니다. 시작하려면 Figma Dev Mode MCP Server의 설정 지침을 따르세요.

​
설치

아래 버튼을 클릭하여 MCP 서버를 설치할 수 있습니다. 또는 mcp.json에 수동으로 추가하세요: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
사용법

서버는 프롬프트에서 사용할 수 있는 여러 도구를 제공합니다. 예를 들어 Figma에서 현재 선택된 항목의 디자인을 요청해 보세요. 자세한 내용은 문서를 참조하세요.
figma.png

​
코드 스캐폴딩을 일관성 있게 유지하세요

기존 코드, 디자인 시스템 또는 재사용하고 싶은 확립된 규칙들이 있을 것입니다. 모델과 작업할 때는 드롭다운 메뉴나 기타 공통 컴포넌트와 같이 코드베이스에 이미 있는 패턴을 참조하는 것이 도움이 됩니다. 대규모 웹 기반 코드베이스에서 작업하면서, 특히 React와 JSX에서 선언적 코드가 특히 잘 작동한다는 것을 발견했습니다. 디자인 시스템이 있다면, 이에 대한 규칙을 제공하여 에이전트가 이를 발견할 수 있도록 도울 수 있습니다. 다음은 가능한 한 컴포넌트 재사용을 강제하려는 ui-components.mdc 파일입니다:
components.mdc
---
description: 디자인 구현 및 UI 구축
---
- `/src/components/ui`에서 기존 UI 컴포넌트를 재사용하세요. 이것들은 우리가 구축할 수 있는 기본 요소들입니다
- 문제를 해결하는 기존 컴포넌트를 찾을 수 없다면 ui 컴포넌트들을 조합하여 새로운 컴포넌트를 만드세요
- 누락된 컴포넌트와 디자인이 있을 때는 어떻게 진행하고 싶은지 사용자에게 물어보세요
컴포넌트 라이브러리가 성장함에 따라 새로운 규칙을 추가하세요. 규칙이 너무 많아지면 “사용자 입력 작업 시에만 적용”과 같이 더 구체적인 카테고리로 분할하는 것을 고려하세요.
ui-components.png

​
Cursor에 브라우저 액세스 권한 부여

Cursor의 기능을 확장하려면 콘솔 로그와 네트워크 요청에 대한 액세스를 제공하는 브라우저 도구 MCP 서버를 설정할 수 있습니다. 구성이 완료되면 콘솔 출력과 네트워크 활동을 모니터링하여 변경 사항을 확인할 수 있습니다. 이 설정은 구현이 의도와 일치하는지 확인하는 데 도움이 됩니다. MCP 서버를 설정하려면 다음 지침을 따르세요: https://browsertools.agentdesk.ai/installation
browser.png
Cursor에서 이를 더 쉽게 네이티브로 통합할 수 있도록 작업하고 있습니다.

​
핵심 요점

  • 긴밀한 피드백 루프는 웹 개발에서 필수적입니다. Figma, Linear, 브라우저와 같은 도구들과 함께 Cursor를 사용하여 빠르게 움직이고 플로우를 유지하세요.
  • MCP 서버를 통해 외부 시스템을 Cursor에 직접 통합하여 컨텍스트 전환을 줄이고 작업 실행을 개선할 수 있습니다.
  • 컴포넌트와 디자인 시스템을 재사용하면 모델이 더 깔끔하고 일관된 코드와 결과물을 생성하는 데 도움이 됩니다.
  • 명확하고 범위가 정해진 작업이 더 나은 결과를 가져옵니다. 프롬프트를 작성하고 요청하는 내용에 대해 의도적으로 접근하세요.
  • 좋은 결과를 얻지 못하고 있다면 다음을 조정해 보세요:
    • 지시사항: 규칙, 프롬프트를 사용하고 MCP 서버 등을 통해 더 많은 컨텍스트에 대한 접근을 제공하세요.
    • 시스템: 패턴, 추상화, 명확성은 모델이 이해하고 도움을 주며 더 자율적으로 작업할 수 있게 만듭니다.
  • 콘솔 로그, 네트워크 요청, UI 요소 데이터와 같은 런타임 정보를 포함하여 모델의 컨텍스트를 확장할 수 있습니다.
  • 모든 것을 자동화할 필요는 없습니다. 시스템이 너무 복잡해지면 Tab과 Inline Edit을 사용한 더 정밀한 편집으로 돌아가세요.
  • Cursor는 자동 조종이 아닌 부조종사 역할을 할 때 가장 강력합니다. 자신의 의사결정을 대체하는 것이 아니라 개선하는 데 사용하세요.