제로부터 20분 만에 첫 번째 AI 에이전트 만들기 (간단한 방법)

Income stream surfers 구독자 130,000명

요약

이 영상은 Windows 환경에서 Claude Code를 활용해 컨텍스트 엔지니어링 기반의 AI 에이전트를 단 20분 만에 만드는 과정을 안내합니다. NodeJS 설치부터 환경 변수 설정, Docker 및 Git, Playwright 연동, Flask 웹 애플리케이션 구성까지 차근차근 설명하며 실습합니다. 세 개의 서브 에이전트(리서처, 스크레이퍼, SEO 옵티마이저)로 구성된 SEO 에이전트를 설계하고, Playwright로 자동화된 테스트 및 Docker 컨테이너 배포까지 보여줍니다. 저코드(No-code) 도구 대신 직접 빌드하는 방식을 강조하며, GitHub 및 Vercel을 활용한 배포 아이디어도 제시합니다.

주요 키워드

Context Engineering Claude Code NodeJS Environment Variable Docker Playwright Flask Sub-agent SEO Agent Gina

하이라이트

💡 Windows에 Claude Code 설치 후 컨텍스트 엔지니어링 템플릿을 실행해 개발 환경을 준비합니다.
📁 mkdir, cd 명령과 함께 NodeJS 설치 및 환경 변수(Path) 등록으로 기본 폴더 구조를 설정합니다.
⚙️ nvm을 통해 @anthropic/claude-code와 Playwright MCP를 글로벌 설치하고, VS Code로 프로젝트 폴더를 엽니다.
📝 initial.md 파일에 SEO 에이전트 요구사항을 작성해 유저가 링크를 입력하면 키워드 리서치와 최적화를 수행할 구조를 정의합니다.
🔗 Git SCM과 Docker Desktop 설치를 통해 클론, 빌드, 컨테이너 실행 환경을 완성합니다.
🚀 Claude Code에 첫 프롬프트를 입력해 PRP(Project Requirements Plan)를 생성하고, 자동으로 파일을 생성하는 과정을 확인합니다.
🐳 Docker 컨테이너 빌드 중 발생하는 포트 충돌과 종속성 충돌을 자동으로 감지해 수정하는 과정을 실습합니다.
🧪 Playwright로 UI를 자동화 테스트해 웹 애플리케이션의 오류 로그(Docker, 브라우저)를 읽고 반복 버그 픽스를 수행합니다.
🌐 Flask 기반 웹앱을 GitHub 리포지토리에 푸시하고 Vercel에 연동해 간단한 SEO 에이전트 사이트로 배포하는 방안을 안내합니다.

용어 설명

Context Engineering

AI 모델에 특정 맥락을 제공해 원하는 동작을 유도하는 기법

Claude Code

Anthropic의 코드 기반 AI 에이전트 프레임워크

NodeJS

서버 사이드 자바스크립트를 실행하는 런타임

Environment Variable(환경 변수)

시스템 전역에서 접근 가능한 설정 값, API 키 등을 관리

nvm

Node 버전을 쉽게 전환·관리하는 Node Version Manager 도구

Playwright

Microsoft에서 만든 브라우저 자동화 테스트 프레임워크

Flask

Python 기반의 경량 웹 애플리케이션 프레임워크

Docker

애플리케이션과 종속성을 컨테이너로 묶어 일관된 실행 환경을 제공

SEO Agent

사용자가 입력한 링크 페이지를 분석하고 키워드 최적화를 수행하는 AI 에이전트

Gina

웹 스크래핑 API 서비스

Bright Data

프록시 기반 웹 스크래핑 및 데이터 수집 플랫폼

OpenRouter

다양한 언어 모델에 접근할 수 있는 API 라우터

이 영상의 전체 흐름을 소개하고, Windows에 Claude Code를 설치해 컨텍스트 엔지니어링 기반 AI 에이전트 구축을 시작하는 목적을 설명합니다.

[00:01] 컨텍스트 엔지니어링 템플릿을 사용해 누구나 AI 에이전트를 만들 수 있도록 하는 튜토리얼을 시작합니다. 클로드 코드가 윈도우에서 사용 가능해져 훨씬 쉬워졌다고 설명합니다.

[00:20] 컨텍스트 엔지니어링 템플릿을 열어야 한다고 설명하며, Cole의 템플릿을 기반으로 한 자신만의 템플릿을 사용한다고 소개합니다.

터미널에서 mkdir, cd 명령으로 프로젝트 폴더를 만들고, NodeJS 설치 후 환경 변수(Path)에 노드 경로를 등록해 명령어 실행 환경을 준비합니다.

[00:34] 새 폴더를 만들기 위해 터미널을 열고 mkdir 명령어를 사용하는 방법을 설명합니다. 코딩 경험이 없어도 따라할 수 있는 천천히 진행되는 튜토리얼임을 강조합니다.

nvm으로 @anthropic/claude-code와 Playwright MCP를 글로벌 설치하고, VS Code로 프로젝트 디렉터리를 열어 기본 템플릿을 확인합니다.

[01:15] 클로드 코드 설치를 위한 필수 요구사항으로 NodeJS가 필요하다고 설명하며, node -v 명령어로 버전을 확인하는 방법을 보여줍니다.

[01:35] 환경 변수 설정 방법을 윈도우 기준으로 설명합니다. environment 검색 후 path에 node 설치 경로를 추가하는 과정을 단계별로 안내합니다.

[02:22] npm install -g 명령어로 클로드 코드를 설치하고, Playwright MCP를 추가하는 단계로 진행합니다. 설치가 완료되면 code . 명령어로 비주얼 스튜디오 코드를 열 수 있다고 설명합니다.

[03:04] 컨텍스트 엔지니어링 템플릿을 사용해 initial.md 파일을 설정하는 과정을 실제로 보여줍니다. 이 파일에는 구축하고자 하는 프로젝트의 목표와 요구사항을 명시합니다.

initial.md에 SEO 에이전트 요구사항을 정의합니다. 플라스크 웹앱, Docker, OpenRouter 검색, 키워드 리서치, 경쟁사 기반 최적화를 문서화합니다.

[03:22] 문서화를 위해 Pydantic Open Router의 링크를 추가하고, API 키를 설정하며, 사용할 모델과 정보 위치를 구체적으로 명시합니다.

[03:52] 간단한 Flask 웹 애플리케이션을 Docker로 구축하는 SEO 에이전트를 만들기로 결정합니다. 사용자가 링크를 입력하면 해당 페이지의 SEO를 연구하는 기능을 구현합니다.

[04:16] SEO 에이전트의 구체적인 작동 방식을 설명합니다. Open Router 검색을 사용해 키워드를 찾고, 경쟁사 분석을 통해 SEO를 최적화하는 세 개의 별도 에이전트(연구자, 스크래퍼, SEO 최적화 도구)로 구성됩니다.

[05:09] 웹사이트 스크래핑을 위해 Jina를 사용하기로 결정하고, 실제로는 간단한 Jina 요청만으로도 충분함을 설명합니다.

리서처, 스크레이퍼, SEO 옵티마이저 세 개의 서브 에이전트로 역할을 분리하고, 홈페이지·대시보드 UI 설계 및 Gina(또는 Bright Data) 스크래핑 구성 방침을 정합니다.

[05:46] 복잡하지 않은 간단한 프로젝트를 만들기로 하고, Claude 코드로 돌아가서 지침을 따르기 시작합니다.

Git SCM과 Docker Desktop을 설치해 코드 클론, 컨테이너 빌드, 실행 준비를 마칩니다. 필요 시 Claude Code로 설치 명령을 자동 실행합니다.

[06:04] 프로젝트 진행을 위한 필수 도구들을 설명합니다. Git SCM과 Docker Desktop이 설치되어 있어야 하며, 이들을 직접 다운로드하거나 Claude 코드에게 설치를 요청할 수 있습니다.

[06:44] MCP 설치 확인 및 첫 번째 프롬프트 입력 과정을 설명하며, Docker가 포함된 설정을 확인한다.

Claude Code 콘솔에 초기 프롬프트를 입력해 PRP(Project Requirements Plan)를 생성합니다. 구체적인 디렉터리·파일 구조가 자동 생성됩니다.

[07:16] 윈도우에서 도구 사용 경험을 공유하고, 루니스케이프 게임 언급과 시청자와의 소통 경험을 이야기한다.

[07:34] AI 에이전트의 작업 과정을 설명하며, 시스템이 모든 내용을 먼저 읽고 이해하는 단계를 보여준다.

[07:56] PRP 생성 과정을 시작하고, 새로운 프로젝트에서 연구 단계를 진행하며 여러 서브 에이전트를 활용한다.

[08:50] 다중 서브 에이전트 시스템을 통해 동시에 연구를 수행하는 과정을 보여주며, 효율적인 작업 방식을 설명한다.

[09:08] 지나 API 키 갱신 방법을 설명하고, 웹 스크래핑 도구로서 Bright Data의 장점과 MCP 개선 사항을 소개한다.

[10:02] Bright Data의 지속적인 개선과 채널 후원에 대한 감사 인사. 설명란과 문서에 링크를 제공하며, Gina 대신 Bright Data MCP를 사용하여 동일한 작업을 수행할 수 있다고 설명합니다.

[10:30] 시스템이 코드 예제를 생성하기 시작하고 Claude Code가 당황하는 모습을 보여줍니다. Open Router 검색을 통해 100만 토큰 컨텍스트 창을 가진 Gemini 2.5와 GPT 4.1 모델을 찾았다고 설명합니다.

[11:05] 생성된 PRP가 매우 포괄적으로 보인다고 평가하며, 이것이 간단한 빌드가 될 것이라고 예상합니다. 지금까지 실제 코딩 없이 로우 코드, 노 코드 방식으로 진행하고 있다고 설명합니다.

/execute-PRP 명령으로 전체 프로젝트를 빌드하고, /compact 옵션을 시험해 요구사항 단순화 여부를 확인합니다.

[11:27] PRP를 실행하여 전체 프로젝트를 빌드하는 과정을 시작합니다. 원본 시스템 창시자가 /compact 실행을 권장했지만, 복잡하지 않으면 없이도 가능할 것이라고 설명합니다.

[12:00] Docker와 Playwright를 사용한 포괄적인 테스트 스위트 추가를 요청합니다. 데이터베이스 사용을 요청하지 않았다는 것을 깨달았지만, initial MD에서 MongoDB나 MySQL을 쉽게 추가할 수 있다고 설명합니다.

[12:34] Docker를 사용해 애플리케이션을 빌드하고 Playwright MCP로 작동을 확인하는 과정을 설명합니다. Docker 컨테이너의 개념을 간단히 설명하며, 의존성 충돌 문제가 발생했지만 Docker 사용의 장점으로 자동 해결이 가능하다고 강조합니다.

빌드된 Docker 컨테이너를 실행해 포트 충돌·종속성 충돌을 자동으로 감지, 수정하도록 AI 에이전트가 반복 빌드를 수행합니다.

[13:11] Docker 컨테이너 빌드 과정에서 포트 충돌과 오류가 발생했지만, AI 에이전트가 스스로 버그를 수정하며 계속 진행한다고 설명합니다.

[13:40] Docker 컨테이너가 재빌드되면서 로컬호스트에서 실제 결과를 확인할 수 있게 되었고, 예시로 남성용 다이어트 컬렉션을 테스트해보려고 합니다.

[14:08] 분석 오류가 발생했지만 시스템이 작동하기 시작했고, 이제 Playwright를 사용해서 자동 테스트를 진행할 계획입니다.

[14:27] 강사는 자신이 전혀 코딩하지 않았고 버그 수정도 하지 않았다고 강조하며, 단순히 복사-붙여넣기만으로 AI가 모든 것을 해결했다고 설명합니다.

[14:48] 404 에러와 500 내부 서버 오류가 발생했고, Docker 로그를 확인하여 문제를 파악하고 수정이 필요한 상황입니다.

Playwright MCP를 활용해 웹앱 UI를 테스트하며, 브라우저·Docker 로그를 읽고 자연어로 재버그 픽스 과정을 진행합니다.

[15:14] Docker 컨테이너가 변경사항마다 재빌드되는 과정을 설명하며, 자체 테스트를 기다리지 않고 직접 테스트하면서 /compact를 실행하고 Playwright로 버그 수정을 계속하겠다고 합니다.

[15:47] Claude Code의 토큰 제한에 대한 불만을 표현하며, 중단될 때마다 자연어 명령으로 계속 진행하는 방식을 설명합니다. 코딩 없이 자연어만으로 전체 프로젝트를 처리하는 노코드 접근법을 강조합니다.

[16:15] AI 에이전트가 자동으로 웹사이트에 사이트를 추가하고 버튼을 누르며, 발생하는 오류를 확인한 후 Docker 로그를 분석하여 자동으로 버그를 수정하는 과정을 보여줍니다.

[16:48] Flask 기반이고 GitHub이 설정되어 있어서 매우 쉽게 Vercel에 배포하여 원페이지 SEO 분석 에이전트 웹사이트를 만들 수 있다고 설명합니다.

[17:12] 에이전트가 페이지를 새로고침하고 컬렉션을 전송하여 대시보드를 표시하는 과정을 보여줍니다.

[17:41] 스크래퍼 에이전트에서 Gina API 인증 오류가 발생했지만 실제로는 작동한다는 것을 확인하고, Shopify에서 숨겨진 제목과 H1 헤딩을 정확히 감지하는 것을 보여줍니다.

Flask 앱을 GitHub 리포지토리에 푸시하고 Vercel에 연동해 배포하는 방법을 안내하며, 서브 에이전트 툴킷으로 추가 서비스 제작 아이디어를 제시합니다.

[18:55] 아주 적은 노력과 코딩으로 첫 번째 AI 에이전트 시스템을 완성했다고 설명하며, GitHub 저장소를 만들고 Vercel에 배포하여 AI 에이전트 도구 모음을 만들 수 있다고 안내합니다.

[19:46] Gemini 2.5 Pro와 GPT4.1 Mini를 사용하여 웹 검색과 SERP 스크래핑을 수행하는 SEO agent.app의 활동을 보여줍니다.

노코드 도구 대신 직접 빌드하는 이유를 강조하고, 시청자에게 구독과 다음 콘텐츠 예고로 영상을 마무리합니다.

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

[00:01] 좋아요, 이 내용을 문서로 정리해서

[00:03] 누구나 컨텍스트 엔지니어링을 활용해

[00:06] 무언가를 만들 수 있도록 공유하려고 합니다.

[00:09] 컨텍스트 엔지니어링을 사용해서 말이죠.

[00:13] 이제 클로드 코드가 윈도우에서 사용 가능해졌으니

[00:14] 훨씬 쉬워졌습니다.

[00:17] 여러분과 함께 이 과정을

[00:18] 차근차근 진행해보겠습니다.

[00:20] 첫 번째 단계는 컨텍스트 엔지니어링

[00:22] 템플릿을 여는 것입니다.

[00:24] 이것은 Cole의 템플릿을 기반으로 한

[00:27] 제 템플릿인데, 원래는 Ram Raasmus의

[00:30] 템플릿을 기반으로 했습니다.

[00:32] 리그 오브 레전드 때문에 거의 Ramis라고 할 뻔했네요.

[00:34] 이제 이것을 준비했으면, 다음 단계는

[00:36] 컴퓨터에 새 폴더를 만드는 것입니다.

[00:38] 터미널을 열고 함께

[00:39] 해보겠습니다.

[00:41] 천천히 진행할 거예요.

[00:42] 누구나 따라할 수 있는 튜토리얼이 될 겁니다.

[00:46] 코딩 경험이 있든 없든

[00:48] 컨텍스트 엔지니어링을 할 수 있을 거예요.

[00:50] 그럼 mkdir... 이것은 폴더를 만드는 명령어죠.

[00:55] mkdir 뒤에 입력하는 이름이

[00:56] 폴더 이름이 됩니다.

[00:59] 그 다음에는 여기처럼 cd 명령어로

[01:02] 폴더 안으로 들어가는 거죠.

[01:05] cd 폴더이름 이라고 하면 됩니다.

[01:08] 그 다음엔 이 명령어를 직접 실행하겠습니다.

[01:11] AI한테 시키지 않을 거예요.

[01:13] 그러면 사람들이 비웃거든요.

[01:15] 클로드 코드를 설치합니다. 쉽죠.

[01:17] 이제 이것을 열어봅시다.

[01:19] 당연히 이런 것들이 필요합니다.

[01:22] NodeJS가 필요해요.

[01:23] node -v 라고 입력하면

[01:26] 저는 node 22.12 버전이 있는 걸 볼 수 있어요.

[01:29] node가 없으면 구글에서 node download를 검색하세요.

[01:32] 꼭 다운로드하시고,

[01:34] 또한 환경 변수라는 것도

[01:35] 알아두셔야 합니다.

[01:37] 환경 변수는 윈도우에서

[01:40] environment라고 입력하고

[01:42] 이 버튼을 클릭한 다음

[01:43] 환경 변수를 누르면 됩니다.

[01:45] path를 더블클릭하고

[01:47] 컴퓨터에서 node가 설치된 위치를

[01:50] 찾으면 됩니다.

[01:54] 위치를 열고

[01:55] 보통 우클릭해서 텍스트로 복사할 수 있어요.

[02:00] 그리고 새로 만들기를 누르고

[02:04] 거기에 node 링크를 써넣으면 됩니다.

[02:06] 여기 보시면 있다는 뜻은

[02:09] node 명령어를 실행할 수 있다는 뜻이죠.

[02:13] 그래서 node -v를 입력했을 때

[02:16] node 버전을 알려주는 거예요.

[02:18] 더 도움이 필요하시면

[02:20] ChatGPT에게 문의해보세요.

[02:22] 저는 이미 설정되어 있으니

[02:25] npm install -g으로

[02:27] 클로드 코드를 설치하면 됩니다.

[02:29] 이제 설치가 완료되었습니다. 정말 간단하죠.

[02:31] 다음 단계로 넘어가기 전에

[02:35] Playwright MCP를 추가해보겠습니다.

[02:38] 모든 명령어가 여기 있으니

[02:41] 이 단계를 진행해보겠습니다.

[02:43] 조금 앞서서 진행할게요.

[02:46] 엔터를 누르면 됩니다.

[02:48] 클로드 코드가 설치되었습니다.

[02:50] 클로드 코드에게 비주얼 스튜디오 코드를

[02:52] 설정하라고 해보세요.

[02:54] code . 라고 입력하면

[02:56] 비주얼 스튜디오 코드가 열립니다.

[02:58] 저는 이미 설정되어 있지만

[03:00] 만약 없으시다면 ChatGPT나

[03:01] 클로드 코드에게 설정 도움을 요청하거나

[03:04] 음

[03:07] 컨텍스트 엔지니어링 템플릿입니다. 이제

[03:09] initial.md 작업을

[03:11] 여러분 앞에서 실제로 해보겠습니다.

[03:13] 맞죠? 그러면 initial.md를 해보겠습니다.

[03:16] 이것을 붙여넣겠습니다. 여기가

[03:19] 우리가 만들고 싶은 것을 넣는 곳입니다. 자

[03:22] 문서화를 위해서는 그냥

[03:24] 사용하고자 하는

[03:25] 문서화 자료의 링크를

[03:27] 가져오기만 하면 됩니다. 저는 Pydantic Open

[03:28] Router를 사용하겠습니다. 여기에 API 키를 넣었는데

[03:32] 알아두세요. 그래야

[03:34] 사용할 수 있고 저는

[03:35] 걱정하지 않아도 됩니다. 또한

[03:37] 어떤 모델을 사용할지 알려주고 어디서

[03:40] 그에 대한 정보를 찾을 수 있는지 구체적으로 알려줬습니다.

[03:42] 여기서 예시를 제거하겠습니다.

[03:44] 필요없습니다. 그리고 아마

[03:45] 이것들도 제거하겠습니다.

[03:49] 제가 구축하려는 것은

[03:51] 아주 간단한 것입니다.

[03:52] 그래서 음

[03:54] Flask

[03:57] 음 웹 애플리케이션을

[04:00] Docker로 구축하겠습니다. 음 SEO

[04:04] 에이전트라고 하겠습니다. 사용자가 링크를 넣으면

[04:10] 그들의 SEO에 대해 연구합니다.

[04:16] 이 에이전트는 Open Router 검색을 사용해서

[04:22] 제공된 페이지 주변의 키워드를 검색해야 합니다.

[04:26] 그런 다음 이미 순위를 매기고 있는

[04:31] 경쟁사들을 기반으로 SEO를 최적화해야 합니다.

[04:36] 이미 순위가 매겨진 상태입니다.

[04:41] 연구자,

[04:45] 스크래퍼,

[04:48] 연구자,

[04:50] 그리고

[04:52] SEO 최적화 도구는 세 개의 별도

[04:55] 에이전트여야 합니다. 그리고 홈페이지와 대시보드가 있어야 하는데

[04:59] 완전히

[05:04] 완전히 기능적이어야 합니다.

[05:06] 웹사이트를 스크래핑하기 위해 Jina를 사용할 수 있습니다.

[05:09] 그래서 여러분은 음 만약

[05:12] 제가 이미 여기서 Jina를 사용하고 있기 때문에

[05:17] Jina를 추가하겠습니다. 실제로는

[05:19] 필요 없습니다. 하지만 공정하게 말하면

[05:22] 정말 필요 없습니다.

[05:24] 실제로 필요 없습니다.

[05:27] 여기 문서로 돌아가면

[05:28] 왜 필요 없는지 보여드리겠습니다.

[05:30] Jina 요청을 하기 위해 실제로 필요한 것은 이것뿐입니다.

[05:32] 그래서 여기에도 넣겠습니다.

[05:36] 이것도 추가하겠습니다.

[05:39] 일반적인 킬을 하겠습니다.

[05:42] 됐습니다. 음, 네, 그게 전부입니다.

[05:46] 간단한 것을 만들어보겠습니다.

[05:47] 여기서 너무 복잡한 것은

[05:48] 만들고 싶지 않기 때문입니다. 그래서

[05:51] 여기서 거의 준비가 끝났습니다.

[05:53] 여기 있는 Claude 코드로 돌아가겠습니다.

[05:56] 이것을 지우고 지침을 따르겠습니다.

[05:58] 다시 말하지만, 여기서 실제로 코딩을 하는 것은 아니지만

[06:02] 괜찮습니다. 그래서 언급할 두 가지 빠른 것들이 있습니다.

[06:04] Git SCM이 필요합니다. 음, 분명히

[06:06] 제가 git clone을 할 때 작동하는 이유는

[06:09] Git Bash가 설치되어 있기 때문입니다.

[06:11] 음, 그리고 Docker Desktop도 설치되어 있어야 합니다.

[06:15] 네, 그냥 이 애플리케이션을 설치하세요.

[06:17] 그냥 문자 그대로 구글에 가서

[06:20] Docker 다운로드를 입력하세요.

[06:22] 어디서든 다운로드하세요.

[06:24] 여기서 예를 들어 또는 그냥

[06:26] Claude 코드에게 Docker를 다운로드하고 설치하라고

[06:28] 물어볼 수 있습니다.

[06:29] 그런 다음 Claude 코드가 자체 Docker

[06:32] 명령을 실행할 수 있도록 하세요.

[06:35] 네, 이제 여기서 다른 모든 단계를 완료했습니다.

[06:37] 초기 복제를 했고, 문서 목록을 얻었고,

[06:39] 요구사항 목록을 얻었고 작성했습니다.

[06:44] 클로드 어쩌고 저쩌고 위험하게 권한 건너뛰기

[06:46] 맞죠. 그냥 그렇게 해봅시다.

[06:49] 우리는 이미 MCP를 설치했습니다.

[06:53] 그래서 /mcp를 입력하면 playrs가 설치된 걸 볼 수 있어야 합니다.

[06:56] 완벽해요. 이제 첫 번째 프롬프트를 입력해보겠습니다.

[06:58] 여기까지입니다.

[07:03] 여기까지 볼 수 있고요.

[07:05] 여기에 docker가 언급되어 있습니다.

[07:08] 여기서 엔터를 누르겠습니다.

[07:14] 그러면 모든 것을 읽는 것을 볼 수 있을 겁니다.

[07:16] 윈도우에서 이걸 사용할 수 있다니 정말 좋네요.

[07:18] 심지어 확대도 할 수 있어요.

[07:19] 보세요. Ctrl+F는 할 수 있나요? 아니요.

[07:22] 아직 컨트롤 F 옵션은 없네요.

[07:24] 루니스케이프에서 경험치는 계속 올리고 있는지 확인해야겠어요.

[07:26] 경험치 낭비는 안 되죠.

[07:28] 루니스케이프에서 갑자기 메시지를 보내서

[07:29] 제 영상들에 대해 감사하다고 한 분에게

[07:31] 인사드립니다. 정말 멋진 일이었어요.

[07:34] 좋아요, 이게 과정의 일부입니다.

[07:36] 기본적으로 모든 것을 먼저 읽습니다.

[07:38] 이해했는지 확인하는 거죠, 맞나요?

[07:40] 이제 /generate-P를 입력합니다.

[07:44] initial MD. 보시다시피 이게 13단계입니다.

[07:47] 엔터를 누르세요. 아, 잠깐. 없네요.

[07:51] 아, 아니요. 죄송합니다. 맞았어요.

[07:53] initial MD. 맞습니다.

[07:56] 이제 PRP를 생성하는 거죠, 맞나요?

[07:59] 어떻게 되는지 보겠습니다.

[08:01] 여러분께 빠르게 보여드리겠습니다.

[08:03] 함께 모든 것을 해보겠습니다.

[08:05] research에서 아주 곧 많은 파일들이 추가되는 걸 볼 수 있을 겁니다.

[08:08] 먼저 initial MD를 읽도록 하겠습니다.

[08:11] 다른 일을 하기 전의 마지막 단계입니다.

[08:12] 빠르게 이걸 보겠습니다.

[08:14] 건너뛰기 코드베이스 분석을 읽어보세요.

[08:16] 이건 새로운 프로젝트입니다.

[08:19] 그냥 주의하세요.

[08:22] 확실히 추가하겠습니다.

[08:26] 좋아요. 이제 연구를 하고 있습니다.

[08:29] 엔터를 누르겠습니다. 아, 이스케이프요, 죄송합니다.

[08:31] 연구 속도를 높이기 위해 여러 서브 에이전트를 생성해 달라고 말하겠습니다.

[08:33] 그런 다음 빠르게 이걸 편집하겠습니다.

[08:36] 음

[08:39] 말할 때 이스케이프를 누르세요.

[08:43] 결국 이 단계가 필요 없도록 만들겠습니다.

[08:45] 하지만 지금은 괜찮습니다.

[08:50] 좋아요. 이제 동시에 모든 연구를 수행하기 위해

[08:52] 여러 서브 에이전트를 생성하는 걸 볼 수 있습니다.

[08:54] 기본적으로 여기에 들어오는 것들을 보기 시작해야 합니다.

[08:57] 여기에 들어오는 것들 말이에요.

[08:59] 여기에 들어오는 것들을 보기 시작해야 합니다.

[09:02] 여기에 들어오는 것들 말이에요.

[09:05] 좋아요, 그 지나 키는 이제 다 썼네요.

[09:08] 여러분께 작은 팁을 하나 보여드리겠습니다.

[09:11] 새 시크릿 창을 열고

[09:13] gina.ai에 가서, 모든 API를 승인하고

[09:15] 아래로 스크롤하기만 하면 됩니다.

[09:19] 그리고 여기서 복사를 누른 다음

[09:21] 잘못된 지나 API 키라고 말하세요.

[09:24] 죄송합니다, 이걸 사용해보세요.

[09:27] 그리고 새로운 키를 주면 됩니다.

[09:29] 이제 유일한 문제는 당연히

[09:31] 프록시나 그런 것들로부터 보호받지 못한다는 겁니다.

[09:33] 그래서 제가 웹 스크래핑을 많이 하는데

[09:35] 결국 누군가가 저에게 화를 낼 것 같아요.

[09:37] 그래서 만약 이걸 해결할 방법이 궁금하시다면

[09:40] 확실히 Bright Data를 확인해보세요.

[09:42] 기본적으로 지나와 같은 일을 합니다.

[09:44] 지나가 설정하기 조금 더 쉽긴 하지만

[09:46] 멋진 점은 Bright Data가

[09:48] 공식 MCP를 가지고 있다는 것입니다.

[09:50] 그들이 꽤 자주 개선하고 있어요.

[09:53] 5일 전, 2주 전, 지난 주, 지난 주를 볼 수 있습니다.

[09:56] 지난 주, 지난 주.

[09:58] 그래서 정말로 이걸 개선하고 있어요.

[10:00] 정말로 개선하고 있어요.

[10:02] 거의 매주 더 나아지고 있어요.

[10:05] 그리고 네, 그들이 채널을 후원하고 있어요.

[10:07] 정말 감사합니다.

[10:09] 설명란에 링크가 있을 거예요.

[10:10] 문서에도 Bright Data를 사용해볼 수 있는 링크가 있어요.

[10:13] 여러분이 해야 할 일은 그냥

[10:15] Bright Data MCP를 추가하고

[10:17] 여러분의 IP를 사용하는 Gina 대신에

[10:22] Bright Data MCP를 사용해서

[10:25] 똑같은 작업을 하라고 말하는 거죠.

[10:28] 정확히 똑같은 일을 할 거예요.

[10:30] 이런 결과를 얻을 수 있어요.

[10:33] 코드 예제를 받기 시작하죠.

[10:35] 이런저런 결과들을 얻어요.

[10:37] 그리고 Claude Code는 당연히

[10:39] 늘 그렇듯이 당황하기 시작합니다.

[10:41] 보시다시피 구체적인 연구를 하고 있어요.

[10:43] Open Router 검색 같은 것 말이에요.

[10:46] 제가 검색하라고 했으니까요.

[10:49] 구체적으로 찾아냈어요.

[10:52] Gemini 2.5와 GPT 4.1을 찾았어요.

[10:55] 제가 요청한 두 모델이에요.

[10:58] 100만 토큰 컨텍스트 창을 가지고 있거든요.

[10:59] 정말 멋져 보이네요.

[11:01] 이게 생성된 PRP예요.

[11:05] 솔직히 말해서 정말 포괄적으로 보여요.

[11:08] 정말 간단한 빌드가 될 것 같아요.

[11:10] 이건 로우 코드, 노 코드 비디오로 되어 있어요.

[11:12] 지금까지 실제로 코딩은 하지 않았어요.

[11:15] 그리고 지금도 계속 그렇게 할 거예요.

[11:17] 지금까지 실제로 코딩은 하지 않았어요.

[11:19] 지금도 계속 그렇게 할 거예요.

[11:23] 바로 지금 말이에요.

[11:25] 이제 할 일은

[11:27] PRP를 실행하는 거예요.

[11:30] 여기서 이걸 복사하고

[11:33] 엔터를 누르면 됩니다.

[11:36] 이제 전체 프로젝트가 빌드될 거예요.

[11:40] 원본 시스템의 창시자가 말하길

[11:43] /compact을 실행하는 것이 좋다고 했어요.

[11:48] 하지만 저는 /compact 없이 실험해보고 있어요.

[11:50] 너무 복잡하지 않다면

[11:52] PRP도 만들 수 있을 거예요.

[11:55] 이 지점에 도달했는데

[11:58] 포괄적인 테스트 스위트를 추가하라고 나와 있어요.

[12:00] 제가 원하는 것은 Docker와 Playwright를 사용해서

[12:03] 애플리케이션을 수동으로 테스트하는 거예요.

[12:07] 작동하는지 보여주기 위해서요.

[12:12] 지금 깨달았는데 실제로 데이터베이스를 사용하라고 요청하지 않았어요.

[12:15] 그래서 데이터베이스를 사용하지 않았을 거예요.

[12:17] 큰 문제는 아니에요.

[12:19] 아주 쉽게 추가할 수 있거든요.

[12:20] MongoDB나 다른 걸 추가하면 되죠.

[12:22] 처음 부분에서 말이에요.

[12:25] initial MD에서요.

[12:27] MySQL을 추가할 수도 있어요.

[12:29] 방법은 수백만 가지나 있어요.

[12:31] 우선 Docker를 사용해서

[12:34] 애플리케이션을 빌드할 거예요.

[12:37] 그리고 Playwright MCP를 사용해서

[12:38] 실제로 작동하는지 확인할 거예요.

[12:41] 이제 Docker 컨테이너를 빌드하는데

[12:44] 이게 무슨 뜻인지 모르시겠다면

[12:45] 기본적으로 Docker 안에서 애플리케이션을 실행하는 거예요.

[12:48] 컴퓨터 시스템에서 완전히 실행되는 대신에

[12:51] 시스템의 Docker에서 실행되는 거죠.

[12:54] 벌써 문제가 생겼네요.

[12:57] 그 문제를 해결할 거예요.

[12:58] 의존성 충돌이 있어요.

[13:00] requirements 파일을 수정하겠습니다.

[13:02] Docker를 사용하는 것의 장점이에요.

[13:04] 이런 걸 사용하면

[13:05] 복사 붙여넣기를 할 필요가 없어요.

[13:07] 이런 걸 할 필요가 없어요.

[13:09] 제가 아무것도 할 필요가 없어요.

[13:11] 그런 건 안 해도 돼요. 버그 수정을 계속해서

[13:13] AI 에이전트가 완성될 때까지 진행하면 됩니다.

[13:18] 좋아요.

[13:20] 새로운 Docker 컨테이너가

[13:22] 곧 생성될 것 같은데요.

[13:26] 포트 5000이 이미 사용 중이네요.

[13:28] 당연하죠.

[13:30] 빈 포트 찾기 힘들 거예요.

[13:33] 백만 개 정도 프로젝트가

[13:34] 돌고 있거든요. 이제 여기서

[13:37] 시작할 거예요. 자, Docker가 실행됩니다.

[13:40] 즉시 중단되었지만

[13:42] 괜찮아요. 계속 스스로

[13:43] 수정할 거예요.

[13:45] 좋아요, 이제 Docker 컨테이너를

[13:46] 다시 빌드했네요. 이미 재시작했지만

[13:48] 스스로 결정해서 진행했어요.

[13:50] 로컬호스트를 열어보면

[13:52] 실제로 뭔가 있는 걸 볼 수 있어요.

[13:54] 예시로 두 명의 남성용

[13:55] 다이어트/컬렉션/슈츠를

[13:57] 사용해볼게요. 아직 작동하는지

[13:59] 확실하지 않아요. 실제로 시도해보지

[14:00] 않았거든요. 일단 봅시다.

[14:03] 분석 오류가 나오네요. 이제

[14:05] 시작할 작업이 있어요.

[14:08] 좋아요, 작동하네요. 이제 Playwright로

[14:11] 테스트를 시작해주세요.

[14:15] 물론 우리가 직접 할 수도 있어요.

[14:17] 우클릭해서 검사, 콘솔을 확인해서

[14:20] 왜 작동하지 않는지 볼 수 있죠. 또는 Playwright를

[14:23] 사용해서 대신 처리할 수도 있어요.

[14:25] 이 예시를 사용해봅시다.

[14:27] 여러분, 기억하세요. 저는 코딩을

[14:30] 전혀 하지 않았어요. 버그 수정도

[14:32] 하지 않았죠. 그냥 실행하도록 놔두고

[14:35] 모든 걸 스스로 해결하게 했어요.

[14:36] 기본적으로 복사-붙여넣기만

[14:38] 할 수 있으면 돼요. 지금 컴팩트가

[14:40] 접근하고 있는데, 괜찮아요.

[14:43] 큰 문제는 아니에요.

[14:46] 봅시다. 여기서도 오류가 발생했네요.

[14:48] 오류가 있어요. 확인해보겠습니다.

[14:50] 404 찾을 수 없음. 500 내부 서버 오류.

[14:54] Docker 로그를 확인해보겠습니다.

[14:56] 그것도 할 수 있어요.

[14:57] Docker 로그가 나왔네요.

[15:00] 여기 오류가 있는 걸 볼 수 있어요.

[15:02] 오류를 수정해야 해요.

[15:07] 흥미롭네요. 아마도 그게

[15:08] 유일한 수정사항일 것 같아요.

[15:10] 잠시 후에 /compact가

[15:12] 실행될 거예요. 괜찮아요.

[15:14] 이제 Docker 컨테이너를 다시 빌드해요.

[15:16] 변경사항이 있을 때마다

[15:17] Docker 컨테이너를 다시 빌드하죠.

[15:20] 자체 테스트를 기다리고 싶지 않아서

[15:22] 스스로 테스트하거나 컴팩트하는 동안

[15:26] 제가 테스트해볼게요. 여기서

[15:29] /compact를 실행하고

[15:31] Playwright를 사용해서 계속 버그 수정을

[15:35] 진행하겠습니다. 기다리고 싶지 않아서

[15:38] 이렇게 해보겠습니다.

[15:39] 시도해봅시다.

[15:41] 또 다른 오류가 있네요.

[15:43] 여기서 슬래시 컴팩트가

[15:45] 실행되는 걸 볼 수 있어요.

[15:47] Claude Code에서 가장 짜증나는 점이에요.

[15:49] 토큰을 백만 개로 늘려주기만 하면

[15:52] 정말 좋을 텐데요. 중단되면

[15:55] Escape를 누르고 그냥

[15:56] Playwright로 계속 테스트하세요

[15:58] 같은 말을 해요. 여기서 오류를

[16:01] 알려줄 수도 있죠? 하지만

[16:03] 노코드, 로우코드 튜토리얼을

[16:05] 만들려고 하니까 자연어를

[16:07] 사용해서 전체 프로젝트를 처리하려고

[16:10] 해요. 오류를 복사-붙여넣기도

[16:13] 하지 않고 말이에요. 다시 여기로

[16:15] 이 사이트를 사용하겠다고 말하겠습니다.

[16:19] 그러면 자동으로 웹사이트에 추가해줍니다.

[16:21] 그리고 버튼을 눌러줍니다.

[16:23] 그러면 에러를 확인하게 됩니다.

[16:26] 그 다음 Docker 로그와 브라우저 로그를 확인합니다.

[16:29] 브라우저 로그는 없습니다.

[16:31] 여기 있습니다. Docker 로그를 읽고 있습니다.

[16:34] 제가 말씀드린 것처럼, 여러분도 직접 할 수 있습니다.

[16:36] Docker 컨테이너를 클릭하고

[16:37] 이 로그들을 복사하면 됩니다.

[16:40] 하지만 지금은 자동으로 버그 수정을 계속합니다.

[16:42] 그리고 우리는 뭔가 완성에 매우 가까워졌습니다.

[16:45] AI 에이전트가 이 프로세스를 대신 해줄 수 있는 단계까지 왔습니다.

[16:48] 이제 멋진 점은 Flask를 사용하고 있고

[16:50] GitHub이 설정되어 있기 때문입니다.

[16:53] 이 비디오에서 할지 모르겠지만

[16:55] GitHub에 푸시하고

[16:57] Vercel로 가져와서

[17:00] 원페이지 SEO 분석 에이전트

[17:02] 웹사이트를 만들 수 있습니다.

[17:03] 다시 말하지만, 계속 실행됩니다.

[17:06] 계속 테스트를 진행합니다.

[17:08] 이제 실행되고 있다는 것을 알고 있습니다.

[17:12] 같은 작업을 수행할 것입니다.

[17:13] 이번에는 이 페이지를 새로고침할 것입니다.

[17:16] URL로 이동합니다.

[17:17] 여기 있습니다.

[17:19] 그러면 제가 작업하고 있는 컬렉션을 다시 전송할 것입니다.

[17:22] 보시다시피요.

[17:25] 그리고 클릭할 것입니다.

[17:27] 그러면 실제로 대시보드를 보게 됩니다.

[17:29] 꽤 멋지네요.

[17:31] 이런 게 있는 줄도 몰랐습니다.

[17:33] 자격 증명이 없습니다.

[17:36] 괜찮습니다.

[17:41] 여기서 볼 수 있듯이 스크래퍼 에이전트에서 오류가 있습니다.

[17:43] Gina API에서 인증 오류가 있습니다.

[17:45] API 구성을 확인해보겠습니다.

[17:48] Gina API 키가 있습니다.

[17:49] 아마도 빠진 것은 bearer 토큰이

[17:51] 호출되지 않는 것 같습니다.

[17:55] 확인해보겠습니다.

[17:58] 오, 실제로 작동합니다.

[18:01] 미쳤네요.

[18:02] 모르실 수도 있지만, H1이 있습니다.

[18:06] 좀 혼란스럽습니다.

[18:08] Shopify에서는 때때로

[18:09] 실제로 페이지 제목이 없는 것처럼 보입니다.

[18:12] 그 이유는 숨겨져 있기 때문입니다.

[18:14] 살펴보겠습니다.

[18:16] 네, 실제로 제목이 없습니다.

[18:19] 아, 제목이 있네요.

[18:21] 하지만 제목이 숨겨져 있습니다.

[18:25] 흥미롭게도 감지한 것은

[18:27] 제목이 실제로 숨겨져 있다는 것입니다.

[18:29] 페이지 제목 누락, H1 헤딩 누락을 볼 수 있습니다.

[18:30] 이것은 정확합니다.

[18:33] 모르실 수도 있지만 Shopify에서는

[18:35] 많은 사람들이 제목을 숨기고

[18:37] 이것도 숨깁니다.

[18:39] 아마도 SEO에는 최선이 아닐 것입니다.

[18:42] 솔직히 말해서요.

[18:45] 그리고 이것이 H1 제목인지 확신하지 못합니다.

[18:48] 제 생각에는 이것은 H2 제목입니다.

[18:50] 하지만 100% 확실하지는 않습니다.

[18:52] 그것에 대해서요.

[18:54] 보시다시피 아주 적은 노력으로

[18:55] 아주 적은 코딩으로

[18:58] 우리는 첫 번째 AI 에이전트 시스템을 만들었습니다.

[19:01] 제가 전에 말했듯이, 이것은 Flask 기반이고

[19:05] GitHub이 설정되어 있기 때문에

[19:07] 말 그대로 해야 할 일은

[19:10] 실제로 이것을 추가하겠습니다.

[19:12] 새로운 GitHub 저장소를 만들고

[19:16] 이 코드를 그 GitHub 저장소에 푸시하고

[19:20] 그 GitHub 저장소를 Vercel에 연결하면 됩니다.

[19:25] 완료입니다. 도메인을 추가하세요.

[19:29] 그러면 말 그대로 이런 식으로

[19:32] AI 에이전트 도구 모음을 만들 수 있습니다.

[19:36] 매우 빠르고 쉽습니다.

[19:39] 그리고 그냥 출시하면 됩니다.

[19:42] 보시다시피, 이것은 약간의 사용량이 있습니다.

[19:44] 여기서 활동을 확인해보겠습니다.

[19:46] Gemini 2.5 Pro 332입니다.

[19:51] 이것이 현재 사용 중인 것입니다.

[19:53] 도구 호출입니다. 바로 여기에서

[19:56] 웹 검색을 사용하고 있습니다.

[19:58] 이것은 정말 멋집니다.

[20:00] 실제로 여기에 SEO agent.app이라고 나와 있는 것을 볼 수 있습니다.

[20:03] 이것이 바로 이것의 이름입니다.

[20:06] 이것은 정말 멋집니다.

[20:07] 지금 하고 있는 일을 볼 수 있습니다.

[20:12] 2.5 Pro와 GPT4.1 Mini를 사용해서

[20:13] SERP를 스크래핑하고 있습니다.

[20:15] 여전히 몇 가지 사항이 있습니다.

[20:17] 여전히 수정해야 할 오류가 있습니다.

[20:21] 하지만 우리가 원했던 것을 정확히 수행할 수 있는 에이전트를 만들었습니다.

[20:24] 이것이 에이전트에 대한 제 소개입니다.

[20:25] 여러분이 본 다른 비디오와는 다릅니다.

[20:28] 노코드 도구를 좋아하지 않습니다.

[20:31] 그 이유는 서비스를 판매하려고 할 때

[20:32] 엄청난 돈을 지불해야 하기 때문입니다.

[20:34] 그래서 이런 것들을 직접 배우는 것이 훨씬 좋습니다.

[20:36] 여기서 비디오를 마무리하겠습니다.

[20:38] 30분 정도, 45분 정도 걸려서

[20:39] 여러분이 볼 수 있는 이런 MVP를 만들었습니다.

[20:42] 여기서 볼 수 있듯이요.

[20:45] 이 다른 모든 것들도 매우 쉽게 추가할 수 있습니다.

[20:47] 시청해주셔서 정말 감사합니다.

[20:49] 비디오 끝까지 시청하셨다면

[20:51] 정말 대단하신 분이고

[20:52] 더 많은 콘텐츠로

[20:52] 곧 다시 만나겠습니다.

[20:54] 안녕히 계세요.

[20:56]