인공지능 웹 에이전트의 잠재적 사용 사례와 시장 기회를 살펴보는 한 가지 방법은 이와 유사한 시스템을 구축하려는 이전 시도, 그 한계, 그리고 새로운 기술이나 변화가 역학관계를 어떻게 바꿀 수 있는지 살펴보는 것입니다.

직접적인 시장 범주 중 하나는 로봇 프로세스 자동화(RPA)입니다. RPA는 기업이 송장 처리나 데이터 입력과 같은 반복적이고 표준화된 작업을 처리하는 자동화 봇을 구축할 수 있게 해주는 소프트웨어 범주입니다. 그러나 RPA 솔루션의 한계는 매우 명확합니다. 표준화되지 않거나 계속 변화하는 프로세스를 다루는 데 어려움을 겪으며, 각각의 자동화에 대해 높은 설정 비용이 필요합니다.

반면, 컴퓨터와 브라우저를 직접 제어할 수 있는 AI 웹 에이전트는 훨씬 더 복잡한 상황을 훨씬 더 적은 설정 비용으로 처리할 수 있다는 점에서 매우 흥미롭습니다. 특정 자동화를 구축하는 대신, 에이전트는 웹사이트를 탐색하고 데이터를 추출하며 형식 변경에 관계없이 작업을 완료할 수 있습니다.

단순한 자동화를 넘어서, 이러한 AI 에이전트는 고객 지원, 영업, 마케팅과 같은 더 지능적인 작업을 수행할 수 있습니다. 더 많은 시스템에 액세스하고 의사 결정 능력을 활용하여 이러한 AI "근로자"는 더 다양한 사용 사례, 특히 낮은 볼륨의 소비자 애플리케이션에 배포될 수 있습니다.

그러나 유용한 AI 근로자 솔루션을 제공하는 핵심 과제는 단순히 기술적 이해뿐만 아니라 특정 직무 기능에 대한 엔드 투 엔드 워크플로 지식입니다. Hotspot의 최근 연구 보고서는 1,400명 이상의 글로벌 영업 리더를 조사하여 현대 영업 워크플로와 AI 사용 사례에 대한 귀중한 통찰을 제공하며, 이는 영업 기능을 위한 AI 에이전트 구축에 매우 도움이 될 수 있습니다.

요약하면, AI 웹 에이전트의 주요 기회는 다음과 같습니다:

• 전통적인 RPA에 비해 더 복잡하고 비표준화된 작업 처리
• 자동화를 위한 설정 비용 감소
• 단순한 자동화를 넘어 고객 지원, 영업 등 더 지능적인 작업 수행
• 특정 직무 기능에 대한 깊이 있는 워크플로 지식을 활용하여 더 효과적인 AI 에이전트 구축

접근 방식 1: GPT-4V 기반 웹 스크래퍼

1. Puppeteer와 같은 Node.js 라이브러리를 사용하여 웹 페이지의 스크린샷을 찍고 웹 브라우저를 제어합니다.
2. Python 스크립트를 만들어 JavaScript 파일을 호출하여 스크린샷을 찍고 GPT-4V를 사용하여 스크린샷에서 데이터를 추출합니다.
3. Python 스크립트는 이미지를 base64로 변환하고, 스크린샷을 찍으며, GPT-4V를 사용하여 스크린샷에서 정보를 추출하는 함수를 정의합니다.
4. 이 스크립트는 이러한 기능을 연결하여 일반적인 스크래핑 서비스에서 차단되는 웹사이트에 액세스할 수 있는 강력한 웹 스크래퍼를 만듭니다.

접근 방식 2: 웹 AI 에이전트 구축

1. 다양한 라이브러리를 가져오고 OpenAI 인스턴스와 명령줄 인터페이스를 설정하는 Node.js 파일을 만듭니다.
2. 웹 페이지의 모든 상호 작용 가능한 요소를 식별하고 특수 속성을 추가하는 highlightLinks 함수를 구현합니다.
3. GPT-4V에 대한 시스템 메시지를 설정하고 사용자 프롬프트와 현재 웹 페이지 상태를 기반으로 GPT-4V의 응답을 가져오는 메인 함수를 정의합니다. 그런 다음 다음을 수행합니다:
   • 링크를 클릭해야 한다는 응답이 있는 경우 해당 요소를 찾아 클릭합니다.
   • 새 URL을 방문해야 한다는 응답이 있는 경우 해당 URL로 이동하고 링크를 강조 표시합니다.
   • 일반 메시지인 경우 결과를 사용자에게 표시합니다.
4. 이 웹 AI 에이전트는 여러 웹사이트를 탐색하고, 링크를 클릭하며, GPT-4V의 기능을 활용하여 복잡한 조사 작업을 수행할 수 있습니다.

두 가지 접근 방식 모두 GPT-4V와 같은 대규모 언어 모델을 활용하여 강력한 웹 자동화 및 조사 도구를 구축하는 방법을 보여줍니다. 첫 번째 접근 방식은 웹 스크래핑에 초점을 맞추고, 두 번째 접근 방식은 더 상호 작용적인 웹 에이전트를 만듭니다.

GPT-4V 기반 웹 스크래퍼를 구축하기 위해 Node.js 라이브러리인 Puppeteer를 사용하여 웹 브라우저를 제어하고 스크린샷을 찍겠습니다. 단계별 가이드는 다음과 같습니다:

1. screenshot.js라는 새 파일을 만들고 필요한 라이브러리를 가져옵니다:

const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');

2. 스크래핑할 URL과 타임아웃 값을 정의합니다:

const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60초

3. 브라우저를 실행하고, URL로 이동하며, 스크린샷을 찍는 비동기 함수를 만듭니다:

async function takeScreenshot() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
  await browser.close();
}

4. 이 예제에서는 puppeteer-extra 플러그인을 사용하여 브라우저를 웹사이트에서 덜 감지되도록 만듭니다.

5. takeScreenshot() 함수를 실행하여 스크린샷을 캡처합니다:

takeScreenshot();

이제 node screenshot.js를 실행하면 Wikipedia 홈페이지의 스크린샷이 screenshot.jpg 파일에 저장됩니다.

다음으로 Python 스크립트를 만들어 스크린샷과 GPT-4V를 사용하여 웹사이트에서 데이터를 추출하겠습니다:

1. vision_scraper.py라는 새 파일을 만들고 필요한 라이브러리를 가져옵니다:

import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")

2. 이미지를 base64로 변환하고 screenshot.js 스크립트를 사용하여 스크린샷을 찍는 함수를 정의합니다:

def image_to_b64(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

def url_to_screenshot(url):
    if os.path.exists("screenshot.jpg"):
        os.remove("screenshot.jpg")
    try:
        subprocess.run(["node", "screenshot.js"], check=True)
        return "screenshot.jpg"
    except subprocess.CalledProcessError:
        return None

3. GPT-4V를 사용하여 스크린샷에서 정보를 추출하는 함수를 만듭니다:

def vision_extract(image_b64, prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a web scraper. Your job is to extract information based on a screenshot of a website and user instructions."},
            {"role": "user", "content": prompt},
            {"role": "user", "content": image_b64}
        ],
        max_tokens=2048,
        n=1,
        stop=None,
        temperature=0.7,
    )
    return response.choices[0].message.content.strip()

4. 모든 것을 vision_query() 함수에 연결합니다:

def vision_query(url, prompt):
    screenshot_path = url_to_screenshot(url)
    if screenshot_path:
        image_b64 = image_to_b64(screenshot_path)
        return vision_extract(image_b64, prompt)
    else:
        return "Error: Unable to capture screenshot."

5. vision_query() 함수를 사용하여 웹사이트에서 정보를 추출할 수 있습니다:

result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

이 예제에서는 지정된 LinkedIn 프로필의 스크린샷을 찍고 GPT-4V를 사용하여 경력 경험 섹션을 추출합니다. 프롬프트를 사용자 정의하여 웹사이트에서 다른 유형의 정보를 추출할 수 있습니다.