# macOS (Homebrew)
brew install --cask visual-studio-code

# Windows — 공식 사이트에서 다운로드
# https://code.visualstudio.com/

# Linux (Ubuntu/Debian)
sudo apt update
sudo apt install code

# VS Code 내장 터미널에서 Claude Code 실행
claude

# 이제 왼쪽에는 코드, 아래에는 AI CLI가 보입니다
# AI가 수정하는 파일이 실시간으로 에디터에 반영됩니다

# Claude Code VS Code 확장 설치
code --install-extension anthropic.claude-code

# 또는 VS Code 마켓플레이스에서 "Claude Code" 검색

// 여러분이 이것만 타이핑하면:
function handleHand

// Cursor가 자동으로 제안합니다:
function handleHandLandmarks(results) {
  if (results.landmarks && results.landmarks.length > 0) {
    const hand = results.landmarks[0];
    const indexFinger = hand[8];  // 검지 끝
    const thumb = hand[4];        // 엄지 끝
    
    const distance = calculateDistance(indexFinger, thumb);
    sendOSC('/hand/pinch', distance);
  }
}

// 코드를 선택한 뒤 Cmd+L을 누르고 질문:
"이 MediaPipe 핸들러에서 왜 손이 화면 밖으로 
나갔을 때 에러가 나는 거야? 수정해줘"

// AI가 선택된 코드를 분석하고 수정안을 제안합니다

# Composer에 이렇게 요청합니다:
"MediaPipe 손 인식 모듈, OSC 전송 모듈, 
UI 컴포넌트를 각각 별도 파일로 만들어줘.
src/mediapipe.ts, src/osc.ts, src/ui.ts로."

# Composer가 3개 파일을 동시에 생성하고,
# 각 파일 간의 import 관계도 자동으로 설정합니다

# VS Code/Cursor에서:
# 코드를 직접 보고 수정하는 것이 중심

# Antigravity에서:
# "이 버튼을 빨간색으로 바꿔줘"
# "여기에 손 인식 카메라 화면을 추가해줘"
# → 시각적 프리뷰를 보면서 자연어로 수정

# 터미널에서 Claude Code 실행
claude

> "MediaPipe 손 인식 웹앱 프로젝트를 만들어줘.
> Next.js + TypeScript + Tailwind.
> src/components/HandTracker.tsx,
> src/lib/osc-bridge.ts,
> src/app/page.tsx를 만들어줘."

# Claude Code가 프로젝트 구조와 기본 코드를 생성

# VS Code에서 프로젝트 열기
code .

# 또는 Cursor에서 열기
cursor .

# AI 자동완성과 함께 세부 코드를 작성
# HandTracker 컴포넌트의 카메라 초기화 로직,
# OSC 메시지 포맷 등을 에디터에서 편집

# 에러 발생 시 VS Code 터미널에서:
claude

> "npm run dev 실행하면 이 에러가 나와:
> [에러 메시지 복사]
> 원인 분석하고 수정해줘"

# Claude Code가 여러 파일을 분석하고 수정

# Claude Code에서:
> "Playwright로 localhost:3000에 접속해서
> 카메라 화면이 보이는지, 
> MediaPipe 모델이 로드되는지 확인해줘"

# AI가 브라우저를 자동으로 열고 테스트