브라우저 자동화의 지형이 우리 발밑에서 근본적으로 변화했습니다. 현대적인 웹 애플리케이션을 탐색할 수 있는 자율적인 AI 에이전트를 구축하려고 시간을 보낸 적이 있다면, 아마도 벽에 부딪혔을 것입니다. 계층적 스타일 시트 (CSS) 선택자, 정밀한 XPath 문자열, 취약한 식별자 속성과 같이 경직되고 결정론적인 로케이터 (locators)를 기반으로 구축된 전통적인 자동화 패러다임은 현대적인 웹 아키텍처의 무게 아래에서 산산조각 나고 있습니다.

웹 애플리케이션은 더 이상 정적 텍스트와 구조화된 마크업으로 이루어진 단순한 계층적 문서가 아닙니다. 이들은 성능, 보안 및 컴포넌트 격리를 염두에 두고 설계된 초동적(hyper-dynamic)이고, 고도로 캡슐화되었으며, 캔버스(canvas)로 렌더링되고, 재귀적으로 중첩된 소프트웨어 플랫폼입니다. 취약하고 결정론적인 자동화 스크립트에서 컴퓨터 비전(computer vision)과 고수준의 행동 목표를 통해 웹 인터페이스를 탐색할 수 있는 자율적인 AI 에이전트로 전환할 때, 우리는 문서 객체 모델 (DOM)의 전통적인 사고 모델을 완전히 깨뜨리는 아키텍처적 경계에 직면하게 됩니다.

복잡한 웹 인터페이스—특히 Shadow DOM, HTML5 Canvas 요소, 그리고 중첩된 iFrame—를 처리하는 이론적 토대를 이해하려면, 먼저 브라우저 실행 환경과의 관계를 재검토해야 합니다. 컴퓨터 사용(computer use)을 통해 브라우저를 구동하는 AI 에이전트는 단순히 일련의 프로그래밍 방식 클릭을 실행하는 스크립트가 아닙니다. 이는 시각적 지각과 공간 레이아웃을 구조화된 행동 동작으로 합성하려고 시도하는 인지 엔진입니다.

모델 컨텍스트 프로토콜 (MCP) 서버 통합 및 도구 추상화 (tool abstraction) 개념을 바탕으로, 이 가이드는 자율 에이전트가 관찰과 외부 제어에 적극적으로 저항하는 실행 컨텍스트를 어떻게 인지하고, 파싱하며, 조작하는지에 대한 이해를 심화합니다.

현대적 웹 캡슐화 및 격리의 해부학

현대적인 웹 인터페이스가 왜 AI 에이전트에게 이토록 엄청난 도전 과제가 되는지 이해하려면, 현대 웹 개발에서의 캡슐화 (Encapsulation) 철학을 해부해야 합니다.

현대적인 웹 애플리케이션을 소프트웨어 아키텍처 비유를 통해 생각해 보겠습니다. 바로 마이크로서비스 기반의 엔터프라이즈 애플리케이션 네트워크 (Microservices-based Enterprise Application Network)입니다. 모놀리식 (Monolithic) 애플리케이션에서는 모든 컴포넌트가 단일 메모리 공간을 공유하며, 전역 변수 (Global variables)는 어디서든 접근 가능하고, 잘못된 함수 하나가 전혀 관련 없는 모듈의 상태를 의도치 않게 변경할 수 있습니다. 초기 웹은 정확히 이러한 모놀리스처럼 작동했습니다. 단일한 전역 DOM 트리는 페이지에서 실행되는 모든 스크립트가 어떤 요소, 스타일, 또는 스크립트 컨텍스트라도 쿼리(Query), 검사, 변경할 수 있게 허용했으며, 이는 전역 네임스페이스 오염 (Global namespace pollution), 취약한 CSS 충돌, 그리고 예측 불가능한 부작용 (Side effects)으로 이어졌습니다.

현대적인 웹 컴포넌트 (Web components)는 이러한 모놀리스 위기를 해결하기 위해 캡슐화 프리미티브 (Encapsulation primitives)를 도입했습니다. 마이크로서비스가 내부 데이터베이스 스키마와 비즈니스 로직이 하위 소비자에게 노출되지 않도록 엄격한 네트워크 및 API 경계를 강제하는 것과 마찬가지로, 현대적인 웹 아키텍처는 Shadow DOM을 활용하여 격리된 DOM 서브 트리 (Sub-trees)를 생성합니다. 웹 컴포넌트 개발자는 호스트 요소에 섀도우 루트 (Shadow root)를 부착할 수 있습니다. 이 섀도우 루트 내부에는 메인 문서의 쿼리 셀렉터 (Query selectors)로부터 완전히 차단된 내부 DOM 트리가 존재합니다.

전통적인 자동화 스크립트, 혹은 표준 전역 쿼리 함수에만 의존하는 단순한 AI 에이전트의 관점에서 볼 때, Shadow DOM의 내용은 뚫을 수 없는 블랙박스 (Black box)와 같습니다. 에이전트가 표준 문서 탐색 (Document traversal)을 사용하여 커스텀 웹 컴포넌트 내부에 숨겨진 버튼을 찾으려고 시도하면, null 또는 빈 배열을 반환합니다. 해당 요소는 브라우저의 렌더 트리 (Render tree) 상에는 수학적으로 존재하지만, 인증되지 않은 전역 쿼리를 거부하는 프로그래밍적 막 (Programmatic membrane) 뒤에 자리 잡고 있기 때문입니다.

나아가, 이러한 격리 현상은 **HTML5 Canvas 요소 (HTML5 Canvas elements)**와 **중첩된 iFrame (nested iFrames)**에 의해 더욱 심화됩니다. Shadow DOM이 제한된 API 게이트웨이를 가진 마이크로서비스라면, HTML5 Canvas는 Direct3D 또는 OpenGL 프레임버퍼 (framebuffer)와 유사한 로우 그래픽스 렌더링 엔진 (raw graphics rendering engine)입니다. Canvas 내부에는 DOM이 전혀 존재하지 않습니다. 기본적으로 요소(element), 텍스트 노드(text node), 접근성 속성(accessibility attribute), 그리고 구조적 계층 구조(structural hierarchy)가 없습니다. 오직 JavaScript 실행 루프를 통해 HTML canvas 컨텍스트 (context) 위에 그려진 로우 픽셀 (raw pixels)만이 존재할 뿐입니다. 자동화 에이전트에게 Canvas로 렌더링된 벡터 에디터나 3D 모델링 도구와 상호작용하는 것은, 원격 데스크톱의 비디오 스트림 내부에서 특정 메뉴 항목을 클릭하려고 시도하는 것과 같습니다. 파싱할 수 있는 기저의 HTML은 없으며, 오직 색상이 입혀진 픽셀의 시각적 그리드 (visual grid)만이 존재합니다.

동시에, **중첩된 iFrame (nested iFrames)**은 호스트 하이퍼바이저 (host hypervisor) 내부에서 실행되는 완전히 분리된 가상 머신 (virtual machines)의 웹 버전이라 할 수 있습니다. 각 iFrame은 자신만의 독립적인 윈도우 컨텍스트 (window context), 문서 객체 모델 (document object model, DOM), 보안 출처 (security origin), 그리고 실행 스레드 (execution thread)를 유지합니다. 깊게 중첩된 iFrame 체인을 탐색하는 것은, 암호학적 및 프로그래밍적 기준이 충족되지 않는 한 부모 프레임이 자식 프레임을 검사하는 것을 방지하는 엄격한 동일 출처 보안 정책 (same-origin security policies)에 의해 보호되는 여러 격리된 네트워크 세그먼트 (network segments)를 건너뛰는 것과 같습니다.

에이전트 기반 웹 탐색의 인지 부조화 (The Cognitive Dissonance of Agentic Web Navigation)

이러한 복잡한 경계들과 상호작용하기 위해 LLM 기반 에이전트를 배포할 때, 우리는 기호적 추론 (symbolic reasoning)과 공간적/시각적 지각 (spatial/visual perception) 사이의 근본적인 긴장 상태에 직면하게 됩니다.

LLM은 본질적으로 토큰 (tokens)—즉, 텍스트, 코드, 구조화된 데이터의 이산적이고 기호적인 표현—을 기반으로 작동합니다. HTML 문자열이 주어지면, LLM은 마크업을 태그, 속성, 텍스트 노드의 선형 시퀀스로 처리합니다. LLM은 레이블 (label)과 입력 필드 (input field) 사이의 관계를 추론하기 위해 기호적 파싱 (symbolic parsing)을 수행합니다.

하지만 인터페이스가 Shadow DOM, Canvas 렌더링 또는 iFrame에 의존할 경우, LLM에 제공되는 기호적 텍스트 스트림 (symbolic text stream)은 불완전하거나, 손상되거나, 혹은 완전히 누락됩니다.

이러한 불일치를 해결하기 위해서는 가공되지 않은 시각적 인지 (visual perception)와 프로그래밍 방식의 DOM 조작 (programmatic DOM manipulation) 사이의 간극을 메우는 멀티모달 에이전트 아키텍처 (multi-modal agentic architecture)를 설계해야 합니다. 이는 우리의 첫 번째 주요 아키텍처 개념인 시각적 접지 (Visual Grounding) 및 공간 좌표 변환 (Spatial Coordinate Translation)으로 이어집니다.

헤드리스 아키텍트 (The Headless Architect) vs. 사이트 인스펙터 (The Site Inspector)

당신이 거대한 마천루의 건설을 관리하고 있다고 상상해 보십시오.

• 전통적인 자동화 스크립트 (Traditional Automation Script)는 정확한 밀리미터 단위의 측정값으로 프로그래밍된 경직된 자동 로봇 크레인과 같습니다: "앞으로 4,200밀리미터 이동, 팔을 300밀리미터 낮춤, 객체 ID #button_123을 고정하라." 만약 건설 팀이 벽을 단 1센티미터만 옮기더라도, 크레인은 석고보드에 충돌하고 맙니다.
• 미숙한 LLM 에이전트 (Naive LLM Agent)는 멀리 떨어진 사무실에 앉아 상위 수준의 건축 설계도 (원시 HTML DOM)를 바라보고 있는 건축가와 같습니다. 설계도에 방들이 명확하게 라벨링되어 있는 한, 건축가는 작업자들에게 어디로 가야 할지 알려줄 수 있습니다. 하지만 건축가가 내부가 기밀로 분류되어 강화 칸막이 뒤에 숨겨진 고보안 금고 (Shadow DOM)를 마주한다면 어떻게 될까요? 또는 건축 설계도는 존재하지 않고 오직 문손잡이가 그려진 그림만 있는 벽에 그려진 거대한 벽화 (HTML5 Canvas)를 마주한다면 어떨까요? 혹은 평면도 안에 별도의 잠긴 문과 독립적인 보안 요원을 갖춘 채 완전히 분리된 모듈형 사무실 유닛 (중첩된 iFrame)을 마주한다면 어떻게 될까요?

설계자는 더 이상 단순히 청사진을 읽는 것만으로는 부족합니다. 이제 모드를 전환해야 합니다. 현장을 물리적으로 살펴보고, 시각적 스냅샷을 캡처하며, 좌표 기하학 (coordinate geometry)을 사용하여 공간적 레이아웃을 해석하고, 이러한 시각적 단서를 상호작용 명령(예: "픽셀 좌표 $x=450, y=120$를 클릭하세요")으로 변환하며, 특화된 런타임 주입 (runtime injection) 스크립트를 통해 관리적 경계를 뚫고 들어갈 사이트 조사관(Site Inspector, 컴퓨터 비전 모델 및 멀티모달 에이전트 루프)을 파견해야 합니다.

Shadow DOM 뚫기: 이론과 메커니즘

AI 에이전트가 Shadow DOM과 어떻게 상호작용하는지 이해하려면, 섀도 트리 (shadow trees)의 메커니즘인 오픈(open) 대 클로즈드(closed) 섀도 루트 (shadow roots)를 조사해야 합니다.

웹 컴포넌트가 섀도 루트를 생성할 때, 다음과 같은 모드를 지정합니다:

1. 오픈 모드 (mode: 'open'): 섀도 루트는 외부 자바스크립트 (JavaScript) 컨텍스트에서 호스트 요소의 shadowRoot 속성을 통해 접근할 수 있습니다 (예: hostElement.shadowRoot). 표준 CSS 및 글로벌 쿼리 셀렉터 (query selectors)가 자동으로 이를 뚫을 수는 없지만, 외부 스크립트가 호스트 요소에 대한 참조를 가지고 있다면 명시적으로 경계를 탐색할 수 있습니다.
2. 클로즈드 모드 (mode: 'closed'): 섀도 루트가 완전히 숨겨집니다. 컴포넌트 외부에서 호스트 요소의 shadowRoot 속성에 접근하면 null을 반환합니다. 브라우저 내부 엔진이 섀도 트리를 보호하므로, 컴포넌트 작성자가 초기화 과정에서 명시적으로 훅 (hooks)을 노출하지 않는 한 표준 외부 스크립트가 그 내용을 조사하는 것은 불가능합니다.

AI 에이전트에게 클로즈드 섀도 루트를 마주하는 것은 건축학적인 벽과 같습니다. 에이전트는 클로즈드 섀도 루트를 어떻게 탐색할까요? 브라우저 런타임이 접근을 적극적으로 차단하기 때문에 표준 DOM 조사 API에 의존할 수 없습니다.

대신, 에이전트 아키텍처 (agentic architecture)는 런타임 몽키 패칭 (Runtime Monkey Patching) 및 이벤트 에뮬레이션 (Event Emulation)을 채택해야 합니다. 브라우저 디버깅 프로토콜 (예: MCP 서버를 통해 인터페이스하는 Chrome DevTools Protocol)을 활용함으로써, 에이전트는 컴포넌트가 초기화되기 전에 실행 컨텍스트 (execution context)에 커스텀 JavaScript를 주입하거나, 컴포넌트의 생성자 (constructor)를 가로채서 클로즈드 섀도 루트 (closed shadow roots)가 생성되는 시점에 해당 참조를 캡처할 수 있습니다.

또 다른 방법으로, 에이전트는 컴퓨터 비전 (Computer Vision) 및 접근성 트리 재구성 (Accessibility Tree Reconstruction)에 전적으로 의존할 수 있습니다. 섀도 루트가 클로즈드 상태라 하더라도, 렌더링된 시각적 출력물은 브라우저의 그래픽 레이어에 그려지며, 그 시맨틱 요소 (semantic elements)들은 종종 브라우저의 기저에 있는 접근성 트리 (Accessibility Object Model - AOM)에 등록됩니다. DOM 트리 대신 접근성 트리를 쿼리함으로써, 에이전트는 JavaScript 캡슐화 장벽을 완전히 우회하여 클로즈드 섀도 컴포넌트 내부에 잠긴 요소들의 시맨틱 역할 (semantic role), 이름 (name), 그리고 경계 상자 (bounding box)를 추출할 수 있습니다.

Canvas 해독하기: 비전 중심의 브라우저 자동화

에이전트가 HTML5 Canvas 요소를 마주하면, 상징적 DOM 파싱 (symbolic DOM parsing)의 유용성은 제로에 수렴합니다. <canvas> 태그는 본질적으로 JavaScript가 Canvas API (getContext('2d') 또는 getContext('webgl'))를 사용하여 픽셀을 그리는 빈 캔버스 (말 그대로)이기 때문입니다.

클라우드 기반 디자인 도구, 인터랙티브 지도, 또는 복잡한 데이터 시각화 대시보드와 같은 캔버스 기반 인터페이스와 AI 에이전트가 상호작용할 수 있도록 하려면, 우리는 인지-번역-행동 파이프라인 (Perception-Translation-Action Pipeline)을 구축해야 합니다.

Canvas 해석의 메커니즘

1. 시각적 샘플링 (Visual Sampling): 에이전트는 캔버스 (canvas) 요소를 포함하는 브라우저 뷰포트 (viewport)의 고해상도 스크린샷을 주기적으로 캡처합니다.
2. 시각적 인입 및 공간 프롬프팅 (Visual Ingestion & Spatial Prompting): 이 스크린샷은 멀티모달 시각-언어 모델 (multi-modal vision-language model)로 전달됩니다. 구조화된 퓨샷 프롬프팅 (few-shot prompting) 기술을 사용하여, 모델은 이미지 내에 렌더링된 UI 컨트롤을 식별하도록 지시받습니다 (예: "캔버스 오른쪽 상단에 있는 'Export' 버튼을 찾으세요").
3. 좌표 정규화 (Coordinate Normalization): 시각 모델은 캔버스 크기에 상대적인 정규화된 2D 경계 상자 (bounding box) 좌표 $[ymin, xmin, ymax, xmax]$ 또는 특정 지점 좌표 $[x, y]$를 반환합니다.
4. 합성 이벤트 생성 (Synthetic Event Generation): DOM에는 해당 좌표에 버튼이 존재하지 않기 때문에, 문서 요소 (document element)를 클릭해도 아무런 동작이 일어나지 않습니다. 에이전트 프레임워크는 페이지 상의 캔버스 요소의 경계 클라이언트 사각형 (bounding client rect)에 대한 정확한 오프셋 (offset)을 계산해야 하며, 브라우저 자동화 프리미티브 (automation primitives)를 통해 캔버스 요소로 직접 전달되는 저수준 마우스 이벤트 (mousedown, mouseup, click, 또는 복잡한 mousemove 드래그 시퀀스)를 합성해야 합니다.

이는 컴퓨터 비전 (computer vision)을 합성된 DOM (synthetic DOM)으로 변환합니다. 에이전트는 픽셀을 상호작용 가능한 노드 (interactive nodes)로 취급함으로써 캔버스에 대한 정신적 지도 (mental map)를 효과적으로 구축하며, 비의미적 (non-semantic) 그래픽 렌더링과 목표 지향적인 에이전트 행동 사이의 간극을 메웁니다.

중첩된 iFrame 탐색: 컨텍스트 격리 및 보안 경계

Shadow DOM이 동일한 애플리케이션 클러스터 내의 마이크로서비스라면, 중첩된 iFrame은 별도의 네트워크 방화벽 뒤에서 실행되는 독립적인 애플리케이션입니다.

iFrame (<iframe/>)은 부모 페이지에 완전히 분리된 문서를 로드합니다. 이는 AI 에이전트에게 심각한 이론적 및 구조적 장애물을 초래합니다: