[ 바이브코딩 ] 바이브코딩 용어 총정리 - 초보자가 꼭 알아야 할 개발 용어
바이브코딩을 처음 시작하면 생각보다 코드를 직접 작성하는 것보다 먼저 막히는 부분이 있습니다.
바로 개발 용어입니다.
Cursor나 Claude Code, Codex 같은 AI 코딩 도구에게 기능을 만들어달라고 요청하면 AI가 자연스럽게 이런 말을 하기 시작합니다.
"환경변수에 API Key를 등록해주세요."
"npm 패키지를 설치한 뒤 개발 서버를 다시 실행하겠습니다."
"localhost:3000에서 확인할 수 있습니다."
개발자라면 익숙한 표현이지만 코딩을 처음 시작한 사람에게는 한 문장 안에도 모르는 단어가 여러 개 등장합니다.
그렇다고 바이브코딩을 하기 전에 개발 공부를 몇 달씩 할 필요는 없습니다.
이번 글에서는 바이브코딩을 하면서 실제로 자주 만나게 되는 개발 용어만 골라서 초보자 기준으로 쉽게 정리해보겠습니다.
개발 용어를 완벽하게 외우는 것이 목표가 아닙니다.
AI가 어떤 작업을 하려고 하는지 이해하고, 문제가 생겼을 때 AI와 대화를 이어갈 수 있을 정도만 이해하면 충분합니다.
1. 프론트엔드(Frontend)란?
프론트엔드(Frontend)는 사용자가 직접 보고 사용하는 화면 영역을 의미합니다.
쉽게 말하면 웹사이트에 접속했을 때 눈에 보이는 대부분의 화면이 프론트엔드입니다.
✅ 버튼
✅ 메뉴
✅ 게시글 목록
✅ 검색창
✅ 이미지
✅ 관리자 대시보드 화면
예를 들어 쇼핑몰을 만든다고 생각해보겠습니다.
사용자가 보는 상품 목록, 상품 사진, 장바구니 버튼, 주문 화면은 모두 프론트엔드에 해당합니다.
바이브코딩을 하다 보면 AI에게 아래처럼 요청하는 경우가 많습니다.
"모바일에서도 잘 보이도록 반응형 UI로 수정해줘."
"이 버튼 디자인을 조금 더 눈에 띄게 바꿔줘."
React, Next.js, Vue와 같은 단어도 주로 프론트엔드 개발 과정에서 만나게 됩니다.
프론트엔드 = 사용자가 보는 화면
2. 백엔드(Backend)란?
백엔드(Backend)는 사용자 눈에는 직접 보이지 않지만 서비스가 실제로 동작하도록 처리하는 영역입니다.
회원가입을 예로 들어보겠습니다.
사용자가 화면에서 이메일과 비밀번호를 입력하는 부분은 프론트엔드입니다.
하지만 사용자가 가입 버튼을 눌렀을 때 입력한 정보를 확인하고, 회원 정보를 저장하고, 로그인할 수 있도록 처리하는 것은 백엔드입니다.
사용자가 이메일과 비밀번호 입력
↓
백엔드
입력값 확인 → 사용자 생성 → DB 저장 → 결과 전달
바이브코딩에서는 AI가 다음과 같이 이야기할 수 있습니다.
이 말은 사용자가 로그인 버튼을 눌렀을 때 실제 로그인 작업을 처리하는 기능을 만들겠다는 의미입니다.
| 구분 | 프론트엔드 | 백엔드 |
|---|---|---|
| 역할 | 화면 표시 | 데이터 및 기능 처리 |
| 사용자에게 보이는가? | 보임 | 대부분 보이지 않음 |
| 예시 | 버튼, 메뉴, 화면 | 로그인, 데이터 저장 |
3. 서버(Server)란?
서버(Server)는 사용자의 요청을 받아 필요한 작업을 처리하고 결과를 돌려주는 컴퓨터 또는 프로그램이라고 이해하면 쉽습니다.
음식점으로 비유하면 조금 더 이해하기 쉽습니다.
요청 = 주문
서버 = 주문을 받아 처리하는 주방
응답 = 완성된 음식
예를 들어 사용자가 웹사이트에서 게시글 목록을 요청한다고 생각해보겠습니다.
서버는 요청을 받은 뒤 데이터베이스에서 게시글을 가져와 사용자에게 전달합니다.
서버 = 요청을 받아 실제 작업을 처리하는 곳
여기서 서버는 반드시 엄청나게 큰 컴퓨터를 의미하지는 않습니다.
내 노트북에서 실행하고 있는 개발 프로그램도 상황에 따라 개발 서버라고 부를 수 있습니다.
4. 데이터베이스(DB)란?
데이터베이스(Database, DB)는 서비스에서 사용하는 정보를 저장하는 공간입니다.
예를 들어 회원관리 서비스를 만든다면 다음과 같은 정보가 필요합니다.
이메일
가입 날짜
닉네임
사용자 권한
이런 데이터를 프로그램이 종료될 때마다 사라지게 할 수는 없습니다.
그래서 데이터를 데이터베이스에 저장합니다.
Supabase, MySQL, PostgreSQL, MongoDB 같은 이름을 바이브코딩 과정에서 자주 만나게 되는 이유도 여기에 있습니다.
테이블(Table)은 무엇일까?
데이터베이스 안에서는 데이터를 표 형태로 관리하는 경우가 많습니다.
| id | name | |
|---|---|---|
| 1 | 준기 | example@email.com |
| 2 | 사용자A | user@example.com |
이런 표 하나를 테이블(Table)이라고 생각하면 됩니다.
DB = 데이터를 저장하는 곳
Table = 데이터를 정리해서 저장하는 표
5. API란?
API(Application Programming Interface)는 서로 다른 프로그램이 데이터를 주고받을 수 있도록 연결해주는 통로입니다.
초보자에게는 조금 어려운 용어처럼 보이지만 바이브코딩에서는 정말 자주 등장합니다.
예를 들어 날씨 앱을 직접 만든다고 생각해보겠습니다.
우리가 직접 전국의 온도와 날씨 정보를 측정할 수는 없습니다.
대신 날씨 정보를 제공하는 서비스의 API에 요청을 보냅니다.
↓
날씨 API에 요청
↓
현재 날씨 데이터 전달
↓
화면에 날씨 표시
ChatGPT 같은 AI 서비스 역시 API를 이용해서 내가 만든 서비스와 연결할 수 있습니다.
바이브코딩 중 AI가 아래처럼 이야기할 수 있습니다.
이 말은 내 프로그램이 OpenAI 서비스에 요청을 보내고 결과를 받을 수 있도록 연결하겠다는 뜻입니다.
API = 프로그램과 프로그램 사이의 연결 통로
6. 클라이언트(Client)란?
클라이언트(Client)는 서버에 무언가를 요청하는 쪽을 의미합니다.
일반적인 웹서비스에서는 사용자가 사용하는 웹브라우저나 앱이 클라이언트 역할을 합니다.
서버 → 요청 처리
서버 → 클라이언트에 응답
예를 들어 사용자가 게시글 목록 화면을 열었다면 브라우저가 서버에 게시글 데이터를 요청합니다.
서버가 데이터를 보내주면 브라우저가 그 내용을 화면에 표시합니다.
클라이언트 = 요청하는 쪽
서버 = 요청을 처리하는 쪽
7. 터미널(Terminal)과 CLI란?
바이브코딩을 시작하면 거의 반드시 만나게 되는 것이 터미널(Terminal)입니다.
터미널은 글자로 명령어를 입력해서 컴퓨터에 작업을 시키는 프로그램입니다.
예를 들어 AI가 이런 명령어를 실행하라고 할 수 있습니다.
npm install또는 이렇게 실행할 수도 있습니다.
npm run dev마우스로 아이콘을 클릭하는 대신 명령어를 입력해서 프로그램을 실행하는 방식입니다.
이처럼 글자로 컴퓨터에 명령을 전달하는 방식을 CLI(Command Line Interface)라고 합니다.
하지만 바이브코딩에 필요한 터미널 명령어는 생각보다 많지 않습니다.
다음 3편에서 실제로 자주 사용하는 명령어만 따로 자세히 알아보겠습니다.
8. npm이란?
바이브코딩을 하다 보면 정말 자주 보는 명령어가 있습니다.
npm installnpm은 JavaScript 프로젝트에서 필요한 패키지를 설치하고 관리하는 도구입니다.
여기서 패키지(Package)는 다른 개발자가 만들어둔 기능 묶음이라고 생각하면 쉽습니다.
예를 들어 로그인, 날짜 처리, 아이콘, 데이터 요청 같은 기능을 매번 처음부터 만들 필요는 없습니다.
이미 누군가 잘 만들어둔 패키지를 가져와 사용할 수 있습니다.
＋
필요한 외부 패키지
↓
하나의 서비스 완성
package.json은 무엇일까?
JavaScript 프로젝트를 만들면 package.json이라는 파일도 자주 보게 됩니다.
이 파일에는 프로젝트 이름이나 실행 명령어, 사용 중인 패키지 같은 정보가 들어갑니다.
npm = 패키지를 설치하고 관리하는 도구
package.json = 프로젝트가 사용하는 패키지와 설정을 기록한 파일
9. 라이브러리와 프레임워크란?
개발 관련 글을 보다 보면 라이브러리(Library)와 프레임워크(Framework)라는 표현도 자주 등장합니다.
라이브러리
특정 기능을 쉽게 구현할 수 있도록 이미 만들어둔 코드 모음입니다.
필요할 때 내가 가져와 사용하는 도구에 가깝습니다.
프레임워크
프로그램을 만드는 전체적인 구조와 규칙을 제공하는 개발 환경이라고 이해하면 쉽습니다.
| 구분 | 라이브러리 | 프레임워크 |
|---|---|---|
| 개념 | 필요한 기능을 가져와 사용 | 전체 개발 구조 제공 |
| 느낌 | 도구 상자 | 건물을 짓는 설계 구조 |
처음 바이브코딩을 시작할 때 이 차이를 완벽하게 구분할 필요는 없습니다.
AI가 Next.js 같은 프레임워크를 사용하겠다고 하면 "웹서비스를 만들기 위한 기본 구조를 선택하는구나" 정도로 이해해도 충분합니다.
10. Git과 GitHub란?
바이브코딩에서 꼭 알아두기를 추천하는 것이 Git과 GitHub입니다.
둘은 이름이 비슷하지만 같은 것은 아닙니다.
Git
코드의 변경 기록을 저장하는 도구입니다.
쉽게 말하면 개발 프로젝트의 세이브 포인트를 만드는 것과 비슷합니다.
GitHub
Git으로 관리하는 프로젝트를 인터넷에 저장하고 공유할 수 있는 서비스입니다.
| 구분 | Git | GitHub |
|---|---|---|
| 역할 | 변경 기록 관리 | 코드 저장 및 협업 |
| 쉽게 표현하면 | 게임 저장 기능 | 온라인 저장소 |
AI가 코드를 수정하다가 기존 기능까지 망가뜨릴 수 있습니다.
중요한 변경 전에 Git으로 기록을 남겨두면 정상적으로 작동하던 이전 상태로 돌아가기 훨씬 쉬워집니다.
11. Repository와 Commit은 무엇일까?
Git과 GitHub를 사용하기 시작하면 Repository와 Commit이라는 단어를 만나게 됩니다.
Repository
Repository는 줄여서 Repo라고 부르기도 합니다.
하나의 프로젝트를 저장하고 관리하는 공간이라고 생각하면 쉽습니다.
Commit
Commit은 현재 코드 상태를 하나의 기록으로 저장하는 작업입니다.
회원가입 기능 완성 → Commit
관리자 페이지 완성 → Commit
이렇게 중요한 작업이 끝날 때마다 기록을 남겨두면 문제가 발생했을 때 어느 시점으로 돌아갈지 판단하기 쉬워집니다.
Repository = 프로젝트 보관함
Commit = 코드의 세이브 포인트
12. localhost란?
바이브코딩을 하다 보면 아래와 같은 주소를 정말 자주 보게 됩니다.
http://localhost:3000localhost는 현재 내가 사용하고 있는 컴퓨터를 의미합니다.
웹서비스를 만들었다고 해서 처음부터 인터넷에 공개할 필요는 없습니다.
내 컴퓨터에서 먼저 프로그램을 실행한 뒤 브라우저에서 확인할 수 있습니다.
↓
localhost 접속
↓
내가 만든 웹사이트 확인
3000은 무엇일까?
localhost 뒤에 붙어 있는 3000 같은 숫자는 포트(Port)라고 합니다.
하나의 컴퓨터에서 여러 프로그램이 동시에 실행될 수 있기 때문에 어떤 프로그램으로 연결할지를 구분하는 번호라고 생각하면 됩니다.
프로젝트에 따라 3000, 5173, 8080 등 다양한 번호를 사용할 수 있습니다.
13. 환경변수(.env)란?
바이브코딩을 하면서 특히 주의해야 하는 개념 중 하나가 환경변수(Environment Variable)입니다.
환경변수는 API Key, 데이터베이스 비밀번호처럼 코드에 직접 작성하면 위험한 정보를 별도로 관리하기 위해 사용합니다.
JavaScript 프로젝트에서는 보통 아래와 같은 파일을 만나게 됩니다.
.env예를 들어 외부 AI API를 사용하는 서비스라면 API Key를 환경변수에 저장할 수 있습니다.
다른 사람이 해당 Key를 확인하고 사용할 수 있기 때문입니다.
AI가 아래처럼 말한다면 이 개념을 떠올리면 됩니다.
.env = 비밀번호나 API Key 같은 중요한 설정을 코드와 분리해서 관리하는 공간
14. 빌드(Build)와 배포(Deploy)란?
웹서비스를 완성하면 내 컴퓨터에서만 사용하는 것이 아니라 실제 인터넷에 공개할 수 있습니다.
이 과정에서 빌드(Build)와 배포(Deploy)라는 단어를 자주 만나게 됩니다.
빌드(Build)
개발 중인 코드를 실제 서비스에서 사용할 수 있는 형태로 준비하는 과정입니다.
배포(Deploy)
완성된 서비스를 서버에 올려 다른 사람들이 인터넷을 통해 접속할 수 있도록 만드는 과정입니다.
↓
기능 테스트
↓
Build
↓
Deploy
↓
인터넷에서 서비스 사용
Vercel, Netlify, AWS 같은 서비스 이름도 주로 배포 단계에서 만나게 됩니다.
15. 도메인과 DNS란?
서비스를 인터넷에 공개하면 사용자가 접속할 주소가 필요합니다.
도메인(Domain)은 사람들이 웹사이트에 접속할 때 사용하는 주소입니다.
myservice.kr
myproject.com
하지만 실제 서버는 IP 주소라는 숫자 형태의 주소를 사용합니다.
DNS는 우리가 입력한 도메인을 실제 서버의 주소와 연결해주는 역할을 합니다.
도메인 = 사람 이름
IP = 전화번호
DNS = 이름을 보고 전화번호를 찾아주는 연락처
16. 개발 용어를 전부 외워야 할까?
여기까지 읽으면 오히려 용어가 너무 많다고 느낄 수도 있습니다.
하지만 이 모든 내용을 정확하게 암기할 필요는 없습니다.
바이브코딩에서는 필요한 순간에 AI에게 다시 물어볼 수 있기 때문입니다.
"백엔드 API를 만들고 환경변수에 Key를 추가한 다음 localhost에서 테스트하겠습니다."
이제 이 문장을 완벽하게 이해하지 못하더라도 대략 이런 의미라는 것은 알 수 있습니다.
↓
중요한 Key를 별도 설정에 저장하고
↓
내 컴퓨터에서 실행해서 확인하겠다는 뜻
바로 이 정도가 이번 글의 목표입니다.
용어를 외우려고 하지 말고
"AI가 지금 어떤 작업을 하려는지 이해할 수 있는 정도"를 목표로 해보세요.
17. 바이브코딩 핵심 용어 한 번에 정리
| 용어 | 쉽게 이해하면 |
|---|---|
| Frontend | 사용자가 보는 화면 |
| Backend | 실제 기능을 처리하는 영역 |
| Server | 요청을 받아 작업을 처리하는 곳 |
| Database | 데이터를 저장하는 곳 |
| API | 프로그램끼리 연결하는 통로 |
| Client | 서버에 요청하는 쪽 |
| Terminal | 명령어를 입력하는 프로그램 |
| CLI | 글자로 컴퓨터에 명령하는 방식 |
| npm | JavaScript 패키지 관리 도구 |
| Package | 다른 개발자가 만든 기능 묶음 |
| Git | 코드 변경 기록 관리 |
| GitHub | 코드를 온라인에 저장하고 공유하는 서비스 |
| Repository | 프로젝트 저장 공간 |
| Commit | 코드의 세이브 포인트 |
| localhost | 현재 내 컴퓨터 |
| Port | 실행 중인 프로그램을 구분하는 번호 |
| .env | 민감한 설정을 따로 저장하는 파일 |
| Build | 서비스용 결과물로 준비하는 과정 |
| Deploy | 인터넷에서 사용할 수 있도록 공개하는 과정 |
| Domain | 웹사이트 주소 |
18. 정리
바이브코딩을 시작한다고 해서 프로그래밍 언어와 개발 이론부터 모두 공부할 필요는 없습니다.
하지만 프론트엔드, 백엔드, API, DB, 서버, Git, npm, 환경변수 같은 용어를 어느 정도 이해하고 있으면 AI와 개발하는 과정이 훨씬 편해집니다.
특히 AI가 오류를 설명하거나 다음 작업을 제안했을 때 무슨 이야기를 하고 있는지 전혀 모르는 상태에서 벗어날 수 있다는 것이 가장 중요합니다.
프론트엔드 = 화면
백엔드 = 기능 처리
서버 = 요청 처리
DB = 데이터 저장
API = 프로그램 연결
Git = 코드 기록
npm = 패키지 관리
localhost = 내 컴퓨터에서 실행
.env = 중요한 설정 관리
배포 = 인터넷에 서비스 공개
다음 글에서는 여기서 등장한 용어 중 바이브코딩 초보자가 가장 먼저 어려워하는 터미널과 CLI를 직접 사용해보겠습니다.
터미널이 무엇인지부터 폴더 이동, 프로젝트 실행, AI가 알려준 명령어를 어디에 입력해야 하는지까지 초보자 기준으로 하나씩 정리해보겠습니다.
🔗 바이브코딩 입문 시리즈
← 이전 글 보기
다음 편에서 계속