바이브코딩 필수 용어사전

00·01 · 바이브코딩 (Vibe Coding)

코드를 직접 타이핑하는 대신, AI에게 자연어로 원하는 걸 설명해서 소프트웨어를 만드는 방식. 2025년 2월 안드레이 카파시가 만든 말로, 그 해 콜린스 사전이 '올해의 단어'로 뽑을 만큼 빠르게 퍼졌다. 핵심은 "어떻게 만들지"가 아니라 "무엇을 원하는지"를 말하는 것.

00·02 · 프롬프트 (Prompt)

AI에게 보내는 명령 또는 요청 텍스트. 바이브코딩에서 가장 중요한 기술. 같은 작업도 프롬프트에 따라 결과가 천지차이로 달라진다. 구체적이고 맥락이 많을수록 좋다. 역할 지정(persona), 출력 형식, 예시 포함이 핵심.

00·03 · 이터레이션 (Iteration)

한 번에 완성하지 않고 조금씩 개선해 나가는 개발 방식. '일단 만들고 → 고치고 → 고치고'의 반복. 바이브코딩의 핵심 철학. 완벽한 프롬프트보다 빠른 피드백 루프가 중요하다.

00·04 · 컨텍스트 (Context)

AI가 현재 대화에서 기억하고 있는 내용의 전체 범위. 대화가 길어질수록 앞 내용을 잊거나 혼동할 수 있다. 중요한 정보는 반복 언급하거나 새 대화를 시작하는 게 효과적.

00·05 · 할루시네이션 (Hallucination)

AI가 존재하지 않는 정보를 사실인 것처럼 당당하게 말하는 현상. 함수명, 라이브러리 버전, 날짜 등에서 특히 자주 발생. 신뢰도 있어 보이는 거짓말이라 더 위험하다. 항상 실행해서 검증하는 습관이 필수.

01·01 · Lovable — `⭐ 비개발자 시작점`

브라우저에서 대화만으로 풀스택 웹앱을 만들어주는 AI 앱빌더. 앱을 설명하면 화면(프론트)·서버(백)·데이터베이스·로그인까지 하나로 묶어서 만들어준다. 설치·터미널·GitHub 설정 없이 첫 결과물을 바로 본다. 실시간 미리보기로 보면서 "이 부분 고쳐줘"를 같은 채팅에서 반복한다.

01·02 · Claude Code — `⭐ 터미널 에이전트`

터미널(또는 VS Code·데스크톱 앱)에서 실행하는 Anthropic의 AI 코딩 에이전트. 파일을 직접 읽고·쓰고·실행·수정한다. 프로젝트 전체를 이해하고 복잡한 작업을 여러 단계로 알아서 처리한다. "이 프로젝트에 검색 기능 추가해줘"처럼 자연어로 지시하면 파일을 직접 고친다.

01·03 · Cursor (Cursor IDE)

VS Code 기반 AI 내장 코드 편집기. 코드를 보면서 바로 채팅으로 수정 요청을 할 수 있다. 파일 전체를 AI가 읽고 맥락 있는 코드를 만든다. '코드 화면을 직접 보며 다듬는' 작업에 강하다.

01·04 · 언제 무엇을 쓰나 (Lovable vs Claude Code) — `비교`

두 도구는 경쟁이 아니라 단계가 다르다. 시작은 Lovable, 깊어지면 Claude Code.

01·05 · 파운데이션 모델 (Foundation Model)

대량의 데이터로 사전 학습된 거대 AI 모델. Claude, GPT, Gemini, Llama 등이 여기에 해당. 이 모델들 위에 Lovable·Cursor·Claude Code 같은 도구가 만들어진다. 바이브코딩에서 우리가 실제로 쓰는 'AI의 뇌'.

02·01 · 단일 HTML 페이지 — `가장 단순`

파일 하나(HTML)로 끝나는 결과물. 정보 표시가 주목적이고 상호작용이 적다. 파일 하나만 올리면 바로 공유 가능한 주소가 생긴다. 바이브코딩의 첫 목표로 가장 적합하다.

02·02 · 웹사이트 (Website) — `여러 페이지`

여러 페이지가 메뉴·링크로 연결된 집합체. 탭이나 링크를 누르면 다른 화면으로 이동. 여러 자료를 분류해 제공하거나, 내가 만든 앱들을 한곳에 모을 때 쓴다.

02·03 · React 앱 — `⭐ 복잡해지면`

화면을 '컴포넌트(재사용 블록)'로 쪼개서 만드는 방식의 대표 도구. 화면이 많고, 데이터가 실시간으로 바뀌고, 같은 요소(버튼·카드)가 여러 번 나오는 복잡한 앱에 적합. 단일 HTML로 감당이 안 될 때 넘어가는 단계다. (Vite로 빠르게 띄우고 Vercel에 배포하는 조합이 흔하다.)

02·04 · SPA (Single Page Application) — `화면 전환 방식`

페이지를 새로 불러오지 않고 한 화면 안에서 내용만 바뀌는 방식. 탭을 눌러도 화면이 깜빡이며 새로 로드되지 않는다. 빠른 반응과 부드러운 사용감이 특징. React 앱 대부분이 이 방식이다.

02·05 · PWA (Progressive Web App) — `설치되는 웹앱`

웹앱이지만 홈 화면에 아이콘으로 설치할 수 있다. 실제로는 웹인데 앱처럼 느껴진다. 앱스토어 심사가 필요 없고, 오프라인 일부 지원·푸시 알림도 가능하다. 기존 웹앱에 설정 파일 두 개(manifest, service worker)를 더하면 변환된다.

02·06 · Phaser — `⭐ 2D 게임`

자바스크립트로 2D 게임을 만드는 대표 프레임워크(Phaser 3). 캐릭터 이동, 충돌, 점수, 애니메이션 같은 게임 요소가 기본으로 들어 있다. 브라우저에서 바로 돌아가서 배포가 쉽다. 교육용 2D 게임·학습 게임에 적합.

02·07 · Three.js / React Three Fiber — `⭐ 3D`

브라우저에서 3D를 그리는 대표 라이브러리가 Three.js. 이걸 React 방식으로 쓰기 쉽게 감싼 게 React Three Fiber(R3F)다. 3D 공간, 회전하는 물체, 입체 견학 등을 만든다. (Babylon.js도 비슷한 3D 도구지만, 바이브코딩에서는 학습 자료가 풍부한 Three.js 계열이 무난하다.)

02·08 · PixiJS — `2D 고성능 렌더링`

2D 그래픽을 매우 빠르게 그리는 데 특화된 라이브러리. 게임보다는 화려한 2D 애니메이션·인터랙티브 비주얼, 또는 입자 효과가 많은 화면에 강하다. Phaser가 '게임 규칙까지 포함'이라면 PixiJS는 '그리기 자체에 집중'한다.

02·09 · 정적 vs 동적 페이지 — `데이터 저장 여부`

02·10 · 네이티브 대신 PWA — `앱스토어 앱은 최후의 수단`

스마트폰 앱스토어에 올리는 '네이티브 앱'은 바이브코딩으로 만들기 가장 어렵다(언어가 다르고, 심사·기기별 테스트가 복잡). 대부분의 교육용 도구는 PWA 웹앱으로 충분히 대체된다.

03·01 · 프론트엔드 (Frontend) — `보이는 부분`

사용자가 눈으로 보고 손으로 만지는 화면 쪽 전부. 버튼, 입력창, 색, 글자, 레이아웃이 모두 프론트엔드다. HTML(뼈대) + CSS(디자인) + JavaScript(동작)로 만들고, 복잡해지면 React를 쓴다.

03·02 · 백엔드 (Backend) — `보이지 않는 부분`

화면 뒤에서 데이터를 저장하고, 로그인을 확인하고, 계산을 처리하는 서버 쪽 전부. 사용자 눈엔 안 보이지만 "저장이 되나", "내 것만 보이나" 같은 건 다 백엔드가 담당한다.

03·03 · 풀스택 (Full-stack) — `둘 다`

프론트엔드 + 백엔드를 모두 포함하는 것. "풀스택으로 만든다"는 화면부터 데이터 저장·로그인까지 한 앱 안에 다 있다는 뜻. Lovable이 대표적으로 풀스택 앱을 한 번에 만들어준다.

03·04 · 스택 (Stack) — `기술 조합`

앱이 사용하는 기술들의 조합. "스택이 뭐야?"는 "뭐로 만들었어?"라는 뜻. 보통 프론트 프레임워크 + 백엔드 + 데이터베이스 + 인증 + 호스팅으로 구성된다.

03·05 · 데이터베이스 (Database) — `데이터 창고`

앱의 데이터를 저장하는 곳. 학생 명단, 출석 기록, 상담 일지가 여기에 쌓인다. 표(엑셀)처럼 행과 열로 정리되며, 새로고침하거나 다시 접속해도 데이터가 그대로 남는다.

03·06 · Supabase (BaaS) — `⭐ 가장 쉬운 백엔드`

데이터베이스·로그인·파일저장 같은 백엔드 기능을 미리 만들어 제공하는 서비스(BaaS, Backend-as-a-Service). 서버를 직접 운영하지 않고도 데이터 저장과 회원 관리를 붙일 수 있다. 무료 티어가 넉넉해 교사 수준 사용엔 부담이 없다.

03·07 · 인증 (Auth / Authentication) — `로그인`

"당신이 누구인지" 확인하는 기능. 회원가입·로그인·로그아웃이 모두 인증이다. 인증이 있으면 사람마다 다른 화면(교사용/학생용)을 보여주거나, 내 데이터만 보이게 할 수 있다.

03·08 · API / fetch — `프로그램끼리 대화`

API는 서로 다른 프로그램이 대화하는 창구. fetch()는 화면(프론트)에서 외부 API에 데이터를 요청하는 코드. 날씨·급식·AI 같은 외부 기능을 앱에 끌어올 때 쓴다. 요청(Request)을 보내고 응답(Response)을 받는다.

03·09 · JSON (JavaScript Object Notation) — `데이터 형식`

프로그램끼리 데이터를 주고받을 때 쓰는 텍스트 형식. API 응답, 설정 파일에 널리 쓰인다. 키-값 쌍으로 구성되어 사람도 읽을 수 있다.

04·01 · UI (User Interface) — `보이는 것`

사용자가 보는 화면의 생김새 전부. 버튼, 색, 글꼴, 간격, 아이콘, 레이아웃이 UI다. "어떻게 보이는가"의 영역.

04·02 · UX (User Experience) — `쓰는 경험`

사용자가 앱을 쓰면서 느끼는 전체 경험과 흐름. UI가 "어떻게 보이나"라면 UX는 "쓰기 편한가, 헷갈리지 않나, 몇 번 눌러야 되나"이다. 예쁜 화면(UI)이라도 흐름이 꼬이면 나쁜 UX다.

04·03 · 컴포넌트 (Component) — `재사용 블록`

화면을 이루는 재사용 가능한 조각. 버튼·카드·입력창 하나하나가 컴포넌트다. 한 번 만들어두면 여러 곳에서 똑같이 가져다 쓸 수 있어, 학생 카드 30개도 컴포넌트 하나로 찍어낸다. React의 핵심 개념.

04·04 · 반응형 웹 (Responsive Web) — `화면 크기 대응`

화면 크기에 따라 레이아웃이 자동으로 바뀌는 디자인. PC에서는 여러 열, 모바일에서는 한 열로 바뀌는 식. 학부모·학생이 주로 휴대폰으로 보기 때문에 거의 필수다.

04·05 · 디자인 스타일 (Design Styles) — `분위기 고르기`

화면 전체의 미적 방향. 같은 기능이라도 어떤 스타일을 입히느냐로 느낌이 완전히 달라진다. 요즘 자주 쓰이는 스타일로 글래스모피즘(반투명 유리), 뉴모피즘(부드러운 입체), 도파민 컬러(쨍한 색), 벤토 그리드(상자 배치) 등이 있다.

05·01 · 에이전트 (Agent) — `알아서 하는 AI`

단순히 답만 하는 게 아니라, 스스로 계획을 세우고 여러 도구를 순서대로 써서 일을 끝내는 AI. '시키는 것만 하는 AI'가 아니라 '알아서 하는 AI'. Claude Code가 대표적인 에이전트다.

05·02 · 에이전트 하네스 (Agent Harness) — `⭐ AI의 작업 골격`

AI 모델 자체는 그냥 '말 잘하는 예측기'일 뿐이다. 여기에 파일을 읽고·쓰고, 도구를 쓰고, 기억하고, 틀리면 다시 시도하는 능력을 입혀주는 껍데기 구조가 하네스다. Claude Code가 바로 하네스다. 모델은 계속 좋아지지만, 잘 만들어둔 하네스(규칙·스킬·명령어)는 그대로 남아 '재산'이 된다.

05·03 · CLAUDE.md — `프로젝트 규칙서`

Claude Code가 프로젝트를 시작할 때 자동으로 읽는 규칙 파일. "항상 한국어로 답해", "커밋은 내 승인 후에", "이 폴더 구조를 지켜" 같은 항상 적용할 규칙을 적어둔다. 매 대화마다 반복 설명하지 않아도 되게 해준다.

05·04 · 슬래시 명령어 (Slash Command) — `단축 명령`

Claude Code에서 /명령어 형태로 자주 쓰는 작업을 단축키처럼 등록해두는 것. /review는 코드 검토, /deploy는 배포 식이다. 요즘은 슬래시 명령어가 스킬(SKILL.md)과 통합되어, 한 번 만들면 /이름으로 바로 부른다.

05·05 · 스킬 (Skill / SKILL.md) — `작업 매뉴얼`

AI에게 특정 작업을 '이렇게 처리하라'고 가르치는 지시 문서 묶음. 폴더 안에 SKILL.md(핵심 지침)와 참고 파일·예시를 함께 둔다. 반복 작업을 표준화해 매번 같은 품질의 결과를 만든다.

05·06 · 서브에이전트 (Subagent) — `보조 일꾼`

메인 대화를 깨끗하게 유지하기 위해, 특정 작업을 따로 떼어 처리하게 하는 보조 에이전트. 코드베이스를 읽거나 자료를 조사하는 무거운 작업을 서브에이전트에게 맡기면, 메인 대화가 잡다한 내용으로 오염되지 않는다.

05·07 · 훅 (Hook) — `자동 안전장치`

도구 실행 전후에 자동으로 끼어드는 동작. 예를 들어 '커밋하기 직전에 비밀키가 섞였는지 자동 검사'처럼, 사람이 매번 챙기지 않아도 규칙을 강제하는 장치다.

05·08 · MCP (Model Context Protocol) — `⭐ AI에 손발 달기`

AI가 외부 도구·서비스와 연결되는 표준 규격. Anthropic이 공개한 오픈 프로토콜이다. 이걸 연결하면 AI가 단순 채팅을 넘어 Gmail·Drive·Notion 같은 실제 서비스를 직접 다룬다.

05·09 · 꼭 연결할 MCP 추천 (교사용) — `⭐ 실용`

MCP는 종류가 많지만, 교사 바이브코딩에서 체감 효율이 큰 것부터 연결하면 된다.

05·10 · 멀티 에이전트 (Multi-Agent) — `여러 AI 협업`

여러 AI 에이전트가 역할을 나눠 협업하는 구조. 하나가 전체를 지휘(오케스트레이터)하고 나머지가 화면·데이터·배포 등 전문 분야를 맡는다. 복잡한 대형 프로젝트에 효과적이다.

06·01 · 배포 (Deploy) — `세상에 내보내기`

개발이 끝난 앱을 실제로 누구나 쓸 수 있게 인터넷에 올리는 과정. 내 컴퓨터에서만 잘 돌아가는 것은 아직 배포가 아니다. Lovable은 자동 배포되고, 직접 만든 앱은 Vercel·Netlify·GitHub Pages에 올린다.

06·02 · Vercel — `⭐ React 배포`

React·Vite 앱을 배포하기 좋은 클라우드 플랫폼. GitHub에 코드를 올리면(push) 자동으로 빌드·배포된다(CI/CD). HTTPS 자동 적용. 바이브코딩 React 스택의 단짝.

06·03 · Netlify — `정적·간단 배포`

정적 웹사이트를 빠르고 무료로 배포하는 플랫폼. GitHub 연동 시 push하면 자동 배포되고, 파일을 끌어다 놓는(드래그앤드롭) 방식으로도 즉시 올릴 수 있다. HTTPS 자동 적용.

06·04 · GitHub Pages — `무료 호스팅`

GitHub가 무료로 제공하는 정적 사이트 호스팅. 레포에 HTML을 올리고 설정을 켜면 공개 주소가 생긴다. 정적 파일만 지원. 커스텀 도메인 연결도 무료.

06·05 · 도메인 (Domain) — `웹 주소`

웹사이트의 주소. 무료 주소(*.vercel.app, *.netlify.app, *.github.io)와 유료 커스텀 도메인(.com, .kr 등)이 있다.

06·06 · 환경변수 / API 키 (Environment Variable / API Key) — `🔐 비밀 값`

API 키처럼 절대 노출되면 안 되는 값을 코드 밖에 따로 저장하는 방식. 코드에 직접 쓰면 GitHub에 공개되어 악용될 수 있다. .env 파일에 저장하고 .gitignore에 추가하는 게 필수다.

06·07 · HTTPS / SSL — `보안 자물쇠`

웹사이트 통신을 암호화하는 보안 방식. 주소창에 🔒 자물쇠가 표시된다. API 연동 시 HTTPS가 필수이며, Vercel·Netlify·GitHub Pages는 자동 적용된다.

07·01 · Git — `개발자용 Ctrl+Z`

코드 변경 이력을 저장하고 언제든 과거로 돌아갈 수 있는 버전 관리 시스템. 실험 전에 저장(commit)해두면, AI가 코드를 망쳐도 이전 상태로 즉시 복원할 수 있다. 혼자 개발해도 백업·복원만으로 가치가 충분하다.

07·02 · GitHub — `코드 보관·공유 창고`

Git 저장소를 온라인에 올려두는 세계 최대 코드 플랫폼. 코드 백업·공유·배포 연동의 중심. Lovable·Vercel·Claude Code가 모두 GitHub와 연결된다. 무료 플랜으로 충분하다.

07·03 · 커밋 (Commit) — `세이브 포인트`

변경사항을 저장소에 기록하는 행위. 게임의 세이브 포인트 개념. 의미 있는 단위마다 메시지와 함께 저장해두면 나중에 추적·복원이 쉽다.

07·04 · push / pull — `올리고 내리기`

혼자 개발할 땐 push만 잘 해도 충분하다. 매일 작업 끝에 push하면 백업·버전관리가 한 번에 된다.

07·05 · .gitignore — `올리지 말 것 목록`

Git이 추적하지 않을 파일 목록을 정의하는 파일. 패키지 폴더(node_modules), 환경변수(.env), 빌드 결과물 등을 제외한다. 이 파일이 없으면 민감한 정보가 실수로 GitHub에 올라간다.

07·06 · 코드 기초 6가지 (변수·함수·배열·객체·조건문·반복문) — `읽을 정도만`

코드를 직접 짜진 않아도, AI가 만든 코드를 '읽을 정도'는 알아두면 대화가 편해진다.