사파리 스크린샷

macOS에서 Safari를 사용하여 스크린샷을 캡처하기 위한 Node.js MCP 서버입니다.

특징

• 특정 크기의 창 스크린샷 캡처

• 다양한 확대/축소 레벨 지원

• 페이지 로드를 위한 구성 가능한 대기 시간

• 캡처 후 정리

• 기본 macOS 스크린샷 품질

Related MCP server: Website Screenshot MCP

용법

지엑스피1

요구 사항

• 맥OS

• 원정 여행

• 노드.js >= 14.0.0

• 터미널에 접근성 권한이 필요합니다(시스템 환경 설정 → 보안 및 개인 정보 보호 → 개인 정보 보호 → 접근성)

설치

npm install safari-screenshot

옵션

일반적인 뷰포트 크기

모듈은 다음과 같은 일반적인 뷰포트 크기로 테스트되었습니다.

• 데스크탑: 1920×1080(Full HD)

• 노트북: 1366×768

• 태블릿 가로: 1024×768

• 태블릿 세로: 768×1024

• 모바일 대형: 428×926 (iPhone 12 Pro Max)

• 모바일 매체: 390×844(iPhone 12 Pro)

• 모바일 소형: 375×667(iPhone SE)

작동 원리

1. 지정된 창 크기로 Safari를 엽니다.

2. URL을 로드하고 페이지 로드를 기다립니다.

3. 지정된 경우 확대/축소 수준을 적용합니다.

4. 픽셀 완벽한 결과를 위해 기본 macOS 화면 캡처를 사용합니다.

5. 스크린샷이 성공적으로 캡처되었는지 확인합니다.

6. Safari 창을 정리합니다

권한

이 패키지가 작동하려면 시스템 이벤트 권한이 필요합니다.

1. 시스템 환경설정 > 보안 및 개인 정보 보호 > 개인 정보 보호 > 접근성을 엽니다.

2. 허용된 앱 목록에 터미널(또는 IDE)을 추가합니다.

커서와 함께 사용

커서 설정

1. 오픈 커서

2. 설정으로 이동하여 "MCP 서버 추가"를 선택하세요.

3. 구성 대화 상자에서:

   • 이름: safari-screenshot

   • 유형: command

   • 명령어: npx -y @rogerheykoop/mcp-safari-screenshot

   또는 지역 개발을 위해:

   • 명령어: npx -y /path/to/mcp-safari-screenshot/server.js

예제 명령

Cursor에서 서버에 연결한 후 다음 명령을 사용할 수 있습니다.

Take a screenshot of https://apple.com at desktop size

응답: 1920×1080으로 캡처합니다.

Capture https://apple.com on iPhone 12 Pro

응답: 390×844로 캡처합니다.

Screenshot github.com at 50% zoom

응답: ZoomLevel: 0.5로 캡처합니다.

지원되는 매개변수

MCP 서버는 다음 개념을 이해합니다.

• 기기 이름(예: "iPhone", "iPad", "데스크톱")

• 크기(예: "1024x768")

• 확대/축소 수준(예: "50% 확대", "2배 확대")

• 대기 시간(예: "5초간 기다리세요")

예제 워크플로

1. 반응형 테스트

   Take screenshots of apple.com on iPhone, iPad, and desktop

2. 줌 테스트

   Capture github.com at 75% zoom and 125% zoom

3. 사용자 정의 크기

   Screenshot example.com at 1440x900

팁

• 스크린샷은 기본적으로 screenshots 디렉토리에 저장됩니다.

• 장치 이름은 자동으로 적절한 크기를 설정합니다.

• 서버는 Safari 창 정리를 처리합니다.

• 느리게 로드되는 페이지의 경우 "X초 대기"를 사용하세요.

문제 해결

문제가 발생하는 경우:

1. 터미널에 접근성 권한이 있는지 확인하세요

2. Safari가 개인 브라우징 모드가 아닌지 확인하세요

3. 작업 디렉토리가 쓰기 가능한지 확인하세요

4. 커서 콘솔에서 오류 메시지를 확인하세요.

특허

MIT

로컬 테스트

MCP 구현을 직접 테스트할 수 있습니다.

# Test discovery
echo '{"type":"discover"}' | npx -y ./server.js

# Test screenshot
echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js

예상 응답:

1. Discover는 기능을 반환합니다.

2. 실행은 다음과 같습니다.

   • stderr에 진행 상황 기록

   • 결과 JSON을 stdout으로 반환합니다.

   • 스크린샷을 ./screenshots/에 저장합니다.