설치하기
준비물
시작하기 전에 두 가지가 필요합니다:
- Claude Pro/Max/Team 구독 -- Claude Code는 무료 플랜에서는 사용할 수 없습니다.
- Node.js -- JavaScript 실행 환경입니다. 설치 방법을 모르겠으면 코워크에게 "내 컴퓨터에 Node.js 설치해줘"라고 하면 알아서 설치해줍니다. 또는 [nodejs.org](https://nodejs.org)에서 LTS 버전을 다운받으세요.
방법 1: 네이티브 설치 (추천)
가장 간단한 방법입니다. 자동 업데이트도 지원합니다.
macOS / Linux:터미널을 열고 아래 명령어를 복사해서 붙여넣으세요:
curl -fsSL https://claude.ai/install.sh | bashirm https://claude.ai/install.ps1 | iex네이티브 설치의 장점: 별도 설정 없이 바로 사용 가능하고, 자동 업데이트가 지원됩니다.
방법 2: Homebrew (macOS)
macOS에서 Homebrew를 사용하고 있다면:
brew install --cask claude-code업데이트는 수동으로 해야 합니다:
brew upgrade claude-code방법 3: npm
Node.js가 이미 설치되어 있다면:
npm install -g @anthropic-ai/claude-code설치 확인:
claude --version버전 번호가 출력되면 성공입니다.
첫 실행 & 인증
터미널에서 아무 폴더로 이동한 뒤 claude를 입력합니다:
cd my-project
claude첫 실행 시 브라우저가 열리며 로그인을 요청합니다. Claude 계정으로 로그인하면 인증 완료. 이후부터는 자동으로 인증됩니다.
첫 바이브 코딩 체험 (5분 실습)
설치가 끝났으면 바로 만들어봅시다. 할 일 목록 웹페이지를 5분 만에 만듭니다.
Step 1: 프로젝트 폴더 만들기
터미널을 열고 아래를 복사해서 붙여넣으세요:
mkdir egnis-my-tool && cd egnis-my-tool
mkdir은 폴더를 만드는 명령어,cd는 해당 폴더로 이동하는 명령어입니다.
Step 2: Claude Code 실행
claude잠시 기다리면 Claude Code 프롬프트가 나타납니다. 이제 대화할 수 있습니다.
Step 3: 만들어달라고 말하기
아래를 그대로 복사해서 Claude Code 프롬프트에 붙여넣으세요:
간단한 할 일 목록 웹페이지를 만들어줘.
기능:
- 할 일 추가 (입력창 + 추가 버튼)
- 완료 체크 (클릭하면 취소선 표시)
- 삭제 기능 (X 버튼)
- 다크 모드 기본 적용
HTML + CSS + JavaScript를 하나의 index.html 파일로 만들어줘.Claude가 index.html 파일을 생성합니다. 파일 생성/수정 허가를 묻는 팝업이 뜨면 허용(Y)을 누르세요.
Step 4: 실행해서 확인하기
Claude Code 프롬프트에 이렇게 입력하세요:
실행해줘또는 직접 브라우저에서 열 수도 있습니다:
open index.html브라우저에 다크 모드의 할 일 목록이 나타나면 성공입니다!
Step 5: 피드백으로 수정하기
마음에 안 드는 부분이 있으면 말로 수정합니다:
배경색을 이그니스 브랜드 컬러(#E87040)로 포인트를 넣어줘.
추가 버튼과 헤더 부분에 적용하고, 나머지는 다크 모드 유지해줘.새로고침하면 이그니스 주황색이 포인트로 들어간 화면을 확인할 수 있습니다. 코드를 한 줄도 직접 쓰지 않았습니다.
Step 6: Git 커밋으로 저장하기
커밋해줘Claude가 Git 초기화(필요 시)와 커밋을 알아서 해줍니다. 이렇게 하면 작업 내역이 안전하게 저장됩니다.
이게 바이브 코딩입니다. 코드를 모르는 분도 한국어 대화만으로 웹페이지를 만들었습니다.