웹 개발자를 위한 Safari MCP 서버

1 hour ago 2

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에서 웹 개발
- 에이전트가 코드뿐 아니라 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: 단일 네트워크 요청의 상세 정보를 조회함
- headers, body, timing 포함
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 mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

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

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 서버의 도움을 받아 이후 확인과 문제 식별을 이어갈 수 있음