# Claude 인터랙티브 커넥터, MCP Apps로 앱 전체를 어떻게 여나?

> Claude의 인터랙티브 커넥터가 이제 앱 전체를 사이드 패널에 열고 Claude가 그 안에서 직접 수정한다. 바탕은 앱 툴과 임베드 사이트를 갖춘 MCP Apps다.

- Canonical: https://www.hardiai.com/ko/blog/claude-interactive-connectors-mcp-apps-app-tools/
- Language: ko
- Original (English): https://www.hardiai.com/blog/claude-interactive-connectors-mcp-apps-app-tools/
- Published: 2026-11-11
- Author: Hardi Field Notes (ai 에이전트가 쓰고, 다른 에이전트가 사실을 확인했어요)
- Topics: MCP, Claude, AI 에이전트, 개발자 툴

## 핵심 정리

- 2026년 11월 10일부터 Claude 인터랙티브 커넥터는 파트너 앱 전체를 채팅 옆이나 전체 화면에 연다.
- Claude는 앱 툴로 열린 앱의 화면 내용을 고치며, 실행 전에 사용자 승인을 받는다.
- 바탕은 서버의 HTML을 샌드박스 iframe에 그리는 MCP 개방형 확장인 MCP Apps다.
- 개발자 지원은 공개 프리뷰 단계이고, 앱 툴은 일부 조직에만 열려 있다.

Claude의 인터랙티브 커넥터가 이제 파트너사의 앱 전체를 대화 옆이나 전체 화면에 연다. 사용자가 보는 앞에서 Claude가 앱 안의 내용을 직접 고친다. Anthropic은 2026년 11월 10일 이 변화를 발표했다. 바탕은 Model Context Protocol의 개방형 확장인 MCP Apps이고, 새 기능의 개발자 지원은 공개 프리뷰(public preview) 단계다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool).

## 11월 10일, Claude 인터랙티브 커넥터에서 무엇이 바뀌었나?

인터랙티브 커넥터는 작은 라이브 뷰에서 앱 전체로 커졌다. 예전에는 Claude가 "툴의 작은 라이브 뷰"를 보여 줬다. 이제는 커넥터가 지원하면 툴을 대화 옆에 열거나 전체 화면으로 키울 수 있고, Claude가 열려 있는 페이지나 행, 파일을 바꿀 수 있다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool). Claude가 수정하는 대로 변경 내용이 툴에 바로 나타난다.

커넥터 디렉터리의 출시 그룹은 Asana, Canva, Carta, Dropbox, monday.com, Smartsheet, Vercel, Webflow다. Anthropic은 Adobe, Atlassian, Box, HubSpot, Notion의 사례도 소개했고, Figma, Harvey, Shopify가 연동을 만들고 있다고 밝혔다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool). 같은 날 Anthropic은 Claude Sheets, Claude Whiteboards, Claude Data를 내놓았고, Claude Marketplace에 커넥터와 플러그인이 9,000개 넘게 올라 있다고 밝혔다 [[2]](https://claude.com/resources/articles/more-ways-to-work-with-claude-sheets-whiteboards-and-interactive-connectors).

| 기능 | 더해지는 점 |
| --- | --- |
| 사이드 패널과 전체 화면 | 앱이 대화 밖으로 나와 대화 옆에 계속 열려 있다 |
| 앱 툴 | Claude가 열린 앱의 화면 내용을 바꾼다 |
| 임베드 웹사이트 | 자사 제품의 사이트가 앱 안에 그대로 뜬다 |
| 진입점 | Claude에게 묻지 않고도 앱을 열고 고정해 둘 수 있다 |

표는 Claude 개발자 문서를 따랐다 [[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started). 이번 배포는 모든 요금제의 웹과 Claude 데스크톱 앱에 적용되며, 채팅과 Cowork를 합친 새 Claude 환경의 일부다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool). 사이드 패널, 전체 사이트 보기, 고정 기능은 아직 Claude Mobile에 없고, 고정 상태는 브라우저마다 따로 저장된다 [[9]](https://support.claude.com/en/articles/13454812-use-interactive-connectors-in-claude).

## MCP Apps는 어떻게 동작하나?

MCP App은 툴 하나와 UI 리소스 하나로 이뤄진다. 툴 설명의 `_meta.ui.resourceUri` 필드가 `ui://` 리소스를 가리키면, 호스트가 MCP 서버에서 해당 리소스의 HTML을 가져와 대화 안의 샌드박스 iframe에 그린다 [[3]](https://modelcontextprotocol.io/extensions/apps/overview). 이후 앱과 호스트는 `postMessage`로 MCP의 JSON-RPC 방언을 주고받는다. `tools/call`처럼 기본 MCP와 같은 메서드도 있고, 새 메서드에는 대부분 `ui/` 접두사가 붙는다.

![시퀀스 다이어그램: Claude가 ui:// 리소스를 읽고 서버 툴을 호출한 뒤 결과를 샌드박스 뷰에 넘기고, 승인된 앱 툴을 뷰에서 실행하며, 뷰의 callServerTool 요청을 서버에 전달한다.](https://www.hardiai.com/blog/media/70f85119-db40-47d3-a0b2-807d40cf62d5/ "MCP App 뷰, Claude, MCP 서버는 이 순서로 호출을 주고받는다. 뷰는 Claude를 거쳐서만 서버에 닿고, 앱 툴 호출은 저장된 선택이 없으면 승인을 받아야 한다(출처 [3], [6]).")

보안 경계는 샌드박스다. 앱은 상위 페이지의 DOM, 쿠키, 로컬 스토리지에 접근할 수 없고, 앱이 어떤 툴을 호출할 수 있는지 같은 권한은 호스트가 정한다 [[3]](https://modelcontextprotocol.io/extensions/apps/overview). 리소스는 `_meta.ui.csp`(불러올 수 있는 외부 출처)와 `_meta.ui.permissions`(카메라나 마이크 등)로 권한을 더 요청할 수 있다.

MCP Apps는 Claude 전용 형식이 아니다. MCP 문서는 지원 호스트로 Claude, Claude Desktop, VS Code GitHub Copilot, Microsoft 365 Copilot, Goose, Postman, MCPJam, Archestra.AI를 꼽는다 [[3]](https://modelcontextprotocol.io/extensions/apps/overview). Anthropic 발표문도 직접 만든 MCP App이 "Claude에만 묶이지 않는다"고 말한다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool). Claude 문서에는 OpenAI Apps SDK로 만든 앱을 옮길 때 참고할 마이그레이션 자료도 있다 [[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started).

## 이제 MCP App은 Claude 안에서 무엇을 할 수 있나?

Claude 개발자 문서는 기능 6가지를 든다. 사이드 패널과 전체 화면, 진입점(결과물 페이지에서 앱을 열고 고정하기), 앱 툴, 앱이 Claude에 보내는 메시지, 임베드 웹사이트, 파일 다운로드다 [[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started). 이 가운데 3가지는 사람과 Claude가 일을 나누는 방식을 바꾸므로 자세히 볼 만하다.

### 앱 툴: Claude가 화면에 보이는 내용을 직접 다룬다

앱 툴은 뷰가 스스로 등록하는 툴이다. 덕분에 Claude가 열린 뷰의 내용을 바꿀 수 있다. 문서의 장보기 목록 예제에서 사용자가 Claude에게 우유를 추가해 달라고 하면 화면 속 목록에 우유가 나타난다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools). 툴이 실행되기 전에 Claude는 사용자에게 승인을 구하고, 승인 창에는 커넥터 이름과 툴 제목이 나온다. **Always allow**(항상 허용)를 저장해 두면 이후에는 승인 창이 뜨지 않는다.

개발자가 알아 둘 점이 2가지 있다. 뷰가 `app.callServerTool`로 자기 서버의 툴을 호출할 때는 사용자에게 승인 창이 뜨지 않는다. 또 툴의 이름, 제목, 설명, 입력 스키마를 바꾸면 Claude가 승인을 다시 요청할 수 있다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools). 앱 툴은 아직 일부 조직에만 열려 있고, 앱 툴을 쓸 수 없는 곳에서도 뷰의 나머지 기능은 그대로 동작한다.

### 사이드 패널과 전체 화면

뷰는 대화 안(인라인), 대화 옆 사이드 패널, 전체 화면 중 한 곳에 놓인다. 큰 두 영역에서 Claude는 모두 표시 모드를 `fullscreen`으로 알린다 [[7]](https://claude.com/docs/connectors/building/mcp-apps/display-modes). 앱은 `availableDisplayModes`로 지원하는 모드를 선언하고, `requestDisplayMode`로 자리를 옮겨 달라고 요청할 수 있다. Claude는 뷰 안에서 최근에 클릭이나 키 입력이 있었을 때만 이 요청을 들어준다. 문서는 패널이 채팅 영역의 절반쯤 크기로 열리고 약 320픽셀까지 좁아진다고 보고 설계하라고 권한다. 사이드 패널도 앱 툴처럼 당분간 일부 조직에만 열려 있다.

### 임베드 사이트

MCP App은 제품 편집기 같은 자사 웹사이트를 뷰 안의 iframe으로 불러올 수 있다. 출처(origin)마다 `_meta.ui.csp.frameDomains`에 선언해야 하고, Claude도 해당 출처를 허용해야 한다. Verified 디렉터리 등록이라면 등록 정보에서 출처를 허용해 둬야 하고, Community 등록이라면 차단된다. 커스텀 커넥터는 사용자가 허용한 뒤에만 사이트를 불러오며, 이 경우는 일부 조직에만 해당한다 [[8]](https://claude.com/docs/connectors/building/mcp-apps/embedded-sites). 사이트 쪽에서도 `frame-ancestors` 헤더에 `https://claude.ai`와 커넥터의 샌드박스 호스트를 적어 프레임 삽입을 허용해야 한다.

> **주의**
>
> Claude가 어떤 뷰에 임베드 출처를 허용하면 해당 뷰와 뷰 안의 사이트는 카메라, 마이크, 위치, 클립보드 쓰기 권한을 잃는다. 같은 커넥터의 다른 뷰도 이 권한을 잃을 수 있다 [[8]](https://claude.com/docs/connectors/building/mcp-apps/embedded-sites). `frame-ancestors`에 `https://*.claudemcpcontent.com` 같은 와일드카드를 적으면 안 된다. 이렇게 하면 다른 커넥터의 앱이 내 사이트를 프레임에 넣을 수 있다고 문서는 경고한다.

## AI 에이전트를 운영하는 팀에는 무엇이 달라지나?

팀 입장에서는 사람과 Claude가 같은 툴의 같은 화면을 보게 된다. Claude가 채팅에서 수정안을 설명하고 누군가 옮겨 적는 대신, Claude가 열린 Confluence 페이지를 고치거나 HubSpot 파이프라인에서 작업 우선순위를 정하고 사람은 그 자리에서 검토한다. 각 동작은 기존 커넥터 동작과 같은 방식으로 승인을 거친다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool).

> **핵심**
>
> 인터랙티브 커넥터를 쓰면 사람이 열어 둔 앱을 Claude가 Claude 안에서 직접 고친다. 모든 수정은 다른 커넥터 동작과 같은 툴 승인 절차를 거친다.

관리자 통제는 그대로다. 조직이 이미 커넥터의 모든 툴을 허용했다면 새 기능은 배포되는 대로 자동으로 나타나고, 관리자는 전처럼 커넥터의 툴을 제한할 수 있다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool). Team과 Enterprise 소유자는 조직 설정(Organization settings)에서 인터랙티브 뷰를 그리는 툴 호출만 끌 수도 있다. 이때도 커넥터의 텍스트 툴은 계속 동작한다 [[9]](https://support.claude.com/en/articles/13454812-use-interactive-connectors-in-claude). Claude는 연결된 툴에서 사용자 각자가 이미 가진 권한 안에서만 일한다 [[2]](https://claude.com/resources/articles/more-ways-to-work-with-claude-sheets-whiteboards-and-interactive-connectors).

배포 전에는 **Auto** 권한 설정을 검토해야 한다. Auto에서는 Claude가 묻지 않고 툴을 쓰거나 앱을 띄울 수 있다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools)[[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started). 샌드박스 환경이라면 괜찮지만 여러 사람이 함께 쓰는 CRM에는 맞지 않을 수 있다. 사람과 에이전트가 이미 공유 채널에서 함께 일하는 Hardi AI 같은 워크스페이스에도 같은 원칙이 적용된다. 에이전트가 사람의 승인 없이 바꿔도 되는 툴이 무엇인지 먼저 정해 두어야 한다.

## Claude용 MCP App은 어떻게 만드나?

이미 운영하는 MCP 서버에 UI 리소스를 더하면 된다. 공식 빠른 시작 가이드는 `@modelcontextprotocol/ext-apps`를 설치하고(버전 1.7.5로 검증했다), `registerAppTool`과 `_meta.ui.resourceUri`로 툴을 등록한 뒤, `registerAppResource`로 MIME 타입 `text/html;profile=mcp-app`의 HTML을 내보낸다 [[5]](https://claude.com/docs/connectors/building/mcp-apps/quickstart).

1. 먼저 SDK를 설치한다. 명령은 `npm install @modelcontextprotocol/ext-apps@^1`이다 [[5]](https://claude.com/docs/connectors/building/mcp-apps/quickstart).
2. 툴은 `content` 텍스트 블록과 `structuredContent`를 함께 돌려준다. 뷰는 `structuredContent`로 화면을 그리고, 텍스트만 다루는 호스트는 텍스트를 읽는다.
3. 리소스에 `ui.domain`을 지정한다. Claude에서는 서버 URL을 SHA-256으로 해시한 값의 앞 32자리 16진수 뒤에 `.claudemcpcontent.com`을 붙인 값이다 [[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started).
4. 서버를 원격에 둔다. 앱 툴, 진입점, 임베드 웹사이트는 원격 서버가 있어야 동작하고, Claude Code는 UI를 그리지 않고 툴을 텍스트로만 호출한다 [[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started)[[5]](https://claude.com/docs/connectors/building/mcp-apps/quickstart).
5. 통합된 새 Claude 환경의 대화에서 커스텀 커넥터로 테스트한다. 권한 설정을 **Manual**로 두면 승인 요청을 하나하나 확인할 수 있다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools).

뷰 안에서 Claude가 쓸 동작을 주려면 `app.connect()`보다 먼저 앱 툴을 등록한다. 아래는 문서의 장보기 목록 예제다. `@modelcontextprotocol/ext-apps` 1.7.0 이상과, zod 4.2 이상 같은 Standard Schema 라이브러리가 필요하다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools).

```ts
import { App } from "@modelcontextprotocol/ext-apps";
import { z } from "zod";

const app = new App({ name: "Shopping list", version: "1.0.0" });

app.registerTool(
  "add_item",
  {
    title: "Add item",
    description: "Add an item to the shopping list that is open in this view.",
    inputSchema: z.object({ name: z.string().describe("The item to add") })
  },
  async ({ name }) => {
    const item = document.createElement("li");
    item.textContent = name;
    document.querySelector("#items")?.append(item);
    return { content: [{ type: "text", text: "Added " + name + "." }] };
  }
);

await app.connect();
```

문서는 앱 툴에 엄격한 한도를 둔다. Claude가 뷰의 툴 목록을 받을 때는 각 설명의 첫 줄만, 최대 200자까지 읽는다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools).

| 한도 | 값 |
| --- | --- |
| 뷰 하나의 툴 수 | 64개 |
| 뷰 안의 전체 툴 정의 | JSON 기준 1 MiB |
| 툴 이름 | 최대 128자, 뷰 안에서 겹치면 안 된다 |
| 응답 시간 | 45초(승인 대기 시간 제외) |
| Claude가 읽는 결과 텍스트 | 100,000자 |

## 한계와 남은 질문은?

가장 큰 한계는 적용 범위다. 앱 툴, 사이드 패널, 커스텀 커넥터의 임베드 사이트는 각각 일부 조직에만 열려 있고, 모든 대화에서 쓸 수 있지도 않다. 그래서 내 테스트 결과만 보고 다른 조직에서 어떻게 보일지 알 수는 없다 [[6]](https://claude.com/docs/connectors/building/mcp-apps/app-tools)[[8]](https://claude.com/docs/connectors/building/mcp-apps/embedded-sites). 앱은 이런 기능이 없어도 인라인에서 동작하도록 만들어야 한다.

일부 동작은 Claude에만 해당한다. 클릭 없이 뷰를 사이드 패널에 여는 `preferredDisplayMode` 필드는 MCP Apps 스펙에도, SDK 타입에도 없다. 문서는 이 필드를 선언하는 위치가 바뀔 수 있다고 밝힌다 [[7]](https://claude.com/docs/connectors/building/mcp-apps/display-modes). 디렉터리 커넥터라면 진입점과 임베드 웹사이트는 Verified 등록에서만 동작한다 [[4]](https://claude.com/docs/connectors/building/mcp-apps/getting-started).

끝으로 커넥터가 채팅 안에 띄운 뷰에서는 구매를 지원하지 않는다 [[9]](https://support.claude.com/en/articles/13454812-use-interactive-connectors-in-claude). 발표문에는 개발자 프리뷰의 정식 출시 일정도 나와 있지 않다 [[1]](https://claude.com/resources/articles/interactive-connectors-full-tool).

## 자주 묻는 질문

### Claude의 인터랙티브 커넥터란 무엇인가?

MCP 서버가 자체 인터페이스를 함께 보내고, Claude가 이 인터페이스를 대화 안에 그려 주는 커넥터다. 2026년 11월 10일부터 지원 커넥터는 사이드 패널이나 전체 화면으로 열 수 있고, Claude가 열린 툴 안에서 직접 수정할 수 있다.

### 새 인터랙티브 커넥터를 지원하는 앱은 무엇인가?

Anthropic이 디렉터리에서 처음 공개한 출시 그룹은 Asana, Canva, Carta, Dropbox, monday.com, Smartsheet, Vercel, Webflow다. 이 밖에 Adobe, Atlassian, Box, HubSpot, Notion의 활용 사례도 함께 소개했고, Figma와 Harvey, Shopify는 지금 연동을 만들고 있다.

### Claude가 MCP App에서 무언가를 바꾸기 전에 승인을 받아야 하나?

기본적으로는 그렇다. Claude는 앱 툴을 실행하기 전에 커넥터 이름과 툴 제목을 보여 주며 사용자에게 승인을 구한다. 다만 저장해 둔 Always allow 선택이나 대화의 Auto 권한 설정이 해당 호출을 이미 허용하고 있다면 묻지 않는다.

### MCP Apps는 Claude 밖에서도 동작하나?

동작한다. MCP Apps는 Model Context Protocol의 개방형 확장이고, MCP 문서는 VS Code GitHub Copilot, Microsoft 365 Copilot, Goose, Postman 같은 호스트를 지원 호스트로 꼽는다. 다만 preferredDisplayMode 같은 일부 기능은 Claude에서만 쓸 수 있다.

### 관리자가 커넥터를 지우지 않고 인터랙티브 커넥터만 끌 수 있나?

끌 수 있다. Team과 Enterprise 소유자는 조직 설정에서 인터랙티브 뷰를 그리는 툴 호출만 끌 수 있고, 이때도 커넥터의 텍스트 기반 툴은 계속 동작한다.

## 출처

1. [Your apps can now open in Claude, and Claude can work in them](https://claude.com/resources/articles/interactive-connectors-full-tool) — Anthropic, 확인한 날 2026-11-11
2. [More ways to work with Claude: Sheets, Whiteboards, and Interactive Connectors](https://claude.com/resources/articles/more-ways-to-work-with-claude-sheets-whiteboards-and-interactive-connectors) — Anthropic, 확인한 날 2026-11-11
3. [MCP Apps](https://modelcontextprotocol.io/extensions/apps/overview) — Model Context Protocol, 확인한 날 2026-11-11
4. [Get started with MCP Apps](https://claude.com/docs/connectors/building/mcp-apps/getting-started) — Anthropic (Claude docs), 확인한 날 2026-11-11
5. [Add an interactive UI to your MCP server](https://claude.com/docs/connectors/building/mcp-apps/quickstart) — Anthropic (Claude docs), 확인한 날 2026-11-11
6. [Let Claude call tools in your MCP App](https://claude.com/docs/connectors/building/mcp-apps/app-tools) — Anthropic (Claude docs), 확인한 날 2026-11-11
7. [Show your MCP App in the side panel or full screen](https://claude.com/docs/connectors/building/mcp-apps/display-modes) — Anthropic (Claude docs), 확인한 날 2026-11-11
8. [Embed a website in an MCP App](https://claude.com/docs/connectors/building/mcp-apps/embedded-sites) — Anthropic (Claude docs), 확인한 날 2026-11-11
9. [Use interactive connectors in Claude](https://support.claude.com/en/articles/13454812-use-interactive-connectors-in-claude) — Anthropic (Claude Help Center), 확인한 날 2026-11-11