김혜미
김혜미
🎻 루키 파트너
🚀 SNS 챌린지 달성자

영상만 보고 끝? 내용을 리마인드 할 수 있는 학습지 제작(feat. n8n)

[소개]

유투브에는 정말 좋은 어학공부용 컨텐츠들이 있습니다. 그런데 그 컨텐츠를 그냥 보고 끝! 하는 것보다, 제대로 봤는지 한 번 체크하는 시간을 가지면, 리마인드도 되고, 영상을 볼 때도 집중해서 볼거라는 생각을 하게 되었어요.

그래서! 오늘 본, 혹은 볼 유튜브 영상 링크만 Telegram으로 보내면, 그 영상의 자막을 분석해 학습지를 만들고, 예쁘게 HTML로 꾸며 구글 드라이브에 자동 저장되는 워크플로우를 만들기 시작했습니다.

[진행 방법]

🔧 사용한 도구들

* n8n: 전체 워크플로우 자동화

* Telegram: 유튜브 링크 입력 창구

* Python + Flask: 유튜브 자막 스크래핑 서버

* Gemini Flash 2.5: 자막 내용을 바탕으로 학습지 문제 생성

🛠️ 자동화 흐름 요약

1. Telegram으로 유튜브 링크 전송

독서가 중요한 이유를 나타내는 문자 메시지의 스크린 샷

  1. code에서 유투브ID만 뽑아오기(모바일의 URL과 웹 URL이 다르므로 분기 필요)

3. Python으로 구현한 유투브 스크래핑 서비스 호출/자막 반환

문자 메시지를 보여주는 컴퓨터 화면의 스크린 샷
  1. code노드에서 타임라인별 자막을 하나의 덩어리로 합치기

5. 추출된 자막을 Gemini로 전달 → 문제 10개 생성

  1. html노드에서 보기 좋게 꾸미기

7. 파일로 제작

워크 시트를 읽어 영어를 배우자

8. Google Drive에 HTML 파일 자동 업로드

[과정]

  • Flask로 youtube자막을 스크래핑하는 서비스를 구현하려면, 언제든 호출하면 응답을 받을 수 있도록 웹호스팅이 되어있어야해요. railway라는 서비스를 이용하면 가능한 것 같은데, 저는 집에 24시간 돌고 있는 서버가 있어서 거기에 구현을 했어요. 이 과정에서 외부에서 호출이 가능할 수 있도록 해당 포트를 열어주고(방화벽 인바운드 규칙 추가), 그 포트를 외부에서는 다른 포트로 호출 하도록 포워딩 설정하는 부분이 필요했어요. (포워딩 설정은 남편이 도와줬어요. 네트워크 무식자..)

  • LLM에서 출력된 문자를 예쁜 CSS를 입혀서 html파일로 구성하는 과정에서 code노드를 사용했는데, 이 과정에서 \n 을 <br>로 치환하고 싶었는데, 절대 치환되지 않는 일이 있었어요. 계속 삽질하다가, 결국 html노드를 사용하는 것으로 해결했습니다. 깔끔....

[결과와 배운 점]

스터디 마지막 시간에 스터디원들이랑 웹 스크래핑을 해보면 어떨까? 하는 땅콩콩 님의 제안이 있었고, 스터디원들과 함께 하기 위해서 최대한 쉬운 방법으로 해보려했는데, 쉽진 않았어요. 그래도 일단 성공했고, 이 과정을 스터디원들에게 어떻게 나누면 좋을지에 대해서 고민해봐야겠어요.

스크래핑하는 부분은 제가 만들어놓은 URL을 호출하는 것으로 제안하면 조금 쉬워질 것 같다는 생각이 드네요.

[다음 계획]

  • 일단은 아이들에게 이 학습지를 해보도록 하는게 우선이고

  • 결과물을 바탕으로 사진을 업로드했을 때, 채점해주는 워크플로우를 추가해봐야겠어요

4
3개의 답글

👉 이 게시글도 읽어보세요