배우고 싶은데 너무 막막하다면, 찍먹 요약으로 가볍게!

🧭 소개

풀코스로 시작하긴 부담스럽고, 일단 한입만 찍먹하고 싶은 분들을 위해 만들었습니다!
게임 제작 툴, 그림 그리는 법 같은 걸 배우고 싶을 때 - 영상마다 클릭해보며 나랑 맞는 걸 찾기도 귀찮고, AI에 물어보자니 헛소리가 나올까 걱정되더라고요.

답변도 애매하고, 정작 뭘 준비해야 할지도 몰라 막막한데 유료 강의는 부담스럽고…
게다가 프롬프트 입력할 때마다 역할, 스타일 다시 설정하는 것도 귀찮습니다. 저만 그런가요

그래서 만들었습니다.
필요한 재료, 추천 툴, 기본적인 제작 과정 등 ‘시작하기 전에 알아두면 좋은 것들’을 한눈에 요약해주는 서비스.
저처럼 가볍게 시작하고 싶은 ‘찍먹파’에게 추천드려봅니다 😀

(포문은 거창합니다...)


🔧 진행 방법

전체 워크플로우입니다 🙂

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

✅ Trigger

  • 텔레그램 Trigger (Telegram Trigger 노드)

    • 사용자가 키워드 입력 시 시작!

    • 저는 이번에 RPG Maker 라는 게임 제작 툴이 있는데, 요 툴 사용 방법을 받아볼까 합니다.

      녹색 ��배경이있는 로고의 이미지

🔍 Step 1: 유튜브 영상 검색

  • HTTP Request 노드

    • YouTube Data API 사용 (https://console.cloude.google.com)

    • order= viewCount로 인기 영상 상위 5개 추출

    • 노드에서 HTTP 요청할 URL을 분석하면 아래와 같습니다.

    <https://www.googleapis.com/youtube/v3/search?part=snippet>
    &q={{ $json.message.text }} <- 텔레그램 Keyworkd
    &maxResults=5 <- 상위 5개
    &order=viewCount <- 조회수 기준
    &type=video,playlist <- 영상, 플리 포함 5개
    &key=(유튜브 API 키) <- YouTube Data API 사이트에서 받은 키 입력

↔️ Step 2: Video, Playlist 분리

  • Switch 노드 사용:

    • 스크립트 추출 시 Playlist는 다시 그 안에 있는 video를 다 끄집어낸 후에야 가능

    • 그래서 Playlist는 별도로 끄집어내는 과정을 거친 후 스크립트 수집

프로세스의 흐름을 보여주는 다이어그램

🧠 Step 3: 스크립트 수집, Merge

  • Youtube Transcript 노드로 추출 (video는 위 사진에서 노란색, playlist는 핑크색)

  • 에러 반환하는 경우, 처리 필요

  • video와 playlist 에서 추출한 스크립트 병합. Merge 노드 사용 (무난하게 Append, 들어오는 데이터는 video와 playlist 2개니까 2)

🤖 Step 4: AI 요약 (가이드라인 추출)

  • AI Agent + OpenAI (GPT4.0)

    전에 못 써본 AI Agent! 와아아아~ (옆에 보이는 딥엘DeepL은 Step5에서 설명드릴게요)

    디지털 채팅 모델의 다이어그램
  • 프롬프트 전문:

    System Message
    
    You are an experienced instructor who has been teaching non-majors in the field of {{ $json.topic }} for over 20 years. You are fluent in both English and Korean.
    
    The user is a beginner who is learning {{ $json.topic }} for the first time and is looking for the most efficient learning sequence and practical tips.
    
    Your role:
    
    Summarize only the key points from any long explanation or conversation.
    
    Organize the content into logical sections, assign clear subheadings, and present the information concisely.
    
    Provide step-by-step, action-oriented guidance that beginners can follow immediately.
    
    Focus only on practical and helpful information.
    
    Include specific implementation methods and detailed examples in each step.
    
    Do not include any personal opinions or assumptions.
    
    Prompt
    
    I need a learning guide based on this YouTube transcript about {{$json.topic}}. Please:
    
    1. First analyze the key learning points in the transcript
    2. Then create a structured guide with:
       💫 Essential concepts (what must I know before starting?)
       💫 Learning steps (include specific software/tools and exact procedures)
       💫 Tips and reminders (what should I keep in mind?)
       💫 Common beginner mistakes (what should I avoid?)
    
    Be as specific and actionable as possible in your guide.
    
    TRANSCRIPT:
    ---
    {{ $json.mergedScript }}
    
  • 퀄리티가 처음에는 너무 아니었어서, 프롬프트 작성에 애를 좀 먹었습니다.

  • 처음 작성한 프롬프트가 너무 복잡해서 그런가? 하는 의문이 들었습니다. 그래서 Genspark에게 물어봤더니, 위와 같은 프롬프트로 고쳐줬습니다 😊 (영문으로 적어달라고 하면 저렇게 줍니다!)

🇬🇧🇰🇷 Step 5: DeepL 번역

  • AI Agent에게 가이드라인 작성 + 번역 한 번에 맡기면, 과부하 걸리더라고요. billing 페이지 보고 놀라서 이런거 아닙니다

  • OpenAI 외 번역도구로 DeepL 사용중이라, API로 번역했습니다.

📄 Step 6: Markdown

  • 뉴스레터 형식에서 본문도 HTML 형태로 정리될 수 있도록 미리 다듬기

  • 안 그러면 아래와 같이 나옵니다. 보기 좋은 떡이 읽기도 좋으니 바꿔봅시다.

    숫자가 다른 염색체의 다이어그램

📄 Step 7: HTML 변환

  • 뉴스레터 형식으로 예쁘게 변환하고자, HTML로 변환

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Quick Guide: {{ $('Code3').item.json.topic }}</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f8f8;
      padding: 20px;
      color: #333;
    }
    .container {
      max-width: 700px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    h1 {
      font-size: 28px;
      margin-bottom: 10px;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    hr {
      border: none;
      border-top: 1px solid #ccc;
      margin: 20px 0;
    }
    h2 {
      font-size: 22px;
      margin-bottom: 10px;
    }
    .summary {
      font-size: 16px;
      line-height: 1.6;
      background-color: #f0f0f0;
      padding: 15px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📬 Quick Guide: {{ $('Code3').item.json.topic }}</h1>
    <p>안녕하세요! 요청하신 <strong>{{ $('Code3').item.json.topic }}</strong>에 대해 다룬 YouTube 영상들을 분석하고, 그 내용을 요약한 가이드라인을 전달드립니다 🎉</p>
    <hr>
    <h2>✅ 핵심 요약</h2>
    <div class="summary">
      {{ $json.data}}
    </div>
  </div>
</body>
</html>

📤 Step 7: 이메일 전송, 텔레그램 안내 메시지 발송

  • Gmail 노드로 사용자에게 전달

    빠른 가이드 RPG 메이커
  • Telegram 노드로 사용자에게 안내 메시지 발송


✅ 결과와 배운 점

당장 급하면 배울 수는 있을 것 같습니다. 식품으로 따지자면 패스트푸드?
그리고 생각보다 괜찮았습니다.

그러나 이 과제에는 2가지의 치명적인 문제가 있습니다.

  1. 조회수 기준

    조회수 높은 영상만이 좋은 것은 아니라, 정교한 서비스라면 이걸 더 고민해봐야할 것 같습니다. 좋아요/싫어요 수라든가, 댓글 수를 고려한다든가. 왜냐하면, 어떤 케이스는 Gemini가 훨씬 상세하게 대답해주기 때문인데요. 이 서비스 계속 이용해야 할 이유는... 진짜 음식 없을 때 패스트푸드라도 먹기 정도겠군요. (씁쓸)

  2. Youtube Transcript 오류

    노드 오류 시에는 아예 script가 다 날라갑니다. 이게.. 릴리스 ai에서는 잘 되는데, 노드에서는 안 되더라구요. 차주 스터디 때 도움 받고 싶습니다. 어떻게 오류를 처리해야 할까요?

    https://www.youtube.com/watch?v=d_RKroEl8U0


📚 도움 받은 글, 참고자료

저번 주 스터디장님께서 error trigger 영상 하나 올려주셨던 기억이 있습니다. 1주차도 2주차도 에러가 터져서 제 머리도 터질 것 같아 에러 트리거를 추가했는데요. 구체화되면 좋겠지만 아쉽게도 기본만 구현했습니다. 일단은 에러가 일어나면 아래와 같이 텔레그램으로 전송해줍니다.

까먹고 꺼두지 않은 흔적

그래도 이번 과제는 상시 대기 상태라 중단 이유를 아는 건 중요했습니다. (채팅방에 메시지 치면 바로 요약받는 flow라 항상 Active 켜둬야하는 상황). 무한 로딩 때문인지, 에러가 난 건지. 적어도 이번 트리거를 설치하니까 자세히는 몰라도 '아, 에러 떴구나...^^' 하면서 오류를 고칠 수 있게 됐다는 점에서는 의미가 있겠네요!

4
4개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요