00:00:00Playwright CLI는 코딩 에이전트와 함께 Playwright를 사용하는 최신 방식으로,
00:00:04로컬 및 세션 스토리지 관리, 스냅샷 촬영, 탭 관리 등
00:00:09Playwright 엔진의 모든 기능을 터미널에서 그대로 사용할 수 있게 해줍니다.
00:00:12하지만 왜 Playwright MCP 서버 대신 이걸 사용하는 걸까요?
00:00:17사실, 왜 기존 MCP 서버였던 도구들이 점점 CLI로 구축되고 있는 걸까요?
00:00:22구독 버튼을 누르시고, 본격적으로 알아보겠습니다.
00:00:24먼저 한 가지 간단한 작업으로 Playwright CLI와 MCP 서버를 테스트해 보죠.
00:00:31제가 개발 중인 트위터 영상 다운로드 도구를
00:00:35테스트하는 과정을 도와달라고 요청할 겁니다.
00:00:36Playwright에게 이 트윗 링크를 가져와서 여기에 붙여넣고 영상을 추출한 뒤,
00:00:4010초 동안 기다렸다가 스크린샷을 찍고 로컬 스토리지를 비우라고 할 겁니다.
00:00:45그래야 다음 에이전트가 깨끗한 상태에서 시작할 수 있으니까요.
00:00:48먼저 Claude Code에서 Playwright CLI를 사용해 보겠습니다. 설치를 완료하면
00:00:54여기에서 해당 스킬을 사용할 수 있습니다.
00:00:56겨우 68개의 토큰만 차지한다는 점에 주목하세요.
00:00:59이제 에이전트에게 작업을 더 쉽게 수행하도록 Playwright CLI 스킬을
00:01:03명시적으로 사용하라는 프롬프트를 입력하겠습니다.
00:01:06엔터를 누르면 스킬을 로드하고, 텍스트 박스에 URL을 입력한 뒤
00:01:11“Extract Video”를 클릭하고 10초 동안 대기합니다.
00:01:13스크린샷을 찍고 로컬 스토리지를 비운 뒤 브라우저를 닫았습니다.
00:01:17모든 작업이 완료되었고 스크린샷이 저장되었다고 나오네요. 확인해 보면
00:01:21영상이 성공적으로 다운로드된 것을 볼 수 있습니다.
00:01:24전체 과정에서 약 16%의 토큰이 사용되었습니다.
00:01:27이제 MCP 서버를 사용해 동일한 작업을 시도해 보겠습니다.
00:01:29MCP 명령어를 사용해 서버가 설치되어 있는지 확인합니다.
00:01:33실행하기 전에 컨텍스트를 한번 살펴보겠습니다.
00:01:35위로 올려보면 이미 컨텍스트의 15%가 사용 중인 걸 알 수 있는데,
00:01:41약 3,600개의 토큰을 차지하는 MCP 도구들이 모두 로드되었기 때문입니다.
00:01:46이 점을 염두에 두고 동일한 프롬프트를 사용하겠습니다.
00:01:50CLI 스킬 대신 Playwright MCP 서버 도구를 사용하고 있다는 점을 확인하세요.
00:01:55MCP 서버를 사용하여 새로운 브라우저를 실행했습니다.
00:01:59그런 다음 입력창에 링크를 붙여넣었습니다.
00:02:01이제 버튼을 클릭할 차례입니다.
00:02:02MCP 서버는 CLI보다 훨씬 더 많은 권한을 요청하는데, 이건 괜찮습니다.
00:02:08스크린샷 촬영 중에 몇 가지 문제가 발생했는데, 아마 같은 이름의
00:02:12파일이 이미 존재하기 때문일 수도 있습니다.
00:02:13Playwright MCP 서버로 다시 시도해 보았고, 다른 스크린샷 이름을
00:02:17사용했음에도 불구하고 스크린샷을 추출하는 데 여러 번 실패했습니다.
00:02:22이제 작업이 끝났습니다.
00:02:23스크린샷 촬영을 제외한 모든 작업을 수행했습니다.
00:02:26컨텍스트를 확인해 보면 35,000개, 즉 18%를 사용했습니다.
00:02:32CLI보다 약간 더 많이 사용했는데, 대부분은 MCP 도구 자체가 차지한 양입니다.
00:02:37사실 동일한 작업을 수행하면서 컨텍스트를 약간 더 줄일 수 있는 방법이 있는데,
00:02:43그 부분은 영상 후반부에서 설명해 드리겠습니다.
00:02:45물론 이것은 하나의 예시일 뿐이며, 작업에 따라 MCP 서버가
00:02:51Playwright CLI보다 토큰을 적게 쓰는 경우도 있을 수 있지만, 글쎄요.
00:02:56또한 16%와 18%의 차이가 그리 크지 않다고 생각하실 수도 있습니다.
00:03:02하지만 CLI는 MCP 서버보다 다른 장점들도 가지고 있습니다.
00:03:06기본적으로 Playwright MCP 서버는 사용 가능한 모든 도구를 노출하지 않습니다.
00:03:11사실 PDF 생성이나 트레이싱 같은 추가 도구를 사용하려면
00:03:16컨텍스트를 너무 많이 차지하기 때문에 별도로 선택해서 활성화해야 합니다.
00:03:19반면 CLI에는 그런 제한이 없습니다.
00:03:22모든 도구를 처음부터 바로 사용할 수 있죠.
00:03:25그리고 CLI는 에이전트뿐만 아니라 사람에게도 유용합니다.
00:03:29반복되는 작업이나 E2E 테스트를 위해 간단한 배시 스크립트를 만들면,
00:03:34사람이 결과를 확인하기 위해 실행할 수도 있고 에이전트도 실행할 수 있습니다.
00:03:39그렇다고 MCP 서버가 쓸모없다는 뜻은 아닙니다. 터미널뿐만 아니라
00:03:44브라우저, 데스크톱, 모바일 앱 등 어디서든 실행되는 에이전트 루프를 만든다면
00:03:49MCP 서버가 완벽합니다. 에이전트가 도구에 액세스하는 표준 프로토콜이기 때문이죠.
00:03:54또한 Playwright는 자바스크립트나 타입스크립트 코드를 실행하므로,
00:03:59자바스크립트 런타임을 지원하는 모든 환경에서 이 코드를 실행할 수 있습니다.
00:04:03또한 MCP 서버는 기본적으로 헤드 모드(화면 표시)로 실행되지만, CLI는 코딩
00:04:09에이전트에서 백그라운드로 실행되도록 설계되어 헤드리스 모드로 실행됩니다.
00:04:13Playwright MCP 서버의 토큰 사용량을 줄이고 싶다면,
00:04:17특정 도구를 켜거나 꺼서 설정할 수 있습니다.
00:04:20사실 토큰 사용량을 최소화하는 것이 목적이라면 Playwright CLI도
00:04:26최선의 선택은 아닙니다. 내부적으로 Playwright를 사용하지만
00:04:32Rust 기반 CLI를 갖춘 Agent Browser가 더 빠르고 토큰도 적게 쓰도록 설계되었습니다.
00:04:38앞선 제 예시에서 보신 것처럼 말이죠.
00:04:39다음 영상에서 Agent Browser에 대해 자세히 알아보고,
00:04:43코딩 에이전트의 브라우징 능력을 한 단계 업그레이드해 보세요.