📖 바이브코딩, 대체 뭐라고 말하는 건지 하나도 모르겠다면
💡 이 글은: 바이브코딩에 관심은 있지만 "프롬프트가 뭐야?", "에이전트가 뭐야?", "프론트엔드가 뭐야?" 수준의 완전 초보자를 위한 용어 해설집입니다. IT 전공자가 아니어도, 코딩을 한 번도 해본 적 없어도, 이 글만 읽으면 바이브코딩 대화에 끼어들 수 있습니다.
요즘 "바이브코딩"이라는 단어가 뉴스, 유튜브, SNS 어디서나 등장합니다. 호기심이 생겨서 글을 읽어보면... 더 모르는 단어가 쏟아집니다.
"Claude CLI로 풀스택 앱을 만들고 Firebase에 배포한다"
→ 이 문장에서 이해되는 단어가 "만들고"와 "한다"뿐이라면, 이 글이 바로 당신을 위한 글입니다.
"저도 처음 AI 강의를 시작할 때 수강생분들이 가장 힘들어하시는 게 '용어'였어요. 기술 자체는 쉬운데, 용어가 벽처럼 느껴지는 거죠. 이 글로 그 벽을 허물어 드리겠습니다."
— 이신우 소장, 미래이음연구소
🔤 목차 — 카테고리별 용어 분류
- 🌊 기본 개념 — 바이브코딩, 프롬프트, 에이전트, AI 모델
- 🛠️ 도구 이름 — Claude CLI, Antigravity, Cursor, v0, Codex
- 💻 개발 용어 — 프론트엔드, 백엔드, 풀스택, API, DB
- 🚀 배포·운영 — 배포, 호스팅, Firebase, Vercel, 도메인
- 📐 방법론 — SDD, DESIGN.md, MCP, 토큰, 컨텍스트
🌊 기본 개념 — "바이브코딩이 대체 뭔데?"
🎵 바이브코딩 (Vibe Coding)
한줄 정의: 코드를 직접 쓰지 않고, 자연어(우리가 쓰는 말)로 AI에게 지시해서 소프트웨어를 만드는 방식
💬 쉽게 말하면: "로그인 페이지 만들어줘"라고 말하면 AI가 알아서 코드를 짜는 거예요. 마치 인테리어를 직접 하는 게 아니라, 디자이너에게 "모던한 느낌으로 해주세요"라고 말하는 것과 비슷합니다.
📌 어원: 안드레이 카르파시(전 테슬라 AI 수석)가 2025년에 만든 용어. "분위기(vibe)에 맡기고 코딩한다"는 뜻.
💬 프롬프트 (Prompt)
한줄 정의: AI에게 내리는 명령어 또는 지시문
💬 쉽게 말하면: 식당에서 "김치찌개 하나요"가 주문이라면, AI에게 "회원가입 페이지 만들어줘"가 프롬프트입니다. 더 자세하게 말할수록 원하는 결과가 나와요.
✅ 예시:
❌ 나쁜 프롬프트: "앱 만들어줘"
✅ 좋은 프롬프트: "카페 예약 앱을 만들어줘. 날짜 선택, 인원수 입력, 예약 확인 기능이 필요해. 색상은 갈색 톤으로."
🤖 AI 에이전트 (AI Agent)
한줄 정의: 단순 답변을 넘어 스스로 판단하고 행동하는 AI
💬 쉽게 말하면: 일반 AI(ChatGPT 대화)가 "물어보면 대답하는 비서"라면, AI 에이전트는 "시키면 알아서 처리하는 직원"입니다. 파일을 찾고, 코드를 쓰고, 에러를 고치고, 실행까지 합니다.
📌 핵심 차이: 일반 AI = 대화만 / AI 에이전트 = 대화 + 행동
🧠 AI 모델 (AI Model)
한줄 정의: AI의 "두뇌"에 해당하는 핵심 엔진
💬 쉽게 말하면: 자동차로 치면 "엔진"이에요. 같은 자동차(앱)라도 엔진(모델)이 다르면 성능이 달라집니다.
📌 주요 모델:
• Claude (Anthropic) — 코딩 능력 최강, 바이브코딩 1위 도구의 엔진
• GPT (OpenAI) — ChatGPT의 엔진, 범용적
• Gemini (Google) — 구글의 AI 엔진, Antigravity에 탑재
🪙 토큰 (Token)
한줄 정의: AI가 글을 처리하는 최소 단위 (글자 쪼개기)
💬 쉽게 말하면: AI는 글을 한 글자씩이 아니라 "토큰"이라는 조각으로 읽어요. 영어는 단어 1개 ≈ 1토큰, 한국어는 글자 1개 ≈ 1~2토큰 정도. AI 사용료는 보통 토큰 수로 계산됩니다.
📌 예시: "안녕하세요" → 약 5토큰 / "Hello" → 1토큰
📏 컨텍스트 윈도우 (Context Window)
한줄 정의: AI가 한 번에 기억할 수 있는 대화/문서의 양
💬 쉽게 말하면: 사람이 책상 위에 펼쳐놓을 수 있는 종이의 양이에요. 책상이 클수록(컨텍스트가 클수록) 더 많은 정보를 동시에 볼 수 있어서 더 정확한 작업이 가능합니다.
📌 현재 수준: Claude Opus 4.6은 100만 토큰(약 소설 10권 분량)을 한 번에 처리할 수 있습니다.
🛠️ 도구 이름 — "그게 뭔데? 먹는 건데?"
💡 참고: 2026년 3월 기준 바이브코딩 도구 인기 순위입니다. 이 도구들의 이름이 자주 등장하니 알아두세요!
🥇 Claude CLI (Claude Code) — 1위
한줄 정의: 터미널(검은 화면)에서 작동하는 AI 코딩 에이전트 (Anthropic 개발)
💬 쉽게 말하면: 컴퓨터의 검은 창(터미널)에서 "이 프로젝트에 로그인 기능 추가해줘"라고 치면, AI가 알아서 파일을 찾고, 코드를 쓰고, 실행하고, 에러까지 고칩니다. 코딩판의 자율주행차라고 보시면 돼요.
📌 왜 1위? 파일 시스템 전체에 접근 가능 + 자율 실행 + 100만 토큰 컨텍스트
🥈 Antigravity — 2위
한줄 정의: 구글의 풀스택 바이브코딩 플랫폼 (웹 브라우저에서 사용)
💬 쉽게 말하면: 웹 브라우저를 열고 "카페 예약 앱 만들어줘"라고 하면, 화면(프론트엔드)부터 데이터 저장(백엔드)까지 전부 만들어주고 인터넷에 공개(배포)까지 해줍니다. 코딩 지식 제로로도 실제 서비스 가능한 앱을 만들 수 있어요.
📌 강점: 비개발자에게 가장 쉬움 + Firebase 자동 연동 + Google Stitch(디자인)와 연결
🥉 Cursor — 3위
한줄 정의: AI가 내장된 코드 편집기(IDE)
💬 쉽게 말하면: 워드(Word)가 문서 편집기라면, Cursor는 코드 편집기인데 AI 비서가 옆에 상주합니다. 코드를 쓰다가 막히면 AI에게 물어보고, 자동완성도 해줍니다.
📌 특징: 코딩 경험이 조금이라도 있다면 가장 편한 도구
🎨 Google Stitch (바이브 디자인)
한줄 정의: 말로 설명하면 AI가 앱 디자인(UI)을 만들어주는 도구
💬 쉽게 말하면: "파란색 톤의 카페 예약 앱 메인 화면 만들어줘"라고 하면 예쁜 디자인이 나옵니다. 바이브코딩이 "코드"를 AI로 만드는 거라면, 바이브 디자인은 "디자인"을 AI로 만드는 거예요.
🔧 v0 (Vercel)
한줄 정의: 화면(UI) 만들기에 특화된 AI 코드 생성기
💬 쉽게 말하면: "이런 느낌의 웹페이지 보여줘"라고 하면 바로 만들어서 미리보기를 보여줍니다. 빠르게 화면을 시각화하고 싶을 때 좋아요.
🧮 Codex (OpenAI)
한줄 정의: OpenAI의 AI 코딩 에이전트 (GPT-5.4 기반)
💬 쉽게 말하면: ChatGPT를 만든 OpenAI의 코딩 전문 AI입니다. 여러 작업을 동시에 처리하는 게 특기예요.
💻 개발 용어 — "프론트엔드? 백엔드? 뭐가 앞이고 뭐가 뒤야?"
🖥️ 프론트엔드 (Frontend)
한줄 정의: 사용자 눈에 보이는 화면 부분
💬 쉽게 말하면: 식당으로 치면 "홀"이에요. 손님이 보는 메뉴판, 테이블, 인테리어 — 이게 프론트엔드입니다. 버튼, 입력창, 이미지, 텍스트 등 화면에 보이는 모든 것.
⚙️ 백엔드 (Backend)
한줄 정의: 사용자 눈에 안 보이는 서버·데이터 처리 부분
💬 쉽게 말하면: 식당의 "주방"이에요. 손님 눈에는 안 보이지만, 주문을 받고, 요리하고, 재고를 관리하는 곳. 로그인 처리, 데이터 저장, 결제 처리 등이 여기서 일어납니다.
🏗️ 풀스택 (Full-stack)
한줄 정의: 프론트엔드 + 백엔드 전부 다
💬 쉽게 말하면: 홀과 주방을 다 할 수 있는 만능 요리사! "풀스택 바이브코딩"이라고 하면, 화면부터 서버까지 전부 AI로 만든다는 뜻입니다.
🗄️ 데이터베이스 (Database, DB)
한줄 정의: 데이터를 저장하고 관리하는 창고
💬 쉽게 말하면: 엑셀 파일의 초대형 버전이에요. 회원 정보, 게시글, 주문 내역 등 모든 데이터가 여기 저장됩니다. "Firebase"나 "Supabase"는 이 데이터베이스를 클라우드에서 제공하는 서비스 이름이에요.
🔌 API (Application Programming Interface)
한줄 정의: 프로그램끼리 대화하는 통로
💬 쉽게 말하면: 식당의 "주문 창구"예요. 홀(프론트엔드)에서 주방(백엔드)에 "김치찌개 1개요!"라고 전달하는 그 창구가 API입니다. 날씨 앱이 기상청에서 날씨를 가져오는 것도 API를 통해서예요.
🖼️ UI / UX
한줄 정의: UI = 화면 디자인 / UX = 사용 경험
💬 쉽게 말하면: UI는 버튼이 예쁘냐, 글자가 읽기 쉽냐 같은 "겉모습"이고, UX는 앱을 쓸 때 편하냐, 헷갈리지 않냐 같은 "사용 느낌"이에요.
📦 프레임워크 (Framework)
한줄 정의: 개발을 편하게 해주는 "뼈대 키트"
💬 쉽게 말하면: 레고의 기본 판이에요. 빈 땅에서 집을 짓는 게 아니라, 기본 뼈대가 있는 상태에서 시작하는 거죠.
📌 자주 보이는 이름들:
• React — 페이스북이 만든 UI 프레임워크 (가장 인기)
• Next.js — React 기반, 풀스택 지원
• Angular — 구글이 만든 프레임워크
🔒 인증 (Authentication)
한줄 정의: "이 사람이 진짜 이 사람인지" 확인하는 과정 = 로그인
💬 쉽게 말하면: 아파트 출입구에서 비밀번호 누르거나 카드 찍는 거예요. 이메일+비밀번호 로그인, 구글 로그인, 카카오 로그인 등이 모두 "인증"입니다.
🚀 배포·운영 — "만들었는데 어떻게 보여주지?"
🌐 배포 (Deploy)
한줄 정의: 만든 앱을 인터넷에 공개하는 것
💬 쉽게 말하면: 요리를 다 했으면 손님 테이블에 갖다 놓는 거예요. 내 컴퓨터에서만 보이던 앱을 전 세계 누구나 접속할 수 있게 올리는 과정입니다.
☁️ 호스팅 (Hosting)
한줄 정의: 앱을 올려두는 인터넷 공간을 빌리는 것
💬 쉽게 말하면: 식당을 열려면 건물을 임대하잖아요? 앱도 마찬가지로 인터넷에 "공간"을 빌려야 합니다. Vercel, Firebase, Netlify 같은 서비스가 이 공간을 (무료~유료로) 제공해요.
🔥 Firebase
한줄 정의: 구글의 올인원 백엔드 서비스
💬 쉽게 말하면: DB + 로그인 + 호스팅 + 파일 저장을 한번에 제공하는 구글의 서비스. Antigravity가 앱을 만들면 Firebase에 자동으로 올려줍니다. 소규모 앱은 무료!
▲ Vercel
한줄 정의: 웹사이트·웹앱을 쉽게 배포해주는 서비스
💬 쉽게 말하면: 드래그 앤 드롭처럼 쉽게 웹사이트를 인터넷에 올릴 수 있는 서비스. Next.js를 만든 회사이기도 합니다. 무료 플랜으로 시작 가능!
🌍 도메인 (Domain)
한줄 정의: 웹사이트의 "주소" (= URL)
💬 쉽게 말하면: 집 주소처럼 웹사이트에도 주소가 있어요. naver.com, google.com 같은 게 도메인이에요. 내 앱을 배포하면 고유한 도메인을 가질 수 있습니다.
📐 방법론·개념 — "이건 또 뭐야?"
📋 SDD (스펙주도개발, Spec-Driven Development)
한줄 정의: 코드 대신 "설계 문서"를 쓰면 AI가 구현하는 개발 방식
💬 쉽게 말하면: 건축가가 설계도를 그리면 시공사가 집을 짓잖아요? SDD는 개발의 설계도(스펙 문서)를 사람이 쓰고, 실제 건축(코딩)은 AI가 하는 방식입니다.
📝 DESIGN.md
한줄 정의: 디자인 규칙을 AI가 읽을 수 있는 형태로 정리한 문서
💬 쉽게 말하면: "우리 브랜드 색상은 파란색이고, 버튼은 둥글게, 글자 크기는 16px"처럼 디자인 룰을 적어놓은 메모장이에요. AI가 이걸 읽고 일관된 디자인을 유지합니다.
🔗 MCP (Model Context Protocol)
한줄 정의: AI가 외부 도구/서비스와 연결되는 표준 규격
💬 쉽게 말하면: USB-C 케이블처럼, 어떤 AI든 어떤 서비스든 하나의 규격으로 연결할 수 있게 해주는 표준이에요. AI가 구글 캘린더를 읽거나, 슬랙에 메시지를 보내는 게 MCP 덕분입니다.
🖥️ IDE (통합 개발 환경)
한줄 정의: 코드를 쓰는 전용 프로그램 (워드의 코딩 버전)
💬 쉽게 말하면: 워드에서 문서를 쓰듯, IDE에서 코드를 씁니다. VS Code, Cursor 같은 게 IDE예요. 글자 색상으로 코드를 구분해주고, 자동완성도 해줍니다.
⌨️ 터미널 (Terminal)
한줄 정의: 컴퓨터에 글자로 명령을 내리는 검은 창
💬 쉽게 말하면: 영화에서 해커가 검은 화면에 글자를 치는 그거예요! 마우스 대신 키보드로 컴퓨터에 명령을 내립니다. Claude CLI는 이 터미널에서 작동합니다.
🐙 Git / GitHub
한줄 정의: 코드의 "변경 이력"을 관리하는 시스템
💬 쉽게 말하면: 워드의 "변경 내용 추적" 기능의 코딩 버전이에요. 누가, 언제, 무엇을 바꿨는지 기록하고, 잘못되면 이전 상태로 되돌릴 수 있습니다. GitHub는 이걸 인터넷에서 관리하는 서비스.
🔑 API 키 (API Key)
한줄 정의: 외부 서비스를 이용하기 위한 "비밀번호"
💬 쉽게 말하면: 넷플릭스 보려면 계정이 필요하듯, AI 서비스나 지도 서비스를 이용하려면 API 키가 필요해요. 보통 영문+숫자 조합의 긴 코드입니다. 절대 남에게 공유하면 안 돼요!
📊 한눈에 보는 용어 정리표
| 용어 | 한마디 정리 | 비유 |
|---|---|---|
| 바이브코딩 | 말로 시켜서 앱 만들기 | 인테리어 디자이너에게 맡기기 |
| 프롬프트 | AI에게 내리는 명령 | 식당 주문 |
| AI 에이전트 | 알아서 행동하는 AI | 시키면 처리하는 직원 |
| 프론트엔드 | 눈에 보이는 화면 | 식당 홀 |
| 백엔드 | 안 보이는 처리 로직 | 식당 주방 |
| 풀스택 | 프론트 + 백 전부 | 홀 + 주방 만능 |
| DB | 데이터 저장 창고 | 초대형 엑셀 파일 |
| API | 프로그램끼리 대화 통로 | 주문 창구 |
| 배포 | 앱을 인터넷에 공개 | 요리를 손님에게 서빙 |
| 토큰 | AI가 글을 처리하는 단위 | 글자 조각 |
| 터미널 | 글자로 명령하는 검은 창 | 해커가 쓰는 그 화면 |
"용어를 알면 두려움이 사라집니다. 두려움이 사라지면 시작할 수 있습니다. 이 글을 북마크해두시고, 바이브코딩 관련 글을 읽을 때마다 모르는 용어가 나오면 여기로 돌아오세요. 한 달 뒤에는 이 글이 필요 없어질 겁니다."
— 이신우 소장, 미래이음연구소
🎓 용어만 외우지 말고, 직접 해보세요!
미래이음연구소에서 완전 초보자를 위한 바이브코딩 실전 교육을 진행합니다. 이론이 아닌 실습으로 배우면 용어는 자연스럽게 체득됩니다.
📌 lab.duonedu.net | 📞 010-3343-4000
이신우 소장
바이브코딩 전문강사 · 생성형AI 활용 교육 · 미래이음연구소 소장 · AI 관련 저서 25권
'바이브코딩' 카테고리의 다른 글
| 2026년 바이브코딩 최신 트렌드 5가지 — AI 에이전트가 코드를 검증하는 시대 (0) | 2026.03.24 |
|---|---|
| 2026년 바이브코딩 최신 트렌드 총정리 – Cursor Composer 2부터 자동화 에이전트까지 (0) | 2026.03.23 |
| 구글, 풀스택 바이브코딩 공개 — 코딩 제로 지식으로 DB·로그인·결제까지 되는 앱을 만든다고? (0) | 2026.03.21 |
| Apple이 바이브코딩을 두려워한다? — Replit·Vibecode 앱 업데이트 차단 사건의 진짜 의미 (0) | 2026.03.21 |
| 2026 바이브코딩 트렌드 총정리 — Claude CLI 1위 등극, Antigravity 부상, 비개발자가 해커톤을 석권하는 시대 (0) | 2026.03.21 |