레슨 6 - Playwright MCP로 기능 검증하기

앞서 살펴봤듯이 코드를 작성하는 일만으로는 충분하지 않습니다. 데이터와 외부 서비스를 다루고 Copilot에서 자동화 작업을 사용할 수 있도록 해야 합니다. MCP 서버를 사용하면 Copilot CLI에 기본 제공되는 기능을 넘어 도구와 서비스를 추가할 수 있습니다.

이 레슨에서는 다음을 수행합니다.

시나리오

단위 테스트와 엔드투엔드 테스트도 중요하지만, UI 업데이트를 검증하려면 실제로 UI와 상호 작용해야 합니다. Copilot이 사용자처럼 작업 중인 웹사이트를 사용하도록 하여 변경 사항이 예상대로 작동하는지 더 확실히 확인할 수 있습니다.

Model Context Protocol(MCP)은 AI 에이전트가 외부 도구 및 서비스와 통신할 수 있도록 합니다. MCP를 사용하면 최신 정보를 확인하고 사용자를 대신해 작업을 수행할 수 있습니다.

에이전트는 MCP 서버를 통해 도구와 리소스에 접근합니다. MCP 서버는 에이전트와 외부 도구 및 서비스 사이의 연결 역할을 합니다. 각 MCP 서버에서 에이전트가 사용할 수 있는 도구와 리소스가 제공됩니다.

널리 사용되는 MCP 서버의 예시는 다음과 같습니다.

다양한 MCP 서버가 있으며, GitHub는 생태계의 검색 및 기여를 돕기 위해 MCP 레지스트리를 운영합니다.

MCP 서버도 프로젝트의 다른 종속성과 마찬가지로 취급합니다. 사용하기 전에 소스 코드를 검토하고 게시자를 확인하며 보안에 미치는 영향을 고려합니다.

Playwright MCP 서버를 아직 사용할 수 없다면 추가하여 Copilot이 사용자처럼 사이트와 상호 작용하도록 합니다.

Copilot CLI에서 Playwright MCP를 이미 사용할 수 있다면 아래 설정 단계는 건너뛰고 다음 섹션으로 진행합니다.

Codespace로 돌아갑니다.
Copilot CLI에서 다음 명령을 입력해 MCP 서버 추가 대화 상자를 엽니다.
```
/mcp add
```
이름으로 playwright를 입력하고 Tab을 누릅니다.
Enter를 눌러 서버 유형으로 STDIO를 확인한 다음 Tab을 누릅니다.
Command 대화 상자에 다음을 붙여 넣습니다.
```
npx -y @playwright/mcp@latest --headless --no-sandbox
```
Control+S(Mac) 또는 Ctrl+S(Windows/Linux)를 눌러 새 MCP 서버를 저장합니다.
Esc를 눌러 MCP 대화 상자를 닫습니다.

앞서 기능이 제대로 작동하는지 직접 확인했습니다. 이제 Copilot이 사용할 수 있는 Playwright MCP 서버로 같은 검증을 수행합니다.

다음 프롬프트로 Copilot에 Playwright MCP 서버를 사용해 기능을 검증하도록 요청합니다.

앱을 시작하고 Playwright MCP로 이슈와 계획에 따라 필터링 기능을 확인해 주세요. 변경하지 말고 무엇이 작동하고 작동하지 않는지 알려 주세요. 작업이 끝나면 시작한 서버를 중지해 주세요.

일반적으로 Copilot이 알아서 MCP 서버를 사용하므로 서버 이름을 직접 요청할 필요는 없습니다. 하지만 사용할 서버를 알고 있다면 명시적으로 알려 주는 편이 좋습니다. 일관성이 높아지고 토큰을 조금 절약할 수 있습니다.

Copilot은 서버를 시작하고 Playwright로 사이트를 조작한 다음 서버를 중지하고 결과를 보고합니다.

이 레슨에서는 다음을 수행했습니다.

사용 가능한 Playwright MCP 서버로 기능을 테스트했습니다. 하지만 MCP는 Copilot을 확장하는 여러 방법 중 하나입니다. 다음으로 사용자 지정 에이전트를 만들어 접근성 검토와 같은 작업을 간소화합니다.