작동 원리 심층 분석 (Under the Hood)
이 놀랍도록 매끄러운 도구가 어떻게 화면 탈취 현상 없이 로그인 상태를 실시간으로 공유할 수 있는지, 그 기술적 구조와 데이터 흐름을 여러 측면에서 하나씩 깊이 파헤쳐 보겠습니다.
1. 듀얼 워크스페이스 아키텍처
Ego-lite의 렌더링 프로세스는 사용자 영역과 에이전트 영역으로 나뉘어 독립적으로 동작합니다. 크로미움이 자랑하는 다중 프로세스 아키텍처를 극대화하여 활용한 구조입니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
flowchart TD
UserNode["일반 사용자"]
AgentNode["AI 에이전트 CLI"]
EgoLite["Ego 브라우저 메인 프로세스"]
MainWorkspace["전면 메인 워크스페이스"]
EgoSpace1["백그라운드 에이전트 스페이스 1"]
EgoSpace2["백그라운드 에이전트 스페이스 2"]
SharedProfile["로컬 크로미움 공유 프로필"]
UserNode --> MainWorkspace
AgentNode --> EgoLite
EgoLite --> EgoSpace1
EgoLite --> EgoSpace2
MainWorkspace --> SharedProfile
EgoSpace1 --> SharedProfile
EgoSpace2 --> SharedProfile
위 다이어그램에서 명확히 알 수 있듯이, 사용자가 눈으로 보고 조작하는 전면 워크스페이스와 에이전트가 내부적으로 조작하는 스페이스 1, 스페이스 2는 시각적 렌더링 관점에서 철저히 분리되어 있습니다. 에이전트 스페이스는 모니터 화면의 프레임 버퍼에 픽셀을 그리지 않는 오프스크린 렌더러를 사용합니다. 따라서 에이전트가 특정 DOM 요소에 클릭 이벤트를 강제로 발생시켜도 운영체제 레벨의 마우스 커서가 물리적으로 이동하지 않습니다. 모든 것은 브라우저 엔진 내부의 합성 이벤트로 안전하게 처리되므로, 사용자가 타이핑 중인 입력창의 포커스를 잃어버리는 포커스 스틸링 현상이 원천적으로 차단됩니다.
2. 세션 마이그레이션과 상태 공유의 원리
에이전트가 인증의 장벽을 넘을 수 있도록, 초기 설치 시 Ego-lite는 매우 영리하고 사용자 친화적인 접근을 취합니다. 복잡한 환경 변수를 설정하거나 인증 토큰을 수동으로 복사해 넣는 대신, 사용자가 매일 사용하던 구글 크롬의 데이터를 그대로 안전하게 이식해 옵니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
flowchart LR
OSKeychain["macOS 운영체제 키체인"]
ChromeProfile["기존 구글 크롬 데이터베이스"]
MigrationEngine["내부 마이그레이션 엔진"]
EgoLocalProfile["Ego 로컬 통합 프로필"]
AgentAccess["에이전트 접근 권한"]
OSKeychain --> MigrationEngine
ChromeProfile --> MigrationEngine
MigrationEngine --> EgoLocalProfile
EgoLocalProfile --> AgentAccess
이 데이터 마이그레이션 과정은 전적으로 로컬 기기 내에서만 폐쇄적으로 이루어집니다. 운영체제의 정상적인 보안 권한 승인을 거쳐 기존 크롬의 SQLite 데이터베이스를 복호화하고, 이를 Ego-lite의 고유 프로필 폴더로 안전하게 이식합니다. 결과적으로 에이전트는 사용자와 완벽하게 동일한 브라우저 지문과 세션 쿠키, 그리고 로컬 스토리지 데이터를 획득하게 됩니다. X.com(구 트위터)이나 깃허브, 심지어 접근이 까다로운 사내 인트라넷 보안 페이지에 접속할 때조차 추가적인 로그인 창 없이 이미 사용자가 로그인해 둔 상태 그대로 화면을 맞이하게 됩니다.
3. 스킬 브릿지와 상호작용의 흐름
에이전트가 실제 브라우저를 조작하기 위해서는 양방향으로 소통할 수 있는 튼튼한 다리가 필요합니다. 이를 위해 제공되는 것이 바로 자바스크립트 기반의 브릿지인 스킬 패키지입니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
sequenceDiagram
participant Dev as 일반 사용자
participant CLI as 코딩 에이전트
participant Skill as 자바스크립트 통신 브릿지
participant Space as 격리된 백그라운드 스페이스
Dev->>CLI: 특정 대시보드 데이터 수집 지시
CLI->>Skill: URL 이동 함수 호출
Skill->>Space: 대상 페이지 로드 시작
Space-->>Skill: 로딩 및 렌더링 완료 응답
CLI->>Skill: 화면 구조 스냅샷 요청
Skill->>Space: DOM 파싱 및 참조 ID 태깅
Space-->>CLI: 추상화된 UI 요소 목록 반환
CLI->>Skill: 특정 참조 ID에 클릭 이벤트 지시
Skill->>Space: 시스템 내부 클릭 이벤트 발송
Space-->>CLI: 액션 완료 및 상태 갱신 응답
CLI-->>Dev: 최종 수집 결과 마크다운 보고
이러한 상호작용 흐름은 철저하게 자바스크립트 함수 호출 기반으로 동작합니다. 에이전트는 사람처럼 시각적인 픽셀을 분석하여 마우스를 옮기는 대신, 브라우저가 관리하는 DOM 노드 구조에 직접적으로 접근하여 가장 오류가 적고 빠른 방법으로 이벤트를 발생시키고 데이터를 읽어옵니다.
4. 시각적 인지 대신 의미론적 스냅샷 활용
기존의 유행하던 웹 자동화 에이전트들은 주로 비전 언어 모델을 활용했습니다. 렌더링된 화면 전체를 무거운 이미지 파일로 캡처하여 원격 API로 전송한 뒤, 인공지능 모델에게 특정 버튼의 X와 Y 픽셀 좌표를 추론하게 하는 방식입니다. 이는 필연적으로 막대한 네트워크 대역폭과 비싼 토큰 비용, 그리고 뼈아픈 지연 시간을 발생시킵니다.
Ego-lite는 이 비효율을 의미론적 스냅샷 메커니즘으로 말끔하게 해결합니다. 에이전트가 현재 페이지의 상태를 인지해야 할 때, 통신 브릿지는 화면을 이미지로 찍거나 방대한 전체 HTML 문자열을 무식하게 던져주지 않습니다. 대신 브라우저의 DOM 트리를 순회하며 레이아웃을 위한 껍데기 태그와 숨겨진 요소들을 모두 쳐내고, 상호작용이 가능한 버튼, 텍스트 입력창, 링크 요소들만 정교하게 추려냅니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
pie title "API 통신 과정에서의 토큰 절감 효과"
"DOM 기반 필터링에 의한 토큰 절감분" : 45
"실제로 소모되는 유효 토큰 통신량" : 55
추려낸 요소들에는 @1, @2와 같은 짧고 직관적인 참조 번호를 부여하여 극도로 압축된 텍스트 목록으로 변환합니다. 에이전트는 이 텍스트로 된 지도만 보고도 fill('@1', 'AI 브라우저 검색')이라는 함수형 명령을 즉각적이고 정확하게 내릴 수 있습니다. 이러한 코드 기반 접근 덕분에 불필요한 이미지 분석 시간이 사라져 전체 작업 속도가 눈에 띄게 빨라지며, API 호출 비용은 기존 대비 최소 40퍼센트에서 최대 60퍼센트까지 극적으로 절감됩니다.
5. 데이터와 작업의 관계 모델
시스템 내부적으로 브라우저의 사용자 프로필과 에이전트가 파생시키는 스페이스 작업들은 다음과 같은 구조적 관계를 형성합니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
erDiagram
EgoProfile {
string profileIdentifier
string secureCookies
string localStorageData
}
EgoSpace {
string spaceIdentifier
boolean offscreenRender
string currentUrlPath
}
EgoTask {
string instructionCommand
string executionProgress
}
EgoProfile ||--o{ EgoSpace : inherits
EgoSpace ||--o{ EgoTask : executes
이 다이어그램이 보여주듯, 단 하나의 통합된 프로필 데이터를 기반으로 무수히 많은 논리적 스페이스가 동시에 파생될 수 있습니다. 여러 명의 AI 에이전트가 각자의 스페이스에서 서로 다른 도메인의 작업을 수십 개 동시에 실행하더라도, 근간이 되는 로그인 상태와 세션 정보는 흔들림 없이 동일하게 유지되고 공유됩니다.
6. 내부 상태 전이 메커니즘
에이전트가 백그라운드 스페이스 내에서 복잡한 임무를 수행할 때, 각 단계는 엄격한 상태 머신에 의해 관리됩니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
stateDiagram-v2
[*] --> 대기상태
대기상태 --> 명령수신 : 자연어 또는 코드 지시
명령수신 --> URL진입 : 브릿지 이동 명령
URL진입 --> 페이지로드완료 : DOM 구조 안착
페이지로드완료 --> 스냅샷추출 : 화면 분석
스냅샷추출 --> 액션실행 : 폼 주입 및 클릭
액션실행 --> 화면변화감지 : 비동기 렌더링 추적
화면변화감지 --> 스냅샷추출 : 변경된 상태 재평가
화면변화감지 --> 작업달성 : 목표 조건 충족
작업달성 --> [*]
특히 액션 이후 화면의 미세한 변화를 감지하고 곧바로 스냅샷 추출 상태로 되돌아가는 재평가 루프가 매우 중요합니다. 최신 웹사이트들은 페이지 전체를 새로고침하지 않고 필요한 부분만 비동기적으로 업데이트하는 단일 페이지 애플리케이션 구조가 대부분입니다. 이러한 재평가 사이클 덕분에 로딩 스피너가 돌고 있거나 팝업 창이 늦게 뜨는 환경에서도 자동화 스크립트가 깨지지 않고 끝까지 목표를 달성할 수 있습니다.
7. 브라우저 스킬 컴포넌트 구조
에이전트가 가져다 쓰는 도구들의 내부 클래스 구조는 확장성과 명확성을 고려하여 설계되었습니다.
%%{init: {"theme":"base","themeVariables":{"primaryColor":"#F0EEE9","primaryBorderColor":"#2a78d6","primaryTextColor":"#2b2926","secondaryColor":"#e8f0fb","secondaryBorderColor":"#4a3aa7","secondaryTextColor":"#2b2926","tertiaryColor":"#eafaf3","tertiaryBorderColor":"#1baf7a","tertiaryTextColor":"#2b2926","lineColor":"#8a8578","textColor":"#2b2926","edgeLabelBackground":"#F0EEE9","noteBkgColor":"#F0EEE9","noteTextColor":"#2b2926","noteBorderColor":"#8a8578","clusterBkg":"#faf9f6","clusterBorder":"#d8d4c8","fontFamily":"Pretendard, sans-serif"}}}%%
classDiagram
class BridgeConnector {
+String uniqueAgentId
+establishConnection()
}
class SnapshotEngine {
+traverseDOMTree()
+filterInteractiveNodes()
+assignReferenceTags()
}
class ActionExecutor {
+navigateUrl()
+fillInput()
+dispatchClick()
+waitExplicitly()
+captureState()
}
BridgeConnector *-- SnapshotEngine
BridgeConnector *-- ActionExecutor
가장 자주 쓰이는 5가지 핵심 자바스크립트 인터페이스가 외부에 노출되며, 개발자는 복잡한 셀레니움 문법을 배울 필요 없이 이 간결한 인터페이스만으로도 거의 모든 종류의 웹 조작을 에이전트에게 위임할 수 있습니다.