Claude Code on the Web — 브라우저에서 바로 시작하는 AI 주도 개발

Claude Code on the Web은 브라우저에서 claude.ai/code에 접속해 쓰는 Claude Code의 웹판입니다. GitHub 저장소를 연결하면 Anthropic이 관리하는 클라우드 Sandbox 안에서 코드 분석·변경·테스트·PR 작성까지 끝나기 때문에, 로컬에 아무것도 설치하지 않고 지금 바로 AI 주도 개발을 시작할 수 있습니다.

핵심 요약

• 브라우저에서 claude.ai/code에 접속하고 GitHub 계정을 연결하면 바로 쓸 수 있습니다.
• 안전한 클라우드 Sandbox에서 코드 분석·변경·PR 작성까지 완결됩니다.
• 여러 태스크를 병렬로 돌리거나 스마트폰 앱에서 작업을 시작할 수 있습니다.
• teleport 기능으로 웹에서 시작한 세션을 로컬 CLI로 이어받을 수 있습니다.
• SessionStart 훅으로 의존 패키지 설치를 자동화할 수 있습니다.

Claude Code on the Web은 무엇인가

2025년 10월에 공개된 Claude Code의 브라우저판입니다. 통상의 Claude Code는 터미널에서 동작하는 CLI 도구지만, 웹판에서는 같은 기능을 브라우저에서 씁니다. Claude 웹 화면의 사이드바에서 '코드'를 클릭하면 열립니다. Claude Code 자체의 개념은 Claude Code의 기초를 참고하세요.

현재는 리서치 프리뷰 단계이며, Claude Pro·Max·Team 플랜 사용자와 Enterprise의 프리미엄 시트 또는 Chat + Claude Code 시트 사용자가 쓸 수 있습니다. 아직 발전 중인 기능이지만 실용 수준에는 이미 도달해 있습니다.

비교적 새 기능이라 사양이 바뀔 수 있습니다. 최신 정보는 공식 문서에서 확인하세요.

어떤 일에 쓰면 좋은가

CLI판과는 다른 강점이 있습니다. 공식 문서가 제시하는 용도는 네 가지입니다.

코드 아키텍처에 대한 질문

"이 프로젝트의 전체 그림을 알려줘", "인증 처리는 어디서 하고 있어?" 같은 질문으로 대규모 저장소의 구조를 빠르게 파악할 수 있습니다. CLI에서도 가능한 일이지만, 로컬에 클론하지 않아도 읽어들일 수 있다는 점에서 훨씬 부담이 적습니다.

버그 수정과 정형 태스크

신기능 개발은 사람이 세밀하게 방향을 잡아 줘야 하지만, 기존 기능의 버그 수정이나 리팩터링은 그만큼의 개입이 필요 없습니다. 지시를 내리고 완료를 기다리기만 하면 되는 작업은 웹판에서 언제 어디서든 시작할 수 있습니다.

여러 태스크의 병렬 처리

브라우저 위에서 여러 태스크를 동시에 실행할 수 있습니다. 예를 들어 버그 수정 몇 건을 각각 다른 세션에서 병행할 수 있습니다. 다만 병렬 실행은 요청 한도 소비가 빨라지고 변경이 충돌할 수 있으니 적당한 수준으로 쓰는 편이 좋습니다.

이동 중의 작업

Claude 스마트폰 앱에서도 접근할 수 있습니다. 통근 중이나 노트북에서 떨어져 있는 동안 태스크를 시작해 두고, 에이전트의 작업을 지켜보거나 추가 지시를 내릴 수 있습니다.

설정은 어떻게 하나

다섯 단계로 끝납니다.

1. claude.ai/code에 접속합니다.
2. GitHub 계정을 연결합니다.
3. 작업할 저장소에 Claude GitHub App을 설치합니다.
4. 기본 환경을 선택합니다(네트워크 접근 레벨 설정).
5. 코딩 태스크를 전송해 작업을 시작합니다.

태스크를 전송하면 Anthropic이 관리하는 가상 머신에 저장소가 클론됩니다. 이 구조 덕분에 로컬 환경을 건드리지 않고 코드 분석과 변경을 할 수 있습니다.

GitHub 계정을 연결하면 그 계정이 열람할 수 있는 저장소는 모두 클라우드 세션에서 쓸 수 있습니다. 개별 저장소에 Claude GitHub App을 설치하는 것은 PR 자동 수정(Auto-fix) 기능을 쓸 때만 필요합니다.

실제 작업은 어떻게 흘러가나

저장소를 고른 뒤에는 CLI판과 마찬가지로 자연어로 지시하면 됩니다.

> 테스트 커버리지를 확인하고 부족한 부분을 추가해줘

태스크를 시작하면 내부에서는 다음 순서로 처리됩니다.

1. 클론과 준비 — 저장소가 Anthropic 관리 가상 머신에 클론되고 셋업 스크립트가 실행됩니다.
2. 네트워크 구성 — 인터넷 접근이 설정에 따라 구성됩니다.
3. 태스크 실행 — Claude가 코드를 분석하고 변경을 가하고 테스트를 실행합니다.
4. 브랜치 푸시 — 변경이 브랜치에 푸시되어 PR을 만들 준비가 됩니다.

작업이 끝나면 Claude Code가 GitHub에 풀 리퀘스트를 만들 수 있습니다. 나머지는 GitHub에서 리뷰하고 머지하면 되므로 브라우저를 떠날 필요가 없습니다.

웹 세션을 로컬 CLI로 이어받으려면 (teleport)

웹에서 시작한 작업을 로컬 CLI로 이어받는 기능을 teleport라고 부릅니다. 이동 중에 웹에서 작업을 시작하고 책상에 돌아와 CLI로 본격 작업을 이어갈 때 유용합니다.

1. 브라우저의 세션 메뉴에서 'Open in > Terminal'을 선택합니다.
2. 명령이 클립보드에 복사됩니다.
3. 로컬의 대상 저장소에서 작업 트리를 깨끗한 상태로 만들어 둡니다.
4. 복사한 명령을 터미널에서 실행합니다.
5. --teleport가 대상 브랜치를 자동으로 fetch·checkout하고 원격 세션을 읽어들입니다.

복사되는 명령은 이런 형태입니다.

claude --teleport session_0123xxxxxxxyyyyyyzzzzzzzzzzz

로컬에서 실행하면 어느 디렉터리에서 열지 확인한 뒤 세션이 재개됩니다.

 Teleport to Repo
 Open Claude Code in my-org/my-app:
 ❯ 1. Use ~/workspace/my-app
   2. Cancel
 Enter to confirm · Esc to cancel

이어받은 뒤에는 웹판에서 하던 대화의 연장선에서 그대로 작업이 계속됩니다. 웹판이 이미 브랜치에 커밋·푸시까지 해 둔 상태라면 Session resumed 표시 뒤에 바로 다음 지시를 내리면 됩니다.

세션을 이동할 수 있는 것은 같은 계정으로 인증돼 있는 경우뿐입니다. CLI판의 기본 조작은 첫 세션 실전을 참고하세요.

의존 패키지 설치를 자동화하려면 (SessionStart 훅)

대부분의 프로젝트는 작업 전에 의존 패키지 설치가 필요합니다. 웹판이 스스로 판단해 설치를 시도하기도 하지만, SessionStart 훅을 쓰면 세션 시작 시 확실하게 설치 스크립트가 돌아갑니다. 설정 파일과 스크립트를 Git에 함께 올려 두면 누가 어디서 세션을 열든 같은 환경이 준비됩니다.

훅 등록

.claude/settings.json에 아래처럼 적습니다.

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup|resume",
        "hooks": [
          {
            "type": "command",
            "command": "bash \"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh"
          }
        ]
      }
    ]
  }
}

설치 스크립트

scripts/install_pkgs.sh를 만듭니다. React·Next.js 프로젝트에서 흔히 쓰는 npm install을 실행하는 예입니다.

#!/bin/bash
# Auto-install dependencies on session start
# Triggered by the SessionStart hook in .claude/settings.json

echo "Installing dependencies..."

if [ -f "package.json" ]; then
  npm install
else
  echo "No package.json found"
fi

exit 0

package.json 유무를 확인한 뒤 npm install을 실행하는 단순한 구성입니다. Python 프로젝트라면 pip install -r requirements.txt로 바꾸는 식으로 프로젝트에 맞게 고치면 됩니다. 훅의 상세는 SessionStart 훅과 훅(Hooks) 개요에서 다룹니다.

클라우드 환경은 어떻게 설정하나

웹판은 Anthropic이 제공하는 클라우드 환경에서 코드를 분석·변경하며, 이 환경을 직접 설정할 수 있습니다. 리서치 프리뷰 중이라 세부 사양은 바뀔 수 있습니다.

네트워크 접근은 기본적으로 제한된다

보안상의 이유로 가상 환경의 네트워크 접근은 기본적으로 허가 목록 도메인으로 제한됩니다.

외부 API를 쓰는 프로젝트라면 필요한 도메인이 허가 목록에 있는지 미리 확인해 두세요. 없으면 접속에 실패합니다.

새 클라우드 환경 추가

1. 채팅 입력란 근처의 'Default' 항목을 클릭합니다.
2. '+환경을 추가'를 선택합니다.
3. 나중에 고를 때 알아보기 쉬운 이름을 붙입니다.
4. 네트워크 접근 레벨과 환경 변수를 설정하고 저장합니다.

네트워크 접근 레벨 네 가지

드롭다운에서 고릅니다.

• 없음 — GitHub 조작용 전용 프록시와 Anthropic API 접속을 제외하고 네트워크 접근을 허가하지 않습니다.
• Trusted — 검증된 소스에서만 접근을 허가합니다. github.com이나 npmjs.com 등 개발에서 자주 쓰는 도메인이 자동으로 허가됩니다.
• Full — 모든 네트워크 접근을 허가합니다.
• 커스텀 — 허가할 도메인을 직접 지정합니다. npm 같은 일반 패키지 매니저는 체크만 하면 Trusted와 마찬가지로 자동 허가되므로, 체크를 켜 두고 추가로 필요한 도메인만 더하는 방식이 편합니다.

환경 변수

클라우드 환경 설정 화면의 '환경 변수' 항목에서 .env와 같은 KEY=VALUE 형식으로 설정합니다. 권한과 보안 설정 전반은 퍼미션 설정 최적화를 참고하세요.

제한 사항은 무엇인가

이용 전에 알아 두면 기대와의 차이를 줄일 수 있습니다.

• GitHub 저장소만 지원 — 현재는 GitHub 호스팅 저장소에서만 동작합니다. GitLab·Bitbucket 저장소는 로컬 번들로 전송해 클라우드 세션에서 열 수 있지만, 번들로 만든 세션은 원격으로 push할 수 없습니다.
• 플랜 제한 — Pro·Max·Team 플랜과 Enterprise의 프리미엄 시트 또는 Chat + Claude Code 시트에서만 쓸 수 있습니다. 무료 플랜은 이용할 수 없습니다.

CLI판과 웹판은 어떻게 가려 쓰나

웹판은 "태스크를 던지고 나머지는 기다리기만" 하는 워크플로에 맞습니다. 웹판도 저장소에 포함된 프로젝트 스코프의 .mcp.json에서 MCP 서버를 읽어들이지만, 승인 프롬프트를 낼 수 없어 무조건 자동 접속된다는 점에 주의하세요. 사용자·로컬 스코프의 MCP 서버를 쓰거나 로컬 환경 고유 설정에 의존하는 본격적인 커스터마이즈가 필요하면 CLI판을 고르는 편이 좋습니다. 다른 도구와의 비교는 Claude Code vs Cursor vs Codex에서 다룹니다.

정리

• Claude Code on the Web은 claude.ai/code에서 GitHub 저장소를 연결해 브라우저만으로 쓰는 Claude Code입니다.
• 클라우드 Sandbox에서 분석·변경·테스트·브랜치 푸시까지 끝나며, PR 생성 후 GitHub에서 리뷰·머지하면 됩니다.
• teleport로 웹 세션을 로컬 CLI에 이어받을 수 있고, SessionStart 훅으로 의존 패키지 설치를 자동화할 수 있습니다.
• 네트워크 접근은 기본 제한이며, 환경 설정에서 레벨과 환경 변수를 조정합니다.
• 정형 작업·이동 중·병렬 처리는 웹판, 본격 개발과 로컬 MCP는 CLI판으로 가려 쓰면 됩니다.