[AI]vscode에서 Playwright, Notion 사용해보기(Feat. MCP)

MCP란

Model Context Protocol

Model(AI 모델)이 다양한 Context(문맥)을 받아 활용할 수 있도록 약속된 Protocol(규칙)

LLM 모델이 외부 애플리케이션과 연동할 수 있도록 해주는 스펙

 

이는 프로토콜이다. LLM 애플리케이션과 Tool 서버 통신에 대해 정의한 규칙이다. 이 규칙만 따르면 어떤 SDK나 어떤 프로그래밍 언어 등 사용이 가능하다. 

 

(아직은 MCP에 대한 개념이 덜 잡혀서 천천히 공부해볼 예정이다.)

 

참고

https://bcho.tistory.com/1470

---

실습

참고

Playwright

브라우저 기반 웹 서비스 테스트 및 웹 크롤링 도구

Notion MCP

노션 워크스페이스 연동 및 문서화

vscode에서 playwright 사용해보기

vscode에 playwright MCP를 설치하고 연동해 사용해 보자. 

 

playwright MCP를 설치하기 위해 아래 링크를 참고해야 한다. 

https://github.com/microsoft/playwright-mcp

README에 나와 있는 Getting started를 따라하면 설치 가능하다. 현재 Gemini를 사용하고 있기 때문에 Gemini CLI를 이용해 진행하도록 하겠다. 

 

Gemini CLI는 settings.json 파일의 mcpServers 설정을 통해 MCP 서버를 찾고 연결합니다.

setting.json에서 MCP 서버 설정하기
2가지 주요 방식으로 설정할 수 있습니다.
1. 개별 서버 정의를 이한 최상위 mcpServers 객체
2. 서버 검색 및 실행을 제어하는 전역 설정을 위한 mcp 객체

 

더 자세한 내용은 GitHub을 참고하면 된다. 따로 규칙을 설정하지 않을 것이기에 README 페이지에 있는 Standard config를 사용했다.

.gemini 폴더를 생성하고 내부에 settings.json 파일을 만들어 복사 붙여넣기 했다. 

이후 gemini를 실행하면 된다.

MCP Server가 설치된 것을 확인할 수 있다.

 

이제 테스트를 해보자.

 

> playwright MCP 도구 이용해서 네이버 뉴스 IT/과학 헤드라인 첫 번째 기사 켜주세요. 

 

그러면 자동으로 브라우저가 오픈되고 브라우저를 통해 네이버 뉴스 IT/과학 헤드라인 첫 번째 기사를 띄워준다.

이 외에도 '세 번째 기사 켜주세요', '검색창에 XXX 검색해 주세요', '현재 페이지 캡처해 주세요' 등 다양한 명령을 할 수 있다.

 

문서화 테스트를 해보자.

 

> playwright MCP 도구 이용해서 네이버 뉴스 IT/과학 헤드라인 세 번째 기사를 켜주세요. 그리고 test.md 파일을 생성해 기사를 요약해 주세요. 

 

아래와 같은 결과를 얻을 수 있다.

 

vscode에서 Notion 사용해보기

vscode의 Copilot과 Notion MCP를 설치하고 연동해 사용해 보도록 하자.

 

공식 페이지이니 참고하도록 하자.

https://developers.notion.com/docs/get-started-with-mcp

 

notion을 키고 설정(settings) - 연결(connection)에서 Notion MCP를 들어가면 된다. 본인의 경우 진행한 이력이 있어 이미 존재한다.

Other AI tools를 선택하면 공식 페이지로 연결된다. 여기서 Streamable HTTP (Recommended)를 참고하자.

아래와 같이 작성했다.

start 버튼이 활성화 되는데 이를 클릭하자.

이후 vscode에서 notion mcp에 대해 허용하고 정의하고자 한다. 모두 허용하도록 하자.

 

정상적으로 설치가 되었다면 vscode copilot을 열어 확인해보자.

만약 copilot이 로그인되어 있지 않다면 GitHub 계정을 통해 로그인하자.

 

이제 테스트를 해보자.

아까 요약한 기사 test.md 파일을 notion에 페이지로 정리해달라고 해보자.

 

> notion에 'notion mcp test'라는 페이지를 만들고, test.md 파일 내용을 정리해 주세요.

 

결과를 확인해보자.

 

md 파일 내용이 노션 페이지로 정리된 것을 확인할 수 있다.