Cursor AI 에이전트로 웹사이트를 자동화했습니다

Creator Magic 구독자 104,000명

요약

이 영상에서는 Cursor AI 에이전트와 Zapier를 활용해 자연어 명령만으로 웹사이트를 생성·배포하고, AI 에이전트가 코드를 작성해 GitHub Pages에 자동 업데이트하는 과정을 보여줍니다. 매일 자정마다 새로운 ‘vibe square’를 추가·합치는 Zap을 구성해 코드 작성, 풀 리퀘스트 생성·머지를 완전 자동화하며, 커뮤니티 멤버의 댓글을 곧바로 애니메이션으로 변환해 웹페이지에 반영하는 사례를 시연합니다. 이 과정은 API 키 연결, Git 리포지토리 초기화, Zap 구성, AI 에이전트 운영, 풀 리퀘스트 자동 머지, 배포에 이르기까지 전 과정을 100% 무인으로 처리합니다.

주요 키워드

Zapier Cursor AI Natural Language Prompt GitHub Pages AI 에이전트 API 키 Pull Request Branch 자동화 워크플로 AI Orchestration

하이라이트

Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954
Warning: htmlspecialchars() expects parameter 1 to be string, array given in /var/www/youtubetranscribeapi/public/detail.php on line 954

용어 설명

AI 에이전트

사용자의 지시를 받아 자동으로 작업(코드 생성·커밋 등)을 수행하는 인공지능 프로그램

Natural Language Prompt(자연어 프롬프트)

사람이 쓰는 문장으로 AI에게 작업 지시를 내리는 방식

Zapier

다양한 앱과 서비스(API)를 연결해 자동화 워크플로를 만드는 플랫폼

Cursor AI

코드 작성·배포를 자동화하는 AI 에이전트 서비스

GitHub Pages

GitHub 리포지토리의 콘텐츠를 정적 웹사이트로 호스팅하는 기능

API 키

서비스 간 인증을 위해 발급받는 고유 문자열 토큰

Pull Request

깃 리포지토리에서 브랜치를 병합하기 전 변경 사항을 리뷰·승인 요청하는 기능

Branch(브랜치)

깃 버전 관리에서 독립적으로 변경을 기록·테스트할 수 있는 분기

Mike가 자연어 프롬프트 하나로 HTML 인덱스와 CSS 스타일 시트를 만드는 과정을 시연합니다. 몇 초 만에 AI 에이전트가 코드를 작성하고 ‘vibe coded’ 페이지를 생성하는 모습을 확인합니다.

[00:00] 마이크가 스스로 코딩하는 웹사이트를 소개하며, 자연어 명령으로 디자인된 네모칸들이 AI 에이전트에 의해 자동으로 코드화되고 배포되는 시스템을 설명합니다.

[00:29] Cursor AI를 사용하여 간단한 프롬프트로 HTML과 CSS를 생성하는 과정을 보여주며, 커스터마이징 가능한 픽셀 기반의 바이브 코딩 페이지를 몇 초 만에 완성합니다.

Cursor가 생성한 리포지토리를 Creator Magic 조직에 초기화한 뒤 GitHub Pages에서 main 브랜치로 자동 배포하도록 설정합니다. 배포 상태가 녹색으로 전환되면 라이브 사이트가 활성화됩니다.

[01:08] GitHub 저장소를 초기화하고 GitHub Pages를 통해 웹사이트를 배포하는 과정을 진행하며, 실시간으로 사이트가 라이브되는 모습을 확인합니다.

Zapier에서 새 Zap을 만들어 스케줄 트리거(매일 자정)로 Cursor 에이전트를 실행합니다. Trigger-Action 흐름 설정, API 키 연결 과정을 거쳐 첫 번째 Zap을 완성합니다.

[01:54] Zapier에서 새로운 Zap을 생성하고 Cursor AI 에이전트를 통합하는 설정을 시작하며, 매일 자정에 실행되는 자동화 트리거를 구성합니다.

‘수술용 AI 웹 개발자’ 역할을 부여하고, 새로운 vibe square 추가를 위한 상세 프롬프트를 작성합니다. 리포지토리 URL과 브랜치, AI 모델 선택 항목을 입력해 Agent 요청을 보냅니다.

[02:49] AI 웹 개발자로서 협업 프로젝트에 바이브 스퀘어를 추가하는 작업을 설명합니다. 인덱스와 바이브 그리드, CSS 업데이트에 대해 언급하며 사용자 이름과 바이브 설명을 매핑할 계획을 설명합니다.

[03:07] 구체적인 디자인 예시로 어두운 보라색 배경에 빛나고 맥동하는 흰색 원을 언급합니다. 저장소 URL 설정과 메인 브랜치 작업에 대해 설명하며, AI 모델 선택 옵션도 제공합니다.

[03:32] 요청 생성이 완료되고 에이전트가 특정 저장소에서 작업을 시작합니다. 자동으로 브랜치 이름을 생성하고 모든 설정이 제공되는 과정을 보여줍니다.

Cursor 대시보드에서 에이전트가 백그라운드에서 작업 중인 상태와 브랜치 생성 과정을 실시간 확인합니다. 에이전트가 완료되면 작업 요약을 받아봅니다.

[03:44] cursor.com/agents에서 실제로 작동 중인 에이전트를 확인할 수 있습니다. 마이크 러셀의 바이브 작업이 실시간으로 진행되는 모습을 볼 수 있으며, 풀 리퀘스트를 통한 병합 기능도 곧 제공될 예정입니다.

[04:01] 에이전트 작업이 완료되고 클라우드에서 요약이 생성됩니다. 이 모든 과정이 이전에 만든 Zapier 잽에 의해 자동으로 트리거되었음을 확인합니다.

두 번째 Zap에서 Cursor를 트리거로 이용해 작업 완료 시 GitHub에 풀 리퀘스트를 생성하고 즉시 머지하도록 설정합니다. 성공 테스트 후 자동 배포가 재실행됩니다.

[04:14] 수동 작업 대신 완전 자동화 프로세스를 구현하기 위해 'Vibe Agent publish'라는 새 앱을 생성합니다. Cursor를 트리거로 사용하여 에이전트 상태 변경을 감지하고, 작업 완료 시점을 포착합니다.

[04:38] 테스트 결과 에이전트가 Creator Magic 저장소에서 작업을 완료했음을 확인했습니다. 수행된 작업의 요약까지 제공되어 매우 만족스러운 결과를 보여줍니다.

[04:52] GitHub 연결을 통해 풀 리퀘스트 생성 기능을 설정합니다. 올바른 저장소 선택, 제목과 본문을 Cursor 에이전트에서 매핑하여 자동화합니다.

[05:21] 헤드 설정에서 사용자 정의 값으로 변경하고 브랜치를 매핑합니다. 메인 브랜치에 병합하는 '인스타 병합' 기능을 설정하여 즉시 병합이 가능하도록 구성합니다.

[05:44] 에이전트가 새 브랜치를 생성했지만 아직 풀 리퀘스트는 없는 상태에서 자동화 프로세스를 테스트합니다. 성공적으로 작동하며 GitHub에서 풀 리퀘스트가 자동으로 병합되는 것을 확인할 수 있습니다.

[06:10] GitHub 페이지 재배포 과정이 진행되며, 노란 점이 초록색으로 변하면서 배포가 완료됩니다. AI 에이전트가 만든 보라색 배경 위의 애니메이션 빛나는 원이 성공적으로 표시됩니다.

Zap 필터링 기능을 추가해 특정 리포지토리에서만 작동하도록 한 뒤, 흰색 펄스 원, 무지개 그라데이션 사각형 등 여러 vibe를 순차적으로 생성·배포하며 자동화 과정을 반복 검증합니다.

[06:30] Zapier로 조율된 AI 에이전트를 통해 완전 자동화된 코드 생성과 배포 시스템을 성공적으로 구현했습니다. 두 개의 간단한 Zap으로 에이전트 실행부터 자동 병합까지 완전 자율적인 프로세스를 구축했습니다.

[07:05] 시스템을 더욱 정교하게 만들기 위해 필터를 추가하여 특정 리포지토리에서만 작동하도록 설정합니다. 이를 통해 다른 GitHub 프로젝트에서는 자동화가 실행되지 않도록 제한합니다.

[07:24] 새로운 테스트를 위해 레인보우 그래디언트 테두리가 있는 회전하는 사각형으로 디자인을 변경합니다. Cursor 에이전트가 백그라운드에서 실행되며 Mike Russell의 새로운 바이브 스퀘어를 생성합니다.

[07:55] 에이전트가 작업을 완료하고 자율 Zap이 풀 리퀘스트를 자동으로 감지하여 병합합니다. 페이지를 새로고침하면 회전하는 레인보우 색상 사각형이 성공적으로 배포된 것을 확인할 수 있습니다.

[08:13] Cursor 프로젝트에서 브랜치들이 자동으로 병합되는 과정을 확인하고, 업데이트를 다운로드하여 변경사항을 살펴봅니다. Mike Russell의 바이브가 바이브 그리드에 추가되고 스타일이 업데이트된 것을 볼 수 있습니다.

[08:30] 웹사이트에 다양한 바이브들이 추가되면서 무지개 효과와 빛나는 원형 애니메이션들이 완성되었습니다. 검은색에서 파란색으로 변하는 배경 효과도 성공적으로 구현되었습니다.

[08:47] 이제 커뮤니티에 프로젝트를 공개하여 사용자들이 직접 AI 에이전트를 제어할 수 있게 합니다. Circle 커뮤니티를 트리거로 설정하여 댓글이 달릴 때마다 자동으로 코드가 생성되도록 구성했습니다.

Circle 커뮤니티의 새 댓글을 Zap 트리거로 사용해, 멤버가 입력한 텍스트를 Cursor 에이전트가 받아 애니메이션 코드로 변환·배포하도록 확장합니다. 실시간 댓글→코드→페이지 반영을 시연합니다.

[09:20] 사용자들에게 댓글로 원하는 바이브를 설명하면 커서 AI가 즉시 코드를 작성하고, Zapier와 GitHub을 통해 자동으로 웹사이트에 배포된다고 설명합니다.

[09:33] '위아래로 부드럽게 바운스하는 삼각형'이라는 댓글을 실시간으로 테스트해봅니다. AI 에이전트가 댓글을 인식하고 바운스 애니메이션 작업을 시작합니다.

[09:46] 새로고침 후 바운스하는 삼각형이 성공적으로 웹사이트에 나타났습니다. 클릭하면 해당 바이브를 생성한 원본 댓글로 이동하는 기능도 확인할 수 있습니다.

[09:56] 단순한 텍스트 댓글에서 라이브 코딩 애니메이션까지의 전체 과정이 100% 자동화되었음을 강조합니다. 아이디어부터 배포까지 모든 단계가 자동으로 처리됩니다.

전체 과정을 요약하며 Zapier와 Cursor AI를 활용한 완전 자동화 워크플로의 잠재력을 강조합니다. 시청자에게 직접 아이디어를 댓글로 남겨 실험해볼 것을 권장합니다.

[10:10] 시청자들에게 직접 참여할 수 있도록 프로젝트를 라이브로 공개합니다. 설명란의 링크를 통해 댓글을 달면 자신만의 바이브를 웹사이트에 추가할 수 있습니다.

[00:00] 안녕하세요, 저는 마이크입니다.

[00:00] 스스로 코딩하는 웹사이트를 보여드리겠습니다.

[00:03] 여기서 보시는 모든 네모칸은 누군가가 자연어로 디자인한 것입니다.

[00:06] 그리고 AI 에이전트가 간단한 코멘트로부터 코드를 작성해서 배포했습니다.

[00:08] 오늘은 Zapier의 새로운 Cursor 통합 기능을 사용해서

[00:13] 자동 업데이트되고 협업이 가능한 웹사이트를 만드는 방법을 보여드리겠습니다.

[00:17] 혹시 백만 달러 홈페이지를 기억하시나요?

[00:20] 사람들이 1달러를 내고 웹사이트의 픽셀을 살 수 있었던 그 사이트 말입니다.

[00:23] 이 아이디어도 매우 비슷합니다.

[00:28] 먼저 여기에 프롬프트를 입력하겠습니다.

[00:29] index와 style CSS를 생성하는 아주 간단한 프롬프트입니다.

[00:31] 표준 HTML5 보일러플레이트가 될 것이고

[00:34] 기본적으로 커스터마이징 가능한 픽셀이 있는 바이브 코딩 페이지입니다.

[00:38] 얼마 지나지 않아 인덱스 페이지가 생성되었고

[00:41] 스타일도 함께 작업하고 있습니다.

[00:43] 좋아요, 모든 작업이 완료되었습니다. 정말 간단했네요.

[00:47] 몇 초밖에 걸리지 않았습니다. 간단한 웹사이트니까요.

[00:49] 이제 확인해볼 수 있습니다.

[00:52] 여기 있습니다. 방금 이 페이지를 로드했습니다.

[00:53] 바이브 코딩입니다.

[00:56] 이 벽의 모든 바이브는 AI 에이전트가 코딩한 것입니다.

[00:56] 공개 소셜 미디어 댓글에 의해 트리거되어서요.

[00:59] 여기서 creator-magic.github.io를 사용한 것을 보실 수 있습니다.

[01:01] GitHub Pages를 사용해서 이 페이지를 호스팅하기 때문입니다.

[01:05] 먼저 저장소를 초기화하고 첫 번째 커밋이라고 입력하겠습니다.

[01:08] 보시는 것처럼 여기서 몇 가지 명령어를 실행했습니다.

[01:12] Creator Magic 조직에서 초기화되어야 합니다.

[01:14] 네, 맞습니다.

[01:18] 하지만 이런 저장소를 만드는 가장 좋은 점은 pages 설정으로 갈 수 있다는 것입니다.

[01:19] 여기서 브랜치에서 배포한다고 설정할 수 있어요. 바로 우리가 원하는 것이죠.

[01:24] 물론 Cursor로 만든 이 새 git 저장소의 메인 브랜치를 선택합니다.

[01:27] 모든 작업이 완료되었습니다.

[01:32] 이제 대기 중이고 여기서 몇 가지 체크를 하고 있습니다.

[01:33] 네, GitHub이 실제로 제 사이트를 빌드하는 자체 방식을 실행하고 있습니다.

[01:36] 그 다음에 체크아웃하고 업로드할 것입니다.

[01:40] 그러면 웹에서 이 페이지에 접근할 수 있게 됩니다.

[01:42] 좋아요, 녹색으로 되었네요. 가서 확인해보죠. 와!

[01:45] 바이브 코딩 페이지가 이제 라이브되었습니다.

[01:48] 이제 자동화로 재미있는 일을 할 수 있습니다.

[01:50] Zapier로 가서 새로운 Zap을 생성하겠습니다.

[01:54] 이름은 Vibe Agent Create라고 하겠습니다.

[01:57] 먼저 매일 자정에 실행되는 스케줄로 트리거를 시작하겠습니다.

[02:01] 좋아요. 완료되었습니다.

[02:02] 이제 재미있는 부분입니다. Cursor입니다.

[02:05] 이것을 입력하면

[02:07] 이제 Cursor가 실제로 Zapier 안의 통합 기능임을 보실 수 있습니다.

[02:08] 첫 번째 액션 이벤트에서는 에이전트 실행이라고 할 것입니다.

[02:12] 정말 흥미진진하네요.

[02:16] 이미 Cursor 계정을 생성하고 연결한 것을 보실 수 있습니다.

[02:18] 하지만 아직 하지 않으셨다면

[02:21] Cursor 대시보드의 Background agents에서 API 키를 찾아달라고 요청할 것입니다.

[02:22] 그리고 연결됩니다.

[02:25] 어디로 가야 하는지 정확히 알려줍니다.

[02:28] 아직 하지 않으셨다면, Cursor의 background agents에서

[02:30] 바로 여기서 API 키를 생성할 수 있는 기능이 있습니다.

[02:33] 완료되면 모든 것이 연결되어야 하고

[02:37] 다음 단계로 넘어갈 수 있습니다.

[02:39] 여기서부터 재미있어집니다.

[02:40] Cursor 코딩 AI 에이전트에 프롬프트를 입력할 수 있기 때문입니다.

[02:41] 프롬프트를 꽤 자세하게 만들어서

[02:46] 에이전트가 제가 원하는 것을 정확히 하도록 하겠습니다.

[02:47]

[02:49] 당신은 정교한

[02:50] AI 웹 개발자이고, 협업 프로젝트에 하나의 바이브 스퀘어를 추가해야 합니다.

[02:55] 좋아요, 인덱스와 바이브 그리드가 있을 거예요.

[02:57] 그리고 스타일 CSS를 업데이트할 거예요.

[02:59] 그리고 사용자의 이름이 있는데,

[03:01] 나중에 트리거를 변경할 때 매핑할 예정입니다.

[03:04] 그리고 바이브 설명도 있어서 원하는 것을 복사할 수 있어요.

[03:07] 이 경우에는 빛나고 맥동하는 흰색 원을

[03:10] 어두운 보라색 배경에 배치한다고 할게요.

[03:13] 다음으로 이 저장소의 URL을 가져와서

[03:16] 저장소 URL로 여기에 붙여넣을 거예요.

[03:19] 실제로 작업하고 있는 메인 브랜치가 맞습니다.

[03:21] 나머지는 모두 그대로 두시면 됩니다.

[03:23] 원한다면 실제로 사용자 에이전트가 코딩에 사용할 AI 모델을 선택할 수 있어요.

[03:27] 에이전트가 코딩을 위해 사용하는

[03:28] 이렇게 하면 계속 버튼을 클릭하고 요청을 생성했습니다.

[03:32] 요청을 생성했어요.

[03:33] 이 특정 저장소에서 작업 중인 에이전트의 상태를 생성하고 있어요.

[03:38] 심지어 자체 브랜치 이름을 만들고 다른 모든 것이 제공됩니다.

[03:42] 정말 좋은 시작이에요.

[03:44] 이제 cursor.com/agents로 가시면 보실 수 있을 거예요

[03:48] 실제로 작동 중인 에이전트가 있어요. 마이크 러셀의 바이브를 올리고 있습니다.

[03:52] 정말 너무 멋져요.

[03:54] 모든 일이 바로 여기서 일어나고 있는 것을 볼 수 있어요.

[03:56] 그리고 곧

[03:57] 풀 리퀘스트를 통해 이를 병합할 수 있는 기능을 제공할 거예요.

[04:01] 좋아요. 완벽해요. 완료되었어요.

[04:03] 요약하고 있어요. 이 모든 것이 클라우드에서 일어나고 있어요.

[04:06] 그리고 실제로 방금 전에 제가 만든 Zapier 잽에 의해 트리거되었어요.

[04:11] 좋아요, 이제 풀 리퀘스트를 만들 준비가 되었어요

[04:14] 하지만 수동으로 하고 싶지 않아요.

[04:15] 이 프로세스를 완전히 자동화하고 싶어요.

[04:18] 이번에는 새 앱을 만들고 있는데 이름은 Vibe Agent publish가 될 거예요.

[04:23] 트리거로는 다시 Cursor를 사용할 거예요.

[04:26] Cursor를 트리거로 사용할 수 있어요.

[04:28] 이 경우에는 상태 변경에 대한 에이전트를 가져올 거예요.

[04:32] 우리가 관심 있는 것은 에이전트가 작업을 완료했을 때예요.

[04:35] 그래서 계속 진행해서 이 트리거를 테스트할 거예요.

[04:38] 정말 이것 좀 보세요.

[04:40] 제 에이전트가 Creator Magic 저장소에서 작업을 완료했다는 것을 찾았어요.

[04:45] 이것은 정말 환상적이에요.

[04:47] 수행된 작업까지 요약해 줍니다.

[04:49] 그래서 계속 진행해서 이것을 더 작동시킬 수 있어요.

[04:52] 이번에는 GitHub에 연결할 거예요.

[04:55] 액션 이벤트를 스크롤하면 풀 리퀘스트 생성이 보일 거예요.

[04:58] 이게 우리가 필요한 거예요. 계속해 봅시다.

[05:01] 여기서 올바른 저장소를 선택해야 해요.

[05:04] 그리고 제목으로는

[05:06] Cursor 에이전트에서 이것을 가져와서 새 사용자 추가

[05:10] 바이브 스퀘어가 제목이 될 거예요.

[05:11] 그리고 본문은 짐작하시겠지만 Cursor 에이전트에서 매핑할 수 있어요.

[05:15] 물론 완료되면 아름다운 요약을 제공해 줘요

[05:18] 수행한 작업의 요약을 간단히 넣을 거예요.

[05:21] 이제 헤드의 경우 실제로 사용자 정의 값으로 변경하는 것이 매우 중요해요

[05:24] 매핑할 수 있는

[05:26] 여기서 코스 에이전트에서 보실 수 있어요.

[05:28] 다시 말하지만, 병합하고 싶은 브랜치가 있어요.

[05:32] 완료되면 이 경우 메인인 베이스에 병합할 거예요.

[05:36] 그리고 즉시 병합한다는 의미인 인스타 병합이라고 부를 거예요.

[05:40] 더 진행하기 전에, 이 저장소를 보여드리고

[05:44] 보시다시피, 에이전트가 새 브랜치를 만들었지만

[05:47] 아직 풀 리퀘스트는 없네요.

[05:49] 지금은 아무것도 일어나지 않고 있습니다.

[05:52] 돌아가서 계속 진행해보겠습니다.

[05:53] 이 자동화 작업을 계속하고, 이 단계를 테스트해보겠습니다.

[05:56] 성공했네요. 모든 게 작동합니다.

[05:58] 여기서 피드백을 받았는데,

[06:00] 이것이 바로 GitHub에서 보고 싶었던 내용이에요. 새로고침해보겠습니다.

[06:04] 이제 닫힌 풀 리퀘스트가 하나 있다는 걸 볼 수 있습니다.

[06:06] 네, 새로운 Vibe Square 사용이 성공적으로 병합되었습니다.

[06:10] 이제 코드로 돌아가면 바로 노란 점들을 볼 수 있는데

[06:14] 이는 GitHub이 제 GitHub 페이지를 다시 배포하고 있다는 걸 의미합니다.

[06:18] 거의 완료되고 있는 걸 보실 수 있어요.

[06:21] 배포가 이제 초록색으로 바뀔 거예요. 바로 바뀌었네요!

[06:24] 정말 흥미진진합니다.

[06:25] 제 에이전트가 코딩한 바이브 스퀘어가 GitHub 배포 페이지에서 실행되는 걸 볼 수 있을 거예요.

[06:30] 이 모든 것이 Zapier로 이루어졌습니다. 새로고침해보죠.

[06:32] 오, 세상에 이걸 보세요!

[06:34] 제 바이브 코드 페이지에 보라색 배경 위에 애니메이션으로 빛나는 원이 있어요.

[06:38] 이 모든 것이 AI 에이전트로 만들어졌고

[06:42] 세계 최대의 AI 오케스트레이션 플랫폼인 Zapier로 조율되었습니다.

[06:45] 지금까지 본 것이 마음에 드셨다면, 좋아요와 구독 부탁드려요.

[06:47] 매주 이런 튜토리얼을 만들고 있습니다.

[06:50] 이 모든 것이 단순한 두 개의 Zap으로 완성되었어요. 하나는 에이전트를 실행하고

[06:53] 다음은 에이전트 완료를 기다린 후 자동으로 병합하는 것입니다.

[06:56] 그래서 제 웹사이트에 배포되는 거죠.

[06:58] 이것은 완전히 자율적인 프로세스이고

[07:00] 제가 지금까지 만든 가장 놀라운 자동화 중 하나입니다.

[07:02] 이제 이걸 좀 더 정리해보겠습니다.

[07:05] 여기에 필터를 추가하고

[07:06] 소스 리포지토리가 정확히 일치하는 경우에만 계속 진행하라고 하겠습니다.

[07:10] 정확히요.

[07:11] 변경하고자 하는 리포지토리와 일치해야 합니다.

[07:14] 계속 진행하겠습니다.

[07:15] Zap이 여기서 계속되었을 것을 볼 수 있습니다.

[07:17] 하지만 다른 GitHub 프로젝트에서 작업 중이라면 이 과정은 계속되지 않을 거예요.

[07:21] 이 Zap을 게시하고 한 번 더 테스트해보겠습니다.

[07:24] 좋아요, 제 바이브 에이전트로 돌아가서

[07:26] 이것을 다른 걸로 바꿔보겠습니다.

[07:29] 레인보우 그래디언트 테두리가 있는 회전하는 사각형

[07:32] 이걸로 계속 진행하겠습니다.

[07:33] 다시 이 단계를 재테스트하겠습니다.

[07:35] Cursor 에이전트를 호출해서 GitHub에 배포된 제 페이지를 수정해야 합니다.

[07:40] 지금 생성되고 있는 걸 보실 수 있어요. 실제로 가보면, 네

[07:44] 여기 있네요!

[07:46] 백그라운드 에이전트로 실행되고 있습니다.

[07:47] 바이브를 생성하고 있어요

[07:48] 이번에는 Mike Russell의 회전하는 레인보우 그래디언트 테두리가 있는 스퀘어를요.

[07:52] 이번에는요.

[07:52] 좋아요. 모든 작업을 완료했다고 하네요. 이것 보세요!

[07:55] 제 에이전트가 마무리 작업을 하고 있습니다.

[07:56] 가장 좋은 점은 제 자율 Zap이 이 풀 리퀘스트를 감지해서 자동으로 병합하고

[08:00] 즉시 제 GitHub 페이지에 배포될 거라는 점이에요.

[08:04] 맞아요.

[08:04] 이 페이지를 새로고침해보겠습니다. 와, 이것 보세요!

[08:07] 회전하는 레인보우 색상의 사각형이 있어요!

[08:10] Mike Russell의 바이브. 여기 두 가지 바이브가 있네요.

[08:12] 정말 멋져요.

[08:13] 여기 제 Cursor 프로젝트를 보면

[08:15] 이 브랜치들이 자동으로 병합되고 있는 걸 볼 수 있습니다.

[08:19] 업데이트를 다운로드해서 모든 변경사항을 살펴볼 수 있어요.

[08:23] Mike Russell의 바이브가 여기 바이브 그리드에 두 번 추가되었고

[08:26] 하단에 모든 다양한 스타일들로 이 스타일들이 업데이트되었습니다.

[08:30] 무지개 바이브와 맥동하는 빛나는 하얀 원 바이브도 함께 말이죠.

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

[08:36] 검은색에서 진한 파란색으로 천천히 반짝이는 배경.

[08:39] 새로고침해보죠. 시작됩니다.

[08:41] 또 다른 배경 테두리가 생겼네요. 여러 색깔 사이를 전환하고 있습니다.

[08:45] 꽤 빠른 속도로 흥미로워질 수 있겠네요.

[08:47] 그래서 여러분에게 넘겨드리려고 합니다.

[08:49] 네, 여러분에게

[08:50] 제 커서 에이전트의 완전한 제어권을 드릴 거예요. 여기 트리거로 가서요.

[08:54] 스케줄을 사용하는 대신, 실제로는 제 커뮤니티를 사용할 거예요.

[08:58] 제 커뮤니티의 멤버라면

[08:59] 여러분만의 바이브 스퀘어를 만들 수 있을 거예요.

[09:01] 제가 호스팅하는 커뮤니티인 Circle을 사용할 거예요.

[09:04] 트리거 이벤트로는 새 댓글 게시를 검색할 거예요.

[09:08] 설정을 구성하면서 커뮤니티를 선택하고, Creator Magic 스페이스의 토론방을 선택할 거예요.

[09:13] AI 에이전트, 여러분의 댓글을 코드로 바꿔드립니다.

[09:18] 코드로요.

[09:20] AI 코드를 게시물에 연결했다고 말했죠.

[09:23] 답글로 커서에게 여러분의 바이브를 설명해주세요.

[09:25] 제가 즉시 코드를 작성할 거예요.

[09:27] Zapier와 GitHub이 자동으로 이 웹사이트에 배포할 거예요.

[09:31] 그리고 100% 자동화됩니다.

[09:33] 위아래로 부드럽게 바운스하는 삼각형이라고 입력해보세요.

[09:36] 정말로 제 커서 에이전트가 이것을 완벽하게 인식했습니다.

[09:39] 바운스하는 삼각형 애니메이션 작업을 하고 있어요.

[09:42] 여기에 무엇이 나타날지 정말 기대돼요.

[09:44] 음, 작업이 여기서 마무리되고 있는 것 같네요.

[09:46] 이제 새로고침해보죠.

[09:47] 오, 봐요, 바운스하는 삼각형이 생겼어요.

[09:49] 약간 세일처럼 보이네요.

[09:51] 클릭하면, 짠.

[09:52] 그 바이브를 생성한 댓글로 바로 이동할 거예요.

[09:56] 바로 이렇게, 간단한 텍스트 댓글에서

[09:58] 수동 작업 없이 웹사이트의 라이브 코딩 애니메이션으로 바뀝니다.

[10:02] Zapier 코스 에이전트, 정말 놀랍습니다.

[10:05] 아이디어부터 배포까지 전체 루프가 100% 자동화되었어요.

[10:10] 이제 여러분도 시도해보세요.

[10:12] 모든 분들이 가지고 놀 수 있도록 라이브로 남겨두겠습니다.

[10:14] 댓글을 달아야 하는 게시물 링크는 설명란에 있어요.

[10:18] 가서 댓글을 달아보세요

[10:19] 벽에 여러분만의 바이브를 남기고, 나타나는 걸 지켜보세요

[10:21] 몇 분 후에 말이에요.

[10:23] 실제로 명령에 따라 코드를 작성하고

[10:25] 배포할 수 있는 AI로 무엇을 하시겠어요?

[10:27] 댓글에 여러분의 가장 미친 아이디어들을 알려주세요.

[10:30] 정말 멋있다고 생각하셨다면

[10:31] 구독하고 좋아요 눌러주세요. 그 모든 좋은 것들 말이에요.

[10:33] 시청해주셔서 정말 감사합니다!

[10:35] YouTube가 지금 화면에 동영상을 보여주고 있어요.

[10:38] 다음에 보셔야 할 영상이에요. 감사합니다.