Safari MCP 서버 — 웹 개발자를 위한 브라우저-에이전트 직접 연결

> 핵심 한 줄: 코딩 에이전트가 Safari 창을 직접 보고, 클릭하고, 스크린샷을 찍고, 콘솔을 확인할 수 있게 됐다. Safari 18부터 MCP로 제공되며 로컬 머신에서만 실행된다.

원문: webkit.org — Introducing the Safari MCP Server for Web Developers · 긱뉴스 #31131

• --

들어가며 — 코딩 에이전트의 사각지대

기존 LLM 코딩 에이전트의 가장 큰 한계는 "코드는 짤 줄 알지만 브라우저에서 어떻게 보이는지 모른다"는 점이다. Claude Code, Cursor, Copilot 같은 도구들은 코드를 텍스트로 받아 분석하지만, 실제 렌더링된 DOM, 네트워크 요청, 콘솔 에러, 스크린샷 같은 런타임 결과에는 어차피 접근 못 한다. 그래서 개발자가 직접 화면 확인 → 에이전트에게 설명 → 코드 수정 → 다시 화면 확인이라는 반복 작업이 끊이지 않았다.

Safari 18이 도입한 Safari MCP 서버는 이 간극을 메운다. Model Context Protocol(MCP)을 통해 코딩 에이전트가 실제 Safari 창에 연결되어, 사용자가 보는 그대로의 브라우저 상태를 직접 들여다볼 수 있게 한다.

• --

Safari MCP 서버가 제공하는 도구

| 도구 | 기능 | 활용 사례 |

|---|---|---|

| 탭 제어 | 열려 있는 탭 목록 조회, 활성 탭 전환 | 멀티탭 회귀 테스트 |

| URL 이동 | 특정 URL로 페이지 열기 | 페이지별 검증 자동화 |

| JavaScript 실행 | 페이지 컨텍스트에서 JS 평가 | 동적 콘텐츠 검사 |

| 네트워크 요청 조회 | 모든 요청/응답 헤더·본문 접근 | API 호출 패턴 분석 |

| 콘솔 출력 캡처 | console.log/warn/error 메시지 수집 | 런타임 에러 진단 |

| DOM 상호작용 | 클릭, 키 입력, 스크롤, 폼 입력 | 사용자 흐름 시뮬레이션 |

| 스크린샷 | 페이지/요소별 PNG 캡처 | 시각 회귀 테스트 |

| 콘텐츠 추출 | visible text, HTML, attributes | 어설션(assertion) 검증 |

| 뷰포트·미디어 에뮬레이션 | 모바일/태블릿/리듀스 모션 등 | 반응형 + 접근성 검증 |

이 모든 도구가 로컬 머신에서만 동작한다. 자체 네트워크 호출을 하지 않으며, 캡처된 페이지 데이터는 사용자가 돌리고 있는 에이전트로 직접 전달된다. 즉 클라우드로 새지 않는다.

• --

어떤 작업에 강력한가

1. Safari 전용 회귀 테스트

Safari는 Chrome/Firefox와 다른 렌더링 경로를 갖고 있다. 모던 CSS 그리드, View Transitions, :has() 셀렉터, Container Queries 같은 기능에서 미세한 차이가 잦다. MCP 서버를 통해 에이전트가 Safari에서 직접 페이지를 열어 비교 검증하면, "Safari에서 깨진다" 같은 모호한 버그 리포트를 줄일 수 있다.

2. 체크아웃 / 폼 워크플로 검증

5단계 결제 흐름의 3번째 폼이 Safari에서만 깨지는 케이스를 떠올려 보라. 이전엔 개발자가 직접 Safari에서 테스트 → 에이전트에게 "세 번째 폼의 카드 번호 필드가 줄바꿈 안 돼"를 텍스트로 설명해야 했다. 이제는 에이전트가 Safari를 직접 띄워 클릭하면서 검증한다.

3. 접근성 / 성능 audit

리듀스 모션 환경에서 애니메이션 제거 확인, 키보드 only 네비게이션 흐름, voice-over 호환성 같은 axe-core/Lighthouse로 잡기 어려운 Safari 고유 시나리오 검증에 유리하다.

4. 동적 콘텐츠 디버깅

React/Vue/Svelte 같은 SPA에서 hydration mismatch나 잘못된 키 경고를 진단할 때, 에이전트가 직접 페이지를 탐색하며 window.__STATE__ 같은 글로벌 변수를 평가하고 콘솔 로그를 수집한다.

• --

설치와 사용 — 7단계

1단계: Safari 18 이상 확인

# macOS Sequoia 15.0 이상
softwareupdate --history | grep "Safari"
# 또는 시스템 설정 → 일반 → 업데이트에서 Safari 버전 확인

Safari 18 이상이면 MCP 서버 기능이 이미 포함되어 있다. 별도 설치는 필요 없다.

2단계: Safari 개발 메뉴 활성화

defaults write com.apple.Safari IncludeDevelopMenu -bool true
open -a Safari

이후 Safari 메뉴 막대에 개발자용(Develop) 메뉴가 나타난다.

3단계: Safari 환경설정 → "개발자 도구 메뉴에서 페이지 검사 허용" 활성화

고급(Advanced) 탭에서 이 옵션이 켜져 있어야 MCP가 DOM에 접근할 수 있다.

4단계: MCP 서버 활성화

Safari 환경설정 → 고급 → "Web Extensions에서 MCP 서버 활성화" 옵션을 켠다. 이후 Safari를 재시작.

5단계: 코딩 에이전트 측 MCP 클라이언트 설정

Claude Code의 경우 ~/.claude/mcp_servers.json에 다음을 추가한다.

{
  "mcpServers": {
    "safari": {
      "command": "safari-mcp-server",
      "args": ["--port", "8765"]
    }
  }
}

6단계: 에이전트에게 MCP 도구 권한 부여

Claude Code의 경우 .claude/permissions.json에서 safari.* 네임스페이스를 허용한다. 그렇지 않으면 매번 확인 다이얼로그가 뜬다.

7단계: 첫 검증 실행

에이전트에게 다음과 같이 자연어로 요청한다.

> "localhost:3000 페이지를 Safari로 열고, /checkout 페이지까지 클릭 흐름으로 이동한 다음 스크린샷 2장을 저장해 줘"

에이전트는 Safari MCP 도구를 조합해 이 작업을 수행한다. 결과는 사용자가 보고 있는 화면 그대로다.

• --

안전과 신뢰 — 캡처된 데이터는 어디로 가나

Safari MCP 서버는 로컬 머신에서만 실행된다. 자체 외부 네트워크 호출을 하지 않으므로 페이지 콘텐츠가 무작정 Apple 서버로 전송되지 않는다. 단, 캡처된 데이터는 사용자가 돌리고 있는 에이전트 컨텍스트로 직접 전달된다. 즉 에이전트가 LLM API를 호출할 때 이 데이터가 그 호출에 포함될 수 있다.

따라서 다음과 같은 가이드가 권장된다.

| 원칙 | 설명 |

|---|---|

| 신뢰할 수 있는 에이전트만 사용 | 캡처 데이터가 LLM API 호출에 노출 |

| 민감 페이지 검증은 격리된 프로필에서 | 결제·인증 페이지는 별도 Safari 프로필로 |

| 에이전트 권한 최소화 | MCP 도구 전체가 아닌 필요한 것만 허용 |

| 스크린샷 자동 마스킹 | 카드 번호·SSN 같은 필드는 자동 blur |

Apple은 WebKit 블로그에서 "사용자가 신뢰하는 에이전트에 캡처 데이터가 노출된다"고 명시했다. 이건 단점이 아니라 의도된 보안 모델이다 — 클라우드로 자동 유출되는 대신 명시적 사용자 제어를 받는다.

• --

한계와 주의

• macOS만 지원 — Safari MCP 서버는 macOS Sequoia 이후의 Safari 18에 종속. Linux/Windows에서는 다른 브라우저 자동화 도구(Playwright, Puppeteer) 필요.
• Chrome DevTools Protocol 미지원 — CDP 전용 도구는 Safari MCP로는 연결 못 함. Playwright를 경유해야.
• 헤드리스 모드 미지원 — 실제 Safari 창이 떠 있어야 함. CI에서 headless 검증은 별도.
• 싱글 프로파일 한정 — 한 번에 하나의 Safari 프로파일에서만 동작.

• --

다른 도구와의 비교

| | Safari MCP | Playwright | Puppeteer |

|---|---|---|---|

| 브라우저 | Safari (macOS) | Chromium/Firefox/WebKit | Chromium |

| 프로토콜 | MCP (JSON-RPC) | WebDriver bidi | CDP |

| 실행 환경 | 로컬 Safari 창 | 헤드리스/headed 모두 | 헤드리스/headed |

| 에이전트 통합 | 네이티브 MCP | MCP 래퍼 필요 | MCP 래퍼 필요 |

| 프로필 격리 | Safari 표준 프로필 | 임의 | 임의 |

| CI 적합성 | 낮음 | 높음 | 높음 |

Safari MCP의 핵심 가치는 에이전트 통합이다. Playwright/Puppeteer는 강력하지만 MCP 클라이언트가 따로 필요하고, Safari 고유 동작 검증에는 결국 Safari를 띄워야 한다. Safari MCP는 그 통합 비용을 0으로 만든다.

• --

실전 적용 — 매일 쓸 수 있는 4가지 패턴

1. PR 올리기 전 Safari 회귀 검증

> "이 PR의 변경 페이지 5개를 Safari로 열어 1280px 뷰포트에서 스크린샷 저장하고, aria-label 깨진 요소 있으면 알려 줘"

2. 디자인 토큰 변경 영향 분석

> "primary color 변경 후 헤더/버튼/링크가 의도대로 바뀌었는지 safari:mobile 뷰포트에서 스크린샷"

3. CMS 폼 워크플로 회귀

> "게시글 작성 → 임시저장 → 재개 → 발행 흐름을 Safari에서 사용자처럼 클릭하며 검증"

4. 접근성 회귀

> "키보드 only로 메인 네비게이션을 전수遍历하되 focus ring가 모든 토글에 보이는지 확인"

이런 패턴은 로컬 Safari 창에서 30초짜리 검증으로 끝나며, 에이전트가 자동으로 결과를 리포트한다.

• --

전망 — MCP가 표준 브라우저 인터페이스가 되는 시점

Safari MCP는 Apple의 Open Web Initiative 흐름에서 가장 주목할 만한 변화다. Chrome은 DevTools Protocol을, Firefox는 WebDriver bidi를 외부에 노출했지만 Safari는 처음부터 에이전트-친화적인 MCP를 채택했다. 이는 "에이전트가 브라우저를 제어하는 시대"를 Apple이 먼저 인정한 셈이다.

2026년 안으로 GitHub Copilot Workspace, Cursor, Replit 같은 주요 코딩 에이전트가 모두 MCP 네이티브 클라이언트를 지원할 가능성이 높다. Safari MCP는 그 첫 사례이며, 브라우저는 더 이상 사용자가 직접 클릭하는 도구가 아니라 에이전트의 작업 환경이 된다.

• --

요약

• Safari MCP 서버는 Safari 18부터 MCP를 통해 코딩 에이전트가 Safari 창에 직접 연결한다.
• 9개 도구(탭/URL/JS/네트워크/콘솔/DOM/스크린샷/콘텐츠 추출/뷰포트)를 제공한다.
• 로컬 머신에서만 실행되며 자체 외부 호출이 없다. 캡처된 데이터는 사용자 에이전트로 직접 전달.
• Safari 고유 회귀, 체크아웃 워크플로, 접근성 검증에 핵심 강점이 있다.
• Playwright/Puppeteer와 비교하면 에이전트 통합 비용 0이 차별점. 헤드리스/CI에는 부적합.
• 실전 적용 4가지 패턴: PR 전 회귀, 디자인 토큰 검증, CMS 폼 검증, 접근성 회귀.
• 브라우저 = 사용자의 도구에서 브라우저 = 에이전트의 작업 환경으로 패러다임 전환이 시작됐다.

> Safari MCP는 단순한 기능 추가가 아니라 "에이전트 우선 브라우저"라는 새로운 카테고리의 첫 출시다. macOS 개발자라면 지금 켜두고 익숙해지는 게 유리하다.

• --

본문은 2026-07-05 긱뉴스 #31131 "웹 개발자를 위한 Safari MCP 서버" 글의 자동 정리본입니다.

원문: webkit.org ·

참고: 긱뉴스 #31131