이 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 응답을 주고받을 때 주로 사용합니다.

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

[00:00] Make나 Anytime에서 시나리오 생성에 많은 시간을 소비하는 문제를 해결할 수 있는 자동화 방법을 소개합니다.

[00:11] 브라우저에서 동작하는 AI 코파일럿을 통해 Airtable과 Gmail 접근 권한이 있는 AI 에이전트를 간단히 생성하는 방법을 시연합니다.

[00:33] 이 AI 코파일럿은 43페이지의 NHM 자료와 55페이지의 make.com 가이드, 수백 개의 JSON 레코드로 학습되었습니다.

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

타임라인 정보가 없습니다.

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

[01:03] 코드 생성 과정을 설명하고, 이 시스템이 완벽하지는 않지만 발전 가능성이 있는 첫 버전임을 소개합니다.

[01:26] 코파일럿의 기능으로 스크린샷 촬영, YouTube 스크립트 스캔, 음성 입력 등이 가능함을 설명합니다.

[01:50] 발표자 Jack이 자신을 소개하고, 7자리 수익의 AI 자동화 사업을 통해 비즈니스 소유자들을 돕고 있다고 설명합니다.

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 코파일럿 개발을 시작하려 합니다.

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

[05:13] 크롬 확장 프로그램 생성기를 소개하고, 이를 통해 필요한 핵심 파일들을 얻을 수 있음을 설명합니다.

[05:30] codepen.io를 활용하여 참고할 만한 코드를 찾고, 이를 AI에게 영감으로 제공할 수 있다고 설명합니다.

[05:53] 크롬 확장 프로그램 개발을 시작하며, N8N에서 작동하는 채팅 인터페이스와 이미지 처리 기능이 포함된 요구사항을 설명합니다.

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

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

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

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

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

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

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

[09:19] 테스트 플랫폼이 의도를 정확히 파악하고, 세션 ID를 포함하여 채팅 기록 저장 기능을 제공합니다.

[09:30] 코파일럿 생성 과정을 설명하고, 크롬 확장 프로그램 개발 대회에서 나온 다양한 사례들을 소개합니다.

[09:53] 웹훅 URL 설정 방법과 필요한 파일들(manifest.json, popup 관련 파일들)의 생성 과정을 설명합니다.

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 레코드 접근과 이메일 전송 등의 기능을 포함한 자동화 시스템을 소개합니다.

메인 시나리오와 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] 에이전트 빌드와 서브에이전트 빌드 워크플로우를 생성하고 구조를 설정했습니다.

메모리 기능 추가, 시나리오 임포트, 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] 시스템 개선 방안으로 메모리 기능 추가, 시나리오 가져오기, 시나리오 분할 등을 제안합니다.

[00:00] 대부분의 사람들은 Make나 Anytime에서

[00:01] 시나리오를 생성하는 데 수 시간을 소비합니다.

[00:04] 하지만 자동으로 시나리오를 생성해서

[00:06] 시간과 노력, 비용을 절약할 수 있다면 어떨까요?

[00:08] 예를 들어 이런 것처럼 말이죠.

[00:10] 여기 보이는 것은

[00:11] 브라우저에서 따라다니는

[00:13] 무언가입니다. 한번 보세요.

[00:14] 여기에 내려와서

[00:15] 이렇게 말할 수 있습니다. "저기요,

[00:17] Airtable과 Gmail에 접근 권한이 있는

[00:20] AI 에이전트를 만들어 주시겠어요?"

[00:22] 자, 이제 보세요.

[00:24] 여기로 와서

[00:25] 이 시나리오 테스트 워크플로우를 실행합니다.

[00:26] 보세요. 아래로 와서 전송을 클릭하면

[00:28] 이 에이전트가 이제

[00:30] 여기 아래로 내려와서

[00:31] 하위 워크플로우 에이전트를 호출합니다.

[00:33] 참고로 제가 만든 이 AI 코파일럿은

[00:36] 여기 오른쪽 하단에 있는

[00:38] 이 멋진 녀석은

[00:39] 보시다시피

[00:40] 약 43페이지 분량의 NHM 자료로

[00:43] 학습되었습니다. 이 코파일럿은

[00:46] make.com에서도 작동하고

[00:47] 55페이지 정도의 가이드가 있습니다.

[00:50] 수백 개의 JSON 레코드로

[00:52] 학습되었고, 이 시나리오 자체가

[00:54] 매우 매우 흥미롭습니다.

[00:56] 이것은 하위 에이전트를 호출하고

[00:59] 그게 완료되면 돌아와서

[01:00] 여기에 코드를 출력합니다.

[01:02] 바로 이렇게 나타납니다.

[01:03] 이것을 제거하고 어떻게 작동하는지

[01:05] 보여드리겠습니다. 완벽하지는 않고

[01:06] 100% 작동하지는 않지만

[01:08] 이것은 우리가 발전시킬 수 있는

[01:11] 좋은 첫 번째 버전입니다.

[01:12] 여기를 클릭해서

[01:13] 코드를 복사하고 붙여넣으면 됩니다.

[01:15] 자, 여기 에이전트가 있고

[01:17] 메모리, Airtable,

[01:19] 그리고 Gmail이 있습니다.

[01:21] 여기 사용자 요청 모듈이 있고

[01:22] 이렇게 간단히 텍스트 프롬프트만으로

[01:24] JSON을 생성했습니다. 이

[01:26] 코파일럿 모듈은

[01:28] 스크린샷을 찍고, YouTube

[01:30] 스크립트를 스캔하거나

[01:32] 음성으로 입력할 수도 있습니다.

[01:34] 이 영상에서는

[01:35] 이것이 어떻게 작동하는지 간단히 보여주고

[01:37] 그 다음에는

[01:38] 이런 멋진 AI 코파일럿을

[01:40] 어떤 시나리오에서든 만들 수 있는

[01:42] 방법을 보여드리겠습니다.

[01:43] 그리고 나서

[01:44] 이 전체 시나리오를 함께

[01:46] 구축해볼 것입니다.

[01:48] 아직 준비가 안 되셨다면

[01:50] 커피 한 잔 준비하시고 시작하겠습니다.

[01:52] 참고로 저는 Jack입니다.

[01:53] 7자리 수익을 올리는

[01:55] AI 자동화 사업을 만들었고

[01:57] 비즈니스 소유자들이 AI로

[01:59] 시간을 절약하는 이런 멋진 일을

[02:01] 할 수 있도록 돕고 있습니다.

[02:02] 자, 첫 번째 시나리오를 보겠습니다.

[02:04] 기본적으로 이렇게 작동합니다.

[02:07] Chrome 확장 프로그램에서 오는

[02:08] 웹훅이 있습니다. 이 시나리오가 이를 가져와서

[02:11] 정말 똑똑하고 간단한 방식으로

[02:12] 텍스트인지 이미지인지 확인한 다음

[02:14] 하위 에이전트를 호출합니다.

[02:17] 이제 서브 에이전트로 들어가보겠습니다. 작동 방식을

[02:19] 간단히 설명하자면, 먼저 이것을 가져와서

[02:21] 이름을 정의합니다. 그리고 에어테이블에서

[02:23] 우리의 데이터를 가져올 것입니다.

[02:26] 그래서 이 모든 레코드들을

[02:28] 워크플로우로 바로 가져옵니다.

[02:30] 그리고 이 과정에서

[02:32] 모든 레코드와 JSON 중에서

[02:35] 기본적으로 ID와

[02:37] 아주 간단한 설명만 가져올 것입니다.

[02:39] 예를 들어 여기 있는 것처럼

[02:42] 어조를 설정하는 것이나

[02:43] 또는 여기 있는 것처럼

[02:44] 특정 기능을 수행하는 것들이죠.

[02:46] 이것이 완료되면

[02:49] 골든 셀렉터로 넘어갑니다.

[02:51] 골든 셀렉터는 기본적으로

[02:52] 사용자의 요청을 받아서

[02:55] "보세요, 당신은 100개, 1000개,

[02:57] 5000개의 다양한 JSON

[02:59] 시나리오를 가지고 있습니다.

[03:01] 이 중에서 사용자의 질문과

[03:03] 가장 관련 있는 것 세 가지를 알려주세요"라고 합니다.

[03:07] 코드를 분리하고 처리한 다음,

[03:09] 이 모듈이 할 일은,

[03:10] 기억하세요, 이 모듈은

[03:12] 여기 있는 모든 멋진 데이터로 학습되었습니다.

[03:13] 저는 기본적으로 엔드 시나리오

[03:15] 구축 방법에 대해 깊이 있는 연구를 했고

[03:16] 어떤 모습이어야 하는지,

[03:17] 일반적인 요청은 어떤 것인지 분석했습니다.

[03:19] 이 핵심 데이터를 가져와서

[03:21] 또한 설명의 세부사항도

[03:24] 가져옵니다. 실제로 우리는

[03:26] 여기에 모든 코드도 있죠.

[03:27] 들어와서 보면 모든 코드가 있고

[03:28] 그런 멋진 것들이 있습니다.

[03:30] 이 모든 정보를 가져와서

[03:31] 사용자에게 도움이 되는 것을 만들고

[03:34] 마지막에는 에디터 모듈이 있는데

[03:35] 이는 사용자를 위한 것이며

[03:37] 이것은 일종의

[03:40] 최종 검사 단계입니다.

[03:42] 이를 수행하고 실제로

[03:43] 크리에이터 모듈에서 JSON을 가져와

[03:45] 제대로 작동하는지

[03:46] 정확한지 확인하고, 그 다음

[03:48] 웹훅으로 다시 보내면

[03:50] 시나리오로 돌아와서

[03:51] 코드를 복사해서

[03:52] 우리 시나리오에 붙여넣을 수 있습니다.

[03:54] 여기서 Mark를 언급해야겠네요.

[03:56] Mark는 이것에 대한 놀라운 비디오를 만들었죠.

[03:58] Mark, 당신은 정말 슈퍼스타예요.

[04:00] 그리고 커뮤니티에서

[04:01] 많은 다양한 에너지를 봤습니다.

[04:02] 사실, 우리가 사용한

[04:04] JSON들의 대부분은

[04:06] 온라인 GitHub 저장소에서 가져왔어요.

[04:08] 아래 댓글에 링크를 달아두겠습니다.

[04:09] 여러분이 이것들을 다시 만들어보고 싶다면

[04:10] 확인해 보실 수 있습니다.

[04:11] 그리고 Copilot용 코드도

[04:13] 아래에 올려두겠습니다.

[04:14] Chrome을 다운로드하고,

[04:16] 확장 프로그램을 설치해서

[04:18] 직접 사용해보고 즐기실 수 있습니다.

[04:20] 자, 이게 기본적인 작동 방식입니다.

[04:22] 그리고 말씀드렸듯이, 이것은

[04:24] make.com에서도 작동합니다. 이 영상에서는

[04:26] 데이터만 구축했지만, 정확히 동일합니다.

[04:28] make.com으로 가보면,

[04:30] 오른쪽에서 빠르게 보실 수 있듯이

[04:31] automation magic make가 있습니다.

[04:33] 다시 N8N으로 돌아왔는데,

[04:35] 보시다시피 여기 automation magic N8N이 있고,

[04:38] 이것을 인식하고 있습니다.

[04:39] 정보를 전송할 때,

[04:41] 웹훅이 제공하는 것 중 하나는

[04:42] 특정 에이전트에 대한 데이터입니다.

[04:45] 아래로 내려가서

[04:47] 빠르게 보여드리겠습니다.

[04:48] 여기 보시면 플랫폼이 N8N으로 되어있죠.

[04:50] 기본적으로 Make에서

[04:51] 이것을 구축하고 싶다면

[04:53] 시나리오를 분리하면 됩니다.

[04:55] 하나는 Make용, 다른 하나는 N8N용이죠.

[04:56] 저는 이해하기 쉽게 N8N만 했습니다.

[04:58] 좋습니다.

[05:00] 이제 우리는 AI 코파일럿 개발을 시작할 건데,

[05:02] 크롬 확장 프로그램이라고 하기보다는

[05:03] AI 코파일럿이라고 부르는 게

[05:04] 더 적절할 것 같네요.

[05:07] 이번에 사용할 것은,

[05:08] 아주 빠르게 보여드리겠는데,

[05:10] 재미있게도 최근에

[05:11] 제 커뮤니티에서 공유했던

[05:13] 크롬 확장 프로그램

[05:14] 생성기인데, 멋진 UI 요소들을

[05:16] 많이 추가해 놨습니다.

[05:18] 이것을 사용하면

[05:19] 필요한 핵심 파일들을 얻을 수 있죠.

[05:21] 이걸로 해보겠지만,

[05:22] 다른 모듈로도 가능합니다.

[05:24] 이 방법이 더 쉬울 뿐이죠.

[05:25] 그리고 우리가 할 작은 꼼수 중 하나는

[05:27] 멋진 데이터도

[05:28] 제공할 거라는 겁니다.

[05:30] codepen.io 같은 사이트를 사용할 수 있는데,

[05:32] 이곳은 코드 오픈 저장소입니다.

[05:34] 여기서 검색해보면

[05:35] 예를 들어 'chat'을 검색하면

[05:37] 이렇게 할 수 있고

[05:40] 사람들이 만든 놀라운 것들을 볼 수 있죠.

[05:42] 예를 들어 이것처럼

[05:44] 이런 것을 보면,

[05:45] 이 코드를

[05:47] AI에게 영감으로 공유할 수 있습니다.

[05:49] AI가 항상 좋은 코드가 무엇인지

[05:51] 이해하지는 못하기 때문이죠.

[05:53] 그럼 어떻게 작동하나요?

[05:54] 이 크롬 확장 프로그램을

[05:56] 함께 만들어보겠습니다.

[05:57] 여기로 가서, '안녕하세요.

[05:59] 크롬 확장 프로그램을 만들고 싶습니다.

[06:01] 다음과 같은 기능이 필요합니다.

[06:03] 첫 번째로 N8N에서 작동하는

[06:06] 아름다운 채팅 인터페이스가 필요하고,

[06:10] 사용자 요청을 처리할 수 있어야 합니다.

[06:13] 또한 채팅에 붙여넣을 수 있는

[06:16] 이미지를 처리하고

[06:18] 웹훅으로 전송할 수 있어야 합니다.

[06:20] 웹훅 주소는 아래에 붙여넣겠습니다.'

[06:23] 네, 좋습니다.

[06:24] 기능적으로 필요한 건

[06:25] 이게 전부인 것 같네요.

[06:27] 물론 다운로드는 가능합니다.

[06:28] 이건 단지

[06:29] 여러분의 이해를 돕기 위한 거죠.

[06:31] 멋진 이미지를 얻었습니다.

[06:33] 할 수 있는 것 중 하나는,

[06:34] 곧 개발할 때 보시겠지만,

[06:35] 멋진 기능을 많이 추가할 수 있다는 겁니다.

[06:37] 이제 N8N으로 가보겠습니다.

[06:38] 시나리오를 업로드하고

[06:40] 커뮤니티에서 어디서 받을 수 있는지

[06:42] 알고 싶다면,

[06:43] 다시 한 번 말씀드리지만 아래에 올려두겠습니다.

[06:44] 아래에 올려두었으니 사용하실 수 있습니다.

[06:46] 자, 제가 이것을 빠르게 가져오겠습니다.

[06:48] 특별 AI 섹션 아래에 있습니다.

[06:50] 기본적으로 이렇게 N8N에 시나리오를 업로드합니다.

[06:52] 다시 말씀드리지만, 설명란에 링크를

[06:54] 올려두도록 하겠습니다.

[06:55] 여기 아래로 와서 에이전트를 보시면

[06:57] 이것을 다운로드 받을 수 있습니다.

[06:58] 좋습니다.

[07:01] 그다음 워크플로우로 이동해서

[07:03] 여기 와서 파일에서 가져오기를

[07:05] 선택하면 됩니다. 파일을 선택하면

[07:06] 전체가 자동으로 채워집니다.

[07:07] 정말 멋지고 쉽죠.

[07:09] 자, 이것이 어떻게 작동하는지 보여드리겠습니다.

[07:11] 먼저 보여드리고 싶은 것은

[07:13] Chrome 확장 프로그램을 다운로드할 때

[07:14] 로드하면 문서에

[07:16] 세 가지 항목이 있을 겁니다.

[07:17] 여러분이 해야 할 일은

[07:18] content.js를 우클릭하고

[07:21] '다음으로 열기'에서 텍스트 편집기를 선택하세요.

[07:24] 텍스트 편집기는 다른 부가 기능 없이

[07:27] 텍스트를 편집할 수 있게 해주는 프로그램입니다.

[07:30] 불필요한 기능들이 추가되지 않죠.

[07:31] 워드를 사용하신다면, 아래에

[07:33] 대체 방법을 적어두겠습니다만

[07:34] 텍스트 편집기로 여는 게 중요합니다.

[07:36] 텍스트 편집기로 열었으면

[07:37] Ctrl+F를 누르고

[07:39] 'insert'를 검색하세요.

[07:41] 여기 보이시나요.

[07:42] 'insert web hook URL'이라고 적혀있습니다.

[07:45] 이 부분을 하이라이트하고

[07:46] 여기를 선택하세요.

[07:47] 그리고 N8N 시나리오로 돌아와서

[07:48] '첫 단계 추가'를 클릭하고

[07:50] 웹훅을 선택합니다.

[07:52] 이렇게요. 웹훅으로 워크플로우를 시작하고

[07:54] POST를 선택한 다음

[07:56] 복사 버튼을 클릭하세요.

[07:58] 그리고 돌아와서

[08:01] 방금 복사한 내용을 붙여넣기 하면 됩니다.

[08:03] 좋습니다. 이게 전부입니다.

[08:05] 위로 올라가서

[08:07] 파일 메뉴를 클릭하고 저장하세요.

[08:09] 이것을 업로드하려면

[08:11] 기본적으로 우측 상단의

[08:12] 업데이트로 가서

[08:14] 확장 프로그램으로 이동하고

[08:16] 확장 프로그램 관리를 클릭합니다.

[08:19] 이전 것을 삭제하고

[08:20] 제거해보겠습니다.

[08:21] 네, 사라졌네요. Automation

[08:23] magic이 제거되었습니다.

[08:25] 개발자 모드가

[08:26] 우측 상단에서 활성화되어 있는지 확인하세요.

[08:28] '압축해제된 확장프로그램을 로드합니다'를 클릭하고

[08:30] 데스크톱으로 이동해서

[08:31] 파일을 선택하면

[08:33] 선택 후에

[08:34] 브라우저에 자동으로

[08:36] 로드됩니다. 그리고 아무 시나리오나

[08:38] 열어보면, 예를 들어

[08:39] 이것을 복제해보면

[08:40] automation magic이 우리가 설정한

[08:43] 웹훅과 함께 나타납니다. 이게 제대로

[08:45] 작동하는지 어떻게 알 수 있을까요?

[08:47] 한번 시도해보죠.

[08:48] 여기 이것이 있네요. 이름을

[08:50] '에이전트 빌드'라고 지정하겠습니다.

[08:53] 좋습니다. 빠르게 저장하고

[08:55] 새로고침 하면 automation magic이

[08:57] 곧 나타날 겁니다. 이제

[08:58] 이걸 클릭하고 실행하거나

[09:01] 더 적절한 워크플로우 테스트를

[09:02] 클릭해볼게요. 이걸 열어서

[09:04] 이렇게 입력해보겠습니다. 테스트

[09:07] 테스트.

[09:09] 앗. 테스트 테스트 테스트. 엔터를 누르고

[09:11] 화면이 제대로 나왔는지

[09:13] 확인해볼까요?

[09:14] 빠르게 테스트를 찾아보면

[09:17] 자, 보이시죠. 테스트 명령

[09:19] 플랫폼이 의도를 파악했고

[09:20] 세션 ID도 포함했습니다.

[09:22] 채팅 기록을 저장하고 싶다면

[09:24] 그렇게 할 수 있죠. 그리고

[09:25] 응답도 받았는데, 이건

[09:27] 아주 좋은 소식이네요. 자,

[09:29] 이제 실제로

[09:30] 코파일럿을 어떻게 만드는지

[09:32] 우리의 멋진 크롬

[09:33] 확장 프로그램으로 돌아가보죠. 엔터를 누르면

[09:35] 명확히 하기 위한 질문들이 나옵니다.

[09:37] 저는 이런 것들을 많이 만들고 있는데

[09:38] 커뮤니티에서

[09:40] 크롬 확장 프로그램 만들기 대회를 했거든요.

[09:42] 정말 재미있는 것들이 나왔어요.

[09:43] 한 사람은 재미있게

[09:45] 모든 글꼴을 이상하게 바꾸거나

[09:46] 니콜라스 케이지 이미지를 넣는 걸 만들었고

[09:48] 비즈니스용으로도 정말 멋진 것들이 많이 있죠.

[09:50] 이건 정말 멋진데요. 기본적으로

[09:52] 필요한 모든 것을

[09:53] 명확히 해줍니다. 웹훅 URL이 필요한데

[09:55] 여기서 가져와보죠.

[09:57] 물론 이미 알고 계신 분들은

[09:58] 다음 섹션으로 건너뛰셔도 됩니다.

[09:59] 타임스탬프를 모두

[10:01] 아래에 표시해두었습니다.

[10:02] 자, 여기로 와서 이게 웹훅이고

[10:04] 아래로 내려가봅시다.

[10:07] 이 위치에 POST 요청을 보내보죠.

[10:10] 좋습니다. 이제

[10:12] 파일들을 생성하기 시작할 텐데요

[10:14] manifest.json,

[10:15] popup.html, popup.js,

[10:19] 그리고 popup.css가 있습니다. 아주 간단한데요

[10:21] 모든 코드를 제공받을 수 있고

[10:23] 해야 할 일은 텍스트 편집기로 가서

[10:25] 우클릭하고

[10:27] 새 문서를 클릭하는 것입니다.

[10:29] 그리고 코드를 입력하시면 됩니다.

[10:31] 많은 코드를 입력하게 될 텐데요

[10:34] 여기 편집을 클릭하고... 어디였더라?

[10:36] 일반 텍스트로 포맷하기가

[10:38] 아주 중요합니다.

[10:40] 파일을 클릭하고 저장을 누르세요.

[10:43] 기본적으로 지시된 대로

[10:45] 이름을 지정해야 합니다. manifest.json이라면

[10:47] manifest.json으로 데스크톱에 저장하세요.

[10:49] 그리고 json 사용을 확인하시면 됩니다.

[10:52] 그러면 이제

[10:54] 이렇게 될 텐데요

[10:56] 3-4개의 파일이

[10:56] 생성될 거예요. 이것들을 폴더에 넣고

[10:59] 아까처럼 똑같은 과정으로

[11:01] 크롬 확장 프로그램에 업로드하면

[11:03] 멋진 것이 완성됩니다.

[11:04] 자, 몇 가지 모범 사례를

[11:06] 빠르게 말씀드리자면

[11:08] 한두 가지 다른 시도가 필요할 수 있어요.

[11:11] 항상 완벽하게 동작하지는 않거든요.

[11:13] 저는 실제로 많은

[11:14] 커스텀 지시사항과 UI를 위한

[11:16] 멋진 코드를 제공했는데요, 채팅창처럼

[11:18] 깔끔하고 아름다운

[11:20] 결과물을 얻을 수 있었습니다.

[11:24] 그라디언트와 같은 이런 멋진

[11:25] 디자인을 얻을 수 있었던 건 제가 예시

[11:27] 코드를 정말 멋지게 만들었기 때문이죠.

[11:28] 이렇게 하면 정말 재미있게

[11:29] 만들 수 있습니다. 이것이 바로

[11:31] Chrome 확장 프로그램을 만드는 방법입니다.

[11:33] 이제 Chrome 확장 프로그램이

[11:34] 설치되었고, 아래에서

[11:35] 다운로드했습니다. 이제 시나리오를 살펴보죠.

[11:38] 우리가 하고 싶은 것을 정확히

[11:40] 구축해보겠습니다. 첫 번째로

[11:41] 우리가 실제로 하고 싶은 것은

[11:44] 이미지와 텍스트를 구분하는 것입니다.

[11:46] 참고로 이미지도 잘 작동한다는 것을 보여드리겠습니다.

[11:49] 그래서, 예시를 보여드리죠.

[11:50] 이것이 잘 작동한다는 걸 보여드리겠습니다.

[11:52] 여기 이것이 있죠.

[11:53] 이걸 빠르게 스크린샷 찍고

[11:54] 옵션으로 가서 클립보드를 클릭하고

[11:56] 다시 이쪽으로 와서

[11:58] 워크플로우를 테스트해보겠습니다.

[12:00] 여기 와서 이걸 붙여넣고

[12:02] 엔터를 누르면

[12:05] 이미지가 전송됩니다. 멋지죠?

[12:06] 기본적으로 이것은

[12:08] 이미지 분석 경로로 가는데

[12:09] 이는 정말 멋진 기능이라는 의미입니다.

[12:11] 이것은 이미지에서 일어나는 일을

[12:13] 전사하고

[12:14] 우리가 가진 하위 워크플로우를

[12:16] 실행할 것입니다.

[12:18] 물론 100% 완벽하게 작동하지는 않습니다.

[12:20] 저는 이것이 더 큰

[12:21] 커뮤니티를 위한

[12:22] 오픈 프로젝트가 되길 원했습니다.

[12:24] 확장 프로그램을 가져가서 제가 만든 기본 방식을

[12:26] 사용하시되

[12:27] 이게 최선의 방법이 아닐 수도 있어요.

[12:28] 제가 생각한 방식일 뿐이니

[12:30] 이를 발전시켜서 멋진 기능들을

[12:32] 추가하시면 됩니다. 그리고

[12:33] 영상 마지막에

[12:34] 이것을 한 단계 발전시키는 방법을 보여드릴 건데

[12:36] 흥미로울 거라 생각합니다.

[12:37] 이제 결과를 받아보고

[12:38] 어떻게 작동하는지 보겠습니다.

[12:40] 100% 성공률을 보이지 않더라도

[12:42] 시작하기 위한 코드를 얻는 것만으로도

[12:43] 도움이 될 때가 있죠.

[12:45] 좋습니다. 여기 설명이 있네요.

[12:46] 이 Anytime 워크플로우는

[12:48] 수동 트리거로 시작되며

[12:49] AI 에이전트를 조율하여

[12:51] Airtable 레코드에 접근하고

[12:53] 이메일을 보내는 등의 작업을 수행합니다.

[12:55] 좋아요. 이게 사실인지 어떻게 작동하는지

[12:57] 확인해보죠. 여기로 와서

[12:59] 코드를 복사하고

[13:00] 붙여넣기 해서 결과를 보겠습니다.

[13:02] 여기 보시면

[13:04] 성공적으로

[13:06] 이미지에서 전체 내용을

[13:08] 복제했습니다. 자 이제

[13:09] 자동화를 테스트해보죠.

[13:11] 우리의 친구 David의 영상에서

[13:13] YouTube 트랜스크립트를 가져와보겠습니다.

[13:14] 이걸 넣고 일반 트랜스크립트로

[13:16] 이것의 한계도

[13:18] 보여드리고 싶습니다.

[13:19] 어디서 작동하고 어디서 안 되는지

[13:20] 이것이 바로 기회가 있는

[13:22] 부분이에요. 우리가 함께 이 기술을

[13:24] 발전시킬 수 있습니다. 자 이제

[13:25] 이걸 복사해서 정말 멋진 우리의

[13:27] 이봐 브로키, 부탁 좀 할게.

[13:29] 아래 스크립트를 바탕으로 코드를 만들어줘.

[13:30] 내가 요청한 대로 해줘.

[13:32] 자, 이제 이 소나 테스트 워크플로우를 실행해볼게.

[13:34] 좋아. 워크플로우를 테스트했어.

[13:36] 붙여넣기 했고, 잘됐어.

[13:38] 좋아. 완벽해. 데이비드의 모든 정보를 받았어.

[13:39] 어떻게 되는지 한번 보자.

[13:40] 좋아. 이 워크플로우가 실행됐어.

[13:41] 이제 이걸 테스트해보자.

[13:43] 복사했으니까 한번 어떻게 되는지 보자.

[13:44] 붙여넣기 하고... 뭐가 됐을까?

[13:46] 보면 몇 가지를 인식했지만

[13:48] 트랜스크립트의 모든 내용을

[13:49] 제대로 이해하지는 못했어.

[13:51] 아마도 이걸 개선하려면

[13:53] 트랜스크립트와 스크린샷을

[13:54] 함께 사용하는 게

[13:55] 많은 도움이 될 것 같아.

[13:57] 이 시스템의 한계와

[13:58] 현재 상태를 보여주고 싶었어.

[14:00] 좋은 기술이고 정말 유용하지만

[14:01] 100% 완벽하게 작동하지는 않아.

[14:03] 자, 이제 이걸 어떻게

[14:04] 엄청나게 발전시킬 수 있는지 보자.

[14:06] 웹훅이 있으니

[14:08] 먼저 해야 할 일은

[14:09] 이미지와 텍스트를 구분하는 거야.

[14:12] 스위치 모듈로 시작해보자.

[14:13] 완벽해. 받은 정보를 기반으로

[14:15] 결정할 수 있어.

[14:16] 여기에 넣을 값은 JSON body command야.

[14:19] 그리고 여기 내려가서

[14:20] 불린 값을 설정하는데

[14:22] 매우 간단해, is not empty를 사용해.

[14:24] 그리고 두 번째는

[14:25] 다른 규칙을 추가하는 건데 정확히 같은 방식이야.

[14:28] 여기 텍스트가 아닌 경우는

[14:29] JSON body command를 사용하고

[14:30] is empty를 설정해.

[14:32] 물론 이미지와 텍스트를 함께 사용하고 싶다면

[14:34] 그것도 가능하지만

[14:36] 이게 가장 쉽고 간단한 방법이야.

[14:40] 출력 이름을 바꿔서

[14:41] 이미지라고 하자.

[14:42] 아주 좋아.

[14:43] 단계를 테스트해보자.

[14:46] 잘됐어.

[14:47] 다음으로 set 모듈을 사용할 거야.

[14:49] 수정할 필드를 수동으로 매핑하자.

[14:51] 값은 첫 번째 웹훅에서 받은 거야.

[14:54] 웹훅 제로일 거야. 완벽해.

[14:56] 이걸 'what user wants'라고 부르자.

[14:57] 다음으로 할 일은

[14:59] 이미지를 읽고

[15:01] ChatGPT로 설명을 받는 거야.

[15:03] 여기를 클릭하고

[15:05] transcribe라고 입력하면 될 거야.

[15:07] ChatGPT OpenAI를 선택하고

[15:09] 이미지 분석을 하자.

[15:11] 텍스트 입력은 워크플로우의 단계를 설명하는 거야.

[15:13] 올바른 인증 정보를 선택하고

[15:15] ChatGPT가 이미지를 해석하게 할 거야.

[15:16] 여기를 클릭하고

[15:18] 방법을 모르는 분들은

[15:19] platform.openai.com에서

[15:21] 왼쪽의 API 키를 가져와서

[15:23] 자격 증명에 넣으면 돼.

[15:26] 텍스트 입력은 간단히

[15:27] 워크플로우의 단계를 설명하는 거야.

[15:28] 올바른 자격 증명을 선택하고

[15:30] 방법을 모르는 분들은

[15:31] platform.openai.com에서 API 키를

[15:34] 왼쪽에서 가져와서

[15:36] 자격 증명에 넣으면 돼.

[15:37] 좋아요. 모델은 그냥 GPT-4를 사용하면

[15:39] 충분할 것 같네요.

[15:40] 입력 타입은 바이너리로 하겠습니다.

[15:41] 좋아요, 완벽합니다.

[15:43] 이것을 빠르게 복제해서

[15:45] 가져오도록 하겠습니다. 물론,

[15:47] ChatGPT에서 받은 출력을

[15:49] 문자열로 사용하고 싶습니다.

[15:51] 정말 멋지네요. 이제

[15:53] 텍스트와 이미지로 분할했습니다.

[15:55] 네, 좋습니다.

[15:56] 정말 멋지네요. 이제

[15:58] 워크플로우를 실행해야 합니다.

[15:59] 서브워크플로우 실행을 입력해보죠.

[16:02] 좋습니다. 지금은 입력할 필요 없지만,

[16:04] 이것을 여기로 가져옵니다.

[16:06] 이것들을 위로 올리고요.

[16:08] 그리고 마지막에 웹훅을

[16:10] 추가하겠습니다. 웹훅용 데이터를 반환합니다.

[16:12] 완벽합니다. 좋아요.

[16:14] 첫 번째 웹훅에서는

[16:15] 웹훅 노드를 사용해

[16:17] 즉시 응답하지 않도록 하겠습니다.

[16:19] 좋습니다. 이제

[16:21] 실제로 작동하는지 테스트해보죠.

[16:23] 워크플로우 테스트를 클릭하면... 잠깐만요.

[16:25] 선택해야 합니다.

[16:26] 먼저 서브워크플로우를 만들고

[16:28] 테스트해보겠습니다.

[16:30] 이것은 에이전트 빌드이고,

[16:31] 이것을 서브에이전트 빌드라고 부르겠습니다.

[16:36] 아래로 내려가서 단계를 추가하고,

[16:37] 트리거는 예를 들어

[16:39] 다른 워크플로우에 의해

[16:41] 실행될 때를 찾아보겠습니다.

[16:43] 바로 이것이죠.

[16:44] 잠시 후에 테스트해보겠지만,

[16:46] 이것을 서브에이전트 빌드라고

[16:47] 부르고 저장하겠습니다.

[16:48] 시작 부분에 이모지를 넣어서

[16:50] 정확히 어떤 것인지 알 수 있게

[16:51] 하겠습니다. 눈 이모지를

[16:53] 넣겠습니다. 좋습니다.

[16:55] 이제 이것을 선택하고,

[16:57] 서브에이전트 빌드를 실행하겠습니다.

[17:00] 모든 항목에 대해 한 번 실행하면 됩니다.

[17:02] 하지만 서브에이전트에서는

[17:03] 원하는 것들을 지정해야 합니다.

[17:05] 사용자가 원하는 것을

[17:07] 문자열 형태로 지정하고

[17:08] 아래에는

[17:10] 워크플로우 ID라고 부르겠습니다.

[17:12] 이것은 대화할 때마다

[17:13] 고유한 식별자를 가질 수 있도록

[17:15] 하기 위한 것입니다.

[17:18] 이렇게 하면 우리가 원할 경우

[17:19] 에이전트에 메모리 기능을

[17:21] 추가할 수 있습니다.

[17:23] 복제 가능한 메모리를

[17:24] 넣을 수 있죠. 멋지네요.

[17:26] 이제 준비가 된 것 같습니다.

[17:28] 저장하고 돌아가서 새로고침하면

[17:31] 이 두 가지를 요청할 것입니다.

[17:33] 사용자가 원하는 것과 기타 정보죠.

[17:34] 이전 노드들을 실행해보면...

[17:36] 입력이 없네요.

[17:38] 빠르게 실행해보죠.

[17:40] 아니요, 불리언은 사용하지 않습니다.

[17:42] 문자열로 해야 합니다.

[17:44] 그리고 이것은 비어있지 않음으로 설정하고요.

[17:46] 문자열로 내려가보죠.

[17:48] 받을 입력이 문자열이니까요.

[17:50] 문자열이 비어있지 않음... 완벽합니다.

[17:51] 여기에서는 문자열이 비어있는지 확인할 거예요.

[17:54] 알겠습니다. 좋아요.

[17:56] 이것을 저장하겠습니다.

[17:57] 좋아요. 창을 리셋하고,

[17:58] 테스트 테스트 1, 2, 3. 이 멋진 시나리오를 만들어줄 수 있나요?

[18:00] 감사합니다.

[18:02] 좋습니다. 질문을 했고,

[18:03] 웹훅으로 전달되었고, 여기 결과가 나왔네요.

[18:06] 모든 내용이 잘 나왔습니다.

[18:08] 이것은 필드 편집 경로로 갔고,

[18:09] 성공적으로 처리되었습니다.

[18:10] 이제 우리가 해야 할 것은

[18:12] 다시 테스트하는 건데, 이번에는 이미지를 추가해보죠.

[18:14] 아무 이미지나 한번 사용해봅시다.

[18:16] 무작위 이미지를 하나 가져와서,

[18:17] 이 이미지를 캡처하고,

[18:19] 아래로 내려와서 클립보드에 복사한 다음

[18:21] 붙여넣기 하겠습니다. 자, 보내기를 누르고

[18:24] 이게 왜 실패했는지 확인해보죠.

[18:26] 아, 입력 데이터 필드 이름이

[18:28] 'data' 대신 'image file'이어야 하네요.

[18:30] 이제 작동할 거예요.

[18:31] 한 번 더 시도해볼까요?

[18:32] 위로 올라가서

[18:34] 이 멋진 시나리오를 빠르게 복사하고

[18:37] 테스트 워크플로우로 가서

[18:38] 이미지를 붙여넣기 하면

[18:40] 제대로 처리될 겁니다.

[18:41] 완벽하게 작동하네요. 시나리오를 설명하고 있습니다.

[18:43] 어떻게 되는지 봅시다.

[18:45] 이 시나리오를 개선할 수 있는 방법 중 하나는

[18:46] AI에게 보고 있는 것에 대해 더 많은 컨텍스트를 제공하는 거예요.

[18:49] 아마도 이 AI에게

[18:50] 많은 유용한 정보를 제공해야 할 것 같아요.

[18:53] 워크플로우가 어떻게 동작하는지

[18:54] 정확히 설명해주는 거죠.

[18:56] 우리가 할 수 있는 것은

[18:58] 최종 가이드로 가는 거예요.

[19:00] 바로 이 멋진 녀석이죠.

[19:02] 시나리오로 돌아가서

[19:03] 개선해보겠습니다. 사실,

[19:04] 이걸 만드는데

[19:06] 몇 달은 걸릴 수 있었는데,

[19:08] 정말 멋진 것의

[19:09] 시작이 될 만한 것을

[19:11] 공유하고 싶었어요.

[19:13] 텍스트 입력에 참고사항으로

[19:17] N8N에 대한 추가 정보를 넣어서

[19:20] 보고 있는 것을 이해하는데

[19:22] 도움이 되도록 하겠습니다. 자, 됐네요.

[19:24] 정말 좋습니다.

[19:25] 이제 그걸 완료했으니,

[19:27] 저장하고,

[19:28] 이제 서브 에이전트 워크플로우를 개발해보죠.

[19:30] 물론 이런 종류의 작업에는

[19:32] 많은 시행착오가 있고,

[19:33] 제가 왜 이렇게 만들었는지

[19:34] 설명해드리겠습니다. 먼저 할 일은

[19:36] 두 가지를 설정하는 건데,

[19:38] 필드 수정으로 내려가보겠습니다.

[19:41] 두 가지가 있어요.

[19:42] 하나는 '무엇을 만들고 싶은가요?'이고

[19:44] 이전 값을 넣어줘야 합니다.

[19:46] 사용자가 원하는 JSON이 될 거예요.

[19:47] 그리고 두 번째는

[19:49] 워크플로우 ID입니다.

[19:50] 확인해보죠.

[19:53] 워크플로우 ID를 여기 아래에 넣고

[19:57] 좋습니다. 하지만

[20:00] 테스트를 위해서

[20:01] 여기로 나와서

[20:03] 이것을 복제하고

[20:06] 여기로 가져오겠습니다.

[20:09] 사실 이것을 제거할 건데, 서브 에이전트

[20:10] 워크플로우를 실행할 때는

[20:12] 때로는 마스터 시나리오를 계속

[20:14] 실행하고 싶지 않을 수 있거든요.

[20:16] 다른 트리거를 추가하기 위해 내려가서

[20:18] 수동으로 트리거를 설정해 보겠습니다.

[20:19] 그리고 테스트를 위해

[20:21] 임시 데이터를 넣어보겠습니다.

[20:22] 무엇을 만들고 싶은지 물어보죠.

[20:24] 음... '웹훅으로 트리거되는 AI 에이전트를

[20:27] 만들고 싶은데, 웹훅이 Airtable에

[20:29] 연결되어 있으면 좋겠어요'라고 해보죠.

[20:32] Airtable

[20:33] 좋습니다. 워크플로우 ID는

[20:36] 임의의 숫자를 넣겠습니다.

[20:38] 이제 테스트할 수 있는 예제가

[20:40] 준비되었네요. 좋습니다.

[20:41] 이제 이 필드들이 생겼습니다.

[20:43] 이제 Airtable을 가져와야 하는데

[20:45] 아래로 내려가서 Airtable을 클릭하고

[20:47] 여기 이 부분을 클릭한 다음

[20:49] 데이터를 가져오겠습니다.

[20:51] 사실 아래로 내려가보면

[20:54] 리스트에서 레코드 검색이

[20:55] 있네요. 아주 좋습니다.

[20:57] 제가 가지고 있는 Airtable 데이터베이스를

[20:59] 보여드리겠습니다. 어디 있었더라...

[21:01] 아, 여기 있네요. Airtable 데이터베이스입니다.

[21:03] 보시면 레코드 ID가 있고

[21:06] 참고로 이 데이터에 접근하는 방법은

[21:08] 아래 설명에 모두 첨부해 놓을 테니

[21:09] 자유롭게 사용하실 수 있습니다.

[21:10] ID, 간단한 설명, 상태,

[21:12] 자세한 설명, 노트, 생성 날짜가 있죠.

[21:13] 기본적으로 이렇게 하면

[21:15] 첫 번째 모듈이 모든 것을 가져오고

[21:17] 이 ID들을 식별자로 사용할 수 있습니다.

[21:19] 그러면 이 ID들을 이용해서

[21:20] 예를 들어 42, 11, 6번이

[21:22] 가장 중요하고 관련성 있는

[21:25] 시나리오라고 해보죠.

[21:27] 그러면 이걸 이용해서

[21:29] 특정 코드만 가져올 수 있습니다.

[21:31] 왜냐하면 수천 개의 자동화에 대한

[21:33] JSON 파일을 한꺼번에 주면 작동이 안 됩니다.

[21:35] 지능적으로 처리하기에는 너무 많은 데이터라

[21:38] 감당할 수 없기 때문에

[21:40] 이런 조절 메커니즘을 사용하는 거죠.

[21:42] 두 문장으로 된 설명만 사용해서

[21:46] 가장 관련성 있는 것 세 개를

[21:47] 찾아내고, 그것들이 확인되면

[21:49] 그때 해당하는 것들만

[21:51] 가져와서 큰 JSON 파일을

[21:52] 처리할 수 있습니다. 이건 'automation magic'이라고

[21:55] 불리는데, 한번 가져와 보겠습니다.

[21:58] automation magic, 좋습니다.

[22:00] 리스트에서는 단순히 테이블 1이고

[22:02] 필터 공식은 특별히 필요 없을 것 같은데

[22:04] 모두 반환을 클릭하고

[22:05] 스텝 테스트를 클릭하면

[22:06] 오른쪽에 모든 레코드가

[22:08] 표시될 겁니다. 아주 좋네요.

[22:10] 완벽합니다.

[22:12] 이제 이것의 이름을 지어주죠.

[22:13] 'get data'라고 하겠습니다.

[22:14] 시간을 절약하기 위해 다음에 할 것은

[22:17] 코드 모듈을 추가하는 건데,

[22:18] 이걸 저는 n8n 세계의 WD40이라고 부릅니다.

[22:20] 사실상 n8n에서 무엇을 해야 할지

[22:23] 확실하지 않을 때마다

[22:24] 이 코드 모듈을 추가하라고 말씀드립니다.

[22:26] Make의 노코드 키트처럼요.

[22:28] 파이썬 스크립트도 실행할 수 있죠.

[22:30] 스크립트랑 그런 멋진 것들을 실행할 수 있죠.

[22:31] 이게 모든 것을 가져왔네요.

[22:33] 이것 좀 보세요. 여기 테이블이 있고,

[22:34] ID, 생성 시간, 짧은 설명이 있는데,

[22:36] 데이터가 너무 많네요.

[22:37] 제가 실제로 필요한 건

[22:40] 번호와 ID 뿐이에요.

[22:42] 이 다양한 페이지들을 보세요.

[22:43] 1페이지일 수도 있고 29페이지일 수도 있죠.

[22:45] 그리고 짧은 설명이 무엇인지가 중요합니다.

[22:47] 이런 것들을

[22:49] 언어 모델에 제공할 수 있어요. 이해되시죠?

[22:50] 어떻게 얻을 수 있을까요? 코드라고 하는 것을 사용합니다.

[22:52] 이걸 입력하고 테스트 단계를 실행하면 됩니다.

[22:55] 이렇게 하면 기본적으로 결합된 텍스트가 생성됩니다.

[22:58] 즉, 1번의 짧은 설명,

[23:00] 2번의 짧은 설명,

[23:01] 3번의 짧은 설명,

[23:02] 이런 식으로 계속됩니다.

[23:03] 등등 모든 것들이 포함되죠.

[23:04] 아주 좋습니다. 이제

[23:06] 아래로 내려가서 이것에 이름을 붙여볼게요.

[23:07] 이것을 'go data overview'라고 부르겠습니다.

[23:09] 좋아요. 이제 다음으로

[23:11] 제가 골든 셀렉터라고 부르는 것을 할 거예요.

[23:12] 우리가 가진 모든 JSON 중에서

[23:15] 사용자가 원하는 작업과

[23:16] 가장 관련이 있다고 생각되는 세 가지를 고릅니다.

[23:17] 이것은 우리가 입력한 데이터만큼만 좋다는 걸 기억하세요.

[23:19] 이건 MVP(최소 기능 제품)니까요.

[23:21] 더 많은 데이터를 넣을수록 더 좋아집니다.

[23:22] 다른 어떤 시나리오보다

[23:24] 에이전트를 만드는 데 더 효과적이라는 걸 발견했어요.

[23:26] 재미있게도 말이죠.

[23:27] 여기 아래로 내려와서

[23:29] forge AI를 입력해보겠습니다.

[23:32] 좋아요. 우리는 모델에 메시지를 보내고 싶습니다.

[23:34] 훌륭해요. 이제 이게 우리의 골든 셀렉터입니다.

[23:36] 다시 한 번 말씀드리지만,

[23:38] 코드는 아래에 두어서

[23:39] 목록에서 가져올 수 있게 할게요. 40 Mini로 가보죠.

[23:41] 아, 인증이 필요하네요.

[23:43] 제가 가진 수많은 것들 중 하나로 가보죠.

[23:44] 모델을 선택할 수 있는데,

[23:46] 항상 조금 더 효과적으로 작동하더라고요.

[23:48] 여기 아래로 내려와서,

[23:50] 좋아요. 잠시만 기다려주세요.

[23:52] 좋습니다. 여기 아래로 와서

[23:54] 프롬프트는 이렇게 될 거예요.

[23:55] 사실, mini를 사용해보죠.

[23:57] mini가 좋을 것 같네요.

[23:58] GPT4와 mini를 사용합니다. 좋아요.

[24:00] 프롬프트가 뭐냐고요?

[24:02] 아주 간단합니다.

[24:03] 프롬프트는 '사용자가 설명하는 자동화를 구축하는데

[24:06] 가장 적합한 워크플로우 세 개를 선택하세요.'

[24:07] 순수한 JSON 배열로만 번호를 출력하세요.

[24:10] 설명이나 첨부, 군더더기 없이

[24:12] JSON 형식으로만 출력하세요.

[24:14] 좋습니다. 이게 시스템 프롬프트가 될 거예요.

[24:16] 그리고 이제 사용자 메시지를 제공해야 합니다.

[24:18] 사용자가 원하는 것이 필요하죠.

[24:19] 그게 뭐냐고요?

[24:21] 자, expression으로 내려가서

[24:23] 이걸 위로 올리고 붙여넣기 해보죠.

[24:25] 기본적으로 사용자가 원하는 것입니다.

[24:27] 여기서 흥미로운 점이 있습니다.

[24:30] 이 코드가 정말 중요한데요.

[24:32] N8N 시나리오에 코드 노드를 추가하면

[24:35] 그 이전의 모든 것을 가져올 수 없게 됩니다.

[24:39] N8N 시나리오에서는

[24:41] 그 이전의 모든 것을 가져올 수 없어요.

[24:44] 그래서 제가 클릭하면...

[24:45] 이 편집 필드를 클릭하고 여기서 출력을 확인해보겠습니다.

[24:47] 여기로 와서 보시면,

[24:49] 노드 데이터 개요를 추가하기 위해 내려가서

[24:50] 예를 들어, 이쪽으로 와서

[24:52] 편집 필드를 가져옵니다. 이것이 바로 그것입니다.

[24:56] 보시다시피 이것이 우리가 필요한 코드입니다.

[24:58] first가 포함되어 있기 때문이죠.

[25:00] 정말, 정말 중요한 부분입니다. 좋습니다.

[25:03] 돌아와서 보면 아직 준비가 안 되어서

[25:06] 찾지 못하고 있습니다.

[25:07] JSON 결합 텍스트를 얻었습니다.

[25:09] 이제 테스트를 실행해보고

[25:10] 어떻게 작동하는지 보겠습니다. 좋습니다.

[25:13] 데이터를 가져오고 250개의 레코드를 내려받고 있습니다.

[25:15] 개요로 결합하고 있습니다.

[25:17] 그런데 골든 셀렉터가 실패했네요.

[25:18] 코드명이 존재하지 않는 이유를 확인해보겠습니다.

[25:20] 좋습니다. 워크플로우를 테스트해봅시다.

[25:22] 골든 셀렉터로 내려가서

[25:23] 이제 필요한 적절한 정보를 제공했으니

[25:25] 사용자가 원하는 것을 포함하여

[25:27] 빌드하고자 하는 내용을 수집해야 합니다.

[25:28] 몇 가지를 수집해야 하는데

[25:30] 어떤 일이 일어났는지 확인해보겠습니다.

[25:31] 좋습니다. 1, 59, 11이 나왔네요.

[25:33] 이제 선택할 수 있는 세 가지가 있는데

[25:34] 정말 멋지네요.

[25:36] 다음으로 할 일은

[25:37] 개별 숫자들을 빠르게 분리하는 것입니다.

[25:39] 분리 작업으로 내려가보겠습니다.

[25:40] 그리고 여기에 메시지 내용의 숫자들을 입력하고

[25:42] 이 단계를 빠르게 테스트해보겠습니다.

[25:43] 내용과 숫자들을 입력하고

[25:45] 이 단계를 빠르게 테스트해보겠습니다.

[25:47] 잠시만 기다려주시면, 분리가 완료되었습니다.

[25:49] 이 데이터를 고정해두겠습니다.

[25:51] 다음으로 할 일은

[25:52] 멋진 코드를 추가하는 것입니다.

[25:54] 이 코드의 목적은

[25:55] 에어테이블에서 스크랩한 모든 데이터로 돌아가

[25:58] 이것이 출력한 것들만 가져오는 것입니다.

[25:59] 1, 67, 211만 가져오는 거죠.

[26:03] 시간을 절약하기 위해

[26:04] 모두 붙여넣기 하겠습니다.

[26:05] 아래에도 넣어두어서 가져가실 수 있습니다.

[26:07] 테스트 단계를 클릭하면

[26:09] 모든 멋진 정보가 출력될 것입니다.

[26:10] 엄청난 양의 코드가 나오는데

[26:12] 정말 멋지네요.

[26:14] 마지막 두 가지는

[26:15] 크리에이터 모듈입니다.

[26:17] 콘텐츠를 생성하는 것과

[26:19] 만족스러운지 확인하기 위해 편집하는 것입니다.

[26:21] 이것들을 붙여넣기 하겠습니다.

[26:22] 시간을 존중하기 위해

[26:24] 똑같은 과정이니까요.

[26:25] 이것을 함께 복사합니다.

[26:27] 이제 보세요. 크리에이터 모듈로 내려가서

[26:29] 프롬프트를 살펴보겠습니다.

[26:30] 보실 수 있도록 표현식으로 바꾸겠습니다.

[26:32] 좋습니다.

[26:33] JSON 코어 지식 베이스 생성을 전문으로 하는 AI 전문가 어시스턴트입니다.

[26:36] 정말 멋진 기능들이 많이 있습니다.

[26:38] 다시 말씀드리지만

[26:39] 시나리오를 다운로드하면

[26:40] 모든 프롬프트가 포함되어 있습니다.

[26:42] 에이전트가 어떻게 생겼는지 예시도 있고

[26:43] 정말 중요한 것은

[26:45] 이것이 표현식이 아닌 고정값이라는 점입니다.

[26:47] 그리고 아래에는

[26:49] 표현식으로 된 프롬프트가 있는데

[26:51] 사용자가 원하는 것을 설명하고 있습니다.

[26:52] 이 정보를 리소스로 활용하여

[26:55] 유효한 워크플로우를 구축할 수 있도록 해주세요.

[26:57] 기본적으로 코드와 에어테이블의

[26:59] 정보를 제공하는 거죠.

[27:01] 그리고 에어테이블에서 작업이 완료되면

[27:03] 에디터 모듈로 넘어가는데

[27:05] 이 부분이 꽤 멋진 트릭입니다.

[27:07] 다시 한 번 말씀드리면, 전문가 시스템에

[27:09] 많은 정보를 제공합니다.

[27:11] 여기서 흥미로운 점 하나는

[27:12] 실행 과정에서

[27:13] 개선의 여지가 있다고 생각하는데

[27:14] 실패하는 부분을 찾아내서

[27:16] 에디터에 그 정보를 제공한다는 점입니다.

[27:18] 이 시스템은 학습 과정을 거쳐야 하는데

[27:21] 학습 과정을 통해

[27:23] 이게 작동하지 않았다는 걸 파악하고

[27:24] 일반적인 10가지 실패 원인을 분석해

[27:26] 시나리오가 실패하는 이유를 파악하고

[27:28] 이를 바탕으로 구축합니다. 몇 번의 반복을 했지만

[27:29] 이것을 더 확장해서

[27:31] 오류를 점점 줄여나갈 수 있습니다.

[27:32] 그래서 우리가 그렇게 했죠.

[27:34] 일반적인 실패 사례들에 대해

[27:35] 많은 정보를 제공했고, 이것을 더 확장할 수 있습니다.

[27:37] 그리고 나서

[27:39] 프롬프트가 있는데, 이는 기본적으로

[27:40] 이전 단계에서의 입력이 될 것입니다.

[27:42] 이것이 전체 시나리오입니다.

[27:44] 다시 한번 이것을 제거하고

[27:45] 이것을 가져와서 삭제하고

[27:48] 이것을 여기로 내려놓습니다.

[27:49] 물론 다시 한번 JSON으로

[27:51] 사용자가 원하는 것을 표현하고

[27:52] 여기 아래 있는 것도 변경합니다. 이것은 JSON

[27:54] 워크플로우 ID입니다. 그리고 이것은

[27:56] 표현식이고... 자, 됐네요. 좋습니다.

[27:58] 이제 이것으로

[27:59] 준비가 다 됐습니다.

[28:01] 그런데 이 전체 시스템에서 멋진 점은

[28:03] 제가 아래로 내려가서 저장할 때

[28:05] 서브 에이전트가 작업을 마치면

[28:07] 별도의 작업이 필요 없이

[28:08] 자동으로 종료된다는 점입니다.

[28:10] 자, 이것을 빠르게 한번 실행해 보겠습니다.

[28:12] 새로운 시나리오를 만들어보죠.

[28:13] 이것을 한번 테스트해보겠습니다.

[28:14] 안녕하세요, Briski.

[28:15] Gmail이 AI 에이전트와 연결되는

[28:17] 시나리오를 만들어주셨으면 합니다.

[28:19] 그 AI 에이전트는 에어테이블 모듈을 가지고 있고

[28:23] 그 다음 다시 Gmail로 보내주시면 됩니다.

[28:25] 감사합니다.

[28:28] 좋습니다. 이제 실행하고

[28:30] 백그라운드에서 작업하도록 하겠습니다.

[28:31] 이제 AI 코파일럿이 있어서

[28:33] 자유롭게 움직이면서

[28:34] 이런 멋진 시나리오를

[28:36] 만들 수 있다는 게 정말 좋습니다.

[28:37] 이것을 어떻게 발전시킬 수 있을지

[28:39] 정말 기대됩니다. 개선할 수 있는

[28:40] 몇 가지를 생각해봤는데요.

[28:41] 첫 번째는 메모리입니다. 단순한 시나리오 대신

[28:43] 메모리를 연결할 수 있는 AI 에이전트를 추가하는 겁니다.

[28:46] 그래서 대화가 가능하도록 하는 거죠.

[28:48] 만약 코드가 작동하지 않으면

[28:49] "이게 작동하지 않으니 수정해줘"

[28:50] 라고 말할 수 있게 되는 거죠.

[28:52] 두 번째로 추가하고 싶은 것은

[28:53] 시나리오 가져오기 기능입니다.

[28:55] 이는 기본적으로 시나리오를 분할하는 것입니다.

[28:57] 메인 부분에서 사용자가

[29:00] 새로 만들기보다 가져오기를

[29:01] 원하는지 확인하는 거죠.

[29:03] 모든 JSON이 저장되어 있다면

[29:05] 처음부터 만들 필요 없이

[29:06] 바로 가져올 수 있습니다.

[29:08] 이는 시간을 절약할 수 있고

[29:10] 세 번째로는 무엇을 만들지 식별하고

[29:12] 두 개의 시나리오로 나누는 겁니다.

[29:13] 이것을 개선하고 발전시킬 수 있는

[29:15] 다양한 방법이 있습니다.

[29:16] 이것을 미니 로드맵이라고 하는데

[29:17] 재미있게 시작해볼 수 있습니다.

[29:19] 시간이 지나면서 커뮤니티에서

[29:20] 이것을 발전시켜 나갈 것 같습니다.

[29:21] 1세대를 개발하고

[29:23] 10세대쯤 되면 어떻게 될지

[29:24] 기대가 됩니다. 자, 이제

[29:26] 결과가 돌아왔네요.

[29:28] 어떻게 됐는지 볼까요? 복사해서

[29:29] 붙여넣기를 하면...

[29:31] 음, 몇 가지 실수가 있네요.

[29:34] Gmail 도구, 에어테이블 도구,

[29:35] 메시지 전송 도구는 있는데

[29:37] Gmail 트리거가 제대로

[29:39] 설정되지 않았네요.

[29:41] 개선이 필요한 부분입니다.

[29:42] 하지만 기본적으로 이것이

[29:44] 전체 자동화입니다. 여러분

[29:45] 이 영상이 도움이 되었길 바랍니다.

[29:47] 화면에 보이는 이 영상을

[29:48] 아직 보지 않으셨다면, YouTube가

[29:50] 여러분이 좋아하실 거라고 생각하니

[29:51] 한번 확인해보세요. 좋은 한 주 보내시고

[29:53] 다음 영상에서 뵙겠습니다.