소개
안녕하세요. 약 10개월 만에 사례글을 써보는 샘호트만 입니다.
slack, telegram 이 혼자 자동화하고 먹고 사는데 좋지만, 카카오톡 자동화는 '접근성' 하나 최강 원툴입니다.
제가 여러 카톡방에 정보들 뿌리는 일과 대화를 해야하는 일들이 많아 이번 카카오톡 뉴스레터 스터디에 초심 마인드로 참여하였습니다. (그리고 버디에 당첨이 되버려서 복받어 스터디장님을 잘 돕기로 하였습니다.)
우선 이 글의 목적을 한번에 잘 표현하는 sequence diagram 이미지 첨부합니다.
n8n 만 워크플로우 고도화하신다면 이번 글의 템플릿으로 여러분들은 카카오톡 무궁무진하게 찍어낼 수 있습니다. (n8n local 일 필요 없습니다. 웹훅만 잘 돌아가면 괜찮아요)
즉, 이 글은 n8n wrapping 을 하기 위한 목적입니다. 해당 글에서 사용된 코드와 워크플로우는 깃허브에 업로드해놨습니다.
해당 내용을 실습해보고 싶으시다면 이 영상을 참고해주세요
사전 준비물
주말에 스터디 참여는 못했어서 진도 따라가는 데 걱정 했는데, 다른 분들 사례 글들 포장도로를 잘 깔아놔서 따라가는데 큰 문제가 없었습니다.
이 글은 카카오톡과 메신저봇 관련 내용은 작성하지 않겠습니다.
(번호 개통(월 2900원), 유심사기(쿠팡에서 4500원), 안드로이드 공기계(저는 6년전 기기가 있어서 재활용) 등등은 갖추어져 있어야합니다.)
다른 분들 글 훌륭하니 참고하시면 좋겠습니다.
1) https://www.gpters.org/dev/post/poya-please-call-me-3ed4eqytm9LdPQ0
2) https://www.gpters.org/nocode/post/its-trapped-backcountry-blackened-0QLsRxOTzoT1JEs
각자 메신저봇과 카카오톡에 첫 메시지 성공하신 분들만 출발 가능합니다.
또한 n8n 계정이 있어야합니다. 저는 local에서 n8n을 돌립니다.
n8n 웹훅만 달려있다면 큰 문제 없을 것 같습니다. Make 또한 응용 가능합니다.
저희 집 고양이( = gemini-2.5-flash-lite-preview-06-17)
로 산뜻한 출발 하겠습니다.
저희 집 고양이는 삼색이 입니다.
내용이 스터디원이 아니라면 조금 어렵기 때문에 귀여운거 먼저 보시고 스트레스 풀고 가겠습니다.
진행 방법
우선 2가지를 준비해야합니다.
n8n webhook workflow 준비
위와 같은 시나리오 구현하면 됩니다. 전체 목표는 이렇다고 보시면 됩니다.
각 노드 예시를 보여드리겠습니다.
1) 웹훅 트리거 파트
초록색 부분은 저희 집 ip라서 찾으면 고소장을 날릴 것 입니다.
우선 웹훅을 세팅합니다.
우측의 결과는 실제로 카카오톡에서 메시지를 입력하면 저렇게 정보가 넘어옵니다.
마지막에는 Respond to webhook을 달아야하기 때문에 respond 파트에 using respont to webhook node를 하셔야합니다. path는 여러분들이 자유롭게 하셔도 되고 인증도 여러분들이 편하게 응용해서 달면 되겠습니다.
2) 여러분들의 상상력파트
edit fields 노드는 make에서 set (multiple) variable(s)과 동일한 역할을 합니다.
저는 웹훅 메시지를 받아 "안녕하세요! 메시지 {{ $json.body.msg }} 를 잘 받았습니다 :)" 라고 응답을 출력하는 노드를 구성하였습니다.
이 노드 부분을 여러분들의 창의력을 발휘하셔서 노드 다양하게 넣으시면 되겠습니다. 저는 아마도 유튜브 요약도 중간 삽입예정이고, rag 질의응답 에이전트도 달 예정이고 뭐 할 수 있는 것은 무궁무진 할 것 같습니다.
3) Respond to webhook node
respond with 부분과 response body 부분은 취향입니다. 근데 저는 일단 위와 같이 세팅했습니다. 제가 메신저봇 js code에 맞게 세팅이 되어있는데 그 부분 활용하시면 되겠습니다.
메신저봇 Rhino JS code 구 현
코딩하면서 사투리 코딩(JavaScript의 사투리가 Rhino JavaScript라고 하더군요)을 하게 될 줄 몰랐는데요. 저는 JS를 건드려보지도 않았는데 언어 모델이 학습을 덜 한 프로그래밍 언어를 건드리게 되었습니다.
Rhino JS 부분은 복받어김현우 스터디장님이 만들어주신 봇 지침과 첨부파일들을 아주 살짝 커스텀해서 claude project에 넣어서 돌렸습니다.
아무리 맥락을 많이 줬지만 한방에 원하는 코드를 얻기 어려웠습니다. 이 부분이 제일 구현하는데 시간이 오래 걸렸습니다. (스터디장 봇파더 복받어김현우 정말 좋은 거 만들어주셔서 감사합니다.)
opus로 하다가 한도 소진 빔을 빠르게 맞아서 커서로 바로 대피하였습니다.
커서 위에서 하면 좋은 점은 내가 잘 부분적으로 잘 돌아갔었던 버전별 코드들과 N8n 워크플로우를 맥락을 주고나서, 나 이거는 잘되고 이거는 잘 안된다. 라고 맥락을 많이 부으니 원하는 코드를 얻었습니다. 제가 했었던 프롬프트 예시는 다음과 같습니다.
여러분들도 맥락을 충분히 넣으십시오. (원하는 답변을 한번에 못 얻는다 = 과실 본인 100%)
커서에 요청한 initial prompt
저는 메신저봇이라는 조금 다른 특수성을 지닌 프로그래밍 언어를 다루고 있습니다. n8n 웹훅을 이용해서 제가 메신저봇에 메시지를 보내면 n8n에서 이를 받아 respond to webhook을 해서 메신저봇에 n8n의 결과를 받고 싶습니다.
제 n8n 워크플로우는 다음과 같습니다.
{
"nodes": [
{
"parameters": {
"httpMethod": "POST",
"path": "n8n-kakaotalk-from-msg",
"responseMode": "responseNode",
"options": {}
},
"type": "n8n-nodes-base.webhook",
"typeVersion": 2,
"position": [
0,
0
],
"id": "f30af8d5-8fd0-4a23-8a44-0f33918dfac8",
"name": "Webhook",
(n8n 워크플로우 json 복붙)
-----
이제 문제가 나갑니다.
@2) n8n-webhook-msgbot.js 는 메시지가 웹훅으로 잘 전달되지만 "🔧 메신저봇 오류: 개발자에게 문의하세요"라는 오류가 나타납니다.
@2) n8n-webhook-msgbot ver2.js 그래서 이걸로 해결하니까 "안녕하세요! 메시지 를 잘 받았습니다 :)" 라고 나타나긴 했지만 웹훅을 막상 열어보니 빈 문자열이 들어가고 있었습니다.
즉, 바디, 쿼리에 아무런 정보가 없었습니다.
(저는 "?복자 제발 살려줘"라는 메시지를 던졌었습니다.)
[
{
"headers": {
"accept-encoding": "gzip",
"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36",
"content-type": "application/json",
"host": "**.***.**.***:5678",
"connection": "Keep-Alive",
"content-length": "0"
},
"params": {},
"query": {},
"body": {},
"webhookUrl": "http://**.***.**.***:5678/webhook-test/n8n-kakaotalk-from-msg",
"executionMode": "test"
}
]
이렇게 빈 값이 들어가있었습니다.
그래서 각 코드에서 되는 부분만을 취합해서 새로운 코드를 @2) n8n-webhook-msgbot ver3.js 에 작성해주세요. 이렇게 하니 잘 나오더군요.
그 결과는 제 깃허브 repository에 첨부드립니다. 참고하시면 되겠습니다.
https://github.com/hotorch/n8n-webhook-kakaotalk-msgbot-integration
제 rhino js 코드 앞 부분만 본인 입맛에 맞게 수정하시면 되고,
코드가 이해가 안간다면 제가 드린 코드를 복사해서 언어모델과 원만한 합의를 보시면 되겠습니다.
// ===== 1. Bot 인스턴스 (최우선!) =====
var bot = BotManager.getCurrentBot();
// ===== 2. 설정 =====
var CONFIG = {
BOT_NAME: "n8n 웹훅 연동봇",
VERSION: "1.0.0",
WEBHOOK_URL: "http://**.***.**.***:5678/webhook-test/n8n-kakaotalk-from-msg", // 웹훅 경로를 뜻함 (테스트할 때 에는 webhook-test, 워크플로우 활성화 하고 나서는 webhook 주소로 메신저봇 경로 또한 변경할 것
TARGET_ROOMS: ["카톡방1","카톡방2","카톡방3",...], // 어느 카톡방에만 워킹할 것인가?
CALL_KEYWORD: "?복자", // '?복자' 라는 키워드
BUTLER_LIST: ['샘호트만 @ai.sam_hottman'], // 카톡 이름만 반응할 수 있게 세팅. 다른 사람은 못 쓰고 본인만 쓸 수 있다는 뜻
TIMEOUT: 30000,
DEBUG_MODE: true
};
.... (후략)웹훅에서 test-url, production-url이라는 개념이 있습니다. (제 유튜브 때 활용했던 이미지 들고 옵니다.)
무엇을 응용할 수 있는가?
이제 포장지를 익혔으니 내실을 다질 때 입니다.
아마 차주 발표 주제일 것 같은데 이런 RAG 워크 플 로우가 있다고 가정하겠습니다.
주변에 세일즈나 에이전시 업을 하시는 분들과 스터디를 하는데, 그걸 좀 잘하는 방법에 대한 특정 유튜브 채널의 대본을 매일 수급하고 청킹, 벡터디비 삽입을 하고 있습니다. 그 아이디어를 바탕으로 세일즈, 비즈니스에 대해 배울 수 있도록 하는 시나리오입니다.
벡터디비에는 세일즈 관련된 유튜브 영상 subtitle(transcript)가 번역(로컬에서 fastapi 서버 얹어서 stt 돌리는 로직이 있음)이 되어 저장됩니다. 거기에 맞는 RAG 답변을 하는 내용이라고 생각하시면 됩니다. 질의응답 예시는 다음과 같습니다.
위 영상 내용은 이 채널 내용인데요. (매일 유튜브 채널에 올라오는 댓글에 대해 크리에이터가 답변을 해주는 채널인데 배울 점이 많음)
이제 저희 집 고양이 복자가 인생 선배처럼 느껴지고, 매우 똑똑해진 것 처럼 느껴질 수 있습니다.
결과와 배운 점
1) 자동화를 항상 할 때 단편적으로 자동화를 하기보다는 큰 숲을 그리고 자동화를 하시는 것이 중요합니다.
저는 n8n webhook과 카카오톡만 붙이는 걸 성공하면 가운데 n8n 워크플로우만 중간에 잘 갈아 끼워넣어준다면 카카오톡도 쉽게 연동할 수 있을 것이라는 생각을 했기에 첫 사례글로 작성해봤습니다.
스터디원들이 이 글을 레버리지하여, 재미있는 걸 많이 만들어보면 좋겠습니다.
아마 남은 스터디에서는 기존에 했었던 워크플로우에서 도파민이 도는 사례 글을 작성해서 선보이겠습니다.
(스터디 목요일 시작 전에는 rag 쪽 재능기부할 생각입니다.)
2) n8n을 잘 쓰시고 airtable이나 supabase 등 db를 잘 쓴다면 억지로 fastapi 서버 조합할 필요 없이 n8n만 가지고 자동화가 가능하고, n8n 보다 python이 익숙하면 fastapi로 서버 세팅하는 걸 추천드립니다.
3) 해당 내용이 어려운 부분은 이 글에 없는 메신저 봇 입니다. 여유가 된다면 유튜브 제 채널에 만드는 방법 공유하겠습니다.
4) n8n 잘 하시는 분들이 지피터스에 많지만, 자동화 초보 분들에게 좋은 영상입니다. 58,000배 잘 쓰는 법 영상 맛 좀 보세요. (배속 시청~)
이상 샘호또만 이였습니다.
감사합니다.
글 작성하는데 걸린 시간 : 3시간 8분
하고자 하는 이야기, 개요 정리 : 11분
구현하는 데 걸린 시간 :
n8n : 10분
Rhino JS 메신저봇 코드 구현 : 1시간 10분 (후... 메신저봇..)
초안 글 작성 : 1시간 32분
셀프 글 피드백 : 5분 (ip 주소 마스킹 및 글 흐름 점검 )