SONUB
KO English 한국어 日本語 中文 हिन्दी বাংলা اردو Español Português Français Deutsch Русский العربية Bahasa Indonesia Tiếng Việt ไทย Türkçe

알림을 켜는 방법

이 브라우저 또는 주소에서는 알림을 사용할 수 없습니다. 지원되는 브라우저로 보안 연결된 SONUB 사이트에 접속해 주세요.

알림이 차단되어 있으면 브라우저 설정에서 허용해 주세요.

  1. 주소 표시줄 옆의 사이트 설정 또는 브라우저의 사이트 설정을 열고, 이 사이트의 알림을 허용으로 바꾸세요.
  2. 기기 설정에서 브라우저 알림을 허용하고 방해 금지 또는 집중 모드를 확인하세요.
  3. SONUB으로 돌아와 페이지를 새로고침한 뒤 벨을 눌러 알림을 켜세요.

iPhone 또는 iPad에서는 SONUB을 홈 화면에 추가하고 거기에서 연 뒤 알림을 허용하세요.

로그인 로그아웃 화면 테마 기본 테마 다크 테마 핑크 테마 채팅 1:1 채팅 그룹 채팅 게시판 공지사항 뉴스 게시판 건의 게시판 메인 메뉴
를 바깥 도구에 잇는 표준

MCP(Model Context Protocol)

만들어진 를 에 연결해 씁니다. 에이전트가 웹브라우저에서 일하는 세 방식 — WebMCP · MCP · Playwright MCP — 의 차이와 안전 수칙을 봅니다.

에이전트에 MCP 서버 연결하기

는 에 연결해야 쓸 수 있어요. 연결 ( · codex )과 범위·확인 방법은 툴마다 달라서 각 툴 화면의 MCP 단원에 한 번씩 적어 두었어요.

WebMCP vs Chrome DevTools MCP vs Playwright MCP

셋 다 에이전트가 웹브라우저에서 일하게 해요. 다른 점은 누가 준비하느냐와 에이전트가 어떻게 일하느냐예요. WebMCP 는 웹사이트 쪽에서 "내 사이트에서는 이런 기능을 쓸 수 있다"고 선언하는 이고, 나머지 둘은 에이전트 쪽에 설치해 아무 사이트에서나 브라우저를 직접 다루는 MCP 서버예요.

브라우저에서 일하는 세 방식 비교
항목 WebMCP Chrome DevTools MCP Playwright MCP
무엇인가 웹사이트가 쓰는 브라우저 API — 아직 제안 단계의 웹 표준(Web 커뮤니티 그룹 초안) 에이전트 쪽에 설치하는 MCP 서버(Google 팀) 에이전트 쪽에 설치하는 MCP 서버(Microsoft)
누가 준비하나 웹사이트 개발자 — 자기 사이트 에 registerTool() 을 넣어 를 등록해요 에이전트를 쓰는 사람 — 내 에이전트에 를 더해요 에이전트를 쓰는 사람 — 내 에이전트에 서버를 더해요
에이전트가 일하는 방법 사이트가 등록한 도구를 이름으로 불러요. 화면을 읽고 추측할 필요가 없어요. 실제 Chrome 을 로 조종하고 들여다봐요 — 클릭 · 입력 · . 페이지의 접근성 트리(화면 구조)를 읽고 클릭 · 입력해요 — 그림이 아니라 구조를 봐요.
잘하는 일 그 사이트의 기능을 정확하고 빠르게, 인된 내 그대로 써요 — 성능 기록, 요청, · — · · WebKit 여러 브라우저
한계 사이트가 도구를 등록한 곳에서만 돼요. 새 표준이라 지원하는 브라우저 · 사이트가 아직 적어요. Chrome(과 Chrome for Testing)에 맞춰져 있어요. 화면이 바뀌면 다시 찾아야 해요. 화면 구조가 바뀌면 다시 찾아야 해요. 사이트가 정한 기능이 아니라 단추 하나하나로 일해요.

시작하는 코드

WebMCP · shop.js
// WebMCP: the website registers its own feature as a tool
// (first explainer / Chrome preview: navigator.modelContext,
//  spec draft 2026-10-27: document.modelContext)
const modelContext = document.modelContext ?? navigator.modelContext;

modelContext.registerTool({
  name: "search-products",
  description: "Search this shop's products by keyword",
  inputSchema: {
    type: "object",
    properties: { query: { type: "string" } },
    required: ["query"],
  },
  async execute({ query }) {
    const response = await fetch("/api/products?q=" + encodeURIComponent(query));
    return await response.json();   // the agent gets this result
  },
});
Chrome DevTools MCP · Terminal
# Chrome DevTools MCP: add the server to your agent (Claude Code)
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
Playwright MCP · Terminal
# Playwright MCP: add the server to your agent (Claude Code)
claude mcp add playwright -- npx @playwright/mcp@latest

WebMCP 는 사이트의 에, 나머지 둘은 의 에 적어요. WebMCP 의 처음 안내와 Chrome 미리보기는 navigator.modelContext 를, 2026-10-27 초안은 document.modelContext 를 써요 — 규격이 아직 바뀌는 중이에요.

비유로 보기 — 메뉴판을 내건 가게와 심부름 로봇

WebMCP = 가게가 내건 주문 창구와 메뉴판

  • 가게(웹사이트)가 문 앞에 "주문은 이 창구로 하세요"라는 메뉴판을 미리 내걸어요.
  • 메뉴판에는 주문할 수 있는 것(도구 이름)과 주문서 쓰는 법(입력 )이 적혀 있어요.
  • 로봇(에이전트)은 메뉴판을 읽고 창구에 주문서만 넣으면 돼요 — 가게 안을 돌아다니지 않아요.
  • 다만 창구를 만들어 둔 가게에서만 이렇게 주문할 수 있어요.

Chrome DevTools MCP · Playwright MCP = 손님이 보낸 심부름 로봇

  • 손님(에이전트를 쓰는 사람)이 심부름 로봇을 가게에 보내요. 가게는 아무것도 준비하지 않아도 돼요.
  • 로봇은 가게 안을 직접 둘러보며 진열대를 읽고, 물건을 집고, 계산대 단추를 눌러요.
  • 어느 가게든 들어갈 수 있지만, 진열이 바뀌면 다시 찾아야 해서 느리고 헤맬 수 있어요.
  • Chrome DevTools MCP 로봇은 가게의 배선 · 계량기까지 보는 점검 기사예요(성능 · 네트워크 · 콘솔).
  • Playwright MCP 로봇은 정해 준 장보기 순서를 여러 가게(브라우저)에서 똑같이 되풀이하는 장보기 로봇이에요.

정리하면, 창구가 있는 가게에서는 창구로 주문하는 것이 빠르고 정확해요. 창구가 없는 가게에서는 로봇이 직접 둘러봐야 해요. 그래서 셋은 서로를 대신하지 않고 함께 써요.

MCP 안전 수칙

안전: 도구는 내 으로 돌아가는 코드이고, 믿을 수 있는 서버가 아니면 도구 설명도 믿으면 안 돼요. 규격은 가 도구를 부르기 전에 사용자의 허락을 받으라고 해요. 직접 읽어 봤거나 믿을 수 있는 서버만 설치하고, 서버에는 꼭 필요한 만큼만 접근을 주고, 키는 코드가 아니라 환경 변수에 두고, 을 조심하세요 — 도구가 읽은 웹 페이지나 파일에 를 노린 지시가 숨어 있을 수 있어요.

출처

AI 과정에서 함께 배우기

AI 과정의 MCP 챕터 — 목표 · 과제 · 진도

가이드라인

인공지능

에이전트 툴

바이브코딩

AI 활용

AI 자격증

화상 수업

IT 기초

채팅

게시판

만들기

소통

더보기

용어 사전

모르는 말을 골라 보세요. 쉬운 설명과 관련 용어를 볼 수 있어요.

찾는 용어가 아직 없어요.

용어를 고르면 설명이 보여요.