🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 요약

smolagents에 비전 지원이 추가되어 VLM을 에이전트 파이프라인에서 기본적으로 활용하고, 특히 웹 브라우징처럼 시각 정보가 중요한 작업을 수행할 수 있게 되었습니다.

📌 핵심 요약

• smolagents는 이제 이미지 입력을 처리할 수 있어 비전 언어 모델을 에이전트 워크플로에 직접 결합할 수 있습니다.
• 원문은 웹 브라우징을 대표 사례로 들며, 텍스트 추출만으로는 위치, 색상, 아이콘, 시각적 배치 같은 정보를 충분히 복원할 수 없다고 설명합니다.
• 이미지는 에이전트 실행 시작 시 한 번 전달할 수도 있고, 브라우저 화면처럼 매 단계마다 동적으로 캡처해 에이전트 메모리에 추가할 수도 있습니다.
• 동적 이미지 입력은 MultiStepAgent의 ReAct 루프 끝에서 실행되는 callback을 통해 ActionStep 로그에 스크린샷을 넣는 방식으로 구현됩니다.
• 예시는 helium과 selenium을 이용해 웹 브라우저를 조작하고, 스크린샷 callback과 VLM 모델을 결합해 자율 웹 탐색 에이전트를 만드는 과정을 보여줍니다.

🧩 주요 포인트

1. smolagents는 이제 이미지 입력을 처리할 수 있어 비전 언어 모델을 에이전트 워크플로에 직접 결합할 수 있습니다.
2. 원문은 웹 브라우징을 대표 사례로 들며, 텍스트 추출만으로는 위치, 색상, 아이콘, 시각적 배치 같은 정보를 충분히 복원할 수 없다고 설명합니다.
3. 이미지는 에이전트 실행 시작 시 한 번 전달할 수도 있고, 브라우저 화면처럼 매 단계마다 동적으로 캡처해 에이전트 메모리에 추가할 수도 있습니다.
4. 동적 이미지 입력은 MultiStepAgent의 ReAct 루프 끝에서 실행되는 callback을 통해 ActionStep 로그에 스크린샷을 넣는 방식으로 구현됩니다.
5. 예시는 helium과 selenium을 이용해 웹 브라우저를 조작하고, 스크린샷 callback과 VLM 모델을 결합해 자율 웹 탐색 에이전트를 만드는 과정을 보여줍니다.

🧠 상세 정리

1. smolagents에 추가된 비전 지원의 의미

원문은 smolagents에 시각 능력을 부여했다는 발표로 시작하며, 핵심 변화는 비전 언어 모델을 에이전트 파이프라인에서 기본적으로 사용할 수 있게 되었다는 점입니다. TL;DR에서도 vision support가 추가되었고, 이를 통해 agentic pipeline 안에서 VLM을 native하게 활용할 수 있다고 명확히 밝힙니다. 이 변화는 단순히 이미지를 모델에 전달하는 기능을 넘어, 에이전트가 작업 도중 보고 판단해야 하는 환경을 더 풍부하게 다룰 수 있도록 하는 기반입니다. 특히 글은 웹 브라우징을 예시로 들며, 시각 정보가 에이전트에게 실질적인 능력 확장을 제공한다고 설명합니다.

2. 웹 브라우징에서 시각 정보가 중요한 이유

원문은 에이전트 환경에서 많은 기능이 ‘vision wall’ 뒤에 숨어 있다고 표현합니다. 웹 페이지는 단순 텍스트 추출만으로는 온전히 회수할 수 없는 풍부한 시각 정보를 갖고 있으며, 객체의 상대적 위치, 색상으로 전달되는 메시지, 특정 아이콘 같은 요소가 대표 사례로 제시됩니다. 이런 요소들은 페이지를 실제로 보는 사용자에게는 자연스럽지만, 텍스트만 처리하는 에이전트에게는 누락되기 쉽습니다. 따라서 시각 입력은 웹 브라우징 에이전트에게 일종의 초능력처럼 작동하며, 원문은 자율적으로 웹을 탐색하는 agentic browser를 이 기능의 예고편으로 소개합니다.

3. 이미지를 에이전트에 전달하는 두 가지 방식

원문은 에이전트에 이미지를 전달하는 방법을 두 가지로 나눕니다. 첫 번째는 시작 시점에 이미지들을 한꺼번에 제공하는 방식이며, Document AI처럼 처음부터 처리할 이미지가 정해져 있는 경우에 적합하다고 설명합니다. 두 번째는 작업 진행 중 이미지를 동적으로 추가하는 방식으로, 웹 브라우저가 어떤 행동을 수행한 뒤 viewport에 어떤 변화가 생겼는지 확인해야 하는 상황이 예시입니다. 이 구분은 이미지가 고정 입력인지, 아니면 에이전트의 행동 결과에 따라 계속 갱신되는 관찰값인지에 따라 설계가 달라진다는 점을 보여줍니다.

4. 실행 시작 시 이미지 전달: run 메서드와 task_images

고정된 이미지 입력을 처리하기 위해 smolagents는 agent.run 호출 시 images 인자를 받을 수 있게 되었습니다. 원문에는 agent.run("Describe these images:", images=[image_1, image_2]) 형태의 예시가 제시되며, 이 이미지 입력들은 사용자가 수행하고 싶은 작업 prompt와 함께 TaskStep의 task_images 속성에 저장된다고 설명합니다. 에이전트를 실행하면 이 이미지들이 모델에 전달되므로, 시각 요소가 포함된 긴 PDF를 바탕으로 행동을 결정하는 사례에 유용합니다. 이 방식은 작업 시작 전에 필요한 이미지가 이미 준비되어 있을 때 가장 단순하고 직접적인 통합 방법입니다.

5. MultiStepAgent와 ReAct 루프의 작동 구조

동적 이미지 추가를 이해하기 위해 원문은 smolagents의 에이전트 구조를 설명합니다. 모든 에이전트는 ReAct 프레임워크의 추상화인 MultiStepAgent 클래스를 기반으로 하며, 초기화 단계에서는 system prompt가 SystemPromptStep에 저장되고 사용자 질의가 TaskStep에 기록됩니다. 이후 반복 루프에서는 agent.write_inner_memory_from_logs()로 로그를 LLM이 읽을 수 있는 chat messages 목록으로 만들고, 이를 Model 객체에 보내 completion을 받은 뒤 action을 파싱합니다. ToolCallingAgent에서는 JSON blob, CodeAgent에서는 코드 조각이 action이 되며, 실행 결과는 ActionStep으로 메모리에 기록되고 각 단계 끝에서 step_callbacks가 실행됩니다.

6. callback을 통한 동적 스크린샷 주입

원문에서 이미지 지원이 추가된 지점은 각 단계 끝에 실행되는 callback입니다. 웹 브라우저 에이전트처럼 이미지가 동적으로 검색되거나 생성되는 사용 사례에서는 callback이 현재 브라우저 화면을 캡처하고, 그 이미지를 ActionStep의 이미지 관찰 필드에 기록합니다. 예시로 제시된 save_screenshot callback은 짧게 대기해 자바스크립트 애니메이션이 끝나도록 한 뒤 selenium driver에서 PNG 스크린샷을 가져오고, PIL Image로 열어 step_log.observations_images = [image.copy()] 형태로 저장합니다. 또한 이전 스크린샷을 제거해 처리 부담을 줄이고, 현재 URL 정보를 observations에 추가해 시각 관찰과 위치 정보를 함께 남깁니다.

7. helium과 selenium으로 구성한 웹 브라우저 에이전트

웹 브라우징 예시는 helium을 사용합니다. helium은 selenium 기반의 브라우저 자동화를 제공하므로, 에이전트가 click("top 10")처럼 화면에 보이는 텍스트를 기준으로 페이지 요소를 조작할 수 있게 해 줍니다. 원문은 별도 브라우저 조작 도구를 많이 만들 필요는 없지만, 이전 페이지로 돌아가는 go_back, 팝업을 닫는 close_popups, 현재 페이지에서 텍스트를 찾아 해당 위치로 이동하는 search_item_ctrl_f 같은 보조 도구는 필요하다고 설명합니다. 특히 텍스트가 없는 닫기 버튼을 가진 팝업은 helium만으로 잡기 어렵기 때문에, 여러 CSS selector를 순회하며 표시된 요소를 클릭하는 close_popups 도구를 제공합니다.

8. 모델 설정과 TransformersModel 사용 시 주의점

원문은 이미지 지원이 모든 모델 쪽에 추가되었다고 설명하면서, TransformersModel로 VLM을 사용할 때의 주의점을 따로 제시합니다. 제대로 작동하려면 초기화 시 flatten_messages_as_text를 False로 넘겨야 하며, 예시로 HuggingFaceTB/SmolVLM-Instruct와 device_map="auto"를 함께 사용하는 코드가 나옵니다. 데모에서는 더 큰 Qwen2VL 모델을 Fireworks API를 통해 사용하며, OpenAIServerModel에 api_key, api_base, model_id를 설정하는 예시를 보여줍니다. 이어 CodeAgent에는 go_back, close_popups, search_item_ctrl_f 도구, helium import 허용, save_screenshot callback, max_steps 20, verbosity_level 2가 설정됩니다.

9. 에이전트 지침과 실제 실행 예시

원문은 에이전트가 helium을 사용할 때 따라야 할 긴 지침도 제공합니다. 먼저 helium에서 필요한 것을 import하고 go_to로 사이트에 접근하며, 클릭 가능한 요소는 보이는 텍스트나 Link 객체로 클릭하라고 안내합니다. 버튼 클릭 후에는 한 번에 모든 문제를 풀려 하지 말고 최신 스크린샷을 보고 다음 행동을 결정하라고 강조하며, 로그인 시도 금지, scroll_down과 scroll_up 사용, 팝업은 close_popups 도구로 닫기, 최종 답변은 final_answer로 반환하기 같은 운영 규칙을 포함합니다. 실제 실행 요청은 GitHub trending의 최상위 저장소에서 top author의 프로필로 이동해 최근 1년 총 커밋 수를 찾는 작업이며, 원문은 이 과제가 사용한 VLM에 따라 항상 성공하지 않을 수 있는 어려운 작업이라고 덧붙입니다.

🧾 핵심 주장 / 시사점

• 이 글의 핵심은 VLM 자체보다, 에이전트 로그 구조 안에 이미지를 언제 어떻게 넣을 것인가에 있습니다. 시작 입력은 TaskStep에, 동적 관찰은 ActionStep callback에 넣는 구분이 실제 구현의 중심입니다.
• 웹 브라우징 에이전트에서 시각 입력은 선택 기능이 아니라 상태 관찰 수단에 가깝습니다. 클릭 이후 화면 변화, 팝업, 버튼 배치, 아이콘처럼 텍스트 추출로 놓치기 쉬운 정보가 다음 행동을 결정하는 근거가 됩니다.
• 원문은 강력한 VLM을 쓰더라도 자율 웹 탐색이 쉽지 않다고 분명히 말합니다. 모델 성능뿐 아니라 도구 설계, 단계별 지침, 스크린샷 메모리 관리, 팝업 처리 같은 주변 구조가 성공 여부에 큰 영향을 줍니다.

✅ 액션 아이템

• smolagents의 VLM 결합은 웹 브라우징 등 시각 정보가 핵심인 작업부터 본격 도입 대상으로 분류해 적용 범위를 정의한다.
• 텍스트 추출이 위치·색상·아이콘·배치 정보를 충분히 복원하지 못할 때 정적 이미지 입력과 매 단계 동적 캡처의 전환 기준을 분기해 둔다.
• MultiStepAgent의 ReAct 루프 종료 시점에 스크린샷 callback을 둬 ActionStep 로그에 이미지를 남기고 단계별 판단 근거를 에이전트 메모리에 누적한다.

❓ 열린 질문

• VLM은 웹 브라우징 같은 시각 의존 작업에 우선 적용하고 텍스트 위주 작업은 어디까지 제한해야 할까?
• 정적 이미지 전달과 단계별 동적 캡처 중 어떤 조건에서 어떤 방식을 선택하는 것이 탐색 정확도와 처리 효율성에 유리한가?
• helium·selenium 기반 자동화에서 스크린샷 callback이 누락될 경우 ActionStep 로그의 시각 상태 보강은 어떤 방식으로 설계해야 할까?