공식문서 학습용으로 playwright mcp 사용하기 (with Codex)

 

playwright mcp란?

GitHub - microsoft/playwright-mcp: Playwright MCP server

LLM이 웹브라우저를 접근성 트리 기반의 구조화된 데이터로 다루며 자동화하도록 돕는 MCP 서버다.

동적으로 탐색하고, 클릭, 이동, 폼 제출, 스크롤 등을 전부 다 할 수 있다.

 

주로 아래와 같은 목적으로 사용한다.

• UI 플로우를 테스트
• 데이터 수집
• 웹 자동화 (파일 다운로드, 로그인, 검색 같은 반복작업)

크롤링이랑 비슷하다고 생각할 수도 있지만, 실제 웹페이지로 상호작용이 가능하다는게 가장 큰 특징이다.

 

토비의 AI 강의에서 playwright를 공식문서 학습용으로 사용하신다고 하셔서, 나도 도전해봤다.

내가 공식문서를 학습할 때 느끼는 pain point인

1. 영어 
2. 방대한 양
3. 내가 원하는 정보를 어디서 찾아야하는지

를 동시에 해결해줄 수 있는 mcp라고 느껴졌다.

 

개발자라면 다들 이런 페인포인트를 가지고 있을 것 같은데, 나는 너무 만족중이라 다들 한번씩 사용해보면 좋을 것 같다.

공식문서 학습용으로 사용해보기

Codex Cli를 통해서 적용했다.

1. 설치 & 사용

codex에 playwright mcp를 설치한다.

codex mcp add playwright -- npx -y @playwright/mcp

제대로 설치되었는지 확인하고 싶다면

~/.codex/config.toml안에 

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

가 들어있는지 확인해 보면 된다.

2. 프롬프트 작성

/set mcp playwright

너는 공식문서 학습 전용 코치다.

내가 URL을 주면:
1. Playwright MCP로 문서를 연다
2. 구조를 파악한다
3. 학습 순서를 설계한다
4. 각 섹션마다
   - 핵심
   - 이유
   - 사용처
   - 최소 예제
5. 지금 안 봐도 되는 섹션 명시
6. 불필요한 설명 금지

URL:

첫번째 줄의 /set mcp playwright는 반드시 작성해주고 그 뒤에 원하는 프롬프트를 작성하면 된다.

각자 자신이 어떻게 공식문서를 학습하고 싶은지, 불편했던 점이 무엇인지를 파악하고 작성하면 될 듯 하다.

 

프롬프트를 작성하고 ~/prompts 폴더를 만들어 그 하위에 저장했다.

만약 자신의 폴더가 있다면 거기다가 하면 된다.

3. 단축키 설정

codex "$(cat ~/prompts/doccoach.md)"

바로 codex + playwrightmcp + 프롬프트가 동작한다.

 

나는 doccoach 원하는 URL을 입력하면 바로 분석을 시작하도록 한번 더 설정을 추가했다.

(이 부분은 취향 차이이고 정답도 아니기 때문에 개인취향에 맞춰서 하면 될 것 같다.)

nano ~/.zshrc

 

가장 하단에 아래 코드를 추가한다.

doccoach () {
  codex "$(cat ~/prompts/doccoach.md)
$1"
}

 

이후 적용해준다

source ~/.zshrc

 

4. 사용

이제 터미널에 > doccoach https://내가-원하는-URL 을 입력하면 바로 codex가 mcp를 사용하여 해당 URL의 분석을 시작한다.

 

예시로 playwright-mcp 를 공식문서로 학습해봤다.

 doccoach https://www.npmjs.com/package/@playwright/mcp

playwright 페이지가 뜨면서, mcp가 분석을 한다. 이 때, 다른 페이지로 이동을 하기도 한다.

 

내 프롬프트 기준으로는

• 페이지 구조 요약
• 섹션별로 요약 및 코드 예시
• 다음으로 추천하는 페이지
• 굳이 보지 않아도 되는 페이지

등을 추천해준다.

실제 예시

 

사용후기

1. ~~한 부분 학습하고 싶은데 여기로 이동해줘 하면 찾아서 이동해준다.

예시로 › 나는 폼에 값을 넣는 부분을 보고싶어 거기로 이동해줘 라고 입력하면

이동하여 보여준다.

 

개 쩐 다. 진짜로 이것은 혁명이다. ctrl-f로 매번 이건가? 이거? 이러면서 값을 쳐보지 않아도 된다.

2. 이 문서에 관련해서 내가 궁금한 점들을 물어보면 이 페이지에 대한 데이터를 바탕으로 대답해준다.

아래는 내가 직접 얘기를 해본 예시이다.

데이터를 기반으로 대답하는 건 NotebookLM과 유사하지만, 직접 페이지를 이동하면서 바로바로 팩트체크를 할 수 있다는 점이 가장 큰 이점이라고 느꼈다.

물론 AI인 이상 100% 신뢰할 순 없다. 항상 주의해야한다.

---

내가 초반에 느낀 공식문서의 pain point를 

1. 영어 -> ai가 알아서 해석
2. 방대한 양 -> 구조적으로 분석해서 요약
3. 내가 원하는 정보를 어디서 찾아야하는지 -> 내가 자연어로 말하면 직접 찾아서 이동

로 해결해주었다. 너무너무너무너무너무너무너무 만족 중이다.

 

다른 사람들도 사용해보고 꿀팁이나, 더 좋은 mcp가 있다면 추천해주시길..