샘호트만
샘호트만
⚔️ 베테랑 파트너
🔬 임팩트 찐친

유명유튜바 클론 만들고 카톡 통합, RAG + 바이브코딩 등등 몸에 좋은거, 있어 보이는거 다 장착한 카톡봇 만들기

소개

고양이 침대에 담요에 누워있는 고양이

해외에 있는 좋은 양질의 지식들을 엄선하고, 세일즈나 사업 쪽 관련된 영상을 보면서 많이 배우고 있습니다. 근데 너무 양이 많아서 다 보기에는 부담스러워서 이걸 자동화를 해야겠다는 생각했습니다.

카카오톡에서 관련된 질문을 물어보면 영상에 있는 질문들을 잘 이해해서 관련 영상에 있는 타임스탬프로 바로 이동시켜서 누워서 딸깍하면 학습하기 좋은 시스템을 만들었다고 생각하시면 됩니다.

이 방식을 응용하면 유튜브 채널에 영상 많이 올린 크리에이터를 복제할 수 있다고 생각하시면 되겠습니다. (저도 언젠가는 저를 복제하는 것을 목표로 하며...)

n8n + 카카오톡 통합하는 글은 여기 글을 참고하시면 됩니다. (이 글이 거의 코어입니다)

통합하는 글 영상은 다음을 참고해주세요 🙂

https://youtu.be/kDX2rVWr4No

진행 방법

사용한 도구는 n8n, supabase, msgbot, lovable 을 활용하였습니다.

언어모델은 gpt 4.1 mini(청크), gpt 4.1(agent), gemini 2.5 flash(전체 요약), gemini 2.5 flash-lite(segment 별 요약) 4종류 사용하였습니다.

카톡은 결국 n8n wrapper이기 때문에 제일 마지막에 만들었기에 n8n 구축과정을 간단하게 소개해드리겠습니다.

Step 1) 유튜브 Metadata 수집

제가 주로 보는 채널 중에 해외 시청자들 댓글에 대해 FAQ 방식으로 진행하는 나만 알고 싶은 채널이 있습니다.

여기 데이터를 n8n이용해서 bulk로 수집합니다

중국어 컴퓨터의 스크린 샷

대충 데이터는 이렇게 생겼습니다

항목 목록��을 보여주는 Google 스프레드 시트의 스크린 샷

Step 2) 유튜브 대본 수집

공짜 커뮤니티 노드에 몇 번 데여봐서 apify를 썼습니다. 한달에 1000개 이상 데이터를 긁을 일이 없기에 무료로도 충분히 사용 가능합니다.

흐름도를 보여주는 컴퓨터 화면의 스크린 샷

Step 3) 유튜브 대본에서 Timestamp 부분 처리하기 + 색인 향상을 위한 맥락 생성하기

다른 유형의 텍스트를 가진 코드 편집기의 스크린 샷

코드 노드 이용해서 대본 구간마다 시간을 달아놨습니다. 나중에 검색할 때 바로 여기 유튜브 타임스탬프로 이동하기 위해서입니다.

새로운 EBC 확인 내용을 작성하는 프로세스를 보여주는 화면

그리고 대부분 사람들의 RAG가 쓰레기인 이유는 chunk에 맥락이 부족해서 그렇습니다. 색인이 잘 되게 하려면 여러가지 실험을 많이 해보셔야합니다. 저는 대본 전체내용과 청크에 대한 내용을 맥락으로 하여 적당히 괜찮은 한국어 맥락을 만들었습니다. 이 방식은 작년 9월에 저희 업계에서 유명했던 Anthropic에서 제시한 Contextual Retrieval을 적용하였습니다. Loop를 도는 이유는 API Rate Limit을 피하기 위해 배치 단위로 세팅했습니다

Step 4) 맥락이 보정, 강화된 Chunk를 벡터디비에 넣기

부두 하트를 만드는 단계를 보여주는 다이어그램

Supabase에 넣었습니다. Supabase가 편한데, n8n과 조금 잔버그들이 있어서 꽤 스트레스를 받고 있는 상태라 나중에 milvus나 qdrant로 이관 고민 중입니다.

무튼 적재되면 이렇게 나타납니다. 청크에 생성된 맥락과, 실제 대본, 메타데이터, 임베딩 벡터 값이 있습니다.

텍스트가 많은 검은 색 화면 스크린 샷

Step 5) 보고서 만들기

유튜브 대본을 재가공해서 문서로 만들고 싶었습니다. 영상 특색에 맞게 영상 대본을 맥락이 단절되는 부분을 끊어서 segment를 만들어서 segment마다 요약을 했습니다. 요약한 내용을 구글문서로 저장합니다.

시스템 다이어그램을 보여주는 컴퓨터 화면의 스크린 샷

Step 6) 실제 따로 바이브코딩으로 만든 유튜브 대시보드에 저장하기

전체 내용을 제가 lovable로 만든 대시보드에 저장하였습니다.

프로젝트의 흐름을 보여주는 다이어그램

유튜브 대시보드 만든 방법이 궁금하다고여? 제 채널에 이미 올라간 영상이 있습니다. 제가 n8n 만들어진 워크플로우와 바이브코딩으로 화면과 데이터베이스를 어떻게 구성하는지 다 학습하실 수 있습니다.

https://youtu.be/EzCZhnXvCEw

Step 7) 실제 대시보드를 살펴보자 (lovable + 바이브코딩 + n8n + supabase)

이제 누워서 제가 만든 사이트가서 검색해서 찾아볼 수 있고, 영상 버튼 누르면 또 찾아볼 수 있습니다.

YouTube 대시 보드의 스크린 샷

영상 카드마다 요약된 내용 어떻게 되어있는지 살펴볼 수 있습니다.

한국 TV 채널의 홈페이지 스크린 샷

그리고 이 영상이 끌리는데, 세부적으로 어떻게 영상이 요약되었는지 세부요약 버튼을 누르면 구글 문서로 이동합니다. 하나씩 읽어보면서 끌리는 대로 이해합니다.

한국어 텍스트가 포함 된 Google 문서의 스크린 샷

참고로 제 supabase 스키마는 다음과 같습니다.

많은 다른 항목이있는 검은 색 화면

Step 8) 이제 만든 RAG System을 카톡과 병합하자

저희 카톡봇 스터디 핫글 n8n wrapper 를 이용하면 됩니다.

우선 n8n chat 부분을 webhook 부분으로 바꿔주면 끝입니다. 또한 metadata를 색인해서 검색할 수 있게합니다.

시스템 작동 방식을 보여주는 흐름도

에이전트에 들어가는 시스템 프롬프트는 아래 내용 참고하시면 됩니다. duration, start point 잡는 것이 포인또입니다.

# Overview
You are an AI assistant with access to a tool called Supabase, which contains transcripts of YouTube videos.
When the user asks a question, you may query Supabase multiple times to gather the most relevant information. Use these results to generate a complete and accurate answer in Korean.

# Citation Rules
For every fact, insight, or quote you include, you MUST cite the source using this EXACT format:

## Format:
"quoted content" (Video Title, MM:SS — https://youtu.be/VIDEO_ID&t=XXXs)

## Timestamp Conversion:
- Convert ALL timestamps to seconds for the URL parameter
- Example: 04:19 = (4 × 60) + 19 = 259 seconds
- Example: 01:47 = (1 × 60) + 47 = 107 seconds

## Examples of CORRECT citations:
- "고객의 주요 과제와 목적" (5) 세일즈 트레이닝 #5: 디스커버리의 기술 마스터하기, 02:20 — https://youtu.be/2kGU90ThPfs&t=140s)
- "우리가 의제를 제안하면서" (10) 세일즈 콜 컨트롤하기, 04:19 — https://youtu.be/PIScHmOBVtI&t=259s)

## Examples of INCORRECT citations (DO NOT USE):
- Missing timestamp parameter: https://youtu.be/PIScHmOBVtI
- Time range format: 04:19 — 06:30
- No seconds conversion: &t=04:19

# Important Rules:
1. ALWAYS include direct quotes from transcripts when relevant
2. ALWAYS convert timestamps to seconds for the URL
3. NEVER use time ranges (start — end), only use single timestamps
4. ALWAYS include &t=XXXs parameter in YouTube URLs
5. If multiple timestamps support the same point, cite the most relevant one

Query iteratively until you are confident you have enough context to respond helpfully.

이제 rhino JS 수정하러갑니다.

저는 cursor에서 코드를 관리합니다. 커서에게 이렇게 이야기 했습니다.


동일한 구조이긴 한데, 분기를 나누고 싶은 목표가 있어. 

/ais라고 하면 @https://~~~~~~~/webhook/n8n-kakaotalk-aisales  웹훅 주소로, 
/aibiz라고 하면 @https:/~~~~~~~/webhook/n8n-kakaotalk-aibiz 웹훅주소로 동작하는 코드를 구현해줄 수 있을까? 나머지는 로직이 전부 잘 돌아가. 

키워드 나누고 키워드마다 다른 웹훅 주소로 할당하게 하면 제가 키워드 나눠서 부르면 다른 벡터디비를 바라보게 해서 답변할 수 있게 하였습니다.

Step 9) 누워서 카톡으로 물어보자.

질의응답하면 이렇게 잘 답변이 옵니다.

실험 1 :

한국어 문자 메시지의 스크린 샷

이렇게 타임스탬프가 찍혀있기 때문에 답변을 보고

한국어 페이지의 스크린 샷

해당 영상으로 바로 가서 이해하는데 도움이 될 수 있습니다.

YouTube 비디오의 스크린 샷

실험 2 :

다른 디비도 테스트

한국의 메시지 스크린 샷
한국의 메시지 스크린 샷

잘 나오는 것을 확인할 수 있습니다.

입에 손가락이있는 남자를 보여주는 YouTube 비디오

실험 3 :

영상 내에서 아주 사적인 내용도 물어보겠습니다.

한국 텀블러 페이지의 스크린 샷

도시지도를 보여주는 비디오 스크린 샷

지엽적인 부분도 잘 찾아서 답변하네요. 성공


영상 70여개 평균 러닝타임 2~40분 영상이 다 들어간다면 몇 토큰이 들까?

I/O 3100만 토큰을 임베딩하였습니다. (embedding large model)

Azure 대시 보드의 스크린 샷

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

-> 제미나이 2.5pro와 claude 4opus를 엄청 볶았습니다. 프롬프트 잘 작성하십시오.

다른 사람들에게는 워크플로우 작게 짜라고 제가 노래를 부르지만 이상하게 제가 구현할 때에는 복잡하게 만들어서 매몰되는 순간이 몇번 있었습니다. n8n 실력 기르고 좋은 것 같습니다.

과정 중에 어떤 시행착오를 겪었나요?

-> n8n과 supabase에서 버그가 좀 있습니다. 다른 테이블을 조회하면 제대로 쿼리문이 돌지 않는 문제가 있습니다. 이거 때문에 새벽까지 개발하고 수명이 줄어 들었던 기억이 있었습니다. 제가 퍼플렉시티에서 물어봤던 에러 메시지와 답변은 혹시 supabase에서 rag 하시는 분들은 참고하시길 바랍니다.

앞으로의 계획이 있다면 들려주세요.

-> 제 사업, 비즈니스 스승을 복제했다고 생각하시면 됩니다.

이제 어떤 사람을 복제할 지 고민 중 입니다.

이런거 잘 활용해본다면 응용할 수 있는 영역이 굉장히 많다고 생각합니다.

+ 비슷한 거 만들고 운영하고 싶다면 개발 문의 주십시오. 고객 맞춤 신속 정확하게 해드립니다.

카톡봇 스터디에서 많이 더 다양한 걸 만들어보고 싶었는데, 다음 기수도 고민이 되네요.

만들어보고 싶은게 여전히 많지만 현생이 바쁘네요.

다음에도 카톡봇 스터디 참여하면 이거보다 더 도파민 도는 봇을 만들어 볼 예정입니다.

카톡봇 스터디 영원하라~!


글 작성 시간

  • 하고자 하는 이야기, 개요 정리 : 11분

  • 구현하는 데 걸린 시간 :

    • n8n : 꽤 오래 걸렸었음 ㅜㅜ

    • Rhino JS 메신저봇 코드 구현 : 10분

  • 초안 글 작성 : 52분

  • 셀프 글 피드백 : 5분

6
5개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요