00:00:00우리 팀이 앱을 만드는 방식이 크게 개선되었습니다.
00:00:03이유가 뭘까요?
00:00:03Claude Code가 최근 Chrome 확장 프로그램을 출시했거든요.
00:00:06Playwright나 Puppeteer MCP로 이미 가능했다고 생각할 수도 있습니다.
00:00:09하지만 불필요하게 부풀려진 컨텍스트 윈도우,
00:00:12엉망인 프로젝트 폴더에 랜덤하게 쌓인 스크린샷들,
00:00:15그리고 대부분의 경우 앱에서 작업을 완료하지 못하는 등 심각한 문제들이 있었죠.
00:00:20이것이 제가 AI를 이용한 자동화된 테스트에 크게 관심을 두지 않았던 이유입니다.
00:00:24하지만 또한 이 새로운 Claude 확장 프로그램이 정말 기대됐던 이유기도 합니다.
00:00:28채널을 계속 봐오신 분들이라면 이미 예전에 이것에 대한 영상을 만들었다는 것을 알 수도 있습니다.
00:00:32재미있는 점은 그 당시엔 Claude Code용이 아니었지만,
00:00:35우리는 이 확장이 Claude Code용이라면 훨씬 더 큰 잠재력을 가질 수 있다고 명확히 말했었거든요.
00:00:39그리고 여기 우리가 있습니다.
00:00:39이제 마침내 통합 MCP로 출시되었고, Claude Code에 필요한 모든 커스텀 도구를 제공합니다.
00:00:45바로 지금 처음부터 해결해야 할 큰 문제들이 있습니다.
00:00:48하지만 그 문제들을 들어가기 전에 Automata에 대해 잠깐 이야기해보겠습니다.
00:00:52수백만 명의 사람들에게 AI로 개발하는 방법을 가르친 후,
00:00:54우리 스스로 이러한 워크플로우를 적용하기 시작했습니다.
00:00:57우리는 이전보다 훨씬 빠르게 더 좋은 제품을 만들 수 있다는 것을 발견했습니다.
00:01:01앱이든 웹사이트든 당신의 아이디어를 현실로 만드는 데 도움을 드렸습니다.
00:01:04아마도 우리 영상을 보며 '좋은 아이디어가 있지만 이를 구현할 기술 팀이 없다'는 생각을 하셨을 겁니다.
00:01:09바로 그런 부분에서 우리가 도움을 드립니다..
00:01:11우리를 당신의 기술 파트너로 생각하시면 됩니다.
00:01:13우리가 수백만 명에게 가르친 동일한 워크플로우를 당신의 프로젝트에 직접 적용하여,
00:01:17개념을 실제 작동하는 솔루션으로 변환합니다.
00:01:20개발 팀을 채용하거나 관리하는 번거로움 없이 말이죠..
00:01:23당신의 아이디어를 현실로 가속화할 준비가 되셨나요?
00:01:25hello@automata.dev로 연락해주세요. 이제 문제들로 돌아와봅시다.
00:01:29제가 직면한 가장 큰 문제는 정말 간단한 것을 테스트하기 위해서도 너무 많은 순차적 단계가 필요했다는 것입니다.
00:01:34Claude에게 웹사이트의 랜딩 페이지를 시각적으로 테스트하도록 요청하면,
00:01:38각 섹션마다 스크롤 작업을 수행하고 매 단계마다 스크린샷을 캡처한다는 것을 아실 겁니다.
00:01:43그 다음 모든 스크린샷을 이어 붙여서 UI를 섹션 단위로 분석합니다.
00:01:47이것이 좋은 접근법이라고 생각할 수도 있지만, 그렇지 않습니다.
00:01:49대신 전체 페이지 스크린샷을 찍고 모든 토큰을 절약할 수 있습니다.
00:01:53이를 해결하기 위해 전체 스크린샷을 찍기 위해 다양한 웹 도구를 활용하는 스크립트를 사용했습니다.
00:01:57또한 내 프로젝트에서 커스텀 슬래시 명령어로 해당 스크립트를 사용하도록 지시사항을 추가했습니다.
00:02:02이제 이 명령어로 랜딩 페이지를 테스트할 때,
00:02:05내가 포함한 지시사항을 바탕으로 이것이 전체 페이지 테스트임을 인식하고,
00:02:09보통의 섹션별 방식 대신 스크립트를 직접 사용합니다.
00:02:13덕분에 테스트가 훨씬 빨리 진행되며 정확도는 동일합니다.
00:02:17제가 마주친 두 번째 문제는 간단한 작업을 위해 MCP 도구들이 막대한 양의 콘텐츠를 한 번에 로드하려고 했다는 것입니다.
00:02:24특정 div만 로드하는 대신,
00:02:26main 태그 내의 모든 HTML을 로드하곤 했는데,
00:02:29불필요할 때에도 엄청난 양의 토큰을 차지합니다.
00:02:32이로 인해 컨텍스트 윈도우의 큰 부분을 소비하게 되고, 가장 간단한 작업도 상당히 부풀려질 수 있습니다.
00:02:37이를 해결하기 위해 Claude.md 파일에 Claude Chrome 확장을 사용할 때 컨텍스트를 올바르게 관리하는 방법에 대한 지시사항을 추가했습니다.
00:02:44이렇게 하면 모든 추출이 정확히 제한되고 불필요한 정보로 컨텍스트가 부풀려지지 않습니다.
00:02:50또 다른 문제는 Claude가 쿠키 공지사항 같은 원치 않는 팝업을 포함한 웹사이트를 만날 때 많은 시간을 낭비한다는 것입니다.
00:02:58이를 제거하기 위해 동일한 스크린샷과 스크롤 시퀀스를 사용합니다.
00:03:01하지만 이것은 잘못된 방법입니다.
00:03:02Claude가 불필요한 토큰과 시간을 소비하도록 두는 대신,
00:03:05이런 팝업을 처리할 다른 방법들을 사용할 수 있습니다.
00:03:08대신으로,
00:03:08가장 일반적인 '닫기' 버튼 선택자와 쿠키 배너를 제거하는 패턴을 포함하는 스크립트를 만들었습니다.
00:03:15코드에서 그런 선택자들을 찾아 팝업을 자동으로 닫는 함수를 실행합니다.
00:03:19또한 Claude.md 파일에 메인 콘텐츠를 진행하기 전에 먼저 이 스크립트를 실행하도록 지시사항을 추가했습니다.
00:03:25이제 Claude에게 웹사이트를 방문하도록 요청할 때마다,
00:03:28먼저 Claude.md의 지시사항을 따르고 이 JavaScript를 실행합니다.
00:03:32이것은 쿠키 배너를 자동으로 닫아서 Claude가 토큰을 낭비하거나 불필요한 단계를 수행하지 않고 메인 콘텐츠로 계속 진행할 수 있게 합니다.
00:03:40보안상의 이유로 Claude는 스크린샷을 찍거나 인증을 대신 완료하는 것이 제한되어 있습니다.
00:03:46따라서 인증이 필요한 웹사이트를 마주치면 Claude는 이 과정을 완료해줄 수 없습니다.
00:03:51이것은 당신이 직접 처리해야 하는 부분입니다.
00:03:53로그인이나 CAPTCHA 인증이 필요한 웹사이트에서 작업할 때마다,
00:03:56Claude에게 작업을 주기 전에 이미 인증을 완료했는지 확인하세요.
00:04:00이렇게 하면 Claude가 차단되지 않고 시간을 낭비하지 않습니다.
00:04:02그래서 이것들이 제가 해결할 수 있었던 주요 문제들이었습니다.
00:04:05하지만 이를 제대로 테스트에 사용하려면, 실제로 애플리케이션을 테스트할 적절한 워크플로우가 필요합니다.
00:04:10하지만 그것을 다루기 전에,
00:04:11제가 Puppeteer보다 Claude Chrome 통합을 선호하는 이유에 대해 좀 더 이야기하고 싶습니다.
00:04:16이는 주로 Claude Code의 개발자들이 직접 만든 네이티브 도구이며,
00:04:20향상된 제어와 기능으로 훨씬 더 나은 통합을 제공하기 때문입니다.
00:04:23이러한 MCP들은 세션을 유지하지 않는 전용 별도 환경에서의 테스트에 중점을 두고 있습니다.
00:04:29설치하기에 번거롭고 프로젝트 폴더를 모든 스크린샷으로 어지럽히는 경향이 있습니다.
00:04:33반면에 이 새로운 Chrome 통합을 사용하면, Claude는 로그인된 계정과 상호작용할 수 있습니다.
00:04:38Google Docs나 Google Sheets 같은 서비스와 상호작용할 수 있습니다.
00:04:42심지어 모든 세션 정보를 유지하고 이를 사용하여 작업을 더 잘 수행할 수도 있습니다.
00:04:46워크플로우를 설명하기 전에,
00:04:47브라우저 통합이 일반 도구 호출보다 훨씬 더 많은 컴퓨팅이 필요하기 때문에 많은 컨텍스트를 사용한다는 점을 언급하고 싶습니다.
00:04:54그들은 심지어 자신들의 블로그 중 하나에서 이것을 언급했습니다.
00:04:56따라서 Claude Code로 작업할 때 자동 압축을 항상 주시해야 합니다.
00:05:00또한 이것이 Chrome 통합이기 때문에 Chrome에서만 작동합니다.
00:05:04모든 Chromium 브라우저에서 작동할 것으로 예상했지만, 그렇지 않습니다.
00:05:07그리고 우리는 이를 해결할 수 없습니다.
00:05:08그리고 여러 Chrome 프로필을 사용하는 사람들에게는 계속 잘못된 프로필을 열어서 더 답답할 수 있습니다.
00:05:15그리고 이 버그를 빨리 해결해주길 정말 바랍니다.
00:05:17앞에서 언급한 모든 수정사항과 Claude의 Chrome 통합으로 제 개발 워크플로우가 크게 개선되었습니다.
00:05:24하지만 Chrome 확장 프로그램은 Manifest V3에서 제한이 있습니다.
00:05:27너무 오래 실행되면 차단될 수 있습니다.
00:05:29많은 사람들이 Claude Code의 개발자들에게 그들의 저장소에서도 이를 해결해달라고 요청하고 있습니다.
00:05:33웹 애플리케이션의 처음부터 끝까지 엔드-투-엔드 테스트를 하고 있다면,
00:05:37이것이 Chrome에 의해 세션이 차단되고 Claude가 예기치 않게 중지될 수 있습니다.
00:05:41그 다음 다시 프롬프트를 입력해서 실행을 재개해야 합니다.
00:05:44Claude에게 장시간 실행되는 작업을 할당하고 컴퓨터에서 떠났다가 돌아와보니 작업이 부분적으로만 완료된 경우,
00:05:51이것은 특히 번거로울 수 있습니다.
00:05:53이 정확한 이유 때문에,
00:05:54엔드-투-엔드 테스트 대신 애플리케이션의 여러 다양한 측면을 다루는 여러 테스트 파일을 만들었습니다.
00:06:00각 파일에는 우선 순위 수준,
00:06:01선행 조건,
00:06:02테스트 단계 및 예상 결과에 대한 자세한 정보가 포함되어 있습니다.
00:06:06또한 이러한 테스트를 수행하는 방법에 대한 테스트 가이드와 테스트 문서를 위한 README도 있습니다.
00:06:11아시다시피 Claude는 제한된 컨텍스트 윈도우를 가지고 있으며,
00:06:14그 한계에 도달하면 지시사항과 진행 상황이 손실될 수 있습니다.
00:06:16이 이유로,
00:06:17Claude.md 파일에 각 파일을 테스트한 후 포괄적인 테스트 보고서 문서를 작성하도록 Claude에게 지시하는 지시사항을 추가했습니다.
00:06:24이렇게 하면 브라우저 도구가 많은 컨텍스트를 소비하기 때문에 압축해야 하는 경우에도,
00:06:28Claude는 이러한 진행 파일들을 참조함으로써 무엇이 테스트되었고 무엇이 아직 테스트 필요한지에 대한 인식을 유지할 수 있습니다.
00:06:34이제 테스트를 진행하기 전에, 가장 좋은 방법은 컴팩트를 실행하는 것입니다.
00:06:37Chrome을 사용하여 애플리케이션을 테스트하면 컨텍스트 윈도우를 많이 소비하게 되기 때문입니다..
00:06:42테스트 프로세스를 간소화하기 위해 다른 커스텀 슬래시 명령어를 만들었습니다.
00:06:46이 명령어는 안내식으로 테스트를 하고 Claude.md 지침에 따라 테스트 후에 적절한 구조로 문서화를 작성합니다.
00:06:54또한 작업을 시작하기 전에 컨텍스트를 모니터링하도록 지침을 추가했으므로,
00:06:58테스트가 시작되면 중간에 컨텍스트를 잃지 않고 작업하면서 컴팩트할 수 있습니다.
00:07:02이렇게 하면 테스트 프로세스를 시작할 때,
00:07:05슬래시 명령어를 사용하고 테스트를 시작하려는 파일을 제공하면 Claude가 정확한 지침에 따라 테스트를 시작합니다.
00:07:11Claude는 스스로 문제를 식별하고 브라우저와 모든 필요한 테스트 도구를 사용합니다.
00:07:16요소들과 자동으로 상호작용하며 콘솔 출력을 읽어서 일반적으로 보이지 않지만 감지할 수 있는 오류들을 찾아냅니다.
00:07:23또한 지침대로 테스트 결과를 문서화합니다.
00:07:26이런 방식으로 전체 테스트 프로세스는 크게 개선됩니다.
00:07:28Claude가 콘솔 로그에 접근할 수 있고 이전보다 훨씬 더 효과적으로 브라우저에서 자동화된 테스트를 수행할 수 있기 때문입니다..
00:07:35이제 이 동영상의 끝에 다다랐습니다.
00:07:37채널을 지원하고 이런 영상을 계속 만들 수 있도록 도와주고 싶으시다면,
00:07:41아래의 슈퍼 감사 버튼을 사용하실 수 있습니다.
00:07:43항상 시청해주셔서 감사하며, 다음 영상에서 뵙겠습니다.