웹에서 Claude Code 사용

읽는 시간: 5분 | 난이도: 초급자

claude.ai 웹 인터페이스에서 Claude Code 기능을 활용하는 방법을 알아봅니다.

개요

Claude Code는 터미널 CLI 도구 외에도 웹 브라우저에서 직접 사용할 수 있습니다. 별도 설치 없이 claude.ai에서 코딩 관련 작업을 수행할 수 있습니다.

시작하기

사전 요구사항

• claude.ai 계정 (Pro 또는 Max 플랜 권장)
• 최신 웹 브라우저 (Chrome, Firefox, Safari, Edge)

접속 방법

1. claude.ai에 접속
2. 로그인 후 새 대화 시작
3. 코딩 관련 질문이나 요청 입력

웹 인터페이스 주요 기능

코드 작성 및 편집

웹에서도 코드 작성, 리뷰, 디버깅이 가능합니다:

코드를 붙여넣고 분석을 요청할 수 있습니다:

> 이 Python 함수의 시간 복잡도를 분석하고
  최적화 방안을 제시해줘

파일 업로드

파일을 드래그&드롭으로 업로드하여 분석:

• 소스 코드 파일 (.py, .js, .ts 등)
• 설정 파일 (.json, .yaml 등)
• 로그 파일
• 이미지 (다이어그램, 스크린샷)

아티팩트 기능

Claude는 코드를 아티팩트로 생성하여 즉시 실행하거나 다운로드할 수 있습니다:

• React 컴포넌트 미리보기
• HTML/CSS 인터랙티브 데모
• SVG 다이어그램
• 데이터 시각화

CLI와 웹 인터페이스 비교

웹에서 효과적으로 사용하기

코드 리뷰 및 분석

파일 전체를 복사하여 붙여넣고:

> 이 코드를 리뷰해주세요.
  특히 보안 취약점과 성능 문제에 집중해주세요.

알고리즘 설계 및 학습

> 이진 탐색 트리의 삽입, 삭제, 탐색을
  JavaScript로 구현하고
  각 연산의 시간 복잡도를 설명해줘

빠른 프로토타입

> 투두 리스트 앱을 React로 만들어줘.
  로컬 스토리지를 사용하고
  드래그&드롭으로 순서를 변경할 수 있게 해줘.

문서 작성

> 이 API 함수들에 대한
  Markdown 형식의 개발자 문서를 작성해줘

Claude.ai의 프로젝트 기능

Pro/Max 플랜에서는 프로젝트 기능을 활용할 수 있습니다:

• 대화 간 컨텍스트 유지
• 프로젝트별 커스텀 지침 설정
• 파일 및 문서 저장
• 팀 공유 (Teams 플랜)

프로젝트 설정 예시

프로젝트 지침:
당신은 TypeScript와 React 전문가입니다.
우리 팀의 코딩 스타일은 다음을 따릅니다:
- ESLint Airbnb 설정
- 함수형 컴포넌트만 사용
- Props 인터페이스 항상 명시
- 모든 함수에 JSDoc 주석

모바일에서 사용

claude.ai는 모바일 브라우저에서도 완전히 작동합니다:

• iOS Safari, Android Chrome 지원
• 빠른 코드 질문 및 아이디어 검토
• 이미지 (스크린샷) 분석
• 학습 목적의 코드 예제

제한사항

웹 인터페이스의 주요 제한:

• 파일 시스템 접근 불가: 로컬 파일을 직접 수정할 수 없음
• 터미널 실행 불가: 코드를 직접 실행할 수 없음
• 컨텍스트 길이: 대화 길이에 따른 컨텍스트 제한
• 대규모 코드베이스: 전체 프로젝트 분석 어려움

이런 제한이 문제라면 CLI 설치를 권장합니다.

다음 단계

• Claude Code CLI 설치 - 더 강력한 기능 사용
• VS Code 통합 - IDE에서 바로 사용
• Chrome 확장 - 브라우저에서 AI 코딩 지원