웹 개발자를 위한 Safari MCP 서버

Safari Technology Preview 247의
Safari MCP 서버는 코딩 에이전트를 실제 Safari 창에 연결해, 웹 개발·디버깅 중 브라우저에서 보이는 상태를 직접 확인하게 함
에이전트는
DOM, 네트워크 요청, 스크린샷, 콘솔 출력에 접근해 코드만으로는 알기 어려운 렌더링 결과와 사용자 경험을 확인할 수 있음
Safari 호환성, 성능, 접근성, 폼·체크아웃 상태 검증처럼 브라우저별 차이가 중요한 작업에서 반복적인 창 전환과 프롬프트 설명 부담을 줄임
탭 제어, URL 이동, JavaScript 실행, 네트워크 요청 조회, 페이지 콘텐츠 추출, DOM 상호작용, 스크린샷, 뷰포트·미디어 에뮬레이션 도구를 제공함
서버는
로컬 머신에서만 실행되고 자체 네트워크 호출을 하지 않지만, 캡처된 페이지 데이터는 사용자가 실행 중인 에이전트로 직접 전달되므로 신뢰할 수 있는 에이전트 사용이 필요함

Safari MCP 서버의 역할

Safari Technology Preview 247에
Safari MCP 서버가 추가됨
웹 개발자를 위한 Model Context Protocol 서버로, 에이전트를 Safari 브라우저 창에 연결함
코드가 브라우저에서 실제로 어떻게 렌더링되는지 에이전트가 확인할 수 있어, 코드 분석과 브라우저 상태 확인 사이의 간극을 줄임
MCP 호환 클라이언트라면 Safari MCP 서버에 연결 가능함
연결된 에이전트는 사용자가 브라우저에서 보는 상태를 더 가깝게 재현할 수 있음
DOM 접근
네트워크 요청 접근
스크린샷 접근
콘솔 출력 접근

디버깅 반복을 줄이는 방식

일반적인 웹 디버깅은 브라우저에서 문제를 보고, 콘솔과 스타일 탭을 확인한 뒤, 다시 코드로 돌아가 수정하는 흐름이 반복됨
에이전트를 쓰더라도 스크린샷을 찍고 문제를 설명한 뒤, 수정이 부족하면 브라우저·프롬프트·에이전트를 다시 오가야 함
Safari MCP 서버는 에이전트가
브라우저 상태를 직접 확인하게 해 창 전환과 자세한 프롬프트 작성 부담을 줄임
사용자가 완벽한 프롬프트로 상황을 설명하지 않아도, 에이전트가 Safari에서 확인 가능한 정보를 바탕으로 다음 작업을 이어갈 수 있음

주요 사용 사례

Safari에서 웹 개발

에이전트가 코드뿐 아니라 Safari에서의 실제 렌더링 결과까지 확인할 수 있음

Safari 호환성 개선

한 브라우저에서만 테스트하면 다른 브라우저의 잠재적 버그를 놓칠 수 있음
에이전트가 Safari에서 사이트를 열고 computed style, 레이아웃, 기대 동작과의 차이를 확인할 수 있음

성능 분석

페이지에서 JavaScript를 평가해 navigation timing, resource load time 같은 성능 지표를 드러낼 수 있음
사이트를 느리게 만드는 부분을 찾으면 수정 대상을 좁히기 쉬움

접근성 점검

누락된 label, 부적절한 ARIA 속성, 낮은 contrast 같은 일반적인 접근성 문제를 확인할 수 있음

사용자 상태 검증

폼 상태 확인, selector로 요소 조회, 특정 상호작용 확인, 체크아웃 흐름의 여러 상태 표시 등을 수행할 수 있음

제공 도구

browser_console_messages

: 현재 탭 또는 지정 탭의 버퍼링된 콘솔 로그를 반환함
browser_dialogs

: 브라우저 dialog 목록을 조회하고 응답을 처리함

accept, dismiss, JavaScript prompt 텍스트 입력을 지원함

create_tab

, close_tab

, switch_tab

, list_tabs

: 브라우저 탭 생성·닫기·전환·목록 조회를 수행함
navigate_to_url

: URL로 이동하고 로드된 페이지 콘텐츠를 반환함
page_info

: 현재 페이지의 URL, title, loading state를 확인함
evaluate_javascript

: 페이지 안에서 JavaScript 코드를 실행하고 결과를 반환함
list_network_requests

: 현재 탭의 네트워크 요청 요약을 조회함

URL, method, status, timing 포함

get_network_request

: 단일 네트워크 요청의 상세 정보를 조회함
get_page_content

: 페이지 텍스트 콘텐츠를 markdown, HTML, JSON 등 여러 형식으로 추출함
page_interactions

: click, type, scroll, hover, keyPress 같은 DOM 상호작용을 순차 수행함
screenshot

: 현재 페이지를 PNG 스크린샷으로 캡처함
set_emulated_media

: responsive-design 테스트를 위해 print

같은 CSS media type을 에뮬레이션함
set_viewport_size

: 브라우저 viewport 크기를 CSS pixel 단위로 설정함
wait_for_navigation

: 현재 페이지 로딩 완료를 기다리고 최종 URL과 title을 반환함

시작 방법

먼저 Safari Technology Preview를 설치해야 함
설치 후 Safari 설정에서 다음 항목을 켜야 함
Safari Settings > Advanced > Show features for web developers
Safari Settings > Developer > Enable remote automation and external agents
Claude를 쓰는 경우 터미널에서 다음 명령을 사용할 수 있음

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

Codex를 쓰는 경우 다음 명령을 사용할 수 있음

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

다른 에이전트는
mcp.json

또는 config.json

에 다음 설정을 넣을 수 있음

"safari-mcp-stp": {
"command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
"args": ["--mcp"]
}

위 예시는 서버 이름을
safari-mcp-stp

로 두지만, safari

처럼 원하는 이름을 사용할 수 있음

프롬프트와 에이전트 동작

설치 후 다음 같은 간단한 프롬프트로 시작할 수 있음

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

에이전트마다 동작 방식은 조금씩 다르지만, Safari MCP 서버를 명시적으로 쓰라고 말하지 않아도 스스로 사용할 수 있음
예시 흐름에서는 사용자가 Safari의 flight page 버그를 물으면, 에이전트가 두 가지 버그를 찾고 Safari 사용자에게 문제를 일으킬 수 있는 항목을 추가로 확인함
초기 요청만으로도 Safari MCP 서버의 도움을 받아 이후 확인과 문제 식별을 이어갈 수 있음

로컬 실행과 데이터 처리

Safari MCP 서버는 전적으로
로컬 머신에서 실행됨
자체적으로 네트워크 호출을 하지 않음
Safari의 개인 정보에는 접근하지 않음
페이지 콘텐츠, 스크린샷, 콘솔 로그를 캡처하면 해당 데이터는 Apple이 아니라 사용자가 실행 중인 에이전트로 직접 전달됨
이후 데이터 처리 방식은 사용하는 에이전트와 모델에 따라 달라짐
브라우저 접근 권한을 주는 다른 에이전트와 마찬가지로, 신뢰하는 에이전트만 사용해야 함

WebKit이 기대하는 활용

웹 개발에는 AI를 쓰는 방식과 쓰지 않는 방식이 모두 있음
AI가 개발 흐름의 일부라면 Safari MCP 서버가 생산성을 높이는 데 도움이 될 수 있음
에이전트가 Safari 브라우저에서 화면과 동작을 이해하도록 도와, Safari 테스트와 디버깅을 더 쉽게 만드는 것이 목적임
문제가 있으면 WebKit bug report로 이슈를 제출할 수 있음

Insights