이 AI 에이전트가 자동화를 구축합니다 (Chrome 확장 프로그램)

Jack Roberts 구독자 55,800명

요약

이 영상은 Chrome 확장 프로그램을 활용해 AI 에이전트를 자동 생성하는 과정을 단계별로 소개합니다. 웹훅을 통해 N8N 시나리오를 실행하고, Switch 모듈로 텍스트와 이미지를 분기하여 서브 에이전트와 연동합니다. 에어테이블(Airtable)에서 주요 워크플로 데이터를 불러와 Golden Selector로 핵심 시나리오를 선정하고, OpenAI 기반 코파일럿이 JSON 코드를 자동 생성·검증합니다. 마지막으로 완전한 자동화 시나리오를 테스트하고 메모리, 임포트 기능 등 차세대 개선 로드맵을 제시합니다.

주요 키워드

AI 코파일럿 Chrome 확장 프로그램 N8N 시나리오 Webhook Airtable Golden Selector Sub-agent JSON Switch 모듈 Editor 모듈

하이라이트

🔑 AI 기반 코파일럿으로 N8N 워크플로우를 자동 생성해 시간과 비용을 절약할 수 있습니다.
⚡️ Chrome 확장 프로그램 생성기를 활용해 단 몇 번의 클릭만으로 기본 파일 구조(manifest.json, popup.js 등)를 자동 생성합니다.
🌟 Switch 모듈을 통해 텍스트와 이미지를 분기 처리해 각각에 맞는 서브 에이전트를 호출합니다.
📌 Airtable에서 수백 건의 JSON 레코드를 불러와 핵심 ID와 짧은 설명만 추출하는 Data Overview로 데이터 과부하를 방지합니다.
🚀 Golden Selector로 사용자 요청과 가장 연관 높은 3가지 시나리오를 LLM에 선택하도록 요청해 효율성을 높입니다.
🔧 Creator 모듈과 Editor 모듈을 연계해 LLM이 생성한 JSON 시나리오를 자동으로 검증·수정하도록 설계했습니다.
🛠️ 메모리 추가, 시나리오 임포트, 메이크(Anytime) 지원 등 차세대 기능 로드맵으로 확장 가능성을 제시합니다.

용어 설명

AI 코파일럿

Chrome 확장 및 N8N 시나리오 내에서 자동화 워크플로우 생성과 코드 생성을 담당하는 AI 에이전트입니다.

Chrome 확장 프로그램

웹 브라우저 기능을 확장해 사용자 상호작용을 추가하는 소프트웨어 컴포넌트입니다.

Webhook (웹훅)

외부 이벤트가 발생했을 때 지정된 URL로 HTTP 요청을 보내 자동화를 시작하는 방식입니다.

N8N

노코드(No-Code) 기반의 워크플로우 자동화 플랫폼으로, 다양한 서비스와 모듈을 연결해 시나리오를 구성합니다.

Airtable (에어테이블)

클라우드 스프레드시트와 데이터베이스 기능을 결합한 서비스로, JSON 형식 레코드 저장 및 조회에 최적화되어 있습니다.

Golden Selector

LLM에게 수백 개의 시나리오 중에서 사용자 요청에 가장 적합한 상위 N개를 선택하도록 하는 필터링 메커니즘입니다.

Sub-agent (서브 에이전트)

메인 워크플로우에서 호출되는 보조 시나리오로, 특정 기능(데이터 조회, 코드 생성 등)을 수행합니다.

manifest.json

Chrome 확장 프로그램의 메타데이터를 정의하는 파일로, 권한, 스크립트, 아이콘 등을 지정합니다.

JSON

데이터 구조를 표현하는 경량형 텍스트 형식으로, 자동화 시나리오 및 API 응답을 주고받을 때 주로 사용합니다.

[00:00:00] AI 자동 시나리오 소개 및 데모

AI 에이전트를 통해 Make나 Anytime 시나리오 생성에 소요되는 시간과 비용을 줄일 수 있는 가능성을 제시합니다. 브라우저 확장으로 호출해 자동으로 시나리오를 생성하는 간단한 예시를 보여줍니다.

[00:00:35] 첫 번째 AI 코파일럿 동작 확인

텍스트 프롬프트 한 줄로 JSON 코드를 생성하는 과정을 시연합니다. 생성된 코드를 복사해 붙여넣고, 테스트 워크플로우에서 바로 동작하는 것을 확인합니다.

[00:00:52] 영상 구조 및 발표자 소개

이번 영상의 목표와 순서, 그리고 발표자인 Jack의 배경(7자리 수 매출 AI 자동화 비즈니스)과 지원 방식을 간략히 소개합니다.

[00:02:02] N8N 시나리오 구조 개요

Webhook 트리거 → Switch 모듈(텍스트·이미지 분기) → Sub-agent 호출 → Airtable 레코드 조회 → Golden Selector → Creator·Editor 모듈 → 결과 반환 흐름을 설명합니다.

[02:07] 시스템의 기본 작동 방식으로, Chrome 확장프로그램의 웹훅을 통해 입력을 받아 텍스트/이미지를 구분하고 하위 에이전트를 호출하는 과정을 설명합니다.

[02:17] 서브 에이전트의 작동 방식을 설명합니다. 에어테이블에서 데이터를 가져와 워크플로우에 통합하는 과정을 소개합니다.

[02:51] 골든 셀렉터가 사용자의 요청을 분석하여 수천 개의 JSON 시나리오 중 가장 관련성 높은 3개를 선택하는 방식을 설명합니다.

[03:10] 시스템이 학습된 데이터를 바탕으로 엔드 시나리오를 구축하고 사용자에게 맞춤형 솔루션을 제공하는 과정을 설명합니다.

[03:34] 에디터 모듈에서 최종 검사를 거쳐 JSON이 정확히 작동하는지 확인하고 웹훅을 통해 시나리오에 통합하는 과정을 설명합니다.

[03:54] Mark의 공헌을 언급하고, GitHub 저장소와 Copilot 코드 공유에 대해 안내합니다. make.com에서도 동일하게 작동함을 설명합니다.

[04:33] N8N으로 돌아와서 automation magic이 정상적으로 인식되는 것을 확인하고, 웹훅이 특정 에이전트에 대한 데이터를 제공하는 것을 설명합니다.

[04:50] Make와 N8N용 시나리오를 분리하여 구축하는 방법을 설명하고, AI 코파일럿 개발을 시작하려 합니다.

[00:05:00] AI 코파일럿 Chrome 확장 생성

Chrome 확장 생성기 툴로 manifest.json, popup.html, popup.js, popup.css 등 필수 파일을 자동 생성하는 과정을 보여줍니다. 코드를 편집해 웹훅 URL을 삽입하는 방법도 안내합니다.

[00:06:44] 확장 프로그램과 N8N 연동 테스트

로컬에 unpacked 확장으로 로드하고, N8N 시나리오의 Webhook 모듈에 복사한 URL을 붙여넣어 메시지 전송 및 응답을 확인하는 과정을 시연합니다.

[06:44] Chrome 확장 프로그램 설치 파일 위치와 N8N에 시나리오를 업로드하는 방법을 설명합니다.

[07:07] Chrome 확장 프로그램 설정 방법을 상세히 설명하며, content.js 파일을 텍스트 편집기로 열어 웹훅 URL을 설정하는 과정을 안내합니다.

[07:45] Chrome 브라우저에서 확장 프로그램을 설치하고 개발자 모드를 활성화하여 로드하는 방법을 설명합니다.

[08:38] 설치된 확장 프로그램의 동작을 테스트하기 위한 준비 과정을 보여줍니다.

[08:58] 크롬 확장 프로그램의 워크플로우 테스트를 실행하고 기본적인 테스트를 수행합니다.

[00:09:00] Switch 모듈로 텍스트/이미지 분기

Switch 모듈을 설정해 JSON.body.command 값이 비어 있는지 여부로 텍스트·이미지 입력을 분기 처리합니다. 각 경로에서 유저 요청을 변수로 설정해 다음 단계로 전달합니다.

[00:10:10] Sub-agent 워크플로우 구축

Airtable에서 레코드 조회 후 코드 모듈로 요약 텍스트를 생성합니다. Golden Selector로 관련 시나리오 ID 3개를 선택하고, 세부 JSON을 다시 조회해 Creator와 Editor로 자동 완성합니다.

[10:40] 텍스트 편집기를 사용한 파일 저장 방법과 크롬 확장 프로그램 업로드 과정을 상세히 안내합니다.

[11:04] 프로젝트의 모범 사례와 커스텀 UI 구현을 위한 코드 최적화 방법을 공유합니다.

[11:24] Chrome 확장 프로그램의 UI 디자인에 대해 설명하며, 그라디언트와 멋진 디자인을 구현할 수 있었던 것은 우수한 예시 코드 덕분이라고 언급합니다.

[11:34] Chrome 확장 프로그램이 설치된 후, 이미지 처리 기능을 시연합니다. 스크린샷을 찍고 클립보드를 통해 이미지를 전송하는 과정을 보여줍니다.

[12:11] 이미지 분석 기능의 작동 방식을 설명하며, 100% 완벽하지는 않지만 커뮤니티를 위한 오픈 프로젝트로 발전 가능성을 제시합니다.

[12:45] 워크플로우의 기본 구조를 설명하고, Airtable 레코드 접근과 이메일 전송 등의 기능을 포함한 자동화 시스템을 소개합니다.

[00:13:00] 전체 워크플로우 조립 및 검증

메인 시나리오와 Sub-agent를 결합해 실제 요청을 전송하고, 텍스트·이미지 모두에서 자동으로 JSON 시나리오를 생성하는 테스트를 수행합니다. 한계와 오류 요소도 함께 확인합니다.

[13:09] David의 영상을 예시로 들어 YouTube 트랜스크립트 기능의 한계와 개선 가능성에 대해 논의합니다.

[13:27] 브로키에게 스크립트를 기반으로 코드 생성을 요청하고 소나 테스트 워크플로우를 실행함

[13:38] 데이비드의 정보를 받아 워크플로우를 테스트했으나, 트랜스크립트 내용을 완전히 이해하지 못한 한계를 발견함

[13:53] 시스템 개선을 위해 트랜스크립트와 스크린샷을 함께 사용하는 방안을 제안함

[14:09] 이미지와 텍스트를 구분하는 스위치 모듈 설정 작업을 시작함

[14:32] JSON body command를 사용하여 이미지와 텍스트 처리 로직을 구현함

[14:59] ChatGPT를 활용한 이미지 분석 기능 구현 및 API 설정 방법을 설명함

[15:37] 모델 선택과 입력 타입을 설정하고, ChatGPT 출력을 문자열로 활용하기로 결정했습니다.

[15:58] 워크플로우 실행을 위한 웹훅 설정과 응답 방식을 구성했습니다.

[16:28] 에이전트 빌드와 서브에이전트 빌드 워크플로우를 생성하고 구조를 설정했습니다.

[00:17:00] 확장 방안 및 결론

메모리 기능 추가, 시나리오 임포트, Make.com 지원 등 업그레이드 로드맵을 제시합니다. 커뮤니티 협업을 통해 1세대부터 10세대까지 발전시킬 수 있는 가능성에 대해 설명합니다.

[17:02] 서브에이전트에 사용자 요구사항과 워크플로우 ID를 지정하고, 메모리 기능을 위한 구조를 구성했습니다.

[17:40] 입력 타입을 불리언에서 문자열로 변경하고 비어있지 않음 조건을 설정했습니다.

[17:51] 문자열 검증 기능을 구현하고 창을 리셋한 후, 테스트를 시작합니다.

[18:02] 질문을 웹훅으로 전송하고 필드 편집 경로를 통해 성공적으로 처리됩니다.

[18:14] 이미지 테스트를 진행하면서 입력 데이터 필드 이름을 'image file'로 수정하여 문제를 해결합니다.

[18:45] 시나리오 개선을 위해 AI에게 더 많은 컨텍스트 정보를 제공하기로 결정합니다.

[19:04] 프로젝트의 초기 단계이지만 핵심 기능을 공유하고 개선 방향을 제시합니다.

[19:28] 서브 에이전트 워크플로우 개발을 시작하고 필드 수정 및 워크플로우 ID 설정을 진행합니다.

[20:09] 서브 에이전트 워크플로우를 실행할 때는 마스터 시나리오를 계속 실행할 필요가 없어서 이를 제거하고 수동 트리거로 대체하기로 결정했습니다.

[20:22] 테스트를 위해 '웹훅으로 트리거되는 AI 에이전트를 만들고 Airtable에 연결하고 싶다'는 예시 데이터를 입력하고 임의의 워크플로우 ID를 설정했습니다.

[20:43] Airtable에서 데이터를 가져오기 위해 리스트에서 레코드를 검색하는 방식을 설정하고, 데이터베이스의 구조(ID, 설명, 상태 등)를 확인했습니다.

[21:19] 시스템이 효율적으로 작동하도록 전체 데이터 중에서 가장 중요한 시나리오(예: 42, 11, 6번)만 선별적으로 처리하는 방식을 설명했습니다.

[22:12] 모듈의 이름을 'get data'로 지정하고, n8n에서 불확실할 때 사용할 수 있는 코드 모듈 추가 방법을 설명했습니다.

[22:30] 테이블에서 필요한 데이터(ID, 번호, 짧은 설명)만을 추출하여 언어 모델에 제공하는 방법을 설명합니다.

[22:50] 코드를 사용하여 데이터를 결합하고 테스트하는 과정과 'go data overview' 작업을 생성하는 방법을 설명합니다.

[23:11] '골든 셀렉터'를 통해 사용자의 요구사항에 가장 적합한 3개의 JSON을 선택하는 과정을 소개합니다.

[23:58] GPT4와 mini 모델을 사용하여 프롬프트를 설정하고, JSON 형식으로 출력하는 방법을 설명합니다.

[24:30] N8N 시나리오에서 코드 노드 사용 시 이전 데이터를 가져올 수 없는 제한사항에 대해 설명합니다.

[24:45] 워크플로우 테스트를 위해 편집 필드를 확인하고 노드 데이터 개요를 추가하는 과정을 시작합니다.

[25:10] 데이터를 가져와서 250개의 레코드를 다운로드하고 개요로 결합하는 과정에서 골든 셀렉터 실패 문제를 해결합니다.

[25:31] 1, 59, 11의 세 가지 선택지를 얻어 개별 숫자들을 분리하고 데이터를 정리합니다.

[25:54] 에어테이블에서 스크랩한 데이터 중 특정 항목(1, 67, 211)만 선별하여 가져오는 코드를 구현합니다.

[26:15] 크리에이터 모듈을 통해 콘텐츠를 생성하고 편집하는 최종 단계를 구현하며, JSON 코어 지식 베이스를 위한 AI 전문가 프롬프트를 설정합니다.

[26:52] AI 에이전트가 코드와 에어테이블 정보를 활용하여 유효한 워크플로우를 구축하는 방법을 설명합니다.

[27:09] 에디터 모듈의 작동 방식과 실패 사례 학습을 통한 시스템 개선 과정을 설명합니다.

[27:59] AI 코파일럿 시스템의 자동화된 작업 처리 방식과 백그라운드 실행 기능을 소개합니다.

[28:40] 시스템 개선 방안으로 메모리 기능 추가, 시나리오 가져오기, 시나리오 분할 등을 제안합니다.