MCP 사례글이기 때문에 - mcp를 다루는 스터디인 n8n에이전트 태그를 달았습니다! n8n은 하나도 안써요!!
소개
지난 MCP 계절학기 사례톤에서 급 아이디어로 시작했던 사례
https://www.gpters.org/marketing/post/automation-journey-podcasts-way-bAByJ1q5gOGkUop
16기 온오프모임 베스트발표로 발표하면서 200여 명 앞에서 약속을 해버렸지 뭐에요...? 16기가 끝나기 전까지는 꼭 지피터스 라디오 완성하겠다고....
그래서 틈틈이 짬내서 mcp 연결 연결 고군분투 해가며 드디어 완성한 사례로 돌아왔습니다!
원래 하려고 했던 프로세스
클로드에게 지피터스 url을 주면
firecrawl mcp 로 내용을 읽어오고
클로드가 30초짜리 라디오 스크립트를 써주고
elevenlabs mcp 로 라디오 mp3 파일을 생성한 뒤
supabase mcp 로 데이터베이스에 파일을 저장하면!!
러버블로 만든 웹사이트에서 짠! 하고 mp3가 재생되는 흐름을 생각했습니다.
남아있던 개발 과제들
당시 3번 (일레븐랩스로 mp3 파일 생성)까지는 진행했었는데, 슈퍼베이스에 mp3 파일 업로드에서 막혀있었어요.
elevenlabs mcp로 mp3 파일을 만들게 되면 파일명과 파일 저장 위치(바탕화면)가 고정되는 문제
supabase mcp 도구로는 파일을 데이터베이스에 업로드하는 게 불가한 문제
위 두 가지 문제를 해결하는 게 목표였어요!
현재 되어있는 것
슈퍼베이스에는 데이터가 저장되는 DB도 있지만, 파일을 직접 업로드하는 'file storage' 라는 게 있어요.
그리고 파일 스토리지에는 파일을 저장할 수 있는 '버킷'이 필요해요
'audio-files' 라는 버킷을 생성해두었어요.
이제 클로드가 뽀짝뽀작 해서 'audio-files' 버킷에 라디오 mp3 파일을 올려주게 하려고 해요.
(참고) supabase mcp 연결이 자꾸 에러나는 문제
결국 Node 버전 충돌 이슈였고 겨우겨우 해결함
해결한 사례글 : 클로드에게 Supabase 망치 주려다 Node 버전 함정에 빠져 결국 로컬 설치한 썰 😵💫💥 (nvm? npx?...)
👉 지피터스 라디오 들으러 가기
일단 결과만 궁금한 사람들을 위해 ㅋㅋㅋ
진행 방법
Elevenlabs MCP로 mp3 파일을 만들게 되면 파일명과 파일 저장 위치(바탕화면)가 고정되는 문제를 해결해보기
일레븐랩스 MCP가 파일명 변경, 저장 위치 변경 등의 기능을 아예 제공하지 않는 것 같았어요
그래서 이 기능을 할 수 있는 다른 MCP를 찾아 나섰어요
Filesystem MCP 라는 것을 설치하면 - 내 컴퓨터에 저장된 파일에 접근할 수 있다길래 설치했습니다
이 MCP가 접근할 수 있는 폴더 경로는 직접 지정해줘야 해요!
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/dahye.dyan/Desktop"
]
}자 이제 클로드가 Filesystem mcp를 활용해서 내 파일명도 변경하고, 폴더 이동도 해주는지 확인해야겠죠? 클로드에게 이렇게 부탁해봅니다
바탕화면에 저장된 1st_file.mp3 파일을 2nd_file.mp3 로 파일명을 바꿔줘
파일명이 실시간으로 바뀌었어요!!
바탕화면에 저장된 2nd_file.mp3 파일을 바탕화면의 'dahtmade-mcp' 폴더로 옮겨줘
파일이 쏙 들어갔습니다!!
자 이제 그러면 일레븐랩스 mcp로 파일 생성하고, "방금 생성된 파일의 파일명을 바꿔주고, 폴더도 바꿔줘" 라고 하면 되겠네요!
supabase mcp 도구로는 파일을 데이터베이스에 업로드하는 게 불가한 문제를 해결해보기
GPT에게 방법을 묻기
근데 supabase mcp로는 직접 파일을 올릴 수 없고, upload.js 같은 코드로 함수를 짜고, 이 함수를 실행시켜서 직접 파일을 업로드 해야한다고 했어요
upload.js 스크립트 작성하기
GPT가 upload.js 스크립트를 짜줬어요.
그 다음에 해야하는 것을 묻기
그 다음에는 이 upload.js 를 실행하려면 해야하는 것을 알려줬어요
환경변수 설정하기
환경변수 설정하는 게 뭔지 몰라서, 이걸 자세히 알려달라고 했어요
폴더 하나를 만들어서 upload.js 라는 파일과 같은 위치에 .env 파일을 만들고, 필요하다고 한 변수 2개 (supabase_url, supabase_service_role_key)를 등록해줬어요
만약 touch .env 가 잘 안되면 -> 그냥 직접 커서에서 폴더 열고 '새파일' 만드셔도 돼요
슈퍼베이스 url과 키 값은 퍼플렉시티한테 가서 어떻게 받냐고 물어보니까 바로 잘 알려줬어요
upload.js 스크립트 실행해보자!
터미널 가서 node upload.js 명령어로 js 파일을 실행시키라고 했어요
에러가 나서, 에러를 그대로 복붙해서 GPT에게 계속 도움을 요청했어요
에러 해결과정
결국 upload.js 를 그대로 복붙했더니 생긴 문제였어요. 그 안에 mp3 파일의 경로를 찾는 부분이 있는데, 그 경로를 제가 직접 맞게 설정해줘야 하는 거였어요
이 에러를 해결한 후 터미널에서 다시 node upload.js 를 실행시키니...!! 감격스럽게도 슈퍼베이스에 파일이 올라갔어요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
이제 그러면 이걸 터미널이 아니라, 클로드 mcp로 해야겠죠?
하지만...
제가 설치한 Filesystem MCP로는 node 명령어를 실행시킬 수 없대요
node 명령어를 제가 터미널에서 실행했으니까, 내 터미널을 직접 실행시켜줄 수 있는 mcp 가 있으면 되지 않을까요?
터미널을 직접 실행시켜주는 mcp 찾기
오! Desktop Commander MCP 라는 게 있다나봐요!
설치를 잘 완료하고, 이제 이걸 활용해서 명령하는 법을 찾아봅니다.
upload.js 파일을 실행시킬 때, 일레븐랩스 mcp로 만든 mp3파일을 upload.js 파일의 인자로 전달하기
GPT가 이렇게 하면 된대요
4. filesystem mcp로 파일명을 yyyy-mm-dd 포함한 영문 파일명으로 변경해줘. ex) '2025-05-28-community-managers-landing-page.mp3'
...
6. desktop-commander mcp로 Desktop/dahtmade-mcp/upload.js 를 실행할 때, 앞에서 기억한 파일명을 인자로 넣어줘최종 클로드에게 명령한 것
저는 이렇게만 명령했어요
자 이제 클로드가 열심히 mcp들을 불러다가 일을 시킵니다
와..... 이게 한 방에 되네..?
러버블로 만든 웹에서도 바로 보여집니다!! 라디오가 생성되어 슈퍼베이스에 저장되고, 이걸 웹에서 불러오는 거예요!
👉 지피터스 라디오 들으러 가기
결과와 배운 점
단계별로 클로드가 사용할 도구들이 각기 달라서, 원하는 기능을 제대로 수행할 수 있는 적절한 도구를 찾는 게 중요하다
filesystem mcp -> 내 컴퓨터 파일에 접근해서 파일명 변경, 폴더 이동 등을 수행
desktop commander mcp -> 터미널 명령어를 직접 실행
mcp라는 걸 활용해서 클로드를 나의 비서로 두고, 얘한테 일을 다 시킨다고 해도 - 결국 전체 워크플로는 내가 머릿 속으로 구상할 줄 알아야 함
클로드한테 어느 단계에 서 어떤 역할을 하게 할지를 명확하게 그 순서를 알고 있어야 하고
그 도구를 이용할 때 정확히 어떤 경로에서 어떤 파일을 실행시켜야하는지 등 - 명확하게 명령해야함
mcp를 쓰면 실행할 때 마다 조금씩 다른 도구를 찾아나서는 등 헤매는 경우 해결 법
이건 명확하게 어떤 MCP의 어떤 도구를 써서 어떤 경로의 파일을~~ 이런 식으로 구체적으로 명령해주면 90% 이상은 해결되는 이슈라고 생각됨
러버블로 뚝딱 만들고 슈퍼베이스를 연동할 때, '파일 업로드'와 'DB에 데이터 생성'은 다른 것
mp3 파일은 '파일 스토리지'에 업로드를 하는거고
러버블 웹에서 해당 파일을 목록으로 꺼낼 때는 '데이터베이스'에 별도로 저장해야 함
이건 mp3 파일을 올린 곳이고
이게 실제로 웹에서 꺼내어 보여줄 데이터 값
고민했던 것
클로드에 여러 종류의 mcp를 붙여서 해내게 할 수 있으면 -> n8n 워크플로가 꼭 필요할까?
아래 항목을 고민해보면 될듯
내가 하려는 작업이 모두 mcp를 제공하는가?
만약 일레븐랩스가 mcp를 제공하지 않았으면 - 클로드 mcp로 이걸 완성하지 못했을 것
n8n도 결국 노드 연결할 때, 기본 제공 노드가 아니라면 api를 직접 연결해줘야 함
mcp를 활용하면 api 개념이 어려운 비개발자가 직접 연동하지 않고, 클로드라는 대리인을 통해 하게끔 하는 방식이므로 api를 몰라도 쓸 수 있다는 장점이 있음
나 혼자 쓸건가, 다른 사람도 쓸 수 있는 기능으로 만들어야 하는가
클로드 mcp는 기본적으로 "클로드 앱"에서만 작동하기 때문에 - 내 컴퓨터에서만 쓸 수 있음
즉, 다른 사람은 이 워크플로를 못 씀
그리고 나조차도 내 노트북이 없으면 못 씀
향후 과제
클로드 mcp로 만드니까 나만 올릴 수 있는 문제가 있음 -> 누구나 일레븐랩스 api 키를 넣으면 직접 라디오를 올릴 수 있도록 하고 싶음
아마 이러려면 n8n 워크플로로 바꿔야 하는듯???
아래 '생성하기' 탭에서 url 넣고 생성하기 누르면 -> 클로드가 에이전트가 되어 수행한 모든 과정을 워크플로로 담은 n8n이 호출되어 -> 바로 데이터베이스에 등록되는 걸 만들어보기
