클로드 MCP로 만든 워크플로 - 커서 에이전트에게 찐 개발 시키는 게 가능할까?

소개

  • 지난 사례로 클로드 MCP만을 활용해서 지피터스 사례글 url만 넣으면 러버블 앱에서 라디오로 재생되는 워크플로를 만드는 것을 함

  • 결국 MCP를 활용한다는 것은, 각각 API 연동을 시키는 건데, 이걸 커서한테 다 개발로 바꿔달라고 하면 얼마나 해줄까? 라는 궁금증이 생김

진행 방법

클로드 MCP만을 활용한 워크플로

이렇게 url넣고 단계별로 수행할 것을 명령해주면, 클로드가 알아서 각각 mcp 를 활용해서 팟캐스트도 만들어주고 이걸 슈퍼베이스에 업로드도 해주고, 러버블 웹에서 바로 재생되도록 해줌.

커서야, 이거 그대로 개발로 해줘 -> 일단 실패

  • 먼저 성장피터님한테 배운대로, PRD 빌더 GPTs를 활용해서 이 프로세스를 그대로 커서 에이전트로 개발할거니, PRD 문서를 작성해달라고 함

이렇게 명령했더니 커서에서 mcp를 호출하는 방식으로 처음에 prd를 만들어줬음. 그래서 다시 명령함.

각각의 단계를 mcp를 활용하지 않고 api를 호출해서 수행하는 형태가 되어야 해

그렇게 만들어진 PRD 문서

이걸 커서에 가서 prd.md 파일을 만들어 붙여넣은 후 -> 이거 순서대로 개발하려면 해야하는 태스크들을 todo.md 파일로 만들어달라고 함

그리고 todo.md 파일에 있는 순서대로 개발을 진행해달라고 커서 에이전트한테 요청

근데 문제 -> 내가 만든 러버블 웹사이트에서 작동하도록 하려고 했는데, 내가 만든 러버블 웹 코드를 지금 만드는 환경에 추가로 붙일 자신이 없어짐.

그리고 PRD 빌더를 내가 읽어봐도 뭘 요청하고 있는지 모르겠어서 -> todo.md 파일에서도 뭘 하겠다는 건지 읽어도 잘 모르겠어서.. prd 빌더를 쓰는 게 과연 의미가 있나 싶었음. 맨땅부터 시작할 때는 prd 빌더로 초안을 잡아주니까 좋은데, 이미 내가 원하는 개발요구사항이 있는 상황에서 prd를 만들게 시키면 - 결국 내가 prd 문서를 읽을 줄 모르면 오히려 방해가 된다고 생각이 들었음.

-> 러버블 웹 코드에서부터 다시 시작하자

2트 - 러버블 코드를 커서로 열고, 거기서 커서에이전트를 잘 달래가며 해보자

  • 배운대로 러버블에서 깃헙 계정을 연결하고 -> 커서에서 clone repo 해서 열었음

  • 전체 코드베이스를 분석해달라고 하고 개발서버에서 띄워달라고 함 (배운대로 함)

  • 이후 커서 에이전트에게 직접 명령

  • api 같은 키를 하나도 안넣어줬는데 다 됐다고 함 -> api 키 안필요해? 하니까

한국 MP3 플레이어의 스크린 샷

아놔;

무튼 .env 파일을 만들어서 필요한 키를 넣으라고 함. (여기서 알게된 사실 - 커서 에이전트는 .env 파일을 직접 생성 수정이 불가함. .env 파일 자체가 보안파일(?) 이라 아예 접근을 못하는 것 같음)

근데 - 내가 사용하라고 처음에 지시한 mcp 종류가 5개인데, 그거마다 다 api 키가 필요하다고 함. 근데 파일명 변경, 파일 이동, js 파일 실행 등은 mcp 없이도 코드로 되는 부분인데 - 무조건 키가 필요하다고 함.

여기서 배운 점 -> 내가 진짜 이런 개념이 아예 없으면 - 커서 에이전트한테 휘둘리기만 하다가 진도를 못 나가겠구나

자 이제 다 추가했다고 하니까 다 완성됐다고 하는데 아무리 해도 개발서버에서 띄웠을 때 아무것도 안보이는 거임. 콘솔 에러를 확인해보니 Uncaught Error: supabaseKey is required. 라는 게 떴음 -> 결국 .env 파일에서 해당 키가 잘 로드되지 않아서 문제라는 거임.

그래서 해당 키를 참조하고 있는 곳을 알려달라 -> 각각 변수명이 정확한지 계속 확인함.

결국 문제 발견 : A 파일에서는 SUPABASE_SERVICE_ROLE_KEY 라고 하고 B 파일에서는 SUPABASE_PUBLISHABLE_KEY 로 선언하고 있어서 안된 거였음. 이걸 다 통일해주니까 바로 개발 서버에서 프리뷰가 뜸!!!!!!

자 이제 프리뷰에서 지피터스 링크를 넣고 라디오 생성을 시도 -> CORS 에러가 나서 그냥 firecrawl api만을 활용해서는 지피터스 링크를 못 읽는다고 함

firecrawl을 사용할거면 단순 헤더에 코드를 추가한다고 해결되지 않고 - "내가 직접 운영하는 백엔드 서버를 프록시로 두기"를 해야한다고 함

  • 나는 백엔드 서버를 운영할줄도 모르고

  • 프록시가 뭔지도 모름

프록시 서버인가 뭔가를 시도해보기로 함

여기서 약간의 시행착오

  • proxy-server.mjs 파일이 필요하다는데, 커서 에이전트가 만들어준 파일명은 proxy-server.js 임

  • 커서 에이전트 믿을 게 못된다..

하지만 여전히 크롤링은 못해오고 있고 -> 덩달아 일레븐랩스로 팟캐스트도 생성을 못함

근데 그 이후에 슈퍼베이스에 디비 생성하는 건 잘 실행이 돼서, 껍데기 데이터만 올라간 상황

결과와 배운 점

자 이제 이게 중요한데.......

하면서 여러 생각이 들었음 -> 정말 코드를 모르고 개발 개념이 없는 상황에서 커서 에이전트를 쓴다고 해서 개발이 가능할까.......?

  • 계속 커서한테 해줘해줘를 외치는데 - 지금 얘가 뭘 하고 있는지 따라갈 수가 없어서 갓차 느낌으로 하고 있는 스스로를 발견

    • 차라리 n8n 같은 건 워크플로가 눈에 보이니까 어떤 단계에서 현재 에러가 났구나, 어느 단계까지 지금 개발이 되어있구나- 직관적인데, 커서로 개발하다보면 길을 잃음

    • 크롤링은 못했는데 슈퍼베이스에 데이터는 만들어주고.. -> 뭐가 되고 있는지도 모르겠음

일단 여기까지 올려보겠습니다

정제되지 않은 사례글 - 정말 죄송합니다..ㅎ..

👉 이 게시글도 읽어보세요