[00:00]
[음악]
[00:00]
오늘은 n8n에서 MCP 서버를
[00:02]
초보자부터 전문가 수준까지 다루는 방법을 알려드리겠습니다
[00:06]
웹 스크래핑 MCP 서버를 만드는 방법과
[00:08]
이를 AI 에이전트와 연결하는 방법을 보여드릴 것입니다
[00:12]
초보자이거나
[00:14]
다른 종류의 MCP 서버나
[00:17]
에이전트를 사용하고 싶으신 분들도
[00:18]
이 영상이 도움이 될 것입니다
[00:21]
모든 도구나 MCP 서버를 만들 때
[00:23]
필요한 기본적인 내용들을
[00:25]
이해하는데 도움이 될 것입니다
[00:27]
이 영상이 끝나면
[00:30]
n8n에서 MCP 서버를
[00:32]
마스터하는데 필요한
[00:34]
모든 것을 이해하게 될 것입니다
[00:37]
MCP 서버에는 두 가지 측면이 있는데
[00:40]
오늘 영상에서 두 가지 모두
[00:42]
만드는 방법을 보여드리겠습니다
[00:44]
먼저 이 다이어그램으로
[00:46]
시각적으로 설명해드리겠습니다
[00:48]
MCP 서버를 다룰 때 가장 먼저
[00:51]
이해해야 할 것은
[00:52]
클라이언트 사이드와
[00:53]
서버 사이드가 있다는 것입니다
[00:56]
처음에는 조금 헷갈릴 수 있습니다
[00:58]
저도 처음에는 헷갈렸지만
[01:00]
자세히 설명해드리겠습니다
[01:02]
모든 단계를 차근차근 보여드릴 테니
[01:04]
너무 걱정하지 마세요
[01:06]
이제 AI 에이전트가
[01:07]
도구에 접근해야 할 때
[01:09]
일반적으로는 에이전트 아래에
[01:11]
많은 도구들을 정의해야 했습니다
[01:14]
하지만 그것은 지저분하고
[01:16]
비효율적이었죠
[01:18]
대신에 이제는
[01:21]
이 도구들을 MCP 서버로 묶을 수 있습니다
[01:23]
이렇게 하면 훨씬 더 체계적이고
[01:26]
에이전트가 더 나은 응답을
[01:28]
제공할 수 있게 됩니다
[01:30]
MCP 서버에서 일어나는 과정을 보면
[01:33]
에이전트에 무언가를 요청했을 때
[01:36]
도구에 접근해야 하는 경우
[01:38]
예를 들어 캘린더에 이벤트를
[01:40]
예약하거나
[01:42]
웹페이지를 스크래핑하려 할 때
[01:44]
이를 위한
[01:45]
MCP 서버를 만들 수 있습니다
[01:48]
그러면 AI 에이전트가
[01:51]
이 MCP 서버를 호출할지 결정하게 됩니다
[01:53]
이렇게 전체 프로세스가 시작되는 거죠
[01:56]
에이전트와 대화를 주고받다가
[01:58]
메시지를 보내고 받는 과정에서
[02:01]
도구가 필요하다고 판단되면
[02:03]
MCP 서버를 호출하게 됩니다
[02:05]
웹사이트를 스크래핑하거나
[02:07]
Supabase 데이터베이스를 수정하거나
[02:10]
캘린더에 이벤트를
[02:11]
예약하는 등의 작업을 수행합니다
[02:13]
이러한 다양한 작업들을 처리한 후
[02:16]
응답을 돌려받게 됩니다
[02:18]
이것은 AI 에이전트의 도구들을
[02:20]
체계적으로 구성하는 방법이며
[02:21]
MCP 서버는 그 응답을
[02:23]
클라이언트 사이드로 다시 보냅니다
[02:25]
그러면 AI 에이전트는
[02:28]
요청한 작업이 완료되었다는
[02:30]
적절한 정보와 확인을
[02:32]
응답할 수 있게 됩니다
[02:34]
이렇게 클라이언트는
[02:36]
필요한 정보를 받아
[02:38]
작업이 완료되었다는 것을
[02:40]
확인할 수 있습니다
[02:43]
클라이언트는
[02:45]
클라이언트 측과 AI 에이전트는 대화하는 부분을 담당하고
[02:48]
도움이 필요하거나
[02:50]
도구에 접근해야 할 때
[02:52]
MCP 서버를 호출하게 됩니다
[02:54]
그러면 MCP 서버가 작동하여
[02:56]
정보를 가져오고
[02:58]
응답을 다시 보내줍니다
[03:00]
먼저 이것을 구축한 다음
[03:02]
그 다음에는
[03:04]
실제 클라이언트 측 또는
[03:05]
서버와 통신할 수 있는 AI 에이전트를
[03:08]
만들어보겠습니다. MCP 서버와
[03:10]
서버와 상호작용할 수 있는
[03:12]
클라이언트 측 에이전트를 구축하기 전에
[03:15]
먼저 해야 할 일이 있습니다
[03:16]
올바른 버전의
[03:19]
n8n을 사용하고 있는지 확인해야 합니다
[03:21]
이를 확인하기 위해 n8n 계정에
[03:24]
로그인하고
[03:26]
관리자 패널로 이동합니다
[03:28]
관리자 패널에서
[03:30]
이 작은 설정 기어 아이콘이 보일 것입니다
[03:32]
올바른 위치로 가기 위해
[03:34]
이것을 클릭해야 합니다
[03:35]
설정 기어를 클릭하면
[03:37]
여기 n8n 버전이라고 표시된 곳에서
[03:38]
드롭다운을 클릭하여
[03:40]
버전 1.88로
[03:42]
변경해야 합니다
[03:45]
현재는 최신 베타로 표시되어 있고 1.88 버전입니다
[03:48]
이것이 제가 접근할 수 있는 최신 버전이에요
[03:51]
드롭다운을 클릭하고
[03:53]
1.88 버전이나
[03:55]
그 이상 버전을 선택할 수 있습니다
[03:58]
그리고 나서
[04:00]
'변경사항 저장' 버튼을 꼭 눌러야 합니다
[04:02]
이전에 이 작업을 하지 않았다면
[04:05]
1.88 이상 버전으로 변경하고
[04:06]
변경사항을 저장해야 합니다
[04:09]
저장하고 나면
[04:12]
제 경우에는 현재 온라인으로 표시되지만
[04:13]
'업데이트 진행 중'이라고 표시될 것입니다
[04:16]
업데이트가 진행 중임을 나타내는
[04:18]
노란색 원이 표시될 것입니다
[04:20]
변경사항을 저장한 후에
[04:22]
잠시 동안 노란색 원이 보이지만
[04:25]
걱정하지 마세요
[04:26]
영원히 지속되지는 않습니다
[04:27]
업데이트가 진행 중일 뿐입니다
[04:29]
업데이트가 완료되면
[04:31]
메뉴에서 대시보드로
[04:34]
돌아갈 수 있습니다
[04:36]
'열기'를 클릭하고
[04:39]
다음으로 '워크플로우 생성'을
[04:41]
클릭합니다
[04:42]
MCP 서버를 만들 때
[04:45]
n8n 작업공간을
[04:47]
효과적으로 구성하고 싶습니다
[04:49]
상단의 이름 부분에서
[04:51]
정확한 용도를 나타내는
[04:53]
이름을 지정할 수 있습니다
[04:55]
저는 'MCP server'라고 하겠습니다
[04:58]
이번에는 웹사이트를 스크랩할 수 있는
[05:00]
서버를 구축할 예정입니다
[05:02]
AI 에이전트와 대화하면
[05:05]
AI 에이전트가 이 스크래핑 기능에
[05:07]
접근할 수 있게 됩니다
[05:10]
실시간으로 인터넷에서 정보를 가져와서
[05:12]
그 결과를 저에게 전달할 수 있죠
[05:14]
이 가이드에서 사용할 도구가
[05:16]
firecrawl이기 때문에 'MCP server firecrawl'이라고
[05:20]
이름을 지정하겠습니다
[05:21]
이제 보시다시피 프로젝트 이름이
[05:24]
변경되었습니다
[05:26]
여기서 볼 수 있듯이
[05:29]
좀 더 체계적으로 구성하고 싶다면
[05:30]
태그 추가를 클릭할 수 있습니다
[05:33]
태그 추가를 클릭하고 이것을 MCP 서버로 이름 지을 수 있으며
[05:37]
태그 생성을 클릭하면 됩니다
[05:40]
생성하는 모든 MCP 서버에
[05:43]
이 MCP 서버 태그를 추가하는 것을 추천합니다
[05:46]
이렇게 하면 탄탄한 MCP 서버 기반을 구축하고 나면
[05:49]
n8n 내에서
[05:51]
선택할 수 있는 많은 서버를 보유하게 됩니다
[05:53]
이를 통해 실제로 커스텀 개발이 가능하고
[05:55]
하나씩 작업할 수 있습니다
[05:58]
모든 에이전트에 들어가서
[06:00]
도구가 변경되고 업데이트될 때마다
[06:03]
수정할 필요 없이
[06:04]
기능을 추가하거나 변경할 수 있습니다
[06:07]
이제 MCP 서버 태그를 만들었고
[06:10]
다음으로 할 일은
[06:11]
여기 있는 플러스 버튼을 클릭하는 것입니다
[06:13]
클릭하고 나면
[06:15]
검색창에 MCP를 입력하면
[06:18]
MCP 서버 트리거가 표시됩니다
[06:21]
바로 이것을
[06:22]
클릭하면 됩니다. n8n 도구를
[06:24]
MCP 서버 엔드포인트로 노출시킵니다
[06:27]
클릭하면 아주 기본적인 것을 볼 수 있는데
[06:29]
이것은 일반적인 웹훅으로
[06:32]
n8n에서 웹훅을 사용해 본 적이 있다면
[06:34]
익숙할 것입니다
[06:36]
매우 간단합니다. 또한
[06:38]
인증을 추가할 수도 있어서
[06:40]
아무나 호출할 수 없도록 할 수 있습니다
[06:42]
기본적으로 이 URL이 유출되거나
[06:45]
다른 사람이 접근하게 되면
[06:48]
MCP 서버를 호출할 수 있게 됩니다
[06:49]
따라서 실행 횟수를 절약하고 싶다면
[06:52]
다른 사람이 MCP 서버를 쿼리하는 것을 원하지 않는다면
[06:54]
여기에 인증을 추가할 수 있습니다
[06:57]
하지만 이 영상에서는
[06:59]
완전히 개방된 상태로 두고
[07:01]
이 URL을 직접 사용할 것입니다
[07:03]
이것을 설정하고 나면
[07:05]
캔버스로 돌아가서
[07:09]
이 MCP 서버에
[07:10]
몇 가지 도구를 추가하기만 하면 됩니다
[07:12]
이것이 정말 강력해지는 부분은
[07:14]
HTTP 요청을 사용할 수 있다는 점입니다
[07:17]
HTTP 요청을 통해
[07:20]
인터넷의 다양한 도구들과
[07:22]
연결할 수 있습니다
[07:24]
오늘은 앞서 말씀드린 대로
[07:26]
파이어크롤 도구를 사용할 것입니다
[07:28]
이 도구를 사용하는 방법에 대한
[07:30]
문서를 찾아보고
[07:33]
MCP 서버 아래에
[07:35]
나만의 커스텀 도구를 만들 수 있습니다
[07:37]
firecrawl.dev로 이동하면
[07:40]
제가 사용할 웹사이트입니다
[07:42]
오늘 예제에서
[07:43]
사용할 도구이고, 이제 파이어크롤을
[07:46]
스크래핑에 사용하는 이유를 설명하겠습니다
[07:48]
다른 도구나 Apify 액터를 사용할 수도 있고
[07:51]
GET 요청같은 HTTP 요청을 사용할 수도 있습니다
[07:54]
하지만 파이어크롤의 장점은
[07:56]
모든 데이터를
[07:58]
원하는 형식으로 포맷팅해준다는 것입니다
[08:00]
페이지를 구성하는
[08:02]
원시 HTML 코드 구조를 원하거나
[08:05]
깔끔하게 포맷된
[08:07]
마크다운으로 받고 싶다면
[08:09]
그렇게 처리할 수 있습니다
[08:12]
파이어크롤의
[08:13]
정말 좋은 점은
[08:15]
시작할 때 500개의 무료 크레딧을 제공받습니다.
[08:18]
이 도구를 최대한 활용하기 전까지는
[08:20]
비용을 지불할 필요가 전혀 없습니다.
[08:22]
그래서 여러분들은
[08:24]
저와 함께 따라하실 수 있습니다.
[08:26]
모든 웹사이트마다 조금씩 다른데요.
[08:28]
스크래핑을 허용하는 곳도 있고
[08:31]
그렇지 않은 곳도 있습니다.
[08:33]
각 웹사이트의 이용약관을 확인하셔야 합니다.
[08:35]
솔직히 말씀드리면, 많은 사람들이
[08:37]
이런 규칙들을 위반하곤 합니다.
[08:40]
Firecrawl은 여러분과 스크래핑하려는
[08:42]
웹사이트 사이에 일종의 장벽을 만들어줍니다.
[08:44]
그래서 여러분의 개인 IP가
[08:45]
차단될 걱정을 하지 않아도 됩니다.
[08:48]
하지만 윤리적인 관점에서
[08:50]
스크래핑하려는 대상이
[08:51]
스크래핑을 허용하는지 확인해야 합니다.
[08:53]
MCP 서버를 이런 용도로 사용하고 싶으시다면 말이죠.
[08:56]
제가 사용할 사이트는
[08:59]
기본적으로 스크래핑을 허용하는
[09:01]
사이트인데요,
[09:02]
바로
[09:03]
toscrape.com, 구체적으로는
[09:05]
books.toscrape.com입니다.
[09:08]
이곳은 책들의 데이터베이스로
[09:11]
다양한 스크래핑 도구를 테스트해볼 수 있고
[09:13]
도구들이 어떻게 작동하는지
[09:16]
잘 이해할 수 있습니다.
[09:18]
가상의 책들과 그에 대한
[09:21]
평점, 제목, 가격 정보를 제공하고
[09:23]
카테고리도 제공하여
[09:26]
스크래핑 연습을 하고
[09:27]
이를 제대로 익힐 수 있습니다.
[09:29]
도구가 어떻게 작동하는지 파악할 수 있죠.
[09:31]
이것이 제가 사용할 웹사이트입니다.
[09:33]
Firecrawl을 테스트하기 위해
[09:35]
이 웹사이트를 사용할 수 있습니다.
[09:38]
이 웹사이트를 스크래핑하려면
[09:40]
그냥 입력하면 됩니다.
[09:42]
주소를
[09:46]
books.toscrape.com을 입력하고
[09:48]
'500 무료 크레딧으로 시작하기'를 클릭하면
[09:51]
시스템이 자동으로
[09:52]
URL을 찾아서 스크래핑을 하고
[09:55]
결과를 보여줄 것입니다.
[09:57]
아래로 스크롤하면
[09:59]
깔끔한 마크다운 형식으로
[10:01]
데이터가 정리되어 있는 것을 볼 수 있고
[10:03]
책들과 그들의
[10:06]
가격,
[10:06]
그리고 웹사이트의 모든 콘텐츠를
[10:09]
보여줍니다. 스크래핑은
[10:12]
경쟁사 가격 모니터링에 유용할 수 있고
[10:14]
리드 생성에도 유용할 수 있으며
[10:17]
다양한 용도로 활용할 수 있습니다.
[10:19]
이것은 Firecrawl이 어떻게 작동하는지
[10:21]
보여주는 예시일 뿐입니다.
[10:24]
이제 이것을 n8n에 연결하고
[10:26]
MCP 서버에 연결해서
[10:29]
인터넷 어디서든 이 도구를
[10:31]
사용할 수 있게 만들어보겠습니다.
[10:33]
Firecrawl의 또 다른 멋진 기능은
[10:35]
스크래프를 사용해 개별 페이지를 스크래핑하고
[10:37]
크롤 도구로 URL을 크롤링하여
[10:40]
하위 페이지에 접근할 수 있다는 것입니다.
[10:42]
이를 통해 URL 아래의 모든 것에 대해
[10:45]
더 포괄적인 이해를 할 수 있고
[10:46]
모든 것을 볼 수 있게 됩니다.
[10:49]
모든 페이지의 모든 내용을
[10:51]
제공할 것입니다.
[10:53]
모든 페이지의 다양한
[10:54]
콘텐츠를 제공합니다. 이는 꽤 큰 작업이라
[10:57]
테스트할 때는 단순 스크래핑만
[10:59]
해보시길 추천드립니다.
[11:00]
크롤링은 많은 크레딧을 소모할 수 있기 때문입니다.
[11:02]
많은 크레딧이 소비될 수 있습니다. 그리고 맵은
[11:05]
웹사이트의 사이트맵을 제공하며
[11:07]
URL들의 구조를 보여주고
[11:10]
전체 웹사이트가 포함하고 있는
[11:12]
모든 내용의 컨텍스트를 제공합니다. 여기에
[11:14]
Firecrawl의 특별한 기능이 있는데
[11:17]
이것은 LLM, 즉 대규모 언어 모델을 사용하여
[11:20]
AI를 통해 웹사이트에서 필요한
[11:24]
정확한 정보만을 추출합니다.
[11:26]
만약 코딩 작업을 하고 있고
[11:28]
LLM이 특정 기능에 대해
[11:30]
최신 문서를 이해해야 한다면
[11:33]
이 추출 기능을 사용할 수 있습니다.
[11:35]
그러면 웹사이트에서
[11:38]
필요한 정보를
[11:40]
정확히 찾아줄 것입니다.
[11:42]
이는 기본적으로 텍스트 응답을 받아들이므로
[11:45]
제가 찾고자 하는 내용을
[11:47]
정확히 지정할 수 있습니다.
[11:49]
추출 기능을 사용할 때
[11:52]
이제 우리가 할 것은
[11:53]
Firecrawl이 제공하는 이 모든 기능들을
[11:55]
도구로 설정하는 것입니다.
[11:58]
그러면 MCP 서버가 이러한 도구들에 대해
[12:01]
필요한 내용을 결정하고
[12:03]
어떤 도구를 사용할지 선택할 수 있습니다.
[12:05]
자, 이제 Firecrawl 문서로 가서
[12:08]
이 도구들을 어떻게 설정하는지
[12:11]
정확히 알아보겠습니다.
[12:13]
문서로 가보면
[12:14]
아래쪽에 기능들이 있는 것을 보실 수 있습니다.
[12:16]
scrape, crawl, map, extract가 있죠.
[12:18]
이 각각의 도구들을 n8n에서 만들려면
[12:21]
설정에 필요한 다양한 사양들을
[12:23]
읽어봐야 하지만
[12:25]
꽤 간단합니다.
[12:27]
제가 설명해드리겠습니다.
[12:29]
사실 저는
[12:30]
개발자나 프로그래머가 아닙니다.
[12:32]
1-2년 전에 이 분야를 시작했지만
[12:35]
다른 사람들보다 훨씬 앞서 나갈 수 있었던 것은
[12:37]
약간의 시간을 더 투자해서
[12:40]
이 분야에 깊이 몰입하고
[12:42]
정말 이해하려고 노력했기 때문입니다.
[12:44]
여러분도 이 과정을 따라오시면
[12:46]
충분히 가능하실 거라고 생각합니다.
[12:48]
이제 여기서
[12:50]
만약 정말 심도있게 배우고 싶으시다면
[12:52]
AI Foundations 가입을 추천드립니다.
[12:55]
이곳은 제 형제와 제가 시작한 커뮤니티로
[12:57]
기본적으로 AI 열정가들과
[12:59]
사업가들, 그리고 AI의 잠재력을
[13:01]
진정으로 이해하는 사람들이
[13:03]
함께 모여 서로 배우고 소통할 수 있는 공간입니다.
[13:06]
우리는 함께 학습하고 대화하며
[13:08]
통화도 할 수 있습니다.
[13:11]
우리는 세 가지 C를 중요하게 여깁니다.
[13:13]
커뮤니티(Community), 강의(Courses),
[13:16]
그리고 교실(Classroom)이 있고
[13:17]
캘린더와 통화 일정이 있습니다.
[13:20]
이러한 통화는 계속 확장되는
[13:23]
의제를 가지고 있습니다. 오늘만 해도
[13:25]
저와 제 형제와 함께
[13:27]
실시간 Q&A를 진행했습니다. n8n 워크플로우 설정을 도와주고
[13:29]
다른 일반적인 AI 관련 질문들도 답변해주며
[13:31]
심지어 애플리케이션 배포도 도와드립니다.
[13:34]
앱 배포 섹션으로 가보시면
[13:36]
최근에는 바이브 코딩에 대해 다루면서
[13:38]
비개발자가 어떻게
[13:40]
보안이나 결제 시스템과 같은 까다로운 주제들을
[13:43]
다룰 수 있는지에 대해
[13:46]
이야기를 나누고 있습니다.
[13:49]
피하고 싶지만 반드시 다뤄야 하는
[13:51]
모든 것들에 대해 다룹니다. 그리고
[13:53]
교실이나 강의 섹션으로 가시면
[13:55]
보시면 알 수 있듯이
[13:56]
우리는 N8N 마스터리 코스를 제공하고 있습니다.
[13:58]
이 코스에서 N8N의 A부터 Z까지 모든 것을
[14:01]
배울 수 있으며,
[14:02]
초보자에서 전문가 수준까지 성장할 수 있습니다.
[14:04]
커뮤니티 탭으로 가보시면
[14:06]
글도 작성할 수 있고
[14:08]
포스팅도 가능하며, 도움도 요청할 수 있습니다.
[14:10]
AI 관련 일반적인 정보나 뉴스도 공유할 수 있고
[14:12]
여러분의 성공 사례도 공유할 수 있습니다.
[14:15]
이것이 정말 흥미진진한 이유는
[14:18]
성공 사례 카테고리에서
[14:19]
사람들이 N8N과 자동화
[14:21]
또는 AI를 통해 첫 고객을 확보하는 것을
[14:23]
볼 수 있기 때문입니다.
[14:26]
직장에서 승진하거나,
[14:29]
심지어 애플과 같은 회사에 취업하는 사례도 있습니다.
[14:31]
우리는 non-AI 영역도 가지고 있는데,
[14:34]
우리가 AI에 중점을 두고 있지만
[14:36]
또 다른 AI, 즉 진정성 있는 상호작용
[14:39]
(Authentic Interaction)도 중요하게 생각하기 때문입니다.
[14:41]
우리는 미래에 AI가
[14:44]
우리 업무의 큰 부분을 차지할 것이라 믿습니다.
[14:46]
소비자와 생산자로서의 삶에서도
[14:48]
AI가 중요한 역할을 할 것입니다.
[14:50]
하지만 진정으로 중요한 것은
[14:53]
진정성 있는 인간적 상호작용을 유지하는 것입니다.
[14:56]
이것이 바로 우리 커뮤니티의 핵심입니다.
[14:58]
만약 여러분이 우리와 함께하고
[15:00]
참여하는 것에 진지하게 관심이 있다면,
[15:03]
이 과정이 매우 즐거울 것이고
[15:05]
인간적인 요소를 유지하면서도
[15:07]
시대의 흐름을 앞서갈 수 있을 것입니다.
[15:09]
AI Foundations에 가입하고 싶으시다면
[15:11]
가능한 한 빨리 결정하시는 것이 좋습니다.
[15:13]
왜냐하면 회원이 1500명이 되면
[15:15]
가격을 인상할 예정이고,
[15:17]
곧 그 수에 도달할 것이기 때문입니다.
[15:19]
지금 바로 설명란이나
[15:22]
상단에 고정된 댓글의 링크를 통해
[15:25]
AI Foundations에 가입하실 수 있습니다.
[15:26]
연간 구독을 선택하시면
[15:28]
할인된 가격으로 이용하실 수 있어서
[15:30]
매월 결제하는 것보다 유리합니다.
[15:33]
한 번 설정하면 더 이상 신경 쓸 필요가 없습니다.
[15:35]
AI에 투자하시면
[15:36]
우리가 축하해드리고
[15:38]
가족처럼 환영해드릴 것입니다.
[15:40]
이제 다시 가이드로 돌아가겠지만,
[15:42]
이 정보를 공유하지 않으면
[15:44]
여러분에게 도움이 되지 않을 것 같아서 말씀드렸습니다.
[15:47]
제가 이 모든 것을 어떻게 배웠는지,
[15:48]
바로 올바른 사람들과 교류하고
[15:50]
적절한 정보를 접하며
[15:52]
필요한 시기에 적절한 기회를 잡았기 때문입니다.
[15:54]
올바른 곳에서 기회를 찾으면
[15:57]
행운도 더 가까이 올 수 있습니다.
[15:58]
만약 API에 대해 배우고 있거나
[16:00]
이러한 것들 때문에 스트레스를 받고 계시다면
[16:04]
커뮤니티에 가입하세요.
[16:06]
우리가 올바른 방향으로 안내해드리겠습니다.
[16:09]
자, 이제 제가 할 일은
[16:10]
URL을 스크랩하고
[16:12]
내용을 가져오는 데 사용되는
[16:14]
이 설명을 복사하는 것입니다.
[16:15]
우리는 이것을 도구의 설명으로 사용할 것입니다.
[16:17]
이제 이것을 복사하고
[16:18]
N8N으로 돌아가서
[16:21]
MCP 서버 트리거가 있는 곳으로 가겠습니다.
[16:23]
그리고 여기 도구를 클릭하겠습니다.
[16:26]
이제 이것을 복사하고
[16:28]
N8N으로 돌아가서
[16:31]
MCP 서버 트리거에서
[16:33]
도구 버튼을 클릭하겠습니다.
[16:35]
자, 이제 Firecrawl에 연결하기 위해
[16:37]
사용할 도구는 HTTP입니다. HTTP를
[16:41]
여기에 입력하고 HTTP 요청 도구를 클릭하면
[16:43]
도구가 열리고, 스크레이핑에 대한 설명을
[16:47]
붙여넣을 것입니다.
[16:49]
URL을 스크레이핑하고 내용을 가져오는 데 사용됩니다.
[16:52]
이 설명은 정말 중요합니다.
[16:54]
MCP 서버에서 도구를 설정할 때
[16:56]
이 설명이 매우 중요한데,
[16:58]
도구를 설정할 때
[16:59]
에이전트가 이 도구를 어떻게
[17:02]
실제로 사용하고 어떤 용도인지 알려주기 때문입니다.
[17:05]
따라서 저는 이 HTTP 요청의 이름을
[17:08]
'scrape'로 변경하여 도구의 기능을 명확히 할 것입니다.
[17:12]
이제 나머지 설정을 위해
[17:15]
Firecrawl로 돌아가보겠습니다.
[17:17]
나머지 구성을 확인하기 위해
[17:18]
아래로 내려가서 사용법을 보면
[17:21]
CURL을 클릭할 수 있습니다.
[17:24]
보통은 이걸 복사할 수 있지만,
[17:26]
안타깝게도 n8n에서는 HTTP 요청을
[17:28]
도구로 사용할 때는 이것을 가져올 방법이 없습니다.
[17:32]
일반 노드로 사용할 때는
[17:34]
curl 가져오기가 가능하고
[17:37]
그냥 복사해서 붙여넣기만 하면
[17:39]
자동으로 생성해주지만,
[17:42]
이번 경우에는
[17:43]
몇 가지를 직접 복사해야 합니다.
[17:45]
하지만 꽤 간단합니다. POST 메서드가 있고
[17:48]
이것이 우리가 사용할
[17:50]
HTTP 요청의 타입입니다.
[17:52]
그리고 여기 URL 엔드포인트가 있습니다.
[17:55]
v1 스크레이프 엔드포인트를 복사하고
[17:58]
n8n으로 돌아가서
[18:01]
POST 메서드라는 것을 기억하면서
[18:03]
여기 메서드를
[18:05]
POST로 변경하고
[18:07]
URL을 붙여넣겠습니다.
[18:09]
그리고 다시
[18:11]
Firecrawl 문서로 돌아가서
[18:14]
다른 필요한 것들을 확인해보겠습니다.
[18:17]
여기 h는 헤더를 의미합니다.
[18:19]
추가해야 할 헤더가 두 개 있습니다.
[18:20]
content-type application/json을 추가하고
[18:23]
authorization bearer와 API 키를 추가해야 합니다.
[18:26]
이렇게 하면 우리 계정에
[18:28]
Firecrawl로 접근할 수 있습니다.
[18:31]
먼저 content-type부터
[18:33]
복사하고
[18:34]
application/json이라는 것을
[18:36]
기억해둡니다.
[18:37]
MCP 서버로 돌아와서
[18:39]
헤더 보내기를 클릭하고
[18:42]
여기 이름에
[18:45]
content-type을 붙여넣습니다.
[18:46]
그리고 제공된 값으로
[18:49]
아래 필드를 사용할 것입니다.
[18:52]
문서에 나온 대로 입력하겠습니다.
[18:56]
application/json을
[18:58]
정확히 원하는 대로 입력해야 합니다.
[19:00]
첫 번째 헤더 매개변수를 설정했으니
[19:02]
다시 돌아가서
[19:04]
다른 것이 무엇이었는지 확인하겠습니다.
[19:06]
authorization이었던 것 같은데,
[19:08]
맞습니다. Firecrawl로 돌아가보면
[19:10]
authorization bearer와 API 키가 필요합니다.
[19:14]
여기에 API 키를 넣을 건데,
[19:16]
이것은 API를 사용할 때
[19:18]
일반적으로 따라야 할
[19:20]
관행입니다.
[19:21]
이것은 비밀번호와 같은 것이라
[19:24]
아무 곳에나 노출되면 안 됩니다.
[19:25]
그렇지 않으면 다른 사람들이
[19:27]
여러분의 크레딧을 사용할 수 있게 됩니다.
[19:29]
Firecrawl이나 다른 어떤 애플리케이션을 사용하든
[19:31]
인증을 설정할 때 헤더를 추가하면서
[19:33]
n8n이 제공하는 헤더를 그대로 사용할 수 있지만
[19:36]
저는 그렇게 하는 것을 추천하지 않습니다
[19:38]
보안성이 떨어지고
[19:40]
향후 자격 증명을 재사용하기가
[19:42]
어려워질 수 있기 때문입니다
[19:45]
그래서 이제 보여드리겠습니다
[19:46]
n8n에서 헤더 인증을 올바르게 설정하는 방법을
[19:49]
먼저 이 인증 정보를 복사하고
[19:51]
bearer 다음에 스페이스를 넣고
[19:53]
API 키를 입력하는 것을 기억하세요
[19:55]
이제 n8n으로 돌아가보겠습니다
[19:58]
여기서 할 일은
[20:00]
새로 추가된
[20:01]
인증 탭을 클릭하는 것입니다
[20:03]
generic credential 타입을 선택하고
[20:06]
[20:07]
새로 나타난 드롭다운을 클릭하면
[20:09]
헤더 인증을 선택할 수 있습니다
[20:11]
이것이 헤더 인증입니다. 우리가 필요한 것이 바로 이것이죠
[20:14]
헤더 인증을 선택하고 나면
[20:16]
이제 방금 나타난 드롭다운을 클릭하고
[20:19]
새 자격 증명을 만들어보겠습니다
[20:20]
드롭다운을 보시면
[20:22]
제가 가진 모든 자격 증명이 표시됩니다
[20:24]
새 자격 증명을 만들어볼 텐데
[20:26]
create new credential을 클릭하고
[20:28]
이제 Firecrawl에 접근하기 위한
[20:30]
자격 증명을 설정하겠습니다
[20:32]
먼저 이름을 변경해서
[20:34]
용도를 알 수 있게 하겠습니다
[20:36]
'fire crawl MCP server'라고 하겠습니다
[20:39]
이름은 기억하기 쉽게
[20:40]
원하는 대로 지으시면 됩니다
[20:42]
name 필드에는 아까 복사한
[20:44]
authorization을 붙여넣거나 직접 입력하세요
[20:46]
value 필드에는
[20:47]
bearer를 입력하고 스페이스바를
[20:50]
한 번 눌러주세요
[20:51]
bearer는 모두 대문자로 입력하고
[20:54]
그 다음 Firecrawl에서
[20:56]
API 키를 가져오겠습니다
[20:58]
이걸 접근하려면
[21:00]
Firecrawl로 돌아가서
[21:03]
프론트엔드의 playground로 가보겠습니다
[21:05]
계정을 만들고 나면
[21:07]
대시보드로 들어갈 수 있고
[21:09]
여기서 좋은 점은
[21:11]
API 키가 바로 여기 있다는 거죠
[21:14]
'copy API key'를 클릭하고
[21:17]
n8n으로 돌아와서
[21:19]
bearer 뒤의 공백 다음에 붙여넣기 하면 됩니다
[21:23]
붙여넣기하고 저장하면
[21:26]
이제 Firecrawl MCP 서버 자격 증명이
[21:29]
설정되었습니다. 이걸 닫고
[21:32]
저장하지 않겠다고 하면
[21:35]
이제 헤더 인증에서 Firecrawl MCP
[21:37]
서버를 선택할 수 있고
[21:39]
인증이 필요할 때마다
[21:41]
내 자격 증명에서 사용할 수 있습니다
[21:43]
안전하고 보안성 있게 저장되어 있죠
[21:45]
이것이 헤더 인증을 추가하는 좋은 방법입니다
[21:47]
여기서처럼 헤더 파라미터로
[21:49]
authorization을 입력하고
[21:51]
bearer 스페이스 API 키 값을 넣을 수도 있지만
[21:52]
이 경우에는 헤더 인증 방식을 사용하는 것이 좋습니다
[21:57]
이제 다시
[21:58]
Firecrawl 문서로 돌아가서
[22:00]
HTTP 요청에 추가로 필요한 것이 있는지
[22:03]
확인해보겠습니다
[22:06]
이런 작업들은 금방 익숙해질 겁니다
[22:08]
지금은 많아 보일 수 있지만
[22:10]
이것은 앞으로 습득하게 될
[22:11]
스킬이고 다양한 자동화와
[22:13]
MCP 서버를 만들 수 있게 될 것이며
[22:15]
이는 매우 강력한 도구가 될 것입니다
[22:18]
그러니 계속 따라와 주시기 바랍니다
[22:20]
여러분이 여기까지 와준 것이 자랑스럽습니다
[22:22]
지금까지 영상을 시청하신 분들께
[22:24]
부탁드리고 싶은 것이 있습니다
[22:27]
댓글 섹션에 가셔서
[22:29]
무엇이 여러분을 이 영상으로 이끌었는지
[22:31]
그리고 왜 아직도 시청하고 계신지
[22:33]
MCP 서버에 대해 어떤 점이
[22:35]
여러분을 설레게 하는지 알려주세요
[22:37]
저는 정말로 궁금합니다
[22:39]
무엇이 여러분을 이 영상으로 이끌었고
[22:41]
여기까지 오게 했는지 말이죠
[22:43]
여러분은 소수에 속합니다
[22:46]
여기까지 온 사람은 얼마 되지 않거든요
[22:48]
이런 내용을 깊이 파고들어
[22:49]
이해하려는 사람은 소수니까요
[22:50]
자, 이제 fire crawl 문서로 돌아가서
[22:54]
댓글을 남기신 후에
[22:57]
아래로 조금 스크롤해보면
[23:00]
URL과 formats 섹션이 있습니다
[23:02]
이것은 D 태그 뒤에 넣어야 할 내용입니다
[23:06]
우리가 본문에 넣어야 할 내용이죠
[23:07]
D 플래그 다음에 URL과
[23:10]
formats가 필요합니다
[23:13]
좋은 점은 여기 있는
[23:14]
JSON을 그대로 복사할 수 있다는 겁니다
[23:17]
여기 보이는 이 구조는
[23:19]
코드가 이해할 수 있는 형식입니다
[23:21]
우리가 전달하려는 내용을
[23:24]
코드가 이해할 수 있게 만든 거죠
[23:26]
URL을 전달해서
[23:28]
어떤 URL을 스크랩할지 알려주고
[23:30]
어떤 형식으로 받을지도 지정합니다
[23:33]
우리는 마크다운 형식으로 받을 건데
[23:34]
이는 거의
[23:36]
일반 텍스트에 가까운 형식입니다
[23:38]
사람과 대규모 언어 모델이 이해하기 쉽죠
[23:41]
그리고 HTML도 요청했습니다
[23:43]
둘 다 요청했으니 둘 다 받을 수 있죠
[23:45]
이렇게 원하는 형식을 선택할 수 있어서 좋습니다
[23:48]
두 형식 모두 받을 수 있으니까요
[23:50]
이게 좋은 점입니다
[23:53]
원하는 형식을 선택할 수 있으니까요
[23:55]
일단 이 템플릿을 복사하고
[23:56]
여기
[23:57]
n8n으로 돌아가겠습니다
[23:59]
그리고
[24:00]
send body를 클릭하고
[24:03]
아래에서 specify body를 클릭합니다
[24:07]
그리고 'using JSON below'를 클릭합니다
[24:09]
필드를 사용할 수도 있는데
[24:12]
수동으로 입력할 수도 있고
[24:14]
URL을 입력하고 아래 필드를 사용해서
[24:16]
원하는 URL을 지정할 수 있습니다
[24:19]
또는 이 경우에는
[24:22]
모델을 사용해서 URL을 채우게 할 수도 있죠
[24:26]
모델이 URL을 채우도록 할 수 있습니다
[24:28]
하지만 지금은 JSON을 사용해서
[24:30]
어떻게 작동하는지 보여드리겠습니다
[24:33]
사실 이게 더 복잡한 방법이지만
[24:36]
이렇게 하면
[24:37]
더 잘 이해할 수 있고
[24:40]
전반적으로 JSON 사용법을 아는 것이
[24:41]
더 좋은 스킬이 될 것 같습니다
[24:44]
워크플로우를 복사하고
[24:46]
템플릿을 사용할 수는 있지만
[24:49]
작동 원리를 이해하지 못하면
[24:50]
n8n을 사용하는 게 즐겁지 않을 거예요
[24:52]
그러니 'using JSON below'를 클릭하고
[24:55]
따라와 주세요
[24:58]
보시면 아시겠지만
[25:00]
모델이 채워야 할 데이터에 대한 플레이스홀더를 사용하라는 알림이 표시됩니다.
[25:02]
그 방법도 곧 보여드리겠습니다.
[25:04]
이 JSON을 붙여넣으면
[25:06]
URL과 format이 있을 것입니다.
[25:09]
URL을 입력하고
[25:10]
형식을 지정할 겁니다.
[25:12]
자, 먼저
[25:14]
중괄호를 뒤로 정렬하여
[25:17]
이렇게 맞춰보겠습니다. 확대해서 보면
[25:20]
잘 보이실 텐데
[25:22]
URL이 있는 것을 확인할 수 있습니다.
[25:24]
여기가 URL을 위한 플레이스홀더를 넣을 곳이고
[25:27]
format도 플레이스홀더로 만들 수 있습니다.
[25:29]
하지만 마크다운만 사용하고 싶다면
[25:32]
플레이스홀더를 사용하지 않아도 됩니다.
[25:34]
HTML과 쉼표를 지우고
[25:37]
마크다운만 남겨두겠습니다.
[25:40]
쉼표도 함께 지워줍니다.
[25:42]
마크다운만 사용하는 이유는
[25:45]
LLM에 과도한 부담을 주지 않기 위해서입니다.
[25:48]
URL의 일반 텍스트만 가져오려고 합니다.
[25:50]
마크다운은 에이전트의 컨텍스트를 가져올 때
[25:53]
좋은 방법입니다.
[25:55]
에이전트에게 컨텍스트를 제공할 때 유용하죠.
[25:58]
그래서 마크다운으로 두겠습니다.
[26:00]
URL에는 플레이스홀더를 사용할 건데
[26:03]
이 도구의 좋은 점은
[26:05]
HTTP 요청의 마지막 부분에서
[26:07]
해야 할 마지막 설정이
[26:09]
바로 이것입니다.
[26:11]
플레이스홀더를 정의해야 합니다.
[26:13]
이것들이 모델이 실제로
[26:15]
도구 요청을 커스터마이즈하기 위해
[26:17]
채워넣을 항목들입니다.
[26:20]
여기 정의 추가를 클릭하면
[26:22]
URL이라는 플레이스홀더 이름을 입력할 수 있고
[26:26]
설명도 추가할 수 있습니다.
[26:29]
'스크래핑하려는 페이지의 URL을 입력하는 곳입니다'라고
[26:33]
작성하겠습니다.
[26:35]
완벽합니다. 이게 다예요.
[26:38]
타입은 문자열로 지정하면 됩니다.
[26:40]
문자열은 단순한 텍스트 라인이에요.
[26:43]
문자열을 전달해야 한다는 걸 알게 됩니다.
[26:45]
number를 선택하면 숫자를 전달해야 하고
[26:48]
Boolean을 선택하면
[26:50]
1이나 0, 또는 true나 false를 전달해야 합니다.
[26:53]
JSON도 선택할 수 있는데
[26:56]
실제 JSON을 메시지로 전달하고 싶을 때 사용합니다.
[26:58]
저는 string으로 하겠습니다.
[27:01]
이제 거의 다 준비되었습니다.
[27:03]
이제 해야 할 일은
[27:06]
URL이 이름이니까
[27:09]
URL 부분을 지우고
[27:12]
중괄호를 넣고
[27:14]
JSON에 URL이라고 입력하면 됩니다.
[27:17]
이제 플레이스홀더 정의가 설정되어 있어서
[27:19]
이 부분을 채워야 한다는 걸
[27:21]
알 수 있습니다. 좋습니다.
[27:24]
이제 스크래핑을 위한 HTTP 요청이
[27:28]
거의 준비되었습니다. 캔버스로 돌아가보면
[27:31]
이제 스크래핑 도구가
[27:32]
하나 있는 것을 볼 수 있습니다.
[27:35]
정의되어 있고 이름도 있습니다.
[27:37]
모든 게 준비되었죠.
[27:39]
n8n에서 작업할 때
[27:40]
중요한 것 한 가지는
[27:42]
자주 저장하는 것입니다.
[27:44]
사실 저는 변경할 때마다 저장하는
[27:47]
첫 번째 규칙을 어겼네요.
[27:49]
위에 있는 주황색 저장 버튼을
[27:51]
클릭해서 수동으로 저장할 수 있습니다.
[27:53]
자동 저장이 되지 않기 때문에
[27:55]
자동 저장이 되지 않으니 수시로
[27:57]
작업하면서 자주 저장하세요
[27:59]
자, 이제 개인적으로
[28:01]
이게 제대로 작동하는지 확인하고 싶습니다
[28:03]
MCP 서버를 모든 도구와 함께
[28:04]
전부 구축해놓고 나서
[28:07]
작동하지 않는다는 걸 알게 되는 상황은
[28:09]
피하고 싶거든요
[28:11]
그래서 먼저 테스트를 해볼 건데요
[28:13]
테스트를 위해서는
[28:15]
먼저 이 워크플로우를
[28:17]
활성화하고
[28:19]
'확인' 버튼을 누른 다음 MCP 서버 트리거로 들어갈 겁니다
[28:24]
프로덕션 URL로 전환하고
[28:26]
MCP URL을 클릭해서
[28:28]
프로덕션 URL을 복사할 건데요
[28:32]
이 URL이 바로 MCP 서버를
[28:34]
호출하는 데 사용할 주소입니다
[28:37]
URL을 복사한 후에는 캔버스로 돌아가는데
[28:40]
다시 클릭하지 않도록 주의하세요
[28:42]
클릭하면 테스트 URL로 바뀌거든요
[28:44]
프로덕션으로 전환했으면 캔버스로 돌아가서
[28:47]
이제 프로덕션 모드에서
[28:49]
작업할 수 있습니다
[28:52]
다음으로는 클라이언트 측 작업을 할 건데
[28:55]
지금은 테스트 목적으로만 하는 거예요
[28:57]
도구가 완전히 완성된 건 아니지만
[28:59]
우리 에이전트가 이미 구축해 놓은
[29:01]
MCP 서버의 이 도구와
[29:03]
제대로 통신할 수 있는지 확인하고 싶습니다
[29:07]
다시 개요 페이지로 돌아가서
[29:10]
새 워크플로우를 만들고
[29:14]
이름을 'scraping agent'로
[29:17]
지정하겠습니다
[29:21]
n8n에서 에이전트와 대화하는
[29:23]
방법은 여러 가지가 있는데요
[29:25]
텔레그램, 슬랙, 마이크로소프트 팀즈
[29:28]
왓츠앱도 사용할 수 있고
[29:31]
다양한 방법이 있습니다
[29:33]
심지어 직접
[29:34]
커스텀 도구를 만들어서
[29:36]
대화할 수도 있고
[29:38]
Lovable이나 Cursor를 사용해서 코드를 작성할 수도 있죠
[29:40]
하지만 간단하게 테스트하기 위해
[29:42]
오늘은 다른 방법을 써볼 건데요
[29:44]
'첫 단계 추가'를 클릭하고
[29:46]
'chat'을 입력해서
[29:48]
n8n 채팅 트리거를 사용하겠습니다
[29:51]
이렇게 하면 n8n에서 바로
[29:53]
채팅을 하고 테스트해볼 수 있어요
[29:56]
원한다면 나중에도
[29:58]
계속 이걸 사용할 수 있고
[29:59]
다른 도구로 바꿀 필요는 없습니다
[30:02]
채팅 쪽에서는 말이죠
[30:05]
채팅 트리거를 클릭하고
[30:07]
캔버스로 돌아가면 됩니다
[30:10]
이제 채팅 트리거가 있으니
[30:12]
다음으로 AI 에이전트를
[30:14]
추가해야 합니다. 이것도 간단한데요
[30:17]
채팅 트리거가 있으면
[30:18]
플러스를 누르고
[30:21]
AI 에이전트를 입력해서 선택하면 됩니다
[30:25]
여기서 AI 에이전트를
[30:27]
설정하고 지시사항을 입력할 수 있어요
[30:30]
캔버스로 돌아가보면
[30:32]
AI 에이전트를 실행하는 데
[30:34]
몇 가지 요구사항이 있다는 걸 알 수 있습니다
[30:36]
첫 번째는 채팅 모델인데
[30:39]
이건 우리가 사용할
[30:41]
대규모 언어 모델입니다
[30:43]
이 에이전트를 위한 것이죠
[30:46]
여기 플러스를 클릭하면
[30:49]
OpenAI를 선택하면 여러가지 옵션이 나타나는데요
[30:52]
OpenAI 챗 모델을 볼 수 있습니다
[30:55]
이를 통해 모든 OpenAI 챗 모델에
[30:57]
ChatGPT와 같은 모델들에 연결할 수 있죠
[31:00]
OpenAI 챗 모델을 클릭하면
[31:02]
모델을 선택할 수 있는데, 먼저 인증 정보를
[31:06]
설정해야 합니다
[31:08]
이를 위해서는 드롭다운 메뉴를 클릭하고
[31:10]
새 인증 정보 생성을 선택하세요
[31:13]
그리고 platform.openai.com으로
[31:15]
이동하시면 됩니다
[31:18]
보시다시피 저는 지금
[31:19]
platform.openai.com에 있습니다
[31:22]
여기서 로그인하거나 계정이 없다면
[31:24]
가입을 먼저 해야 합니다
[31:26]
주의할 점은 이 계정이
[31:28]
ChatGPT 계정과는 별개라는 것입니다
[31:30]
이미 ChatGPT 계정이 있더라도
[31:32]
유료든 무료든 상관없이
[31:34]
개발자 포털에 따로 가입해야
[31:36]
API에 접근할 수 있습니다
[31:38]
이것도 개발자 포털에
[31:40]
가입해야 사용할 수 있습니다
[31:42]
복잡해 보일 수 있지만
[31:43]
한 번만 설정하면 됩니다
[31:45]
자전거 타기처럼 익숙해질 거예요
[31:47]
저는 이미 가입이 되어 있어서
[31:49]
로그인만 하면 되는데요
[31:51]
이미 계정이 있으니
[31:52]
로그인을 클릭하고
[31:54]
저는 구글 계정으로
[31:55]
계속하기를 선택하겠습니다
[31:57]
로그인하면 프로필 사진이 보이고
[31:59]
설정 아이콘도 보입니다
[32:00]
이제 설정 아이콘을
[32:02]
클릭하시면 됩니다
[32:05]
클릭하시면
[32:06]
사이드 패널이
[32:07]
새로 열립니다
[32:09]
여기서 먼저 찾아야 할 것은
[32:11]
결제 영역입니다
[32:13]
결제에서 카드 정보와
[32:16]
모든 결제 정보를
[32:18]
설정하게 됩니다
[32:21]
이것은 서비스 운영을 위한 것인데요
[32:24]
참고로 말씀드리면
[32:27]
OpenAI는 꽤 합리적인 가격의 모델들이 있어서
[32:30]
시작하는데 많은 비용이
[32:31]
들지 않을 겁니다
[32:33]
5-10달러 정도면 시작할 수 있고
[32:36]
응답당 몇 센트 정도의
[32:38]
비용만 발생합니다
[32:41]
비용 걱정은 하지 않으셔도 되고
[32:44]
한도도 설정할 수 있으며
[32:46]
사용량도 모니터링할 수 있습니다
[32:49]
특히 개인 용도로만 사용한다면
[32:51]
크게 부담되지 않을 겁니다
[32:54]
하지만 결제 설정은
[32:55]
반드시 필요하니
[32:57]
결제 정보를 등록해주세요
[32:59]
결제 정보를 설정한 후에는
[33:02]
API 키 메뉴로 이동합니다
[33:04]
API 키를 클릭하고
[33:07]
새로운 시크릿 키를 생성할 건데
[33:09]
이름을 'MCP scraping agent'
[33:13]
test로 지정하겠습니다
[33:16]
프로젝트도 선택해야 하는데
[33:19]
보통은 기본 프로젝트를
[33:21]
사용하시면 됩니다
[33:23]
저는 데모 프로젝트를 사용할 거고
[33:25]
시크릿 키 생성을 클릭합니다
[33:27]
생성된 키를 복사하고
[33:29]
n8n으로 돌아가서
[33:31]
인증 정보를 입력하겠습니다
[33:33]
OpenAI 챗 모델의 자격 증명을 위해
[33:36]
API 키를 붙여넣기 하겠습니다
[33:38]
그리고 이름을 변경하겠습니다
[33:40]
MCP agent scraping test로 변경하고
[33:44]
저장하도록 하겠습니다
[33:47]
참고로 이름은 크게 중요하지 않습니다
[33:49]
단지 찾기 쉽게 하기 위한 것입니다
[33:52]
OpenAI의 API 키도 마찬가지로
[33:54]
이름을 일치시킬 필요는 없습니다
[33:57]
API 키만 있으면 됩니다
[33:58]
완료되면 저장하시고
[34:00]
API 키가 준비되면
[34:03]
저장 후에 자격 증명 연결에서
[34:06]
방금 추가한
[34:07]
키를 선택하면
[34:08]
됩니다
[34:10]
그러면 프론트엔드에서 사용 가능한
[34:12]
모든 OpenAI 모델에 접근할 수 있습니다
[34:15]
스크롤을 내려보면
[34:18]
MCP 서버에서 제가 가장 선호하는 모델은
[34:20]
GPT-3.5-turbo입니다. 03 Mini를 입력하면
[34:22]
나타날 겁니다. 보이지 않는다면
[34:26]
03을 입력해보세요
[34:28]
대시를 추가해야 했네요
[34:31]
저는 GPT-3.5-turbo-0125를 사용하겠습니다
[34:35]
이 모델이 결과 도출이 더 좋고
[34:37]
AI 분야에서 말하는
[34:40]
환각 현상이 덜합니다
[34:42]
환각이란 AI가 정보를 출력할 때
[34:45]
마치 올바른 것처럼 행동하지만
[34:47]
실제로는 쓸모없는 정보나
[34:50]
잘못된 정보를 제공하는 것입니다
[34:52]
GPT-3.5-turbo는 이런 현상을 잘 피합니다
[34:54]
100% 완벽하진 않지만
[34:57]
GPT-4보다 훨씬 낫습니다
[35:00]
GPT-4를 사용하면서 겪은
[35:03]
끔찍한 사례들을 봤거든요
[35:05]
그래서 GPT-3.5-turbo를 추천합니다
[35:07]
가격도 합리적이고
[35:09]
품질도 정말 뛰어납니다
[35:12]
모델을 선택했으면
[35:14]
캔버스로 돌아갈 수 있고
[35:17]
이제 OpenAI 챗 모델이 준비됐습니다
[35:19]
AI 에이전트를 만드는 다음 단계는
[35:21]
대화 내용을 기억하게 하는 것입니다
[35:23]
여기서는 메모리 아래에 있는
[35:25]
플러스를 클릭하고
[35:28]
심플 메모리를
[35:30]
선택하겠습니다
[35:32]
심플 메모리의 좋은 점은
[35:35]
세션 ID만 있으면 된다는 것입니다
[35:37]
세션 ID는 대화를 추적하는 방법으로
[35:40]
대화를 구별하는 고유한 숫자 조합입니다
[35:43]
현재 진행 중인
[35:45]
대화를 나타내죠
[35:47]
텔레그램이나 슬랙 같은 플랫폼에
[35:49]
연결할 때는 실제로
[35:52]
슬랙이나 텔레그램에서의
[35:55]
채팅을 나타내는 정의된
[35:58]
세션 ID를 제공하게 됩니다
[36:00]
하지만 지금은 채팅 트리거
[36:02]
노드만 사용하기 때문에 자동으로
[36:05]
채팅 트리거에서 가져올 수 있습니다
[36:07]
여기서 연결된 채팅 트리거 노드를
[36:09]
선택하면 자동으로 채팅 내용을
[36:12]
기억하게 됩니다
[36:14]
다른 채팅 도구 연결에
[36:15]
어려움을 겪고 계시다면
[36:17]
우리 커뮤니티 가입을 추천드립니다
[36:19]
실제로 이것만을 위한
[36:21]
섹션이 있기 때문입니다
[36:24]
AI Foundations에서
[36:25]
교실로 들어가서 N8N 마스터리 코스를 보시면
[36:28]
코스로 가시면
[36:30]
커뮤니케이션 미디엄을 통해 텍스트와
[36:32]
텔레그램 연결 방법을 보여드립니다.
[36:35]
텍스트와 음성 데모도 함께 제공합니다.
[36:38]
또한 슬랙, 왓츠앱, 오픈 웹 UI도 있어서
[36:41]
로컬 환경을 선호하는 분들은
[36:43]
자신의 기기에서 직접 사용할 수 있습니다.
[36:45]
다시 말씀드리지만,
[36:48]
아래 설명란의 링크나
[36:50]
상단 고정 댓글을 통해
[36:51]
커뮤니티에 참여하실 수 있습니다.
[36:53]
이 튜토리얼에서는 connected chat 트리거 노드만
[36:55]
사용하도록 하겠습니다.
[36:57]
다음으로 컨텍스트 윈도우 길이를 보겠습니다.
[36:59]
이는 AI가 기억할 수 있는
[37:02]
이전 상호작용이나 메시지의 수를
[37:04]
나타냅니다. 이 에이전트의 경우
[37:06]
이전 대화 내용 중 5개의
[37:08]
메시지를 기억할 수 있습니다.
[37:11]
이 값을 높이고 싶다면
[37:12]
10으로 설정할 수도 있습니다.
[37:15]
이렇게 하면 더 긴 대화 기록을
[37:17]
기억할 수 있게 됩니다.
[37:19]
이것은 필요에 따라
[37:21]
조정하고 실험해볼 수 있는 부분입니다.
[37:23]
에이전트가 대화를 기억하지 못하거나
[37:25]
내용을 잊어버리는 문제가 있다면
[37:27]
이 두 가지 기본 설정,
[37:29]
세션 ID와
[37:30]
컨텍스트 윈도우 길이를 확인해보세요.
[37:32]
이제 캔버스로 돌아가보면
[37:35]
메모리와 모델이 있습니다.
[37:38]
다음은 재미있는 부분입니다.
[37:40]
MCP 서버를 추가하고
[37:42]
도구를 추가할 것입니다.
[37:44]
여기서 플러스 버튼을 클릭하고 MCP를 입력하면
[37:46]
MCP 클라이언트 도구가 보일 것입니다.
[37:49]
이것을 클릭하면
[37:51]
우리가 만든 MCP 서버를 참조하게 됩니다.
[37:54]
이전에 웹훅을 복사했지만
[37:57]
저장하지 않았었는데,
[38:00]
다행히도
[38:02]
다시 가져올 수 있습니다.
[38:03]
또한 인증을 설정했다면
[38:06]
인증 정보도 연결할 수 있고
[38:08]
어떤 도구를 사용할지도 선택할 수 있습니다.
[38:10]
우리는 이미 스크래핑 도구를 하나 가지고 있습니다.
[38:14]
이제 다른 워크플로우에 있는
[38:16]
URL을 가져와서
[38:18]
여기에 붙여넣기만 하면 됩니다.
[38:22]
진행 상황을 저장하기 위해
[38:24]
캔버스로 돌아가서 저장하겠습니다.
[38:26]
그리고 오버뷰로 가서
[38:28]
파이어크롤용 MCP 서버를
[38:30]
클릭하겠습니다.
[38:32]
MCP 서버 트리거로 들어가서
[38:34]
프로덕션 URL로 전환하고
[38:37]
클릭해서 복사하겠습니다.
[38:40]
그런 다음 캔버스로 돌아가서
[38:42]
오버뷰로 다시 이동합니다.
[38:46]
그리고 스크래핑 에이전트로
[38:48]
돌아가겠습니다.
[38:50]
MCP 클라이언트 도구를 클릭하고
[38:53]
여기에 URL을 붙여넣겠습니다.
[38:56]
이제 이 도구에 접근할 수 있게 되었습니다.
[39:00]
원한다면 '선택된 도구'로 가서
[39:02]
스크래핑 도구만 포함하도록
[39:04]
선택할 수도 있고,
[39:06]
'제외할 항목'을 선택해서 원하지 않는 도구를
[39:09]
제외할 수도 있습니다.
[39:10]
하지만 이 경우에는
[39:12]
모든 도구를 선택하겠습니다.
[39:14]
현재는 도구가 하나밖에 없어서 문제없습니다.
[39:16]
이제 캔버스로 돌아가서
[39:19]
이 AI 에이전트가 실제로 작동하는지
[39:21]
테스트해볼 수 있습니다. 실제 작동하는 것을 보고
[39:23]
MCP 서버가 제대로 응답하는지 확인할 수 있죠
[39:26]
먼저 저장을 클릭하고
[39:28]
채팅창을 열어보겠습니다
[39:31]
그리고 제가 입력할 내용은
[39:33]
books.toscrape.com 웹사이트를 스크랩해서
[39:37]
최고 평점을 받은 책들이 무엇인지
[39:40]
알려달라고 요청하겠습니다
[39:46]
이것은 테스트용이고, 이 웹사이트는
[39:50]
윤리적으로 스크랩이 가능한
[39:52]
테스트 사이트입니다
[39:53]
전체 URL을 정확히 인식할 수 있도록
[39:56]
https:// 도 함께 입력하겠습니다
[39:59]
이제 전체 URL이 준비되었고
[40:02]
이제 메시지를 보내보겠습니다
[40:04]
AI 에이전트가 작업을 시작했네요
[40:07]
여기서
[40:09]
챗 모델에 접근하고 메모리를 확인했습니다
[40:11]
이제 MCP 서버 도구를 사용하려고 하네요
[40:14]
좋습니다. 녹색 체크마크가 떴네요. 좋은 신호입니다
[40:16]
이제 어떤 응답이 오는지 보겠습니다
[40:18]
MCP 클라이언트로부터
[40:20]
컨텍스트 정보가 돌아와야 합니다
[40:21]
좋습니다. 응답이 왔네요
[40:25]
Books to Scrape 웹사이트는
[40:27]
웹 스크래핑 연습용
[40:28]
데모 사이트입니다
[40:30]
많은 책이 있지만
[40:31]
별도의 최고 평점 카테고리는 없다고 하네요
[40:35]
이제 개요 화면으로 돌아가서
[40:38]
MCP 서버가 어떤 정보를 받았고
[40:40]
그 정보로 무엇을 했는지 확인하기 위해
[40:42]
MCP 서버로 들어가보겠습니다
[40:45]
여기서
[40:46]
실행 기록을 확인할 수 있고
[40:48]
성공적으로 실행된 내역을 볼 수 있습니다
[40:52]
여기 첫 번째가 가장 최근 실행입니다
[40:54]
전달된 정보를 보고 싶다면
[40:57]
전달된 정보를 보려면
[40:58]
스크랩을 클릭하면 되고, 네
[41:01]
성공적으로 반환된 것을 확인할 수 있습니다
[41:03]
여기에 마크다운으로 표시되어 있네요
[41:05]
메뉴 구조와 함께
[41:08]
이 웹사이트에 대한 정보를
[41:10]
받아왔습니다. 이제 스크래핑 에이전트로 돌아가서
[41:13]
다른 질문을 해보겠습니다
[41:15]
다시 채팅을 열고
[41:16]
채팅창을 열어서
[41:18]
books.toscrape.com에서 찾을 수 있는
[41:21]
책 하나를 이름을 말해달라고 하겠습니다
[41:27]
이번에는 구체적인 정보를
[41:29]
가져올 수 있는지 보겠습니다
[41:32]
아까는 최고 평점 책들을 물어봤지만
[41:34]
이번에는 에이전트가
[41:36]
실제로 올바른 정보를
[41:38]
가져오는지 확인하고 싶습니다
[41:40]
도구를 사용하고 있고, 이제 모델이
[41:42]
응답을 받았네요. 웹사이트에서 볼 수 있는
[41:45]
책들 중 하나는
[41:47]
'A Light in the Attic'이라고 하네요
[41:50]
이제 웹사이트로 가서
[41:51]
실제로 있는지 확인해보겠습니다
[41:54]
자, 이제 북스크랩 사이트에 왔고
[41:56]
보시다시피 첫 번째 책을 찾아서
[41:58]
저에게 보여줬네요
[42:00]
완벽합니다. 이제 이 도구가
[42:02]
스크래핑에 잘 작동하는 것을 확인했으니
[42:04]
다시 돌아가서 다른 도구들도
[42:06]
MCP 서버에 추가할 수 있습니다
[42:09]
개요로 돌아가서 MCP 서버를
[42:12]
클릭하고
[42:13]
파이어크롤에서 새로운 도구들을
[42:15]
추가할 수 있습니다. 지금은 스크랩만 있지만
[42:17]
이제 firecrawl이 제공하는 다른 도구들을 추가해보겠습니다
[42:19]
이 과정을 단순화하기 위해
[42:22]
기존에 있는 것을 복제하겠습니다
[42:24]
연결하기 위해 도구를 끌어다 놓으면
[42:26]
편집할 수 있습니다
[42:29]
이제 연결되었으니
[42:32]
클릭해서
[42:33]
들어가보겠습니다. 여기서는
[42:35]
설명, 이름, URL 그리고
[42:39]
필요하다면 이 JSON도 변경할 것입니다
[42:42]
다시
[42:43]
Firecrawl로 돌아가서 크롤 기능으로 전환하겠습니다
[42:47]
여기서 엔드포인트 설명을
[42:49]
복사하고 N8N으로 돌아가서
[42:52]
설명을 붙여넣겠습니다
[42:54]
그리고 이름도 바꾸겠습니다
[42:56]
크롤로
[42:57]
변경하고 이름 바꾸기를 클릭합니다
[43:00]
문서에서 아래로 스크롤하면
[43:02]
사용법에서 다른 URL 엔드포인트를
[43:05]
확인할 수 있습니다. 이것을 복사해서
[43:08]
여기 있는 URL을 교체하겠습니다
[43:10]
인증 정보는 그대로 유지됩니다
[43:13]
이것이 복사하기의 장점입니다
[43:14]
이미 준비가 되어 있죠
[43:17]
application/json 헤더를 보내고 있고
[43:20]
그리고 여기 아래에서는
[43:22]
본문을 조금
[43:23]
수정해야 합니다. 그리고
[43:26]
플레이스홀더 정의도
[43:27]
수정이 필요할 수 있습니다. d 플래그 아래를 보면
[43:30]
추가할 수 있는
[43:32]
다양한 옵션들이 있습니다
[43:34]
스크랩할 때의 옵션을 추가하거나
[43:36]
스크랩할 페이지 수 제한을 설정할 수 있고
[43:38]
URL도 추가할 수 있습니다
[43:40]
이 정보를 모두 복사해서
[43:42]
JSON으로 돌아가
[43:44]
붙여넣겠습니다
[43:45]
끝부분을 조정하고
[43:47]
백스페이스로 끝부분을 맞추겠습니다
[43:50]
URL은 이미 있으니
[43:53]
플레이스홀더를 넣을 수 있습니다
[43:56]
URL 플레이스홀더가
[43:59]
여기 이미 존재하고 있습니다
[44:02]
스크랩하려는 페이지의
[44:04]
URL을 입력하는 곳이라고 설명합니다
[44:06]
이 경우에는
[44:07]
크롤하려는 기본 페이지의 URL을
[44:10]
입력하는
[44:12]
곳이라고 설명하겠습니다
[44:17]
이 예제에서는
[44:19]
제한을 5로 설정하여
[44:21]
시스템에 부담을 주지 않고
[44:23]
과도한 스크랩을 방지합니다
[44:24]
원하신다면
[44:26]
제한을 조정할 수 있지만, 처음에는
[44:28]
낮게 시작하는 것을 추천합니다
[44:30]
형식은 마크다운이나 HTML 중 선택할 수 있는데
[44:34]
테스트를 위해
[44:36]
HTML을 선택하겠습니다
[44:39]
이제 준비가 됐습니다
[44:41]
다른 플레이스홀더를
[44:42]
추가하고 싶다면
[44:44]
정의 추가를 클릭하면 됩니다만
[44:46]
이 정도면 충분해 보입니다
[44:48]
캔버스로 돌아가서
[44:50]
Firecrawl이 제공하는 다른 도구들에도
[44:52]
이 과정을 반복하겠습니다. 추출과 크롤 도구를
[44:55]
만들어봤는데
[44:57]
이것들은 좀 더 복잡하고
[44:59]
실행 비용도 훨씬 더 많이 듭니다
[45:01]
그래서 이것들은 삭제하고
[45:03]
이 가이드에서는
[45:05]
스크랩과 맵 도구만 사용하도록 하겠습니다
[45:07]
이제 테스트를 진행해보도록 하겠습니다.
[45:09]
모든 것이 제대로 작동하는지 확인해보겠습니다.
[45:11]
지금 제가 AI 에이전트 안에 있는데요.
[45:13]
채팅을 숨기고 다시 열기를 누르면
[45:15]
실제로 특정 웹사이트의 URL을
[45:18]
매핑하도록 요청할 수 있습니다.
[45:20]
예를 들어, 파이어크롤 웹사이트의
[45:23]
문서를 이해하고 싶다면
[45:25]
먼저 이 웹사이트의 URL을
[45:27]
매핑해달라고 요청할 수 있습니다.
[45:32]
이렇게 보내면
[45:35]
파이어크롤 문서의 사이트맵을
[45:37]
제공받을 수 있습니다.
[45:39]
docs.firecrawl.dev에서 가져온
[45:42]
정보입니다.
[45:43]
좋습니다. 이제 모든 URL을
[45:45]
추출했고
[45:47]
필요한 모든 컨텍스트를 가지고 있어서
[45:49]
올바른 페이지를 스크랩할 수 있게
[45:51]
되었습니다.
[45:54]
이제 'extract'에 대한 페이지를
[45:57]
스크랩하고
[45:59]
extract 요청을 보내는 방법을 알려달라고 하겠습니다.
[46:05]
이 정보를 바탕으로 설명해달라고 요청하겠습니다.
[46:08]
이제 여기 컨텍스트가 있고 모든 URL이 있어서
[46:11]
살펴보면서
[46:13]
'extract'에 대한
[46:14]
페이지를 찾을 것입니다.
[46:17]
계속 스크롤을 내리다 보면
[46:19]
이런 식으로 extract에 대한
[46:22]
다른 페이지도 찾을 수 있죠.
[46:24]
모든 정보를 스크랩하고
[46:26]
그 정보를 수집해서
[46:28]
확실한 답변을 제공할 것입니다.
[46:30]
이 도구의 extract 기능을
[46:33]
어떻게 사용하는지에 대해서요.
[46:35]
문서의 정보를 바탕으로
[46:37]
extract 요청을 보내려면
[46:39]
파이어크롤 API 엔드포인트에
[46:41]
POST 요청을 보내면 된다고 하네요.
[46:44]
스크랩한 정보를 바탕으로
[46:46]
모든 것을 설명해주고 있습니다.
[46:49]
심지어 curl 명령어도 제공하고
[46:51]
응답 예시까지 보여주네요.
[46:53]
필요한 모든 정보를 제공받았습니다.
[46:55]
지금까지 N8N에서
[46:57]
MCP 서버와 클라이언트 사이드를 만드는
[47:00]
완벽한 가이드였습니다.
[47:03]
이 가이드가 도움이 되었길 바랍니다.
[47:05]
AI Foundations 커뮤니티에
[47:07]
아래 링크를 통해 참여하시면
[47:09]
AI와 자동화에 열정적인 분들과 함께
[47:11]
이런 것들을 매일 만들 수 있습니다.
[47:14]
다음 튜토리얼에서
[47:16]
여러분을 다시 만나길 기대합니다.
[47:18]
이런 상세한 콘텐츠가 마음에 드신다면
[47:20]
좋아요 버튼을 눌러주세요.
[47:22]
그리고 구독과 함께
[47:24]
알림 설정을 해두시면
[47:26]
새로운 교육 영상이 업로드될 때
[47:28]
알림을 받으실 수 있습니다.
[47:30]
다음 N8N 업데이트에서
[47:32]
다시 만나뵙겠습니다.