바이브코딩 완전 초보를 위한 핵심 용어 해설집 — 이것만 알면 시작할 수 있다

코딩을 한 번도 배운 적 없어도 괜찮습니다. 바이브코딩(Vibe Coding)은 AI에게 말로 설명하면 AI가 코드를 대신 써주는 방식입니다. 그런데 처음 시작하면 낯선 용어들이 한가득 쏟아져서 당황하기 쉽습니다. 이 글에서는 바이브코딩을 시작할 때 반드시 알아야 할 핵심 용어들을 최대한 쉽게 풀어드립니다.

목차

1. 바이브코딩이란?
2. AI 도구 관련 용어
3. 개발 환경 관련 용어
4. 코드 파일 및 프로젝트 관련 용어
5. 웹 개발 기초 용어
6. 배포 및 서버 관련 용어
7. 자주 쓰는 명령어 용어
8. 에러 및 디버깅 관련 용어
9. 버전 관리 관련 용어
10. 미래이음연구소 AI 에이전트 셋업 서비스 안내

1. 바이브코딩이란?

바이브코딩(Vibe Coding)은 2025년 AI 연구자 안드레이 카르파시(Andrej Karpathy)가 처음 쓴 말로, “코드의 의미를 완전히 이해하지 않아도 AI와 대화하며 소프트웨어를 만드는 방식”을 뜻합니다. 쉽게 말하면 이렇습니다.

기존 코딩: 프로그래밍 언어 문법을 외우고 직접 코드를 작성

바이브코딩: AI에게 “로그인 기능 만들어줘”, “버튼 색을 파란색으로 바꿔줘”라고 말하면 AI가 코드를 대신 작성

덕분에 비전공자, 기획자, 마케터, 교사 등 누구나 실제로 작동하는 웹사이트, 앱, 자동화 도구를 만들 수 있게 되었습니다. 핵심은 논리적으로 무엇을 만들지 설명하는 능력, 즉 프롬프트 작성 능력입니다.

2. AI 도구 관련 용어

Claude (클로드)

Anthropic이 만든 AI 어시스턴트입니다. 바이브코딩에서 가장 많이 쓰이는 도구 중 하나로, 긴 코드를 작성하거나 복잡한 로직을 설명하는 데 뛰어납니다. claude.ai에서 웹 버전으로 사용하거나, Claude Code라는 터미널 버전으로 더 강력하게 사용할 수 있습니다.

ChatGPT (챗GPT)

OpenAI가 만든 AI 어시스턴트입니다. 전 세계에서 가장 많이 쓰이는 AI 도구로, 코드 작성부터 설명, 디버깅까지 폭넓게 활용됩니다. GPT-4o 모델이 현재 가장 많이 쓰입니다.

Cursor (커서)

AI가 내장된 코드 편집기입니다. VS Code를 기반으로 만들어졌으며, AI에게 “이 함수 수정해줘”, “버그 찾아줘”라고 말하면 바로 코드를 수정해줍니다. 바이브코딩에서 가장 인기 있는 도구입니다.

Windsurf (윈드서프)

Cursor와 비슷한 AI 코드 편집기입니다. Codeium이 만들었으며, 무료 플랜이 더 넉넉해서 입문자에게 추천됩니다.

Claude Code (클로드 코드)

터미널(명령줄)에서 실행하는 Claude AI 에이전트입니다. 프로젝트 전체 파일을 읽고, 여러 파일을 동시에 수정하고, 명령어를 직접 실행하는 등 더 강력한 작업이 가능합니다. 초보자에게는 다소 어렵지만, 익숙해지면 속도가 크게 빨라집니다.

MCP (Model Context Protocol)

AI 도구가 외부 서비스(구글 드라이브, 슬랙, 데이터베이스 등)와 연결될 수 있게 해주는 표준 규격입니다. 예를 들어 MCP를 통해 Claude가 구글 캘린더를 직접 읽거나, 파일을 자동으로 저장하는 것이 가능해집니다. 2024년 말 Anthropic이 공개했으며 현재 급속도로 확산 중입니다.

프롬프트 (Prompt)

AI에게 내리는 명령 또는 요청문입니다. “로그인 폼을 만들어줘”가 프롬프트입니다. 같은 결과물을 만들더라도 프롬프트를 어떻게 쓰느냐에 따라 결과 품질이 크게 달라집니다. 바이브코딩의 핵심 기술입니다.

컨텍스트 (Context)

AI가 현재 대화에서 기억하고 있는 정보의 범위입니다. AI는 대화창에 올려진 내용만 알고 있습니다. 파일을 붙여넣거나 코드를 공유해야 AI가 그 내용을 바탕으로 도움을 줄 수 있습니다. 컨텍스트 창(Context Window)이 길수록 더 많은 정보를 한 번에 처리할 수 있습니다.

3. 개발 환경 관련 용어

VS Code (비에스코드)

Microsoft가 만든 무료 코드 편집기입니다. 전 세계 개발자의 70% 이상이 사용하는 가장 대중적인 코드 편집기로, Cursor와 Windsurf가 이를 기반으로 만들어졌습니다. 처음 설치하면 폴더와 파일을 관리하는 좌측 탐색기, 코드를 입력하는 에디터 영역, 명령어를 입력하는 터미널로 구성됩니다.

터미널 (Terminal)

텍스트 명령으로 컴퓨터를 조작하는 검은 화면입니다. 윈도우에서는 PowerShell 또는 명령 프롬프트(cmd), Mac에서는 Terminal 앱이 이에 해당합니다. VS Code 안에도 터미널이 내장되어 있어 별도로 창을 열 필요가 없습니다. npm 설치, 서버 실행 등 대부분의 작업이 터미널에서 이루어집니다.

Node.js (노드제이에스)

자바스크립트를 브라우저 밖, 즉 내 컴퓨터나 서버에서 실행할 수 있게 해주는 프로그램입니다. 웹 개발 프로젝트 대부분이 Node.js를 필요로 합니다. 설치하면 npm이라는 패키지 관리자도 함께 설치됩니다.

npm (엔피엠)

Node Package Manager의 약자로, 다른 사람이 만든 코드(패키지, 라이브러리)를 쉽게 내 프로젝트에 설치해주는 도구입니다. 터미널에서 npm install 명령으로 사용합니다. “앱스토어에서 앱 설치하듯 코드 도구를 설치하는 것”이라고 생각하면 됩니다.

패키지 (Package)

다른 사람이 미리 만들어둔 코드 묶음입니다. 예를 들어 날짜 계산 기능, 이메일 발송 기능, 차트 그리기 기능 등을 처음부터 만들 필요 없이 npm install로 설치해서 바로 사용할 수 있습니다.

로컬 환경 (Local Environment)

내 컴퓨터에서만 돌아가는 개발 환경입니다. 인터넷에 공개되지 않고, 내 컴퓨터에서 테스트하는 단계입니다. 보통 localhost:3000 같은 주소로 브라우저에서 확인합니다.

localhost (로컬호스트)

내 컴퓨터 자체를 가리키는 주소입니다. 개발 중인 웹사이트를 인터넷에 올리지 않고 내 컴퓨터에서 미리 볼 때 사용합니다. 주로 localhost:3000, localhost:8080 같은 형태로 씁니다. 콜론(:) 뒤의 숫자는 포트 번호입니다.

4. 코드 파일 및 프로젝트 관련 용어

HTML (에이치티엠엘)

웹페이지의 뼈대를 만드는 언어입니다. 제목, 문단, 버튼, 이미지 등의 구조를 정의합니다. .html 확장자 파일에 작성합니다. “건물의 골조”에 해당합니다.

CSS (씨에스에스)

웹페이지의 디자인을 담당하는 언어입니다. 색상, 크기, 폰트, 간격, 애니메이션 등 모든 시각적 요소를 조절합니다. .css 확장자 파일에 작성하거나 HTML 파일 안에 넣을 수 있습니다. “건물의 인테리어”에 해당합니다.

JavaScript (자바스크립트)

웹페이지에 동적인 기능을 추가하는 언어입니다. 버튼 클릭 시 동작, 데이터 불러오기, 계산 등 상호작용이 필요한 모든 기능을 담당합니다. .js 확장자 파일에 작성합니다. “건물의 전기, 수도 시설”에 해당합니다.

React (리액트)

Meta(페이스북)가 만든 자바스크립트 라이브러리입니다. 웹페이지를 컴포넌트라는 작은 단위로 쪼개서 관리할 수 있게 해줍니다. 현재 가장 널리 쓰이는 프론트엔드 프레임워크로, 바이브코딩 프로젝트의 상당수가 React를 사용합니다.

Next.js (넥스트제이에스)

React를 기반으로 만든 웹 프레임워크입니다. 일반 React보다 빠른 속도, SEO(검색 최적화), 서버 기능 등이 추가되어 있습니다. 실제 서비스를 만들 때 React 대신 Next.js를 많이 사용합니다.

컴포넌트 (Component)

재사용 가능한 UI 조각입니다. 예를 들어 헤더, 버튼, 카드, 모달창 같은 것들을 각각 컴포넌트로 만들어두면 여러 페이지에서 재사용할 수 있습니다. 레고 블록처럼 조립해서 페이지를 만드는 개념입니다.

API (에이피아이)

Application Programming Interface의 약자로, 프로그램끼리 대화하는 방법입니다. 예를 들어 날씨 앱이 기상청 데이터를 가져올 때, 카카오 로그인을 연동할 때 API를 사용합니다. “식당에서 주문을 받는 웨이터” 역할이라고 생각하면 됩니다.

JSON (제이슨)

데이터를 주고받을 때 쓰는 형식입니다. 중괄호{}와 대괄호[]를 사용하며 사람도 읽을 수 있는 텍스트 형태입니다. API 응답, 설정 파일 등 거의 모든 곳에서 사용됩니다.

package.json

프로젝트의 이름, 버전, 사용하는 패키지 목록 등이 담긴 설정 파일입니다. npm install을 실행하면 이 파일을 보고 필요한 패키지를 자동으로 설치합니다. 프로젝트의 “설명서” 같은 파일입니다.

node_modules

npm install로 설치한 패키지들이 저장되는 폴더입니다. 용량이 매우 크기 때문에 다른 사람에게 프로젝트를 공유할 때는 이 폴더를 제외합니다. 받는 사람이 npm install을 다시 실행하면 자동으로 생성됩니다.

.env 파일

환경 변수(비밀 정보)를 저장하는 파일입니다. API 키, 데이터베이스 비밀번호 같은 민감한 정보를 코드에 직접 넣지 않고 .env 파일에 별도로 보관합니다. 절대로 깃허브 같은 곳에 올려서는 안 됩니다.

5. 웹 개발 기초 용어

프론트엔드 (Frontend)

사용자가 눈으로 보고 직접 조작하는 부분입니다. 화면에 표시되는 모든 것, 버튼, 입력창, 애니메이션 등이 프론트엔드에 해당합니다. HTML, CSS, JavaScript, React 등이 프론트엔드 기술입니다.

백엔드 (Backend)

사용자에게는 보이지 않는 서버 쪽 로직입니다. 데이터 저장, 로그인 처리, 결제 처리 등이 백엔드에서 이루어집니다. Node.js, Python, PHP 등이 백엔드 기술입니다.

데이터베이스 (Database)

데이터를 구조적으로 저장하는 창고입니다. 회원 정보, 게시글, 주문 내역 등 모든 데이터가 데이터베이스에 저장됩니다. MySQL, PostgreSQL, MongoDB 등이 대표적입니다.

Tailwind CSS (테일윈드 씨에스에스)

CSS를 더 쉽게 쓸 수 있게 해주는 도구입니다. 미리 만들어진 클래스 이름을 HTML에 추가하는 것만으로 디자인을 적용할 수 있습니다. 예를 들어 class=”bg-blue-500 text-white rounded p-4″처럼 쓰면 파란 배경의 둥근 버튼이 만들어집니다. 바이브코딩에서 거의 표준처럼 사용됩니다.

반응형 웹 (Responsive Web)

PC, 태블릿, 스마트폰 등 다양한 화면 크기에 맞게 자동으로 레이아웃이 바뀌는 웹사이트입니다. 요즘 만들어지는 대부분의 웹사이트는 반응형으로 제작됩니다.

SEO (에스이오)

Search Engine Optimization, 검색 엔진 최적화입니다. 구글, 네이버 같은 검색엔진에서 내 사이트가 상위에 노출되도록 최적화하는 작업입니다. 제목 태그, 메타 설명, 사이트 속도 등이 SEO에 영향을 줍니다.

6. 배포 및 서버 관련 용어

배포 (Deploy)

내 컴퓨터에서 만든 것을 인터넷에서 실제로 접속할 수 있게 올리는 작업입니다. 로컬에서 개발을 완료한 후 배포를 해야 다른 사람들이 사용할 수 있습니다.

Vercel (버셀)

Next.js, React 프로젝트를 무료로 빠르게 배포할 수 있는 서비스입니다. GitHub 저장소와 연결하면 코드를 올릴 때마다 자동으로 새 버전이 배포됩니다. 바이브코딩 프로젝트 배포에 가장 많이 쓰입니다.

도메인 (Domain)

웹사이트 주소입니다. google.com, naver.com 같은 것입니다. IP 주소(숫자)를 사람이 기억하기 쉬운 문자로 바꾼 것입니다. 도메인은 가비아, 후이즈 등에서 구매할 수 있습니다.

호스팅 (Hosting)

웹사이트 파일을 인터넷에서 24시간 접속 가능한 서버에 올려두는 서비스입니다. Vercel, Netlify는 무료 호스팅이고, AWS, NAS 같은 곳은 직접 관리하는 방식입니다.

포트 (Port)

컴퓨터가 여러 프로그램을 동시에 실행할 때 각각을 구분하는 번호입니다. 웹은 보통 80번, HTTPS는 443번을 사용합니다. 개발 중에는 3000, 8080 같은 번호를 씁니다. localhost:3000에서 “:3000″이 포트 번호입니다.

환경 변수 (Environment Variable)

프로그램이 실행되는 환경에 따라 달라지는 설정값입니다. 개발 서버 주소, API 키, 비밀번호 같은 것들을 코드에 직접 쓰지 않고 환경 변수로 관리합니다. .env 파일에 저장합니다.

7. 자주 쓰는 명령어 용어

npm install

package.json에 명시된 패키지를 모두 설치하는 명령어입니다. 새 프로젝트를 처음 받았을 때 반드시 실행해야 합니다.

npm run dev

개발 서버를 시작하는 명령어입니다. 실행하면 localhost:3000 같은 주소에서 내 프로젝트를 브라우저로 확인할 수 있습니다.

npm run build

프로젝트를 실제 배포할 수 있는 형태로 변환하는 명령어입니다. 코드를 압축하고 최적화해서 빠르게 로딩되는 결과물을 만듭니다.

cd (Change Directory)

터미널에서 폴더를 이동하는 명령어입니다. cd 폴더이름을 입력하면 해당 폴더로 이동합니다. cd ..을 입력하면 상위 폴더로 올라갑니다.

ls / dir

현재 폴더의 파일 목록을 보여주는 명령어입니다. Mac/Linux에서는 ls, Windows에서는 dir을 사용합니다.

8. 에러 및 디버깅 관련 용어

에러 (Error)

코드 실행 중 발생하는 오류입니다. 빨간 글씨로 터미널이나 브라우저 개발자 도구에 표시됩니다. 에러 메시지를 그대로 복사해서 AI에게 붙여넣으면 대부분 해결 방법을 알려줍니다.

디버깅 (Debugging)

코드의 오류(버그)를 찾아 수정하는 과정입니다. 바이브코딩에서는 에러 메시지를 AI에게 전달하면 AI가 원인과 수정 방법을 알려줍니다.

콘솔 (Console)

브라우저 개발자 도구에서 에러나 로그를 확인하는 창입니다. Chrome에서 F12 키를 누르면 열립니다. console.log()로 값을 출력해서 디버깅에 활용합니다.

개발자 도구 (Developer Tools)

브라우저에 내장된 개발 도구입니다. F12 또는 마우스 오른쪽 클릭 후 “검사”를 눌러 엽니다. HTML 구조 확인, CSS 수정 미리보기, 네트워크 요청 확인, 에러 확인 등에 사용합니다.

syntax error (문법 오류)

코드 문법이 틀렸을 때 발생하는 에러입니다. 괄호가 안 닫혔거나, 세미콜론이 빠졌거나, 따옴표가 맞지 않을 때 발생합니다. AI에게 에러 메시지를 보여주면 즉시 찾아줍니다.

9. 버전 관리 관련 용어

Git (깃)

코드 변경 내역을 기록하고 관리하는 도구입니다. 언제 무엇이 바뀌었는지 기록되고, 이전 버전으로 되돌릴 수 있습니다. 협업할 때도 필수입니다. “코드의 저장 + 되돌리기 기능”이라고 이해하면 됩니다.

GitHub (깃허브)

Git으로 관리하는 코드를 온라인에 저장하고 공유하는 플랫폼입니다. 전 세계 개발자들이 코드를 올리고 공유합니다. Vercel과 연결하면 GitHub에 코드를 올릴 때마다 자동 배포도 됩니다.

commit (커밋)

코드 변경 내역을 Git에 저장하는 행위입니다. “파일 저장”과 비슷하지만, 변경 이유를 메시지로 함께 기록할 수 있습니다. 예를 들어 git commit -m “로그인 버그 수정”처럼 씁니다.

push (푸시)

로컬 컴퓨터의 커밋 내역을 GitHub 같은 원격 저장소에 업로드하는 것입니다. git push 명령어로 실행합니다.

clone (클론)

GitHub에 있는 프로젝트를 내 컴퓨터로 복사해 가져오는 것입니다. git clone 주소 명령어로 실행합니다.

마치며

처음에는 낯선 용어들이 많아 어렵게 느껴질 수 있습니다. 하지만 바이브코딩의 핵심은 이 모든 것을 외우는 게 아닙니다. 모르는 용어가 나올 때마다 AI에게 “이게 뭐야?”라고 물어보는 것이 더 효율적입니다. 이 용어집은 그 물음을 조금 더 편하게 시작할 수 있도록 도와주는 발판입니다.

바이브코딩은 지금 이 순간에도 빠르게 진화하고 있습니다. 완벽하게 이해하려 하기보다, 일단 만들어보면서 배우는 것이 가장 빠른 방법입니다.