웹 개발은 Cursor와 Figma나 브라우저 같은 외부 도구 사이에서 빠른 반복과 긴밀한 피드백 루프가 핵심이야. 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"
]
}
}
}
- MCP 설정에서 Linear가 활성화되어 있는지 확인해
- 웹 브라우저가 열리고 Linear 인증을 요청할 거야
MCP의 현재 상태 때문에 설정이 여러 번 필요할 수 있어.
통합이 작동하지 않으면 Cursor 설정에서 서버 “Reload”를 시도해봐.
Linear MCP 서버는 Cursor가 이슈를 읽고 관리할 수 있도록 다양한 도구를 제공해. 모든 도구 목록을 보려면 MCP 설정에서 Linear 서버를 찾아봐. 확인하려면 Chat에서 이 프롬프트를 시도해봐:
통합이 제대로 설정돼 있으면 이슈 목록이 반환돼.
디자인과 목업은 웹 개발의 핵심이야. 공식 Figma용 MCP 서버를 사용하면 Cursor에서 디자인 파일에 바로 접근하고 작업할 수 있어. 시작하려면 Figma Dev Mode MCP Server의 설정 가이드를 따라줘.
아래 버튼을 클릭해서 MCP 서버를 설치할 수 있어.
또는 mcp.json에 수동으로 추가해:
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
ui-components.mdc 파일 예시가 있어:
---
description: 디자인 구현 및 UI 빌드
---
- `/src/components/ui`의 기존 UI 컴포넌트를 재사용해. 이건 우리가 조합해서 만들 수 있는 기본 프리미티브야
- 문제를 해결할 기존 컴포넌트를 찾을 수 없다면, UI 컴포넌트들을 조합해 새 컴포넌트를 만들어
- 누락된 컴포넌트나 디자인이 있으면, 어떻게 진행할지 사람에게 물어봐
Cursor에 네이티브로 더 쉽게 통합할 수 있도록 작업 중이야.
- 웹 개발에선 빠른 피드백 루프가 필수야. Cursor를 Figma, Linear, 브라우저 같은 도구와 함께 써서 속도 유지하고 플로우 끊기지 않게 해.
- MCP 서버로 외부 시스템을 Cursor에 직접 통합하면 컨텍스트 전환이 줄고 작업 실행이 더 좋아져.
- 컴포넌트와 디자인 시스템을 재사용하면 모델이 더 깔끔하고 일관된 코드와 결과물을 내는 데 도움이 돼.
- 명확하게 범위가 정해진 태스크가 더 좋은 결과를 만들어. 프롬프트를 어떻게 쓰고 무엇을 요청할지 의도적으로 정해.
- 출력이 마음에 들지 않으면 다음을 조정해봐:
- Instructions: 규칙과 프롬프트를 활용하고, 예를 들어 MCP 서버처럼 더 많은 컨텍스트에 접근할 수 있게 해줘.
- Systems: 패턴, 추상화, 명료성을 갖추면 모델이 더 잘 이해하고 도우며 더 자율적으로 일하기 쉬워져.
- 콘솔 로그, 네트워크 요청, UI 요소 데이터 같은 런타임 정보를 포함해서 모델 컨텍스트를 확장할 수 있어.
- 모든 걸 자동화할 필요는 없어. 시스템이 너무 복잡해지면 Tab과 Inline Edit로 더 정밀한 수정을 해.
- Cursor는 자동 조종 장치가 아니라 코파일럿일 때 가장 강력해. 네 의사결정을 대체하지 말고 개선하는 데 써.
