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

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

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

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

여러 가지 도구를 통해 Cursor를 기존 프로젝트 관리 소프트웨어에 통합할 수 있어. 이 가이드에서는 Linear의 MCP 서버와 연동하는 방법을 살펴볼게.

​
설치

또는 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에서 이 프롬프트를 시도해봐: 
이 프로젝트와 관련된 모든 이슈를 나열해 줘
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의 기능을 확장하려면 콘솔 로그와 네트워크 요청에 접근할 수 있는 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는 자동 조종 장치가 아니라 코파일럿일 때 가장 강력해. 네 의사결정을 대체하지 말고 개선하는 데 써.