Cursor의 AI는 프로젝트의 모든 파일을 읽을 수 있지만, 라이브 웹 페이지를 볼 수는 없습니다. 레이아웃 버그나 OG 이미지에 대해 질문하면 AI는 눈을 가린 채 작업하는 것과 같습니다. Model Context Protocol (MCP)가 이 문제를 해결합니다. 스크린샷 서버를 연결하면 Cursor는 스스로 호출하여 어떤 URL이든 캡처하고 그 결과에 대해 추론할 수 있는 도구를 갖게 됩니다.

이 가이드는 Rendex를 사용하여 약 5분 만에 Cursor MCP 스크린샷 도구를 설정하는 방법을 안내합니다. URL, 원시 HTML(raw HTML), 또는 Markdown을 PNG, JPEG, WebP, 또는 PDF로 변환하며, 전체 페이지 캡처 및 다크 모드와 같은 옵션을 제공하는 rendex_screenshot이라는 하나의 도구를 얻게 됩니다.

사전 요구 사항 (Prerequisites)

시작하기 전에 세 가지가 필요합니다:

• Cursor 설치됨 (MCP를 지원하는 최신 버전).
• 머신에 Node.js 설치됨 (Cursor가 npx로 서버를 실행할 수 있도록 함).
• Rendex API 키. 무료 티어는 신용카드 없이도 한 달에 100회의 렌더링을 제공하며, 이는 에디터 사용 용도로 충분합니다.

1단계: Rendex API 키 가져오기

rendex.dev/login에서 로그인하고, 대시보드를 열어 키를 복사하세요. 키는 rdx_ 뒤에 짧은 문자열이 붙은 형태입니다. 버전 관리 시스템(version control)에 포함되지 않도록 주의하세요. 정확한 키 형식과 속도 제한(rate limits)을 알고 싶다면 quickstart에서 확인할 수 있습니다.

2단계: .cursor/mcp.json에 Rendex 추가하기

Cursor는 프로젝트 루트의 .cursor/mcp.json에서 MCP 서버를 읽거나, 전역 설정을 위해 Settings의 MCP 메뉴에서 읽습니다. 파일을 생성하고 Rendex 서버를 추가하세요. npx 명령어가 게시된 패키지를 다운로드하고 실행하므로, 수동으로 설치할 것은 없습니다.

{
  "mcpServers": {
    "rendex": {
...

.cursor/mcp.json을 .gitignore에 추가하세요. 이 파일에는 API 키가 포함되어 있으므로 커밋에 절대 포함되어서는 안 됩니다.

3단계: 또는 호스팅된 서버 연결하기 (설치 불필요)

로컬 프로세스를 건너뛰고 싶다면, 대신 호스팅된 서버(hosted server)를 Cursor로 지정하세요. 이 서버는 OAuth 2.1을 통해 전면에 배치되어 있으므로, 일회용 이메일 코드로 로그인하며 설정 파일에 키를 붙여넣을 필요가 없습니다. 각 호출자는 자신의 요금제(plan)와 크레딧 풀(credit pool)에 따라 비용이 청구됩니다.

{
  "mcpServers": {
    "rendex": {
...

정적 키(static key)를 선호하는 클라이언트는 여전히 Authorization 헤더를 통해 키를 전달할 수 있습니다. MCP 문서에서 OAuth 흐름과 헤더 형식을 모두 확인할 수 있습니다.

4단계: Cursor 재시작 및 도구 확인

설정(config)을 다시 불러올 수 있도록 Cursor를 완전히 종료한 후 다시 여세요. MCP 설정을 열고 rendex 서버가 녹색 상태로 표시되는지, 그리고 그 아래에 rendex_screenshot이 나열되어 있는지 확인하세요. 서버가 빨간색으로 표시된다면, 거의 항상 JSON 파일이 원인입니다. 아래의 문제 해결(troubleshooting) 섹션을 참조하세요.

5단계: Cursor에 페이지 캡처 요청하기

이제 일상적인 언어로 Cursor에 프롬프트를 입력하면 Cursor가 스스로 도구를 호출합니다. 다음과 같이 시도해 보세요:

https://rendex.dev/pricing 페이지를 다크 모드(dark mode)로, 전체 페이지(full page)로 스크린샷 찍어주고, 요금제 가격이 잘 읽히는지 알려줘.

Cursor는 사용자의 요청에서 파싱한 인자(arguments)와 함께 rendex_screenshot을 호출하고, 이미지를 받아와 이를 분석(reasoning)합니다. 이 도구는 API와 동일한 옵션을 허용하므로 구체적으로 지정할 수 있습니다:

{
  "url": "https://rendex.dev/pricing",
  "format": "png",
...

알아두면 유용한 파라미터(parameters): format은 png, jpeg, webp, pdf 사이를 전환합니다; fullPage는 전체 스크롤 높이를 캡처합니다; selector는 요금제 카드와 같은 단일 요소로 크롭(crop)합니다; blockAds는 촬영 전 광고와 쿠키 관련 노이즈를 제거합니다.

문제 해결 (Troubleshooting)

서버가 빨간색으로 표시되거나 도구가 나타나지 않는 경우. JSON을 검증하세요. 마지막에 붙은 쉼표(trailing comma)나 누락된 중괄호는 Cursor가 파일을 파싱하는 것을 방해합니다. JSON 린터(linter)에 붙여넣어 오류를 수정한 후 Cursor를 재시작하세요.

모든 호출에서 인증 오류(auth error)가 발생하는 경우. 키가 잘못되었거나 누락되었습니다. env 블록에 RENDEX_API_KEY가 설정되어 있는지, 그리고 대시보드에서 rdx_로 시작하는 전체 키를 복사했는지 확인하세요.

npx가 패키지를 찾을 수 없습니다. Node.js가 PATH에 설정되어 있는지 확인하고, 터미널에서 npx -y @copperline/rendex-mcp를 한 번 실행하여 다운로드를 준비한 다음 Cursor를 다시 여세요.

다른 에디터에서도 동일한 설정을 원하시나요? Claude Desktop, Claude Code, 그리고 Windsurf의 설정은 거의 동일합니다. MCP 렌더링 가이드에서 각 클라이언트와 전체 도구 세트에 대해 자세히 안내합니다.

다음 단계

이것으로 모든 설정이 완료되었습니다. 이제 Cursor는 작업하는 동안 라이브 페이지를 캡처할 수 있으며, 이는 에디터를 떠나지 않고도 배포 상태를 검토하거나, OG 이미지 (Open Graph image)를 확인하거나, 참조용 스크린샷을 찍을 때 매우 유용합니다. Cursor 외부에서 먼저 동일한 엔진을 사용해 보고 싶다면, 브라우저 기반의 스크린샷 도구를 통해 코드 없이 캡처를 실행할 수 있습니다.

Cursor에 연결할 준비가 되었다면, 무료 API 키를 발급받아 설정 파일에 넣으세요. 한 달에 100회의 렌더링(render)이면 하루 종일 이 도구를 활용하기에 충분합니다.