🎧 지피터스 모두를 위한 사례게시글 팟캐스트(라 쓰고 사실 라디오임)

📋 프로젝트 배경

안녕하세요!

저희팀은(센스잡,연재,혜령,닿 ) GPTers 스터디 멤버들과 공유할 만한 사례를 만들어보고 싶었어요.

사례 게시글은 점점 많아지고 있지만,

• 무엇이 올라왔는지 한눈에 보기 어렵고

• 모두 일일이 확인하는 것도 부담스럽다는 문제가 있었습니다.

특히 바쁜 직장인들은 출퇴근 시간에 간편하게 살펴보고 싶은 니즈가 크기 때문에,
사례글을 다시 볼 수 있도록 요약 콘텐츠나 알림 기반 구조가 필요하다고 느꼈습니다.

출근길 직장인들을 위한 팟캐스트 형식의 오디오 콘텐츠를 자동으로 생성하고, 이를 웹사이트에서 바로 들을 수 있게 하는 프로젝트를 진행했습니다. 🚶‍♀️🎧

🛠️ 활용한 툴

• FireCrawl MCP : 웹 URL을 스크래핑해서 지피터스 사례글을 읽어옴

• Claude : 사례글 바탕으로 팟캐스트 스크립트 생성

• 일레븐랩스(ElevenLabs) MCP : AI음성으로 팟캐스트 mp3 생성

• 슈퍼베이스(Supabase): 생성된 팟캐스트 저장

• 러버블 : 사용자 웹 UI 개발

🔄 진행 방법 & 시행착오

1️⃣ 콘텐츠 생성 단계

시도: FireCrawl로 웹 콘텐츠를 스크래핑하고 이를 기반으로 "진행자가 질문하고 답변하는 팟캐스트"를 MCP로 생성했어요.

ALT

한국어 텍스트가있는 페이지의 스크린 샷

시행착오:

• 처음 생성된 콘텐츠는 진행자 파트가 너무 길었어요. AI는 너무 자세하게 설명하려는 경향이 있더라고요. ✂️

• "줄여줘"라고 요청했더니 적절한 길이로 조정해주었지만, 이 과정에서 중요한 정보가 누락되지 않도록 확인이 필요했습니다.

• 직접 제 사례를 입력해봤는데, 제 글쓰기 스타일이 반영되어 더 자연스러운 결과물이 나왔어요. 개인화된 콘텐츠 생성의 중요성을 깨달았습니다! 👍

2️⃣ 일레븐랩스로 팟캐스트 생성 도전

일레븐랩스 MCP로 두 화자의 목소리를 구분해 음성을 만들려 했지만, 동시에 두 목소리로 생성하는 기능은 없다는 오류가 떴어요. 대사 앞에 화자명을 붙이는 방식이 제안됐지만 만족스럽지 않았고요.

ALT

한국어 웹 사이트의 스크린 샷

3️⃣ 5개의 mp3 만들어서 합쳐보면?

• 각 대사를 개별 음성 파일로 생성해 이어 붙이면 된다는 점을 발견! 총 5개의 음성 파일을 만들었어요.

ALT

한국어 테스트의 스크린 샷

시행착오:

• MCP에는 MP3 파일을 합치는 기능이 없었습니다. "다른 오디오 병합 툴을 사용하라"는 안내만 받았죠.

• Python 코드로 MP3 파일을 합치는 방법을 고려했지만, 개발자가 아니라서 진입 장벽이 높았어요. 😓

• "MCP로 쓰고 싶다"고 했더니 "내가 MCP를 개발하는 사람이 되는 거야"라는 답변을 받았어요. 결국 오디오 파일 5개를 합치는 Python 프로그램을 짜서 MCP로 배포해야 한다는 것...

• 이 정도 레벨은 넘어서는 것 같아 포기하고 라디오 형식으로 콘셉트를 변경했습니다. 📻

4️⃣ 성시경 처럼 좀 잔잔한 라디오 느낌으로 전환

대화 형식을 포기하고, 라디오처럼 하나의 음성으로 소개하고 사례 요약하는 포맷으로 변경했어요. "늦은 밤 'AI와 함께하는 디자인 여행' 라디오입니다."로 시작해, 사례 설명과 후평을 전하는 구조로 AI가 스크립트를 짜주었죠.

• “잔잔한 톤” 요청에 AI는 표현(예: “늦은 밤 조용히”)과 속도를 조절해 톤을 맞췄어요. 톤은 선택한 목소리보다 프롬프트 조절로 구현되는 걸 알게 됐죠.

ALT

단어가있는 한국 웹 사이트

• 내 사례를 적용해 테스트했더니 숫자 발음 문제가 있었어요. ‘16기’를 ‘일육기’로 읽더라고요. 해결책은 스크립트에 ‘십육기’처럼 한글로 표기하는 것!

5️⃣ 슈퍼베이스 연동

시도: 생성된 오디오 파일을 웹에서 바로 재생할 수 있게 하려 했습니다.

ALT

한국어 텍스트가있는 페이지의 스크린 샷

시행착오:

• 처음에는 구글 드라이브 MCP를 검색했지만, 구글 드라이브는 파일을 다운로드해야 재생할 수 있어 사용자 경험이 좋지 않았어요. 🤔

• 대안으로 슈퍼베이스를 활용해 웹사이트를 만들고 오디오 파일을 저장하는 방안을 고려했습니다.

• 슈퍼베이스 MCP 설치가 첫 난관: 환경 설정에서 많은 문제가 발생했어요.

  • NVM 설치가 안 되어 있었고, 버전이 맞지 않아 여러 명령어를 실행해야 했습니다.

  • nvm install 20, nvm use 20 등의 명령어로 해결했지만 이 과정이 직관적이지 않았어요.

• 슈퍼베이스 스토리지 버킷 생성 시 네이밍 규칙 문제:

  • AI가 언더바(_)를 사용한 이름을 제안했지만, 실제로는 하이픈(-)을 사용해야 했습니다.

  • "audio_files"라는 이름으로 버킷 생성을 시도했다가 실패한 후, "audio-files"로 성공했어요.

• 엣지 함수 배포 문제:

  • 파일을 업로드하기 위한 엣지 함수 배포 과정에서 오류가 발생했습니다.

  • "데이터베이스 메타데이터가 추가됐다"는 메시지는 나왔지만, 실제 업로드가 성공했는지 확인이 필요했어요.

  • 아마 클로드는 코드를 실행할 수 없어서 에러가 나지 않았나 싶어요.

• 로그 파일 확인의 중요성:

  • 에러 발생 시 로그 파일을 확인하는 방법을 배웠습니다. %APPDATA%\\Claude 폴더에서 각 MCP별 로그를 확인할 수 있었어요.

6️⃣ 러버블 웹 UI 제작

ALT

한국어 웹 사이트의 스크린 샷

💡 배운 점

1. AI 음성 생성 관련

• 음성 톤 요청 시 AI는 단어 선택과 문장 표현도 함께 조정합니다. "잔잔한 톤"을 요청했더니 "늦은 밤, 조용히" 같은 표현을 사용해 분위기를 만들어냈어요. 🌙

• 숫자와 영어는 한국어 발음으로 스크립트에 직접 적어줘야 자연스럽게 읽습니다. (예: "16기"를 "십육기"로 표기)

• 스크립트 생성 시 인스트럭션에 "영어로 된 것은 한국어 발음으로, 숫자는 한국어 발음으로 변환해서 스크립트에 적어줘"라고 명시하면 더 자연스러운 결과물을 얻을 수 있습니다.

2. 기술 스택 활용

• 각 도구의 한계를 미리 파악하는 것이 중요합니다. 일레븐랩스가 두 음성의 대화형 생성을 지원하지 않는다는 것을 알았다면 처음부터 다른 접근법을 시도했을 거예요.

• 슈퍼베이스 같은 도구는 네이밍 규칙 등 사소한 부분에서 오류가 발생할 수 있으니 공식 문서를 꼼꼼히 확인해야 합니다.

• 에러 발생 시 로그 파일 확인 방법을 알아두면 문제 해결에 큰 도움이 됩니다.

3. 프로젝트 관리

• 기술적 한계를 만났을 때 포기하지 말고 유연하게 방향을 전환하는 것이 중요합니다. 팟캐스트 형식이 어렵다면 라디오 형식으로! 🔄

• 완벽보다는 실용성을 우선시하면 더 빠르게 결과물을 만들 수 있습니다.

• 개발 지식이 없는 경우, 너무 복잡한 기술적 문제는 우회하는 것도 좋은 전략입니다.

🚀 향후 계획

• 위 프롬프트 한 번에 수퍼베이스에 mp3가 저장되도록 하는 게 목표

• 러버블에서 작동 가능하게 연결

• 매일 전날 올라온 주요 사례글을 모아 -> 팟캐스트 생성 -> 해당 url을 멤버들 출근길에 문자/알림톡으로 보내주고 싶음

• 사용자 커스터마이징은 추후로 계획
  → 예: 관심 키워드 기반 추천, 출퇴근 시간 기반 맞춤 알림 등

해결필요

• 클로드에서 슈퍼베이스 mcp로 db에 파일 저장하고 싶은데, 클로드가 내 로컬pc에 저장된 mp3 파일에 접근을 못해서 실패

• 슈퍼베이스 파일 스토리지에 mp3 파일 업로드 지원을 안함;