멀티모달 에이전트와 Computer-Use (Capstone)

2026년 최전선 제품은 스크린샷을 읽고, 버튼을 클릭하고, 웹 UI(User Interface)를 탐색하고, 양식을 채우며, 워크플로(workflow)를 처음부터 끝까지(end-to-end) 완수하는 멀티모달 에이전트(multimodal agent)입니다. SeeClick과 CogAgent(2024)는 GUI 그라운딩(GUI grounding)이라는 기본 단위가 실제로 동작함을 증명했습니다. Ferret-UI는 이를 모바일 환경으로 확장했고, ChartAgent는 차트를 다루기 위한 시각적 도구 사용(visual tool-use)을 도입했습니다. VisualWebArena와 AgentVista(2026)는 최전선 모델들이 쫓고 있는 벤치마크이며, 그런데도 Gemini 3 Pro와 Claude Opus 4.7조차 AgentVista의 어려운 과제에서 약 30%에 그치고 있습니다. 이 Capstone은 Phase 12에서 다룬 모든 실마리를 하나로 모읍니다. 즉, 지각(perception; 고해상도 VLM(Vision Language Model)), 추론(reasoning; 도구를 사용하는 LLM), 그라운딩(grounding; 좌표 출력), 장기 기억(long-horizon memory), 그리고 평가(evaluation)까지 통합합니다.

유형: Capstone 언어: Python (표준 라이브러리, action schema와 agent loop 뼈대) 선수 지식: Phase 12 · 05 (LLaVA), Phase 12 · 09 (Qwen-VL JSON), Phase 14 (Agent Engineering) 예상 시간: 약 240분

학습 목표

• 멀티모달 에이전트 루프를 설계합니다. 지각(perceive) → 추론(reason) → 행동(act) → 관찰(observe) → 반복(repeat)으로 이어지는 흐름입니다.
• VLM이 JSON으로 출력할 수 있는 GUI 그라운딩 출력 스키마(schema)를 만듭니다. 클릭 좌표, 텍스트 입력, 스크롤(scroll), 드래그(drag)를 포함합니다.
• 스크린샷 전용 에이전트, 접근성 트리(accessibility tree) 에이전트, 하이브리드(hybrid) 에이전트를 비교합니다.
• 작은 VisualWebArena 일부 과제(slice) 위에서 멀티모달 에이전트 벤치마크 평가를 설정합니다.

문제

예약 사이트의 워크플로를 떠올려 봅시다. "4월 15일 도쿄행 비행기를 찾아줘. 통로 좌석이고 800달러 미만이면 예약해줘."

멀티모달 에이전트는 다음 일들을 수행해야 합니다.

1. 브라우저의 스크린샷을 캡처합니다.
2. 스크린샷, URL, 목표를 합쳐서 계획(plan)으로 파싱합니다.
3. 구조화된 행동(action)을 출력합니다. 예를 들어 (x, y) 좌표 클릭, 특정 요소(element) E에 "Tokyo" 입력, 아래로 스크롤, 라디오 버튼 선택과 같은 행동들입니다.
4. 브라우저에 그 행동을 적용합니다.
5. 새로 만들어진 상태, 즉 다음 스크린샷을 관찰합니다.
6. 과제가 완료될 때까지 같은 흐름을 반복합니다.

각 단계는 멀티모달 VLM 호출 하나에 해당합니다. VLM의 출력은 반드시 파싱 가능한 JSON이어야 합니다. 오류는 단계가 거듭될수록 누적되기 때문에 오류 회복(error recovery)이 매우 중요합니다.

개념

GUI 그라운딩 — 기본 단위(primitive)

GUI 그라운딩은 한 장의 스크린샷과 자연어 지시가 주어졌을 때, 클릭할 (x, y) 좌표 또는 그 외의 행동을 출력하는 일을 가리킵니다.

SeeClick(arXiv:2401.10935)은 이를 대규모로 성공시킨 최초의 공개 결과였습니다. 합성 데이터와 실제 GUI 데이터를 함께 사용해 VLM을 미세 조정(fine-tune)하고, 좌표를 평문 텍스트 토큰(plain text token)으로 그대로 출력하도록 했습니다. 그리고 실제로 잘 작동합니다.

CogAgent(arXiv:2312.08914)는 밀도가 높은 UI를 다루기 위해 1120x1120 고해상도 인코딩(high-resolution encoding)을 더했습니다. 웹 내비게이션 과제에서 약 84% 수준의 점수를 기록했습니다.

Ferret-UI(arXiv:2404.05719)는 모바일 UI에 집중하며, iOS 접근성 데이터와 통합되어 동작합니다.

출력 형식은 보통 JSON으로 정의합니다.

{"action": "click", "x": 384, "y": 220, "element_desc": "Search button"}

element_desc는 오류 회복에 큰 도움이 됩니다. 스크린샷 사이에서 좌표가 어긋나더라도, 의미 정보(semantic hint)가 함께 들어 있으면 시스템이 그 의미를 단서로 다시 그라운딩할 수 있기 때문입니다.

행동 스키마(Action schema)

일반적인 행동 스키마는 6-10개 정도의 행동 유형으로 구성됩니다.

• click: (x, y)
• type: (text, x?, y?)
• scroll: (direction, amount)
• drag: (x0, y0, x1, y1)
• select: (option_index)
• hover: (x, y)
• navigate: (url)
• wait: (ms)
• done: (success, explanation)

에이전트는 매 단계마다 행동 한 개를 출력합니다. 브라우저 래퍼(wrapper)가 그 행동을 실행한 뒤 새 상태를 돌려줍니다.

스크린샷 전용 방식과 접근성 트리 방식

입력 모드는 크게 두 가지입니다.

• 스크린샷 전용(screenshot-only): 전체 이미지만 입력으로 받고, 구조 정보는 일절 없습니다. 가장 범용적이며 어떤 애플리케이션에서도 동작합니다.
• 접근성 트리(accessibility tree): 구조화된 DOM 또는 iOS 접근성 정보를 입력으로 받습니다. 그라운딩이 훨씬 안정적이지만, 트리가 노출되어 있는 환경에서만 사용할 수 있습니다.
• 하이브리드(hybrid): 두 입력을 모두 사용합니다. 클릭 같은 원자적(atomic) 행동에는 트리를 신뢰할 수 있는 그라운딩 수단(grounder)으로 쓰고, 의미적 문맥은 스크린샷에서 얻습니다.

실제 서비스용(production) 에이전트는 가능하면 하이브리드를 사용합니다. 브라우저 자동화(Selenium + accessibility) 환경에서는 항상 트리가 존재합니다. 반면 데스크톱 애플리케이션에서는 환경마다 트리 제공 여부가 달라집니다.

장기 기억(Long-horizon memory)

20단계로 이루어진 워크플로는 20장의 스크린샷을 만들어 냅니다. VLM의 컨텍스트(context)는 금세 가득 찹니다. 압축 전략은 크게 세 가지로 정리할 수 있습니다.

• 요약 체인(summary-chain): 5단계마다 지금까지 일어난 일을 텍스트로 요약하고, 오래된 스크린샷은 버립니다.
• 프레임 건너뛰기(skip-frame): 첫 번째 스크린샷, 마지막 스크린샷, 그리고 3장마다 한 장씩 유지합니다.
• 도구 기록 로그(tool-recorded log): 행동을 실행한 뒤 무엇을 했는지만 텍스트 로그로 남기고, 오래된 스크린샷은 다시 들여다보지 않습니다.

Claude의 컴퓨터 사용(computer-use) API는 로그 패턴을 사용합니다. 더 단순하고 더 안정적이기 때문입니다.

시각적 도구 사용(Visual tool use)

ChartAgent(arXiv:2510.04514)는 차트 이해를 위한 시각적 도구 사용을 도입했습니다. 잘라내기(crop), 확대(zoom), 광학 문자 인식(OCR; Optical Character Recognition), 외부 객체 탐지(detection) 호출을 활용합니다. 에이전트는 예를 들어 "(100, 200, 300, 400) 영역을 잘라낸 뒤 OCR을 호출하라"와 같은 도구 호출을 출력할 수 있습니다. 도구가 텍스트를 돌려주면 VLM은 그 결과를 받아 추론을 이어 갑니다.

이 패턴은 일반화됩니다. 마크 집합 프롬프팅(set-of-mark prompting), 영역 주석(region annotation), 외부 객체 탐지 도구는 모두 "도구 호출을 출력하고 구조화된 응답을 받는다"라는 공통된 스키마에 들어맞습니다.

2026년의 벤치마크

• ScreenSpot-Pro: 약 1천 장의 웹 스크린샷 위에서 GUI 그라운딩을 평가합니다. 공개 SOTA(State-of-the-Art)인 Qwen2.5-VL-72B는 약 85%, 최전선 모델은 약 90%입니다.
• VisualWebArena: 쇼핑, 포럼, 생활 정보 게시판(classifieds) 같은 처음부터 끝까지(end-to-end) 이어지는 웹 과제로 구성됩니다. 공개 SOTA는 약 20%, Gemini 3 Pro는 약 27%입니다.
• AgentVista(arXiv:2602.23166): 2026년 기준 가장 어려운 벤치마크입니다. 12개 도메인의 현실적인 워크플로로 구성되며, 최전선 모델은 27-40%, 공개 모델은 10-20% 수준의 점수를 기록합니다.
• WebArena / WebShop: 이보다 오래된 벤치마크들이며, 최전선 모델 기준으로는 이미 포화 상태(saturated)에 도달했습니다.

여전히 어려운 이유

에이전트 성능을 막는 병목은 다음과 같습니다.

1. 작은 단위에서의 시각적 그라운딩. "작은 X를 클릭해" 같은 지시는 모바일 해상도에서 자주 실패합니다.
2. 장기 계획. 10개 정도의 행동을 거치고 나면 에이전트가 원래 목표에서 점점 벗어나는 경향이 있습니다.
3. 오류 회복. 클릭이 실패했을 때, 예를 들어 잘못된 버튼을 누른 경우 그 사실을 감지하고 복구하는 학습 데이터 자체가 거의 없습니다.
4. 페이지 간 문맥. 탭 사이를 오가거나 긴 양식을 다루는 과정에서 상태(state)를 잃어버리기 쉽습니다.

연구 방향은 기억 아키텍처(memory architecture), 명시적 재계획(replanning), 그리고 행동의 성공 여부를 스크린샷 비교로 확인하는 멀티모달 검증(multimodal verification) 등입니다.

Capstone 직접 만들기

Capstone 과제는 컴퓨터 사용(computer-use) 에이전트를 직접 만드는 것입니다. 요구 사항은 다음과 같습니다.

1. 모의 예약 사이트 페이지(mock page)의 HTML과 스크린샷을 읽습니다.
2. 검색(search) → 선택(select) → 양식 채우기(fill form) → 제출(submit)로 이어지는 다단계 계획을 세웁니다.
3. 행동 스키마에 맞춘 JSON 형식의 행동을 출력합니다.
4. 고정된 10개 과제의 일부(slice) 위에서 평가합니다.

이 강의는 실제 브라우저로 확장하기 쉬운 스캐폴드 코드(scaffold code)를 제공합니다.

사용해보기

code/main.py는 Capstone용 스캐폴드(scaffold)입니다.

• 10가지 행동을 다루는 행동 스키마 JSON 정의
• 딕셔너리(dict)로 표현한 모의 브라우저 상태(mock browser state)
• 에이전트 루프(agent loop)의 뼈대 — 상태를 받고, 행동을 출력하고, 적용한 뒤 반복합니다.
• 합성 페이지(synthetic page) 위에서 처음부터 끝까지의 성공률을 측정하는 10개 과제 미니 벤치마크(mini-benchmark)
• 행동이 실패했을 때 호출되는 오류 회복 훅(error-recovery hook)

산출물 만들기

이 강의는 outputs/skill-multimodal-agent-designer.md를 만들어 냅니다. 컴퓨터 사용(computer-use) 제품의 도메인, 행동 집합, 평가 목표가 주어지면, 전체 에이전트 루프와 기억 전략, 그라운딩 모드, 예상 벤치마크 점수를 함께 설계해 주는 스킬(skill)입니다.

연습문제

1. (쉬움) screenshot_region 도구(잘라내기 + 확대(crop + zoom))를 행동 스키마에 추가해 봅니다. 어떤 과제에서 특히 도움이 될지 정리합니다.

2. (중간) AgentVista(arXiv:2602.23166) 논문을 읽고, 가장 어려운 과제 범주가 무엇인지, 최전선 모델조차 왜 실패하는지를 설명합니다.

3. (중간) 장기 기억 압축 전략을 설계합니다. 메모리에 살아 있는(live) 상태로 유지되는 스크린샷은 4장 이하로 제한하되, 로그는 개수에 제약 없이 유지할 수 있는 요약 체인(summary-chain)을 직접 설계해 봅니다.

4. (중간) 오류 회복 훅을 만듭니다. 행동이 실패했을 때, 예를 들어 버튼을 찾지 못했을 때 에이전트는 다음에 어떤 행동을 해야 할지 정의합니다.

5. (어려움) 스크린샷 전용 Claude 4.7과 스크린샷 + 접근성 트리(accessibility tree)를 함께 쓰는 하이브리드 Qwen2.5-VL을 10개의 웹 과제에서 비교합니다. 어떤 과제에서 어느 쪽이 우세한지 정리합니다.

핵심 용어

더 읽을거리

• Cheng et al. — SeeClick (arXiv:2401.10935)
• Hong et al. — CogAgent (arXiv:2312.08914)
• You et al. — Ferret-UI (arXiv:2404.05719)
• ChartAgent (arXiv:2510.04514)
• Koh et al. — VisualWebArena (arXiv:2401.13649)
• AgentVista (arXiv:2602.23166)