바이브코딩 가이드

터미널 기본 명령어

cd <경로>

폴더 이동

지정한 경로로 작업 폴더 변경. 예: cd Desktop/my-project

cd ..

이전 폴더로 이동

상위(뒤) 폴더로 이동. 예: cd ../..

npm install

패키지 설치

package.json 에 정의된 의존성 전체 설치.

npm run dev

개발 서버 실행

로컬에서 변경사항 실시간 확인.

git status

변경사항 확인

수정·추가·삭제된 파일 목록 표시.

git add / commit

변경사항 저장

변경사항을 스테이징 후 커밋으로 기록.

git push

원격 반영

커밋한 내용을 GitHub 등 원격 저장소로 전송.

입력 접두사

슬래시 커맨드

내장 커맨드·스킬·MCP. 입력 시 필터링 메뉴 자동 표시.

→ /clear, /compact, /btw

Bash 직접 실행

명령 실행 후 출력을 컨텍스트에 추가. Claude가 결과 즉시 참조.

→ ! npm test
→ ! git log --oneline -5

파일 경로 참조

파일 경로 자동완성. 특정 파일을 컨텍스트에 포함해서 질문.

→ @src/api/auth.ts 리뷰해줘

슬래시 커맨드

/btw

사이드 질문

툴 없이 현재 컨텍스트로 빠른 질문. 이미 아는 것 물을 때. 토큰 절약.

/compact

컨텍스트 압축

토큰이 차오를 때 요약 압축. 세션 이어가면서 비용 절감.

/clear

히스토리 초기화

대화 전체 삭제 후 새로 시작. 다른 태스크로 전환 시. 파일시스템 컨텍스트는 유지.

/resume

이전 세션 재개

이전 세션 목록 탐색 후 선택해서 재개. 어제 하던 작업 이어받을 때.

/ide

VS Code 연결

git diff 가 IDE diff 뷰어에서 열림. 코드 리뷰 훨씬 편함.

/terminal-setup

줄바꿈 키 설정

Enter 가 즉시 전송돼서 긴 프롬프트 작성이 불편할 때 실행. 이후 Shift+Enter 로 줄바꿈 가능. 1회만 실행하면 됨.

/cost

토큰 사용량

현재 세션 토큰 사용량 + autocompaction 예정 시점 확인.

/keybindings

단축키 커스터마이즈

~/.claude/keybindings.json 생성/편집. 커스텀 바인딩 추가 가능.

/help

전체 커맨드 목록

현재 환경 전체 커맨드 표시. 업데이트 후 주기적으로 확인 권장.

세션 제어

Esc

응답 중단

생성 중 즉시 멈춤. 세션·컨텍스트 유지. "go" 입력 시 이어서 진행.

Esc×2

Rewind 모드

이전 시점 복원. 코드+대화 / 대화만 / 코드만 / 요약 선택.

Shift+Tab

Plan ↔ Auto 전환

Plan: 실행 전 승인 대기. 대규모 변경 전 체크 용도.

Ctrl+C

입력 / 실행 취소

입력 취소 또는 실행 중단. 세션·컨텍스트 유지.

Ctrl+B

백그라운드 전환

Bash 명령을 백그라운드로. 빌드·테스트 띄워두고 계속 작업.

Ctrl+D

세션 종료

정상 종료. 강제 닫기 대신 이걸 써야 상태 저장됨.

Ctrl+`

터미널 토글

VS Code 등 IDE에서 통합 터미널 열기/닫기.

입력 & 히스토리

\+Enter

멀티라인 (범용)

모든 터미널에서 작동하는 줄바꿈.

Shift+Enter

멀티라인

안 되면 /terminal-setup 후 터미널 재시작.

Ctrl+R

히스토리 검색

키워드로 이전 입력 검색. 긴 프롬프트 재활용 시 필수.

↑/↓

히스토리 탐색

이전/다음 입력 이동.

Ctrl+G

외부 에디터 열기

프롬프트를 VS Code 등에서 편집.

편집 & 모델

Ctrl+U

커서 앞 전체 삭제

줄 시작까지 삭제. 프롬프트 다시 쓸 때.

Ctrl+K

커서 뒤 전체 삭제

줄 끝까지 삭제. Ctrl+Y 로 복원 가능.

Alt+P

모델 전환

프롬프트 유지한 채 모델 변경.

Alt+T

Extended Thinking

심층 추론 on/off. 복잡한 분석 전에 켜두기.

Ctrl+O

Transcript 뷰어

툴 호출 전체 로그 열람.

용어 설명

로컬

서버·클라우드가 아니라 지금 보고 있는 본인 컴퓨터(PC) 환경을 뜻함. "로컬에서 확인해보세요" = 내 컴퓨터에서 직접 열어서 확인.

컨텍스트

Claude가 현재 대화에서 기억하고 있는 내용 전체. 대화가 길어질수록 쌓이고, 한계에 도달하면 초기 내용을 잊음.

토큰

Claude가 읽고 쓰는 텍스트의 단위. 대화가 길수록 토큰이 쌓여 비용이 올라가고 처리 속도가 느려짐.

세션

Claude Code 를 켠 시점부터 끌 때까지의 작업 단위. 세션을 닫으면 대화 내용은 사라지지만 /resume 으로 불러올 수 있음.

슬래시 커맨드

/ 로 시작하는 명령어. 자연어 프롬프트가 아니라 Claude Code 자체를 제어하는 특수 명령.

Bash

터미널(검은 화면)에서 쓰는 명령어. ! 접두사를 붙이면 Claude Code 안에서 바로 실행하고 결과를 Claude 가 참조함.

ls / dir

현재 폴더 안의 파일·폴더 목록을 보여주는 명령어. Mac·Linux는 ls, Windows는 dir (또는 ls도 동작).

Node.js

브라우저 밖(터미널)에서 JavaScript 코드를 실행할 수 있게 해주는 프로그램. npm을 비롯한 대부분의 웹 개발 도구가 이 위에서 동작함.

npm

Node.js용 패키지(라이브러리) 관리 도구. 코드에 필요한 외부 기능을 설치·관리할 때 사용 (npm install 등).

package.json

프로젝트에 어떤 패키지가 필요한지, npm run dev 같은 실행 명령어는 무엇인지 정의해둔 설정 파일.

.env

API 키, DB 주소 같은 비밀 값을 코드 밖에 따로 저장해두는 파일. 반드시 .gitignore 에 넣어서 git·GitHub에 절대 올라가지 않게 해야 함.

환경변수

API 키처럼 코드에 직접 적으면 안 되는 값을 따로 저장해두는 변수. .env 파일이나 Vercel 대시보드(Settings → Environment Variables)에서 관리함.

git diff

코드가 얼마나 바뀌었는지 변경 전·후를 비교해서 보여주는 명령. /ide 연결 시 VS Code 에서 시각적으로 확인 가능.

git status

지금 어떤 파일이 바뀌었고, 뭐가 커밋될 준비가 됐는지 보여주는 명령어. 커밋·push 전에 확인하는 습관이 중요함.

커밋 (commit)

지금까지 변경한 내용을 하나의 저장 지점으로 기록하는 것. git add 로 담고 git commit 으로 저장함. 로컬에만 남고, push 해야 GitHub에 올라감.

저장소 (Repository)

코드와 변경 이력이 저장되는 공간. GitHub에 만들면 온라인에서 버전 관리·공유가 가능해짐.

Private / Public

저장소·프로젝트를 나만 볼 수 있게(Private) 할지, 누구나 볼 수 있게(Public) 할지 정하는 설정. 특별한 이유 없으면 Private 추천.

API 키

Supabase, Vercel 같은 외부 서비스에 접속할 때 쓰는 비밀번호 같은 값. 노출되면 남이 내 서비스를 마음대로 쓸 수 있어서 조심해야 함.

배포 (Deploy)

만든 코드를 실제 인터넷에서 볼 수 있게 서버에 올리는 것. Vercel은 GitHub에 push만 하면 자동으로 배포해줌.

터미널

글자로 명령어를 입력해서 컴퓨터를 조작하는 화면. Claude Code도 이 터미널 안에서 실행함.

IDE

코드 작성·실행·디버깅을 한 화면에서 할 수 있게 해주는 프로그램. VS Code가 대표적인 IDE.

MCP

Claude Code가 Vercel, Supabase 같은 외부 서비스에 직접 접속해서 대신 작업할 수 있게 해주는 연결 방식.

Plan 모드

Claude 가 실행하기 전에 "이렇게 할게요" 라고 계획을 먼저 보여주고 승인을 기다리는 모드. 실수 방지용.

Rewind

Claude 가 작업한 내용을 이전 시점으로 되돌리는 기능. 코드·대화 중 원하는 것만 골라서 복원 가능.

Extended Thinking

Claude 가 답하기 전에 더 오래, 더 깊이 생각하는 모드. 복잡한 문제에서 정확도가 높아지지만 응답이 느려짐.

Transcript

Claude 가 이번 세션에서 어떤 파일을 읽고, 어떤 명령을 실행했는지 전부 기록된 로그.

보안 체크리스트

GitHub 저장소는 항상 Private나만 볼 수 있게 하는 설정. 특별한 이유 없으면 이걸로 하는 게 안전해요.로 만들기

Public누구나 볼 수 있게 공개하는 설정. 코드에 비밀 값이 없을 때만 써요.으로 만들면 전 세계 누구나 코드를 볼 수 있어요. 실수로 API 키나 비밀번호가 코드에 남아있으면 그대로 다 유출돼요.

Vercel 프로젝트도 비공개로 관리하기

팀/회사용이 아니면 굳이 다른 사람 초대하지 말고, 환경변수API 키처럼 코드에 직접 적으면 안 되는 값을 따로 저장해두는 변수.는 Vercel 대시보드(Settings → Environment Variables)에만 등록해요. 코드 안에 직접 써넣으면 안 돼요.

.env 파일은 무조건 .gitignore에 넣기

.env는 API 키외부 서비스에 접속할 때 쓰는 비밀번호 같은 값. 노출되면 남이 내 서비스를 마음대로 쓸 수 있어요., DB 주소 같은 비밀 값이 들어있는 파일이에요. .gitignore에 안 넣으면 git push할 때 그대로 GitHub에 올라가버려요.

NEXT_PUBLIC_ 같은 접두사 특히 조심하기

이 접두사가 붙은 환경변수는 브라우저에서 누구나 볼 수 있게 공개돼요. 절대 비밀 키를 여기에 넣으면 안 되고, 서버에서만 쓰는 값은 접두사 없이 관리해요.

API 키·토큰은 터미널글자로 명령어를 입력해서 컴퓨터를 조작하는 화면. Claude Code도 이 안에서 실행돼요.·채팅에 직접 노출하지 않기

echo나 print로 값을 화면에 그대로 찍으면 그 순간이 곧 유출이에요. Claude한테도 값 자체를 보여달라고 하지 말고 파일 경로나 변수 이름으로만 다루게 해요.

커밋변경한 내용을 하나의 저장 지점으로 기록하는 것. 로컬에만 남고, push 해야 GitHub에 올라가요. 전에 git status지금 어떤 파일이 바뀌었고, 뭐가 커밋될 준비가 됐는지 보여주는 명령어.로 확인하고, push 전에 한 번 더 점검하기

git add . 로 한 번에 다 올리다 보면 .env나 자격증명 파일이 실수로 껴 들어갈 수 있어요. git status로 커밋 전에 확인하는 게 제일 좋고, 혹시 실수로 커밋됐어도 push만 안 하면 아직 GitHub엔 안 올라간 상태니 push 전에 마지막으로 한 번 더 확인해요.

바이브코딩 시작 전 필수 설치·연결

꿀팁

1. VS Code 안에서 로컬 폴더 하나 만들고, 그 폴더 이름 그대로 Claude한테 "깃허브 저장소랑 버셀 프로젝트 만들어줘"라고 시키면 끝나요. GitHub, Vercel 왔다갔다 안 해도 VS Code 안에서 다 처리돼요.

2. Supabase, MCP 연결은 선택이지만, 미루면 미룰수록 나중에 개발 속도가 느려져요.

더 자세한 설명이 필요하면 댓글 남겨주세요!

STEP 1

Claude Code 설치

1Node.js 설치하기 → 2Claude Code 설치하기 → 3로그인하고 시작하기

nodejs.org 에서 LTS 버전을 받아 설치해요 (Claude Code를 설치하려면 먼저 필요해요)
터미널글자로 명령어를 입력해서 컴퓨터를 조작하는 화면.을 열고 npm install -g @anthropic-ai/claude-code 를 입력해서 설치해요
아무 폴더에서나 터미널에 claude 라고 치면 로그인 안내가 나와요. 로그인하면 바로 시작돼요

STEP 2

GitHub 연결

1계정 만들기 → 2저장소 만들기 → 3코드 올리기

github.com 에서 무료 계정을 만들어요
터미널에 git --version 을 쳐서 git이 깔려 있는지 확인해요 (없으면 git-scm.com 에서 설치)
git config --global user.name/user.email 로 내 이름·이메일을 등록해요
저장소코드와 변경 이력이 저장되는 공간. GitHub에 만들면 온라인에서 관리·공유할 수 있어요.를 만들고 git remote add origin [주소] → git push 로 코드를 올려요

STEP 3

VS Code 설치

1코드 쓰는 프로그램 깔기 → 2Claude Code 연결하기 → 3한 화면에서 다 보기

code.visualstudio.com 에 들어가서 내 컴퓨터에 맞는 걸 다운받아 설치해요
터미널 창(Ctrl + `)을 열고 claude 라고 쳐서 Claude Code를 켜요
코드가 바뀐 부분은 왼쪽 "소스 제어" 탭에서 바로 볼 수 있어요

STEP 4

Vercel 배포만든 코드를 실제 인터넷에서 볼 수 있게 서버에 올리는 것.

1GitHub 연결하기 → 2코드 올리기(push) → 3자동으로 사이트 열기

vercel.com 에 GitHub 계정으로 가입해요
New Project 에서 내 GitHub 저장소를 골라요(Import)
그다음부턴 코드를 push 할 때마다 사이트가 자동으로 업데이트돼요
Settings → Domains 에서 내 도메인을 연결할 수 있어요

STEP 5 선택

Supabase 연동

1가입하기 → 2프로젝트 만들기 → 3데이터 저장·불러오기

supabase.com 에 가입하고 새 프로젝트를 만들어요
Project Settings → API 에서 URL이랑 anon key외부 서비스에 접속할 때 쓰는 API 키의 한 종류. 비밀번호처럼 노출되면 안 돼요.(비밀번호 같은 값)를 확인해요
프로젝트 안 .env 파일에 그 값을 저장해요 (꼭 .gitignore 에 넣어서 깃허브에 안 올라가게!)
Table Editor에서 표(테이블)를 만들거나, MCP로 연결하면 Claude Code가 대신 관리해줘요

STEP 6 선택

MCPClaude Code가 Vercel, Supabase 같은 외부 서비스에 직접 접속해서 대신 작업할 수 있게 해주는 연결 방식. 연결

1서비스 연결하기 → 2Claude한테 권한 주기 → 3Claude가 대신 조작하기

Claude Code에서 claude mcp add [서비스명] 으로 연결해요 (서비스마다 방법이 조금씩 달라요)
/mcp 라고 치면 지금 연결된 서비스 목록을 볼 수 있어요
연결되면 Claude가 배포 상태 확인, 데이터베이스 조회·수정 같은 걸 대신 해줄 수 있어요