AI와 인공지능, Claude in Chrome으로 Cloudflare 대시보드 속 CORS 문제 해결하기

AI가 점점 브라우저와 일상 속으로 파고드는 시대, ‘Claude in Chrome’ 확장 프로그램을 활용해 Cloudflare 대시보드에서 까다로운 CORS 정책 문제를 AI의 힘으로 해결한 사례를 살펴봅니다. 이번 글에서는 S3·Cloudflare를 쓰는 개발자가 흔히 마주치는 헤더 설정 혼란부터, Claude가 실전에서 보여준 브라우저 에이전트의 진짜 능력, 그리고 AI 자동화의 한계와 주의점까지 쉽게 풀어봅니다.

CORS: S3와 Cloudflare 설정의 미로에서 출발한 문제

CORS(Cross-Origin Resource Sharing)는 여러 서비스를 연동하는 개발 환경에서 빠질 수 없는 골칫거리입니다. 예를 들어 S3에 정적 파일을 올리고, Cloudflare로 CDN을 구성해 외부 웹앱에서 자유롭게 파일을 불러오고 싶을 때, “Access-Control-Allow-Origin: *”처럼 열린 헤더가 필요하죠.

문제는 S3(아마존, Cloudflare R2 등)에서 버킷 단위로만 CORS 규칙을 지정할 수 있다는 점입니다. 특정 디렉토리(예: /static/cors-allow/)만을 열어주고 싶어도, S3 자체로는 일반적인 방식으로는 불가능합니다. 그래서 Cloudflare 대시보드를 활용해야 하지만, 메뉴가 워낙 복잡하다 보니 자신이 예전에 어떻게 설정했는지 기억나지 않는 경우가 생깁니다.

Claude in Chrome: 브라우저 AI 에이전트의 첫 실전 투입

바로 이런 상황에서 Claude in Chrome 같은 AI 브라우저 확장이 빛을 발합니다. 확장 프로그램을 설치하고, Cloudflare에 로그인한 뒤 Claude 패널을 띄워 “내 static 디렉토리 하위 파일들이 왜 모두 열린 CORS 정책을 적용받는지 알고 싶다”라고 질의했습니다.

Claude는 브라우저 환경을 직접 탐색하며, 약간의 시간 끝에 중요한 사실을 캐치했습니다.

Claude의 요약에 따르면, Cloudflare의 Transform Rules, 그중에서도 ‘Response Header Transform Rule’을 통해 특정 경로(예: /static/cors-allow/)에 대해 CORS 헤더가 ‘’로 설정된 상황이었습니다. 즉, 특정 디렉토리만 개방하려면 S3가 아니라 Cloudflare 규칙(변환 룰)에서 응답 헤더를 조작하는 것이 정답이었던 것이죠.

실전 AI 브라우저 에이전트의 장점과 한계

이번 경험으로 드러난 브라우저 속 AI의 강점은 다음과 같습니다.

• 복잡한 관리자 대시보드도 AI가 스캔해서 정답을 줌
  Cloudflare처럼 메뉴가 여러 겹이라 사람이 놓치기 쉬운 부분도, AI가 직접 규칙을 찾아 위치와 수정 방법까지 짚어줍니다.

• 자연어 질의로 설정 위치를 바로 확보
  영어 능력이나 Cloudflare 숙련도에 관계없이 “OOO이 왜 이렇게 됐는지 알려줘” 한마디면 답이 나옵니다.

• 일반적 문서가 도움이 안 될 때, 실시간 ‘내 환경’에 맞는 분석
  S3와 Cloudflare 공식 문서엔 디렉토리별 CORS 헤더 컨트롤에 대한 구체적인 ‘실전 답안’이 없거나 복잡한 경우가 많습니다. AI는 직접 현재 상황을 파악해 맞춤 해법을 도출했습니다.

하지만 이런 브라우저 에이전트형 AI에도 분명 단점과 위험성이 존재합니다.

• 프롬프트 인젝션(prompt injection) 위험
  AI가 브라우저로 실제 사이트를 제어하면서 의도치 않은 명령이나 보안 문제가 끼어들 수 있습니다. 항상 AI의 행동을 주의 깊게 관찰하면서 한눈팔지 않는 게 필수입니다.

Cloudflare와 S3에서 CORS 정책 설정, 이렇게 풀 수 있다

CORS 문제는 개발 환경에 따라 접근법이 달라질 수 있습니다.

• S3(Cloudflare R2 포함)에서는 버킷 전체 규칙만 설정
  특정 디렉토리만 따로 열어주기 어렵고, 전체 버킷에 대해 허용 범위를 지정합니다.

• Cloudflare에서는 Transform Rules로 세밀한 조건 제어
  ‘Response Header Transform Rule’과 같은 기능을 활용해 URL 패턴(와일드카드) 별로 응답 헤더를 조작할 수 있습니다.

• 설정 위치 찾기가 어렵다면 Claude처럼 브라우저 AI의 도움 받기
  ‘규칙 > 응답 헤더 변환’ 같은 경로나 메뉴 이동도 AI가 실시간 안내해주는 시대가 됐습니다.

브라우저 속 AI, 개발의 미래를 엿보다

이번 경험은 AI가 단순한 채팅봇이나 코파일럿(CHAT Copilot)을 넘어, ‘내가 보는 실제 관리자 화면’이나 복잡한 설정페이지까지 실시간 지원이 가능하다는 것을 보여준 하나의 신호탄입니다. CORS처럼 자주 헷갈리지만 해결은 복잡한 문제에 대해, AI 브라우저 에이전트가 ‘이해-분석-해결’까지 일괄 지원을 하게 된다는 점에서 업무 효율은 괄목할 만큼 높아질 것으로 보입니다.

물론, 신뢰 문제와 보안에 대한 경각심도 필요합니다. AI가 웹사이트를 조작할 때는 예기치 못한 위험이 항상 도사리고 있으므로, 모든 동작을 ‘감시관’ 시선으로 살피는 습관이 중요합니다.

복잡한 대시보드에서 헤매고 있다면, 이제는 AI 브라우저 확장으로 빠르고 안전하게 설정을 찾는 방법도 고려해보세요. 기술은 늘 진화하지만, AI와 함께라면 미로 같은 관리페이지도 금방 지름길로 바뀔 수 있습니다.

참고

[1] Using Claude in Chrome to navigate out the Cloudflare dashboard - simonwillison.net

[2] Configuring Cloudflare R2 Storage Service - LobeHub

[3] Configuring S3 Storage Service for AI - LobeHub