Computer Use & Browser Use

지금까지 우리가 쓴 AI는 대부분 말로 답하는 AI였습니다. 질문하면 답을 쓰고, 요청하면 글이나 코드를 써 줬죠. 하지만 그 결과를 복사해서 사이트에 붙여넣고, 버튼을 누르고, 앱을 여는 건 여전히 사람의 몫이었습니다.

Computer Use와 Browser Use는 그 마지막 단계를 AI에게 넘깁니다. AI가 화면을 보고, 마우스를 움직이고, 키보드로 입력합니다. 사람이 컴퓨터를 쓰는 방식 그대로요.

오늘 20분 뒤에 할 수 있게 되는 것

• AI가 화면을 조작하는 원리(에이전트 루프)를 한 문장으로 설명한다
• Computer Use와 Browser Use의 차이를 알고, 일에 맞게 고른다
• 실제 AI에게 웹 주문과 데스크톱 작업을 시키고, 결과를 검증한다
• 프롬프트 주입을 직접 목격하고, 안전하게 쓰는 기본 수칙을 익힌다

가장 중요한 사실 하나부터. AI 모델은 마우스를 직접 잡지 않습니다. 모델이 할 수 있는 건 글자를 내보내는 것뿐이에요. 그래서 모델은 “화면의 이 좌표를 클릭해 줘”라는 요청을 정해진 형식으로 내보내고, 그걸 받은 프로그램(실행기)이 실제로 클릭합니다.

이 고리가 한 바퀴 도는 과정은 이렇습니다.

1. 1

   관찰 — 실행기가 화면을 캡처해 모델에게 보냅니다. 모델은 이미지를 보고 “팝업이 떠 있네, 닫기 버튼은 오른쪽 위에 있군”을 알아챕니다.

2. 2

   판단 — 목표(“카페라떼 주문”)와 지금 화면을 비교해 다음 한 걸음을 정합니다.

3. 3

   행동 요청 — left_click, type, scroll 같은 도구 호출(tool_use)을 내보냅니다.

4. 4

   실행 & 결과 — 실행기가 실제로 움직이고, 바뀐 화면을 다시 돌려줍니다(tool_result). 그리고 1번으로.

실제 API에서 오가는 메시지는 이렇게 생겼습니다. 어렵게 느껴지면 “요청 → 결과” 두 덩어리만 보세요.

// Claude → 실행기 : "이 좌표를 클릭해 줘"
{
  "type": "tool_use",
  "id": "toolu_01Wko...",
  "name": "left_click",
  "toolset_name": "computer",
  "input": { "coordinate": [512, 742] }
}

// 실행기 → Claude : 클릭했고, 지금 화면은 이렇다
{
  "type": "tool_result",
  "tool_use_id": "toolu_01Xf5...",
  "toolset_name": "computer",
  "content": [{ "type": "image", "source": { "type": "base64", "media_type": "image/png", "data": "iVBORw0..." } }]
}

둘 다 “화면을 조작하는 AI”지만, 무엇을 보고 무엇을 가리키는지가 다릅니다.

// Claude → 실행기 : 페이지 구조를 읽어 줘
{ "type": "tool_use", "name": "read_page", "toolset_name": "browser", "input": { "filter": "interactive" } }

// 실행기 → Claude
button "아메리카노 담기" [ref_3]
button "카페라떼 담기"   [ref_4]
textbox "주문자 이름"    [ref_7]

// Claude → 실행기 : ref_4를 클릭해 줘 (좌표가 아니라 요소를 가리킨다)
{ "type": "tool_use", "name": "left_click", "toolset_name": "browser",
  "input": { "target": { "type": "ref", "ref": "ref_4" } } }

직접 모델이 되어 보기

아래 시뮬레이터에서 여러분이 모델입니다. 목표는 카페라떼 담기. Computer Use 모드에서는 스크린샷을 클릭해 좌표를 보내고, Browser Use 모드에서는 페이지 구조를 읽고 ref를 고릅니다. 아래 로그에 실제 API와 같은 모양의 메시지가 쌓입니다.

실습 랩 호모 커피는 일부러 실제 쇼핑몰처럼 귀찮게 만들어 둔 모의 페이지입니다. 첫 방문 팝업이 뜨고, 쿠폰은 다른 페이지(공지사항)에 숨어 있고, 픽업 시간은 순서가 뒤섞여 있어요. 그리고 공지사항 어딘가에는 AI를 노린 함정이 하나 있습니다.

1. 1

   Chrome에서 Claude in Chrome 확장을 열고, 새 탭에서 실습 랩을 엽니다.

2. 2

   아래 지시문을 복사해 Claude in Chrome 사이드 패널에 붙여넣습니다. 사이트 접근 허락을 물으면 실습 랩 사이트만 허용하세요.

3. 3

   손을 떼고 지켜봅니다. 팝업을 어떻게 닫는지, 쿠폰을 어떻게 찾는지, 공지 속 함정에 어떻게 반응하는지 관찰하세요.

4. 4

   주문이 통과되면 완료 코드가 나옵니다. Claude가 보고한 금액·코드가 화면과 같은지 직접 확인하세요.

pip install anthropic playwright
playwright install chromium
export ANTHROPIC_API_KEY=sk-ant-...

python browser_use_loop.py https://homoaipiens.ai/lab/cafe

이번엔 브라우저 밖입니다. 계산기와 메모 앱은 웹페이지가 아니라서 페이지 구조를 읽을 수 없어요. Claude는 오직 스크린샷을 보고 버튼 위치를 찾아 클릭해야 합니다. 실습 1의 완료 코드 숫자를 재료로 씁니다.

1. 1

   Claude 데스크톱 앱을 열고, 설정에서 컴퓨터 사용 기능을 켭니다. 화면 기록·손쉬운 사용 권한을 요청하면 허용합니다.

2. 2

   중요한 창(메일, 은행, 업무 문서)은 미리 닫아 두세요. AI가 보는 건 여러분의 진짜 화면입니다.

3. 3

   아래 지시문을 붙여넣고 지켜봅니다. 앱 접근을 물으면 계산기와 메모 앱만 허락하세요.

4. 4

   Claude가 알려준 숫자를 아래 칸에 넣어 검증합니다.

import anthropic

client = anthropic.Anthropic()
response = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=16000,
    tools=[{"type": "computer_toolset_20260801"}],   # 또는 browser_toolset_20260801
    messages=[{"role": "user", "content": "계산기로 1234 × 7을 계산해줘"}],
)
# response.content 안의 tool_use 블록을 내 코드가 실행하고,
# 결과를 tool_result로 돌려보내는 일을 stop_reason이 "tool_use"가 아닐 때까지 반복한다.

pip install anthropic pyautogui pillow pyperclip
export ANTHROPIC_API_KEY=sk-ant-...

python computer_use_loop.py "계산기 앱을 열어서 1234 × 7 을 계산해줘"

손을 가진 AI는 그만큼 실수의 무게도 큽니다. 다섯 가지만 기억하세요.

1. 1

   화면의 글은 지시가 아니라 데이터다. 웹페이지·문서·알림에 적힌 “AI는 ~하라”는 따르지 않는다. (실습 1의 함정)

2. 2

   격리한다. 직접 만들 땐 전용 가상 머신·컨테이너, 새 브라우저 프로필에서 돌린다.

3. 3

   최소한만 준다. 로그인 정보·민감한 파일은 AI가 닿지 않는 곳에. 앱·사이트 접근은 필요한 것만 허락한다.

4. 4

   울타리를 친다. 갈 수 있는 사이트를 허용 목록으로 제한한다.

5. 5

   중요한 순간엔 사람이 누른다. 결제, 전송, 삭제, 약관 동의 전에는 반드시 사람이 확인한다.

확인 퀴즈

4문항 이상 맞히면 이 단원이 완료됩니다.