• 로그인
  • 장바구니에 상품이 없습니다.

MCP로 브라우저 업무 자동화 1

 

0:00 폴더를 에디터 오픈부터

0:46 playwright MCP서버 설치는

4:06 Gemini CLI 쓰는 경우 MCP서버 설치는

4:59 MCP서버를 특정 폴더에서만 쓰려면

6:00 잘되나 테스트

 

 

실제로 MCP서버를 하나 사용해서 AI를 agent로 업그레이드 해봅시다.

일단 MCP client가 들어있는 Gemini CLI, Cursor 같은 프로그램을 준비해봅시다.

강의에서는 주로 Cursor를 사용합니다.

CLI 프로그램 쓰는 분들은 VSCode 같은 에디터 켜서 함께 쓰는게 좋습니다.

 

 

 

 

그럼 일단 작업용 폴더부터 아무데나 하나 만들고 에디터로 그걸 오픈하고 시작합시다.

File - Open Folder 메뉴 누르면 폴더 오픈 가능합니다.

사진처럼 작업용 폴더 이름이 왼쪽 위에 뜨면 준비 끝입니다.

그리고 Node.js도 필요하니까 설치안했으면 설치해옵시다.

 

 

 

 

 

Playwright MCP

 

아마 가장 유용한 MCP서버가 브라우저 조작을 해주는 MCP서버가 아닐까요.

그걸 설치해서 써봅시다.

그럼 AI가 웹브라우저업무들을 대신 해줄 수 있잖아요. 

브라우저 조작 MCP서버가 뭐 있나 찾아보면 되는데 우리는 누가 만들어둔 playwright MCP 서버를 써봅시다.

 

 

참고로 playwright은 웹 브라우저를 이용하는 테스트 자동화 도구인데

누가 MCP서버로도 만들어놨습니다.

 

 

 

 

 

{
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": [
          "@playwright/mcp@latest"
        ]
      }
    }
}

구글에 playwright MCP 검색해보면 무슨 중괄호로 시작하는 설치코드를 찾을 수 있습니다.

이걸 Cursor 에디터 설정에 붙여넣기 하면 playwright MCP서버 설치 끝입니다.

 

 

 

 

▲ 일단 Cursor 에디터 쓰는 경우에는 설정들어가보면 MCP서버를 추가할 수 있는 부분이 있습니다.

이거저거 눌러보면 .json 파일이 열리는데 거기에 코드를 복붙하면 되겠습니다.

 

 

 

 

복붙은 어떻게 하냐면 일단 아무것도 없으면 그대로 복붙하면 되고 

이미 뭔가가 있으면 차이점만 잘 복붙하면 되겠습니다.

파일 저장까지 잘 합시다.

 

 

 

{
    "mcpServers": {
      "MCP서버1": {},
      "MCP서버2": {},
      "MCP서버3": {}
    }
}

차이점이라고 하면 또 모를 수 있으니까

MCP서버가 여러개 들어있다면 "mcpServers" : { } 중괄호 안에

"MCP서버1" : {},

"MCP서버2" : {}

이런 형식으로 계속 추가하면 되겠습니다.

콤마로 여러개 구분하는거 중요한데 마지막은 콤마가 없어야합니다.

잘 모르겠으면 AI한테 그대로 복붙한 다음에 어떻게 합치냐고 물어보는게 빠를 수 있습니다.

 

참고로 작업용 폴더 안에 .cursor 폴더 만들고 그 안에 mcp.json 파일을 만들고 설치코드 복붙해둬도 됩니다.

그럼 현재 작업용 폴더를 오픈했을 때만 MCP서버 사용이 가능합니다.

 

 

 

그럼 아무튼 MCP 설치가 잘 되었으면 Cursor 설정에서 파란불이 떠야하는데

안뜨면 윈도우의 경우 시작 - 검색 - powershell 검색 후 관리자모드로 실행해서

Set-ExecutionPolicy RemoteSigned 입력하고 y 입력하고 전부 껐다켜서 다시 시도해봅시다.

 

 

 

 

 

 

Gemini CLI에서 MCP서버 설치는

 

 

Gemini CLI 쓰려면 어디에 MCP서버를 설치해야하냐면

작업용 폴더만든 곳 안에 .gemini 폴더 만들고 그 안에 settings.json 파일을 만들어서 아까 중괄호 { } 코드 복붙하고 저장해둡시다.

그리고 설치했으면 터미널을 껐다가 다시 켭시다.

 

 

 

 

 

 

AI + MCP서버 써보기 1. 크롤링

 

Playwright MCP 설치된걸 잘 살펴보면 웹페이지 접속, 클릭, 문자 수집, 다운로드 등 많은 작업을 할 수 있다고 나와있습니다.

그래서 AI도 그 작업을 전부 할 수 있게 됩니다.

 

 

 

 

▲ Cursor는 우측에서 AI를 소환할 수 있는데 거기에서 "finance.naver.com 접속해서 코스피지수 몇인지 알아와"라고 해봅시다.

원래 AI는 문장생성기일 뿐 웹페이지 접속기능은 없어서 실패할 수 있습니다.

하지만 우리는 playwright MCP를 설치해놨기 때문에 AI가 브라우저 사용이 가능합니다.

멍청해서 MCP 안쓰는 것 같으면 MCP 쓰라고 강제로 명령하면 되겠습니다.

 

 

 

 

▲ 참고로 MCP사용할 때마다 유저 허락을 받아야합니다.

귀찮으면 Agent버튼이 어딘가에 있는데 거기서 자동승인 옵션을 켤 수 있습니다. (Auto-run)

Gemini는 Yolo 모드가 비슷합니다.

 

지금은 MCP서버로 크롤링만 약간 해봤을 뿐인데 다음 시간엔 더 다양한 작업을 해보도록 합시다.

 

 

 

 

 

 

 

SEE ALL Add a note
YOU
Add your Comment

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠