AI코딩 완전정복 › 클로드·GPT 완전정복 100단계 › 제3편 · 브라우저와 컴퓨터 › 제5부 › 45단계
이 쪽을 PDF로 보기
제5부 · 브라우저와 컴퓨터를 맡기다

45단계Claude Code, 연결자와 나눠 맡기기

화면으로만 되는 일은 브라우저에, 데이터로 되는 일은 연결자와 코드에 맡깁니다.

걸리는 시간 · 읽기 약 10분 · 따라 하기 약 60분 · 난이도 ★★★ 심화 · 처음엔 건너뛰어도 되는 단계 · 화면 확인 2026.09.27

이 단계를 마치면

  • 같은 일을 연결자로 할지, 내려받아 할지, 브라우저로 할지, 컴퓨터 사용으로 할지, Claude Code로 할지 구분할 수 있습니다.
  • 제3부에서 만든 웹페이지를 Claude in Chrome으로 사용자처럼 눌러 보고 문제 목록을 받을 수 있습니다.
  • 브라우저에서 찾은 문제를 Claude Code에 넘겨 고치는 흐름을 만들 수 있습니다.

망치를 새로 산 사람 눈에는 모든 것이 못으로 보인다고 합니다. Claude in Chrome을 처음 써 본 사람도 비슷해집니다. 무엇이든 브라우저로 시키고 싶어집니다. 그런데 한 번 생각해 봅시다. 메일함에서 지난달 거래처 메일을 모두 찾는 일을, Claude가 메일 화면을 한 페이지씩 넘기며 읽게 하는 편이 나을까요, 메일 시스템에 직접 연결해 검색하게 하는 편이 나을까요?

화면으로 할 일, 데이터로 할 일

브라우저 조작은 사람이 쓰는 화면을 그대로 쓰는 방식입니다. 어떤 사이트든 사람이 볼 수 있으면 Claude도 볼 수 있다는 것이 장점입니다. 대신 느립니다. 화면이 뜨기를 기다리고, 메뉴를 찾고, 한 페이지씩 넘깁니다. 사이트 디자인이 바뀌면 어제 되던 일이 오늘은 헤맬 수도 있습니다.

연결자는 다르게 일합니다. 사내 도구가 기계끼리 대화하도록 열어 둔 통로(API)로 곧장 데이터를 주고받습니다. 화면을 거치지 않으니 빠르고, 디자인이 바뀌어도 영향을 덜 받고, 어떤 권한으로 무엇을 읽고 쓸지도 분명하게 나뉩니다. 연결자가 무엇이고 어떻게 연결하는지는 제8부에서 자세히 다룹니다. 여기서는 판단 기준만 가져갑시다.

상황 먼저 쓸 것 이유
그 도구에 쓸 수 있는 연결자가 있습니다 연결자 빠르고, 권한이 분명하고, 화면 변화에 덜 흔들립니다
데이터를 내려받을 수 있습니다 내려받아 대화창·Cowork에서 처리 화면을 하나씩 읽는 것보다 파일 하나가 빠릅니다
연결자도 내려받기도 없고 웹 화면에서만 할 수 있습니다 Claude in Chrome 사람이 쓰는 웹 화면이 유일한 입구입니다
브라우저로 열리지 않는 설치형 프로그램에서만 할 수 있습니다 컴퓨터 사용(44단계) 화면을 보고 마우스와 키보드를 움직이는 것 말고는 길이 없습니다
웹페이지나 도구를 만들고 고칩니다 Claude Code 코드와 파일을 다루는 일입니다
만든 웹페이지가 제대로 보이는지 확인합니다 Claude in Chrome 사용자가 보는 화면에서 확인해야 합니다

순서로 정리하면 이렇습니다. 연결자가 있는지 먼저 봅니다. 없으면 내려받기가 되는지 봅니다. 둘 다 안 될 때 브라우저 조작을 씁니다. 웹 화면조차 없는 설치형 프로그램일 때만 44단계의 컴퓨터 사용을 꺼냅니다. 뒤로 갈수록 쓸 수 있는 곳은 넓어지지만 느려지고, 조심할 것도 많아집니다. Anthropic과 OpenAI가 모두 이 순서를 권합니다.

연결자빠르고 권한이 분명하다없으면내려받기파일로 받아 대화창·Cowork에서둘 다 안 되면브라우저 조작화면이 유일한 입구일 때
그림 9 · 연결자, 내려받기, 브라우저 조작 순서로 고릅니다

만든 사람과 써 보는 사람

Claude in Chrome이 가장 빛나는 곳 가운데 하나는 제2편과의 연결입니다. 제3부에서 우리는 Claude Code로 사내 도구를 만들고 배포했습니다. 30단계에서는 "다 됐다"는 보고를 그대로 믿지 말고 배포된 주소를 직접 열어 눌러 보라고 했습니다. 그 확인을 Claude in Chrome에게 맡길 수 있습니다.

역할을 나누면 이렇습니다. Claude Code는 만드는 사람입니다. 코드를 쓰고, 고치고, 배포합니다. Claude in Chrome은 써 보는 사람입니다. 배포된 주소를 열고, 처음 쓰는 사용자처럼 입력하고 눌러 보고, 이상한 점을 목록으로 적습니다. 만든 사람이 자기 작품을 검사하면 놓치는 것이 생깁니다. 사람 개발팀에서 만드는 사람과 시험하는 사람을 나누는 이유입니다.

Claude Code가 브라우저를 직접 다루도록 연결하는 방법도 있습니다. 이렇게 하면 Claude Code가 코드를 고친 뒤 스스로 브라우저를 열어 결과를 확인하는 흐름이 가능해집니다. 연결 방법과 지원 범위는 버전에 따라 달라지니 Claude Code 공식 문서에서 확인합시다. 연결 기능을 쓰지 않더라도, 이 단계의 흐름은 두 창을 오가며 사람이 결과를 옮겨 주는 방식으로 충분히 따라 할 수 있습니다.

문제 목록을 주고받는 방식

브라우저에서 찾은 문제를 Claude Code에 넘길 때는 형식을 맞춰 두면 편합니다. 문제 하나마다 네 가지를 적게 합니다.

  1. 어디서: 페이지 주소와 화면 위치
  2. 무엇을 했더니: 누른 버튼, 넣은 값
  3. 무엇이 일어났나: 실제로 본 결과
  4. 무엇을 기대했나: 원래 되어야 할 모습

이 네 가지가 있으면 Claude Code는 문제를 다시 만들어 보고 고칠 수 있습니다. "저장이 안 돼요"라는 말만 넘기면 Claude Code는 추측으로 고치고, 추측으로 고친 코드는 다른 곳을 망가뜨리기 쉽습니다.

고친 뒤에는 다시 브라우저로 돌아갑니다. 같은 순서로 눌러 보고, 문제가 사라졌는지, 다른 곳이 망가지지 않았는지 확인합니다. 만들고, 써 보고, 고치고, 다시 써 보는 고리입니다.

실습할 때는 반드시 연습용 데이터로 합니다. 배포된 도구에 실제 동료들의 기록이 쌓여 있다면, 시험 입력이 그 사이에 섞입니다. 시험용 주소를 따로 두었다면 거기서 하고, 없다면 시험 입력에 "[테스트]"를 붙이게 한 뒤 끝나고 사람이 지웁니다.

ChatGPT·Codex에서는 제4부에서 Codex로 만든 페이지라면 데스크톱 앱의 내장 Browser(@Browser)로 열어 사용자처럼 눌러 보게 할 수 있습니다. OpenAI도 로컬 웹앱을 점검할 때는 Computer Use보다 내장 Browser를 먼저 쓰라고 권합니다. 다만 Browser는 Codex CLI와 IDE 확장에서는 쓸 수 없습니다. 연결자에 해당하는 것은 ChatGPT의 플러그인 속 앱과 MCP 서버이고, 입력창에서 @플러그인이름으로 지정합니다. 연결자, 내려받기, 브라우저, 컴퓨터 사용의 순서는 ChatGPT에서도 똑같이 따릅니다.

현장 장면

한결상사 영업기획팀 윤서진 과장은 제3부에서 외근 방문 일지 페이지를 만들어 배포했습니다. 영업 사원들이 휴대폰으로 방문 기록을 남기는 페이지입니다. 발표는 성공적이었고, 2주째 열두 명이 쓰고 있었습니다.

어느 날 영업 2팀 막내가 슬쩍 말했습니다. "과장님, 휴대폰으로 날짜 고르는 게 좀 불편해요." 윤 과장은 자기 휴대폰으로 열어 봤지만 어디가 불편한지 딱히 알 수 없었습니다. Claude Code에 "날짜 선택 불편한 것 고쳐 줘"라고 했더니, Claude Code는 날짜 입력 방식을 바꿔 주었습니다. 그런데 다음 날 다른 사원이 말했습니다. "이제 날짜는 되는데 저장 버튼이 화면 밖으로 밀려났어요."

윤 과장은 방식을 바꿨습니다. Claude in Chrome에게 배포된 주소를 열게 하고 부탁했습니다. "처음 쓰는 영업 사원처럼 방문 기록 세 건을 입력해 봐. 이름에는 '[테스트]'를 붙이고, 화면 폭을 휴대폰 크기로 줄여서도 한 번 해 봐. 불편하거나 이상한 점을 '어디서, 무엇을 했더니, 무엇이 일어났나, 무엇을 기대했나' 형식으로 적어 줘."

돌아온 목록에는 네 건이 있었습니다. 휴대폰 폭에서 저장 버튼이 가려지는 문제, 날짜를 고르면 기본값이 오늘이 아니라 1월 1일로 돌아가는 문제, 거래처 이름을 영어로 넣으면 목록 정렬이 뒤섞이는 문제, 그리고 저장 뒤 성공 메시지가 너무 빨리 사라져 저장됐는지 알기 어렵다는 점이었습니다. 윤 과장이 들은 불만 두 가지가 모두 들어 있었고, 아무도 말하지 않았던 두 가지가 더 있었습니다.

윤 과장은 목록을 그대로 Claude Code에 붙여 넣었습니다. "이 네 건을 하나씩 고치고, 고칠 때마다 무엇을 바꿨는지 알려 줘." 수정이 끝나 배포되자, 다시 Claude in Chrome에게 같은 시험을 시켰습니다. 네 건 모두 해결됐다는 보고와 함께 새 문제 하나가 적혀 있었습니다. 성공 메시지를 오래 띄우도록 바꾸면서 메시지가 입력란 하나를 가리게 된 것입니다.

한 번 더 고치고, 한 번 더 확인했습니다. 마지막으로 윤 과장은 자기 휴대폰으로 직접 기록 하나를 넣어 보고, "[테스트]"가 붙은 기록을 모두 지웠습니다. 삭제 버튼은 윤 과장이 직접 눌렀습니다.

따라 하기

  1. 지금 하는 반복 업무 세 가지를 위의 판단 표에 대어, 각각 연결자·내려받기·브라우저·컴퓨터 사용·Claude Code 가운데 무엇이 먼저인지 적습니다. 성공 기준: 세 가지 모두 이유와 함께 도구가 정해졌습니다. 연결자가 있는지 모르면 "제8부에서 확인"이라고 적습니다.
  2. 제3부에서 배포한 도구(없다면 공개된 연습용 웹 양식)의 주소를 엽니다. 성공 기준: 41단계의 허용 목록에 그 주소가 들어 있습니다.
  3. 아래 프롬프트로 Claude in Chrome에게 사용자처럼 써 보게 합니다. 성공 기준: 문제마다 "어디서, 무엇을 했더니, 무엇이 일어났나, 무엇을 기대했나"가 적힌 목록을 받았습니다.
  4. 목록을 Claude Code에 넘겨 고치게 합니다. 성공 기준: Claude Code가 문제별로 무엇을 바꿨는지 보고했습니다.
  5. 배포된 뒤 Claude in Chrome에게 같은 시험을 다시 시킵니다. 성공 기준: 처음 목록의 문제가 해결됐는지 건별로 확인했고, 새로 생긴 문제가 있으면 기록했습니다.
  6. 마지막 확인은 사람이 직접 휴대폰으로 하고, 시험 데이터는 사람이 지웁니다. 성공 기준: "[테스트]"가 붙은 기록이 남아 있지 않습니다.

복사해 쓰는 프롬프트

Claude in Chrome에게 사용자 시험을 맡길 때:

[41단계의 기본 규칙을 여기에 붙인다]

이번 작업은 우리가 만든 웹페이지의 사용자 시험이야.

주소: [배포된 주소]
이 페이지의 목적: [한두 문장]
사용자: [누가, 주로 어떤 기기로 쓰는지]

해 볼 것:
- 처음 쓰는 사용자처럼 [가장 중요한 동작]을 [N]번 해 봐.
- 입력하는 이름이나 제목 앞에는 모두 "[테스트]"를 붙여.
- 가능하면 화면 폭을 휴대폰 크기로 줄여서도 한 번 해 봐. 줄일 수 없으면 그렇다고 알려 줘.
- 삭제 버튼은 누르지 마.

결과는 문제 목록으로 줘. 문제마다 아래 네 가지를 적어.
1. 어디서: 주소와 화면 위치
2. 무엇을 했더니: 누른 버튼, 넣은 값
3. 무엇이 일어났나
4. 무엇을 기대했나
문제가 아니라 불편한 점이면 "불편"으로 따로 표시해.
마지막에 입력한 테스트 기록 목록을 적어 줘. 지우는 건 내가 할게.

Claude Code에 넘길 때:

아래는 배포된 페이지를 사용자처럼 써 보며 찾은 문제 목록이야.
문제마다 원인을 먼저 설명하고, 한 번에 하나씩 고쳐 줘.
고칠 때마다 무엇을 바꿨는지, 다른 화면에 영향이 있을 수 있는지 알려 줘.
목록에 없는 곳은 고치지 마.

[문제 목록 붙여 넣기]

막히면 이렇게

증상 원인 처방
브라우저로 메일·일정을 한참 넘기며 읽습니다 연결자로 할 일을 화면으로 하고 있습니다 그 도구의 연결자가 있는지 확인합니다. 제8부에서 연결 방법을 다룹니다
Claude Code가 고쳤다는데 화면은 그대로입니다 배포가 끝나지 않았거나 브라우저에 옛 화면이 남아 있습니다 배포 상태를 확인하고 페이지를 새로 불러온 뒤 다시 시험합니다
고친 뒤 다른 곳이 망가졌습니다 문제 설명이 모호해 추측으로 고쳤습니다 네 가지 형식으로 문제를 다시 적어 넘기고, 고친 뒤 전체 시험을 다시 합니다
실제 사용자 기록 사이에 시험 입력이 섞였습니다 시험 표시를 붙이지 않았습니다 "[테스트]"를 붙이게 하고, 시험이 끝나면 사람이 확인하며 지웁니다

스스로 점검

  • ☐ 내 업무 하나를 두고 연결자, 내려받기, 브라우저, 컴퓨터 사용 가운데 무엇이 먼저인지 이유를 말할 수 있습니까?
  • ☐ 제3부에서 만든 페이지(또는 연습용 페이지)를 Claude in Chrome으로 시험해 문제 목록을 받았습니까?
  • ☐ 고친 뒤 같은 시험을 다시 해서 해결 여부를 건별로 확인했습니까?
점검 해설 보기
  1. 웹 업무 하나를 두고 "연결자가 있는가, 내려받기가 되는가, 둘 다 안 되면 브라우저"의 순서로 판단한 결과와 이유를 말할 수 있으면 통과입니다. 막히면 「화면으로 할 일, 데이터로 할 일」의 판단 표를 다시 보고, 연결자가 있는지 모르면 "제8부에서 확인"이라고 적어 둡니다.
  2. Claude in Chrome에게 사용자처럼 써 보게 해서, 문제마다 "어디서, 무엇을 했더니, 무엇이 일어났나, 무엇을 기대했나"가 적힌 목록을 받았으면 통과입니다. 목록이 "불편해요" 수준에 그친다면 「문제 목록을 주고받는 방식」을 다시 읽고, 네 가지 형식을 넣은 첫 번째 프롬프트로 다시 시험합니다. 제3부의 도구가 없으면 공개된 연습용 웹 양식으로 해도 됩니다.
  3. Claude Code가 고친 뒤 배포된 페이지에서 같은 시험을 다시 돌려 처음 목록의 문제마다 해결 여부를 적었고, 새로 생긴 문제도 기록했으면 통과입니다. 고쳤다는데 화면이 그대로라면 「막히면 이렇게」대로 배포 상태를 확인하고 페이지를 새로 불러온 뒤 다시 시험합니다. "[테스트]" 기록은 사람이 확인하며 지웁니다.

기억할 것

  • 연결자가 있으면 연결자, 없으면 내려받기, 그것도 안 되면 브라우저, 웹 화면조차 없을 때만 컴퓨터 사용입니다.
  • 만드는 일은 Claude Code, 써 보는 일은 Claude in Chrome에게 나눠 맡깁니다.
  • 문제는 "어디서, 무엇을 했더니, 무엇이 일어났나, 무엇을 기대했나"로 넘깁니다.
v2026.09.27.7 · 2026년 9월 27일 기준 · CEO비즈니스스쿨 김문수 교수 · 기능과 화면은 자주 바뀝니다. 책과 화면이 다르면 부록의 공식 문서가 기준입니다.