Claude Code에게 궁금한 웹 페이지의 내용을 물어본 적이 있는가. URL을 전달하면 대부분은 대답해 주지만, 로그인을 해야 볼 수 있는 페이지나 나중에 내용이 바뀌는 페이지가 되면 갑자기 "그 페이지는 직접 볼 수 없으니, 텍스트를 복사해서 붙여넣어 주세요"라고 답변이 돌아온다. 실제로 화면을 열고, 클릭하고, 거기에 적힌 내용을 읽는 것 —— 그 부분만큼은 지금까지의 Claude Code가 할 수 없었던 영역이었다.

그러고 보니, GitHub Copilot은 이전부터 브라우저를 다루고 있었다는 사실이 떠올랐다. 실제로 사용해 보았을 때, 지시를 내리면 페이지를 열어 내용을 가져오는 장면을 본 적이 있다. 같은 기술이 Claude Code에 없을 리가 없다고 생각하여 찾아보니, 쉽게 발견할 수 있었다.

GitHub Copilot과 Claude Code를 실제로 비교 사용하며 역할의 차이를 어떻게 느꼈는지는 개인 블로그(GitHub Copilot을 1개월, Claude Code를 2일 사용해 보았다 — 코딩 파트너와 에이전트는 별개였다 · 외부 사이트로 이동합니다)에 적어 두었다.

Claude Code 본체(CLI 또는 VS Code 확장)를 한 번이라도 실행해 본 적이 있는 사람을 대상으로 한다. 아직 해보지 않은 분들을 위해 "참고한 공식 페이지"에 도입 절차 링크를 두었다. Node.js가 설치되어 있는지 확인하는 것부터 본문에서 순차적으로 진행한다.

이번에 시도하는 것은 왼쪽, 자신의 PC 안에서 동작하는 작은 프로그램을 1개 늘리는 방식이다. 오른쪽의 "계정 측에서 연동하는 방법"은 인증 메커니즘과 설정 위치가 완전히 다르므로 별도의 기사로 넘긴다.

특별한 계약이나 API 키는 필요하지 않다. 이번에 추가하는 Playwright MCP는 로컬에서 완결되는 도구이므로 계정 등록의 번거로움도 없다.

Playwright는 원래 Microsoft가 공개한, 브라우저를 자동 조작하기 위한 테스트용 도구다. 버튼을 누르기, 글자 입력하기, 페이지 내용 읽기 등의 조작을 프로그램으로부터 수행할 수 있다. Playwright MCP는 이러한 조작을 Claude Code와 같은 AI 어시스턴트에서 직접 호출할 수 있도록 만든 MCP 서버로, 마찬가지로 Microsoft가 공식적으로 배포하고 있다 (출처: Playwright MCP GitHub).

Playwright MCP는 npx 명령어를 통해 기동한다. npx는 Node.js에 부속되어 있으므로, 먼저 설치되어 있는지 확인한다.

node --version
npx --version

버전이 표시되면 준비 완료. 아무것도 표시되지 않거나 명령어를 찾을 수 없다고 나오는 경우에는 Node.js 공식 사이트에서 LTS 버전을 설치한 후, 터미널을 다시 열어 재확인한다.

Claude Code의 터미널 또는 일반 터미널에서 다음 명령어를 실행한다.

claude mcp add playwright --scope user -- npx -y @playwright/mcp@latest

-- 뒤가 그대로 실행되는 명령어로, npx -y @playwright/mcp@latest가 Playwright MCP 본체의 기동 명령에 해당한다. 이 한 줄의 등록 작업 자체가 Playwright MCP 본체의 설치를 겸하고 있다 —— npx가 지정된 패키지를 취득하여 실행하는 부분까지 처리해 주므로, 사전에 어디선가 별도로 다운로드해 둘 필요는 없다.

--scope user를 붙인 이유는, 앞으로 어떤 프로젝트에서 Claude Code를 열더라도 동일한 Playwright MCP를 사용할 수 있도록 하기 위해서다 (붙이지 않으면 현재 프로젝트에서만 유효한 설정이 된다).

명령어가 성공하면 설정 파일(~/.claude.json. Windows라면 C:\Users\<사용자명>\.claude.json)의 최상위 계층에 있는 mcpServers 안에 다음과 같은 형태로 기록된다.

{
"mcpServers": {
"playwright": {
...

이는 설정이 저장되었음을 나타낼 뿐이며, 이 시점에서는 아직 실제로 접속한 상태는 아니다.

MCP 서버는 세션 시작 시에 로드되는 구조로 되어 있다. 등록만 해서는 현재 열려 있는 세션의 도구(Tool) 목록에 나타나지 않는다.

• VS Code 확장 기능으로 Claude Code를 사용하는 경우: 커맨드 팔레트(Ctrl+Shift+P / Cmd+Shift+P)를 열고, "Developer: Reload Window"를 실행한다.
• 터미널 CLI로 사용하는 경우: 한 번 세션을 종료한 뒤, claude를 다시 실행한다.

다시 로드한 후에는 채팅창에 다음 명령어를 입력한다.

/mcp

목록에 playwright가 Connected라고 표시되어 있다면 성공이다.

준비가 되었다면, 나머지는 평소처럼 채팅으로 부탁하기만 하면 된다. 코드를 직접 작성할 필요는 없다. 시험 삼아 페이지 열기 → 검색창에 입력하기 → 결과 받기라는 일련의 과정을 시켜보았다.

Google을 열어서 "Playwright MCP"를 검색해줘.

① 페이지를 연 직후. 검색창은 아직 비어 있다.

② 검색창에 입력된 상태. 실제로 실행된 것은 page.locator('textarea[name="q}"]').fill('Playwright MCP')이며, 사람이 키보드로 타이핑하는 것과 동일하게 글자가 입력되어 있다.

③ Enter를 누른 결과. 검색 결과가 반환되었다.

3장의 사진 모두 내가 직접 움직인 것이 아니라, 채팅으로 요청한 결과로서 브라우저가 작동한 화면이다. URL을 여는 것뿐만 아니라, 폼(Form)에 글자를 입력하고 전송하는 단계까지 수행할 수 있다.

별도로 지정하지 않으면 브라우저 창이 실제로 열리며, 이 움직임을 눈앞에서 직접 볼 수 있다. 화면을 띄우지 않고 작동시키고 싶다면, 실행 시 옵션으로 headless(화면 비표시) 설정도 가능하다.

Claude Code 본체가 직접 브라우저를 만지는 것이 아니라, 중간에 Playwright MCP라는 전용 "손발"이 개입하여 그곳이 실제 브라우저 조작을 담당한다. Claude Code는 그 결과를 전달받아 말로 정리해 주는 역할 분담 구조로 되어 있다.

솔직하게 사용하다 보면 막히는 부분이 두 가지 있었기에 가감 없이 적어둔다.

• 등록만 해서는 유효해지지 않는다. 위에서 언급했듯이, VS Code 확장에서는 "Developer: Reload Window"가, CLI라면 세션 재시작이 필요하다. 이 부분을 놓쳐서 "왜 반응이 없지?"라며 잠시 고민했다.
• Playwright MCP가 여는 브라우저는 평소 사용하는 브라우저와 별개다. 전용의 다른 프로필(Profile)로 동작하기 때문에, 평소 사용하는 브라우저에서 로그인된 사이트를 열더라도 Playwright MCP 측에서는 미로그인 상태로 취급된다. 시험 삼아 로그인 페이지를 열게 해보니, 평소 브라우저에서 로그인되어 있음에도 불구하고 완전히 깨끗한 미로그인 상태의 화면이 반환되었다.

그래서 로그인이 필요한 사이트를 조작하게 하고 싶을 때는, 해당 브라우저 안에서 직접 수동으로 로그인하는 방식으로 운영하고 있다. 비밀번호를 AI에게 넘기지 않는다는 단순한 선긋기이지만, 이것이 가장 안심할 수 있는 방법이다.

어느 쪽이 더 뛰어나다는 이야기가 아니라, 추가하고 싶은 기능이 "내 PC 안에서 완결되는 도구"인지 "이미 클라우드 상에 있는 서비스"인지에 따라 선택하는 경로가 달라질 뿐이다. 자신의 PC에 아무것도 구축하지 않고, claude.ai 측의 계정 연동으로 Gmail을 읽게 해본 이야기는 별도의 기사에 작성해 두었다.

여기까지 적어온 것은 단순히 "할 수 있는 일이 늘어나서 즐겁다"는 것 이상의 이유도 있다. 간단한 작업이나 코딩, 테스트와 같은 것들은 앞으로 AI가 담당할 수 있는 범위가 점점 넓어질 것이라는 게 나의 견해다. 그렇다면 나는 설계하고 코드를 작성할 줄 아는 것만으로는 부족하며, 실제 업무나 비즈니스의 내용까지 파악하는 능력이 앞으로 더 중요해질 것이라고 느끼고 있다. 그래서 최근에는 AI 에이전트를 실무 속에서 어떻게 움직일 것인가 하는 방향으로 나의 시간 사용 비중을 옮기고 있다. 브라우저를 조작할 수 있게 만든 것도 그 연장선에 있는 실험 중 하나다.

「저쪽 도구에서 할 수 있다면, 이쪽에도 똑같은 것이 있을 것이다」 —— 그 짐작은 이번에는 적중했다. Claude Code에 새로운 능력을 부여하는 것은 상상했던 것보다 훨씬 가벼운 작업이었다. 명령어 한 줄을 입력하고 화면을 새로고침하는 것뿐. 그것만으로 코드를 작성하기만 하는 도구가 실제로 화면을 보고 움직일 수 있는 도구로 변한다.

자신의 작업에 필요한 "손과 발"이 부족하다고 느껴진다면, 우선 "이것은 로컬에 하나 추가하면 끝날 문제가 아닌가"라고 의심해 보는 것이 좋다고 생각한다.

• MCP 연결 방법 (Claude Code 공식 문서): https://code.claude.com/docs/en/mcp
• Claude Code 설치 (공식 퀵스타트): https://code.claude.com/docs/en/quickstart
• Playwright MCP (GitHub 공식 리포지토리): https://github.com/microsoft/playwright-mcp
• Node.js (공식 사이트): https://nodejs.org/

개인 블로그(https://mint041223techblog.netlify.app/)에 일상적인 개발에서 깨달은 점들을 자세히 적고 있습니다 (외부 사이트로 이동합니다).