Safari MCP

Safari MCP 서버, 웹 개발자에게 소개합니다

2026년 7월 1일

Saron Yitbarek 작성

Safari Technology Preview 247에서 웹 개발 및 디버깅 워크플로우를 더 빠르고 강력하게 만들어 주는 모델 컨텍스트 프로토콜 서버인 Safari MCP 서버를 소개합니다. 에이전트가 코딩 과정에서 점점 더 핵심적인 역할을 하고 있다는 것을 잘 알고 있으며, Safari MCP 서버는 에이전트를 Safari 브라우저 창에 연결하여 코드가 브라우저에서 실제로 어떻게 렌더링되는지 파악할 수 있는 능력을 부여합니다.

MCP 호환 클라이언트라면 어떤 것이든 Safari MCP 서버에 연결할 수 있습니다. 에이전트를 Safari 브라우저 창에 연결하면 에이전트가 사용자 경험을 에뮬레이트할 수 있게 되어, DOM, 네트워크 요청, 스크린샷, 콘솔 출력 등에 접근하는 것처럼 더 자율적으로 디버깅하는 데 필요한 정보를 얻을 수 있습니다.

이를 통해 디버깅 과정이 빨라지고 터미널이라는 편안한 환경을 벗어나지 않아도 되므로, 창을 옮겨 다니며 디버깅을 위해 프롬프트를 입력하는 횟수가 줄어듭니다.

활용 사례

웹 개발을 하다 보면 디버깅의 춤이라는 것을 경험하게 됩니다. 보통 다음과 같은 과정을 거칩니다.

브라우저에서 사이트에 문제가 있는 것을 발견합니다. 콘솔을 열어 문제를 추적합니다. 스타일 탭을 클릭합니다. 무엇이 잘못되었는지 확인합니다. 코드로 돌아가 수정합니다. 또는 스크린샷을 찍어 에이전트에게 문제를 설명하고 수정을 맡깁니다. 에이전트가 제대로 수정해서 버그가 해결되고 다음 작업으로 넘어갈 수 있기를 바랍니다.

하지만 해결되지 않으면 다시 같은 워크플로우를 반복합니다. 브라우저. 프롬프트. 에이전트.

버그를 완전히 잡을 때까지 이 과정을 계속 반복합니다.

사용하는 브라우저나 도구에 관계없이 디버깅 워크플로우는 단 한 번의 수정을 위해 많은 클릭과 도구, 창 이동을 필요로 하지만, 반드시 그럴 필요는 없습니다. 이미 개발 워크플로우에 에이전트를 사용하고 있다면, Safari MCP 서버가 디버깅을 더 빠르고 효율적으로 만들어 줍니다.

Safari MCP 서버는 에이전트가 스스로 더 많은 디버깅과 문제 해결을 수행할 수 있게 해줍니다. 다음은 도움이 될 수 있는 몇 가지 예시입니다.

Safari에서의 웹 개발. 다음에 Safari에서 개발할 때 업그레이드된 워크플로우의 혜택을 누릴 수 있습니다. 에이전트가 이미 코드 작성을 도와주고 있는데, 이제는 코드가 Safari에서 실제로 어떻게 렌더링되는지 확인하여 더 많은 일을 할 수 있습니다.

Safari와의 호환성 개선. 하나의 브라우저에서만 테스트하면 다른 브라우저에서 발생할 수 있는 버그를 놓쳐 해당 사용자에게 부족한 경험을 제공할 수 있습니다. Safari MCP 서버를 사용하면 에이전트가 Safari에서 사이트를 열고, 계산된 스타일을 검사하고, 레이아웃을 확인하며, 창을 전환하지 않고도 예상과 비교할 수 있습니다.

성능 분석. 사이트의 어떤 부분이 속도를 저하시키는지 확인하세요. Safari MCP 서버를 사용하면 에이전트가 페이지에서 JavaScript를 평가하여 탐색 타이밍이나 리소스 로드 시간과 같은 성능 지표를 표면화할 수 있으므로, 사이트 속도를 저하시키는 원인을 정확히 찾아내고 올바른 수정 작업을 할 수 있습니다.

접근성 확인. Safari MCP 서버를 사용하면 에이전트가 누락된 레이블, 부적절한 ARIA 속성, 낮은 명암비와 같은 일반적인 접근성 문제를 확인할 수 있으므로, 사용자에게 영향을 미치는 문제를 발견할 수 있습니다.

모든 사용자 상태 확인. 페이지가 제대로 작동하고 보이는지 확인하세요. 에이전트가 폼의 상태를 확인하고, 선택자를 사용하여 요소를 쿼리하고, 특정 상호 작용을 확인하고, 결제 흐름의 다양한 상태를 표시하는 등의 작업을 수행할 수 있습니다. 이러한 수동 확인에 소요되는 시간을 줄이고 에이전트가 대신 수행하도록 맡기세요.

이것들은 활용 사례의 일부에 불과합니다. 어떻게 구현하기로 결정하든, Safari MCP 서버는 에이전트가 더 많은 일을 수행하도록 도와주고 웹 개발에서 흔히 발생하는 반복 작업을 줄여줍니다. 더 쉬운 워크플로우는 더 많은 버그 수정, 더 행복한 사용자, 더 나은 제품으로 이어집니다.

도구

사용 가능한 도구와 그 기능은 다음과 같습니다.

도구	설명
browser_console_messages	현재 또는 지정된 탭의 버퍼링된 콘솔 로그를 반환합니다.
browser_dialogs	브라우저 대화 상자를 나열하고 응답합니다 (수락, 해제 또는 JS 프롬프트 텍스트 입력).
close_tab	핸들로 브라우저 탭을 닫습니다.
create_tab	새 브라우저 탭을 만들고 선택적으로 URL을 로드합니다.
evaluate_javascript	페이지 내에서 JavaScript 코드를 실행하고 결과를 반환합니다.
get_network_request	기록된 단일 네트워크 요청의 전체 세부 정보를 가져옵니다 (헤더, 본문, 타이밍).
get_page_content	다양한 형식(마크다운, 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 미디어 유형(예: “print”)을 에뮬레이트합니다.
set_viewport_size	브라우저 뷰포트 크기를 CSS 픽셀 단위로 설정합니다.
switch_tab	핸들로 다른 브라우저 탭으로 전환합니다.
wait_for_navigation	현재 페이지 로딩이 완료될 때까지 기다립니다. 최종 URL과 제목을 반환합니다.

Safari MCP 서버를 사용하면 더 이상 브라우저에서 경험하는 것을 에이전트에게 주의 깊게 설명하는 완벽한 프롬프트를 작성할 필요가 없습니다. 에이전트가 스스로 알아낼 수 있는 능력을 부여할 수 있습니다.

시작하는 방법

먼저 Safari Technology Preview를 설치해야 합니다. 설치한 후 Safari 설정 > 고급 > 웹 개발자용 기능 보기를 활성화했는지 확인하세요. 그런 다음 Safari 설정 > 개발자용 > 원격 자동화 및 외부 에이전트 허용으로 이동하세요.

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로만 지정해도 됩니다. Safari MCP 서버를 설치한 후 다음 프롬프트 중 하나를 시도해 보세요.

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

각 에이전트마다 작동 방식이 조금씩 다르지만, Safari MCP 서버를 사용하라고 명시적으로 지시할 필요는 없습니다. 에이전트가 스스로 알아낼 것입니다. 위와 같은 간단한 프롬프트만으로도 MCP를 시작하기에 충분합니다.

Safari MCP 서버를 사용하는 에이전트와의 대화는 다음과 같이 진행될 수 있습니다.

사용자: 버그 보고가 들어왔어요. Safari에서 항공편 페이지에 문제가 있다고 합니다. 무슨 일인지 알아낼 수 있나요?

에이전트: 네, 확인해 보겠습니다.

에이전트: Safari의 항공편 페이지에서 두 가지 별개의 버그를 발견했습니다. 둘 다 수정할까요?

사용자: 네. 여기서 Safari 사용자에게 문제를 일으킬 만한 다른 것이 있나요?

에이전트: 네, 두 가지 더 지적할 만한 것이 있습니다. 결과 표시 애니메이션이 조용히 깨져 있고 API 서버 시작 로그가 잘못되었습니다. 이 두 가지도 함께 처리할까요?

시작하려면 초기 요청만 있으면 되며, Safari MCP 서버의 도움으로 에이전트가 그 이후를 알아서 처리할 수 있습니다.

Safari MCP 서버는 전적으로 로컬 머신에서 실행되며 자체적으로 네트워크 호출을 하지 않습니다. 또한 Safari의 개인 정보(예: 자동 완성 또는 기타 브라우저 활동)에 접근할 수 없습니다. 페이지 콘텐츠, 스크린샷 또는 콘솔 로그를 캡처하면 해당 데이터는 Apple이 아닌 실행 중인 에이전트로 직접 전달됩니다. 그 이후 데이터에 어떤 일이 발생하는지는 사용 중인 에이전트와 모델에 따라 다릅니다. 브라우저에 대한 접근 권한을 부여하는 모든 에이전트와 마찬가지로, 신뢰하는 에이전트만 사용하세요.

이 도구를 만든 이유

AI를 사용하든 사용하지 않든 웹을 구축하는 방법은 다양합니다. AI가 워크플로우의 일부라면, 이 도구가 생산성을 더욱 높이는 데 도움이 될 것이라고 생각합니다. 그렇지 않더라도 괜찮습니다.

이 리소스를 만듦으로써 에이전트가 브라우저에서 사물이 어떻게 보이고 작동하는지 이해하도록 도와 Safari에서 더 쉽게 테스트하고 디버깅할 수 있기를 바랍니다.

사용해 보시거나 MCP 서버를 처음 사용하는 경우, 의견을 알려주시기 바랍니다.

온라인에서 저희를 찾아보세요: BlueSky의 Saron Yitbarek, Bluesky / Mastodon의 Jen Simmons, Bluesky / Mastodon의 Jon Davis. 문제가 발생하면 WebKit 버그 보고서를 제출해 주세요. 문제를 제출하는 것은 정말로 변화를 만듭니다.