현대 인공지능의 아키텍처는 중요한 변곡점에 도달했습니다. 수년 동안 거대 언어 모델 (LLMs)은 텍스트 입력 및 텍스트 출력 패러다임에 국한된 고립된 지능의 섬으로서 작동해 왔으며, 엄격하게 타입이 지정된 경직된 API 호출을 통해 외부 세계와 통신해 왔습니다. 이전 장에서는 에이전트가 JSON 스키마를 검사하고, 인자 페이로드 (argument payload)를 구성하여 원격 엔드포인트로 전송하는 도구 사용 (tool-use) 및 함수 호출 (function calling)의 기초적인 메커니즘을 살펴보았습니다. 강력하기는 하지만, 이 API 중심 모델은 근본적인 제약이 있습니다. 이 모델은 에이전트가 상호작용해야 하는 모든 소프트웨어 시스템이 깔끔하고 문서화되었으며 결정론적인 프로그래밍 인터페이스를 제공한다고 가정합니다. 하지만 현실에서 인간의 디지털 노동 대부분은 기계를 위해 만들어지지 않은 인터페이스를 통해 이루어집니다. REST 엔드포인트가 없는 레거시 기업용 소프트웨어, 깊게 중첩된 섀도우 DOM (shadow DOMs)을 가진 동적인 싱글 페이지 웹 애플리케이션 (single-page web applications), 데스크톱 운영체제 창, 그리고 상태가 암시적이고 시각적이며 일시적인 복잡한 그래픽 사용자 인터페이스 (GUIs) 등이 그 예입니다.

이 간극을 메우기 위해, 우리는 API 중심의 오케스트레이션 (orchestration)에서 네이티브 데스크톱 및 브라우저 탐색으로 전환해야 합니다. 이러한 진화는 "컴퓨터 사용 (Computer Use)" 에이전트라는 패러다임을 도입합니다. 이는 운영 환경을 시각적으로 인지하고, 멀티모달 신경망 (multimodal neural networks)을 통해 레이아웃과 상태를 추론하며, 마우스 이동, 클릭, 키 입력, 스크롤 이벤트와 같은 저수준의 물리적 상호작용을 실행하는 자율 시스템입니다. 본 장에서는 TypeScript를 사용하여 이러한 정교한 시스템을 구축하는 데 필요한 이론적 토대, 아키텍처 토폴로지 (architectural topologies), 그리고 거버넌스 모델을 탐구합니다.

아키텍처의 변화: 마이크로서비스에서 시각적 상태 머신으로

Computer Use 에이전트의 메커니즘을 이해하기 위해서는 웹 개발에서의 아키텍처적 유사성을 끌어와 보는 것이 유익합니다. 기존의 API 기반 에이전트를 **마이크로서비스 메시 (Microservices Mesh)**라고 생각해 보십시오. 마이크로서비스 생태계에서 모든 서비스는 잘 정의된 계약(gRPC, OpenAPI 스펙, GraphQL 스키마)을 통해 통신합니다. 각 서비스는 결정론적(deterministic)이고, 상태가 없으며(stateless), 명시적인 경계를 노출합니다. 에이전트는 API 게이트웨이 또는 오케스트레이터(orchestrator) 역할을 하며 서비스 간에 페이로드(payload)를 라우팅합니다. 만약 서비스가 스키마를 변경하면 계약이 깨지게 되고, 클라이언트가 업데이트될 때까지 통합(integration)은 실패합니다.

반대로, Computer Use 에이전트는 **블랙박스 DOM과 상호작용하는 싱글 페이지 애플리케이션 (SPA) 클라이언트 컴포넌트 (CC)**처럼 작동합니다. 브라우저에서 실행되는 React 클라이언트 컴포넌트가 비동기 사용자 이벤트, 변동하는 네트워크 상태, 레이아웃 리플로우(layout reflows), 그리고 그 아래에서 변하는 일시적인 DOM 요소들을 처리해야 하는 것과 마찬가지로, Computer Use 에이전트는 애플리케이션의 시각적 렌더링 위에서 직접 작동합니다. 에이전트는 데이터베이스의 내부 상태나 기반이 되는 데이터 모델을 알지 못합니다. 대신, 상태를 추론하기 위해 시각적 휴리스틱(visual heuristics), 광학 문자 인식 (OCR), 공간 좌표 매핑(spatial coordinate mapping), 그리고 의미론적 레이아웃 분석(semantic layout analysis)에 의존합니다.

이러한 변화는 우리를 선언적 통합 (declarative integration) (인터페이스가 존재를 규정하기 때문에 함수를 호출하는 방식)에서 지각적 탐색 (perceptual navigation) (시각적 단서가 존재를 확인해주기 때문에 환경과 상호작용하는 방식)으로 이동시킵니다. 에이전트는 서버가 반환하는 JSON 객체가 아니라, 화면에 렌더링된 픽셀을 기반으로 상태 사이를 전환하는 시각적 상태 머신 (visual state machine)이 됩니다.

시각적 구동 제어 루프의 구조 (The Anatomy of the Vision-Driven Control Loop)

모든 Computer Use 에이전트의 중심에는 **시각적 제어 루프 (Visual Control Loop)**가 있습니다. 텍스트 히스토리가 선형적으로 증가하는 표준 대화형 루프와 달리, 컴퓨터 사용 루프는 **지각 (Perception), 추론 (Reasoning), 실행 (Execution), 그리고 검증 (Verification)**이라는 네 가지 뚜렷한 단계로 구성된 연속적인 폐쇄 루프 피드백 시스템 (closed-loop feedback system)입니다.

1. Perception: 환경 스냅샷 캡처 (Capturing the Environmental Snapshot)

Perception (인지) 단계에서 에이전트는 컴퓨터 데스크톱 또는 브라우저 뷰포트(viewport)의 현재 상태를 캡처합니다. 이는 단순히 가공되지 않은 JPEG 스크린샷인 경우가 드뭅니다. 현대적인 아키텍처는 하이브리드 인지 모델 (hybrid perception model)을 활용하며, 다음 요소들을 결합합니다:

• 래스터화된 이미지 데이터 (Rasterized Image Data): 접근성 트리 (accessibility trees)에는 보이지 않는 스타일링, 레이아웃, 시각적 계층 구조 및 공간적 관계를 포착하는 고해상도 스크린샷입니다.
• 접근성 (a11y) 트리 및 DOM 덤프 (DOM Dumps): 정확한 텍스트 문자열, 구조적 랜드마크 및 상호작용 가능한 노드 ID (예: ARIA 역할)를 제공하는 구조화된 시맨틱 계층 구조입니다.
• 좌표 맵 (Coordinate Maps): 모델이 절대적인 공간 위치를 참조할 수 있도록 하는 정규화된 좌표계 (일반적으로 픽셀 공간을 표준 $1000 \times 1000$ 또는 네이티브 화면 해상도 그리드에 매핑)입니다.

2. Reasoning: 멀티모달 공간 추론 (Multimodal Spatial Inference)

인지 페이로드 (perception payload)가 시각-언어 모델 (Vision-Language Model, VLM)로 전송되면, 모델은 복잡한 인지적 번역을 수행합니다. 모델은 시각적인 사용자 인터페이스 요소(예: 둥근 모서리와 특정 드롭 섀도우가 있는 파란색 "주문 제출" 버튼)를 추상적인 시맨틱 의도("구매 워크플로우 완료")로 매핑해야 합니다.

이를 위해서는 공간적 맥락 (spatial context)에 대한 이해가 필요합니다. 만약 두 개의 입력 필드에 "이름"과 "성"이라는 라벨이 붙어 있다면, 모델은 텍스트 라벨을 그 바로 아래나 옆에 있는 해당 입력 상스와 시각적으로 연관시켜야 합니다. 이 지점이 전통적인 LLM이 실패하고 멀티모달 모델이 탁월한 성능을 발휘하는 부분입니다. 모델은 시각적 접지 (visual grounding)를 수행하여, 물리적인 UI 타겟에 직접 대응하는 경계 상자 (bounding boxes)를 그리거나 좌표 $(x, y)$를 생성합니다.

3. Execution: 의도를 운영 체제 동작으로 변환 (Translating Intent into Operating System Actions)

VLM이 click(x: 450, y: 320) 또는 type("user@example.com")과 같은 동작을 생성하면, 이 추상적인 명령은 실행 엔진(execution engine)에 의해 저수준 운영 체제(OS) 명령으로 변환되어야 합니다. 브라우저 자동화(browser automation) 맥락에서는 Playwright나 Puppeteer와 같은 도구를 통해 합성 DOM 이벤트(MouseEvent, KeyboardEvent)를 디스패치(dispatching)하는 과정이 포함될 수 있습니다. 네이티브 데스크톱(native desktop) 맥락에서는 물리적 하드웨어 커서를 이동시키고 커널 키보드 버퍼(kernel keyboard buffer)에 스캔코드(scancode)를 주입하기 위해 OS 수준의 자동화 프레임워크(macOS의 AppleScript, Windows의 Win32 API, 또는 Linux의 Xdotool 등)와 상호작용해야 합니다.

4. Verification: 폐쇄 루프 방식의 건전성 검사 (The Closed-Loop Sanity Check)

초기 자동화 스크립트의 주요 실패 모드(failure mode)는 "맹목적 실행(blind execution)"이었습니다. 즉, 클릭 이벤트를 발생시킨 후 애플리케이션이 올바르게 응답했다고 가정해 버리는 것입니다. 컴퓨터 사용(Computer Use) 에이전트는 지속적인 검증(continuous verification)을 도입합니다. 모든 동작 이후에 제어 루프(control loop)는 새로운 스크린샷을 캡처합니다. 에이전트는 사후 상태(post-state)를 사전 상태(pre-state)와 비교하여 다음과 같은 중요한 질문에 답합니다: 모달(modal)이 열렸는가? 스피너(spinner)가 사라졌는가? 폼 유효성 검사(form validation) 오류가 나타났는가? 만약 예상된 시각적 변화(visual mutation)가 발생하지 않았다면, 에이전트는 치명적인 실패를 겪는 대신 전략을 수정하며 오류 복구 서브루틴(error-recovery subroutine)으로 진입합니다.

비동기 상태 및 타이밍 현실 관리 (Managing Asynchronous State and Timing Realities)

컴퓨터 사용 아키텍처를 설계할 때 가장 심오한 도전 과제 중 하나는 **시간적 비동기성(temporal asynchrony)과 레이아웃 지연(layout latency)**을 다루는 것입니다. 전통적인 API 통합에서는 네트워크 요청이 원자적(atomic)이고 예측 가능합니다. 즉, 프로미스(promise)를 기다리면 데이터가 반환됩니다. 하지만 그래픽 사용자 인터페이스(GUI)에서 동작은 비결정론적 지연(non-deterministic latency)을 가집니다.

에이전트가 "저장(Save)" 버튼을 클릭할 때, 결과로 발생하는 상태 변화에는 다음과 같은 것들이 포함될 수 있습니다:

1. 즉각적인 시각적 반응 (버튼이 회색으로 변하거나 로딩 스피너가 나타남).
2. 200밀리초에서 10초 사이의 시간이 소요되는 비동기 네트워크 요청 (XHR/Fetch).
3. 후속적인 DOM 리플로우(reflow) 또는 CSS 애니메이션.
4. 서서히 나타나는 지연된 토스트 알림(toast notification).

정교하지 못한 에이전트는 클릭 후 10밀리초(ms) 만에 스크린샷을 캡처하여 애니메이션 중간의 UI를 포착하고, 레이아웃을 오해하여 버튼을 두 번째로 클릭하려고 시도함으로써 중복 트랜잭션을 발생시킬 수 있습니다.

이를 해결하기 위해, 고급 에이전트 아키텍처는 **시간적 평활화(temporal smoothing) 및 상태 안정화 휴리스틱(state-settling heuristics)**을 구현합니다. 제어 루프(control loop)는 지능적인 대기 상태를 포함해야 하며, 작업이 성공했는지 평가하기 전에 시각적 안정성(연속된 프레임에서 픽셀 변화량(pixel delta)이 0이 될 때까지 대기)을 관찰해야 합니다. 또한, 에이전트는 스켈레톤 로더(skeleton loaders), 프로그레스 바(progress bars), 비활성화된 입력 필드와 같은 일시적인 상태(transient states)를 인식하도록 훈련되어야 하며, 이를 환경이 안정적이고 상호작용 가능한 상태로 정착될 때까지 추론을 일시 중단해야 한다는 명시적인 신호로 취급해야 합니다.

GUI 탐색에서의 멀티 에이전트 토폴로지 및 합의 메커니즘

웹 대시보드를 교차 참조하면서 세 개의 서로 다른 레거시 데스크톱 애플리케이션 간에 기업 데이터를 마이그레이션하는 것과 같이 작업의 복잡성이 증가함에 따라, 단일 모놀리식(monolithic) 에이전트는 컨텍스트 윈도우(context window) 포화 및 어텐션 드리프트(attention drift) 문제로 어려움을 겪는 경우가 많습니다. 효과적으로 확장하기 위해서는 강력한 합의 메커니즘(consensus mechanisms)에 의해 제어되는 멀티 에이전트 토폴로지(multi-agent topologies)를 지향해야 합니다.

이러한 고급 시스템에서는 중앙의 Supervisor 노드와 함께 특화된 워커(worker) 에이전트들을 배치합니다. 예를 들어:

• Navigator 에이전트: 시각적 인지(visual perception), DOM 파싱(parsing), 저수준 좌표 생성(low-level coordinate generation)에만 전념합니다.
• Validator 에이전트: 스크린샷 검토, 폼 유효성 검사(form validations) 확인, 비즈니스 로직 제약 조건 강제화에 전념합니다.
• Recovery 에이전트: 예기치 않은 팝업, CAPTCHA, 에러 모달(error modals), 탐색 막힘(navigation dead-ends) 상황을 처리하는 데 특화되어 있습니다.

“진행(Proceed)”과 “계속(Continue)”이라는 라벨이 붙은 두 개의 버튼이 있는 확인 대화상자처럼, 의미적 함의가 불분명한 모호한 UI 상태가 발생할 경우 시스템은 **합의 메커니즘 (Consensus Mechanism)**을 활용할 수 있습니다. 여러 워커 에이전트 (worker agents)가 독립적으로 화면 상태를 평가하고 행동을 제안합니다. 감독 노드 (Supervisor node)는 이러한 제안된 행동들을 취합하고 신뢰도 점수 (confidence scores)를 비교하며, 불일치가 감지되면 더 심층적인 분석 검토를 트리거하거나 명확한 설명을 위해 인간 참여 (human-in-the-loop)를 요청합니다. 이는 소프트웨어 공학의 코드 리뷰 파이프라인과 유사하며, 여기서 인간 또는 자동화된 체크는 오류가 운영 환경(production)에 반영되기 전에 잘못된 실행을 방지합니다.

에이전트 거버넌스에서 모델 컨텍스트 프로토콜 (MCP)의 역할

에이전트가 브라우저 및 운영 체제(OS)와 상호작용하는 능력을 갖추게 됨에 따라, 공격 표면 (attack surface)이 급격히 확장됩니다. 원시 컴퓨터 사용 (raw computer-use) 권한으로 실행되는 침해된 에이전트나 환각 (hallucinating)을 일으키는 에이전트는 이론적으로 로컬 파일을 삭제하거나, 승인되지 않은 금융 거래를 실행하거나, 열려 있는 브라우저 탭에 노출된 민감한 기업 데이터를 유출할 수 있습니다.

이 지점에서 **모델 컨텍스트 프로토콜 (Model Context Protocol, MCP)**이 에이전트 거버넌스의 초석이 됩니다. MCP는 AI 모델이 외부 도구 및 데이터 소스를 발견하고, 연결하고, 상호작용하는 방식을 표준화합니다. 컴퓨터 사용의 맥락에서 MCP는 안전한 샌드박스형 미들웨어 계층, 즉 LLM의 인지 루프 (cognitive loop)와 호스트 운영 체제 사이에 위치하는 엄격한 하이퍼바이저 (hypervisor) 역할을 수행합니다.

MCP가 없다면 에이전트는 종종 애플리케이션 코드에 직접 작성된 임시적인 맞춤형 API 래퍼 (API wrappers)에 의존하게 되며, 이는 파편화된 보안 정책, 일관성 없는 에러 처리, 그리고 불가능한 감사 추적 (auditing trails)으로 이어집니다. MCP는 다음과 같은 엄격한 계약을 강제합니다:

1. Capability Discovery (기능 발견): MCP 서버는 사용 가능한 도구(예: browser_click, keyboard_type)와 엄격한 JSON 스키마를 통해 해당 도구가 허용하는 인자(arguments)를 명시적으로 선언합니다. 이를 통해 LLM이 임의의 시스템 호출을 만들어내는 것을 방지합니다.
2. Context Isolation (컨텍스트 격리): 에이전트는 임의로 파일이나 URL에 접근할 수 없습니다. 에이전트는 MCP 서버 인스턴스에 의해 제공된 컨텍스트 경계 내에서만 완전히 작동합니다.
3. Auditability and Interception (감사 가능성 및 가로채기): 캡처된 모든 스크린샷, 실행된 모든 클릭, 입력된 모든 문자열을 포함한 모든 상호작용은 MCP 전송 계층(transport layer)을 통과합니다. 이를 통해 개발자는 실시간 로깅, 속도 제한(rate limiting), 그리고 고위험 작업(예: "자금 이체" 버튼 클릭)에 대한 인간 개입(human-in-the-loop) 승인 게이트를 구현할 수 있습니다.

실전 구현: 시각 기반 TypeScript 에이전트 구축

시각 기반 "컴퓨터 사용(Computer Use)" 에이전트 루프의 핵심 메커니즘을 이해하려면, 자율 클라이언트가 브라우저 인터페이스와 상호작용하고, 스크린샷을 통해 상태를 캡처하며, 멀티모달 모델(multimodal model)을 통해 해당 상태를 처리하고, 저수준(low-level) 마우스 및 키보드 동작을 전달하는 방식을 살펴봐야 합니다.

아래는 SaaS 자동화 테스트 및 사용자 온보딩 제품군(user-onboarding suite)의 맥락에서 구성된 독립적인 TypeScript 예제입니다. 이 스크립트는 Next.js 클라이언트 컴포넌트(Client Component) 애플리케이션을 검사하고, 시각적 스냅샷을 찍으며, 멀티모달 LLM 페이로드 구조를 사용하여 다음 좌표 기반 상호작용을 결정하고, 자동화 단계를 단계별로 실행하는 에이전트를 시뮬레이션합니다.

/**
 * @file computer-use-agent.ts
 * @description 시각 기반의 기초적이고 독립적인 TypeScript 예제...

상세 코드 라인별 분석