커넥터도 API도 없는 서비스를 Claude Code에 조작시키기

안녕하세요, e-dash의 나카지마입니다.

SRE로서 인증 기반이나 인프라를 보고 있습니다.

Claude Code에서 외부 서비스를 조작할 때는 MCP의 커넥터를 사용합니다.

Notion이나 GitHub처럼 널리 사용되는 서비스라면 대부분 준비되어 있습니다.

자동화를 진행하다 보면, 커넥터도 API도 없는 서비스가 필연적으로 남습니다.

업무에 맞춰 선택한 작은 SaaS나 사내용 관리 콘솔 같은 경우입니다.

설정을 변경하거나 상태를 확인하는 것도 사람이 화면을 열어야만 합니다.

Claude Code에 Chrome 확장 기능을 연결하면, 여기에 진입점이 생깁니다.

화면 그대로 읽게 하고, 클릭이나 입력을 맡길 수 있습니다.

약 3개월 동안 로우코드(low-code)로 만들어진 관리 콘솔의 운영에 사용해 왔습니다.

화면에서만 가능한 설정 생성부터 저장, 테스트 실행, 결과 확인까지를 맡겼습니다.

사람이 손댄 부분은, 저장을 확정하는 다이얼로그에서 단 한 번 클릭할 때뿐이었습니다.

이 글에서는 무엇을 맡기고, 무엇을 맡기지 않았는지에 대해 쓰겠습니다.

대상 독자

• 커넥터가 없다는 이유로 자동화를 포기하고 있는 서비스가 있는 사람
• 관리 화면의 설정 변경이나 상태 확인이 사람의 손에 남아있는 사람
• AI에게 브라우저를 조작하게 할 범위를 정하고 싶은 사람

Chrome 연동으로 가능한 것

Chrome 확장 기능을 연결하면, Claude Code에서 평소 사용하는 Chrome을 조작할 수 있습니다.

Claude는 새 탭을 열고 그곳에서 작업합니다.

가능한 것은 다음 4가지입니다.

• 화면 정보 읽기

• 표시된 요소와 문자 추출

• 스크린샷 촬영

• 화면 조작

• 클릭, 입력, 페이지 이동, 탭 열고 닫기

• 개발자 도구 정보 읽기

• 콘솔 에러

• 네트워크 요청과 응답

• 조작 기록

• 일련의 흐름을 GIF로 남기기

• 로그인된 화면이 그대로 찍히므로, 공유 전에 내용을 확인하기

평소 사용하는 Chrome을 사용하므로, 로그인 상태도 그대로입니다.

인증이 필요한 화면이라도, 다시 로그인하지 않고 진입할 수 있습니다.

Chrome 연동 활성화하기

--chrome

를 붙여서 실행합니다.

claude --chrome

매번 붙이지 않아도 되는 방법은 다음 2가지입니다.

• CLI의 경우
• /chrome을 실행하여

저장하면 테스트 실행해서 반환된 건수를 알려주세요.

Claude는 화면을 읽어 복사 원본을 찾고, 폼에 조건을 추가하고, 저장한 후, 실행 결과의 건수까지 반환합니다.

작성부터 수정, 그리고 그 이후의 통신 확인까지가 한 번에 끝납니다.

수정된 액션을 관리 화면에서 확인할 때까지 같은 왕복 과정이 반복됩니다.

겉모습뿐만 아니라 콘솔의 에러와 네트워크 리퀘스트도 읽을 수 있기 때문입니다.

'표시는 되어 있는데 API가 500을 반환하고 있다'는 것을 구분하는 것까지 가능해집니다.

이전에는 화면을 찍어 채팅에 붙여넣고, 답변을 읽고, 또 찍었습니다.

작성한 앱의 동작 확인시키기

배포한 후에 사람이 열어서 확인하던 작업도 그대로 전달할 수 있습니다.

머지(merge) 전 확인에 사용합니다.

검증 환경에만 배포해서 로그인 후 리다이렉트가 의도된 화면으로 가는지 봐달라고 했습니다.

스테이징(staging)으로 릴리스한 후에도 사용하고 있습니다.

전반적으로 만져보게 하고, 화면이 나오는지, 에러가 없는지 보고 받습니다.

관리 화면에서 조사시키기

문의 관리 SaaS에서 비밀번호 유효 기간 관련 설정을 알아보고 싶었습니다.

스스로 찾아봐도 괜찮지만, 어디에 있는지 모르기 때문에 전달했습니다.

관리 화면을 보여주자 보안 설정의 업데이트 이력이 전날짜로 되어 있는 것을 발견했습니다.

이 서비스에는 API도 있습니다.

하지만 엔드포인트를 조사해서 인증을 통과시키는 것보다, 로그인된 화면을 보는 것이 더 빠른 경우였습니다.

Claude에게 맡길 범위를 정하기

브라우저를 조작하게 하는 것은, 이미 로그인된 서비스를 그대로 만지게 하는 것입니다.

어디까지 맡길지 3가지를 정했습니다.

인증 정보 처리

전달하는 것은 인증이 완료된 상태뿐입니다.

ID와 비밀번호는 Claude Code의 컨텍스트에 들어가지 않습니다.

로그인 화면이나 CAPTCHA에서는 Claude가 멈추고 사람에게 조작을 요청합니다.

인증 정보를 다루지 않도록 설계했기 때문에, 여기는 넘어갈 수 없습니다.

스테이징과 본원의 책임은 사람이 지닌다

여기까지 언급된 조작들은 모두 개발 환경에서의 이야기입니다.

스테이징과 본원은 사람이 합니다.

이것은 필자의 방침입니다.

본원에서 작동하는 것의 책임은, 사람이 가져야 한다고 생각합니다.

Claude의 조작을 설정으로 좁히기

Claude가 멋대로 진행할 수 있는 것을, 설정으로 줄입니다.

스스로 주의를 기울이는 것만으로는 새어 나옵니다.

• Claude Code 측

• plan mode로 하기

• GIF 기록, 새로운 탭 열기 조작, 단축키 실행 전에 승인이 들어옴

• Chrome 확장 측

• 사이트별로 허가 설정하기

• Claude가 열 수 있는 사이트를 제한하기

Claude에게 할 수 없는 것

다이얼로그가 뜨면 조작이 멈춘다

여기서 말하는 다이얼로그는 브라우저나 OS에서 나오는 것이며, 페이지의 HTML은 아닙니다.

'OK'인지 '취소'인지 물어보는 확인 다이얼로그와 파일 선택 다이얼로그가 해당됩니다.

이것이 떠 있는 동안에는 다음 중 어느 것도 통과하지 못합니다.

• 스크린샷을 찍을 수 없음
• 좌표 클릭이 작동하지 않음
• 페이지 이동도 통과하지 못함

JavaScript로 덮어쓰는 회피는 안전 장치에 의해 차단됩니다.

발행된 조작은, 닫힐 때까지 보류된 상태입니다.

확인 다이얼로그는 사람이 한 번 누르면 진행됩니다.

뜬다는 것을 알고 있을 때는, 직전에 '이후에 1클릭 부탁드립니다'라고 전달하고 있습니다.

파일 선택 다이얼로그도, 사람이 고를 수 있으면 진행됩니다.

다만, 열 필요가 없습니다.

페이지 측에는 `<input type=

분할하는 단위는, 절차가 바뀔 곳에 맞춰서 했습니다.

• 만들기
• 고치기
• 화면에서 확인하기
• 데이터를 확인하기

'만들기'와 '고치기'를 나눈 이유는, 같은 화면이라도 저장한 후의 동작이 다르기 때문입니다.

스킬에는 절차 외에 사람과 Claude의 분담표를 작성했습니다.

매번 합의가 필요 없게 된 것이 가장 효과적이었습니다.

운영 및 트러블슈팅

활성화할 수 없는 환경

다음 조건에 해당하면, --chrome을 전달해도 활성화되지 않습니다.

• /login에서의 로그인 필요 - API 키나 claude setup-token으로는 유효하지 않음
• API 키나 Amazon Bedrock 등 서드파티를 경유해서는 사용 불가
• WSL에서는 작동하지 않음

'Browser extension is not connected'가 표시되는 경우

조건을 충족함에도 연결되지 않을 때는 다음 두 가지를 확인합니다.

• 확장 프로그램과 Claude Code가 다른 조직에 로그인되어 있는지
• /status의 Organization 행과 확장 측의 조직을 일치시킬 것
• 조직의 IP 허용 목록이 bridge.claudeusercontent.com을 차단하는지

리포지토리 설정으로는 활성화할 수 없음

.claude/settings.json에서 CLAUDE_CODE_ENABLE_CFC를 설정해도 무시됩니다.

이는 체크아웃된 리포지토리가 브라우저에 연결되는 것을 막기 위한 사양입니다.

활성화하려면 --chrome을 붙여 재시작하거나, /chrome에서 설정해야 합니다.

컨텍스트 소비와 재연결

기본으로 활성화하면 브라우저 툴이 상시 로드되어 컨텍스트를 소모합니다.

매번 사용할 필요가 없다면, 필요한 때만 --chrome을 붙이는 것이 가볍습니다.

장시간 세션에서는 확장 프로그램의 service worker 비활성화로 연결이 끊길 수도 있습니다.

반응하지 않으면 /chrome에서 'Reconnect extension'으로 되돌립니다.

요약

브라우저를 조작하게 하면, 커넥터도 API도 없는 서비스가 자동화 후보로 돌아옵니다.

맡긴 것은 다음 세 가지였습니다.

• 화면에서만 만들 수 있는 설정 만들기
• 만든 앱의 동작 확인하기
• 관리 화면을 조사하고 보고하도록 하기

이 모든 것이 사람이 화면을 열어야만 할 수 있었던 작업입니다.

사람에게 남겨둔 것은, 실제 운영 환경에서 작동하는 것에 대한 책임입니다.

개발 환경 테스트는 맡길 수 있어도, 스테이징과 본원은 사람이 합니다.

잡히지 않은 것은 다음 두 가지였습니다.

• 다이얼로그가 표시되는 동안은 조작이 아무것도 통하지 않음
• 크로스오리진의 iframe 내부 내용은 읽을 수 없음

'커넥터가 없기 때문에' 후보에서 제외했던 대상을 다시 포함시킬 수 있게 되었습니다.

그것이 브라우저 조작으로 늘어난 범위였습니다.

Discussion