AI한테 코딩은 부탁하면서, 잘 되었는지는 직접 확인하시나요?
저도 한동안 그랬습니다. 문제가 생기면 일단 스크린샷부터 찍었습니다. Claude Code 창에 이미지를 끌어다 놓고 이렇게 말했습니다.
에러 화면을 캡처해서 Claude Code에 그대로 던지던 평소 모습.
AI는 화면을 보고 그럴듯한 추측을 내놓고, 저는 코드를 적용한 다음 브라우저를 새로고침해서 확인합니다. 안 되면 다시 스크린샷, 다시 첨부, 다시 추측. 이 루프를 몇 번 돌고 나서야 매번 스크린샷을 찍는 게 부담스러워졌습니다.
이 글에서는 그 루프를 깨준 도구, Playwright MCP가 무엇이고 어떤 장면에서 유용한지를 제 실제 사용 패턴과 함께 소개합니다.
그래서 Playwright MCP가 뭔가요
한 줄로 말하면, AI에게 브라우저를 직접 조작하고 관찰할 눈과 손을 달아주는 도구입니다. 영문권 글에서도 비슷한 결의 표현을 씁니다.
“giving your AI a pair of eyes and hands in the browser”
— Abhishek kumar singh, Playwright MCP: The Frontend Developer’s Secret Weapon in 2026
기존에 우리가 AI와 협업하던 방식은 대부분 “내가 본 것을 옮겨 전달”하는 구조였습니다. 스크린샷을 찍고, 콘솔 로그를 복사하고, 네트워크 탭의 응답을 텍스트로 붙여 넣고. 그렇게 AI가 받는 건 내가 한 번 가공한 정보입니다. Playwright MCP가 바꾸는 지점이 여기입니다. AI가 직접 페이지를 열어서, 직접 보고, 직접 클릭합니다.
Playwright란?
Microsoft가 만든 브라우저 자동화 프레임워크입니다. 원래는 웹 앱 E2E 테스트용으로 쓰던 도구인데, 코드로 Chrome·Firefox·Safari를 띄우고 클릭·입력·스크롤·캡처까지 다 시킬 수 있어요. 외부 사이트를 긁는 크롤링 봇과는 결이 달라요. 개발자가 자기 앱이 잘 동작하는지 자동으로 검증하려고 쓰는 QA 도구입니다.
Playwright 공식 사이트 첫 화면. “AI agents를 위한 브라우저 자동화”라는 문구가 가장 먼저 눈에 들어옵니다. (출처: playwright.dev)
MCP(Model Context Protocol)란?
AI가 외부 도구·데이터에 접근할 수 있도록 표준화한 프로토콜입니다.
그래서 Playwright MCP는 이름 그대로, Playwright의 브라우저 조작 능력을 MCP 표준에 얹어 AI가 호출할 수 있게 만든 서버입니다. AI에게 “브라우저 자동화 도구를 다룰 줄 아는 손” 을 붙여주는 셈이에요.
자연어 한 줄이 MCP를 거쳐 Playwright로, 다시 실제 Chrome 브라우저로 전달되는 흐름.
이런 장면에서 유용합니다
저에게 가장 체감이 컸던 건 처음에 적은 그 사례, 에러 화면을 직접 확인시키는 일이었습니다. 같은 사례를 두 흐름으로 풀어 보겠습니다.
Before, 스크린샷 첨부 루프
평소에는 이런 흐름으로 일했습니다.
- 에러 페이지에서 스크린샷을 찍습니다
- Claude Code에 이미지를 첨부하면서 이렇게 말합니다
🗣️
[Image]여전히 이렇게 나오는데 고쳐줘 — http://localhost:3000/ai-service/500 - AI는 화면에 보이는 것만 가지고 원인을 추측합니다
- 제안을 적용한 뒤, 제가 브라우저를 새로고침해서 확인합니다
- 안 되면 다시 1번부터
이 루프의 비용은 두 군데에서 발생했습니다. 하나는 정보의 손실입니다. 스크린샷에는 그 순간 화면에 보인 것만 담깁니다. 콘솔에 찍힌 스택 트레이스, 네트워크 탭의 4xx/5xx 응답, DOM에 실제로 들어가 있는 마크업은 빠집니다. AI는 빠진 정보를 추측으로 메우는데, 추측이 빗나가면 다음 루프로 넘어갑니다.
또 하나는 검증을 매번 제가 한다는 것이었습니다. AI가 코드를 수정하면, 그게 실제로 통하는지는 제가 새로고침해서 봐야 알 수 있었습니다. 사실상 사람이 마지막 단계의 QA를 떠안고 있는 셈이었습니다.
After, AI에게 직접 열어보게 하기
Playwright MCP를 붙인 뒤로는 이렇게 바꿨습니다.
🗣️ playwright로 http://localhost:3000/ai-service/500 확인해서 어떤 에러인지 봐줘
이 한 줄에서 일어나는 일은 이전과 결이 다릅니다. AI가 실제 Chrome 창에서 페이지를 열고, 콘솔 메시지를 읽고, 네트워크 응답 코드를 확인하고, DOM 구조를 훑어봅니다. 받아 든 정보는 “스크린샷 한 장”이 아니라 “직접 들어가서 본 페이지 전체”입니다.
수정 후 검증도 같은 방식으로 넘길 수 있습니다.
🗣️ 방금 수정한 거 다시 열어서 잘 되는지 확인해줘
이제 검증까지 AI가 합니다.
이게 특수한 워크플로우가 아니라는 점도 짚어둘 만합니다. GitHub Copilot의 Coding Agent도 같은 방식(코드를 수정한 뒤 Playwright MCP로 실제 브라우저에서 검증)으로 동작합니다 (Microsoft Developer Blog). 업계가 이미 같은 방향으로 가고 있는 셈입니다.
차이가 어디서 오는가
기술적으로 풀면 한 줄로 정리됩니다. AI는 픽셀이 아니라 페이지의 의미 구조를 읽습니다. Playwright MCP는 페이지의 접근성 트리(accessibility tree), 브라우저가 내부적으로 가진 의미 단위의 구조를 AI에게 넘겨줍니다.
“agents can use Playwright’s accessibility tree to understand the true structure of a page”
— Shipyard, Taking screenshots of your app with the Playwright MCP server
스크린샷 한 장과는 정보의 결 자체가 다릅니다.
빠르게 시작하려면
Claude Code 사용자라면 공식 플러그인 마켓플레이스에서 한 번에 설치하는 게 가장 빠릅니다. Claude Code 안에서 /plugin 을 입력하고 Playwright 플러그인을 고르면 끝납니다.
설치를 확인했다면 평소 쓰는 Chrome을 켜두고 이렇게 한 번 불러보세요.
🗣️ Playwright로 https://github.com 열어서 페이지 제목 알려줘
처음 호출하면 어느 탭에 연결할지 선택하는 화면이 뜨고, 선택한 탭에서 페이지가 열립니다. 여기까지 되면 글에서 다룬 사례들도 그대로 시킬 수 있습니다.
Note
이어지는 글이 있습니다. 매번 새 Chrome 프로필이 떠서 로그인부터 다시 해야 하는 번거로움을 없애고 싶다면, 한 번에 적용할 수 있는 자동화 프롬프트까지 Claude Code의 Playwright MCP, 내 Chrome 프로필 그대로 쓰기에 풀어두었습니다.
마무리
Playwright MCP를 붙이고 나서는 에러 확인을 AI에게 그대로 넘기게 됐습니다. 매번 매끄럽게만 흘러가지는 않아요. 브라우저를 띄우는 비용이 가볍지 않고, AI가 엉뚱한 요소를 클릭하거나 잘못된 페이지로 가는 경우도 가끔 있습니다. 시각적 레이아웃처럼 한눈에 보고 끝나는 버그라면 여전히 스크린샷 첨부가 더 빠를 때도 있고요.
그래도 “확인”을 통째로 넘길 수 있는 자리에선 충분히 값을 합니다. 한 번 붙여두고 평소 쓰던 디버깅 사례에 대입해 보면 결이 빠르게 잡힐 거예요.
참고
본문에서 인용·참조한 자료입니다. 모두 2026년 5월 12일 기준으로 확인했습니다.
- Playwright MCP 공식 문서 — playwright.dev/mcp
- Microsoft Developer Blog, “The Complete Playwright End-to-End Story” — developer.microsoft.com/blog
- Abhishek kumar singh, “Playwright MCP: The Frontend Developer’s Secret Weapon in 2026” (Medium) — medium.com/@abhishek070189
- Shipyard, “Taking screenshots of your app with the Playwright MCP server” — shipyard.build/blog