AI Sparkup

최신 AI 쉽게 깊게 따라잡기⚡

Safari MCP – AI 에이전트가 Safari 렌더링을 직접 검사하는 WebKit MCP 서버

Safari MCP는 Safari Technology Preview 247에 도입된 WebKit 공식 Model Context Protocol 서버다. Claude Code, Codex, Cursor 같은 MCP 호환 에이전트가 Safari 브라우저 창에 연결해 DOM, 콘솔 로그, 네트워크 요청, 스크린샷, 페이지 상태를 직접 확인할 수 있게 한다.

해결하는 문제

AI 코딩 에이전트는 코드만 보고 웹 UI 버그를 추정하는 경우가 많다. 실제 Safari 렌더링, CSS 계산 결과, 접근성 상태, 콘솔 오류, 네트워크 실패를 보지 못하면 사용자가 스크린샷과 설명을 반복해서 전달해야 한다. Safari MCP는 에이전트가 브라우저 안의 실제 상태를 읽고 검증하게 만들어 이 왕복을 줄인다.

제공 도구

도구 범주예시
탭 제어create_tab, list_tabs, switch_tab, close_tab
페이지 탐색navigate_to_url, wait_for_navigation, page_info
디버깅 정보browser_console_messages, list_network_requests, get_network_request
페이지 검사get_page_content, evaluate_javascript, screenshot
상호작용page_interactions, browser_dialogs
렌더링 조건set_viewport_size, set_emulated_media

설치 방식

Safari Technology Preview를 설치하고 개발자 기능과 원격 자동화, external agents를 활성화해야 한다. Codex에서는 다음처럼 등록한다.

codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

Claude Code에서는 같은 실행 파일을 claude mcp add로 등록할 수 있다. 다른 MCP 클라이언트는 mcp.json 또는 config.json에 command와 args를 직접 넣는다.

사용 대상 및 케이스

  • 프론트엔드 개발자: Safari 전용 레이아웃·CSS·JavaScript 문제를 에이전트가 직접 재현하게 할 때
  • QA·호환성 담당자: Chrome만 보고 놓치기 쉬운 Safari 호환성 문제를 자동 점검할 때
  • 접근성 담당자: 라벨 누락, ARIA 오류, 대비 문제를 브라우저 상태 기반으로 확인할 때
  • 성능 담당자: 네비게이션 타이밍과 리소스 로드 지연을 에이전트가 수집하게 할 때

보안과 데이터 흐름

Safari MCP 서버는 로컬 머신에서 실행되고 자체 네트워크 호출을 하지 않는다. 다만 페이지 콘텐츠, 스크린샷, 콘솔 로그는 사용 중인 에이전트와 모델로 전달될 수 있다. 로그인된 서비스나 내부 앱을 검사할 때는 에이전트 제공자와 데이터 정책을 먼저 확인해야 한다.

관련 문서

  • mcp — 에이전트와 외부 시스템을 연결하는 표준 프로토콜
  • chrome-devtools-mcp — Chrome 브라우저 제어·디버깅 MCP 서버
  • playwright-mcp — 접근성 스냅샷 기반 브라우저 자동화 MCP 서버

참고 자료



AI Sparkup 구독하기

최신 게시물 요약과 더 심층적인 정보를 이메일로 받아 보세요! (무료)