Claude Desktop로 WWDC 요약하기 (Puppeteer, MCP)

안녕하세요 아렉스입니다 :>

Claude는 데스크탑 버전에서 MCP(Model Context Protocol)을 통해 외부 도구와 연동할 수 있는 기능을 제공합니다.

그중 Puppeteer MCP 서버는 웹 자동화 도구로 매우 유용한데요, 이번 포스팅에서는 Puppeteer MCP 서버를 설정하고, 흔히 겪는 오류 해결법까지 정리해보겠습니다.

 

실제로 해보지않아도 경험할 수 있게끔 과정들을 캡쳐해보았습니다 !

 

1. 데스크탑 Claude 설치

---

사용하는 OS를 선택하여 설치하시면 됩니다. [바로가기 링크]

 

2. Node.js 설치하기

---

npx 명령어를 사용하는 만큼, Node.js가 설치되어 있어야 합니다. brew 혹은 Node.js 공식 사이트에서 설치하세요.

 

 

설치되지 않은 경우 아래와 같은 오류가 발생합니다:

• ❌ MCP puppeteer: spawn npx ENOENT
• ❌ Server disconnected

 

3. 설정 편집하기 (개발자 탭에서 JSON 수정)

---

Claude 앱을 실행하고
설정 > 개발자 탭 > 설정 편집을 클릭하면 설정 파일을 열 수 있습니다. (혹은 단축키 커맨드 + , 누르시면 됩니다 !)

 

 

 

설정 편집 클릭시 디렉토리로 이동하게 됩니다. claude_desktop_config.json 에서  사용할 MCP 모델 설정 가능합니다.

이 파일은 JSON 포맷이므로 VSCode 등 편집기에 붙여 넣어 편집하면 관리하기 쉽습니다.

 

 

 

4. MCP 설치

WWDC 영상 리포트를 위해 Puppeteer를 사용할 예정입니다 아래 링크르 통해 이동해주세요

 

https://github.com/modelcontextprotocol/servers

 

 

Puppeteer에서 NPX JSON을 복사합니다

 

5. Claude 재실행 및 MCP 서버 확인

---

JSON 편집을 마쳤다면, 설정을 저장하고 Claude를 재시작하면 MCP 서버 목록에 Puppeteer가 활성화됩니다.

 

프롬프트 입력 창에 망치모양과 커넥터 모양이 나왔다면 성공입니다. 눌러서 아래 이미지와 같이 Puppeteer가 나오지는 확인하세요.

 

5. 실제 사용 예시

---

아래는 Puppeteer를 이용해 WWDC 유튜브 링크 내용을 요약해달라고 요청하는 예시입니다

하지만 Claude는 브라우저 접근 권한이 없어 실제 크롤링은 못할 수도 있습니다.

puppeteer 를 사용해서 https://www.youtube.com/watch?v=eytrguSSYN8 
해당 영상 내용기술적인 부분은 생략하지않고 주요 내용을 요약하고 정리한 리포트를 작성해줘

// 영상 , 코드 삽입 시 유료 모델 필요

 

도구 사용시에 권한 요청이 나옵니다. 전 귀찮아도 이 대화에 허용만 클릭하였습니다.

 

결과 공유

 

https://claude.ai/share/39610233-d9a3-446a-bd46-ca092a5dd2d9

 

참고 링크

---

• Claude 공식 MCP 문서
• Node.js 설치하기
• Puppeteer MCP 서버 GitHub

잘못된 내용 혹은 이해가 어려운 내용들은 언제든 댓글에서 의견 교환하고 싶습니다!
공감과 구독은 더 나은 글을 작성되는데 큰 도움이 됩니다.

읽어주셔서 감사합니다.