Claude Code on the Web 사용법: 브라우저에서 돌리는 AI 코딩 에이전트
claude code 웹 한 줄 요약
2026년 4월 기준
claude code 웹은claude.ai/code에서 GitHub 저장소를 연결한 뒤 브라우저로 코딩 태스크를 맡기는 방식이에요. Pro 월 $20부터 시작할 수 있고, 탭을 닫아도 세션은 Anthropic 클라우드에서 계속 돌아가요. 다만 웹 흐름은 GitHub 중심이라 GitLab이나 로컬 전용 세팅을 기대하면 바로 막힐 수 있어요.
claude.ai/code에 저장소 하나 연결하고 작은 수정부터 맡겨보면 느낌이 바로 와요. 노트북 덮고 자리를 비워도 작업이 계속 돌아가거든요. 처음 써보면 편해 보여요. 그런데 여기서 생각보다 많이 막혀요. GitHub App이 꼭 필요한 순간이 언제인지, GitHub CLI 도구 gh로 연결하면 뭐가 다른지, claude code 웹과 명령줄 도구(CLI)가 같은 제품인지 다른 제품인지 헷갈리기 쉬워요. 로컬 환경 변수 파일 .env나 사용자 설정이 그대로 따라올 거라고 기대하면 예상과 어긋나는 지점도 나와요. 2026년 4월 기준으로는 웹이 꽤 쓸 만해졌는데, 아직 리서치 프리뷰(Research Preview, 공개 베타 성격) 느낌이 남아 있더라고요. 그래서 이 글은 접속부터 첫 태스크, 병렬 세션, --remote와 --teleport 흐름, 요금제 고르는 기준, 지금 시점 제약까지 한 번에 정리해뒀어요. 터미널이 싫은 개발자도 따라갈 수 있고, 이미 CLI를 쓰는 사람도 언제 웹으로 넘기면 좋은지 기준을 잡을 수 있을 거예요.
Claude Code 웹 버전과 다른 사용 환경 한눈에 보기
Claude Code는 한 제품처럼 보이지만 실제로는 쓰는 환경이 꽤 나뉘어요. claude code 웹은 그중에서 “브라우저에서 클라우드 세션을 돌리는 모드”라고 보면 돼요. 같은 이름인데 왜 느낌이 이렇게 다를까요?
| 사용 환경 | 어디서 쓰나 | 잘 맞는 일 | 먼저 알아둘 점 |
|---|---|---|---|
| CLI | 터미널 | 긴 리팩토링, 스크립트, 자체 자동화 | 기능 폭이 가장 넓어요 |
| Desktop | macOS, Windows 앱 | 시각적 diff 리뷰, 병렬 세션, 로컬 작업 | Linux는 아직 안 돼요 |
| Web | claude.ai/code |
오래 걸리는 태스크, 백그라운드 작업, 풀 리퀘스트(PR) 생성 | Anthropic 클라우드 가상 머신에서 돌아가요 |
| VS Code | 확장 | 편집기 안에서 바로 수정 | 로컬 작업 흐름이 중심이에요 |
| JetBrains | 플러그인 | IntelliJ, PyCharm, WebStorm 작업 | IDE에 붙여 쓰는 쪽에 맞아요 |
| Mobile | Claude iOS, Android 앱 | 웹 세션 시작, 진행 상황 보기 | 깊은 코드 리뷰는 불편한 편이에요 |
| Slack | @Claude 멘션 |
팀 채널에서 바로 태스크 위임 | 실제 실행은 웹 세션으로 넘어가요 |
| Chrome 확장(베타) | Chrome, Edge | 브라우저 테스트, 폼 자동화, 콘솔 디버깅 | Brave, Arc는 아직 안 돼요 |
| GitHub Actions, GitLab CI/CD | 자동 빌드·테스트 파이프라인 | PR 리뷰, 이슈 처리, 정기 자동화 | 웹 세션과는 다른 자동화 흐름이에요 |
| Agent SDK | Python, TypeScript | Claude Code 기능을 앱에 내장 | 개발자용 SDK라 세팅 난도가 올라가요 |
웹만 따로 떼어 보면 “브라우저판 Claude Code”인데, 실제 판단은 다른 사용 환경이랑 같이 봐야 쉬워요. 도구 선택까지 같이 고민 중이면 Claude Code vs Codex: 직접 비교하고 정리한 선택 기준도 바로 이어서 보는 편이 덜 헤매요.
claude.ai code 접속하고 GitHub 연결하기
시작은 단순해요. claude.ai/code에 로그인하고 저장소 접근만 열어주면 첫 세션까지 금방 이어져요. 로그인하면 바로 저장소가 뜰 거라 생각했죠? 실제로는 몇 단계 더 거쳐야 해요.
아래 순서로 가면 덜 막혀요.
claude.ai/code에 로그인해요.- 저장소 접근 방식을 고릅니다.
- 기본 환경을 고르고 첫 프롬프트를 넣어요.
- diff를 보고 코멘트한 뒤 PR을 만들어요.
브라우저에서만 끝내고 싶으면 GitHub App 연결이 제일 직관적이에요. 이미 로컬에서 gh를 쓰고 있다면 Claude Code CLI 안에서 /web-setup으로 토큰을 동기화하는 길도 있어요. 근데 여기서 하나 기억해야 해요. 기본 세션은 gh 연결만으로도 돌릴 수 있지만, 자동 PR 후속 수정인 Auto-fix는 GitHub App이 있어야 해요.
# Claude Code CLI 실행
claude
/web-setup
연결 체크리스트도 짧게 잡아둘게요.
- GitHub 저장소 권한 범위를 너무 넓게 열지 않았는지 보기
- 기본 환경에서 네트워크 허용 범위를 얼마나 줄지 정하기
- 셋업 스크립트가 필요한 저장소인지 먼저 판단하기
- 첫 프롬프트는 README 수정처럼 작은 작업으로 시작하기
CLI 설치부터 막힌다면 Claude Code 사용법: 설치부터 첫 실행까지 5분 가이드를 먼저 보고 다시 돌아오면 훨씬 빨라요.
claude code 요금제, 어디까지 써야 충분할까
요금제는 복잡해 보이지만 핵심은 간단해요. 개인이면 Pro로 시작하고, 병렬 세션을 오래 돌릴 때만 Max를 고민하면 돼요. 괜히 Max부터 결제할 필요 있을까요?
| 플랜 | 2026-04-18 기준 가격 | claude code 웹 | 이런 사람에게 맞아요 |
|---|---|---|---|
| Free | 무료 | 안 돼요 | Claude만 가볍게 써보는 경우 |
| Pro | 월 $20, 연간 결제 시 월 $17 | 돼요 | 개인 개발자, 작은 저장소 위주 |
| Max 5x | 월 $100 | 돼요 | 병렬 세션을 자주 돌리는 경우 |
| Max 20x | 월 $200 | 돼요 | 거의 종일 Claude Code를 붙잡는 경우 |
| Team Standard | 월 $25/seat, 연간 결제 시 월 $20/seat | 안 돼요 (Claude Code는 Premium seat 전용) | 채팅 중심 협업 팀 |
| Team Premium | 월 $125/seat, 연간 결제 시 월 $100/seat | 돼요 (Claude Code를 쓰려면 이 seat 필수) | 팀 안 파워 유저 |
| Enterprise | 별도 플로우 | 돼요 | 보안, 관리자 통제가 필요한 조직 |
표 가격은 미국 기준 공식 가격 페이지 값이에요. 지역과 세금에 따라 다르게 보일 수 있거든요.
실전 감각으로 보면 이래요.
- 하루에 작은 수정 몇 개, 문서 손보기, 테스트 하나 고치기 정도면 Pro로 먼저 시작해도 돼요.
- 병렬 세션을 두세 개씩 길게 돌리면 Max가 빨리 편해질 수 있어요.
- 노트북 꺼도 돌아야 하는 자동화가 잦다면 Claude Code 루틴 실전 가이드: PR 리뷰·배포 검증을 노트북 꺼도 돌리는 법까지 같이 보고 예산을 잡는 편이 맞아요.
claude code 브라우저에서 첫 태스크와 병렬 세션 돌리기
첫 태스크는 작고 명확해야 해요. claude code 브라우저의 장점은 “내가 보고 있는 동안만 일하는 도구”가 아니라 “백그라운드에서 따로 굴러가는 작업자”처럼 쓸 수 있다는 점이거든요. 설마 첫 태스크부터 2천 줄 리팩토링을 던질 건 아니죠?
처음엔 이런 식으로 가는 게 좋아요.
1단계: 작은 작업부터 던지기
README에 설치 섹션을 추가해줘.
빠진 환경 변수 설명은 표로 정리하고, 끝나면 테스트 명령도 한 번 돌려줘.
실패하면 왜 실패했는지 마지막 메시지에 남겨줘.
2단계: diff에서 바로 코멘트 남기기
- 설명이 과하면 줄여달라고 바로 남겨요.
- 테스트를 안 돌렸으면 다시 시켜요.
- PR 제목이 어색하면 그 자리에서 바꿔달라고 하면 돼요.
3단계: 병렬 세션으로 쪼개기
# 서로 독립적인 작업을 따로 보냄
claude --remote "Fix the flaky test in auth.spec.ts"
claude --remote "Update the API documentation"
claude --remote "Refactor the logger to use structured output"
이렇게 보내면 세션이 따로 돌아요. 탭을 닫아도 계속 흘러가요. 모바일 앱에서 중간 상태만 확인하는 것도 가능해요. 작업을 잘게 나누는 감각이 아직 없다면 Claude Code 서브에이전트 만들기 실전 가이드: 자동 위임·비용 절감 세팅까지 쪽이 바로 도움이 돼요. 병렬로 돌릴수록 “한 세션에 다 몰아넣지 않는 습관”이 중요하거든요.
CLI에서 웹으로 보내고 다시 이어받기
이 부분이 진짜 편해요. 계획은 로컬에서 짜고 실행만 웹으로 넘기는 흐름인데, 한 번 잡아두면 터미널과 브라우저를 왔다 갔다 해도 맥락이 안 끊겨요.
가장 무난한 흐름은 이거예요.
# 먼저 로컬에서 계획만 잡음
claude --permission-mode plan
계획을 파일로 정리했다면 저장소에 넣고 푸시한 뒤 이렇게 보내요.
# 계획 파일을 커밋하고 푸시한 뒤 클라우드 실행
claude --remote "Execute the plan in docs/plan.md"
나중에 로컬에서 다시 이어받고 싶으면 이렇게요.
# 같은 저장소에서 클라우드 세션을 이어받음
claude --teleport <session-id>
여기서 주의할 점이 있어요.
--remote는 “지금 터미널 세션을 웹으로 옮기는 것”이 아니라 새 클라우드 세션을 만드는 명령이에요.--teleport는 같은 저장소, 깨끗한 Git 상태, 같은 계정이 맞아야 잘 붙어요.- 웹에서 “Open in CLI” 버튼으로 이어받는 길도 있어요.
- 클라우드 세션은 저장소 안 설정만 가져가요. 사용자 레벨 MCP(Model Context Protocol) 서버는 안 따라오거든요.
그래서 repo 안 설정과 로컬 설정의 경계를 먼저 잡아두는 게 좋아요. 이 부분은 MCP 서버 사용법: Claude Code 연결 가이드까지 같이 보면 한 번에 정리돼요.
claude code 웹에서 아직 안 되는 것들
리서치 프리뷰라는 말이 괜히 붙은 게 아니에요. claude code 웹은 분명 편한데, 로컬 Claude Code의 완전한 대체재로 보면 바로 실망할 수 있어요. 브라우저니까 로컬 세팅도 다 따라올 거라고 봤나요?
| 항목 | 지금 상태 | 왜 미리 알아야 하나 |
|---|---|---|
| 저장소 연결 | 웹 세션은 GitHub 흐름이 중심이에요 | GitLab, Bitbucket 사용자는 기대치 조절이 필요해요 |
| 로컬 사용자 설정 | 안 따라와요 | ~/.claude/*, 사용자 MCP, SSH 키는 그대로 못 써요 |
| 환경 변수와 시크릿 | 전용 secrets 저장소가 아직 없어요 | 팀 환경에서는 노출 범위를 꼭 봐야 해요 |
| 회사 로그인 연동(SSO) | 브라우저 인증이 필요한 흐름은 제한돼요 | 클라우드 세션에서 막히기 쉬워요 |
| Bun 패키지 매니저 | 설치는 돼도 프록시 호환 이슈가 있어요 | 패키지 받는 단계에서 실패할 수 있어요 |
| 세션 안정성 | 가끔 세션 목록이 안 뜨거나 이어받기가 꼬일 수 있어요 | 큰 작업부터 보내면 복구가 번거로워요 |
여기서 중요한 포인트 하나만 짚을게요. “Claude Code 전체가 GitHub만 된다”는 말은 틀려요. 로컬 CLI나 GitLab CI/CD 자동화는 별개로 돌아가거든요. 다만 claude code 웹 브라우저 흐름, 그리고 Slack에서 웹 세션으로 넘기는 흐름은 GitHub 저장소 연결이 중심이에요.
로컬 훅과 저장소 안 훅이 어떻게 다르게 먹는지 먼저 보고 싶다면 Claude Code Hooks 완벽 가이드 – 자동화 훅 설정법을 같이 보면 좋아요. 웹에서 안 먹는 이유가 대부분 여기서 갈립니다.
자주 묻는 질문
Q1: Claude Code 웹 버전과 CLI 버전의 차이가 뭐예요?
A: 제일 큰 차이는 실행 위치예요. 웹은 Anthropic 클라우드에서 돌아가서 탭을 닫아도 계속 가고, CLI는 내 터미널과 로컬 환경을 더 깊게 만져요. 긴 리팩토링이나 로컬 시크릿이 얽힌 일은 CLI가 낫고, 분리 가능한 태스크는 웹이 편한 편이에요.
Q2: 브라우저 탭을 닫으면 작업이 중단되나요?
A: 보통은 안 멈춰요. 클라우드 세션이 따로 돌기 때문에 나중에 다시 들어와 이어서 볼 수 있어요. 모바일 앱에서도 진행 상태를 체크할 수 있거든요.
Q3: GitHub 말고 GitLab도 웹 세션에서 쓸 수 있나요?
A: 2026년 4월 기준 웹 저장소 연결 흐름은 GitHub 중심이에요. GitLab CI/CD 자동화나 로컬 CLI 작업은 별개로 가능하지만, 브라우저에서 GitLab 저장소를 직접 연결하고 병합 요청까지 한 번에 가는 흐름은 아직 기대를 낮추는 게 맞아요.
Q4: Pro 플랜으로 웹 버전을 쓰기 충분한가요?
A: 작은 수정과 문서 작업 위주면 Pro로 먼저 시작해도 돼요. 근데 병렬 세션을 자주 돌리거나 긴 작업을 자주 맡기면 Max가 빨리 편해질 수 있어요.
Q5: CLI에서 시작한 일을 웹으로, 웹에서 CLI로 이어갈 수 있나요?
A: 가능해요. 터미널에서 새 클라우드 세션을 만들 때는 claude --remote를 쓰고, 웹 세션을 로컬로 이어받을 때는 claude --teleport <session-id>나 웹의 Open in CLI를 쓰면 돼요. 다만 기존 로컬 터미널 세션 자체를 그대로 웹으로 밀어 넣는 개념은 아니에요.
다음 단계
먼저 claude.ai/code에서 읽기 쉬운 GitHub 저장소 하나만 연결해보세요. 첫 프롬프트는 README 수정처럼 작은 걸로 시작하고, 로컬과 같이 쓰고 싶다면 Claude Code 공식 설치 가이드까지 이어서 세팅해두는 편이 훨씬 덜 막혀요.
