이 글은 WebKit 공식 글을 바탕으로 핵심 내용과 설정 방법을 한국어로 다시 구성한 해설이다.
원문 전체를 옮긴 번역문은 아니다.
Safari MCP 서버란?
Safari MCP 서버는 Safari와 MCP(Model Context Protocol) 호환 클라이언트를 연결하는 로컬 서버다. 코드를 작성하는 에이전트가 브라우저 바깥에서 추측만 하는 것이 아니라, Safari 창에서 페이지가 실제로 어떻게 렌더링되고 작동하는지 확인할 수 있게 한다.
특정 에이전트에 종속된 기능은 아니다. MCP를 지원하는 클라이언트라면 연결할 수 있으며, 연결된 에이전트는 Safari 탭의 페이지 콘텐츠와 상태를 조사해 더 많은 디버깅 과정을 스스로 수행할 수 있다.
기존에는 브라우저에서 문제를 발견한 뒤 콘솔과 스타일 패널을 확인하고, 코드 편집기로 돌아가 수정한 다음 다시 브라우저에서 검증하는 과정을 반복해야 했다. AI 에이전트를 사용하더라도 화면을 캡처하고 증상을 설명한 뒤 결과를 다시 확인하는 과정이 필요했다. Safari MCP 서버의 핵심은 이 반복 과정에서 에이전트가 브라우저 상태를 직접 조사하게 만드는 데 있다.
어떤 작업에 활용할 수 있나?
Safari에서 렌더링 결과 확인
에이전트가 작성하거나 수정한 코드가 Safari에서 실제로 어떻게 보이는지 직접 확인할 수 있다. 코드만 보고 렌더링 결과를 추정하는 것보다 브라우저의 DOM과 화면 상태를 함께 확인할 수 있다는 점이 중요하다.
Safari 호환성 점검
한 브라우저에서만 테스트하면 다른 브라우저에서 발생하는 문제를 놓칠 수 있다. 에이전트는 Safari에서 사이트를 열고 계산된 스타일(computed style)과 레이아웃을 조사한 뒤 예상 결과와 비교할 수 있다. 개발자가 브라우저와 터미널 사이를 계속 오가지 않아도 Safari 전용 문제를 찾는 데 필요한 정보를 수집할 수 있다.
성능 분석
페이지 안에서 JavaScript를 실행해 Navigation Timing이나 리소스 로딩 시간 같은 성능 정보를 확인할 수 있다. 이를 통해 느린 구간을 찾고, 어떤 부분을 우선 수정해야 하는지 판단하는 데 활용할 수 있다.
접근성 점검
레이블 누락, 잘못된 ARIA 속성, 낮은 색상 대비처럼 자주 발생하는 접근성 문제를 조사할 수 있다. 자동 점검만으로 모든 접근성 문제를 판정할 수 있는 것은 아니지만, 사용자에게 영향을 주는 기본적인 문제를 일찍 발견하는 데 도움이 된다.
사용자 상태와 상호작용 검증
폼의 현재 상태를 읽고, CSS 선택자로 요소를 찾고, 특정 상호작용이 정상적으로 수행됐는지 확인할 수 있다. 체크아웃 흐름의 여러 단계처럼 상태가 바뀌는 화면도 조사할 수 있어 반복적인 수동 확인을 줄이는 데 활용할 수 있다.
제공되는 도구
Safari MCP 서버는 탭 관리, 페이지 조사, 네트워크·콘솔 확인, 화면 캡처, DOM 상호작용을 위한 도구를 제공한다.
| 도구 | 역할 |
|---|---|
browser_console_messages |
현재 탭 또는 지정한 탭에 버퍼링된 콘솔 로그를 반환한다. |
browser_dialogs |
브라우저 대화상자를 나열하고 확인·취소하거나 JavaScript prompt에 텍스트를 입력한다. |
close_tab |
탭 핸들을 사용해 브라우저 탭을 닫는다. |
create_tab |
새 탭을 만들고 필요하면 URL을 함께 연다. |
evaluate_javascript |
페이지 안에서 JavaScript를 실행하고 결과를 반환한다. |
get_network_request |
하나의 네트워크 요청에 대한 헤더, 본문, 타이밍 등 상세 정보를 가져온다. |
get_page_content |
페이지 콘텐츠를 Markdown, HTML, JSON 등의 형식으로 추출한다. |
list_network_requests |
현재 탭에서 기록된 요청의 URL, 메서드, 상태, 타이밍 요약을 나열한다. |
list_tabs |
열려 있는 탭의 핸들과 URL을 나열한다. |
navigate_to_url |
지정한 URL로 이동하고 로드된 페이지 콘텐츠를 반환한다. |
page_info |
현재 페이지의 URL, 제목, 로딩 상태를 확인한다. |
page_interactions |
클릭, 입력, 스크롤, 호버, 키 입력 등의 DOM 상호작용을 순서대로 수행한다. |
screenshot |
현재 페이지를 PNG 이미지로 캡처한다. |
set_emulated_media |
인쇄용처럼 특정 CSS 미디어 유형을 에뮬레이션한다. |
set_viewport_size |
브라우저 뷰포트를 CSS 픽셀 단위로 설정한다. |
switch_tab |
탭 핸들을 지정해 다른 탭으로 전환한다. |
wait_for_navigation |
현재 페이지의 탐색이 끝날 때까지 기다린 뒤 최종 URL과 제목을 반환한다. |
이 도구들을 조합하면 에이전트가 오류 메시지만 받는 수준을 넘어 페이지의 구조, 화면, 요청, 로그를 함께 살펴볼 수 있다.
개발자가 브라우저에서 본 현상을 프롬프트로 세세하게 옮기지 않아도 에이전트가 필요한 정보를 직접 찾을 수 있게 되는 셈이다.
시작하기 전에 Safari 설정하기
먼저 Safari Technology Preview를 설치한다. 설치 후 다음 옵션을 켜야 한다.
- Safari 설정 → 고급 → 웹 개발자를 위한 기능 보기를 활성화한다.
- Safari 설정 → 개발자 → 원격 자동화 및 외부 에이전트 활성화를 켠다.
Safari 27을 사용한다면 시스템에 포함된 /usr/bin/safaridriver를 사용하고, Safari Technology Preview를 사용한다면 해당 앱 내부의 safaridriver를 사용한다.
Claude에 연결하기
Safari Technology Preview를 연결하는 명령은 다음과 같다.
claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
Safari 27을 연결할 때는 다음 명령을 사용한다.
claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp
Codex에 연결하기
Safari Technology Preview를 연결하는 명령은 다음과 같다.
codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
Safari 27을 연결할 때는 다음 명령을 사용한다.
codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp
다른 MCP 클라이언트에 연결하기
다른 에이전트에서는 mcp.json 또는 config.json에 서버 설정을 추가할 수 있다.
Safari Technology Preview 설정:
"safari-mcp-stp": {
"command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
"args": ["--mcp"]
}
Safari 27 설정:
"safari-mcp": {
"command": "/usr/bin/safaridriver",
"args": ["--mcp"]
}
서버 이름은 예시처럼 safari-mcp-stp로 고정할 필요가 없다. 클라이언트 설정에 맞게 safari처럼 원하는 이름을 사용할 수 있다.
에이전트에는 어떻게 요청하면 되나?
설정이 끝나면 복잡하게 도구 사용을 지시하기보다 다음과 같이 목적을 바로 요청할 수 있다.
- Safari에서 내 사이트의 버그를 찾아줘.
- Safari에서 이 사이트의 접근성을 점검해줘.
- Safari에서 웹사이트 성능을 확인해줘.
에이전트마다 동작 방식은 다르지만, 원문에서는 Safari MCP 서버를 사용하라고 매번 명시하지 않아도 에이전트가 필요한 도구를 판단할 수 있다고 설명한다. 초기 요청을 받은 에이전트가 Safari에서 문제를 조사하고, 발견한 여러 오류와 추가 확인 사항을 사용자에게 제안하는 흐름이다.
로컬에서 실행되지만 데이터 전달 경로는 확인해야 한다
Safari MCP 서버 자체는 로컬 컴퓨터에서만 실행되며 자체적으로 네트워크 요청을 만들지 않는다. Safari의 AutoFill이나 다른 브라우저 활동 같은 개인 정보에도 접근하지 않는다.
다만 서버가 수집한 페이지 콘텐츠, 스크린샷, 콘솔 로그는 현재 사용 중인 에이전트로 직접 전달된다. Apple로 전송되는 것은 아니지만, 그 이후 데이터를 어떻게 처리하는지는 연결한 에이전트와 AI 모델의 정책에 달려 있다. 브라우저 접근 권한을 주는 다른 도구와 마찬가지로 신뢰할 수 있는 에이전트만 연결하고, 민감한 페이지를 다룰 때는 전송 범위를 확인해야 한다.
왜 이 기능을 만들었나?
WebKit 팀은 AI 사용 여부와 관계없이 웹을 만드는 방법은 다양하다고 전제한다. AI가 개발 과정에 포함돼 있다면 Safari MCP 서버가 생산성을 높이고, AI를 사용하지 않는다면 기존 방식도 여전히 유효하다는 입장이다.
이 기능의 목표는 에이전트가 Safari에서 페이지가 어떻게 보이고 작동하는지 이해하게 해 Safari 테스트와 디버깅의 진입 장벽을 낮추는 것이다. 결국 중요한 변화는 에이전트가 코드를 수정하는 데서 그치지 않고 실제 브라우저의 결과까지 확인할 수 있게 됐다는 점이다.
정리
Safari MCP 서버는 AI 에이전트와 Safari의 실제 실행 상태 사이를 연결한다. DOM, 네트워크 요청, 콘솔 로그, 스크린샷, 사용자 상호작용을 에이전트가 직접 조사할 수 있어 Safari 호환성, 성능, 접근성, 화면 상태를 확인하는 반복 작업을 줄일 수 있다.
사용 전에는 Safari의 웹 개발 기능과 외부 에이전트용 원격 자동화를 활성화해야 한다. 또한 서버는 로컬에서 동작하지만 수집된 브라우저 데이터가 연결한 에이전트와 모델로 전달된다는 점도 함께 확인해야 한다.
참고로 Chrome DevTools MCP도 있다
참고로 Google도 Chrome DevTools MCP를 제공한다. AI 코딩 에이전트를 Chrome DevTools에 연결해 페이지 디버깅, 네트워크·콘솔 오류 확인, 사용자 흐름 재현, 성능 추적 등을 수행할 수 있게 해주는 MCP 서버다. Safari MCP와 함께 브라우저별 동작을 직접 확인하는 용도로 참고할 수 있다.
참고 자료
'기술 정리' 카테고리의 다른 글
| OpenClaw vs Hermes Agent 비교: 특징, 차이, 장단점과 직접 사용해 본 후기 (0) | 2026.07.20 |
|---|---|
| 노코드 UI 개발 툴 : FlutterFlow (0) | 2024.01.05 |
| native vs cross platform vs hybrid (0) | 2021.02.23 |
| [Git] Git공부 - 다음단계로 (0) | 2021.01.07 |
| [Git] Git공부 - git 기본 (0) | 2021.01.07 |
