Anthropic Claude Code 웹에서 안전하게 실행하는 방법, 로컬 설치 NO!

Claude Code로 웹 개발 자동화하기: 브라우저만 있으면 끝나는 AI 코딩 환경
Claude Code on the Web: 개발·보안·운영 전 과정을 체계적으로 구축하는 법

Quickstart → Common Workflows → Claude Code on the Web 순서로, 로컬/CLI 기본기부터 웹(클라우드) 실행까지 과정을 보안·운영 관점으로 정리했습니다.

기본기 다지기: 설치 → 로그인 → 첫 세션

설치 (OS별)

Homebrew(macOS/Linux)
```
brew install --cask claude-code
```

범용 설치 스크립트(macOS/Linux/WSL)

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell
```
irm https://claude.ai/install.ps1 | iex
```

Windows CMD

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
``` :contentReference[oaicite:0]{index=0}

로그인 (첫 실행 시 인증)
```
claude          # 인터랙티브 모드 시작, 최초 1회 로그인 요구
# 또는
/login          # 세션 내에서 재로그인
```
- Claude.ai 계정(구독 추천) 또는 Claude Console 계정(선불 크레딧) 사용 가능. 최초 Console 인증 시 “Claude Code” 워크스페이스 자동 생성.
첫 세션 시작
```
cd /path/to/your/project
claude
```
- /help로 명령어 안내, /resume로 이전 대화 복구.

첫 질문/변경 예시

> what does this project do?
> where is the main entry point?
> add a hello world function to the main file

편집은 승인 기반(개별 승인 또는 “Accept all” 세션 모드).

Git과 함께 사용

> what files have I changed?
> commit my changes with a descriptive message
> help me resolve merge conflicts
``` :contentReference[oaicite:4]{index=4}

자주 쓰는 CLI 스니펫

claude                    # 인터랙티브
claude "fix the build"    # 1회성 태스크
claude -p "explain func"  # 쿼리 후 종료
claude -c                 # 최근 대화 이어가기
/clear                    # 이력 초기화
``` :contentReference[oaicite:5]{index=5}

Common Workflows: 현업에 바로 쓰는 작업 패턴

새 코드베이스 빠르게 이해

cd /path/to/project
claude

> give me an overview of this codebase
> explain the main architecture patterns used here
``` :contentReference[oaicite:6]{index=6}

Plan Mode(읽기 전용 분석)로 안전 탐색
- 목적: 다중 파일 변경 계획, 대규모 리팩토링 사전 계획 수립
- 실행
```
claude --permission-mode plan
# 또는, 세션 중 Shift+Tab → (Auto-Accept) → 다시 Shift+Tab → Plan Mode
```
```
claude --permission-mode plan -p "Analyze the auth system and suggest improvements"
```
  - 기본 모드 고정: .claude/settings.json
  - { "permissions": { "defaultMode": "plan" } } ``` :contentReference[oaicite:7]{index=7}

테스트 작업 흐름

> find functions in NotificationsService.swift that are not covered by tests
> add tests for the notification service
> run the new tests and fix any failures
``` :contentReference[oaicite:8]{index=8}

서브에이전트 활용

목록 보기
```
> /agents
```

예

> review my recent code changes for security issues
> run all tests and fix any failures
``` :contentReference[oaicite:9]{index=9}

파일/디렉터리/리소스 참조(@)

> Explain the logic in @src/utils/auth.js
> What's the structure of @src/components?
> Show me the data from @github:repos/owner/repo/issues

@ 참조 시 해당 경로의 CLAUDE.md를 자동 컨텍스트에 포함.

확장 사고(Extended thinking)
- 토글: Tab 또는 프롬프트 “think / think hard”, 영구 활성: MAX_THINKING_TOKENS 설정.

유닉스 유틸리티처럼 쓰기(파이프 & 출력 포맷)

파이프 인/아웃

cat build-error.txt | claude -p 'concisely explain the root cause' > output.txt

--output-format으로 구조화 출력: text(기본), json(대화/메타), stream-json(실시간)

cat code.py | claude -p 'analyze for bugs' --output-format json > analysis.json
``` :contentReference[oaicite:12]{index=12}

커스텀 슬래시 명령

프로젝트 공통

mkdir -p .claude/commands
echo "Analyze performance and suggest 3 optimizations:" > .claude/commands/optimize.md
# 사용: > /optimize

개인 전역

mkdir -p ~/.claude/commands
echo "Review this code for security vulnerabilities, focusing on:" > ~/.claude/commands/security-review.md
# 사용: > /security-review
``` :contentReference[oaicite:13]{index=13}

300x250

Claude Code on the Web: 웹(클라우드)에서 안전하게 실행

1. 무엇을 제공하나?

보안된 Anthropic 관리 VM에서 비동기 태스크 실행: 저장소 클론 → 환경 준비 → 네트워크 정책 적용 → 분석/수정/테스트 → 브랜치 푸시/PR 준비. 리서치 프리뷰 상태.

2. 웹 ↔ 터미널 전환

Web → CLI
1. “Open in CLI” 클릭 → 2) 터미널에 붙여넣기 실행 → 3) 로컬 변경분은 자동 stash → 4) 로컬에서 후속 작업.

3. 클라우드 환경 & 도구 확인

기본 이미지: 주요 언어/패키지 매니저/테스트 프레임워크/린터 내장.
사전 설치 도구 확인: > check-tools
언어 세팅(예): Python(3.x, pip/poetry), Node(LTS, npm/yarn/pnpm), Java(OpenJDK, Maven/Gradle), Go, Rust, C++(GCC/Clang) 등.

4. 환경 구성 & 의존성 자동 설치(Hooks)

SessionStart 훅으로 자동 설치

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

# scripts/install_pkgs.sh
#!/bin/bash
npm install
pip install -r requirements.txt
chmod +x scripts/install_pkgs.sh

원격 전용 실행 분기

if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then exit 0; fi

ENV 영속화: 훅에서 $CLAUDE_ENV_FILE에 쓰기.

5. 네트워크 접근 & 보안

GitHub 프록시: 샌드박스 내부 git은 스코프드 자격증명 사용, 프록시가 실제 토큰으로 변환·제한. 푸시는 작업 브랜치로만 허용. 민감 자격증명은 VM 내부에 저장되지 않음.
보안 프록시: 모든 아웃바운드 트래픽은 HTTP/HTTPS 프록시를 통과(악성요청 방어, 레이트제한, 컨텐츠 필터링).
액세스 레벨: 기본은 Limited(허용 도메인만), 필요 시 오프라인(차단) 또는 커스텀.
기본 허용 도메인(발췌): Anthropic 서비스, GitHub/GitLab/Bitbucket, 주요 패키지 레지스트리·클라우드·CDN 카테고리 등. 조직 정책에 맞게 최소화 권장.
보안 모범 사례: 최소 권한, 주기적 감사, HTTPS 우선. 네트워크 Off여도 Anthropic API와의 통신은 허용(데이터 반출 가능성에 유의). 자격증명은 항상 프록시 보호.

6. 과금/제한

레이트 리밋 공유: 계정 내 Claude/Claude Code 전체와 한도 공유(병렬 태스크 ↑ → 소모 ↑).
제약: GitHub만 클라우드 세션 지원(현재). Web→Local 전환 시 동일 계정 인증 필요.

조직 표준 템플릿 & 운영 가이드

1. .claude/settings.json(권장 베이스)

{
  "permissions": { "defaultMode": "plan" },       // 기본 Plan Mode
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          { "type": "command", "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh" }
        ]
      }
    ]
  }
}

목적: 읽기 전용 분석 → 계획 수립을 먼저 수행, 의존성 자동 설치.

2. CLAUDE.md / AGENTS.md 운영

프로젝트 루트에 빌드/테스트/런북/권한 규칙 정리. AGENTS.md가 있으면 CLAUDE.md에서 @AGENTS.md로 포함해 단일 소스 유지.

3. 웹 환경 프리셋

Environment: “limited” + 허용 도메인 최소화(사내 미러/프록시만 추가)
민감 자격증명은 VM 내부 주입 금지, 조직 비밀관리(예: GitHub Actions Secrets, Vault)로만 전달.

보안 체크리스트

권한 최소화: Claude GitHub App은 작업 레포에만 설치. 브랜치 보호·필수 리뷰 유지.
명령 승인 모드: 기본 Plan Mode → Normal 순으로 진행. 대량 변경 시 Auto-Accept는 지양.
네트워크 정책: “Limited” 기본, 도메인 Allowlist 월 1회 점검. 필요 시 “오프라인”으로 실행.
비밀/키: 샌드박스 내 저장 금지. 프록시·시크릿 매니저로만 사용.
감사/격리: 세션은 격리 VM, 웹 실행 로그 정기 점검. 프롬프트 인젝션 가능성에 주의(외부 텍스트를 곧바로 명령으로 실행 금지).
산출물 검토: 핵심 파일 변경은 테스트 통과 + 코드리뷰 2인 이상 후 병합.

실전 예시 모음

1. 버그 수정(로컬/CLI)

claude
> there's a bug where users can submit empty forms - fix it
> run tests and show failures
> commit my changes with a descriptive message

2. 대규모 리팩토링(웹/Plan Mode)

(Web) Environment: limited
Open task:
> I need to refactor our authentication to OAuth2. Create a detailed migration plan.
# 검토 후
> proceed step-by-step and stop before any destructive operation

필요한 도메인만 allowlist 추가(패키지 레지스트리 등), 완료 시 브랜치 푸시/PR 생성.

3. 파이프 기반 분석 + JSON 출력(자동화 스크립트)

cat logs/app.log | claude -p "extract error stats as JSON with counts" --output-format json > errors.json

4. 보안 점검 슬래시 명령(프로젝트 공통)

mkdir -p .claude/commands
cat > .claude/commands/security-review.md << 'EOF'
Review this code for security vulnerabilities. Focus on:
1) Input validation 2) AuthN/Z 3) Secrets exposure 4) SSRF/RCE risks
EOF
# 사용: > /security-review

트러블슈팅(자주 묻는 질문)

패키지 설치 차단: Limited 모드에서 필요한 레지스트리/미러 도메인을 allowlist에 최소 범위로 추가.
자격증명 요구: Git 작업은 프록시 + 스코프드 크리덴셜로 수행(로컬 키 주입 불필요).
웹→CLI 이전 실패: 동일 계정 인증 상태 확인. GitHub 저장소만 지원됨.

조직 도입 가속화

레포에 .claude/settings.json + CLAUDE.md를 표준화 템플릿으로 배포
Plan Mode 기본화로 안전한 사전 분석 → 승인 후 편집
웹 실행은 Limited/Offline 정책을 기본값으로, 도메인 allowlist를 보안팀 승인 프로세스로 운영
커스텀 슬래시 명령으로 보안 리뷰 / 성능 점검 등 반복 업무 자동화

왜 웹에서 돌리나?

에이전트 실행 모델
- 웹에서 작업을 열면 Anthropic이 관리하는 격리된 VM이 저장소를 클론 → 훅 실행 → 네트워크 정책 적용 → 코드 작성·테스트·검증 → 브랜치 푸시까지 수행합니다. 결과는 PR로 이어집니다.
지원 계정/좌석
- Pro/Max, Team/Enterprise 프리미엄 좌석, 또는 Claude Console 계정으로 이용 가능.
CLI와의 관계
- 터미널(로컬)에서 시작한 개발 흐름을 웹으로 옮기거나, 웹 세션을 Open in CLI로 로컬에 이어서 진행할 수 있습니다.

웹에서 돌리는 표준 운영 흐름 (End-to-End)

접속 & 저장소 연결
- 웹 UI에서 저장소를 지정하면 기본 브랜치로 클론됩니다. 필요하면 프롬프트에 체크아웃할 브랜치 명을 명시하세요.

환경 준비(훅 + 의존성 설치)

세션 시작 시 실행할 스크립트를 Hooks로 등록해 재현성을 확보합니다(예: 패키지 설치·린터·테스트 데이터 준비).
예시: .claude/settings.json

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

예시: scripts/install_pkgs.sh

#!/usr/bin/env bash
set -e
if [ "$CLAUDE_CODE_REMOTE" = "true" ]; then
  npm ci || true
  pip install -r requirements.txt || true
fi

네트워크 정책
- 기본값은 제한(Limited)이며, 필요에 따라 오프라인 또는 전체 허용으로 조정할 수 있습니다. 조직은 최소 권한 원칙으로 allowlist를 관리하세요.
작업 실행 & 결과물
- 에이전트가 코드 작성 → 테스트 → 자체 검증까지 수행하고, 완료되면 작업 브랜치로 푸시합니다. 이후 웹에서 바로 PR 생성이 가능합니다.
웹 ↔ CLI 전환
- Open in CLI 버튼으로 동일 세션을 로컬 터미널에서 이어가며, 개발자 PC의 도구 체인을 그대로 활용할 수 있습니다.

워크플로우 패턴 (Common Workflows + 실전 프롬프트)

코드베이스 빠른 이해
```
> give me an overview of this codebase
> explain the main architecture patterns used here
```
- 신규 합류자 온보딩이나 레거시 분석에 효과적.
Plan Mode로 안전 분석 → 변경 계획 확정
```
claude --permission-mode plan -p "Analyze the auth system and suggest improvements"
```
- 대규모 리팩토링 전 읽기 전용 계획으로 위험도를 낮춥니다.
테스트 보강 & 실패 자동 수정
```
> find functions not covered by tests in @src/service/*
> add tests and run them; fix any failures
```
- 테스트 우선 접근으로 리스크를 최소화합니다.
서브에이전트 활용(보안·리뷰·디버그)
```
> /agents
> review my recent code changes for security issues
> run all tests and fix any failures
```
- 반복 작업 자동화와 품질 일관성에 유리합니다.
파이프·구조화 출력(자동화 스크립트 연계)
```
cat logs/error.log | claude -p "summarize error causes as JSON" --output-format json > errors.json
```
- CLI 도구처럼 쓰며, CI/분석 파이프라인에 연결하기 좋습니다.

실무 체크리스트

권한 최소화(Repo·브랜치)
- Git 접근은 프록시 기반 스코프 제한으로 처리되고, 푸시는 작업 브랜치 중심입니다. 민감 키는 VM에 저장하지 않습니다.
네트워크 정책 기본값 = Limited
- 레지스트리·CI/CD·사내 미러 등 필요한 도메인만 allowlist. 오프라인 모드도 선택 가능(모델 통신 예외 고려).
훅 기반 재현성 & 안전성
- 설치·빌드·테스트를 훅으로 강제하여 “프롬프트 의존”을 줄입니다. 보안 점검 훅(정적 분석/시크릿 스캔)도 권장.
감사·리뷰 절차
- PR 보호 규칙(필수 리뷰, 필수 체크)와 함께 웹 실행 기록을 주기 점검합니다. 웹/CLI 어디서 시작해도 PR로 수렴하는 구조를 표준화하세요.

표준 템플릿

.claude/settings.json — Plan 기본 + 훅 자동화

{
  "permissions": { "defaultMode": "plan" },
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          { "type": "command", "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh" },
          { "type": "command", "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/prepare_test_data.sh" }
        ]
      }
    ]
  }
}

목적: 읽기 전용 계획으로 시작 → 승인 후 변경 적용, 환경 준비 자동화.

CLAUDE.md — 프로젝트 컨텍스트(요약 예시)

# CLAUDE.md
## Build & Test
- Node LTS, Python 3.11
- `npm run build`, `pytest -q`

## Policies
- Only edit under `/app`, `/infra` (others require manual approval)
- Use Plan Mode for multi-file refactoring

Claude는 여기 정의된 컨텍스트를 존중하여 작업합니다.

보안 점검용 슬래시 명령

mkdir -p .claude/commands
cat > .claude/commands/security-review.md << 'EOF'
Review this code for security vulnerabilities, focusing on:
1) Input validation 2) AuthN/Z 3) Secrets exposure 4) SSRF/RCE risks
EOF

팀 공통 보안 리뷰를 자동화합니다.

웹 운영 플레이북 (문제 해결 & 성숙도 향상)

패키지 설치가 막힐 때
- Limited 모드에서 필요한 레지스트리/미러 도메인을 최소 범위로 allowlist.
웹→CLI 전환이 꼬일 때
- 동일 계정 인증 상태를 확인하고, 로컬 저장소와 원격 브랜치 동기화 규칙을 문서화하세요.
GitHub Actions와 연계
- 이슈/PR에서 @claude 멘션으로 작업 트리거, v1.0 업그레이드 시 워크플로 파일 업데이트 필요.
Windows 개발환경
- WSL(권장) 또는 Git Bash 경로 지정으로 안정적 CLI 사용. 점검은 claude doctor.

pages.kr 날으는물고기 <º)))><

Anthropic Claude Code 웹에서 안전하게 실행하는 방법, 로컬 설치 NO!

Anthropic Claude Code 웹에서 안전하게 실행하는 방법, 로컬 설치 NO!

기본기 다지기: 설치 → 로그인 → 첫 세션

Common Workflows: 현업에 바로 쓰는 작업 패턴

Claude Code on the Web: 웹(클라우드)에서 안전하게 실행

1. 무엇을 제공하나?

2. 웹 ↔ 터미널 전환

3. 클라우드 환경 & 도구 확인

4. 환경 구성 & 의존성 자동 설치(Hooks)

5. 네트워크 접근 & 보안

6. 과금/제한

조직 표준 템플릿 & 운영 가이드

1. .claude/settings.json(권장 베이스)

2. CLAUDE.md / AGENTS.md 운영

3. 웹 환경 프리셋

보안 체크리스트

실전 예시 모음

1. 버그 수정(로컬/CLI)

2. 대규모 리팩토링(웹/Plan Mode)

3. 파이프 기반 분석 + JSON 출력(자동화 스크립트)

4. 보안 점검 슬래시 명령(프로젝트 공통)

트러블슈팅(자주 묻는 질문)

조직 도입 가속화

왜 웹에서 돌리나?

웹에서 돌리는 표준 운영 흐름 (End-to-End)

워크플로우 패턴 (Common Workflows + 실전 프롬프트)

실무 체크리스트

표준 템플릿

웹 운영 플레이북 (문제 해결 & 성숙도 향상)

추천 도입 순서

댓글

티스토리툴바

Anthropic Claude Code 웹에서 안전하게 실행하는 방법, 로컬 설치 NO!

Anthropic Claude Code 웹에서 안전하게 실행하는 방법, 로컬 설치 NO!

기본기 다지기: 설치 → 로그인 → 첫 세션

Common Workflows: 현업에 바로 쓰는 작업 패턴

Claude Code on the Web: 웹(클라우드)에서 안전하게 실행

1. 무엇을 제공하나?

2. 웹 ↔ 터미널 전환

3. 클라우드 환경 & 도구 확인

4. 환경 구성 & 의존성 자동 설치(Hooks)

5. 네트워크 접근 & 보안

6. 과금/제한

조직 표준 템플릿 & 운영 가이드

1. .claude/settings.json(권장 베이스)

2. CLAUDE.md / AGENTS.md 운영

3. 웹 환경 프리셋

보안 체크리스트

실전 예시 모음

1. 버그 수정(로컬/CLI)

2. 대규모 리팩토링(웹/Plan Mode)

3. 파이프 기반 분석 + JSON 출력(자동화 스크립트)

4. 보안 점검 슬래시 명령(프로젝트 공통)

트러블슈팅(자주 묻는 질문)

조직 도입 가속화

왜 웹에서 돌리나?

웹에서 돌리는 표준 운영 흐름 (End-to-End)

워크플로우 패턴 (Common Workflows + 실전 프롬프트)

실무 체크리스트

표준 템플릿

웹 운영 플레이북 (문제 해결 & 성숙도 향상)

추천 도입 순서

관련글

댓글

티스토리툴바