📒

바이브코딩 용어 22선

이 자료집은 단어를 외우는 게 목적이 아닙니다!
"사이트 하나를 만들어서 인터넷에 올리는 과정"이라는 하나의 흐름을 따라가면, 22개 용어가 그 안에서 이해되실거에요 
흐름은 4단계입니다: 
① 내 컴퓨터에서 만들기 → ② 저장하고 백업하기 → ③ 인터넷에 올리기 → ④ 기능 채우고 굴러가게 하기

1단계 · 내 컴퓨터에서 만들기

핵심 한 문장: 내가 만드는 사이트는 처음엔 나만 볼 수 있고, 인터넷엔 아직 올라가지 않았어요.

 여기에 이미지를 넣으세요

이 단계에서는 글(코드)을 쓰는 프로그램으로 사이트를 만들고, 내 컴퓨터 안에서만 미리 봅니다.

1. 로컬 / localhost — 내 컴퓨터

사이트를 만들면 처음엔 인터넷이 아니라 내 컴퓨터 안에서만 돌아갑니다. 주소창에 localhost라고 치면 그 사이트가 뜨는데, 남들은 이 주소를 쳐도 안 보이고 오직 나만 봅니다. 비유: 오픈 전 가게에서 사장 혼자 음식 맛보기

2. IDE — 코드 쓰는 전용 프로그램

사이트를 만들려면 글(코드)을 써야 하는데, 그 글을 쓰는 전용 프로그램입니다. 글자에 색을 입히고, 오타를 잡고, 다음에 쓸 내용을 자동으로 추천해줍니다. 요즘 바이브코딩에서 많이 쓰는 Cursor가 이 IDE의 한 종류입니다. 비유: 메모장이 연필이면, IDE는 똑똑한 워드프로세서

3. 터미널 / CLI — 글자로 명령 내리는 검은 창

IDE 화면 아래쪽에 보통 검은 창이 떠 있습니다. 마우스 클릭 대신 "이거 실행해", "이거 설치해" 같은 명령을 글로 적으면 컴퓨터가 그대로 합니다. 비유: 메뉴 손가락으로 가리키기 vs 글로 적은 주문서

4. 콘솔 — 문제 생겼을 때 보는 점검 화면

"왜 이게 안 되지?" 싶을 때 들여다보는 화면입니다. 브라우저에서 F12를 누르면 뜨고, 사이트가 속으로 남긴 메시지나 에러가 표시됩니다. 평소엔 안 봐도 됩니다. 비유: 평소엔 안 보는 가게 CCTV, 사고 나면 봄

1단계 정리 : 내 컴퓨터(로컬)에서, 글 쓰는 프로그램(IDE)으로 코드를 쓰고, 검은 창(터미널)으로 명령을 내려 실행하고, 문제 생기면 점검 화면(콘솔)을 본다.

2단계 · 저장하고 백업하기

핵심 한 문장: 만든 걸 안전하게 저장하고, 잃어버려도 복구되도록 클라우드에 올립니다.

 여기에 이미지를 넣으세요 

코드를 만들다 보면 망칠 수도 있고, 컴퓨터가 고장 날 수도 있습니다. 그래서 "저장 시점"을 찍어두고, 그걸 클라우드에 올려둡니다.

5. Git — 되돌리기 안전망

코드를 바꾼 이력을 관리해주는 시스템입니다. 망쳐도 예전 버전으로 1초 만에 되돌릴 수 있습니다. 비유: 게임의 세이브 포인트 (죽기 전으로 복귀)

6. 커밋 / 푸시 / 풀 — 저장 / 올리기 / 가져오기

커밋 = "이 시점 저장"이라고 도장 찍기. 푸시 = 그 저장본을 GitHub(클라우드)에 올리기. 풀 = 클라우드에 있는 최신본을 내 컴퓨터로 내려받기. 비유: 커밋=게임 세이브 / 푸시=세이브를 클라우드 업로드 / 풀=클라우드에서 최신본 다운로드

7. GitHub / 레포지토리 — 코드 보관 클라우드

Git으로 저장한 코드를 모아두는 클라우드 저장소입니다. 레포지토리(레포) 하나 = 프로젝트 하나. 잃어버려도 복구되고, 남들과 공유도 됩니다. (무료 사용 가능!) 비유: 가게 레시피 노트의 클라우드 백업

2단계 정리 : Git이라는 안전망 위에서, 커밋(저장)하고 푸시(올리기)해서, GitHub라는 클라우드 창고에 내 코드를 안전하게 보관한다.

3단계 · 인터넷에 올려서 영업 개시

핵심 한 문장: 내 컴퓨터에만 있던 사이트를 인터넷에 올려서, 누구나 접속할 수 있게 만듭니다.

이제 셔터를 올리고 손님을 받는 단계입니다.

8. 서버 / Vercel — 24시간 켜진 사이트 자리

서버는 인터넷에 24시간 켜져 있으면서, 사용자가 접속하면 페이지를 만들어 보내주는 컴퓨터입니다. 직접 살 필요 없이 Vercel이라는 회사에서 자리를 빌립니다. GitHub과 연결해두면 코드 올릴 때마다 알아서 사이트가 새로 차려집니다. 비유: 서버=24시간 영업하는 가게 / Vercel=인테리어·전기·수도까지 다 해주는 임대 회사

9. 배포 (Deploy) — 영업 개시

내 컴퓨터에만 있던 사이트를 인터넷에 올려서 누구나 접속할 수 있게 만드는 작업입니다. 비유: 셔터 올리고 손님 받기 시작하는 순간

10. 도메인 / DNS — 주소와 길안내

도메인 = mysite.com 같은 사이트 주소(간판). DNS = 그 주소를 진짜 서버 위치로 안내해주는 길안내 시스템. 비유: 도메인=가게 간판 / DNS=골목길 안내판

3단계 정리 : Vercel에서 빌린 서버 자리에 배포(영업 개시)하고, 도메인이라는 주소를 달면, 누구나 그 주소로 내 사이트에 들어올 수 있다.

4단계 · 기능 채우고 굴러가게 하기

핵심 한 문장: 빈 사이트에 실제로 작동하는 기능을 붙이고, 문제가 생기면 원인을 찾아 고칩니다.

사이트는 떴는데, 회원가입·결제·채팅 같은 진짜 기능이 있어야 쓸모가 있습니다. 양이 많으니 작은 묶음으로 나눠서 봅니다.

4-1. 사이트를 빠르게 짜는 재료

이 셋은 개념이라 표로 간결하게 봅니다.

용어	한마디로	쉬운 설명	비유
11. 프레임워크 (React, Next.js, Vue)	미리 짜둔 틀	사이트를 처음부터 다 만들지 않고, 미리 짜둔 틀 안에 필요한 것만 채워 넣습니다.	김밥 키트: 밥·김·단무지는 있고 속만 넣기
12. 컴포넌트	재사용하는 화면 조각	버튼·헤더·카드를 따로 한 번 만들어두고, 여러 페이지에서 끼워서 씁니다.	레고 블록
13. 라이브러리	기능 묶음 재료	특정 기능을 잘 만들어둔 코드 묶음. 결제는 결제 라이브러리, 차트는 차트 라이브러리.	요리 재료 상점

4-2. 데이터를 보관하는 창고

14. DB / Supabase — 데이터 보관 창고

회원 명단·결제 내역·채팅 로그 같은 데이터를 모아두는 창고가 DB입니다. 직접 만들 필요 없이 Supabase에서 빌립니다. DB + 로그인 + 파일 저장까지 한 번에 해결돼서, 1인 사업의 사실상 표준입니다. 비유: DB=가게 뒤편 창고 / Supabase=창고 임대+경비+출입증까지 묶어 파는 서비스

4-3. 바깥 서비스와 연결하기

15. API & API Key — 외부 기능 빌려 쓰는 통로 + 비밀번호

카카오톡·구글·OpenAI 같은 다른 회사 기능을 내 사이트에서 빌려 쓰는 통로가 API입니다. API Key는 그 통로를 쓸 때 필요한 비밀번호인데, 남이 알면 내 이름으로 비용이 청구되니 절대 공개하면 안 됩니다. 비유: 출판사 발주 시스템(API)에 접근하려면 발주 계정(API Key)이 필요. 계정 새면 내 이름으로 인쇄비 청구됨

이 둘은 개념이라 표로 간결하게 봅니다.

용어	한마디로	쉬운 설명	비유
15. 엔드포인트	API의 기능별 주소	하나의 API 안에서 기능마다 주소가 다릅니다. /users는 회원 정보, /payments는 결제.	거래처 부서별 직통 번호
16. MCP	AI가 도구와 연결되는 표준	AI가 DB·Gmail·GitHub 같은 외부 도구와 직접 대화하게 해주는 표준. 2024년 Anthropic 공개.	USB 포트 (하나면 다 꽂힘)

4-4. 데이터가 오가는 형식 & 비밀 보관

이 둘은 개념이라 표로 간결하게 봅니다.

용어	한마디로	쉬운 설명	비유
17. JSON	데이터 주고받는 표준 양식	컴퓨터끼리 데이터를 주고받을 때 쓰는 표준 형식. {"이름": "홍길동", "나이": 30} 처럼 생김.	표준 거래 명세서 양식
18. 환경변수 (.env)	비밀값 보관 금고	API Key처럼 공개되면 안 되는 값을 코드에 직접 안 쓰고 따로 보관하는 파일.	가게 금고

4-5. 문제가 생겼을 때

19. 로그 — 시간순 활동 기록

프로그램이 돌면서 "누가 언제 무엇을 했는지" 시간순으로 남기는 기록입니다. 비유: 가게 일지 ("10시 입장, 11시 결제, 12시 클레임")

20. 에러 / 스택트레이스 — 멈춘 이유 + 상세 경로

에러 = 코드가 멈춘 이유를 알려주는 빨간 메시지. 스택트레이스 = 어디를 거쳐 어디서 멈췄는지의 상세 경로. 비유: 자동차 고장 알림 + 경로 ("엔진 → 점화플러그 3번 → 단선")

 여기에 화면 캡처를 넣으세요 — 콘솔이나 터미널에 뜬 빨간 에러 메시지.

4단계 정리 : 틀(프레임워크)과 조각(컴포넌트)과 재료(라이브러리)로 사이트를 짜고, 데이터는 창고(DB/Supabase)에 넣고, 바깥 서비스는 통로(API)로 연결하고, 데이터는 표준 양식(JSON)으로 주고받고, 비밀은 금고(.env)에 넣고, 문제가 생기면 기록(로그)과 빨간 메시지(에러)로 원인을 찾는다.

한눈에 보는 전체 흐름

단계	한 일	등장 용어
1. 내 컴퓨터에서 만들기	나만 보는 화면에서 코드 작성·미리보기	로컬/localhost, IDE, 터미널/CLI, 콘솔
2. 저장하고 백업하기	안전하게 저장하고 클라우드에 올림	Git, 커밋/푸시/풀, GitHub/레포지토리
3. 인터넷에 올리기	누구나 접속 가능한 진짜 사이트로	서버/Vercel, 배포, 도메인/DNS
4. 기능 채우기	실제 작동하는 기능 붙이고 문제 해결	프레임워크, 컴포넌트, 라이브러리, DB/Supabase, API, 엔드포인트, MCP, JSON, .env, 로그, 에러