Claude Code Web - 설치 없이 브라우저만으로 코드 자동화, 병렬 작업 해보기

안녕하세요! 갓대희 입니다. :- )

오늘은 클로드 새로운 기능인 "클로 코드 Web버전"에 대해 써보려고 한다. 

 

 

2025년 10월, Anthropic이 Claude Code 웹 버전을 공개하면서 이제 개발자들은 브라우저에서 바로 AI 코딩 에이전트를 실행할 수 있게 되었다. GitHub 저장소 연결 한 번으로 버그 수정부터 병렬 개발까지, 터미널 없이 모든 것이 가능하다. 

지금까지 터미널에서만 쓸 수 있었던 Claude Code를 이제 웹 브라우저에서 쓸 수 있다. 그렇다는건 이제 스마트폰에서도 쉽게 사용 가능해진게 아닐까? 

 

Claude Code란?

Claude Code는 Anthropic이 만든 AI 기반 코딩 어시스턴트다. 기존의 자동완성 도구들과 다른 점은 "에이전트"로 작동한다는 것이다.

단순히 코드 한 줄을 완성해주는 게 아니라, 저장소를 클론하고, 테스트를 돌리고, 코드를 수정하고, PR까지 만들어주는 자율적인 코딩 파트너라고 보면 된다. 

특히 흥미로운 건 Anthropic의 제품 매니저 Cat Wu가 밝힌 내용이다. Claude Code 제품 자체의 90%가 AI 모델이 작성했다고 한다. "이제 거의 키보드 앞에 앉아서 코드를 짜지 않고, 대부분 Claude Code의 결과물을 리뷰한다"고 말했다.

개발자의 역할이 코드를 짜는 사람에서 AI 어시스턴트를 관리하는 매니저로 바뀌고 있는 셈이다.

 

클로드 코드의 웹 버전의 등장

2025년 10월 20일, Anthropic은 Claude Code on the web을 공개했다.

이제 claude.ai/code로 접속하면 바로 브라우저에서 Claude Code를 사용할 수 있다.

터미널을 열 필요도 없고, 로컬에 CLI를 설치할 필요도 없다. GitHub 계정만 연결하면 끝이다.

💡 비용
현재 웹 버전은 Pro($20/월)와 Max($100-200/월) 사용자를 대상으로 베타 서비스 중이다. Team과 Enterprise의 프리미엄 시트 사용자에게도 곧 제공될 예정이라고 한다. 웹 세션은 다른 모든 Claude Code 사용량과 rate limit을 공유한다는 점을 기억하자.

 

시작해보기

이론은 그만하고, 실제로 어떻게 시작하는지 단계별로 알아보자. 

Step 1: 계정 준비

1. 클로드 Desktop or Web 접속: 기존 Claude 계정이 있다면 그대로 사용. 없다면 새로 가입
2. 플랜 확인: Pro 또는 Max 구독이 필요. Pro는 월 $20, Max는 $100-200
3. Code 탭 찾기: 로그인 후 상단 메뉴에서 "Code" 탭 클릭 (또는 직접 claude.ai/code 접속)
   
   

Step 2: GitHub 연결하기

1. OAuth 인증: "Connect GitHub" 버튼 클릭

 

2. 권한 부여: GitHub OAuth 페이지에서 접근 권한 승인

3. 네트워크 설정: 웹 버전의 보안을 위해 네트워크 접근을 제한할 수 있다. 세 가지 모드가 있다:

특수한 경우가 아니라면 당연히 "신뢰할 수 있는 네트워크 엑세스" 클릭.

• 완전 차단 (No Internet): 외부 네트워크 접근 완전 차단
• 제한된 접근 (Restricted): 화이트리스트에 있는 도메인만 접근 (기본값)
• 전체 접근 (Full Internet): 모든 도메인 접근 허용 (주의 필요)

 

4. 저장소 선택: 작업할 저장소 선택 (public/private 모두 가능)

 - public : 바로 검색하여 선택 가능하다.

 - private : GitHub 앱 설치 이후 선택 가능 하다.

 

5. 브랜치 확인: 기본적으로 default 브랜치가 클론됨 (프롬프트로 특정 브랜치 지정 가능)

 - 본인이 작업할 브랜치도 선택 가능하다

 

자연어를 통해 프롬프트 사용해보기

안녕 Claude! 이 프로젝트의 구조를 분석하고,
README.md 파일을 업데이트해줘.
프로젝트 개요, 설치 방법, 사용 예제를 포함해서 작성해줘.

이렇게 간단한 프롬프트로 시작할 수 있다. Claude는 저장소를 분석하고, 자동으로 작업을 수행한 뒤 PR을 만들어준다.

ex) 예시

 

작업이 끝나면 브라우저 알림을 통해 알림을 받을 수도 있다.

 

작업이 완료되면 보고서와 함께, pr작업 페이지로 유도 하여 준다.

 

CLAUDE.md

Claude Code를 제대로 활용하려면 CLAUDE.md 파일을 잘 작성해야 한다.

이 파일은 Claude가 프로젝트를 이해하는 데 필요한 많은 컨텍스트를 담고 있다. Netflix의 시니어 엔지니어 Tyler Burnam은 "CLAUDE.md 파일은 Claude Code를 단순한 도구에서 프로젝트를 이해하는 전문 개발자로 바꿔준다"고 말하기도 하였다.

💡 중요한 원칙
CLAUDE.md는 프롬프트보다 우선순위가 높다. Claude Code는 CLAUDE.md의 지시사항을 불변의 시스템 규칙으로 취급하고, 사용자 프롬프트는 그 규칙 안에서 작동하는 유연한 요청으로 처리한다. 즉, CLAUDE.md에 "절대 main 브랜치에 직접 커밋하지 마라"고 써있으면, 사용자가 아무리 요청해도 Claude는 그렇게 하지 않는다.

 

이후 하기에 내용을 작성하겠지만 프롬프트 창에서 / 슬래시를 입력하여도 웹 버전에서는 자동완성이 현재 되지 않는 것 으로 보인다.

다만 어차피 claude code 기반이기 때문에 /init 를 입력하면 알아서 동작 하는 것을 볼 수 있다.

 

기본 CLAUDE.md 템플릿

# Project Overview

## Tech Stack
- Framework: Next.js 14
- Language: TypeScript 5.2
- Styling: Tailwind CSS 3.4
- Database: PostgreSQL with Prisma ORM
- Testing: Jest + React Testing Library

## Project Structure
- `src/app`: Next.js App Router pages
- `src/components`: Reusable React components
- `src/lib`: Core utilities and API clients
- `src/hooks`: Custom React hooks

## Key Commands
- `npm run dev`: Start development server (port 3000)
- `npm run build`: Build for production
- `npm run test`: Run test suite
- `npm run lint`: Run ESLint
- `npm run type-check`: TypeScript type checking

## Code Style
- Use ES modules (import/export)
- All new components must be function components with Hooks
- Prefer arrow functions for component definitions
- Use descriptive variable names (no single letters except loops)
- Add JSDoc comments for all exported functions

## Testing Guidelines
- Write tests using Jest and React Testing Library
- Aim for 80% code coverage minimum
- Include edge cases and error handling
- Test files should be named `*.test.tsx`

## Do Not Section
- Do not edit any files in the `src/legacy` directory
- Do not commit directly to the `main` branch
- Do not use `any` type in TypeScript
- Do not skip writing tests for new features

계층적 CLAUDE.md 구조

CLAUDE.md 파일은 계층적으로 구성할 수 있다. Claude는 다음 순서로 파일을 읽는다:

1. 사용자 홈 디렉토리: `~/.claude/CLAUDE.md` (모든 프로젝트에 적용)
2. 프로젝트 루트: `project-root/CLAUDE.md` (프로젝트 전체 규칙)
3. 각 디렉토리: `project-root/components/CLAUDE.md` (특정 디렉토리 규칙)
4. 로컬 파일: `CLAUDE.local.md` (git-ignored, 개인 메모)

💡 팁
CLAUDE.md는 최대 100-200줄을 넘지 않도록 하자. 너무 길면 컨텍스트 윈도우를 낭비한다. 중요한 정보만 간결하게 작성하고, 자세한 내용은 다른 CLAUDE.md 파일이나 문서를 참조하도록 하자. Tyler Burnam은 "DRY (Don't Repeat Yourself) 원칙을 CLAUDE.md에도 적용하라"고 조언한다.

 

동작 방식의 이해

내부 구조를 살펴보면 꽤 똑똑하게 설계되어 있다. Claude Code 웹 버전은 기본적으로 기존의 CLI 도구를 컨테이너로 감싼 것이다.

웹 버전은 기본적으로 `--dangerously-skip-permissions` 플래그로 설정된 Claude Code CLI를 사용한다고 한다.

실행 워크플로우

1. 저장소 연결: GitHub OAuth를 통해 저장소 접근 권한 부여
2. 환경 준비: Anthropic 관리 클라우드 인프라에 격리된 VM 생성
3. 이미지 로드: Node.js, Python, Go 등 일반적인 툴체인이 사전 설치된 universal image 사용
4. 저장소 클론: 기본 브랜치를 클론하거나 프롬프트로 특정 브랜치 지정 가능
5. Hooks 실행: SessionStart hooks 실행 (npm install, 환경 변수 설정 등)
6. Claude 실행: 코드 작성, 테스트 실행, 자체 검증
7. 실시간 모니터링: 웹 인터페이스에서 진행 상황 추적 및 방향 조정 가능
8. PR 생성: 작업 완료 후 자동으로 Pull Request 생성 및 변경 요약 제공

 

Hooks로 워크플로우 사용해보기

⚠️ CLI vs 웹 버전 차이

Hooks는 CLI 버전에서 모든 기능을 사용할 수 있다.

웹 버전(claude.ai/code)은 클라우드 샌드박스 환경에서 실행되므로 다음과 같은 제한이 있다:

• ❌ 로컬 시스템 명령어 (osascript 등) 사용 불가
• ❌ 로컬 파일 시스템 접근 불가
• ⚠️ Git 명령어는 GitHub 통합으로 자동 처리됨
• ✅ npm, pip 등 패키지 관리자는 사용 가능

CLI 버전에서는 프롬프트로 "이렇게 해줘"라고 부탁하는 대신, 특정 시점에 자동으로 실행되는 스크립트를 등록할 수 있다. 웹 버전에서는 SessionStart와 PostToolUse를 통한 환경 설정과 코드 포맷팅 등이 가능하다.

사용 가능한 Hook 이벤트

• SessionStart: 세션 시작 시 실행 (환경 설정, 의존성 설치 등) ✓ 웹 버전 지원
• UserPromptSubmit: 사용자 프롬프트 제출 시 실행 (프롬프트 검증, 로깅 등) ○ CLI 권장
• PreToolUse: 도구 실행 전 실행 (권한 확인, 차단 등) ○ CLI 권장
• PostToolUse: 도구 실행 후 실행 (자동 포맷팅, 테스트 실행 등) ✓ 웹 버전 지원
• Stop: 응답 완료 시 실행 (알림, 커밋 등) ✗ CLI 전용
• PreCompact: 대화 압축 전 실행 (백업 등) ○ CLI 권장

기본 Hooks 설정 파일 (.claude/settings.json)

{
  "hooks": {
    "SessionStart": [{
      "hooks": [{
        "type": "command",
        "command": "npm install && echo 'Dependencies installed'"
      }]
    }],
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{
        "type": "command",
        "command": "if [[ $TOOL_OUTPUT_PATH =~ \\.ts$ ]]; then npx prettier --write \"$TOOL_OUTPUT_PATH\"; fi"
      }]
    }]
  }
}

웹/CLI 공통: TypeScript 자동 포맷팅

{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{
        "type": "command",
        "command": "if [[ $TOOL_OUTPUT_PATH =~ \\.ts$ ]]; then npx prettier --write \"$TOOL_OUTPUT_PATH\"; fi"
      }]
    }]
  }
}

이 Hook은 웹 버전과 CLI 버전 모두에서 작동한다. Claude가 .ts 파일을 수정할 때마다 자동으로 Prettier를 실행한다.

웹/CLI 공통: 자동 의존성 설치

{
  "hooks": {
    "SessionStart": [{
      "matcher": "startup",
      "hooks": [{
        "type": "command",
        "command": "npm install && pip install -r requirements.txt"
      }]
    }]
  }
}

웹 버전 추천: 세션 시작 시 자동으로 패키지를 설치하여 환경을 구성한다.

CLI 전용: macOS 알림

{
  "hooks": {
    "Stop": [{
      "hooks": [{
        "type": "command",
        "command": "osascript -e 'display notification \"Claude finished\" with title \"Claude Code\"'"
      }]
    }]
  }
}

이 Hook은 CLI 버전 전용으로만 쓰일 것 이다. osascript는 macOS 시스템 명령어로, 웹 버전의 Linux 환경에서는 작동하지 않는다.

CLI 권장: Git 자동 커밋

{
  "hooks": {
    "Stop": [{
      "hooks": [{
        "type": "command",
        "command": "git add -A && git commit -m 'Auto-commit: Claude Code session completed' || true"
      }]
    }]
  }
}

CLI 버전 권장: 웹 버전에서는 Claude가 작업 완료 후 자동으로 브랜치에 변경사항을 푸시하므로, 별도의 Git Hook이 필요하지 않다. CLI 버전에서는 세션이 끝날 때마다 자동으로 변경사항을 커밋할 수 있다.

웹/CLI 환경 분기 처리

{
  "hooks": {
    "SessionStart": [{
      "matcher": "startup",
      "hooks": [{
        "type": "command",
        "command": "if [ \"$CLAUDE_CODE_REMOTE\" = \"true\" ]; then echo 'Web environment'; npm install; else echo 'CLI environment'; npm install; fi"
      }]
    }]
  }
}

팁: $CLAUDE_CODE_REMOTE 환경 변수를 사용하여 웹/CLI 환경을 구분하고 다른 동작을 수행할 수 있다.

⚠️ 보안 주의사항
Hooks는 현재 환경의 자격증명으로 자동 실행되므로 보안에 주의해야 한다. 악의적인 Hook 코드는 데이터를 유출할 수 있다. 항상 Hook 구현을 검토한 후 등록하자. 특히 외부에서 받은 Hook 설정은 반드시 검증해야 한다. CLI 버전에서는 로컬 시스템에 대한 전체 권한으로 실행되므로 더욱 주의가 필요하다.

 

병렬 작업

웹 버전의 가장 큰 강점은 병렬 실행을 매우 편하게 할 수 있다는 점일 것 같다. 브라우저 환경은 익숙하다보니 여러 탭을 통해 여러 저장소에서 동시에 작업을 수행할 수 있다. 하나의 브라우저 탭에서 버그 수정, 리팩토링, 새 기능 구현을 동시에 진행할 수 있다는 뜻이다.

실제 활용 사례
Simon Willison은 주말 동안 Claude Code 웹을 테스트하면서 여러 공개 저장소에 PR을 제출했다. 그 중 하나는 MiniJinja와 Jinja2의 성능 벤치마크 작업이었는데, Python 3.14의 free threading 버전까지 포함한 4개 시나리오를 비교하는 복잡한 작업이었다. Claude는 벤치마크 스크립트, 실행 쉘 스크립트, 마크다운 문서, matplotlib 차트까지 모두 자동으로 생성했다고 한다.

 

보안

클라우드에서 코드를 실행한다고 하면 가장 먼저 드는 생각이 "내 코드가 안전할까?"다. Anthropic은 이 부분에 꽤 신경을 쓴 것 같다.

보안 계층

1. 격리된 VM: 각 세션은 독립된 가상 머신에서 실행
2. 파일시스템 제한: 승인된 저장소 이외의 파일 시스템 접근 차단
3. 네트워크 제한: 기본적으로 제한된 네트워크 접근, 화이트리스트 방식
4. 보안 프록시: 모든 Git 작업은 전용 프록시를 통해 처리
5. 스코프 인증: 실제 GitHub 토큰 대신 스코프가 제한된 임시 자격증명 사용

특히 흥미로운 건 Anthropic이 새로운 오픈소스 라이브러리 anthropic-experimental/sandbox-runtime을 공개했다는 점이다. macOS에서는 Seatbelt을, Linux에서는 Bubblewrap을 사용하여 파일시스템과 네트워크를 격리한다.

주의할 점
네트워크 제한 화이트리스트에 gist.github.com 같은 외부 노출이 쉬운 도메인이 포함되어 있다는 지적이 있다. 완벽한 보안은 아니지만, 공격자가 방어선을 뚫기에는 충분히 어렵게 만들어졌다는 평가다. 민감한 API 키나 시크릿은 절대 CLAUDE.md 파일에 넣지 말고, 조직의 보안 정책을 반드시 확인하자.

 

슬래시 커맨드, 메모리 관리 

Claude Code는 슬래시 커맨드를 통해 다양한 기능을 제공한다. 웹 버전에서도 동일하게 사용할 수 있다.

( 현재 (2025년 10월말) 기준으로 / 를 입력했을때 자동완성 기능은 없어 보이지만 사용 가능 하다. )

필수 슬래시 커맨드

• /init: 프로젝트 첫 실행 시 사용. 프로젝트 전체를 분석하고 CLAUDE.md 자동 생성
• /memory: 현재 로드된 모든 CLAUDE.md 파일 확인 (홈, 프로젝트, 디렉토리별)
• /permissions: 도구 권한 설정 관리. 항상 허용할 도구나 차단할 도구 설정
• /clear: 대화 기록 초기화. 새 작업 시작 시 권장 (토큰 절약)
• /compact: 대화 내용 압축. 컨텍스트 윈도우가 꽉 찼을 때 사용
• /cost: 현재 세션의 API 사용량과 비용 확인

커스텀 슬래시 커맨드 만들기

`.claude/commands/` 디렉토리에 마크다운 파일을 만들면 커스텀 커맨드를 추가할 수 있다.

# .claude/commands/fix-github-issue.md

Please analyze and fix the GitHub issue: $ARGUMENTS

Follow these steps:
1. Use `gh issue view` to get the issue details
2. Understand the problem described in the issue
3. Search the codebase for relevant files
4. Implement the necessary changes to fix the issue
5. Write and run tests to verify the fix
6. Ensure code passes linting and type checking
7. Create a descriptive commit message
8. Push and create a PR

Remember to use the GitHub CLI (`gh`) for all GitHub-related tasks.

이제 `/project:fix-github-issue 1234` 명령으로 이슈 1234를 자동으로 수정할 수 있을 것 같은데 추구 결과도 공유.

 

웹 → CLI 세션 전환

웹 버전의 유용한 기능 중 하나가 "Open in CLI"다. 웹에서 시작한 세션을 로컬 CLI로 가져와서 계속 작업할 수 있다.

채팅 기록과 수정된 파일이 모두 로컬로 복사된다.

⚠️ 중요 제약사항
웹 세션을 CLI로 전환하려면 동일한 계정으로 인증되어 있어야 한다. 또한, 해당 저장소가 로컬에 체크아웃되어 있어야 한다.

실전 사용 시나리오

1. 외출 중: 웹 브라우저에서 작업 시작 → 대략적인 구조 잡기
2. 사무실 도착: 진행 상황 확인 → PR 초안 리뷰
3. 세밀한 작업 필요: "Open in CLI" 버튼 클릭 → 명령어 복사
4. 로컬에서 마무리: IDE와 통합된 환경에서 디버깅 및 테스트

세션 전환 실행 방법

1. 웹 인터페이스에서:

- 세션 화면에서 "Open in CLI" 버튼 클릭
- 터미널에서 실행할 명령어가 표시됨

 

 

2. 로컬 터미널에서:

# 1. Claude Code CLI가 설치되어 있어야 함
npm install -g @anthropic-ai/claude-code

# 2. 저장소가 로컬에 있어야 한다
cd /path/to/your/repo

# 3. 웹에서 제공한 명령어를 복사하여 실행
# (명령어는 웹 인터페이스에서 자동 생성됨)
# 예시: claude --[세션-토큰]
claude --teleport session_011CUR2wFcznsJMjST5

# 4. 기존 로컬 변경사항은 자동으로 stash됨
# 5. 원격 세션이 로드되고 작업 계속

 

ex) 실제 예시

 

전환 시 복사되는 내역

• ✓ 전체 채팅 기록 (대화 컨텍스트)
• ✓ 수정된 파일들의 변경사항
• ✓ 세션 상태 및 진행 상황
• ⚠️ 로컬의 기존 변경사항은 자동으로 stash됨

반대 방향 (CLI → 웹)은?

현재는 웹 → CLI 방향만 공식 지원된다고 한다. CLI에서 시작한 세션을 웹으로 옮기는 기능은 아직 제공되지 않는다. 사실 각 세션은 시작한 환경에서 완료하는 것이 권장된다.

 

활용 시나리오

공식 문서에서 권장하는 사용 케이스들을 보면 꽤 구체적이다:

웹 버전이 적합한 경우

• 코드 아키텍처 질문: "이 기능은 어떻게 구현되어 있어?" 같은 탐색 작업
• 명확한 버그 수정: 잘 정의된 이슈들을 처리할 때
• 병렬 작업: 여러 버그를 동시에 수정해야 할 때
• 로컬에 없는 저장소: 체크아웃하지 않은 코드를 작업할 때
• 백엔드 변경: TDD(테스트 주도 개발) 방식으로 작업할 때
• 이동 중 작업: iOS 앱으로 출퇴근 중에 작업 시작/모니터링

 

트러블슈팅

문제 1: 세션이 갑자기 끊김
증상: 작업 중간에 "Session expired" 메시지와 함께 연결이 끊어짐

원인: Rate limit 초과 또는 네트워크 불안정

해결: 병렬로 여러 작업을 돌릴 때는 rate limit을 주의하자. 세션은 자동 저장되므로, 다시 연결하면 이어서 작업할 수 있다. 중요한 작업은 중간중간 텔레포트로 로컬에 백업하는 습관을 들이자.

문제 2: 의존성 설치 실패
증상: npm install이나 pip install이 실패함

원인: 네트워크 설정이 제한 모드로 되어 있음

해결: 네트워크 설정을 "Restricted"로 바꾸고, npmjs.org, pypi.org를 화이트리스트에 추가. 또는 SessionStart hook에 의존성 설치 명령을 추가해두면 자동으로 실행된다.

문제 3: Claude가 특정 파일을 못 찾음
증상: "I couldn't find the file you mentioned" 메시지

원인: 파일명이 애매하거나 여러 곳에 같은 이름이 있음

해결: @ 기호로 파일을 명시적으로 태그하자. 예: "@src/components/Button.tsx 파일을 수정해줘". 디렉토리 구조가 복잡하면 CLAUDE.md에 프로젝트 구조를 명시하면 더 정확하게 찾는다.

문제 4: 생성된 PR이 너무 큼
증상: Claude가 필요 이상으로 많은 파일을 수정함

원인: 프롬프트가 너무 포괄적이거나, CLAUDE.md에 명확한 범위 제한이 없음

해결: 프롬프트를 구체적으로 작성하자. "모든 버그 수정"보다는 "로그인 버튼 클릭 시 발생하는 null reference error 수정"처럼 명확하게. CLAUDE.md의 "Do Not" 섹션에 건드리면 안 되는 파일을 명시하는 것도 좋다.

 

CLI vs 웹

웹 버전과 CLI는 서로 보완적인 관계 처럼 보인다.

특징	CLI 버전	웹 버전
접근성	터미널 필수	브라우저만 있으면 OK
로컬 통합	완벽한 로컬 환경 통합	제한적
병렬 실행	수동 관리	자동 지원
권한 관리	세밀한 제어	자동 승인
모바일 지원	불가능	iOS 앱 지원
환경 설정	완전한 커스터마이징	사전 구성된 환경
디버깅	로컬 디버거 사용 가능	로그 확인만 가능

 

개인적인 생각 - 활용 방안?

이미 유사한 도구가 많았고, Google Jules같은 툴과 매우 유사한 것 같았다.

다만 코딩 영역에서만큼은 여러 빅테크 기업중 상위 포지션을 점유하고 있는 Claude에서 출시 하였고, 나도 클로드를 아끼는 만큼 출퇴근 길에 활용 할 수 있도록 아이디어를 짜내 활용해볼 생각 이다.

개발에서도 활용할 수 있지만, 개발 이외에 블로그 초안을 작성하는 Github 프로젝트를 만든다던지의 생산성을 더욱 높일 수 있는 방법이 될 수 있을 것이라 생각 되었다.

 

개인적인 생각 - 실제 개발 워크플로우에 미치는 영향?

가장 큰 변화는 개발자의 역할이 바뀌고 있다는 점 같다. 많은 개발자들이 코드를 직접 짜는 사람에서 AI 코딩 어시스턴트를 매니징하는 사람으로 변해가는것 같다. 이에 여러가지 장단점, 채용 패러다임도 변하는 것 같다.

어느 기사에서는 너무 AI Coding에 의존하다보니 AI의 실수를 봐줄 인력이 없어지고 있다라는 헤드라인을 보았던 것 같고, 신입 개발자들을 선임 개발자들이 이끌어 가는 문화도 일부 없어져 가는 것 같다. 

 

활용 패턴 예시

1. 아침: 출근하면서 iPhone 앱으로 버그 수정 3개 할당
2. 점심: 브라우저에서 진행 상황 확인 및 방향 조정
3. 오후: 생성된 PR 리뷰 및 병합
4. 저녁: 복잡한 기능은 CLI로 텔레포트해서 세밀하게 작업

다만 몇 가지 한계도 명확하다. PR 중심의 워크플로우는 인간 개발자에게는 맞지만 AI 코딩에는 어색하다. 코드를 받아서 로컬에 체크아웃하고 다시 수정하는 과정이 불편하다는 것이다. IDE와 긴밀하게 통합된 개발 루프가 필요한데, 현재는 최종 점검 단계에 머물러 있다.

현재의 한계
- 웹 환경에서 GUI 프로그램이나 웹앱의 실제 실행 및 테스트 불가
- ephemeral container 환경이라 데이터 영속성 부족
- 무거운 빌드나 복잡한 로컬 환경 재현 어려움
- GitHub만 지원, GitLab 등 다른 플랫폼은 아직 미지원

 

정리

• 접근성의 혁명: 터미널 설정 없이 브라우저만으로 AI 코딩 에이전트를 사용할 수 있게 된 건 큰 의미가 있다. 특히 신규 개발자나 비개발자의 진입 장벽을 낮출 수 있다.
• CLAUDE.md의 중요성: 제대로 작성된 CLAUDE.md는 Claude를 프로젝트 전문가로 만든다. 시간을 투자해서 잘 작성해두면 그만한 가치가 있다.
• Hooks는 슈퍼파워: 자동 포맷팅, 테스트 실행, 커밋 등을 자동화하면 생산성이 폭발적으로 증가한다. 프롬프트로 부탁하는 것보다 훨씬 확실하다.
• 병렬 처리의 힘: 여러 버그를 동시에 처리하거나 다양한 저장소에서 작업할 수 있다는 건 생산성 측면에서 게임 체인저다. 하지만 rate limit을 공유한다는 점은 주의해야 한다.
• 보안과 편의성의 균형: 샌드박스 환경은 안전하지만 완벽하진 않다. 프로덕션 코드를 다룰 땐 여전히 신중해야 한다.
• 텔레포트의 유용성: 웹에서 시작해서 CLI로 마무리하는 하이브리드 워크플로우가 가능하다. 각 환경의 장점을 모두 활용할 수 있다.
• 도구는 계속 진화 중: CLI, 웹, 모바일 모두 각자의 강점이 있다. 상황에 맞게 적절히 선택하는 게 중요하다.
• 개발자 역할의 변화: 코드를 직접 작성하는 것에서 AI를 관리하고 결과를 검증하는 쪽으로 역할이 바뀌고 있다. 이에 맞는 새로운 스킬셋이 필요하다.

 

자주 묻는 질문 ❓

Q: Claude Code 웹과 CLI 중 어느 것을 써야 하나요?

A: 둘 다 써보세요. 빠른 버그 수정이나 여러 저장소 작업은 웹으로, 복잡한 로컬 개발이나 세밀한 제어가 필요한 작업은 CLI로 하는 게 좋습니다. 텔레포트 기능으로 웹에서 CLI로 세션을 옮길 수도 있어요.

Q: CLAUDE.md 파일은 꼭 만들어야 하나요?

A: 필수는 아니지만 강력히 권장합니다. 제대로 작성된 CLAUDE.md는 Claude를 단순한 코딩 도구에서 프로젝트를 이해하는 전문 개발자로 바꿔줍니다. /init 명령으로 자동 생성할 수도 있어요.

Q: Hooks는 어떻게 시작해야 하나요?

A: 간단한 것부터 시작하세요. 예를 들어 PostToolUse hook으로 자동 포맷팅을 추가하는 것부터 시작하면 좋습니다. 복잡한 Hook은 GitHub에서 예제를 찾아보고 참고하세요. (hesreallyhim/awesome-claude-code 레포 추천)

Q: 보안이 걱정됩니다. 내 코드가 안전한가요?

A: 각 세션은 격리된 VM에서 실행되고, Git 자격증명은 샌드박스 안에 들어가지 않습니다. 하지만 100% 완벽한 보안은 없으니, 민감한 API 키나 시크릿은 CLAUDE.md 파일에 넣지 마세요. 조직 정책도 꼭 확인하세요.

Q: 요금은 어떻게 되나요?

A: 웹 버전은 Pro($20/월) 또는 Max($100-200/월) 구독이 필요합니다. 클라우드 세션은 다른 모든 Claude Code 사용량과 rate limit을 공유하므로, 병렬로 여러 작업을 돌리면 그만큼 빨리 소진됩니다. /cost 명령으로 현재 세션의 비용을 확인할 수 있습니다.

Q: GitHub 외에 다른 플랫폼도 지원하나요?

A: 현재는 GitHub만 지원합니다. GitLab이나 Bitbucket 등은 아직 지원하지 않아요. 프로젝트를 GitHub로 마이그레이션해야 전체 기능을 사용할 수 있습니다.

Q: Codex CLI와 비교하면 어떤가요?

A: 개발자마다 평가가 다릅니다. Codex가 복잡한 작업에 강하다는 의견도 있고, Claude가 맥락 이해와 속도 면에서 낫다는 의견도 있어요. 작업 성격에 따라 다르니 둘 다 써보고 결정하는 게 좋습니다. 무료 체험 기간을 활용해보세요.

Q: 텔레포트 기능은 어떻게 사용하나요?

A: 웹 인터페이스의 "Teleport to CLI" 버튼을 클릭하면 세션 ID가 표시됩니다. 로컬 터미널에서 `claude --session-id [ID]` 명령으로 세션을 가져올 수 있습니다. 채팅 기록과 수정된 파일이 모두 복사됩니다.

참고 자료

• Anthropic 공식 발표문 - Claude Code 웹 버전 공식 소개
• Claude Code 공식 문서 - 상세한 기술 문서 및 사용 가이드
• Claude Code Hooks 가이드 - Hooks 시작하기 및 예제
• Claude Code Best Practices - Anthropic 공식 베스트 프랙티스
• Claude Code Sandboxing 엔지니어링 블로그 - 보안 아키텍처 심층 분석
• sandbox-runtime GitHub 저장소 - 오픈소스 샌드박스 구현체

 

Claude Code 웹 버전은 분명 AI 코딩의 새로운 장을 열었다. 터미널에서 브라우저로, 로컬에서 클라우드로, 그리고 이제 모바일까지. 개발 환경의 경계가 점점 허물어지고 있다. 완벽하진 않지만, 방향은 분명히 맞다. 앞으로 몇 달 안에 어떻게 진화할지 지켜보는 것도 흥미로울 것 같다.

개인적으론 "이동 중에도 코딩할 수 있다"는 게 가장 매력적이다. 출퇴근 시간에 버그 수정을 시켜놓고, 회사 도착해서 PR 리뷰만 하면 되는 거 아닌가? 물론 아직 완벽하진 않지만, AI 코딩의 미래가 이런 모습일 거라는 힌트는 충분히 보여줬다고 생각한다.

이 글을 읽는 여러분도 직접 한번 써보시길 권한다. claude.ai/code로 가서 첫 저장소를 연결해보자. CLAUDE.md도 작성해보고, Hooks도 설정해보고, 텔레포트도 써보자. 이론만으로는 느낄 수 없는 것들이 많다. 그리고 여러분만의 워크플로우를 만들어보자. AI 코딩의 시대는 이미 시작되었다.