웹 개발은 Cursor와 Figma나 브라우저 같은 외부 도구 사이에서 빠른 반복과 촘촘한 피드백 루프가 중요해. Cursor에서는 이 루프를 더 단단하게 만드는 워크플로를 정리해왔어. 작업 범위를 명확히 하고, 컴포넌트를 재사용하고, 디자인 시스템을 활용하면 속도와 일관성을 유지하는 데 도움이 돼. 이 가이드는 웹 개발을 지원하고 피드백 루프를 더 빠르게 만들 수 있도록 Cursor를 설정하는 방법을 다뤄.

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

Chat은 초기 변경 작업을 시작하는 데 최고야. 주요 구성 요소가 자리 잡으면 Inline Edit이랑 Tab으로 전환해서 플로우를 끊지 마. Cursor를 설정하면 서로 다른 도구 전반에서 워크플로를 오케스트레이션할 수 있어. 아래는 가능한 작업의 데모야: Linear, Figma, 그리고 브라우저 도구를 결합해 만든 스네이크 게임. 실제 프로젝트는 보통 더 복잡하지만, 이 예시는 이런 통합 워크플로의 잠재력을 잘 보여줘.

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

다양한 툴을 통해 기존 프로젝트 관리 소프트웨어에 Cursor를 통합할 수 있어. 이 가이드에서는 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: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs
컴포넌트 라이브러리가 커질수록 거기에 맞춰 새로운 규칙을 추가해 줘. 규칙이 너무 많아지면, “사용자 입력을 다룰 때만 적용”처럼 더 구체적인 카테고리로 나누는 걸 고려해 봐.
ui-components.png

​
Cursor에 브라우저 접근 권한 부여하기

Cursor의 기능을 확장하려면 콘솔 로그와 네트워크 요청에 접근할 수 있는 Browser Tools MCP 서버를 설정하면 돼. 설정이 끝나면 콘솔 출력과 네트워크 활동을 모니터링해서 변경 사항을 확인할 수 있어. 이 구성은 구현이 의도와 일치하는지 검증하는 데 도움이 돼. MCP 서버 설정 방법은 여기 안내를 따라줘: https://browsertools.agentdesk.ai/installation
browser.png
Cursor에 네이티브로 더 쉽게 통합할 수 있도록 작업 중이야.

​
핵심 정리

  • 웹 개발에서는 빠른 피드백 루프가 필수야. Cursor를 Figma, Linear, 브라우저 같은 도구들과 함께 써서 빠르게 움직이고 플로우를 유지해.
  • MCP 서버로 외부 시스템을 Cursor에 직접 통합해서 컨텍스트 전환을 줄이고 작업 실행을 개선할 수 있어.
  • 컴포넌트와 디자인 시스템을 재사용하면 모델이 더 깔끔하고 일관된 코드와 결과물을 내는 데 도움이 돼.
  • 범위를 명확히 정의한 태스크가 더 좋은 결과를 만들어. 프롬프트를 어떻게 쓰고 무엇을 요청할지 의도적으로 정해.
  • 좋은 결과가 안 나오면 다음을 조정해봐:
    • Instructions: 규칙과 프롬프트를 활용하고, 예를 들어 MCP 서버로 더 많은 컨텍스트에 접근하게 해줘.
    • Systems: 패턴, 추상화, 명확성을 통해 모델이 더 잘 이해하고 도와주며 더 자율적으로 일할 수 있게 해.
  • 콘솔 로그, 네트워크 요청, UI 요소 데이터 같은 런타임 정보를 포함해서 모델의 컨텍스트를 확장할 수 있어.
  • 모든 걸 자동화할 필요는 없어. 시스템이 너무 복잡해지면 Tab과 Inline Edit로 돌아가서 더 정밀하게 수정해.
  • Cursor는 자동 조종 장치가 아니라 코파일럿으로 쓸 때 가장 강력해. 네 의사결정을 대체하지 말고 개선하는 데 써.