1. Chrome DevTools Protocol (CDP) 이란?

🔧 Chrome 팀이 F12(개발자 도구)를 위한 내부 프로토콜을 외부로 노출한 것

• 개발자 도구(Developer Tools) 자체가 이 프로토콜로 브라우저와 통신
• 즉, 개발자 도구로 할 수 있는 모든 일을 코드로 실행할 수 있게 해주는 API (WebSocket)

```mermaid flowchart LR A["F12 Developer Tools"] -->|uses| B["Chrome DevTools\\nProtocol"] C["Python / Node Script"] -->|same protocol| B B -->|WebSocket\\nws://localhost:9222| D["Chrome Engine"] style C fill:#10b981,color:#fff style B fill:#3b82f6,color:#fff

```

2. 만능은 아닙니다 — Chromium 기반 앱만 가능

⚠️ CDP는 Chromium 엔진 기반 애플리케이션에서만 동작합니다

App	Category	CDP Use Case
Notion	Docs / Wiki	Page CRUD, Block manipulation, Internal API
Figma	Design	Component query, Style extraction
Slack	Messenger	Message read, Channel management
Obsidian	Notes	Markdown manipulation
Discord	Community	Message read, Server management
VS Code	Code Editor	Editor manipulation, Extension control
Cursor	AI Editor	Editor manipulation, AI integration

3. 테스트할 작업: visualize-notion 스킬

Notion의 다양한 네이티브 기능(Column, Callout, Table, Mermaid 등)을 활용하여 콘텐츠를 시각적으로 구성하는 Claude Code 스킬입니다.

활용하는 Notion 기능

Feature	Purpose	Effect
Column	Side-by-side layout	Before/After, A vs B comparison
Callout	Highlight key info	Conclusion, Warning, Tip
Table	Structured data	Spec comparison, Item-by-item
Mermaid	Diagrams / Charts	Flowchart, Sequence diagram
Toggle	Collapsible content	Hide long details
Divider	Section separator	Visual separation

⌨️ 호출 방법: Claude Code에서 /visualize-notion 입력

4. 기존 방식: MCP 동작 원리

🔴 LLM은 stateless → 매 턴마다 이전 대화를 처음부터 다시 읽어야 합니다

실제 생성 요청 시 진행 과정

1. column 추가 요청 → API 호출 → 결과 반환
2. column 결과(context) + callout 추가 요청 → API 호출 → 결과 반환
3. column 결과 + callout 결과(context) + table 추가 요청 → API 호출 → 결과 반환
4. column + callout + table 결과(context) + mermaid 추가 요청 → API 호출 → 결과 반환

💸 턴 수 \= Notion 블록 수 (API 호출마다 1턴 소모) → context 누적만큼 토큰 소모 기하급수적 증가!

MCP Sequence Diagram

```mermaid sequenceDiagram participant LLM participant MCP as MCP Server participant API as Notion API

Note over LLM: Turn 1 - Input 1,000 tokens
LLM->>MCP: column block append
MCP->>API: API Call
API-->>LLM: result (+500 tokens)

Note over LLM: Turn 2 - Input 1,500 tokens (context grows)
LLM->>MCP: callout block append
MCP->>API: API Call
API-->>LLM: result (+500 tokens)

Note over LLM: Turn 3 - Input 2,000 tokens (context grows)
LLM->>MCP: table block append
MCP->>API: API Call
API-->>LLM: result (+500 tokens)

Note over LLM: Turn N - Input 500xN tokens
LLM->>MCP: block N append
MCP->>API: API Call
API-->>LLM: result (+500 tokens)

```

Turn별 토큰 소모량 (블록 10개 기준)

Turn	Action	Input Tokens	Cumulative Context
1	column 추가	1,000	500
2	callout 추가	1,500	1,000
3	table 추가	2,000	1,500
4	mermaid 추가	2,500	2,000
5	text 추가	3,000	2,500
...	...	...	...
10	마지막 블록	5,500	5,000
Total	—	32,500	—

5. 개선 방식: CDP 동작 원리

🟢 CDP는 사람처럼 직접 브라우저를 조작합니다 — / 입력, column 선택, Enter 입력 등

실제 생성 요청 시 진행 과정

1. 사람처럼 동작하도록 미리 Script 작성 (토큰 소모!)
2. Script 실행 — 모든 Notion 요소(column, callout, table, mermaid) 한번에 생성
3. 완료 — 끝!

✅ 턴 수 없음! API 호출이 아니라 직접 브라우저를 열어서 사람처럼 동작하므로 context 누적 없음

CDP Sequence Diagram

```mermaid sequenceDiagram participant LLM participant CDP as CDP WebSocket participant Browser as Notion Browser

Note over LLM: Turn 1 - Script generation (5,000 tokens)
LLM->>LLM: Generate script with ALL blocks

Note over LLM: Turn 2 - Execution (500 tokens)
LLM->>CDP: Execute script
CDP->>Browser: submitTransaction (all blocks at once)
Browser-->>LLM: OK

Note over LLM: Total: 2 turns, 5,500 tokens

```

Turn별 토큰 소모량 (블록 10개 기준)

Turn	Action	Input Tokens	Note
1	Script 작성	5,000	모든 블록 포함 (토큰 소모!)
2	Script 실행	500	결과만 반환
Total	—	5,500	Context 누적 없음

6. MCP vs CDP 최종 비교

❌ MCP 방식

• 매 턴마다 Notion API 호출
• API 결과가 Context에 누적
• 블록 10개 → 10턴 소요
• 총 32,500 tokens 소모

✅ CDP 방식

• Script 1회 작성 + 1회 실행
• Context 누적 없음
• 블록 10개 → 2턴 소요
• 총 5,500 tokens 소모

Compare	MCP	CDP
동작 방식	API 호출 (턴마다)	Script 실행 (1회)
턴 수 (블록 10개)	10턴	2턴
Context 누적	O (매턴 증가)	X (고정)
Input Tokens	32,500	5,500
토큰 절감율	—	\~83% 절감
블록 수 증가 시	기하급수 증가	선형 증가 (Script 크기만)

7. 핵심 아이디어

🔑 MCP 활용 중 API 호출 후 결과를 받고, 그 결과가 context에 누적되며 다음 API를 호출해야 하는 경우 → context 누적으로 인한 급격한 토큰량 증가

🎯 CDP는 Script 작성 후 실행 → context 누적 없음 → 토큰 \~80% 절감