Playwright MCP

무엇인가

에이전트에게 브라우저를 쥐여주는 도구다. 페이지를 열고, 클릭하고, 입력하고, 화면을 캡처해서 직접 본다.

테스트 자동화 도구로 알려져 있지만, 에이전트와 붙이면 성격이 달라진다. 정해둔 시나리오를 통과하는지 확인하는 게 아니라, 지금 화면이 어떻게 생겼는지를 보고 판단하는 쪽이다.

코드만 읽으면 틀린다

이 도구를 왜 쓰는지는 안 썼을 때 무슨 일이 생기는지로 설명하는 게 빠르다.

러닝 게임 문서를 쓰면서 코스를 코드에서 읽었다. 상수와 주석에 스테이지 경계와 거리가 적혀 있었으니 그걸 옮겼다. 그리고 전부 틀렸다. 읽은 주석은 옛 설계의 잔재였고, 현재 코드는 다른 값으로 돌고 있었다. 코스도 거리도 실제와 달랐다.

게임을 실행해서 직접 달려보고 나서야 맞는 값이 나왔다. 덤으로, 코드에서는 안 보이던 것도 보였다. 구간마다 하늘이 아침에서 밤으로 넘어간다는 것, 글자를 다 모으면 케이크가 이름 모양으로 쏟아진다는 것.

코드는 무엇이 가능한지를 말하고, 화면은 무엇이 실제로 일어나는지를 말한다. 문서에 적어야 하는 건 후자다.

실제로 하는 일

네 번째가 핵심이다. 캡처만 하고 사람에게 넘기면 그건 스크린샷 도구일 뿐이다. 에이전트가 그 이미지를 읽고 "이건 이상하다"까지 판단해야 값이 생긴다.

회귀는 화면에서 잡힌다

이걸로 실제로 버그를 잡았다.

위키 문서 제목에서 표기 하나를 바꾸는 작업을 했다. 타입 체크도 통과했고 문서도 다 맞았다. 그런데 화면을 띄워보니 좌측 네비가 깨져 있었다. 짧은 이름을 그 표기로 잘라서 만들고 있었는데, 표기를 바꾸니 자를 지점이 사라져 긴 제목이 통째로 들어간 것이다.

타입 체크로는 절대 안 잡힌다. 문자열이 문자열로 들어갔을 뿐이니까. 스크린샷을 찍다가 우연히 봤다. 안 봤으면 그대로 배포됐다.

못 하는 것

이 도구가 못 하는 것도 분명하다. 뭘 보여줄지는 정하지 못한다.

게임 문서에 넣을 스크린샷을 뽑을 때, 처음 잡은 구간은 배경에 산과 기와지붕이 있는 평범한 곳이었다. 화면은 멀쩡했다. 그런데 그 동네를 아는 사람이 보기엔 아니었다. 그 동네의 얼굴은 낮은 상가가 줄지어 이어지는 길이었고, 그건 거기 가본 사람만 안다.

다시 띄워서 그 구간을 잡았다. 도구는 요청한 장면을 정확히 가져다주지만, 어떤 장면이 그 장소를 대표하는지는 판단하지 못한다.

쓸 때 걸리는 것들

• 타이밍. 애니메이션이 끝나기 전에 찍으면 조립 중인 화면이 나온다. 반대로 너무 늦으면 지나가 버린다. 게임처럼 계속 흐르는 화면은 몇 번 찍어서 고르는 게 빠르다.
• 뷰포트. 가로 모드 전용 화면을 세로로 열면 "돌려주세요" 안내만 찍힌다. 실제 사용 비율로 맞춰야 진짜 화면이 나온다.
• 여백. 넓은 화면을 통째로 찍으면 정작 봐야 할 것이 작게 나온다. 잘라내야 읽힌다.
• 캐시. 두 번째 실행부터는 리소스가 캐시돼서, 로딩 화면 같은 건 다시 잡기 어렵다.

왜 이게 유용한가

에이전트가 코드를 고치고 나서 "됐습니다"라고 말하는 것과, 화면을 띄워 확인하고 "됐습니다"라고 말하는 것은 다르다.

앞은 코드가 의도대로 쓰였다는 뜻이고, 뒤는 그 의도가 실제로 화면에서 일어났다는 뜻이다. 둘 사이에는 오늘 잡은 것 같은 회귀가 산다.