Vibe Coding Lecture 01
바이브 코딩 입문자를 위한
코딩 용어 정리
웹 개발 기초 개념부터 AI 코딩 용어까지 한 번에 이해하기
1강 강의자료
오늘 다룰 6가지 영역
코딩 용어는 외우는 것이 아니라, 서비스를 만들어보며 반복적으로 익히는 개념입니다.
클라이언트와 서버
프론트엔드와 백엔드
웹서비스 기본 구조
라우트, 프레임워크, API
배포, 호스팅, GitHub
AI 코딩 용어
용어를 암기하기보다 실제 서비스 구조 안에서 연결해 이해합니다.
클라이언트는 요청하고, 서버는 응답합니다
손님이 주문하면 카페가 음료를 만들어 주는 구조와 비슷합니다.
클라이언트
사용자의 스마트폰, PC, 브라우저처럼 요청을 보내는 쪽입니다.
서버
네이버, 유튜브, 쇼핑몰의 실제 시스템처럼 요청에 응답하는 쪽입니다.
브라우저가 “페이지 보여줘”라고 요청하면, 서버가 웹페이지를 보내줍니다.
서버가 처리하는 일
서버는 여러 사용자의 요청을 동시에 처리하며 24시간 켜져 있어야 합니다.
웹페이지 전송
데이터 저장
로그인 처리
결제 처리
파일 관리
외부 서비스 연동
서버는 보이지 않는 곳에서 서비스의 핵심 기능을 처리합니다.
클라이언트 프로그램은 내 기기 안에서 실행됩니다
HTML, CSS, JavaScript만으로 만든 메모장처럼 서버 저장 없이 동작할 수 있습니다.
내 PC에서 작성한 데이터는 내 PC에만 있음
스마트폰과 자동 공유되지 않음
로그인과 서버 저장 기능이 없으면 기기 간 동기화가 어려움
서버가 없으면 프로그램은 동작해도 데이터 공유와 동기화가 제한됩니다.
프론트엔드는 보이는 곳, 백엔드는 보이지 않는 곳
매장으로 비유하면 프론트엔드는 인테리어와 주문 화면, 백엔드는 주방과 결제 시스템입니다.
프론트엔드
사용자에게 보이는 화면 영역입니다.
백엔드
사용자에게 직접 보이지 않는 서버 영역입니다.
웹서비스는 보이는 화면과 보이지 않는 처리 영역이 함께 움직입니다.
HTML, CSS, JavaScript
프론트엔드의 기본 3요소입니다.
HTML
웹페이지의 뼈대와 구조를 만듭니다.
CSS
웹페이지의 디자인과 스타일을 입힙니다.
JavaScript
버튼 클릭, 슬라이드, 팝업 같은 동적인 기능을 만듭니다.
HTML은 구조, CSS는 디자인, JavaScript는 움직임입니다.
JavaScript와 Java는 다릅니다
이름만 비슷할 뿐 서로 다른 언어입니다.
JavaScript
브라우저에서 주로 실행되며 웹 화면의 동작을 담당합니다.
Java
서버, 앱, 기업용 시스템 등에서 많이 사용됩니다.
핫도그가 개가 아니듯, JavaScript는 Java가 아닙니다.
MVC는 역할별로 나누어 만드는 구조입니다
화면, 데이터, 제어 흐름을 분리해 관리합니다.
Model
데이터베이스와 관련된 로직을 처리합니다.
View
사용자에게 보여지는 화면을 담당합니다.
Controller
Model과 View 사이의 흐름을 제어합니다.
MVC는 화면, 데이터, 제어를 나누어 관리하는 구조입니다.
데이터베이스는 데이터를 저장하고 빠르게 조회하는 시스템입니다
엑셀처럼 행과 열로 데이터를 관리하지만, 훨씬 많은 데이터를 안정적으로 처리합니다.
많은 사용자가 동시에 접근 가능
대량 데이터 저장 가능
빠른 검색 가능
데이터 안정성 확보
권한과 보안 관리 가능
서비스가 커질수록 데이터베이스는 필수 인프라가 됩니다.
서버 프로그램은 외부 요청을 받아 처리하는 실행 환경입니다
Apache와 Nginx는 웹서버, Node.js는 JavaScript 서버 실행 환경으로 이해하면 됩니다.
Apache
PHP 웹사이트에서 많이 쓰는 전통적인 웹서버입니다.
Nginx
빠른 정적 파일 처리와 리버스 프록시에 많이 쓰입니다.
Node.js
JavaScript로 서버 기능과 API를 실행할 수 있는 런타임입니다.
정리하면 Apache/Nginx는 요청을 받아주는 웹서버, Node.js는 서버 코드를 실행하는 환경입니다.
IP 주소는 인터넷에 연결된 컴퓨터의 고유 주소입니다
집마다 주소가 있듯, 서버 컴퓨터에도 주소가 있습니다.
사용자가 서버의 IP 주소로 접속하면 해당 서버에 연결됨
숫자로 된 IP 주소는 사람이 외우기 어려움
IP는 컴퓨터가 이해하기 좋은 주소입니다.
라우트는 URL에 맞는 화면을 안내합니다
사용자가 어느 길로 들어왔는지 보고 맞는 페이지를 보여주는 기능입니다.
example.com → 메인 페이지
example.com/news → 뉴스 페이지
example.com/login → 로그인 페이지
라우트는 URL 주소에 따라 어떤 페이지를 보여줄지 결정합니다.
프레임워크는 웹서비스 제작용 기본 골격입니다
자주 쓰는 구조와 기능을 미리 만들어 놓은 도구입니다.
개발 속도 향상
보안 기능 활용
라우팅 기능 제공
DB 연결 지원
로그인, 세션, 폼 처리 지원
에러 처리와 파일 업로드 지원
프레임워크를 쓰면 기본 구조를 빠르게 잡을 수 있습니다.
대표 웹 프레임워크
프로젝트 목적과 언어에 맞게 선택합니다.
Python
Django, Flask, FastAPI
Node.js
Express, Next.js
Java
Spring
PHP
Laravel, CodeIgniter
바이브 코딩에서는 AI에게 프로젝트에 맞는 프레임워크 추천을 요청해도 좋습니다.
API는 프로그램끼리 대화하는 약속입니다
프로그램끼리 요청과 응답을 주고받는 방법입니다.
카카오 로그인 API
네이버 로그인 API
지도 API
날씨 API
결제 API
API는 내 서비스가 다른 서비스의 기능이나 데이터를 사용할 수 있게 해줍니다.
API 사용 예시: 날씨 앱
직접 날씨 데이터를 만들지 않아도 외부 데이터를 활용할 수 있습니다.
사용자가 날씨 앱을 연다
앱이 날씨 API에 요청한다
날씨 데이터 서버가 결과를 응답한다
앱은 받은 데이터를 화면에 보여준다
외부 서비스의 데이터와 기능을 빌려 쓰는 것이 API 활용입니다.
배포는 내 작업물을 공개 서비스로 바꾸는 과정입니다
내 컴퓨터에서 만든 서비스를 서버에 올려 다른 사람도 접속할 수 있게 만듭니다.
배포 전
내 컴퓨터에서만 실행됩니다.
배포 후
인터넷 주소를 통해 누구나 접속할 수 있습니다.
배포는 “내 작업물”을 “공개 서비스”로 바꾸는 과정입니다.
호스팅은 서버 공간을 빌리는 것입니다
내 서비스를 올려둘 공간을 빌려 운영합니다.
종류
웹 호스팅, 서버 호스팅, 클라우드 호스팅
대표 서비스
AWS, Google Cloud Platform, Microsoft Azure, Vercel, Netlify, Cloudflare Pages
호스팅은 서비스를 인터넷에 올려두는 공간입니다.
서버리스는 서버 관리를 직접 하지 않는 방식입니다
서버가 없는 것이 아니라, 서버 운영 부담을 플랫폼에 맡기는 방식입니다.
장점
코드만 올리면 배포 가능하고 서버 세팅 부담이 적습니다.
주의할 점
트래픽 증가 시 비용이 발생할 수 있고, 복잡한 서버 작업에는 제한이 있을 수 있습니다.
서버리스는 빠르게 시작할 때 유용하지만 구조적 한계도 확인해야 합니다.
EC2와 Lightsail
둘 다 AWS에서 서버를 빌리는 방식이지만 난이도와 자유도가 다릅니다.
AWS EC2
자유도가 높은 가상 서버입니다. 원하는 대로 세팅 가능하고 확장성이 높습니다.
AWS Lightsail
초보자용으로 쉽게 세팅된 서버 서비스입니다.
빠르게 시작하려면 Lightsail, 자유롭게 운영하려면 EC2가 적합합니다.
GitHub는 코드의 저장소이자 세이브 포인트입니다
코드를 저장하고 버전을 관리하는 서비스입니다.
코드 저장소
버전 관리
협업
이전 상태로 복구
배포 서비스와 연동
게임의 세이브 포인트처럼 코드 변경 기록을 저장합니다.
커밋은 개발 과정의 세이브 포인트입니다
코드의 현재 상태를 저장하는 작업입니다.
게임에서 저장 버튼을 누르는 것과 비슷함
AI가 코드를 잘못 수정해도 이전 버전으로 돌아갈 수 있음
커밋을 자주 남기면 실험과 복구가 쉬워집니다.
프롬프트는 AI에게 보내는 질문이나 명령입니다
좋은 결과를 얻으려면 요청을 구체적으로 전달해야 합니다.
나쁜 프롬프트
홈페이지 만들어줘 / 에러 고쳐줘 / 예쁘게 바꿔줘
좋은 프롬프트
기술, 기능, 현재 코드, 에러 메시지, 원하는 결과 기준을 함께 제공합니다.
AI에게 일을 맡길수록 요청 기준이 중요해집니다.
컨텍스트는 AI가 이해해야 할 배경 정보입니다
AI에게는 질문보다 맥락이 더 중요할 때가 많습니다.
현재 프로젝트 구조
사용 중인 기술 스택
현재 코드
에러 메시지
원하는 최종 결과
지켜야 할 조건
좋은 컨텍스트가 있어야 AI가 정확한 답에 가까워집니다.
토큰과 컨텍스트 윈도우
AI가 텍스트를 읽고 기억하는 범위를 이해해야 긴 코드 작업을 잘 맡길 수 있습니다.
토큰
AI가 텍스트를 읽는 단위입니다.
컨텍스트 윈도우
AI가 한 번에 읽고 기억할 수 있는 최대 토큰 범위입니다.
컨텍스트 윈도우가 클수록 더 많은 파일과 맥락을 함께 이해할 수 있습니다.
컨텍스트 엔지니어링은 맥락을 설계하는 기술입니다
바이브 코딩의 핵심은 프롬프트보다 컨텍스트 설계에 가깝습니다.
기술 스택
현재 코드
원하는 결과
제약 조건
에러와 시도한 해결 방법
AI가 좋은 결과를 내도록 필요한 맥락을 정리하는 것이 핵심입니다.
할루시네이션은 그럴듯하지만 틀린 답입니다
AI 답변을 실행과 테스트로 확인해야 합니다.
예시
없는 함수가 있다고 말하거나, 수정했다고 했지만 실제로 해결되지 않는 경우입니다.
대응
실행해서 확인하고, 에러 메시지를 다시 제공하고, 작은 단위로 수정합니다.
AI 답변은 참고하고, 최종 판단은 실행 결과로 확인합니다.
AI 에이전트는 계획하고 실행하고 확인합니다
일반 AI가 질문에 답한다면, AI 에이전트는 목표 달성까지 반복 실행합니다.
기능 설계
코드 작성
테스트
수정
배포 보조
AI 에이전트는 코딩 작업의 실행 파트너에 가깝습니다.
MCP는 AI와 외부 도구를 연결하는 규격입니다
Model Context Protocol의 약자로, AI에게 외부 기능을 연결해주는 플러그인 규격에 가깝습니다.
파일 시스템 연결
데이터베이스 연결
GitHub 연결
브라우저 도구 연결
업무 도구 연결
MCP는 AI가 더 많은 도구를 사용할 수 있게 만드는 연결 규격입니다.
처음부터 완벽히 이해하려고 하지 않아도 됩니다
대충 만들고 반복하면서 익히는 것이 바이브 코딩에 더 잘 맞습니다.
작은 기능부터 만든다
자주 저장한다
자주 테스트한다
에러 메시지를 버리지 않는다
AI에게 충분한 맥락을 준다
필요할 때만 구조를 고도화한다
반복과 확인이 실력을 만듭니다.
꼭 기억할 핵심 용어
이 단어들은 앞으로 서비스를 만들면서 계속 만나게 됩니다.
클라이언트
서버
프론트엔드
백엔드
데이터베이스
라우트
프레임워크
API
배포
호스팅
GitHub
프롬프트
컨텍스트
할루시네이션
AI 에이전트
MCP
코딩 용어는 서비스를 만들며 자연스럽게 익히는 실전 언어입니다.
모든 용어를 완벽히 외울 필요는 없습니다
핵심 개념을 반복적으로 접하면서 AI에게 더 정확히 요청할 수 있게 되는 것이 목표입니다.
클라이언트, 서버, 프론트엔드, 백엔드, API, 배포, GitHub는 계속 반복해서 만납니다
프롬프트와 컨텍스트를 이해하면 AI 코딩 결과물이 빨리 좋아집니다
용어는 암기가 아니라 실전에서 익히는 언어입니다
개념이 잡히면 AI에게 더 정확히 요청할 수 있고, 결과물도 더 빠르게 개선할 수 있습니다.
Next Material
바이브코딩 프롬프트 모음
PHP MVC 프로젝트를 AI와 함께 만들 때 바로 사용할 수 있는 환경 점검, 프로젝트 생성, MVC 구조, DB 연결, 오류 해결 프롬프트를 모았습니다.
01
환경 세팅과 프로젝트 구조 생성
02
MVC, PDO, Tailwind/jQuery 구성
03
오류 해결과 문서화 프롬프트