Claude Code로 디렉터리에 SaaS 출시하기

Claude Code에 필요한 것

클론한 폴더에서 연 claude 세션

구매 후 클론한 비공개 저장소 안에서 claude를 시작하세요. 저장소에는 AGENTS.md를 불러오는 CLAUDE.md가 들어 있어서, Claude Code는 별도 단계 없이 런북을 프로젝트 지침으로 읽습니다.

Python 3.10+와 Node.js LTS

Python은 워크스페이스 스크립트, record.py, 로컬 대시보드를 실행하며 표준 라이브러리만 씁니다. Node.js는 npx를 제공하고, Claude Code는 이를 이용해 Chrome DevTools MCP를 로컬 stdio 서버로 시작합니다.

나에게만 적용되는 MCP 항목 하나

claude mcp add는 기본적으로 local 범위에 기록합니다. 나만, 이 프로젝트에서만 쓴다는 뜻입니다. user 범위로 하면 브라우저 서버가 모든 프로젝트에서 열리는데, 출시 작업에 필요한 것보다 범위가 넓습니다.

제품별 상시 권한

어떤 도구를 실행할지는 Claude Code 자체의 권한 요청이 정합니다. LaunchRepo는 authorizations.json으로 제품 단위의 층을 하나 더 둡니다. 무료 가입, 최종 제출, 메일 작업, 배지를 각각 한 번씩 허용하며, 지출은 0으로 유지됩니다.

Claude Code를 내 Chrome에 연결하기

Claude Code는 Chrome DevTools MCP 서버를 통해 브라우저에 접근합니다. BROWSER-SETUP.md가 권장하는 방법은 모든 로그인이 그대로 남아 있는, 평소 쓰는 Chrome을 쓰는 것입니다. Chrome 144 이상, chrome://inspect/#remote-debugging에서 켠 원격 디버깅, 그리고 서버의 --autoConnect 플래그가 필요합니다.

내 컴퓨터에서 자동 연결을 쓸 수 없다면, 같은 가이드가 로컬 디버깅 포트를 쓰는 전용 Chrome 프로필 방식을 설명합니다. 이때는 --autoConnect 대신 --browserUrl=http://127.0.0.1:9222를 씁니다. 두 방식 중 하나만 쓰고, 포트는 절대 외부에 노출하지 마세요.

Claude Code 쪽 설정은 이것이 전부입니다. --autoConnect 뒤의 두 플래그는 저장소의 브라우저 가이드와 마찬가지로 사용 통계와 CrUX 조회를 끕니다.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics --no-performance-crux
claude mcp list

code.claude.com 문서에 나온 형식이며, 2026년 9월 30일에 확인했습니다. ↗

이제 claude mcp list에 chrome-devtools가 ✔ Connected로 보여야 합니다. Claude Code에게 새 빈 탭에서 example.com을 열어 달라고 한 뒤, Chrome의 연결 요청을 승인하고 바로 그 탭이 움직이는지 지켜보세요. 그다음에 첫 디렉터리에 로그인하세요.

코딩 에이전트를 내 Chrome에 연결하기 →

시작 프롬프트

START.md의 공개 시작 프롬프트를 같은 claude 세션에 붙여 넣으세요. 체크아웃 옆에 비공개 워크스페이스를 만들어 제품 정보와 자격 증명이 배포용 저장소에 남지 않게 하고, 대시보드를 띄운 뒤 127.0.0.1 링크로 답합니다.

Recommend Claude Code CLI or Codex CLI in a terminal instead of the desktop apps for best results. If session metadata confirms desktop hosting, explicitly advise me to switch to the CLI and resume this same private workspace. Do not infer the host from a CLI engine version alone.

Read AGENTS.md, then follow "Start the dashboard for the owner". Create my private
workspace if I do not have one yet, start the dashboard, and give me the link.
Then lead ONBOARDING.md one phase at a time. Reuse recorded permissions instead of
asking again unless their scope is missing or conflicting. Actually test my visible
existing Chrome profile and intended identity as BROWSER-SETUP.md requires; use the
OS fallback if needed. Use one platform/browser worker by default. Build the normal
run only from suitable free-ready routes, keep research separate, and preserve any
draft that needs one exact human CAPTCHA/2FA action. Never claim browser control
bypasses or reduces those challenges.

플레이북과 지침은 코딩 에이전트가 가장 잘 다루는 영어 Markdown으로 되어 있습니다. 제품 문구는 디렉터리가 받는 언어라면 무엇이든 괜찮고, 에이전트는 내 언어로 답합니다.

그다음부터는 대시보드가 첫 배치, 이어서 하기, 검토처럼 다음 프롬프트를 건네줍니다. Claude Code는 매번 워크스페이스 파일을 다시 읽으므로, 터미널을 닫아도 잃는 것이 없습니다.

세 단계로 LaunchRepo 시작하기 →

실행 모습

Claude Code의 실행은 눈으로 따라갈 수 있습니다. 터미널에는 어떤 플레이북을 읽고 어떤 도구를 호출하는지 나오고, Chrome에는 채우는 양식이 보입니다. 아래는 홈페이지의 작은 샘플 배치이며, 실제 상태는 submissions.json에서 가져옵니다.

Claude Code 연결이 끊겼을 때

Claude Code와 Chrome DevTools MCP에서 가장 자주 생기는 문제와, 각 문서가 안내하는 해결 방법입니다. 어느 것도 LaunchRepo와는 무관하며, 지금까지 기록된 결과는 모두 트래커에 남아 있습니다.

claude mcp list에 ✘ Failed to connect가 표시됨

같은 터미널에서 npx chrome-devtools-mcp@latest --help를 실행해 서버가 아예 시작되는지 확인하고, Claude Code가 같은 Node.js와 npm을 쓰는지 확인하세요. 첫 다운로드가 느리면 시작 시간 제한을 넘길 수 있으니, MCP_TIMEOUT=20000 claude처럼 더 큰 값으로 Claude Code를 시작하세요.

“MCP server disconnected · open /mcp to reconnect”

/mcp에서 서버를 다시 연결한 뒤, 다음 제출 전에 빈 탭 확인을 한 번 더 하세요. 재연결하면 Chrome의 승인 요청이 다시 뜰 수 있기 때문입니다. 배치는 트래커에서 멈춘 지점부터 이어집니다.

다른 창이 움직임

로그인하기 전에 멈추세요. Chrome 프로필이 여러 개면 자동 연결은 기본 프로필에 붙습니다. 원래 쓰려던 프로필로 바꾸거나 전용 프로필 방식으로 전환한 뒤, 눈으로 보는 테스트를 다시 하세요.

--autoConnect에서 브라우저 도구가 시간 초과되면 네 가지를 확인하세요. Chrome 144 이상이 이미 실행 중인지, chrome://inspect/#remote-debugging에서 원격 디버깅이 켜져 있는지, Chrome의 연결 요청을 허용했는지, 다른 도구가 같은 브라우저를 잡고 있지 않은지입니다. Chrome DevTools MCP는 열린 탭을 모두 불러오므로 필요 없는 탭은 닫아 두세요.

여전히 내가 할 일

LaunchRepo는 일부러 백그라운드 서비스로 만들지 않았습니다. 아래 순간에는 실행이 멈추고 사람에게 넘기는 인계로 기록되며, 에이전트는 이를 절대 우회하지 않습니다.

CAPTCHA와 봇 확인

Claude Code는 해당 플랫폼을 멈추고 prepared_needs_human으로 기록한 뒤 터미널에 알리며, 대시보드는 이를 “내 확인 필요” 아래에 보여 줍니다. 같은 Chrome 탭에서 챌린지를 풀고 Claude Code에게 계속하라고 말하세요.

2FA와 인증 코드

코드는 연결된 Chrome에 로그인된 메일함으로 오며, Claude Code가 거기서 확인 링크를 열 수 있습니다. 메일함이 다른 곳에 있다면 코드를 직접 전달하고, 트래커에는 사람에게 넘긴 인계로 기록됩니다.

유료 옵션 권유

유료로만 가능한 경로는 짧은 메모와 함께 deferred_paid로 끝납니다. 권한 요청상 클릭이 허용되더라도 Claude Code는 구매를 승인하거나 카드 등록이 필요한 체험을 시작하지 않습니다.

“게시됨” 확인

Claude Code가 공개 리스팅 URL을 찾을 수는 있지만, 플랫폼은 내가 직접 확인한 뒤에야 게시됨으로 표시됩니다. 감사 화면은 어디까지나 감사 화면일 뿐입니다.

벤치마크도 순위도 없습니다. Claude Code의 호환성을 말하는 이유는 위의 두 가지 요건을 충족하기 때문이지, 다른 에이전트와 비교해 측정했기 때문이 아닙니다.

자주 묻는 질문