Safari MCP

업데이트: Safari 27 및 Safari Technology Preview 247에서 Safari MCP 서버를 소개합니다. 이는 웹 개발자를 위한 Model Context Protocol 서버로, 웹 개발 및 디버깅 워크플로우를 더 빠르고 강력하게 만들어 줍니다. 에이전트가 코딩 프로세스에서 점점 더 중요한 역할을 하고 있다는 점을 잘 알고 있으며, 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 27

먼저 Safari 27을 설치해야 합니다. 설치 후 웹 개발자 기능과 원격 자동화를 활성화해야 합니다. 웹 개발자 기능을 활성화하려면 Safari > 설정 > 고급 > '웹 개발자용 기능 표시' 체크박스를 선택하세요. 그런 다음 Safari > 설정 > 개발자 > '원격 자동화 및 외부 에이전트 허용'을 체크하세요.

Claude를 사용하는 경우 터미널에서 다음 명령을 사용할 수 있습니다:

claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

Codex를 사용하는 경우 터미널에서 다음 명령을 사용할 수 있습니다:

codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

다른 에이전트의 경우 mcp.json 또는 config.json 파일에 다음을 넣을 수 있습니다.

{
  "mcpServers": {
    "safari-mcp": {
      "command": "/usr/bin/safaridriver",
      "args": ["--mcp"]
    }
  }
}

Safari Technology Preview

먼저 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의 개인 정보(예: AutoFill 또는 기타 브라우저 활동)에 접근할 수 없습니다. 페이지 콘텐츠, 스크린샷 또는 콘솔 로그를 캡처하면 해당 데이터는 Apple이 아닌 실행 중인 에이전트로 직접 전송됩니다. 그 이후의 데이터 처리 방식은 사용 중인 에이전트와 모델에 따라 다릅니다. 브라우저에 접근 권한을 부여하는 모든 에이전트와 마찬가지로 신뢰할 수 있는 에이전트만 사용하세요.

왜 만들었나

웹 개발에는 AI를 사용하거나 사용하지 않는 다양한 방법이 있습니다. AI가 워크플로우의 일부라면 이 도구가 더 생산적으로 만드는 데 도움이 될 것이라고 생각합니다. 그렇지 않다면 그것도 괜찮습니다.

이 리소스를 만들어 에이전트가 브라우저에서 어떻게 보이고 작동하는지 이해하도록 도와 Safari에서 테스트하고 디버깅하는 것을 그 어느 때보다 쉽게 만들고자 합니다.

시도해 보시거나 MCP 서버를 처음 사용하는 경우 의견을 알려주세요.

온라인에서 만나요: Saron Yitbarek Bluesky, Jen Simmons Bluesky / Mastodon, Jon Davis Bluesky / Mastodon. 문제가 발생하면 WebKit 버그 리포트를 제출하세요. 문제를 제출하는 것은 실제로 큰 차이를 만듭니다.