웹에서 Claude Code 사용
읽는 시간: 5분 | 난이도: 초급자
claude.ai 웹 인터페이스에서 Claude Code 기능을 활용하는 방법을 알아봅니다.
개요
Claude Code는 터미널 CLI 도구 외에도 웹 브라우저에서 직접 사용할 수 있습니다. 별도 설치 없이 claude.ai에서 코딩 관련 작업을 수행할 수 있습니다.
시작하기
사전 요구사항
- claude.ai 계정 (Pro 또는 Max 플랜 권장)
- 최신 웹 브라우저 (Chrome, Firefox, Safari, Edge)
접속 방법
- claude.ai에 접속
- 로그인 후 새 대화 시작
- 코딩 관련 질문이나 요청 입력
웹 인터페이스 주요 기능
코드 작성 및 편집
웹에서도 코드 작성, 리뷰, 디버깅이 가능합니다:
코드를 붙여넣고 분석을 요청할 수 있습니다:
> 이 Python 함수의 시간 복잡도를 분석하고
최적화 방안을 제시해줘
파일 업로드
파일을 드래그&드롭으로 업로드하여 분석:
- 소스 코드 파일 (.py, .js, .ts 등)
- 설정 파일 (.json, .yaml 등)
- 로그 파일
- 이미지 (다이어그램, 스크린샷)
아티팩트 기능
Claude는 코드를 아티팩트로 생성하여 즉시 실행하거나 다운로드할 수 있습니다:
- React 컴포넌트 미리보기
- HTML/CSS 인터랙티브 데모
- SVG 다이어그램
- 데이터 시각화
CLI와 웹 인터페이스 비교
| 기능 | CLI (claude) |
웹 (claude.ai) |
|---|---|---|
| 파일 시스템 접근 | 직접 접근 | 업로드만 가능 |
| 터미널 명령 실행 | 가능 | 불가 |
| Git 통합 | 완전 지원 | 제한적 |
| 설치 필요 | 필요 | 불필요 |
| 멀티파일 편집 | 가능 | 제한적 |
| 코드 아티팩트 | 즉시 미리보기 | |
| 이미지 분석 | 제한적 | 완전 지원 |
| 모바일 사용 | 가능 |
웹에서 효과적으로 사용하기
코드 리뷰 및 분석
파일 전체를 복사하여 붙여넣고:
> 이 코드를 리뷰해주세요.
특히 보안 취약점과 성능 문제에 집중해주세요.
알고리즘 설계 및 학습
> 이진 탐색 트리의 삽입, 삭제, 탐색을
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 코딩 지원