08. AI에 도구를 연동하기 : MCP

네이버지도에서 서울역에서 인천신항까지 자동차 경로를 검색하고, 검색 결과 화면을 캡처해. 그리고 경로들을 엑셀로 읽기 좋게 정리해.

⏰

3교시 · 13:00~13:50 개념 10분 · Playwright 설치 5분 · 테스트 5분 · 메일함 요약 15분 · 스킬로 저장 5분 · 스몰 프로젝트 10분 쉬는 시간 13:50~14:00

1. MCP란?

🔌

MCP (Model Context Protocol) = 다른 서비스를 나의 AI에게 연결하는 기술

AI는 기본적으로 대화만 할 수 있습니다. 이메일을 확인하거나, 웹사이트를 열거나, 파일을 조작하는 것은 AI 혼자서는 불가능합니다. MCP는 이런 외부 서비스를 AI에게 연결해주는 규약입니다.

😐

MCP가 없으면 AI는 대화만 할 수 있음. 외부 서비스를 조작할 수 없음.

🚀

MCP가 있으면 AI가 웹 브라우저, 이메일, 캘린더 등을 직접 조작할 수 있음.

2. MCP의 원리

비유로 이해하기

비유	설명
AI 혼자	눈과 귀가 없는 존재. 대화만 가능
AI + MCP	눈(브라우저), 귀(이메일), 손(파일 조작)을 달아주는 것

💡

MCP는 AI에게 "이 도구를 쓸 수 있어"라고 알려주는 연결 장치입니다. USB 케이블처럼, AI와 외부 서비스를 이어주는 역할을 합니다.

3. 이번에 사용할 MCP : Playwright

🎭

Playwright = 웹 브라우저를 자동으로 조작하는 도구

Playwright MCP를 연결하면 AI가 다음과 같은 일을 할 수 있습니다 :

웹사이트에 직접 접속

페이지 내용을 읽고 탐색

버튼을 클릭하거나, 검색어를 입력하는 등 브라우저 조작

수집한 정보를 정리하여 결과물 생성

예를 들어, "OO 기업 홈페이지에서 최신 뉴스를 가져와줘"라고 하면, AI가 직접 브라우저를 열고 뉴스를 수집해옵니다.

4. Playwright MCP 설치

⚙️

VS Code 터미널(메뉴 → 터미널 → 새 터미널)에서 아래 명령어를 실행하세요.

JavaScript

claude mcp add playwright npx @playwright/mcp@latest

설치가 완료되면 아래 명령어로 확인합니다 :

Plain Text

claude mcp list

✅

목록에 playwright가 보이면 설치 성공입니다. 이제 AI에게 웹 브라우저를 조작하라고 지시할 수 있습니다.

5. Playwright MCP 테스트

👋

본격 실습 전 가볍게 손에 익히기. AI가 진짜 네이버지도에 들어가서 경로를 검색하고 화면을 캡처하는 모습을 직접 봅니다.

JavaScript

네이버지도에서 서울역에서 인천신항까지 자동차 경로를 검색하고, 검색 결과 화면을 캡처해.
그리고 경로들을 엑셀로 읽기 좋게 정리해.

📁

결과물 : 캡처 1장, 엑셀 파일 1개

⚠️

크롤링 시 주의사항 : 크롤링 전에 해당 사이트의 robots.txt를 반드시 확인하세요. www.사이트주소.com/robots.txt 에 크롤링 허용 여부가 명시되어 있습니다. ※ 즉, 사이트에 따라 불법일 수 있다는 점을 인지해주시면 됩니다.

6. 실습 : 내 이메일 관련 작업 지시하기

1) 내 메일함 최근 10개 한 줄 요약

🔟

MCP로 설치한 Playwright를 그대로 사용합니다. Playwright가 실제 내 메일함에 들어가 받은편지함을 읽고, 최근 메일 10개를 한 줄씩 요약해 엑셀로 정리합니다.

클로드 코드에게 전달할 프롬프트 :

Playwright를 사용하여 내 이메일의 받은편지함에 들어가서 최근 받은 메일 10개를 각각 요약해서 새 엑셀 파일에 정리해줘. 발신자, 제목, 요약, 받은 시간, 중요도 순으로 정리해줘. 내 이메일은 이 사이트에서 확인 가능해 : {이메일 사이트 URL}

실행하면 Playwright가 브라우저 창을 띄우며 로그인을 요청합니다. 다음 두 가지만 직접 해주세요.

브라우저 창에 본인 이메일 ID와 비밀번호 직접 입력 (2단계 인증 코드도 직접 입력)

한 번 로그인하면 그 세션 동안은 다시 묻지 않습니다

✅ 클리어 조건 : 최근 메일 10개의 발신자, 제목, 요약, 받은 시간 엑셀 1장 정리

⚠️

네이버 메일은 안 될 수 있습니다. (네이버는 자동화 도구 차단)

사용하는 메일 서비스에 따라 로그인이 차단될 수 있다는 점을 참고해주세요.

2) 메일함 요약을 스킬로 저장하고 테스트하기

🧩

메일함 요약 흐름을 스킬로 저장하고, 새 대화창에서 다시 불러 같은 결과가 나오는지 확인합니다. Skill 실습의 두 단계(대화로 완료 → 스킬로 저장)를 그대로 손에 익히는 미션입니다.

진행 순서

같은 대화창에서 아래 첫 번째 프롬프트를 입력해 스킬로 저장합니다

/clear로 새 대화창을 열고 두 번째 프롬프트를 입력합니다. /스킬명을 치지 않아도 스킬이 자동 발동하는지 확인합니다

브라우저가 로그인을 다시 요구하면 직접 입력합니다

클로드 코드에게 전달할 프롬프트 :

(첫 번째 프롬프트 입력) 방금 완료한 메일함 요약 작업 흐름을 스킬로 만들어줘.

(/clear입력 후 새 대화창에서) 내 메일함 최근 10개를 요약해서 엑셀로 정리해줘.

✅ 클리어 조건 : 새 대화창에서 스킬 자동 발동 + 미션 10과 같은 형식의 엑셀 생성 ※ 미션 10 = 앞의 1) 「내 메일함 최근 10개 한 줄 요약」 실습. 그때 만든 엑셀과 같은 항목 · 같은 순서로 나오면 됩니다

7. 스몰 프로젝트 : 웹 조작 자율 실습 (15분)

🌱

프롬프트 예시 없이, 검색, 입력, 클릭이 필요한 웹 작업 직접 지시해보기 그냥 읽어오면 되는 페이지는 브라우저 조작 없이도 가능합니다. 이번에는 검색어를 넣고, 조건을 고르고, 버튼을 눌러야 결과가 나오는 화면을 골라 지시합니다. 본인 직무 줄의 예시를 그대로 시켜도 됩니다.

01 선사영업 : 장금상선 홈페이지 선박 위치 조회에서 선박명을 검색해 현재 위치 · 항로 표 작성

02 고객지원 : 장금상선 홈페이지 고객지원 → 자주찾는 질문에서 B/L · 운임 관련 질문을 골라 질문 · 답변 표 작성

03 운항 : 기상청 날씨누리 해상 단기예보에서 서해 · 남해 해역을 골라 이번 주 파고 · 풍속 표 작성

04 컨테이너장비 : 11번가에서 컨테이너 씨 · 자물쇠 같은 수리 자재를 검색해 규격별 가격 비교 표 작성

05 선사지점 : PORT-MIS 정보이용 → 선박입출항현황에서 인천항 · 평택당진항을 골라 입출항 예정 선박 표 작성

06 경영관리 : 전자공시 DART에서 거래처 · 경쟁사를 검색해 최근 공시 목록 표 작성

07 물류영업 : 관세청 수출입무역통계 수출입실적에서 화주의 주요 품목 · 연도를 골라 국가별 실적 표 작성

08 물류센터 : 국가물류통합정보센터 물류창고업 현황에서 경기 · 인천 지역을 골라 창고 현황 표 작성

09 운송 : ROAD PLUS 경로검색에 의왕 → 부산신항을 넣어 소요 시간 · 경로 표 작성

10 포워딩 : 인천국제공항공사 항공통계에서 월 · 지역을 골라 화물 실적 표 작성

11 선박관리 : 산업안전포털 안전보건 자료실에서 「선박」 · 「소방설비」를 검색해 안전자료 목록 표 작성

💡 만든 표를 1회차에 받은 내 직무 엑셀과 나란히 놓고 보면 더 쓸모 있습니다. 예 : 「방금 만든 해상예보 표와 운항팀_항차운항실적 파일을 같이 보고 지연이 생길 만한 항차를 알려줘」

✅ 클리어 조건 : 업무에서 실제로 쓰는 웹사이트에서 Claude Code가 수집해 만든 결과물 파일 1개 💡 막히면 원하는 결과를 더 구체적으로 다시 지시해주세요!

8. 마무리 : 같은 작업을 다음엔 더 빨리

💡

이런 반복 작업은 앞에서 배운 Skill로 등록하면 한 마디로 다시 실행할 수 있습니다.

그러면 Claude Code가 방금 한 절차를 그대로 문서로 정리해서 스킬로 저장합니다.

다음에 같은 작업을 시키면 첫 번째보다 훨씬 빠르게 끝납니다.

반복하는 웹 작업도 이렇게 Skill로 등록해두면, 같은 일을 두 번 설명할 필요가 없습니다.

🪜

다시 한번 · 스킬 만드는 방법 (2교시 07 Skill) 1️⃣ 클로드 코드와 대화하며 작업을 끝까지 한 번 완료합니다 (예 : 7절 웹 조작 실습) 2️⃣ 같은 대화창에서 한 줄로 저장합니다 : 방금 완료한 작업 흐름을 스킬로 만들어줘 3️⃣ /clear 로 새 대화를 열고 방금 설치한 스킬 보여줘 또는 /skills 로 목록에 생겼는지 확인합니다 4️⃣ /스킬명 없이 같은 일을 한 줄로 시켜 스킬이 스스로 켜지는지 확인합니다

9. (부록) PC화면 전체를 맡기는 computer-use

🖥️

computer-use = AI가 화면 전체를 사람처럼 직접 보고, 마우스와 키보드로 조작하는 기능

지금까지 본 Claude Code는 내 컴퓨터의 파일을, Playwright는 웹 브라우저 안을 다뤘습니다. computer-use는 여기서 한 단계 더 나아가, 웹이 아닌 일반 프로그램까지 화면 전체를 직접 조작합니다. AI가 화면을 눈으로 보고 마우스를 움직이고 키보드를 입력하는 방식이라, 사람이 컴퓨터를 쓰는 모습과 거의 같습니다.

어디에 쓸 수 있나

웹이 아닌 사내 전용 프로그램에 반복 입력, 조회

화면을 보고 판단해야 하는 단순 반복 작업 대행

여러 프로그램을 오가며 옮겨 적는 작업 자동화

쓸 수 있는 조건 (2026년 10월 기준 · 베타)

항목	내용
요금제	Pro · Max 개인 요금제만 됩니다. 팀 · 기업(Team · Enterprise) 계정은 쓸 수 없습니다
윈도우	클로드 데스크톱 앱에서만 됩니다. VS Code 터미널의 클로드 코드에서는 안 됩니다
맥	데스크톱 앱과 터미널 클로드 코드 둘 다 됩니다
켜져 있어야 하는 것	컴퓨터가 깨어 있고 데스크톱 앱이 열려 있어야 합니다

켜는 방법 : 클로드 데스크톱 앱 (윈도우 · 맥)

🛠️

① claude.com/download 에서 데스크톱 앱을 최신 버전으로 받습니다 ② 앱 왼쪽 아래 내 이름 → 설정 → 왼쪽 메뉴 이 컴퓨터 → 시스템 → 아래로 내려 컴퓨터 사용 (베타) → 컴퓨터 사용 활성화 스위치를 켭니다 (영문 화면 : Settings → This computer → System → Enable computer use) ③ 데스크톱 앱의 대화창이나 Claude Code에서 새 작업을 시작합니다 ④ 내 컴퓨터의 프로그램이 필요한 일을 시킵니다. 클로드가 프로그램마다 접근해도 되는지 묻고, 허락해야 움직입니다

맥 터미널의 클로드 코드에서는 /mcp → computer-use → Enable 을 고르고, 맥 설정에서 손쉬운 사용 · 화면 기록 권한을 허락합니다.

🔎

컴퓨터 사용 화면에서 볼 것 4가지

컴퓨터 사용 활성화 : 켜야 클로드가 허용한 앱을 보고 작업합니다

Claude가 완료되면 앱 숨기기 해제 : 켜 두면 작업 중 숨겨진 앱이 끝난 뒤 다시 보입니다

허용한 앱을 사용하는 방식 : 백그라운드는 내가 컴퓨터를 쓰는 동안 뒤에서 작업하고, 화면을 넘겨받기 전에 묻습니다. 전체 제어는 다시 묻지 않고 화면 · 마우스 · 키보드를 씁니다. 처음에는 백그라운드를 권합니다

거부된 앱 : 앱 추가로 정한 앱은 클로드가 요청해도 자동으로 거부됩니다. 메신저 · 결재 · 회계 프로그램을 미리 넣어 둡니다

작동 방식

⚙️

클로드는 가장 정확한 도구부터 씁니다 1️⃣ 연결된 도구(MCP · 커넥터)가 있으면 그것부터 2️⃣ 웹 작업이면 브라우저 3️⃣ 둘 다 없을 때만 화면 조작(computer-use) : 화면을 스크린샷으로 보고, 마우스로 클릭하고, 키보드로 입력합니다 그래서 화면 조작은 가장 느리고, 복잡한 일은 두세 번 다시 시켜야 할 수 있습니다.

처음에는 이렇게 간단한 일부터 시켜 봅니다.

Plain Text

메모장을 열어서 오늘 회의 안건 3줄을 적고, 바탕화면에 회의안건.txt 로 저장해줘

익숙해지면 프로그램 안에서 여러 단계를 거치는 일을 시킵니다. 예시 2 · Numbers 안에서 피벗 표와 차트 만들기 (강사 맥북 시연 · 윈도우는 Numbers 대신 엑셀)

Plain Text

데스크탑의 서울 바이브코딩 폴더에 있는 러시아영업팀_러시아항로부킹내역_2025_(더미).xlsx 를 Numbers 로 열어줘.
새 시트에 POD(도착항)별 · 상태별 TEU 합계 피벗 표를 만들고, 막대 차트를 넣어줘.
다 되면 같은 폴더에 러시아항로_도착항별.numbers 로 저장해줘

예시 3 · Numbers 와 PowerPoint 를 오가며 보고자료 만들기 (강사 맥북 시연)

Plain Text

데스크탑의 서울 바이브코딩 폴더에 있는 러시아영업팀_러시아항로부킹내역_2025_(더미).xlsx 를 Numbers 로 열어서
상태가 롤오버인 부킹이 많은 화주 3곳을 찾아줘.
그다음 Microsoft PowerPoint 를 열어 화주별 부킹 건수 · 롤오버 건수 · TEU 를 담은 3장짜리 보고자료를 만들고,
같은 폴더에 러시아항로_롤오버화주.pptx 로 저장해줘

⚠️ Numbers · PowerPoint · Finder(윈도우는 엑셀 · 파워포인트 · 파일 탐색기)를 쓸 때마다 접근 허락을 묻습니다. Finder · 파일 탐색기는 모든 파일을 읽고 쓸 수 있으니, 폴더 안에 다른 중요 파일이 없는지 확인하고 허락합니다.

⚠️

주의사항 1) 개인 계정으로만 사용 가능합니다. 팀/기업 플랜의 계정은 사용이 불가합니다. 2) 화면 전체를 다루는 만큼 AI에게 열어주는 권한 범위가 넓습니다. 3) 클로드는 화면을 스크린샷으로 봅니다. 대외비 파일 · 메신저 · 결재 시스템은 닫고 씁니다. 4) 은행 · 인사 · 회계처럼 민감한 프로그램은 접근을 허락하지 않습니다.