프론트엔드 인턴을 수행하며 퍼블리싱에 전념하고 있었다. 내가 담당한 작업이 UI이긴 했지만, 혹시나 기능적인 문제가 발생하지 않는지 또는 정상적인 UI가 표시되지 않는지 확인하는 과정이 필요했다. 따라서 '매주' 회의 직전에 계약, 자문 등 주요 페이지에 대한 동작이 정상적으로 수행되는지 진행했다. 이 작업의 문제는 당연하지만 시간이 오래 걸리는 반복적인 작업이라는 것이었다.

이에 테스트를 간단하게 수행할 수 있으면 좋겠다는 생각이 들었다. 따라서 대표적인 E2E 테스팅 도구인 Playwright의 MCP를 활용하면 투자 시간 대비 효율을 낼 수 있겠다고 판단했다.

MCP(Model Context Protocol, 모델 컨텍스트 프로토콜)
MCP는 AI 모델이 외부 도구, 데이터, 시스템과 표준화된 방식으로 통신할 수 있도록 설계된 개방형 프로토콜이다. 해당 프로토콜은 AI 모델이 다양한 데이터 소스, 도구, 애플리케이션과 상호 작용할 수 있는 표준화된 통신 수단을 제공한다. 이를 통해 개발자는 각 서비스의 API를 직접 코딩하거나 설정할 필요 없이, MCP 서버만 설치하여 AI가 다양한 서비스를 활용할 수 있다. MCP는 기본적으로 클라이언트(AI 에이전트)가 서버에 요청을 보내면, 서버가 특정 작업(도구 실행 등)을 수행하고 결과를 클라이언트에게 전달하는 클라이언트-서버 아키텍처를 기반으로 동작한다.

[Gemini 답변 요약]

😎과정

MCP 서버 설정

프로젝트 루트에 .cursor 폴더 생성 후 mcp.json 파일을 생성하거나, cursor>settings>Add MCP Server로 해당 파일에 접근한다. 파일에 아래 내용을 입력하고, cursor를 재시작한다.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

프롬프트 작성

아래와 같이 프롬프트를 따로 작성했다. 이때, 실제로 게시물 생성이 완료됐는지 판단하는 기준을 어떻게 줄지 고민을 했다. 우선은 계약 기능에 대해서는 프로세스가 존재하는 것을 고려하여 계약서 생성 시 '검토' 단계로 넘어가는 점을 고려했다(생성 시점의 계약서 id와 조회 시의 계약서 id의 일치 여부를 판단하는 방법이 가장 정확할 것 같다는 생각이 이후에 들었다).

playwright mcp로 테스트를 진행할거야.

테스트 겸, 계약서 검토 요청 페이지(http://localhost:3000/계약페이지uri)에 접속해줘.
로그인 창으로 리다이렉트 된다면, (이메일: test.com 비밀번호: xxxx)입력 후, 로그인 버튼을 클릭해.

계약서 검토 요청 페이지(http://localhost:3000/계약페이지uri)에 접속하여 다음 행위들을 차례대로 수행하여 새로운 계약서 검토 요청을 생성할거야. 
요청이 완료되면 계약서 검토 조회 페이지(http://localhost:3000/계약조회페이지uri)에서 새로 작성한 게시물이 제대로 표시되는지 확인해줘. 
(표시 여부 판단 방법: 조회 페이지에서 테이블 필터링 부분에서 진행상태(Select)를 '배정 중'을 기준으로 필터링한 후, 테이블에 생성 시 작성한 계약명과 일치하는 행이 있는지 확인하면돼.)

계약서 검토 요청 작성 단계
기본 정보 작성 단계
1. 계약명: '테스트 + 현재 시각(실제로 현재 시각을 계산해야 함 e.g. Date.now() )' 
2. 계약분류: 대분류, 중분류, 소분류(셋은 모두 Select) 순서로 가장 위 항목 선택
3. 계약기간: 두 번의 DatePicker 클릭을 통해 오늘 날짜, 오늘+일주일 날짜 선택
4. 계약서: '파일' 버튼 클릭 후, pdf 확장자의 아무 파일 업로드

상세정보 작성 단계
1. 계약의 배경 및 목적: 테스트입니다.

계약상대방 정보
1. 회사명: '상대계약자 찾기' 버튼 클릭 후 보이는 모달에서 검색창에 'xxx' 검색. 검색 결과 나온 테이블 목록에서 가장 위 항목 클릭.
2. 담당자: '홍길동' 입력.
3. 담당자 Email: 'hong@test.com' 입력.

마지막으로, 페이지 최하단의 '계약서 검토 요청' 버튼 클릭.

결과

아래와 같이 테스트 과정에서 스크린샷 등의 중간 산출물을 보여주며 진행된다(만약 중간중간 개발자의 승인이 필요한 경우가 있는데 이 행위도 번거롭다면 cursor settings에서 관련 설정을 on 해주자).

🫥느낀점

이번에는 아주 기본적인 흐름만 테스트하여 막힘없이 진행됐지만, 더 디테일한 경우까지 고려한다면 분명히 막히는 부분이 생길 것이다. 따라서 프롬프트의 디테일이 중요하다. 또한 이러한 프롬프트를 각 상황별로 문서화하고 필요하다면 공유하는 것이 필수적일 것 같다는 생각을 했다.

AI 에이전트를 활용한 업무 생산 효율을 올리는 것은 이제 필수가 됐다. 지속적인 학습도 중요하지만, 더 많은 최신 정보에 노출되어야 AI 기술이 나의 업무 중 어느 부분을 얼마나 개선할 수 있을지 상상할 수 있고 실천까지 이어질 수 있을 것 같다.