📻 이제는 누구나 본인 사례글로 라디오를 생성하실 수 있습니다!! (클로드 MCP를 n8n 워크플로로 다 옮겼어요!)

하려던 것

드디어 완성한 지피터스 라디오 📻 - 클로드야 일해라!

• 클로드 MCP 로만 활용해서 사례글 url만 넣으면 라디오로 생성해서 들을 수 있도록 만들었던 사례

• 그러나..! 아래와 같은 문제가 있어서 n8n으로 새로 구축하기로 함

향후 과제

• 클로드 mcp로 만드니까 나만 올릴 수 있는 문제가 있음 -> 누구나 일레븐랩스 api 키를 넣으면 직접 라디오를 올릴 수 있도록 하고 싶음

• 아마 이러려면 n8n 워크플로로 바꿔야 하는듯???

• 아래 '생성하기' 탭에서 url 넣고 생성하기 누르면 -> 클로드가 에이전트가 되어 수행한 모든 과정을 워크플로로 담은 n8n이 호출되어 -> 바로 데이터베이스에 등록되는 걸 만들어보기

이제는 누구나 본인 사례글로 라디오를 만들 수 있어요 📻

• 지피터스 라디오 웹사이트 접속

• 사례글 URL 넣고 일레븐랩스 API Key 넣고 '라디오 생성하기' 버튼 클릭

• 웹훅 트리거 -> n8n 워크플로가 실행됨

• 약 30초 후, 최종적으로 '라디오 듣기' 페이지에서 생성된 라디오를 들을 수 있음

N8N 워크플로 소개

✅ 전체 워크플로 개요

ALT

시스템의 다른 부분을 보여주는 다이어그램

이 워크플로는 총 7개의 노드로 구성되어 있으며, 전체 흐름은 다음과 같습니다:

1. Webhook: 사용자가 보낸 URL을 트리거로 시작

2. HTML 전체 가져오기: URL에서 전체 HTML을 가져옴

3. 제목, 작성자, 본문 추출: 콘텐츠에서 제목, 작성자, 본문을 정제 추출

4. OpenAI: GPT-4o를 사용해 스크립트 작성 + 태그 추출 + 파일명 생성

5. ElevenLabs: 텍스트를 mp3 음성으로 변환

6. Supabase 파일 업로드: 생성된 mp3 파일을 Supabase Storage에 저장

7. Supabase DB 기록: 메타데이터 (제목, 작성자, 파일 경로, 날짜, 태그 등) 저장

🧠 상세 흐름 분석

1. 📩 Webhook (트리거)

• 외부 앱에서 case_url, elevenlabs_api_key를 담은 POST 요청을 받음

• 이 URL은 사례 게시글의 링크입니다

2. 🌐 HTML 전체 가져오기

• case_url에 HTTP 요청 → HTML 전문 수신

• 이후 Code 노드에서 필요한 부분만 정제할 준비

3. 🧾 제목, 작성자, 본문 추출 (Code 노드)

<h1> → 제목  
<a href="/member/..."> → 작성자  
<article class="prose"> → 본문만 추출 (스크립트/스타일 제거 포함)

• 매우 정확한 CSS 구조 기반 파싱

• 정규표현식 활용, HTML 태그 제거 및 공백 정리

4. 💬 OpenAI GPT-4o: 스크립트 및 태그 생성

• 자연스러운 감정이입 말투의 라디오 스크립트 생성

• 사용 도구 및 분야 키워드 1~2개씩 tags로 추출

• 제목 → 영어 → 파일명(yyyy-mm-dd-title-in-english) 생성

출력 예시:

{
  "file_name": "2025-05-31-my-case",
  "script": "...",
  "tags": ["n8n", "정신건강"]
}

ALT

코드를 가리키는 빨간색 화살표가있는 코드 편집기 스크린 샷

5. 🎙️ ElevenLabs 음성 생성

• script를 텍스트로 받아 mp3 파일 생성

• output_format: mp3_44100_128, model_id: eleven_multilingual_v2

• Binary 형태로 결과 반환 (n8n 내부에서 data로 유지됨)

6. ☁️ Supabase Storage에 파일 업로드

• 파일명: audio-files/{{ file_name }}.mp3

• Authorization 헤더로 서비스 키 전달

• Send Body As: Binary, 필드명: data

• x-upsert: true로 중복 덮어쓰기 허용

7. 🗂️ Supabase DB posts 테이블에 메타데이터 업로드

• 저장되는 필드:

  • title, author, original_url, created_date

  • audio_file_path: mp3 파일 위치

  • tags: GPT에서 추출한 태그 리스트

• created_date는 한국 시간 기준 ISO 형식 (2025-05-31)으로 자동 생성됨

시행착오

1️⃣ 커뮤니티 노드는 클라우드에서 쓸 수 없었다

• 문제 상황: HTML에서 본문을 추출하려고 할 때, 많은 예시들이 HTML Extract라는 커뮤니티 노드를 사용하라고 알려줌.

• 그러나: n8n Cloud 버전에서는 커뮤니티 노드를 설치할 수 없음.

• 해결 방법: 직접 Code 노드에서 HTML 파싱 로직을 구현.

  • Regex와 replaceAll()을 활용해 article 태그 내부에서 본문만 추출

  • <script>, <style>, <div> 등은 모두 제거

2️⃣ Supabase 노드에는 파일 스토리지 업로드 기능이 없었다

• 문제 상황: ElevenLabs에서 생성한 mp3 파일을 Supabase에 올리려는데,
  n8n Supabase 노드에는 Storage Upload 기능이 없음

• 해결 방법:

  • Supabase 공식 REST API 문서를 참고해 직접 HTTP 노드 구성

  • POST https://<project>.supabase.co/storage/v1/object/<bucket>/<filename>.mp3

  • Binary로 mp3 데이터를 보내고, Authorization 헤더에 API 키 추가

3️⃣ ElevenLabs로 스크립트를 보낼 때 JSON 오류 발생

• 문제 상황: GPT가 생성한 "script" 텍스트를 ElevenLabs API에 전송할 때
  "JSON parameter needs to be valid JSON" 에러 발생

• 원인:
  script 텍스트 안에 **따옴표(")나 줄바꿈(\n)**이 포함되어 JSON 전체 형식이 깨짐

• 해결 방법:

  • JSON.stringify($json.message.content.script) 적용

  • 이렇게 하면 모든 줄바꿈, 따옴표, 특수문자가 자동 이스케이프 처리되어
    "text" 필드에 안전하게 들어갈 수 있음

4️⃣ ElevenLabs의 create vs stream API 차이를 몰라서 혼란

• 문제 상황: ElevenLabs 문서에 create speech, stream speech가 동시에 소개되어 있어
  어떤 걸 써야 할지 혼란스러움

• 헷갈린 이유: 둘 다 텍스트 → 음성 기능을 제공하지만, 방식이 다름

• 해결 요약:

• 해결: n8n에서는 파일을 Supabase에 저장해야 하므로,
  create 방식으로 확정 사용

5️⃣ ElevenLabs API 인증 오류의 정확한 원인

• 문제 상황: API 키는 제대로 입력했지만 "Unauthorized" (401) 에러 발생

• 처음 추측: 키가 틀렸거나 헤더가 잘못된 줄 알았음

• 실제 원인:

  • 무료 요금제에서는 특정 목소리와 모델을 사용할 수 없음

  • 예를 들어:

    • yohankoo 음성: 프리미엄 보이스

    • eleven_multilingual_v2 모델: 유료 요금제 이상만 지원

• 해결 방법:

  • ElevenLabs 유료 요금제 가입 후, 동일한 API 키로 다시 요청 → 문제 즉시 해결

러버블에서 추가한 기능들

ALT

한국어로 된 문자 메시지

하다가 러버블 5개 무료 다 써서 커서로 넘어감

• 커서에서 수정 요청을 한 뒤

• 커밋해달라고 요청하고

• 러버블로 가서 다시 publish 했음

마음에 드는 러버블 결과물

끗!!!!!!!!!!!