코딩 에이전트 · 영상 게시 2026-09-08 · 4분 41초

Cursor에서 pstack으로 버그 재현, 수정, 검증까지 해 보기

교육용 React 앱의 페이지네이션 버그를 Cursor의 pstack 플러그인에 맡겨 설치, 검증 스킬 생성, 포테토 모드 수정, 최종 검증까지 따라간 실습입니다.

이 영상에서 단테는 교육용 React 앱의 작은 페이지네이션 버그 하나를 Cursor에서 pstack에 맡겨, 설치부터 검증 스킬 만들기, 원인 조사와 수정, 최종 확인까지 따라갑니다. 코딩 에이전트가 코드를 고친 뒤 "정말 고쳐졌는지"를 어떻게 확인하게 할지 고민하는 개발자에게 맞는 실습입니다.

버그와 출발점: 검증

재현 순서는 간단합니다. 목록에서 다음 페이지로 이동한 뒤 "리액트"를 검색하면 결과는 한 개라고 나오는데 카드가 보이지 않습니다. 결과 전체가 한 페이지인데 화면은 두 번째 페이지라고 표시됩니다.

지난 영상에서 소개한 로렌은 React Compiler 개발에 참여한 개발자로, 공개 발표에서 출발점을 검증으로 꼽았습니다. 에이전트가 코드를 읽는 데서 끝나지 않고, 사용자가 쓰는 방식으로 앱을 실행하고 확인할 수 있어야 한다는 것입니다. 이번 영상은 그 공개된 방법을 교육용 앱에 재현한 실습이며, 로렌의 실제 업무 세션은 아닙니다.

설치와 초기 설정

설치는 Cursor 마켓플레이스에서 시작합니다. pstack을 검색하고 Cursor가 만든 공식 플러그인인지 확인한 뒤, 상세 페이지의 설치 버튼이나 복사 가능한 명령을 씁니다. 단테는 add plugin 명령을 Cursor 채팅에서 실행해 실습 프로젝트에 추가했습니다. pstack은 새 모델이 아니라, 에이전트가 어떤 순서로 조사하고 구현하고 검증할지를 정해 둔 작업 도구 모음입니다.

다음은 설정 단계입니다.

/setup-pstack

여기서 역할마다 쓸 모델을 정합니다. 조사, 구현, 리뷰를 서로 다른 모델에 맡길 수도 있지만, 이번에는 하나의 모델을 고르고 다른 역할도 부모 채팅의 모델을 상속하게 했습니다. 리뷰 패널은 두 명으로 시작했습니다. 사용자 폴더 쓰기가 제한되어 있어서 같은 설정을 프로젝트 규칙으로 저장했고, 설정 파일의 적용 범위를 확인한 뒤 새 채팅을 열어야 새 규칙이 적용됩니다.

검증 스킬: 앱을 조작하는 기능 지도

설정하면서 이 프로젝트용 검증 스킬도 만들어 달라고 요청했습니다. 따로 만들 때는 다음 명령을 씁니다.

/create-verification-skill

생성된 파일에는 검색, 페이지 이동, 첫 화면처럼 기능별 안내가 들어 있습니다. 예를 들어 검색 안내에는 어떤 입력란에 무엇을 넣고 어떤 결과를 확인해야 하는지가 적혀 있습니다. 단테는 이것을 다른 프로젝트에 복사하는 정답지가 아니라, 우리 앱을 실제로 조작하는 방법을 정리한 기능 지도라고 설명합니다.

포테토 모드로 원인 조사와 수정

새 채팅에서 포테토 모드로 시작합니다.

/poteto-mode

요청에는 버그 증상과 재현 순서를 적고, 먼저 재현한 다음 수정하고, 같은 시나리오로 다시 확인해 실패와 통과 근거를 모두 남겨 달라고 했습니다. 로컬 실습이므로 커밋과 배포는 제외했습니다. 단테는 모든 스킬의 실행 순서를 길게 나열할 필요가 없고, 목표와 제약, 완료 조건을 주면 pstack이 작업 종류에 맞는 절차를 고른다고 설명합니다.

화면에서는 조사 에이전트가 따로 실행되어 검색, 페이지 상태 분석, 변경 이력 조사를 나눠 맡았습니다. 다만 방금 만든 로컬 저장소라 외부 이슈가 없으므로, 불필요한 이슈 검색은 건너뛰라고 알려 줬습니다. 이렇게 범위를 좁혀 주는 것도 운영자의 역할입니다.

원인은 검색어가 바뀌어도 페이지 번호가 2페이지에 남는 것이었고, 검색할 때 첫 페이지로 되돌리는 방식으로 수정됐습니다.

검증 도구도 검증해야 한다

여기서 흥미로운 문제가 하나 더 나왔습니다. 에이전트가 만든 검증 도구가 빈 문자열 인자를 잘못 해석해, 검색어를 지우는 대신 입력란에 "true"라는 글자를 넣은 것입니다. 앱 버그와는 별개였고, 도구의 인자 처리를 고친 뒤 입력란이 제대로 비워지는지 다시 확인했습니다.

교훈은 검증 스킬 파일이 생겼다고 바로 믿으면 안 된다는 것입니다. 처음에는 사람이 결과를 아는 간단한 동작으로 돌려 보고, 그 도구가 정말 의도한 행동을 하는지부터 확인해야 합니다.

수정된 앱에서 같은 순서로 다시 해 보면 카드 한 개와 1페이지 표시가 함께 나옵니다. 없는 검색어에는 안내 문구가 보이고, 검색어를 지우면 전체 목록이 돌아옵니다. Cursor가 남긴 결과에도 수정 전에는 카드가 없고 수정 후에는 제목이 나타나는 차이가 기록됐습니다. 별도 브라우저 검사에서 첫 화면, 다음·이전 페이지 이동 후 검색, 빈 결과, 검색어 지우기까지 여섯 항목이 모두 통과했습니다. 리뷰 에이전트 두 명도 지적이 없었지만, 이는 이번 작은 수정에 대한 결과일 뿐 다른 모든 상황이 안전하다는 뜻은 아닙니다. 서버에서 데이터가 바뀌는 앱이라면 그 상황도 기능 지도에 추가해야 합니다.

정리

  • pstack은 새 모델이 아니라 에이전트의 조사·구현·검증 순서를 정한 도구 모음이며, Cursor 마켓플레이스의 공식 플러그인으로 설치합니다.
  • /setup-pstack으로 역할별 모델과 리뷰 패널을 정하고, /create-verification-skill로 앱을 실제로 조작하는 기능 지도를 만듭니다.
  • /poteto-mode에는 단계 목록 대신 증상, 재현 순서, 제약, 완료 조건을 주고, 불필요한 조사 범위는 운영자가 좁혀 줍니다.
  • 에이전트가 만든 검증 도구 자체에도 버그가 있을 수 있으니, 아는 동작으로 먼저 확인해야 합니다.
  • 다음 작업에 남길 것은 긴 대화보다 다시 실행할 수 있는 검증 방법과 실제 근거입니다.

영상: 유튜브에서 보기 · 정정 요청: dante@quokkalabs.net