바이브코딩이 무엇인지, 앱이 어떻게 돌아가는지 지도 그리기

"바이브코딩"이라는 말의 시작

"코드를 직접 타자 치지 않고, AI와 대화로 만드는 방식"이다.

🎯 한 문장

"코드를 직접 타자 치지 않고, AI와 대화로 만드는 방식"입니다.

💡 쉬운 비유

요리를 생각해봅니다. 예전에는 내가 칼을 잡고, 불을 올리고, 간을 맞췄습니다. 바이브코딩은 다릅니다.

• 당신은 주방장이 아니라 손님입니다.
• "소금 좀 덜 넣어줘", "한 번 더 끓여줘" 말만 하면 됩니다.
• 요리사(AI)가 움직이고, 당신은 맛보고 결정만 합니다.

단, 손님도 "덜 짜게 해주세요"를 말할 줄 알아야 하고, 나온 음식이 너무 짜면 알아차려야 합니다. 바이브코딩도 마찬가지입니다.

🏷️ 정확한 용어

• 한국어: 바이브코딩, AI 코딩
• 영어(원어): Vibe coding, AI-assisted coding, Prompt-driven development
• 관련 개념: AI IDE · Large Language Model (LLM) · Prompt · Code generation · AI Agent
• 혼동하기 쉬운 용어: "No-code" ≠ Vibe coding — No-code는 비주얼 도구로 앱을 만드는 방식이고, Vibe coding은 자연어 프롬프트로 코드를 생성하는 방식입니다.

웹 앱은 세 조각으로 나뉜다

앱은 화면(프론트엔드) · 두뇌(백엔드) · 기억(데이터베이스) 세 덩어리가 대화하며 돌아간다.

🎯 한 문장

앱은 화면(프론트엔드) · 두뇌(백엔드) · 기억(데이터베이스) 세 덩어리가 대화하며 돌아갑니다.

💡 쉬운 비유 — 식당

• 프론트엔드 = 홀. 손님이 보는 메뉴판·테이블·직원 유니폼.
• 백엔드 = 주방. 요리를 만들고, 재고를 관리하고, 포장합니다.
• 데이터베이스 = 냉장고·창고. 재료(데이터)를 장기 보관합니다.
• 홀 직원이 주문서(요청)를 주방에 전달하고, 주방은 냉장고에서 재료를 꺼내 요리를 만들어 홀로 보냅니다.

🏷️ 정확한 용어

• 한국어: 프론트엔드 / 백엔드 / 데이터베이스
• 영어(원어): Frontend (Client-side) / Backend (Server-side) / Database (Persistence layer)
• 관련 개념: Three-tier architecture · Full-stack · API · HTTP · REST
• 혼동하기 쉬운 용어: "Full-stack" ≠ "둘 다 잘함" — Full-stack은 프론트엔드·백엔드 모두를 다루는 개발 범위를 가리키는 공식 용어입니다.

HTTP와 API: 프로그램끼리 대화하는 법

HTTP는 인터넷 위에서 통하는 말이고, API는 "이렇게 부르면 이렇게 답할게"라는 메뉴판이다.

🎯 한 문장

HTTP는 인터넷 위에서 통하는 말이고, API는 "이렇게 부르면 이렇게 답할게"라는 메뉴판입니다.

💡 쉬운 비유 — 식당 주문서

• 손님(프론트): "4번 메뉴 하나요."(요청)
• 웨이터(API): 주방에 전달. 이때 형식이 정해져 있습니다 — "테이블 번호 · 메뉴 번호 · 수량".
• 주방(백엔드): 요리를 만들어 접시에 담습니다(응답).
• 상태: "만들어졌습니다(200)", "그 메뉴 없습니다(404)", "주방 불났습니다(500)".

🏷️ 정확한 용어

• 한국어: HTTP, API, 엔드포인트, 상태코드
• 영어(원어): HTTP (HyperText Transfer Protocol) / API (Application Programming Interface) / Endpoint / Status code
• 관련 개념: REST (Representational State Transfer) · JSON · Request · Response · Method
• 혼동하기 쉬운 용어: "API" ≠ "백엔드" — API는 규칙과 메뉴판이고, 백엔드는 그 규칙을 구현한 서버 코드 전체입니다.

데이터베이스: 앱의 기억장치

DB는 껐다 켜도 남아야 하는 것(회원·글·주문)을 저장하는 곳이다.

🎯 한 문장

DB는 껐다 켜도 남아야 하는 것(회원·글·주문)을 저장하는 곳입니다.

💡 쉬운 비유 — 도서관

• **책(데이터)**이 아무렇게나 쌓여 있으면 찾을 수 없습니다.
• **분류(테이블)**와 **색인(index)**이 있어야 "소설 > 한국 > 김영하"처럼 금세 찾습니다.
• DB는 그 "분류+색인" 시스템입니다.

또 다른 비유 — 엑셀 vs 노트

• SQL(관계형 DB) = 엑셀 파일. 행과 열이 딱 맞아야 합니다. 회원 번호·이름·이메일처럼 같은 틀.
• NoSQL = 자유 노트. "이 회원은 메모가 있고 저 회원은 없고"처럼 모양이 들쭉날쭉.

🏷️ 정확한 용어

• 한국어: 데이터베이스, 관계형 데이터베이스, 비관계형 데이터베이스
• 영어(원어): Database / RDBMS (Relational Database Management System) / NoSQL / Document store / Key-value store
• 줄여 쓸 때: DB, DBMS
• 관련 개념: Schema · Table · Primary key · Foreign key · Index · CRUD · SQL (Structured Query Language)
• 혼동하기 쉬운 용어: "NoSQL" ≠ "SQL을 쓰지 않는다" — NoSQL은 "Not Only SQL"의 약어로, 관계형 모델에 한정되지 않는 DB를 통칭합니다.

도구 지형도: 내가 쓸 것 고르기

"코드를 얼마나 볼 것인가"를 기준으로 도구를 3갈래로 나누고, 한 개만 고른다.

🎯 한 문장

"코드를 얼마나 볼 것인가"를 기준으로 도구를 3갈래로 나누고, 한 개만 고릅니다.

💡 쉬운 비유 — 운전

• 완전 자율주행 = Lovable, Bolt, v0. 목적지만 말하면 알아서 갑니다.
• 반자율(차선유지) = Cursor, GitHub Copilot, Windsurf. 핸들은 내가 잡되 차가 돕습니다.
• 수동 = Claude Code, Aider, Codex CLI. 터미널에서 AI와 엔진을 분리해 일합니다.

어떤 게 좋다 나쁘다가 아니라, 본인의 운전 성향에 맞춰야 합니다.

🏷️ 정확한 용어

• 한국어: AI 코딩 도구, AI IDE, AI 에이전트
• 영어(원어): AI IDE (AI-powered Integrated Development Environment) / AI Agent / Prompt-driven platform / AI code editor
• 관련 개념: IDE · Code completion · Chat-based coding · Inline suggestion · Agent loop
• 혼동하기 쉬운 용어: "AI IDE" ≠ "AI Agent" — AI IDE는 개발자가 에디터에서 도움을 받는 형태이고, AI Agent는 파일 시스템·터미널을 자율적으로 조작하는 형태입니다.

"내 컴퓨터에서만 돼요" 문제

`localhost`는 내 컴퓨터를 가리키는 주소. 남이 접속하려면 배포(deploy)가 필요하다.

🎯 한 문장

localhost는 내 컴퓨터를 가리키는 주소입니다. 남이 접속하려면 **배포(deploy)**가 필요합니다.

💡 쉬운 비유 — 집밥 vs 식당

• 내 컴퓨터에서 돌아가는 앱 = 우리 집 주방에서 만든 음식. 가족만 먹을 수 있습니다.
• 배포된 앱 = 식당. 누구나 주소를 알고 오면 먹을 수 있습니다.
• 배포 플랫폼 = 상가 건물 주인. 전기·수도·간판을 제공합니다.

🏷️ 정확한 용어

• 한국어: 로컬호스트, 배포, 호스팅
• 영어(원어): localhost / Loopback address / Deploy / Deployment / Hosting / Web hosting
• 관련 개념: IP address · Port · DNS · Domain · Cloud platform · Static hosting · Serverless
• 혼동하기 쉬운 용어: "Hosting" ≠ "Deployment" — Hosting은 서버 공간을 빌리는 것이고, Deployment는 코드를 그 공간에 올리고 실행 가능하게 만드는 과정입니다.