모두 볼 수 있습니다: 다중 에이전트 관측성을 위한 Claude Code Hooks

IndyDevDan 구독자 43,800명

요약

이 영상은 Cloud Code Hooks를 활용해 한 대의 인스턴스를 넘어서 수십 개의 에이전트를 운용할 때 발생하는 ‘관측성(observability)’ 문제를 해결하는 실전 방안을 제시합니다. 에이전트가 수행하는 모든 이벤트를 최소한의 클라이언트-서버 아키텍처로 원웨이(one-way) 스트림 방식으로 수집·저장·실시간 전송하며, 소형·고속 모델을 활용한 요약 기능으로 중요한 정보만 한눈에 파악할 수 있도록 구성합니다. 이 과정을 통해 스케일업된 에이전트 시스템을 효과적으로 모니터링하고 제어하며, 향후 에이전트 기반 엔지니어링을 위한 확장 로드맵을 제시합니다.

주요 키워드

Cloud Code Hooks Multi-Agent Observability Agentic Workflow One-Way Data Stream Summarization Prompt WebSocket SQLite Small Fast Model Agentic Coding Session ID

하이라이트

🔑 확장과 함께 관측성(observability)이 핵심 과제로 부상하며, 단일 에이전트 운용을 넘어서려면 에이전트별 이벤트를 체계적으로 추적해야 한다고 강조합니다.
🚀 모든 Claude Code 에이전트는 각자의 Hook을 통해 이벤트를 서버로 전송하고, 서버는 이를 SQL 유사 데이터베이스에 저장한 뒤 WebSocket으로 실시간 스트리밍합니다.
🌟 소형·고속 AI 모델을 활용해 각 이벤트(payload)의 사전·사후(tool 전·후) 처리 내용을 요약(prompt 요약)해 주어, 방대한 로그를 클릭하지 않고도 핵심만 빠르게 파악할 수 있습니다.
⚡️ 단방향 데이터 흐름(one-way data stream)을 채택해 시스템을 단순하게 유지하며, 데이터 저장과 실시간 모니터링을 동시에 지원하는 구조를 제시합니다.
📌 UUID 기반 세션 ID와 해시 컬러 코딩으로 에이전트 인스턴스를 구분해 가시성을 높이고, 필터링 기능으로 관심 이벤트만 뽑아볼 수 있습니다.
🔍 상세 챗(chat) 전송(stop 이벤트)을 통해 각 에이전트의 전체 대화 내역을 보관·검색할 수 있어, 문제가 발생했을 때 즉시 로그를 조회하고 분석할 수 있습니다.
💡 클라우드 코드 훅 디렉토리 내에서 send_event 스크립트를 통해 동적 Hook 처리를 구현하며, 모든 Hook 이벤트가 이 단일 스크립트로 통합됩니다.
📈 이 아키텍처는 한 번 설정하면 에이전트가 어디서 실행되든 HTTP 요청만으로 이벤트를 받아올 수 있어, 분산된 환경에서도 일관된 모니터링이 가능합니다.
🎯 에이전트 기반 엔지니어링(Agentic Engineering)으로 나아가기 위해, 연속적 프롬프트가 아닌 완전 신뢰형(fully trusted) 에이전트를 구축해야 한다고 제안합니다.
🚧 최종적으로 에이전트 수가 늘어날수록 반드시 관측성 체계를 갖춰야 하며, ‘측정 없이는 개선 없다’는 원칙을 다시 한 번 강조합니다.

용어 설명

Cloud Code Hooks

Cloud Code 실행 주기에 개입해 주요 이벤트를 캡처하고 외부로 전송하는 확장 기능

관측성(Observability)

시스템 내부 동작을 외부에서 추적·분석할 수 있는 능력으로, 다중 에이전트의 상태 파악에 필수

Agentic Workflow

다수의 에이전트를 조합해 자동화된 작업 흐름을 구성하는 개념

One-Way Data Stream

에이전트→서버→클라이언트로 단방향으로만 데이터가 흐르는 단순 구조의 통신 방식

Summarization Prompt

작업 이벤트를 소형 모델로 요약해 한눈에 빠르게 이해할 수 있도록 돕는 명령어 패턴

WebSocket

서버와 클라이언트 간 실시간 양방향 통신을 지원하는 웹 표준 프로토콜

SQLite

가볍고 임베디드 용도로 적합한 파일 기반 관계형 데이터베이스

Session ID

각 에이전트 실행 인스턴스를 고유하게 식별하기 위해 발급하는 UUID 기반 값

단일 Claude Code 에이전트 운용은 간단하지만, 여러 에이전트를 확장하면 추적해야 할 이벤트가 급증하여 관리가 어려워진다는 문제를 설명합니다.

[00:00] 클라우드 코드 에이전트 하나로 시작하는 것은 단지 시작일 뿐이며, 에이전트 수를 확장하면 추적해야 할 것이 너무 많아진다는 문제가 발생한다.

다중 에이전트 시스템에서 관측성이 왜 필수인지 강조하며, 모든 이벤트를 한눈에 볼 수 있는 시스템 설계가 필요하다고 제안합니다.

[00:21] 멀티 에이전트 시스템에서는 관찰 가능성이 핵심이며, 클라우드 코드 훅이 최소한의 클라이언트 서버 아키텍처로 이벤트를 보내면 모든 것을 볼 수 있다.

각 에이전트가 Claude Code Hooks를 통해 Bun 서버로 이벤트를 전송하고, 서버가 SQL 유사 DB에 저장 후 WebSocket으로 클라이언트에 실시간 전송하는 전체 아키텍처를 소개합니다.

[00:50] 여러 에이전트가 각각의 클라우드 코드 훅을 실행하여 번 서버에 연결되고, SQL 데이터베이스에 저장되면서 동시에 웹소켓을 통해 클라이언트로 스트리밍된다.

[01:48] 실제 시스템에서 에이전트가 입력을 요청하는 상황을 보여주며, 모든 훅과 이벤트가 실시간으로 기록되고 있다.

세션 ID·애플리케이션 이름 기반 필터를 적용해 관심 이벤트만 선별하고, 라이브 액티비티 뷰에서 전 세계 분산 에이전트의 작업 현황을 확인하는 방법을 데모합니다.

[02:18] 관찰 가능성의 힘은 에이전트를 확장하고 전문화하여 워크플로우에 구축할 때 그들이 무엇을 하고 있는지 이해할 수 있게 해준다는 것이다.

에이전트가 스케일업될수록 무슨 작업을 수행하는지 이해해야 하며, 관측성이 없다면 오류 발생 시 원인 추적과 개선이 불가능하다는 핵심 메시지를 전달합니다.

[02:32] 클라우드 코드와 에이전트 코딩 도구를 사용하면 에이전트 수를 확장하는 것만으로도 훨씬 더 많은 일을 할 수 있으며, 이는 전문화와 교차 작업에도 유용하다.

[02:50] 에이전트 완료 상태와 서브 에이전트 호출들을 통해 모든 Claude 코드 이벤트를 실시간으로 모니터링할 수 있습니다. 현재 무한 에이전트 루프와 멀티 에이전트 관찰 가능성 두 개의 코드베이스에서 작업하고 있습니다.

[03:09] 필터링 기능을 통해 하나 이상의 코드베이스에서 원하는 이벤트만 선택해서 볼 수 있습니다. 백그라운드 텍스트 투 스피치가 에이전트의 입력 요구사항이나 작업 완료를 알려줍니다.

[03:25] 세션 ID로 정확한 Claude 코드 인스턴스를 식별하고, 다양한 이벤트 타입들(정지, 포스트, 도구 사용, 알림 등)을 필터링할 수 있습니다. 모든 이벤트들의 실시간 스트림을 통해 에이전트들의 활동을 관찰합니다.

이벤트가 서버로 전송되기 전 소형·고속 모델(haicoup)을 사용해 pre-tool·post-tool 이벤트를 요약해 보여주도록 설정하는 방식을 설명합니다.

[03:48] 실시간 라이브 활동 펄스를 통해 모든 애플리케이션과 Claude 코드 인스턴스에서 에이전트들이 수행하는 작업을 볼 수 있습니다. 무한 에이전트 루프에서 5개의 서브태스크가 병렬로 실행되어 많은 이벤트가 생성됩니다.

[04:16] 에이전트가 세운 계획을 /implement 명령으로 실행하기 시작합니다. 개발자는 아직 이 기능을 구축하면서 동시에 발표하고 있으며, 모바일 친화적인 버전으로 만들 계획입니다.

[04:36] 라이브 활동 정책을 통해 모든 에이전트에서 실시간으로 들어오는 이벤트들을 관찰할 수 있습니다. 에이전트 이벤트 스트림에서 총 63개의 이벤트가 스트리밍되고 있으며, 화면에 표시되는 내용이 주기적으로 새로고침됩니다.

에이전트에서 서버로, 서버에서 클라이언트로 단방향 스트림을 유지해 구조를 단순화하고, 저장·방송을 동시에 수행하는 원웨이 플로우의 장점을 다룹니다.

[04:59] 애플리케이션과 세션 ID가 각 인스턴스를 고유하게 식별합니다. 좋은 UI/UX를 위해 앱과 세션 ID에 색상 코딩을 적용하고, 해싱을 통해 어떤 에이전트가 포스팅하고 있는지 일관되게 표시합니다.

[05:22] 앱 관리 인터페이스에서 앱 이름, 세션 ID, 호출 도구를 확인할 수 있으며, 오른쪽에는 각 도구에서 수행된 작업의 요약 정보가 표시됩니다.

[05:31] 클라우드 코드 훅 전에 들어오는 모든 이벤트는 하이쿠 같은 작고 빠른 모델을 사용하여 요약 프롬프트를 실행하며, 도구 사용 전후의 상황을 한눈에 파악할 수 있도록 합니다.

[05:47] 무한 에이전트 루프가 MedScan Pro 임상 대시보드용 HTML 파일을 작성하는 과정을 보여주며, 도구 사용 후 이벤트와 하위 에이전트 완료 이벤트가 연결되어 있습니다.

Cloud Code Hooks 디렉토리 구조와 send_event 스크립트 내부 로직을 살펴보며, 이벤트명·애플리케이션명·summarize 플래그 인자를 통해 동적 처리하는 방식을 설명합니다.

[06:20] 에이전트 확장 시 중요한 단방향 데이터 스트림 아키텍처를 설명하며, 클라우드 코드 에이전트에서 훅을 통해 서버로 흘러가는 간단한 구조를 강조합니다.

[06:30] 모든 데이터가 클라우드 코드 에이전트에서 훅을 통해 서버로 흘러가고, SQL 데이터베이스에 저장된 후 프론트엔드로 스트리밍되어 실시간 이벤트를 제공합니다.

[06:40] 활동 펄스에서 1분, 3분, 5분 피드를 선택할 수 있으며, 각 라인은 실제 작업을 수행한 에이전트를 나타내고 해시된 세션 ID 색상으로 구분됩니다.

[07:22] 관찰 가능성은 빠르고 쉽고 간단해야 하며, 이를 위해 요약을 사용하고 하위 에이전트 중지 이벤트를 통해 클라우드 코드 훅의 정확한 페이로드를 확인할 수 있습니다.

[07:42] Claude Code의 단방향 데이터 플로우 아키텍처 설명 - 이벤트 완료 후 훅 사용, 서버로 정보 전송 과정 시연

Bun 기반 슬래시 이벤트 핸들러로 DB 삽입 후 WebSocket 브로드캐스트, Vue.js 클라이언트에서 WebSocket 메시지를 소비해 컴포넌트에 전달하는 전체 코드를 요약합니다.

[07:54] 5개의 에이전트 루프 태스크 시작 확인, 서버가 이벤트를 SQLite에 저장하고 클라이언트로 스트리밍하는 과정

[08:02] 단방향 데이터 스트림의 단순성 강조 - 각 에이전트가 Claude Code 훅에서 작업 요약 후 전송하는 구조

[08:12] 측정과 모니터링의 중요성 강조 - 측정하지 않으면 개선할 수 없고, 모니터링하지 않으면 실제 상황을 파악할 수 없음

[08:20] 작업과 에이전트 확장을 위한 관찰성 필요성, 데이터 플로우 추적을 통한 에이전트 작업 이해

[08:36] Claude Code 훅의 핵심 기능 설명 - 생명주기 위에 구축하고 이해할 수 있는 놀라운 기능

[08:46] Claude Code 동작에 대한 결정적 제어권 제공, 에이전트 조정/모니터링/제어 가능

[08:54] 지난주 기본적 접근에서 이번주 멀티 에이전트 관찰성 실제 활용으로 발전

[09:06] 에이전트 코딩 확장과 에이전트 엔지니어 되기 위한 멀티 에이전트 활용 필요성

[09:19] 확장에 따른 새로운 문제 발생 - 무엇이 일어나고 있는지 추적하고 이해할 방법의 필요성

[09:30] 터미널이나 인스턴스를 열지 않고도 상황 파악 가능한 멀티 에이전트 관찰성의 장점

[09:42] 영향력과 엔지니어링 작업 확장시 관찰성 중요성 - 에이전트 위치와 작업 파악 필요

[09:54] 시스템 오류 발생 시 완전한 제어가 가능한 추적 시스템의 필수성

[10:02] 완벽한 해결책은 아니지만 멀티 에이전트 관찰성 시작을 위한 하나의 방법 제시

[10:12] 중지 이벤트의 특별한 기능을 설명하며, 클릭하면 전체 채팅 기록을 볼 수 있고 에이전트07이 500개의 메시지를 가지고 있다는 것을 보여준다.

[10:26] 채팅 기록을 검색하고 분석할 수 있으며, 트랜스크립트 경로를 통해 전체 로그를 복사하여 작업을 처리할 수 있다고 설명한다.

[10:40] 읽기 명령이나 glob 사용, 어시스턴트 응답 등을 필터링하여 빠르게 찾을 수 있는 기능을 보여준다.

[10:57] 관찰 가능성의 중요성을 강조하며, 도구의 능력을 추적하는 것이 엔지니어가 실제로 무엇을 할 수 있는지 알려준다고 설명한다.

[11:12] 모바일 버전이 출시되었고, 이벤트 스트림의 기본 크기를 조정할 수 있다고 언급한다.

[11:23] 시스템을 통해 흐르는 이벤트와 빠른 하이쿠 모델이 제공하는 요약 기능을 살펴보며, 에이전트로부터 알림을 받는 상황을 설명한다.

[11:47] 클라우드 코드 에이전트부터 훅, 서버, 클라이언트까지의 전체 구조를 설명하며, 클라우드 디렉토리와 새로운 훅 디렉토리를 소개한다.

[12:02] 훅에서 시작되는 이벤트 추적 시스템을 설명하고, pre-tool use에 두 개의 훅을 실행하는 새로운 기능을 소개한다.

[12:14] pre-tool use 전용 스크립트와 Astral의 UV 단일 파일 Python 스크립트를 사용하여 코드를 격리하고 독립적인 스크립트를 만드는 방법을 설명한다.

[12:27] 새로운 스크립트의 send event 메서드와 그 인수들(애플리케이션 이름, 이벤트 타입 등)을 소개한다.

[12:45] 요약 플래그를 추가하여 하이쿠 모델을 통해 오른쪽에 요약을 생성하는 시스템을 설명합니다.

관측성이야말로 에이전트 기반 엔지니어링 확장의 핵심이며, 연속적 프롬프트를 벗어나 완전 신뢰형 에이전트로 나아갈 로드맵과 차기 Agentic Coding 코스 예고로 마무리합니다.

[13:04] send event가 모든 훅(post tool use, pre-tool use, notification, stop 등)에서 실행되며, 각각이 고유한 정보를 전달하여 동적으로 처리됩니다.

[13:32] 이벤트 데이터는 JSON 페이로드로 로컬 서버에 전달되며, 앱, 클라이언트, 서버, 데모로 구성된 시스템에서 모든 이벤트를 수신합니다.

[13:51] 코드베이스 주변에 에이전틱 레이어를 구축하고 있으며, 이는 엔지니어링 방식을 근본적으로 바꿀 것이라고 설명합니다.

[14:30] 클라우드 코드 훅이 HTTP 요청을 통해 이벤트를 전송하고, 서버에서 슬래시 이벤트를 통해 데이터베이스에 삽입 후 웹소켓 클라이언트에 브로드캐스트하는 구조를 설명합니다.

[15:22] Vue.js 기반의 프론트엔드 구조를 설명하며, 프레임워크의 상대적 중요성이 낮아지고 있다고 강조합니다. 에이전트가 모든 프레임워크를 이해하므로 원하는 형태로 쉽게 변환할 수 있다고 설명합니다.

[15:39] 웹소켓 연결 및 이벤트 처리 시스템을 설명합니다. 이벤트 오버플로우를 방지하기 위해 슬라이싱 기법을 사용하고, 컴포저블 훅을 통해 웹소켓 기능을 프론트엔드에 제공하는 구조를 보여줍니다.

[16:09] 프론트엔드 컴포넌트 구조의 단순함을 강조하며, 관찰 가능성 시스템의 핵심은 간단하게 유지하는 것이라고 설명합니다. 클라우드 코드 에이전트에서 서버로의 일방향 데이터 흐름을 권장합니다.

[16:29] 데이터 저장 구조를 설명하며, SQLite 데이터베이스와 웹소켓 클라이언트 모두에 데이터를 저장하는 방식을 보여줍니다. 소스 앱, 세션 ID, 이벤트, 원시 페이로드 등의 데이터 구조를 실제 데이터베이스 화면과 함께 설명합니다.

[16:58] 발표자의 목적을 명확히 하며, 단순히 관찰 방법을 가르치는 것이 아니라 클라우드 코드의 가능성을 보여주고자 한다고 설명합니다. 코드베이스를 공개하여 최고의 에이전트 코딩 도구로서의 활용법을 제시합니다.

[17:29] 에이전트 시스템의 확장성과 관찰 가능성의 중요성을 강조합니다. 전문화된 에이전트들이 특정 코드베이스에서 작업할 때, 이들을 효과적으로 모니터링하고 제어할 수 있는 구체적인 방법이 필요하다고 설명합니다.

[17:55] 에이전트 시스템을 제어하지 못하면 그 기술은 쓰레기와 다름없다. 작고 빠른 언어 모델을 활용한 요약 시스템으로 수천 개의 이벤트를 20센트도 안 되는 비용으로 처리할 수 있다.

[18:30] 하나의 에이전트에서 여러 에이전트로, 그리고 다른 머신들에서 실행하는 것으로 확장하면 진정한 오프 디바이스 에이전트 코딩을 구현할 수 있다. 이는 엔지니어링의 미래이다.

[18:51] 앞뒤로 프롬프트하는 방식은 시작하기에는 좋지만 끝내기에는 끔찍한 방법이다. 대신 완전히 신뢰할 수 있고 프로그래밍 가능한 에이전트 코딩으로 나아가야 한다.

[19:12] 에이전트들이 무엇을 하고 있는지 주의 깊게 관찰하고 멀티 에이전트 관찰가능성을 사용해야 한다. 에이전트들을 특정 작업에 특화시키고 확장하는 것이 중요하다.

[00:00] 지금 보시게 될 것은 간단하면서도

[00:02] 강력합니다.

[00:04] 클라우드 코드 에이전트 하나를 실행하는 것은

[00:06] 단지 시작일 뿐입니다. 이걸 깨닫고

[00:09] 여러분을 위해 작업하는 에이전트 수를

[00:11] 확장하기 시작하면, 곧바로

[00:14] 큰 문제에 직면하게 됩니다.

[00:17] 추적해야 할 것이 너무 많습니다. 멀티 에이전트

[00:19] 시스템에서는

[00:21] 관찰 가능성이 전부입니다. 이걸

[00:23] 보세요. 클라우드 코드 훅이

[00:26] 최소한의 클라이언트 서버

[00:28] 아키텍처로 이벤트를 보내면, 모든 것을 볼 수 있습니다.

[00:31] 하나의 클라우드 코드 인스턴스뿐만 아니라

[00:34] 클라우드 코드 멀티 에이전트 관찰 가능성에 대한

[00:36] 구체적인 접근 방식을 분석해보겠습니다.

[00:38] 3개, 5개, 10개 그리고 그 이상으로

[00:41] 확장할 수 있게 해줍니다.

[00:48] 보시다시피, 우리에게는

[00:50] 실행 중인 모든 클라우드 코드 인스턴스에서

[00:52] 이벤트를 받아오는 멀티 에이전트

[00:55] 관찰 가능성 시스템이 있습니다. 서브태스크를

[00:56] 실행하든, 계획을 세우든, 빌드를 하든,

[00:58] 웹 스크래핑을 하든, 웹 검색을 하든,

[01:01] 심층 연구를 하든, MCP 서버를 호출하든

[01:03] 상관없습니다. 모든 이벤트가

[01:06] 이 간단한 멀티 에이전트 관찰 가능성

[01:09] 애플리케이션으로 추적되고 기록됩니다. 애플리케이션

[01:11] 아키텍처는 다음과 같습니다.

[01:13] 여러 에이전트가 각각의

[01:16] 클라우드 코드 훅을 실행합니다.

[01:18] 이 훅들은 각각 번 서버에 연결되어

[01:20] 지속성을 위해 SQL 데이터베이스에

[01:23] 데이터를 저장하고 동시에

[01:26] 웹소켓을 사용해서 이벤트를 바로

[01:28] 여기 보시는 클라이언트로 스트리밍합니다.

[01:31] 에이전트가 어디서 실행되든, 여러 디바이스에서

[01:33] 실행하든, 5개 10개 이상의

[01:35] 에이전트를 실행하든, 모든 이벤트가

[01:36] 스트리밍됩니다. 보시다시피

[01:38] 서로 다른 애플리케이션들이

[01:40] 서로 다른 클라우드 코드 세션

[01:42] ID로 이벤트를 스트리밍하고 있고, 모든

[01:44] 도구 호출과 모든 훅이

[01:46] 기록되고 있습니다.

[01:48] 댄, 에이전트가 입력을 필요로 합니다.

[01:49] 보시다시피 모든 훅, 모든

[01:51] 이벤트 타입이 기록되고 있습니다. 방금

[01:53] 알림 이벤트를 받았습니다. 제 에이전트 중

[01:55] 하나가 입력을 필요로 합니다. 터미널로 돌아가서

[01:57] 어떤 에이전트가 필요한지 볼 수 있습니다.

[01:59] 댄 태스크 완료. 계속 진행합니다.

[02:00] 정지 이벤트가 들어오고 있고

[02:02] 이 커스텀 테마

[02:04] 기능이 잘 보입니다. 몇 가지

[02:06] 수정이 필요해 보입니다.

[02:07] 물론 수락하고

[02:09] 계속 작업하게 하겠습니다.

[02:10] 에이전트 하나가 완료되었고

[02:12] 멀티태스크 서브 에이전트 이벤트가

[02:14] 많은 작업을 처리하고 있습니다.

[02:16] 이 모든 이벤트들이 스트리밍되고 있습니다.

[02:18] 이것이 바로

[02:19] 관찰 가능성의 힘입니다. 에이전트를 확장하고

[02:22] 전문화하여 워크플로우에 구축할 때,

[02:25] 에이전트 워크플로우에 구축할 때,

[02:27] 그들이 무엇을 하고 있는지

[02:29] 이해하고 싶어집니다. 그럼 이것을

[02:31] 분석해보겠습니다.

[02:31] 입력이 필요합니다.

[02:32] 또 다른 입력 요청이 왔습니다.

[02:34] 클라우드 코드를 사용하기 시작하고

[02:37] 에이전트 코딩 도구를 사용하기 시작하면

[02:38] 에이전트를 추가하는 것만으로도

[02:41] 언제든지 여러분을 위해 작업하는

[02:44] 에이전트 수를 확장하는 것만으로도

[02:46] 훨씬 더 많은 일을 할 수 있다는 것을

[02:48] 깨닫게 됩니다. 이는 또한 전문화와 교차

[02:50] 앱 사용량입니다. 이건 그냥

[02:52] 에이전트 완료입니다.

[02:53] 좋습니다. 여기서 서브 에이전트 완료

[02:54] 호출들을 확인할 수 있습니다. 모든 종류의

[02:57] Claude 코드 이벤트를 볼 수 있습니다. 여기 상단에는 물론

[02:59] 필터가 있습니다. 현재 우리는

[03:01] 두 개의 코드베이스에서 작업하고 있습니다.

[03:02] 무한 에이전트 루프 코드베이스와 이

[03:04] 완전히 새로운 Claude 코드 훅 멀티 에이전트

[03:06] 관찰 가능성 코드베이스입니다. 물론 필터링할 수 있습니다

[03:09] 당연히

[03:09] 여러분의 에이전트가 입력을 필요로 합니다

[03:11] 이 코드베이스들 중 하나 이상으로.

[03:13] 모든 소스로 다시 설정해 보겠습니다.

[03:15] 백그라운드에서 들을 수 있는 건

[03:16] 이전 Claude 코드 훅 비디오에서 만든

[03:18] 텍스트 투 스피치입니다. 제

[03:20] 에이전트들이 입력이 필요하거나 더 많은 작업이 준비되었을 때

[03:21] 저에게 알려주고 있습니다.

[03:23] 더 많은 작업을 위해.

[03:24] 서브 에이전트 완료.

[03:25] 정확한 Claude 코드 인스턴스를 나타내는 세션 ID가 있고

[03:27] 물론 이벤트 타입들이 있습니다.

[03:29] 이것들은 현재 사용 가능한 모든 Claude 코드

[03:31] 훅들로 여러분이 활용할 수 있습니다. 그리고

[03:33] 물론 모든 단일 이벤트의 스트림을 받고 있습니다.

[03:35] 그래서 쉽게 필터링할 수 있습니다.

[03:37] 예를 들어 모든 정지 이벤트만 보고 싶다면,

[03:39] 포스트, 도구 사용,

[03:41] 알림 등등을 볼 수 있습니다. 그리고

[03:44] 물론 정말, 정말 멋진 것을 볼 수 있습니다.

[03:46] 맞죠? 우리는 모든 이벤트들의

[03:48] 실시간 라이브 활동 펄스를 가지고 있습니다.

[03:50] 실시간으로 들어오는 모든 이벤트들. 우리 에이전트들이

[03:53] 모든 애플리케이션에서, 모든 Claude 코드

[03:55] 인스턴스에서 하고 있는 모든 작업들을 말이죠.

[03:57] 인스턴스에서. 우리의 무한

[03:59] 에이전트 루프 에이전트가 많은

[04:01] 작업을 하고 있고 이것은 무거운

[04:03] 작업 중 하나입니다. 맞죠? 계속해보겠습니다.

[04:05] 계속하세요. 다섯 개의

[04:06] 서브태스크가 병렬로 작동하고 있는 것을 볼 수 있습니다.

[04:09] 그래서 많은 이벤트들이 이것으로부터 스트리밍될 것입니다.

[04:12] 여기 이 에이전트가 계획을 세웠습니다.

[04:13] 이제 실제로 이 계획을 실행하도록 하겠습니다.

[04:16] 그래서 이 /implement를 복사하겠습니다.

[04:18] 여기에 붙여넣겠습니다.

[04:19] 이제 그 계획을 구축할 것입니다.

[04:22] 아직 이것을 구축하고 있습니다. 아직

[04:23] 여기 여러분께 제시하면서 작업하고 있습니다.

[04:25] 이것을 모바일 친화적으로 만들어야 합니다.

[04:26] 그래서 이것을 축소하고

[04:28] 폰에서, 내 기기에서

[04:29] 이동 중에 사용할 수 있도록 말이죠.

[04:31] 이런 멋진 것들을 받아들입니다.

[04:34] 맞죠? 이 라이브 활동 정책은 모든 에이전트에서

[04:36] 실시간으로 들어오는 모든 이벤트를 보는 데 훌륭합니다.

[04:38] 그리고 우리는 이것이 어떻게 생겼는지

[04:40] 상위 수준 분석을 볼 수 있습니다.

[04:42] 핵심 부분으로 가겠습니다. 맞죠?

[04:44] 에이전트 이벤트 스트림에서 모든

[04:46] 이벤트들이 여기로 스트리밍되고 있는 것을 볼 수 있습니다.

[04:48] 총 63개의 이벤트가 있고 이것은 잘리고

[04:50] 새로고침됩니다. 아래로 스크롤하면

[04:53] 이벤트들이 나오는 애플리케이션이 있고

[04:55] Claude 코드 세션 ID가 있습니다.

[04:58] 여러분의 에이전트가 입력을 필요로 합니다.

[04:59] 좋습니다. 엄지척입니다.

[05:00] 이 애플리케이션과 세션 ID는

[05:02] 이 인스턴스를 고유하게 표시합니다.

[05:05] 좋은 UI/UX를 위해 여기 앱과 세션 ID에

[05:08] 색상 코딩이 있습니다. 그래서 우리는

[05:11] 들어오는 앱 이름과 세션 ID를 해싱하여

[05:13] 어떤 에이전트가 포스팅하고 있는지

[05:15] 일관되게 볼 수 있습니다.

[05:17] 전송됨. 다음은 뭔가요?

[05:18] 그렇습니다. 작업 완료를 얻었습니다.

[05:20] 그 Claude 코드 훅 정지 이벤트와 함께. 그게

[05:22] 훌륭하네요. 여기 앱 이름, 세션 ID, 그리고 우리가 실제로 호출하는 도구가 있습니다.

[05:24] 그리고 여기 오른쪽에는

[05:26] 정말, 정말 강력한 기능이 있습니다.

[05:27] 여기에 우리 도구들에서 수행된 작업의 요약이 있습니다.

[05:28] 우리가 실제로 실행하고 있는 내용이고, 코드베이스에서 곧 보여드리겠습니다.

[05:31] 클라우드 코드 훅이 전송하기 전에 들어오는 모든 이벤트는

[05:33] 작고 빠른 모델을 사용하여 요약 프롬프트를 실행합니다.

[05:34] 이 경우에는 모든 이벤트의 요약을 얻기 위해

[05:36] 하이쿠를 실행하고 있습니다.

[05:38] 특히 도구 사용 전후에 무슨 일이 일어나는지 보고 싶습니다.

[05:40] 한눈에 읽을 수 있도록 말이죠.

[05:42] 여기를 클릭해서 정확한 페이로드를 확인해야 하는 번거로움 없이 말입니다.

[05:44] 물론 그렇게 할 수도 있지만요.

[05:47] 이 이벤트가 무엇을 나타내는지 보실 수 있습니다.

[05:48] 여기서 무한 에이전트 루프가 지정된 프로젝트 경로에

[05:50] MedScan Pro 임상 대시보드용 HTML 파일을 작성합니다.

[05:53] 이것이 도구 사용 후 이벤트입니다.

[05:54] 하위 에이전트 완료.

[05:56] 또 다른 하위 에이전트 완료를 받았습니다.

[05:58] 도구 사용 후 이벤트는 물론 도구가 실행된 후에 발생합니다.

[06:00] 물론 도구 사용 전 이벤트도 있습니다.

[06:01] 이러한 이벤트들이 연결되어 있는 것을 볼 수 있습니다.

[06:04] 도구 사용 전후, 하위 에이전트 완료

[06:06] 모두 같은 에이전트 15CC5C이고

[06:07] 무한 에이전트 루프 코드베이스에서 실행되고 있습니다.

[06:08] 이게 바로 이 에이전트입니다.

[06:10] 제 구현 에이전트가 여전히 작업 중이고

[06:12] 여기서 무한 UI가 생성되고 있습니다.

[06:14] 물론 이것들은 단순한 시연 예제입니다.

[06:16] 하지만 이 두 개는 실제로 멀티 에이전트 관찰 가능성 코드베이스에서

[06:18] 작동하고 있습니다.

[06:20] 어쨌든, 여기서 아이디어를 보실 수 있기를 바랍니다.

[06:22] 이것은 에이전트를 확장할 때 정말 중요한 것입니다.

[06:25] 여기 있는 이 아키텍처는 단방향 데이터 스트림입니다.

[06:27] 이는 상황을 정말 간단하게 유지합니다.

[06:30] 모든 것이 클라우드 코드 에이전트에서 훅을 통해 서버로 흘러갑니다.

[06:31] 서버에 도착하면 SQL과 같은 데이터베이스에 저장됩니다.

[06:33] 저장된 직후, 프론트엔드로 스트리밍됩니다.

[06:35] 그래서 이러한 실시간 이벤트들이 들어오고 있습니다.

[06:36] 그리고 물론 활동 펄스에서도

[06:38] 여기서 1분 피드를 보고 있지만

[06:40] 3분, 5분으로도 설정할 수 있습니다.

[06:42] 더 큰 시간 프레임에서

[06:43] 들어오는 모든 이벤트의 더 큰 컬렉션을 볼 수 있습니다.

[06:45] 또한 개별 라인마다 실제 작업을 수행한 에이전트를 나타냅니다.

[06:48] 하위 에이전트 완료,

[06:50] 맞습니다. 이것은 해시된 세션 ID 색상입니다.

[06:52] 관찰 가능성은 빠르고, 쉽고, 간단해야 합니다.

[06:54] 하위 에이전트 완료.

[06:56] 이것이 우리가 요약을 사용하는 이유입니다.

[06:58] 여기 아래로 스크롤하면

[07:00] 도구 사용 후 요약을 받을 수 있습니다.

[07:02] 하위 에이전트 중지 이벤트를 열어서

[07:04] 어떤 모습인지 보고 싶다면

[07:05] 여기서 클라우드 코드 훅의 정확한 페이로드를 볼 수 있습니다.

[07:07] 그리고 우리는 이 모든 것을 이 단방향 데이터 플로우 아키텍처에서

[07:10] 하나로 통합하고 있습니다.

[07:12] 클라우드 코드가 훅을 사용하여

[07:13] 이벤트를 완료한 후 이러한 이벤트들이

[07:15] 더 큰 시간 프레임에서 들어오는 것을 볼 수 있습니다.

[07:16] 또한 개별 라인마다 실제 작업을 수행한 에이전트를 나타냅니다.

[07:18] 하위 에이전트 완료,

[07:21] 맞습니다. 이것은 해시된 세션 ID 색상입니다.

[07:22] 하위 에이전트 완료,

[07:23] 맞습니다. 이것은 해시된 세션 ID 색상입니다.

[07:25] 관찰 가능성은 빠르고, 쉽고, 간단해야 합니다.

[07:27] 하위 에이전트 완료.

[07:28] 이것이 우리가 요약을 사용하는 이유입니다.

[07:29] 여기 아래로 스크롤하면

[07:30] 도구 사용 후 요약을 받을 수 있습니다.

[07:32] 하위 에이전트 중지 이벤트를 열어서 어떤 모습인지 보고 싶다면

[07:34] 여기서 클라우드 코드 훅의 정확한 페이로드를 볼 수 있습니다.

[07:35] 그리고 우리는 이 모든 것을

[07:37] 여기 이 단방향 데이터 플로우 아키텍처에서 하나로 통합하고 있습니다.

[07:39] 클라우드 코드가 훅을 사용하여 이벤트를 완료한 후

[07:41] 이러한 이벤트들이 들어오는 것을 볼 수 있습니다.

[07:42] 단방향 데이터 플로우 아키텍처에서

[07:45] Claude Code는 이벤트를 완료한 후

[07:47] 훅을 사용합니다. 이러한 이벤트들은

[07:50] 서버로 정보를 전송합니다.

[07:52] 자, 보세요. 5개의 에이전트 루프

[07:54] 태스크가 시작되었습니다. 그리고

[07:56] 서버는 이러한 이벤트들을 받아서

[07:58] SQLite에 저장한 다음, 바로 여기

[08:01] 우리가 보고 있는 클라이언트로 스트리밍합니다.

[08:02] 이 단방향 데이터 스트림은

[08:04] 정말 간단하게 유지됩니다. 모든 에이전트는

[08:06] 자신의 작업을 요약하는 책임이 있습니다

[08:08] Claude Code 훅에서 전송하기 전에요.

[08:09] 잠시 후 코드베이스를 살펴보겠습니다.

[08:11] 여기서 강조하고 싶은 점은

[08:12] 이것이 얼마나 중요한지입니다.

[08:15] 똑같은 얘기입니다. 측정하지 않으면

[08:17] 개선할 수 없습니다. 모니터링하지 않으면

[08:18] 실제로 무엇이 일어나고 있는지

[08:20] 어떻게 알 수 있을까요? 작업을 확장하고 싶다면

[08:22] 에이전트를 확장하고 싶다면

[08:23] 그들이 무엇을 하고 있는지 알아야 합니다.

[08:25] 그리고 정말 흥미로운 점은

[08:27] 이 데이터 플로우를 보면서

[08:29] 에이전트들이 무엇을 하고 있는지 추적하고

[08:32] 에이전트 코딩 도구가 실제로 어떻게 작동하는지

[08:34] 이해할 수 있다는 것입니다. 하지만

[08:36] 이 모든 것은 물론 Claude Code 훅으로

[08:38] 구동됩니다. 이것은 정말 놀라운

[08:40] 기능으로 Claude Code 위에 구축하고

[08:42] 무슨 일이 일어나고 있는지 이해할 수 있게 해줍니다.

[08:45] 생명주기에서 말이죠. 이것은

[08:46] Claude Code의 동작에 대한 결정적인

[08:48] 제어권을 제공하고 에이전트를 조정하고

[08:51] 모니터링하고 제어할 수 있게 해줍니다.

[08:54] 이것은 정말 큰 기능입니다.

[08:56] 매주 여기서 다루고 있어요.

[08:58] 지난주에는 Claude Code 훅을

[08:59] 더 기본적인 방식으로 다뤘습니다.

[09:02] 이번에는 이 영상에서 볼 수 있듯이

[09:03] Claude Code 훅을 멀티 에이전트

[09:06] 관찰성을 위해 실제로 활용하고 있습니다.

[09:08] 더 많은 것을 하고 싶다면, 에이전트 코딩을

[09:11] 확장하고 싶다면, 에이전트 엔지니어가

[09:13] 되고 싶다면, 여러 에이전트가

[09:15] 당신을 위해 일하며

[09:17] 모든 코드베이스에서 작업을 수행하도록

[09:19] 해야 합니다. 물론 이를 확장하면

[09:21] 또 다른 문제가 나타나죠?

[09:23] 해결책은 문제를 만들어냅니다. 또 다른

[09:25] 문제가 나타나는데, 무엇이

[09:27] 일어나고 있는지 추적하고 이해할 방법이

[09:30] 필요합니다. 멋진 점은 이제

[09:32] 이 터미널들이나 인스턴스들을

[09:34] 열어서 무슨 일이 일어나고 있는지

[09:36] 알 필요가 없다는 것입니다.

[09:38] 이것들을 닫아두고 여기서

[09:40] 무슨 일이 일어나고 있는지 볼 수 있어요.

[09:42] 멀티 에이전트 관찰성이 왜 그렇게

[09:43] 중요한지 이해하실 겁니다.

[09:45] 영향력을 확장하고 있다면

[09:46] 엔지니어링 작업을 확장하고 있다면

[09:48] 무슨 일이 일어나고 있는지, 어디서

[09:50] 일어나고 있는지, 어떤 에이전트가

[09:52] 작업을 수행하고 있는지 알아야 합니다.

[09:54] 결국 뭔가 잘못될 것이기 때문입니다.

[09:56] 시스템이 올바른 일을 하지 않을 것입니다.

[09:58] 그러면 시스템 전체에 걸쳐

[10:00] 완전히 제어할 수 있는 추적이

[10:02] 있는 것이 필수적입니다. 그래서

[10:03] 이것이 올바른 방법이라고 말하는 건 아닙니다.

[10:06] 다만 멀티 에이전트

[10:07] 관찰성을 시작할 수 있는

[10:08] 한 가지 방법이라고 말하는 겁니다.

[10:10] 작업이 완료되어 준비되었다고 나와 있습니다.

[10:12] 중지 이벤트에 대한 흥미로운 점이 있는데,

[10:13] 잠깐 여기서 말씀드리겠습니다. 중지를 클릭하면

[10:15] 전체 채팅 기록을 볼 수 있습니다. 이 에이전트를 보시면,

[10:17] 에이전트07이

[10:19] 바로 여기 있습니다

[10:21] 클라우드 코드 훅 멀티 에이전트

[10:22] 관찰 가능성 코드베이스 안에서 500개의

[10:25] 메시지를 가지고 있죠? 이를 클릭하면

[10:26] 검색할 수 있고

[10:28] 한눈에 무엇이 일어나고 있는지 정확히 파악할 수 있습니다.

[10:30] 중지 이벤트는

[10:32] 여기 있는 트랜스크립트 경로를 통해 전체 로그를 복사하고

[10:35] 발생한 작업을 처리하는 데 사용하기에 완벽한 시점입니다

[10:38] 예를 들어, 모든 읽기 명령을 찾고 싶다면

[10:40] 빠르게 모든 읽기를 필터링하고

[10:42] 어디서 일어나는지 이해할 수 있습니다

[10:44] 모든 glob 사용에 대해서도

[10:46] 동일하게 할 수 있습니다

[10:48] 어시스턴트 응답을 볼 수 있으며

[10:50] 여기서 모든 응답을 확인할 수 있습니다

[10:52] 이 채팅에 대한 모든 응답을 말이죠

[10:55] 어쨌든 이해하셨죠?

[10:57] 관찰 가능성은 매우 중요하며

[11:00] 이전에 채널에서 이야기한 내용입니다.

[11:01] 도구가 할 수 있는 일을 추적하면

[11:04] 엔지니어인 당신이 이 도구들로

[11:06] 실제로 무엇을 할 수 있는지 알려줍니다.

[11:08] 모니터링을 통해 도구의

[11:10] 잠재력을 활용할 수 있습니다.

[11:12] 모바일 버전이 출시된 것 같네요.

[11:14] 물론 여기서 이벤트를 조정할 수 있습니다.

[11:16] 스트림. 아마 여기서 기본 크기를

[11:18] 늘려야 할 것 같습니다.

[11:19] 모바일에서의 기본 높이를요. 괜찮습니다.

[11:21] 이것이 어떻게 보이는지, 실제로 어떻게 작동하는지

[11:23] 살펴보겠습니다.

[11:25] 시스템을 통해 흐르는 이벤트를 봅시다.

[11:27] 이벤트에 대한 요약을 제공하는

[11:28] 작고 빠른 하이쿠 모델을 살펴봅시다.

[11:31] 이것은 정말 강력합니다. 한눈에

[11:33] 매우 빠르게 관찰할 수 있어야 합니다.

[11:34] 우리 에이전트 중 하나로부터

[11:36] 알림을 받았습니다.

[11:38] 변경사항을 수락합니다.

[11:40] 좋아 보입니다. 무한 에이전트

[11:42] 루프가 여전히 실행 중입니다.

[11:43] 훌륭해 보입니다. 자, 이제

[11:45] 이것이 어떻게 작동하는지 이해해봅시다.

[11:47] 클라우드 코드 에이전트부터 훅, 서버, 클라이언트까지

[11:50] 다음 구조를 볼 수 있습니다.

[11:52] 이전 비디오에서 알 수 있듯이

[11:54] 클라우드 디렉토리가 있고

[11:56] 새로운 훅 디렉토리를 추가했습니다.

[11:58] 설정을 열면 무엇이 일어나고 있는지

[12:01] 이해할 수 있습니다. 물론

[12:02] 모든 것은 훅에서 시작됩니다.

[12:04] 모든 이벤트가 추적되고 있음을 볼 수 있습니다.

[12:06] pre-tool use를 살펴봅시다.

[12:08] 또 다른 훅을 추가했습니다. 하나의 훅을 실행하는 대신

[12:11] 두 개의 훅을 실행하고 있습니다.

[12:13] 매우 멋진 기능입니다.

[12:14] pre-tool use 전용 스크립트가 있습니다.

[12:17] 물론 Astral의 UV 단일 파일

[12:19] Python 스크립트를 사용하고 있습니다.

[12:22] 이는 코드를 격리하고

[12:24] 독립적인 스크립트를 만드는 훌륭한 방법입니다.

[12:27] 하지만 여기 아래에 정말 멋진 것이 있습니다.

[12:29] 새로운 스크립트가 있습니다. 그리고

[12:31] 모든 것을 축소해서

[12:33] 좀 더 읽기 쉽게 만들 수 있습니다.

[12:34] 이렇게 보입니다. 이 디렉토리에

[12:36] send event 메서드가 있고 몇 가지 인수가 있습니다.

[12:39] 작업 중인 애플리케이션의 이름이 있고

[12:42] 이벤트 타입이 있으며

[12:44] 그 다음에

[12:45] 요약 플래그를 추가하고 있습니다. 그리고

[12:47] 요약 플래그는 물론 여기 오른쪽에

[12:49] 이런 요약들을 생성하는 역할을 합니다

[12:52] 빠른 하이쿠 모델을 사용해서 말이죠.

[12:54] 서브 에이전트 완료. 서브 에이전트 완료.

[12:56] 자연어 응답 부분은 자세히 다루지 않겠습니다.

[12:57] 이전 영상에서 다뤘거든요. 설명란에

[12:59] 링크를 걸어두겠습니다. 이 영상에서

[13:00] 멀티 에이전트 관찰 가능성을 이해한 후에

[13:02] 그 영상을 확인해보세요. 그럼 send event를 찾아보면

[13:04] 모든 훅에서 실행되고 있는 것을 볼 수 있습니다.

[13:07] post tool use에도 있고, pre-tool use에도 있고,

[13:10] notification에도 있고, stop에도 있습니다.

[13:12] 댄, 작업 완료. 다음은 뭔가요?

[13:14] 서브 에이전트 정지와 pre-compact가 있습니다.

[13:16] 맞죠? 압축 직전에 실행되는 새로운 클라우드 코드 훅입니다.

[13:18] 이 모든 것들이 실행되고 있습니다. 모두 자신들의

[13:20] 고유한 정보를 전달하고 있어요. 이것이 이

[13:22] 스크립트를 동적으로 만들고 모든

[13:24] 훅을 처리할 수 있게 합니다. 이것은 모든

[13:26] 훅을 처리할 수 있게 해줍니다. send event에서

[13:28] 무슨 일이 일어나는지 살펴보죠. 이벤트 데이터가

[13:30] 있는데, 이는 서버로 보내고 싶은 JSON

[13:32] 페이로드입니다. 로컬 서버가 실행되고 있고

[13:34] 이벤트를 캡처하고 있습니다. 앱, 클라이언트,

[13:36] 서버, 그리고 데모가 있습니다. 서버는

[13:38] 이 모든 이벤트를 받고 있습니다. 그리고

[13:40] 제가 모든 영상과 모든 코드베이스에서

[13:44] 채택하고 있는 이 패턴을 보실 수 있을 겁니다.

[13:46] 실제 애플리케이션은 생성형 AI 기술의

[13:47] 래핑 안에 있습니다. 생성형 AI

[13:49] 스캐폴딩 안에 말이죠. 우리는

[13:51] 코드베이스 주변에 에이전틱 레이어를 구축하기 시작했습니다.

[13:53] 그리고 에이전틱 레이어를 구성하는

[13:57] 모든 필수 폴더들을 강조하겠습니다.

[13:59] 채널에서 이야기할 에이전틱 디렉토리들이

[14:01] 더 많이 있습니다. 구독하셔서

[14:04] 놓치지 마세요. 코드베이스 주변의

[14:06] 이 새로운 레이어는 여러분이 엔지니어링하는

[14:09] 방식을 영원히 바꿀 것입니다. 하지만

[14:11] 올바른 것을 어디에 둘지 알아야 합니다.

[14:13] 이후에 더 자세히 다루겠습니다.

[14:14] 다시 말하지만, 여정에 함께하세요.

[14:16] 여기 앱들이 있습니다. 서버에서

[14:19] 살펴봐야 할 것은 하나뿐입니다.

[14:21] 저기 ESCO 같은 데이터베이스를 볼 수 있습니다.

[14:23] 좋고 이식성 있게요. 그리고

[14:25] 소스에서 bun 서버를 볼 수 있습니다.

[14:26] 클라우드 코드 이벤트는 이 클라우드 코드가

[14:28] 어디에 있든 실행됩니다. 명심하세요,

[14:30] 훅이 설정되어 있습니다. 그래서 훅은

[14:31] 그냥 HTTP 요청을 이벤트와 함께 보냅니다.

[14:33] 원하는 곳 어디든 갈 수 있습니다. 그리고

[14:35] 그것이 우리의 send event가 하는 일입니다.

[14:37] 그것이 클라우드 코드와 클라우드 코드

[14:39] 훅 측면입니다. 그다음 서버로 전달됩니다.

[14:41] 여기 서버를 열고 빠른 축소를 실행하면

[14:43] 여기 있는 것은 슬래시 이벤트뿐입니다.

[14:46] 이는 간단한 수동 bun 서버입니다.

[14:48] 데이터베이스에 삽입하고 있고

[14:50] 이벤트를 웹소켓 클라이언트에 브로드캐스트합니다.

[14:51] 좋고 간단합니다. 이것이 서버이고

[14:53] 이것이 물론 클라이언트입니다.

[14:55] 이렇게 마운트되고 웹소켓을 처리하는

[14:56] use websocket event가 있습니다. 전형적인

[14:59] 구조입니다.

[15:02]

[15:04]

[15:07]

[15:09]

[15:12]

[15:14]

[15:17]

[15:20]

[15:22] 맞죠? 이건 Vue.js입니다. 모든

[15:24] 프론트엔드 프레임워크는 자신만의

[15:26] 버전의 코드를 가지고 있죠. 여러분은

[15:28] 쉽게 에이전트를 사용하고, 강력한

[15:30] 모델을 사용해서 이것을 완전히

[15:32] 원하는 프론트엔드 프레임워크로 변환할 수 있습니다.

[15:33] 이런 것들은 더 이상 중요하지 않습니다.

[15:35] 원시 생산성에 관해서는

[15:36] 프레임워크는 관련이 없습니다. 여러분의 에이전트는

[15:39] 모든 것을 알고 있습니다. 여기서 핵심은 우리가

[15:41] 연결된 후에 연결을 가지고 있다는 것입니다. 우리는

[15:43] 이 웹소켓 이벤트를 가지고 있고

[15:45] 모든 이벤트를 가져와서 슬라이스하고 있습니다.

[15:48] 너무 많은 이벤트로 오버플로우를 원하지 않기 때문이죠.

[15:49] 이것들을 이 참조에 추가하고

[15:51] 물론 우리의 참조는

[15:52] 이 컴포저블을 통해 사용할 수 있습니다.

[15:55] 맞죠? 이 훅을 통해서

[15:57] 웹소켓을 사용하고 그러면 우리의 프론트엔드가

[16:00] 이것을 소비합니다. 그래서 우리가 이것을

[16:02] 모두 검색하면, app.view에서

[16:05] 우리가 이 웹소켓 이벤트를 사용하고 있는 것을 볼 수 있고

[16:07] 그리고 우리는 우리의 이벤트를

[16:09] 관심 있는 누구에게든지 전달하고 있습니다.

[16:11] 컴포넌트에. 그리고 나머지는

[16:13] 프론트엔드의 지루한 컴포넌트 작업입니다, 맞죠?

[16:15] 그래서 여러분의 관찰 가능성 시스템에는

[16:16] 특별한 것이 없습니다. 핵심은 여러분이

[16:18] 간단하게 유지하고 싶어한다는 것입니다. 여러분은

[16:20] 즉시 무언가를 올리고 싶어합니다. 그리고

[16:21] 그것을 하는 가장 빠른 방법은 일방향 데이터

[16:23] 흐름으로 클라우드 코드 에이전트에서 여러분의

[16:26] 서버로 보내는 것입니다. 서버는 우리의

[16:29] SQLite 데이터베이스와 웹소켓

[16:32] 클라이언트 모두에 저장할 것입니다. 그래서 우리가 데이터베이스에 들어가면

[16:34] 이것이 정확히 어떻게 보이는지

[16:35] 알 수 있습니다. 그리고 우리가 저장하고 있는 모든 데이터를

[16:37] 볼 수 있습니다. 그리고 저는 심지어

[16:39] 우리의 SQLite 데이터베이스를 열 수 있습니다. 이것이

[16:41] 빠른 미리보기로 보이는 모습입니다. 여러분은

[16:43] 소스 앱, 세션 ID, 이벤트, 그리고

[16:46] 원시 페이로드를 볼 수 있습니다. 그리고 일부

[16:48] 정지 이벤트들은 물론

[16:50] 전체 채팅이 첨부되어 있을 것입니다. 그리고 이것이

[16:52] 높은 수준에서 데이터 구조가 보이는 모습입니다.

[16:54] 그리고 우리는 물론 모든 이벤트를

[16:56] 프론트엔드에 방출합니다. 우리가

[16:58] 읽어보기를 열면, 여러분은

[17:00] 자신만의 설정을 어떻게 하는지 이해할 수 있습니다. 그리고

[17:01] 여기서 제가 정말로 하고 싶은 것은 저는

[17:03] 여러분의 에이전트를 어떻게 관찰하는지 말하기 위해

[17:05] 여기 있는 것이 아닙니다. 저는 여러분이

[17:07] 할 수 있는 것을 보여주기 위해 여기 있습니다. 저는 여러분이

[17:09] 이 강력한 생성형 AI 기술로

[17:11] 여러분의 잠재력을 활용하도록 도와주기 위해 여기 있습니다. 이 코드베이스는

[17:13] 여러분에게 제공될 것입니다. 설명란에

[17:15] 링크가 있습니다. 이것을 시작

[17:17] 지점으로 사용하여 여러분이 클라우드 코드로

[17:20] 할 수 있는 것을 이해하세요. 게임에서 최고의 에이전트 코딩 도구입니다.

[17:23] 우리는 우리의 빅 3을 취하고 있습니다.

[17:25] 우리는 ad 코딩의 원칙들을 취하고 있고

[17:27] 에이전트 코딩의 원칙들을 취하고 있고 우리는

[17:29] 그것들을 실행에 옮기기 시작하고 있습니다. 그리고 핵심은

[17:31] 여러분이 여러분을 위해 일하는 에이전트의 수를 늘려나가면서

[17:33] 전문화된 에이전트들이

[17:36] 특정 코드베이스에서 작업하고,

[17:38] 특정 문제들을 매우 잘 해결할 때, 여러분은

[17:41] 그것들을 관찰할 방법을 원합니다, 맞죠? 여러분은

[17:43] 여러분의 에이전트들을 모니터링할 방법을 원합니다. 여러분은

[17:46] 성공을 모니터링할 구체적인 방법을 원합니다. 이 모든

[17:49] 생성형 AI 기술은 여러분이

[17:51] 무슨 일이 일어나고 있는지 전혀 모른다면 중요하지 않습니다. 여러분이

[17:53] 조향하고, 수정하고, 제어하는 방법을 모른다면

[17:55] 에이전트 시스템을 제어하는 것은 정말 중요합니다. 정말 쓰레기나 다름없어요.

[17:58] 좋아요, 이것이 우리가 하고 있는 일입니다.

[18:00] 여기서 우리의 요약을 볼 수 있습니다.

[18:02] 정말 강력하고 유용합니다.

[18:05] 빠르고 고차원적이며 작고 빠른 언어 모델들이죠.

[18:07] 이것이 이런 작고 빠르고 저렴한 모델들의 훌륭한 사용 사례입니다.

[18:09] 지금까지 테스트만으로도 수천 개의 이벤트를 보냈어요.

[18:11] 아직 실제 멀티 에이전트 시스템에 연결하지도 않았는데

[18:14] 설정도 안 했어요.

[18:16] 실제 멀티 에이전트 시스템에 대해서는 아직 말이에요.

[18:18] 하지만 수천 개의 이벤트에 20센트도 안 썼어요.

[18:21] 그래서 이것이 바로 작고 빠른 모델들이 정말 빛나는 영역입니다.

[18:23] 맞죠? 이런 일회성 빠른 요약들

[18:26] 이런 빠른 프롬프트들 말이에요.

[18:28] 당신이 하나의 에이전트를 당신의 머신에서 실행하다가

[18:30] 이렇게 당신의 머신에서 여러 에이전트를 실행하는 것으로

[18:32] 확장하기 시작하면

[18:34] 그리고 다른 머신들에서 여러 에이전트를 실행하는 것으로

[18:36] 확장하면

[18:39] 정말 놀라운 것을 얻게 됩니다.

[18:41] 진정한 오프 디바이스 에이전트 코딩으로 나아가기 시작하는 거죠.

[18:44] 이것이 엔지니어링의 미래입니다.

[18:46] 당신은 이 트렌드에 올라타고 싶을 거예요.

[18:48] 이런 것을 작성하고 싶을 거예요.

[18:49] 이것을 향해 나아가고 싶을 거예요.

[18:51] 앞뒤로 프롬프트하는 것, 한 번에 하나의 프롬프트는

[18:53] 엔지니어링하는 방식이 아닙니다.

[18:56] 시작하기에는 좋은 곳이에요.

[18:58] 끝내기에는 끔찍한 곳이고요.

[18:59] 상황은 계속 진전될 것이고

[19:01] 채널에서 우리는 계속해서

[19:03] 곡선을 넘어서 진전해 나갈 것입니다.

[19:04] 당신의 에이전트는 당신의 입력이 필요합니다.

[19:06] 우리는 현재 상태를 넘어서 나아갈 것입니다.

[19:07] 우리는 항상 공이 어디로 가는지를 보고 있어요.

[19:09] 공이 어디에 있는지가 아니라 말이에요.

[19:12] 당신의 에이전트들이 무엇을 하고 있는지 주의 깊게 살펴보세요.

[19:14] 당신의 에이전트들이 무엇을 할 수 있는지 이해하세요.

[19:16] 멀티 에이전트 관찰가능성을 사용하세요.

[19:18] 당신을 위해 하나의 특정 작업에 집중하는

[19:21] 여러 에이전트들을 구동시키기 시작하세요.

[19:24] 당신의 에이전트들을 전문화하고 확장하세요.

[19:27] 여기서 큰 아이디어는 우리가

[19:30] 이런 앞뒤로 프롬프트하는 모드에서 벗어나서

[19:32] 완전히 신뢰할 수 있고 완전히 에이전트적이며

[19:34] 프로그래밍 가능한 에이전트 코딩으로 나아가고 싶다는 것입니다.

[19:37] 그 영상도 설명란에 링크를 걸겠습니다.

[19:39] 우리가 채널에서 하고 있는 모든 것은

[19:41] 뭔가 큰 것을 향해 나아가고 있어요.

[19:43] 그래서 페이즈 2 에이전트 코딩 코스가

[19:45] 앞으로 몇 달 안에 나올 예정입니다.

[19:48] 여러분과 공유하게 되어 엄청 기대됩니다.

[19:49] 다음에 우리가 할 일은

[19:51] 정말 놀라운 것이 될 거예요.

[19:52] 어쨌든 계속 지켜봐 주세요.

[19:54] 구독을 꼭 해주세요.

[19:56] 에이전트 코딩과 에이전트 엔지니어링 세계에서

[19:57] 다음에 올 것들을 놓치지 마세요.

[19:59] 매주 월요일 어디서 저를 만날 수 있는지 아시잖아요.

[20:01] 집중하고 계속 만들어 나가세요.

[20:04] Keep building.