🚀 서론
AI에게 구현을 맡기더라도, 화면을 열어 동작을 확인하는 것은 여전히 사람의 몫이라는 상황에 놓여있지는 않으신가요?
본 글에서는 Claude Code와 Claude in Chrome을 연동하여 화면 확인(UI 테스트)까지 AI에게 맡기는 방법을 소개합니다.
- Claude Code와 Chrome 연결하기
- '열 URL・조작・기대 결과・하지 말아야 할 것' 4가지 항목으로 테스트 지시하기
- 정해진 테스트를 스킬로 만들어 매번 같은 순서로 실행하기
예시로는 자사 웹사이트의 문의 양식 입력 체크와 반응형 표시 확인을 다룹니다.
연동의 기본 기능은 다음 글에서 이해하기 쉽게 정리되어 있습니다. 본 글은 이를 참고하여 UI 테스트로 매번 돌릴 수 있는 형태로 만드는 데 초점을 맞춰 설명합니다.
💡 Claude Code와 연동하면 무엇이 가능한가
Claude in Chrome은 Claude가 브라우저를 보고 클릭, 입력, 스크롤 등을 할 수 있게 해주는 Chrome 확장 기능입니다.
Claude Code와 연동하면 터미널에서 지시하는 것만으로 로컬 개발 서버를 열어 동작을 확인하고, 문제가 있으면 바로 코드를 수정할 수 있습니다.
| 하고 싶은 일 | Claude가 할 수 있는 일 |
|---|
| 양식 입력 체크 | 값을 넣고 버튼을 눌러 에러 메시지가 나오는지 확인하기 |
| ... | |
| 평소 사용하는 Chrome의 로그인 상태를 그대로 사용할 수 있어, 로그인이 필요한 관리 화면도 테스트용 인증 정보를 스크립트에 작성하지 않고 확인할 수 있습니다. | |
🔍 Playwright 등의 E2E 테스트와의 사용 구분
차이점은 정해진 절차를 정확하게 반복하는지, 아니면 화면을 보면서 판단하며 진행하는지에 있습니다.
| 항목 | Claude in Chrome | Playwright 등의 테스트 코드 |
|---|
| 테스트 작성 방식 | 한국어로 지시하기 | 코드로 순서와 기대값을 작성하기 |
| ... | | |
| 저희는 구현 후 먼저 Claude in Chrome으로 확인하고, 여러 번 확인하게 된 화면만 Playwright의 테스트로 만드는 방식으로 사용을 구분하고 있습니다. | | |
🔧 Claude Code와 Chrome 연결하기
공식 문서를 따라 준비합니다.
- Google Chrome 또는 Microsoft Edge (Brave・Arc 등의 Chromium 계열 브라우저도 가능)
- Chrome 웹 스토어의 'Claude' 확장 기능 (1.0.36 이상)
- Claude Code
- Pro・Max・Team・Enterprise 중 하나의 플랜
확장 기능에 Claude Code와 같은 계정 및 같은 조직으로 사인인한 후, Chrome 연동을 활성화하여 실행합니다.
첫 실행 시 설명 화면이 나오므로 Enter를 눌러 진행합니다. /chrome
을 실행하여 'Status: Enabled', 'Extension: Installed'가 표시되면 준비 완료입니다.
/chrome
에서 'Enabled by default'를 선택하면 매번 플래그가 필요 없습니다. 다만, 브라우저 조작 툴이 항상 로드되어 컨텍스트를 소모하므로, 테스트할 때만 --chrome
으로 실행하는 것이 권장됩니다.
💻 UI 테스트 지시 작성하기
테스트 지시는 '열 URL', '조작', '기대 결과', '하지 말아야 할 것'의 4가지를 작성하면 안정적입니다.
단순히
「수정 후에는 같은 확인을 다시 한번」이라고 적어두면, 수정한 결과물을 Claude 자신이 화면에서 확인하는 단계까지 진행됩니다. CSS의 깨짐 현상은 빌드나 타입 체크로는 발견할 수 없기 때문에, 이 부분을 맡길 수 있다는 것이 큰 장점입니다.
🛠️ 테스트를 스킬로 만들어 매번 실행하기
정해진 테스트는 Claude Code의 스킬(skill)로 리포지토리에 넣어두면 /ui-test와 같이 호출할 수 있습니다.
---
name: ui-test
description: 개발 서버에서 주요 화면의 UI 테스트를 수행합니다. 화면이나 폼을 변경한 후에 사용합니다.
...
게다가 CLAUDE.md에 "화면을 변경했다면, 에러 스캔 이후 /ui-test를 실행한다"라고 적어두면, 구현 → Lint・타입 체크・빌드 → 화면 테스트의 흐름이 매번 일정하게 유지됩니다.
⚠️ 막히는 포인트 (주의할 점)
가장 흔한 경우는 브라우저와의 연결이 끊겨서 테스트가 시작되지 않는 것입니다. 이 글을 쓰면서 테스트를 돌려보려고 했을 때도, Chrome 확장 기능이 작동하지 않았기 때문에 다음 에러가 반환되었습니다.
Browser extension is not connected. Please ensure the Claude browser extension is installed and running
공식 문서에서 안내하는 주요 원인과 대처 방법은 다음과 같습니다.
| 증상 | 원인 | 대처 |
|---|
| 「Browser extension is not connected」 | Chrome이 실행되지 않았거나, 확장 기능이 다른 계정/조직으로 로그인되어 있음 | Chrome을 실행하고, /status의 "Organization"과 동일한 조직으로 확장 기능을 다시 로그인합니다. |
| ... | /chrome에서 "Reconnect extension" 선택 | |
| 도중에 조작이 멈춤 | alert나 confirm 다이얼로그가 화면을 가리고 있음 | 다이얼로그를 수동으로 닫고 "계속 진행해달라"고 전달합니다. |
| 로그인 화면에서 멈춤 | 로그인이나 CAPTCHA는 사람이 대응하는 사양임 | 직접 로그인한 후 "계속 진행해달라"고 전달합니다. |
운영 측면에서는 다음 사항에도 주의하고 있습니다.
- GIF나 화면 촬영 시, 보이는 모든 것이 그대로 남습니다. 로그인 중인 관리 화면을 기록하면 고객 데이터 등이 노출될 수 있으므로, 공유하기 전에 내용을 확인해야 합니다. -
실제 운영 환경(Production)에서는 테스트하지 않습니다. 개발 서버 또는 검증 환경의 URL을 지시에 명확히 기재합니다. -
결과는 사람이 마지막에 확인합니다. 중요한 화면은 Claude가 "OK"라고 보고하더라도 촬영된 이미지를 반드시 확인해야 합니다.
🎉 요약 (정리)
claude --chrome으로 실행하면, 화면 확인・폼 입력 체크・콘솔 에러 확인을 Claude에게 맡길 수 있습니다. 테스트 지시는 "열 URL", "조작", "기대 결과", "절대로 해서는 안 될 것"의 4가지를 작성하고, 취소할 수 없는 조작은 금지합니다.- 반복되는 테스트는 스킬로 만들어, 구현・에러 스캔・화면 테스트를 매번 같은 흐름으로 진행합니다.
자사 블로그에서도 동일한 내용을 AI 구동 개발 방식과 함께 소개하고 있습니다.
📚 참고
- Use Claude Code with Chrome - Claude Code Docs (2026년 10월 21일 조회)
- 「Claude in Chrome」와 「Claude Code」의 연계를 시도해 본 경험 - Zenn (2026년 10월 21일 조회)
📢 홍보
Discussion
